Merge pull request #67 from Edirom/47-bug-drawing-measures-not-possible

47 bug drawing measures not possible

Author: hizclick

.dockerignore

@@ -25,3 +25,6 @@ pnpm-debug.log*
 
 #Electron-builder output
 dist_electron
+/docs/.vuepress/.temp
+/docs/.vuepress/.cache
+/docs/.vuepress/dist

.gitignore

@@ -23,10 +23,13 @@ pnpm-debug.log*
 *.sw?
 
 # VuePress default directories
-docs/.vuepress/.temp
-docs/.vuepress/.cache
-docs/.vuepress/dist
+/docs/.vuepress/.temp
+/docs/.vuepress/.cache
+/docs/.vuepress/dist
 
 #Electron-builder output
 /dist_electron
 .env
+
+# Ignore processed config files
+docs/.vuepress/config.js.*

40-create-ghcred.sh

@@ -1,24 +1,40 @@
 #!/bin/sh
+set -e
 
-# Set default value for VUE_APP_PUBLIC_PATH if not provided
-# Remove leading and trailing whitespace and slashes from VUE_APP_PUBLIC_PATH
-VUE_APP_PUBLIC_PATH=$(echo $VUE_APP_PUBLIC_PATH | sed 's/^\s*\///;s/\/\s*$//')
+# Accept empty = root
+VUE_APP_PUBLIC_PATH="${VUE_APP_PUBLIC_PATH:-}"
 
-# Add leading slash only if string is not empty
-if [ "$VUE_APP_PUBLIC_PATH" != "/" ] && [ "$VUE_APP_PUBLIC_PATH" != "" ]; then
-    VUE_APP_PUBLIC_PATH="/$VUE_APP_PUBLIC_PATH"
+# Normalize: allow "", "/" (root) or "/subpath"
+case "$VUE_APP_PUBLIC_PATH" in
+  ""|"/") NORMALIZED_PATH="/" ;;   # empty or "/" means root
+  /*)     NORMALIZED_PATH="${VUE_APP_PUBLIC_PATH%/}" ;;  # already starts with / but strip off trailing /
+  *)      NORMALIZED_PATH="/${VUE_APP_PUBLIC_PATH%/}" ;; # prepend / and strip off trailing /
+esac
+
+
+echo "Using VUE_APP_PUBLIC_PATH='${VUE_APP_PUBLIC_PATH}' (normalized='${NORMALIZED_PATH}')"
+
+# Create symlink for subpath so /demo works by pointing to /
+if [ "$NORMALIZED_PATH" != "/" ]; then
+  # create parent directories if needed for subsubpaths like /foo/bar/buz
+  mkdir -p /usr/share/nginx/html`dirname $NORMALIZED_PATH`
+  ln -snf /usr/share/nginx/html "/usr/share/nginx/html$NORMALIZED_PATH"
 fi
 
-# Link the Vue.js app to the public path
-ln -s /usr/share/nginx/html /usr/share/nginx/html/"$VUE_APP_PUBLIC_PATH"
-sed -i "s+/myAppPlaceholder+$VUE_APP_PUBLIC_PATH+g" /usr/share/nginx/html/index.html
-sed -i "s+/myAppPlaceholder+$VUE_APP_PUBLIC_PATH+g" /usr/share/nginx/html/js/app.*.js
-
-# Create NGINX configuration from environment variables
-# The @ character is used to prevent envsubst from interpreting NGINX variables
-cat <<EOT | envsubst | tr '@' '$' >/GH_OAUTH_CLIENT.conf
-# Handle CLIENT_ID, CLIENT_SECRET, and CALL_BACK - they can be empty
-set @CLIENT_ID "${CLIENT_ID:-}";
-set @CLIENT_SECRET "${CLIENT_SECRET:-}";
-set @CALL_BACK "${CALL_BACK:-}";
+cat > /GH_OAUTH_CLIENT.conf <<EOT
+set \$PUBLIC_PATH $NORMALIZED_PATH;
 EOT
+
+# ---- Replace placeholders in built files ----
+PLACEHOLDER="/myAppPlaceholder"          # ensures single trailing slash
+
+find /usr/share/nginx/html \
+  -type f \( -name "*.html" -o -name "*.js" -o -name "*.css" \) -print0 \
+| while IFS= read -r -d '' f; do
+  sed -i "s|${PLACEHOLDER}/|${NORMALIZED_PATH%/}/|g" "$f" # %/ removes trailing slash for correct replacement
+  sed -i "s|${PLACEHOLDER}|${NORMALIZED_PATH}|g" "$f"
+done
+
+# replace myAppPlaceholder in nginx configuration
+sed -i "s|${PLACEHOLDER}/|${NORMALIZED_PATH%/}/|g" /etc/nginx/nginx.conf # %/ removes trailing slash for correct replacement
+sed -i "s|${PLACEHOLDER}|${NORMALIZED_PATH}|g" /etc/nginx/nginx.conf

Dockerfile

@@ -1,16 +1,41 @@
-FROM node:latest as builder
+# ---- 1) Base build stage ----
+FROM node:20-alpine AS base
+WORKDIR /app
 
-WORKDIR /usr/app
+# Install deps first (cache-friendly)
+COPY package.json package-lock.json* ./
+RUN if [ -f package-lock.json ]; then \
+      npm ci --legacy-peer-deps; \
+    else \
+      npm install --legacy-peer-deps; \
+    fi
+
+# Bring in the full source (SPA + docs)
 COPY . .
-# RUN echo "VUE_APP_CLIENT_ID=$CLIENT_ID" >.env.development.local
-# RUN echo "VUE_APP_CLIENT_SECRET=$CLIENT_SECRET" >.env.development.local
-# RUN echo "VUE_APP_CALL_BACK=$CALL_BACK" >.env.development.local
-RUN npm install --legacy-peer-deps --force && npm run build
 
+# ---- 2) Build frontend (SPA) ----
+FROM base AS build-app
+RUN npm run build
+
+# ---- 3) Build VuePress docs ----
+FROM base AS build-docs
+RUN npm run docs:build
 
+# ---- 4) Runtime: Nginx ----
 FROM nginx:alpine
+
+# Default public path; can be overridden at runtime
 ENV VUE_APP_PUBLIC_PATH="/"
-WORKDIR /etc/nginx
-COPY 40-create-ghcred.sh /docker-entrypoint.d
-COPY ngnix.conf /etc/nginx/conf.d/default.conf
-COPY --from=builder /usr/app/dist/ /usr/share/nginx/html
+
+# Copy final single-file nginx.conf
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Add startup script to inject runtime config and symlink
+COPY 40-create-ghcred.sh /docker-entrypoint.d/40-create-ghcred.sh
+RUN chmod +x /docker-entrypoint.d/40-create-ghcred.sh
+
+# Copy built files into container
+COPY --from=build-app  /app/dist/                 /usr/share/nginx/html/
+COPY --from=build-docs /app/docs/.vuepress/dist/  /usr/share/nginx/html/docs/
+
+EXPOSE 80

Dockerfile.web

@@ -48,23 +48,20 @@ npm run test:lint
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
 
-
-### Deploying to a subdirectory
-In compile stage 
+### Biuld your image 
+Replace **`cartographer`** with your preferred image name.
 ```
-docker build \
-dockercontainer
+docker build -t cartographer .
+
 ```
 
 ### Run 
+
+Replace **demo** with your desired subpath.
+
+Replace **cartographer** with the image name you used when building.
 ```
- docker run \
--e CLIENT_ID="your client id" \
--e CLIENT_SECRET= "your client secret"\
--e CALL_BACK= "your call back" \
--e VUE_APP_CALL_BACK=$CALL_BACK \
--e VUE_APP_PUBLIC_PATH="your subpath"
-dockercontainer
+docker run --rm -p 8080:80 -e VUE_APP_PUBLIC_PATH=/demo cartographer
 ```
 
 

README.md

@@ -1,53 +1,91 @@
-import { defineUserConfig } from 'vuepress'
-import { viteBundler } from '@vuepress/bundler-vite'
-import { defaultTheme } from '@vuepress/theme-default'
+import { defineUserConfig } from "vuepress";
+import { viteBundler } from "@vuepress/bundler-vite";
+import { defaultTheme } from "@vuepress/theme-default";
 
-export default defineUserConfig({
-  bundler: viteBundler(),
-
-  theme: defaultTheme({
-    sidebar: [
+// Sidebar configuration
+const EN_SIDEBAR = [
+  {
+    text: "User Documentation",
+    collapsible: true,
+    link: "/user/",
+    children: [
+      "/user/introduction.md",
+      "/user/installation.md",
+      "/user/UserInterface.md",
+      "/user/actions.md",
+      "/user/workflow.md"
+    ]
+  },
+  {
+    text: "Technical Documentation",
+    collapsible: true,
+    link: "/technical/README.md",
+    children: [
       {
-        text: 'Components',
+        text: "Components",
         collapsible: true,
-        link: '/README.md',
         children: [
-          '/AppFooterComponent.md',
-          '/AppHeaderComponent.md',
-          '/AppSidebarComponent.md',
-          '/ContentPreviewMdiv.md',
-          '/ContentPreviewMeasure.md',
-          '/ContentPreviewPane.md',
-          '/ImageSelectionModal.md',
-          '/LoadGitModal.md',
-          '/LoadIIIFModal.md',
-          '/LoadXMLModal.md',
-          '/MainMenu.md',
-          '/MeasureModal.md',
-          '/MdivModal.md',
-          '/OsdComponent.md',
-          '/PageImportModal.md',
-          '/PagesListEntry.md',
-          '/PagesModal.md',
-        ],
+          "/technical/AppFooterComponent.md",
+          "/technical/AppHeaderComponent.md",
+          "/technical/AppSidebarComponent.md",
+          "/technical/ContentPreviewMdiv.md",
+          "/technical/ContentPreviewMeasure.md",
+          "/technical/ContentPreviewPane.md",
+          "/technical/ImageSelectionModal.md",
+          "/technical/LoadGitModal.md",
+          "/technical/LoadIIIFModal.md",
+          "/technical/LoadXMLModal.md",
+          "/technical/MainMenu.md",
+          "/technical/MeasureModal.md",
+          "/technical/MdivModal.md",
+          "/technical/OsdComponent.md",
+          "/technical/PageImportModal.md",
+          "/technical/PagesListEntry.md",
+          "/technical/PagesModal.md"
+        ]
       },
       {
-        text: 'Store',
+        text: "Store",
         collapsible: true,
-        link: '/store.md',
-        children: [
-          '/storeIndex.md',
-        ],
+        link: "/technical/store.md",
+        children: ["/technical/storeIndex.md"]
       },
-     {
-        text: 'Tools',
+      {
+        text: "Tools",
         collapsible: true,
-        link: '/tools.md',
+        link: "/technical/tools.md",
         children: [
-          '/iiif.md',
-          '/meimapping.md',
+          "/technical/iiif.md",
+          "/technical/meimapping.md"
+        ]
+      }
+    ]
+  }
+];
+
+export default defineUserConfig({
+  base: '/myAppPlaceholder/docs/',
+
+  bundler: viteBundler(),
+
+  locales: {
+    '/': {
+      lang: 'en-US',
+      title: 'Cartographer User and Technical Documentation',
+      description: 'User and Technical Documentation',
+    },
+  },
+
+  theme: defaultTheme({
+    locales: {
+      '/': {
+        navbar: [
+          { text: 'Home', link: '/' },                 // becomes /docs/ at build time, then replaced dynamically
+          { text: 'User Docs', link: '/user/' },       // becomes /docs/user/
+          { text: 'Technical Docs', link: '/technical/README.md' },
         ],
+        sidebar: EN_SIDEBAR,
       },
-    ],
+    },
   }),
-})
+});