Move docs to VitePress.

.github/workflows/docs.yml

@@ -0,0 +1,69 @@
+name: Deploy docs site to Pages
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'docs/**'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: latest
+          run_install: false
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-docs-pnpm-store-${{ hashFiles('**/docs/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-docs-pnpm-store-
+      - name: Install dependencies
+        working-directory: docs
+        run: pnpm install
+      - name: Run build
+        working-directory: docs
+        run: pnpm docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./docs/.vitepress/dist
+
+  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@v2

.github/workflows/tests.yml

@@ -6,10 +6,13 @@ on:
       - main
       - stable
     paths-ignore:
-      - '**.md'
+      - 'docs/**'
   pull_request:
     branches:
       - main
+    paths-ignore:
+      - 'docs/**'
+  workflow_dispatch:
 
 jobs:
   build:

client/src/components/HomeHeader.vue

@@ -6,7 +6,12 @@ const authStore = useAuthStore()
 const authenticated = computed(() => authStore.authenticated)
 const authorized = computed(() => authStore.authorized)
 
-const { t } = useI18n({ useScope: 'global' })
+const { t, locale } = useI18n({ useScope: 'global' })
+
+const instructionsLink = computed(() => {
+  const localePath = locale.value === 'pt-BR' ? 'pt/' : ''
+  return `https://alessandrojean.github.io/toshokan/${localePath}guides/instructions`
+})
 </script>
 
 <template>
@@ -31,7 +36,7 @@ const { t } = useI18n({ useScope: 'global' })
           </sup>
         </h1>
         <div class="flex-1 hidden md:block md:ml-6">
-          <Button as="RouterLink" kind="ghost" to="/help/guide/instructions">
+          <Button as="a" kind="ghost" :href="instructionsLink" target="_blank">
             {{ t('home.header.instructions') }}
           </Button>
         </div>

client/src/components/dashboard/DashboardAsideMenu.vue

@@ -34,9 +34,14 @@ withDefaults(defineProps<AsideMenuProps>(), {
 
 const emit = defineEmits<{ (e: 'navigate', location: RouteLocation): void }>()
 
-const { t } = useI18n({ useScope: 'global' })
+const { t, locale } = useI18n({ useScope: 'global' })
 const router = useRouter()
 
+const instructionsLink = computed(() => {
+  const localePath = locale.value === 'pt-BR' ? 'pt/' : ''
+  return `https://alessandrojean.github.io/toshokan/${localePath}guides/instructions`
+})
+
 const items = computed<Item[]>(() => [
   {
     key: 'dashboard',
@@ -85,7 +90,7 @@ const items = computed<Item[]>(() => [
     key: 'help-center',
     label: t('dashboard.header.links.help'),
     icon: LifebuoyIcon,
-    to: '/help/guide/instructions',
+    to: instructionsLink.value,
     external: true,
   },
 ])
@@ -160,23 +165,25 @@ const collapsed = useLocalStorage('aside-collapsed', false)
             ]"
           >
             <li v-for="item in items" :key="item.key" class="w-full">
+              <DashboardAsideButton
+                v-if="item.external"
+                :item="item"
+                :href="(item.to as string)"
+                target="_blank"
+              />
               <RouterLink
+                v-else
                 v-slot="{ href, isActive, isExactActive, navigate, route }"
                 custom
                 :to="item.to"
               >
                 <DashboardAsideButton
                   :item="item"
                   :href="href"
-                  :target="item.external ? '_blank' : undefined"
                   :active="
                     active(item.active, item.exact, isExactActive, isActive)
                   "
-                  @click="
-                    item.external
-                      ? navigate($event)
-                      : handleNavigation(route, $event)
-                  "
+                  @click="handleNavigation(route, $event)"
                 />
               </RouterLink>
             </li>

client/src/composables/useTailwindTheme.ts

@@ -1,11 +1,13 @@
 import resolveConfig from 'tailwindcss/resolveConfig'
 import type { Config } from 'tailwindcss'
-import tailwindConfig from '~~/tailwind.config.js'
+import tailwindConfig from '~~/tailwind.config'
+
+export type FontFamily = keyof (typeof tailwindConfig)['theme']['fontFamily']
 
 export type TailwindTheme = Config & {
   breakpoints: Record<string, number>
-  fontFamily: (name: string) => string[] | undefined
-  color: (name: string, variantion: number | string) => string | undefined
+  fontFamily: (name: FontFamily) => string[] | undefined
+  color: (name: string, variation: number | string) => string | undefined
 }
 
 export default function useTailwindTheme(): TailwindTheme {
@@ -16,18 +18,23 @@ export default function useTailwindTheme(): TailwindTheme {
   )
 
   return {
-    ...config,
+    ...(config as unknown as Config),
     breakpoints: Object.fromEntries(breakpoints),
-    fontFamily: (name: string): string[] | undefined => {
-      const fonts = config.theme!.fontFamily as Record<string, string[]>
+    fontFamily: (name: FontFamily): string[] | undefined => {
+      const fonts = config.theme!.fontFamily
+      const font = fonts[name]
+
+      if (!font) {
+        return undefined
+      }
 
-      return fonts[name]
+      return (Array.isArray(font[0]) ? font[0] : font) as string[]
     },
-    color: (name: string, variantion: number | string): string | undefined => {
+    color: (name: string, variation: number | string): string | undefined => {
       const colors = config.theme!.colors as Record<string, any>
       const variants = colors[name] as Record<string | number, string>
 
-      return variants[variantion]
+      return variants[variation]
     },
   }
 }

client/vite.config.ts

@@ -153,9 +153,6 @@ export default defineConfig({
       '~~': resolve(__dirname, '.'),
     },
   },
-  optimizeDeps: {
-    include: ['tailwind.config.js'],
-  },
   build: {
     commonjsOptions: {
       include: ['tailwind.config.js', 'node_modules/**'],

docs/.vitepress/cache/deps/_metadata.json

@@ -0,0 +1,52 @@
+{
+  "hash": "4c51cdfb",
+  "configHash": "c967b4fe",
+  "lockfileHash": "c739d027",
+  "browserHash": "80fee0f9",
+  "optimized": {
+    "vue": {
+      "src": "../../../node_modules/.pnpm/[email protected][email protected]/node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "6a897dff",
+      "needsInterop": false
+    },
+    "vitepress > @vue/devtools-api": {
+      "src": "../../../node_modules/.pnpm/@[email protected]/node_modules/@vue/devtools-api/lib/esm/index.js",
+      "file": "vitepress___@vue_devtools-api.js",
+      "fileHash": "090ef1b1",
+      "needsInterop": false
+    },
+    "vitepress > @vueuse/core": {
+      "src": "../../../node_modules/.pnpm/@[email protected][email protected]/node_modules/@vueuse/core/index.mjs",
+      "file": "vitepress___@vueuse_core.js",
+      "fileHash": "200632cc",
+      "needsInterop": false
+    },
+    "vitepress > @vueuse/integrations/useFocusTrap": {
+      "src": "../../../node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vueuse/integrations/useFocusTrap.mjs",
+      "file": "vitepress___@vueuse_integrations_useFocusTrap.js",
+      "fileHash": "ae62719c",
+      "needsInterop": false
+    },
+    "vitepress > mark.js/src/vanilla.js": {
+      "src": "../../../node_modules/.pnpm/[email protected]/node_modules/mark.js/src/vanilla.js",
+      "file": "vitepress___mark__js_src_vanilla__js.js",
+      "fileHash": "7d7989c8",
+      "needsInterop": false
+    },
+    "vitepress > minisearch": {
+      "src": "../../../node_modules/.pnpm/[email protected]/node_modules/minisearch/dist/es/index.js",
+      "file": "vitepress___minisearch.js",
+      "fileHash": "34bfebb8",
+      "needsInterop": false
+    }
+  },
+  "chunks": {
+    "chunk-27BHTSA2": {
+      "file": "chunk-27BHTSA2.js"
+    },
+    "chunk-YP6MUCOV": {
+      "file": "chunk-YP6MUCOV.js"
+    }
+  }
+}