feat: add build script and sync version with woj-server

Dockerfile

@@ -0,0 +1,27 @@
+# Builder
+FROM docker.io/library/node:slim AS builder
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ca-certificates \
+    curl \
+    git \
+    gnupg \
+    && rm -rf /var/lib/apt/lists/*
+
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+WORKDIR /builder
+
+COPY package.json /builder/package.json
+COPY pnpm-lock.yaml /builder/pnpm-lock.yaml
+RUN pnpm install --frozen-lockfile
+
+COPY . /builder
+RUN pnpm run build
+
+# Main
+FROM docker.io/library/node:slim
+
+WORKDIR /app
+COPY --from=builder /builder/dist /app

build_image.sh

@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+
+DOCKER="${DOCKER:-podman}"
+VERSION=$(jq -r .version < package.json)
+IMAGE_PREFIX=${IMAGE_PREFIX:-"git.0x7f.app/woj"}
+
+set -x
+
+$DOCKER build -t "${IMAGE_PREFIX}/woj-ui:${VERSION}" .
+$DOCKER push "${IMAGE_PREFIX}/woj-ui:${VERSION}"

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vite-template-redux",
     "private": true,
-    "version": "1.0.0",
+    "version": "1.3.1-dev",
     "type": "module",
     "scripts": {
         "dev": "vite",

src/components/Highlight.tsx

@@ -1,11 +1,21 @@
 import { Code, useColorModeValue } from "@chakra-ui/react";
 import { Highlight as PrismHighlight, themes } from "prism-react-renderer";
+import type React from "react";
 
 interface HighlightProps {
     lang: string;
     code: string;
 }
 
+const linenoStyle: React.CSSProperties = {
+    display: "inline-block",
+    width: "1.5em",
+    textAlign: "right",
+    marginRight: "0.6em",
+    userSelect: "none",
+    opacity: "0.5",
+};
+
 export default function Highlight(props: HighlightProps) {
     const codeTheme = useColorModeValue(themes.oneLight, themes.oneDark);
 
@@ -22,6 +32,7 @@ export default function Highlight(props: HighlightProps) {
                 >
                     {tokens.map((line, i) => (
                         <div key={i} {...getLineProps({ line })}>
+                            <span style={linenoStyle}>{i + 1}</span>
                             {line.map((token, key) => (
                                 <span key={key} {...getTokenProps({ token })} />
                             ))}