Update Documentation

.github/workflows/deploy-docs.yml

@@ -0,0 +1,60 @@
+name: Deploy Docs to Pages
+
+on:
+  # Runs on pushes targeting the `docs` branch and `main` branch.
+  push:
+    branches: ["docs", "main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+# concurrency:
+#   group: pages
+#   cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.17.1'
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build with VitePress
+        run: |
+          npm run docs:build
+          touch docs/.vitepress/dist/.nojekyll
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to Github Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

docs/.vitepress/config.js

@@ -2,10 +2,14 @@ import { defineConfig } from 'vitepress'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
+// Version number
+const versionNumber = process.env.npm_package_version
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "ScaffoldVuer Docs",
   description: "API documentation for ScaffoldVuer",
+  base: '/scaffoldvuer/',
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
@@ -20,6 +24,14 @@ export default defineConfig({
           { text: 'Live Demo', link: '/demo' },
           { text: 'API References', link: '/components/ScaffoldVuer' },
         ]
+      },
+      {
+        text: 'Version',
+        items: [
+          {
+            text: `${versionNumber}`
+          }
+        ]
       }
     ],
     socialLinks: [
@@ -50,7 +62,7 @@ export default defineConfig({
           }),
         ],
       }),
-  
+
       // https://github.com/antfu/unocss
       // see unocss.config.ts for config
     ]

docs/.vitepress/theme/custom.css

@@ -0,0 +1,58 @@
+/* Modify content styles for desktop view */
+@media (min-width: 1280px) {
+  .VPContent .VPDoc.has-aside {
+    & .content-container {
+      max-width: none;
+    }
+
+    .content-container .vp-doc {
+      & table {
+        overflow: unset;
+      }
+
+      & table thead {
+        position: sticky;
+        top: 64px; /* navigation height */
+
+        & th {
+          background-color: var(--vp-c-gray-1);
+        }
+      }
+
+      & table tr {
+        th, td {
+          vertical-align: top;
+        }
+
+        th:first-child,
+        td:first-child {
+          width: 10%;
+          text-wrap: nowrap;
+        }
+
+        /* Description column */
+        th:nth-child(2),
+        td:nth-child(2) {
+          width: 40%;
+        }
+
+        th:nth-child(3),
+        td:nth-child(3) {
+          width: 10%;
+        }
+
+        th:nth-child(4),
+        td:nth-child(4) {
+          width: 10%;
+        }
+
+        th:last-child,
+        td:last-child {
+          width: 20%;
+          word-wrap: break-word;
+          word-break: break-word;
+        }
+      }
+    }
+  }
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,4 @@
+import DefaultTheme from "vitepress/theme"
+import './custom.css'
+
+export default DefaultTheme

docs/demo.md

@@ -1,14 +1,18 @@
-# Live demo
+# ScaffoldVuer Demo
 
-<div style="height:720px;width:680px;">
-  <ClientOnly>
-    <ScaffoldVuer style="height:100%;width:100%;"
-      :url="url"
-      :helpMode="helpMode"
-      :displayMarkers="displayMarkers"
-      :displayMinimap="displayMinimap"
-      :minimapSettings="minimapSettings" />
-  </ClientOnly>
+## Live demo
+
+<div class="demo-map-container">
+  <div class="demo-map-container-inner">
+    <ClientOnly>
+      <ScaffoldVuer style="height:100%;width:100%;"
+        :url="url"
+        :helpMode="helpMode"
+        :displayMarkers="displayMarkers"
+        :displayMinimap="displayMinimap"
+        :minimapSettings="minimapSettings" />
+    </ClientOnly>
+  </div>
 </div>
 
 <script setup>
@@ -39,6 +43,35 @@ export default {
 }
 </script>
 
+<style>
+  .demo-map-container {
+    width: 100%;
+    height: 0;
+    padding-bottom: 75%;
+    border: 1px solid var(--vp-c-divider);
+    position: relative;
+    z-index: 1; /* just for demo, to prevent tooltips go out of container */
+    overflow: hidden;
+  }
+
+  .demo-map-container-inner {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+  }
+
+  .bottom-right-control {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+
+  .zoomOut,
+  .fitWindow {
+    padding-left: 0px !important;
+  }
+</style>
+
 ## Code Preview
 
 ```js-vue