Use vitepress for docs

.github/workflows/pull-request.yml

@@ -49,25 +49,19 @@ jobs:
     - name: Build action runner
       run: docker build -t "wgd-action-runner:pr-${{ github.event.number }}" --build-arg "GIT_SHA=${{ github.sha }}" apps/wgd-action-runner
 
-    - name: Build hugo docs
-      run: |
-        docker run \
-        -v "${GITHUB_WORKSPACE}/hugo:/site" \
-        -v "${GITHUB_WORKSPACE}/website:/website" \
-        -v "/var/www/pr-${{ github.event.number }}.wikigdrive.com:/dist/hugo" \
-        --env CONFIG_TOML="/site/config/_default/config.toml" --env BASE_URL="https://pr-${{ github.event.number }}.wikigdrive.com" \
-        wgd-action-runner:pr-${{ github.event.number }} /steps/step_render_hugo
-
-    - name: Copy index for vite
-      run: mkdir -p ${GITHUB_WORKSPACE}/dist/hugo && cp -rf /var/www/pr-${{ github.event.number }}.wikigdrive.com/* ${GITHUB_WORKSPACE}/dist/hugo
-
     - name: build
       uses: docker/build-push-action@v6
       with:
         tags: "wikigdrive-feature:${{ github.sha }}"
         push: false
         build-args: "{'--build-arg': 'GIT_SHA=${{ github.sha }}'}"
 
+    - name: Build docs
+      run: |
+        docker run \
+        -v "/var/www/pr-${{ github.event.number }}.wikigdrive.com:/usr/src/app/website/.vitepress/dist" \
+        "wikigdrive-feature:${{ github.sha }}" npm run docs:build
+
     - name: Stop and remove
       run: docker stop "pr-${{ github.event.number }}" ; docker rm "pr-${{ github.event.number }}"
       continue-on-error: true
@@ -87,7 +81,7 @@ jobs:
           -v /home/wikigdrive/env.pr:/usr/src/app/.env \
           -v /var/run/docker.sock:/var/run/docker.sock \
           -v /var/run/podman/podman.sock:/var/run/podman/podman.sock \
-          -v "/var/www/pr-${{ github.event.number }}.wikigdrive.com:/usr/src/app/dist/hugo" \
+          -v "/var/www/pr-${{ github.event.number }}.wikigdrive.com:/usr/src/app/website/.vitepress/dist" \
           -e "GIT_SHA=${{ github.sha }}" \
           -e "ZIPKIN_URL=https://pr-${{ github.event.number }}.wikigdrive.com/zipkin" \
           -e "ZIPKIN_SERVICE=pr-${{ github.event.number }}" \

Dockerfile

@@ -13,8 +13,6 @@ RUN npm link --location=user
 EXPOSE 3000
 VOLUME /data
 
-RUN cp /usr/src/app/hugo/themes/wgd-bootstrap/layouts/_default/baseof.html /usr/src/app/apps/ui/index.html
-RUN if [[ -d /usr/src/app/dist/hugo/ui ]]; then cp /usr/src/app/dist/hugo/ui/index.html /usr/src/app/apps/ui/index.html ; fi
 RUN cd /usr/src/app/apps/ui && npm install && npm run build
 
 WORKDIR "/usr/src/app"

apps/ui/index.html

@@ -0,0 +1 @@
+Generate in generateIndexHtml()

apps/ui/package.json

@@ -20,9 +20,9 @@
     "vue-router": "4.1.6"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "4.0.0",
+    "@vitejs/plugin-vue": "5.1.4",
     "eslint-plugin-vue": "8.7.1",
     "typescript": "4.9.4",
-    "vite": "4.5.3"
+    "vite": "5.4.10"
   }
 }

apps/ui/src/components/NavBar.vue

@@ -20,7 +20,7 @@
           <a class="nav-link" :class="{'active': $route.path.startsWith('/drive')}" href="/drive">Drives</a>
         </li>
       </ul>
-      <ul class="navbar-nav mr-auto align-items-center">
+      <ul class="navbar-nav mr-auto align-items-center" v-if="!inVuePress">
         <li>
           <button v-if="!isLogged" class="btn btn-secondary" @click="login">Sign in</button>
           <button v-if="isLogged" class="btn btn-secondary" @click="logout">Logout User</button>
@@ -44,6 +44,9 @@ export default {
     };
   },
   computed: {
+    inVuePress() {
+      return this.$root._.type.name === 'VitePressApp';
+    },
     rootFolder() {
       return this.$root.drive;
     }

apps/ui/src/pages/StaticView.vue

@@ -49,6 +49,9 @@ export default {
     await this.fetch();
   },
   methods: {
+    onHydrated() {
+      console.log('this function will never be called !');
+    },
     async fetch() {
       await this.$root.fetchUser();
       if (!this.isLogged) {

apps/ui/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
+import {generateHead} from '../../html/generateHead.ts';
 
 if (!process.env.BUILD_TIME) {
   process.env.BUILD_TIME = new Date().toISOString();
@@ -8,11 +9,65 @@ if (!process.env.VERSION) {
   process.env.VERSION = process.env.GIT_SHA || process.env.GITHUB_SHA || 'dev';
 }
 
+function escapeHtml(str: string): string {
+  return str
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/&(?![\w#]+;)/g, '&amp;');
+}
+
+function renderHead() {
+  const retVal = [];
+
+  const head = generateHead();
+
+  for (const header of head) {
+    const rest = [];
+    const map = header[1];
+    for (const key in map) {
+      const value = map[key];
+      rest.push(`${key}="${escapeHtml(value)}"`);
+    }
+
+    switch (header[0]) {
+      case 'script':
+        retVal.push(`<${header[0]} ${rest.join(' ')} ></${header[0]}>`);
+        break;
+      default:
+        retVal.push(`<${header[0]} ${rest.join(' ')} />`);
+        break;
+    }
+  }
+
+  return retVal.join('\n');
+}
+
+export function generateIndexHtml() {
+  const inlinedScript = '';
+  const description = '';
+  const content = '';
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>WikiGDrive</title>
+  <meta name="description" content="${description}" />
+${renderHead()}
+</head>
+<body>
+  <div id="app">${content}</div>${inlinedScript}
+</body>
+</html>`;
+  return html;
+}
+
 const htmlPlugin = () => {
   return {
     name: 'html-transform',
-    transformIndexHtml(html) {
-      return html.replace(
+    transformIndexHtml() {
+      return generateIndexHtml().replace(
         /GIT_SHA/g,
         process.env.VERSION,
       );
@@ -25,6 +80,7 @@ export default defineConfig({
     vue(),
     htmlPlugin()
   ],
+  publicDir: '../../html/public',
   resolve: {
     alias: {
       vue: 'vue/dist/vue.esm-bundler.js',

html/generateHead.ts

@@ -0,0 +1,20 @@
+export function generateHead(): unknown[] {
+  return [
+    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css' }],
+
+    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css', media: '(prefers-color-scheme: light)' }],
+    ['link', { rel: 'stylesheet', type: 'text/css', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.min.css', media: '(prefers-color-scheme: dark)' }],
+    ['meta', { name: 'color-scheme', content: 'light dark' }],
+    ['meta', { name: 'theme-color', content: '#111111', media: '(prefers-color-scheme: light)' }],
+    ['meta', { name: 'theme-color', content: '#eeeeee', media: '(prefers-color-scheme: light)' }],
+
+    ['link', { rel: 'stylesheet', type: 'text/css', href: '/assets/main.css?GIT_SHA' }],
+    ['link', { rel: 'stylesheet', type: 'text/css', href: '/assets/prism.css?GIT_SHA', media: '(prefers-color-scheme: light)' }],
+    ['link', { rel: 'stylesheet', type: 'text/css', href: '/assets/prism-dark.css?GIT_SHA', media: '(prefers-color-scheme: dark)' }],
+
+    ['link', { rel: 'icon', type: 'image/svg+xml', href: '/images/logo.svg' }],
+
+    ['script', { src: '/assets/prism.js?GIT_SHA' }],
+    ['script', { src: '/src/main.ts?GIT_SHA', type: 'module' }],
+  ];
+}