💄 Better docs page

content/zh-CN/docs/solar-network/index.mdx

@@ -0,0 +1,7 @@
+---
+icon: mdi-open-in-app
+title: Solar Network
+description: Solsynth LLC 的下一代社交网络
+---
+
+Solar Network 是 Solsynth LLC 开发的社交网络，目标成为下一代社交网络。

layouts/docs.vue

@@ -0,0 +1,103 @@
+<template>
+  <v-app-bar flat color="primary">
+    <v-container fluid class="mx-auto d-flex align-center justify-center px-8">
+      <v-tooltip>
+        <template #activator="{ props }">
+          <div @click="openDrawer = !openDrawer" v-bind="props" class="cursor-pointer">
+            <v-img class="me-4 ms-1" width="32" height="32" alt="Logo" :src="Logo" />
+          </div>
+        </template>
+        Open / close drawer
+      </v-tooltip>
+
+
+      <nuxt-link to="/docs" exact>
+        <h2 class="mt-1">Solsynth Knowledge Base</h2>
+      </nuxt-link>
+
+      <v-spacer></v-spacer>
+
+      <locale-select />
+      <user-menu />
+    </v-container>
+  </v-app-bar>
+
+  <v-navigation-drawer v-model="openDrawer" location="left" width="300" floating>
+    <v-list density="compact" nav color="primary">
+      <v-list-item title="Back" prepend-icon="mdi-arrow-left" to="/" exact />
+    </v-list>
+
+    <v-divider class="border-opacity-50 my-1" />
+
+    <content-navigation v-slot="{ navigation }" :query="navQuery" :key="route.path">
+      <v-list density="compact" nav color="primary">
+        <v-list-item
+          v-if="navNotRoot"
+          title="Previous"
+          prepend-icon="mdi-page-previous"
+          exact
+          @click="previousNav"
+        />
+
+        <v-list-item
+          v-if="navigation[0]?.children"
+          v-for="link of fullyFlatMap(navigation[0])"
+          :key="link._path"
+          :title="link.title"
+          :to="link._path"
+          :prepend-icon="link.icon ?? 'mdi-text-box'"
+          exact
+        />
+
+        <v-list-item v-else title="No Content" prepend-icon="mdi-close-box-outline" disabled />
+      </v-list>
+    </content-navigation>
+
+    <v-divider class="border-opacity-50 mb-4 mt-0.5" />
+
+    <copyright no-centered service="capital" class="px-5" />
+
+    <footer-links class="px-5 mt-3" />
+  </v-navigation-drawer>
+
+  <v-main>
+    <slot />
+  </v-main>
+</template>
+
+<script setup lang="ts">
+import Logo from "../assets/logo-w-shadow.png"
+
+const { locale } = useI18n()
+const route = useRoute()
+
+const navNotRoot = computed(() => route.path.split("/").length > 2)
+const navQuery = computed(() => ({
+  where: {
+    _path: new RegExp("^\\" + route.path + ".*"),
+    _locale: getLocale(locale),
+  },
+}))
+
+function previousNav() {
+  const arr = route.path.split("/")
+  arr.pop()
+  navigateTo(arr.join("/"))
+}
+
+function fullyFlatMap(input: any): any[] {
+  const result: any[] = []
+  const pathSet = new Set<string>()
+  for (const item of input?.children ?? []) {
+    result.push(item)
+    result.push(...fullyFlatMap(item))
+  }
+  return result.filter((x) => {
+    if (pathSet.has(x._path)) return false
+    pathSet.add(x._path)
+    return true
+  })
+}
+
+const openDrawer = ref(false)
+</script>

pages/docs/[...slug].vue

@@ -17,23 +17,57 @@
         </article>
       </div>
 
-      <div class="docs-widgets">
+      <v-navigation-drawer app v-model="drawerOpen" floating location="right" width="320">
-        <v-card title="Table of Contents" prepend-icon="mdi-table-of-contents" density="comfortable">
+        <v-tabs v-model="drawerTab" hide-slider align-tabs="center">
-          <div class="mt-[-8px]">
+          <v-tab :value="1">
-            <docs-table-of-contents :links="page.body.toc.links" />
+            <v-icon icon="mdi-table-of-contents" />
+          </v-tab>
+          <v-tab :value="2">
+            <v-icon icon="mdi-information" />
+          </v-tab>
+        </v-tabs>
+
+        <v-divider class="border-opacity-50 mb-1" />
+
+        <v-tabs-window v-model="drawerTab">
+          <v-tabs-window-item :value="1">
+            <docs-table-of-contents v-if="page.body.toc.links?.length > 0" :links="page.body.toc.links" />
+            <v-empty-state v-else text="No Headers Available" />
+          </v-tabs-window-item>
+          <v-tabs-window-item :value="2">
+            <div class="flex flex-col gap-2">
+              <div>
+                <p><b>Created By</b></p>
               </div>
-        </v-card>
             </div>
+          </v-tabs-window-item>
+        </v-tabs-window>
+      </v-navigation-drawer>
+
+      <v-fab
+        app
+        appear
+        location="bottom end"
+        variant="plain"
+        :key="'docs-fab-'+drawerOpen"
+        :icon="drawerOpen ? 'mdi-arrow-collapse-right' : 'mdi-menu'"
+        @click="drawerOpen = !drawerOpen"
+      />
     </div>
   </v-container>
 </template>
 
 <script setup lang="ts">
+import { definePageMeta } from "#imports"
+
 const route = useRoute()
 
 const { t } = useI18n()
 const { data: page } = await useAsyncData<any>("page", queryContent(route.path).where({ _locale: getLocale() }).findOne)
 
+const drawerTab = ref(0)
+const drawerOpen = ref(false)
+
 if (page.value == null) {
   throw createError({
     status: 404,
@@ -41,6 +75,10 @@ if (page.value == null) {
   })
 }
 
+definePageMeta({
+  layout: "docs",
+})
+
 useHead({
   title: page.value.title,
   titleTemplate: "%s | Solsynth Knowledge Base",
@@ -58,39 +96,13 @@ useSeoMeta({
 </script>
 
 <style scoped>
-.docs-page-container {
-  position: relative;
-}
-
-@media (min-width: 768px) {
-  .docs-container {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-  }
-}
-
-@media (max-width: 768px) {
-  .docs-container {
-    display: flex;
-    flex-direction: column-reverse;
-    gap: 1rem;
-  }
-}
-
-.docs-content {
-  flex: 1 360px;
-}
-
 .docs-article {
   padding-bottom: 2rem;
 }
 
-.docs-widgets {
+.docs-content {
-  flex: 1;
+  max-width: 75ch;
-  display: flex;
+  margin: 0 auto;
-  flex-direction: column;
-  gap: 1rem;
 }
 </style>
 
@@ -99,6 +111,7 @@ useSeoMeta({
   border-radius: 8px;
 }
 
+
 html, body, .v-application, .docs-article {
   scroll-behavior: smooth;
 }

utils/locale.ts

@@ -1,7 +1,9 @@
-export function getLocale() {
+export function getLocale(locale?: any) {
   const fallbackLocale = "en"
   const supportedLocales = ["en", "zh-CN"]
-  const { locale } = useI18n()
+  if (locale == null) {
+    locale = useI18n().locale
+  }
 
-  return supportedLocales.includes(locale.value) ? locale.value : fallbackLocale;
+  return supportedLocales.includes(locale.value) ? locale.value : fallbackLocale
 }