💄 Better docs page

This commit is contained in:
LittleSheep 2024-09-28 13:29:05 +08:00
parent dc740f8538
commit 9bcd809493
4 changed files with 164 additions and 39 deletions

View File

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

103
layouts/docs.vue Normal file
View File

@ -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>

View File

@ -17,23 +17,57 @@
</article> </article>
</div> </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" />
</div> </v-tab>
</v-card> <v-tab :value="2">
</div> <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>
</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> </div>
</v-container> </v-container>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { definePageMeta } from "#imports"
const route = useRoute() const route = useRoute()
const { t } = useI18n() const { t } = useI18n()
const { data: page } = await useAsyncData<any>("page", queryContent(route.path).where({ _locale: getLocale() }).findOne) 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) { if (page.value == null) {
throw createError({ throw createError({
status: 404, status: 404,
@ -41,6 +75,10 @@ if (page.value == null) {
}) })
} }
definePageMeta({
layout: "docs",
})
useHead({ useHead({
title: page.value.title, title: page.value.title,
titleTemplate: "%s | Solsynth Knowledge Base", titleTemplate: "%s | Solsynth Knowledge Base",
@ -58,39 +96,13 @@ useSeoMeta({
</script> </script>
<style scoped> <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 { .docs-article {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
.docs-widgets { .docs-content {
flex: 1; max-width: 75ch;
display: flex; margin: 0 auto;
flex-direction: column;
gap: 1rem;
} }
</style> </style>
@ -99,6 +111,7 @@ useSeoMeta({
border-radius: 8px; border-radius: 8px;
} }
html, body, .v-application, .docs-article { html, body, .v-application, .docs-article {
scroll-behavior: smooth; scroll-behavior: smooth;
} }

View File

@ -1,7 +1,9 @@
export function getLocale() { export function getLocale(locale?: any) {
const fallbackLocale = "en" const fallbackLocale = "en"
const supportedLocales = ["en", "zh-CN"] 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
} }