💚 Fix CSS Style lost

.github/workflows/docs.yml

@@ -33,6 +33,8 @@ jobs:
         run: npm ci
 
       - name: Build docs site
+        env:
+          DOCS_BASE: /
         run: npm run docs:build
 
       - name: Configure Pages

docs/.vitepress/config.mts

@@ -12,7 +12,7 @@ type ApiDocEntry = {
 }
 
 const repoSlug = process.env.GITHUB_REPOSITORY?.split('/')[1] ?? 'BitLogger'
-const docsBase = process.env.GITHUB_ACTIONS ? `/${repoSlug}/` : '/'
+const docsBase = process.env.DOCS_BASE ?? (process.env.GITHUB_ACTIONS ? `/${repoSlug}/` : '/')
 const repository = 'https://github.com/Nanaloveyuki/BitLogger'
 
 function splitWords(input: string): string[] {

docs/.vitepress/theme/components/ApiOverview.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, shallowRef } from 'vue'
+import { withBase } from 'vitepress'
 
 import { docsData } from '../../generated/docs-data.mjs'
 
@@ -77,10 +78,10 @@ const resultCount = computed(() =>
             <p>{{ category.entries.length }} entries</p>
             <ul>
               <li v-for="entry in category.entries.slice(0, 8)" :key="entry.slug">
-                <a :href="entry.link">{{ entry.title }}</a>
+                <a :href="withBase(entry.link)">{{ entry.title }}</a>
               </li>
             </ul>
-            <a v-if="category.entries.length > 8" class="api-more" href="/api/">
+            <a v-if="category.entries.length > 8" class="api-more" :href="withBase('/api/')">
               Browse {{ category.entries.length - 8 }} more in sidebar
             </a>
           </section>

docs/.vitepress/theme/components/HomeDocHub.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { withBase } from 'vitepress'
 
 import { docsData } from '../../generated/docs-data.mjs'
 
@@ -37,7 +38,7 @@ const groupCount = computed(() => docsData.api.groups.length)
       <p class="hub-eyebrow">Popular Areas</p>
       <ul class="hub-chip-list">
         <li v-for="category in topCategories" :key="category.id">
-          <a class="hub-chip" href="/api/">
+          <a class="hub-chip" :href="withBase('/api/')">
             <span>{{ category.label }}</span>
             <small>{{ category.entryCount }}</small>
           </a>
@@ -49,7 +50,7 @@ const groupCount = computed(() => docsData.api.groups.length)
       <p class="hub-eyebrow">Release Trail</p>
       <ul class="hub-link-list">
         <li v-for="item in recentChanges" :key="item.version">
-          <a :href="item.link">Version {{ item.version }}</a>
+          <a :href="withBase(item.link)">Version {{ item.version }}</a>
         </li>
       </ul>
     </article>