💄 Better docs page
This commit is contained in:
parent
dc740f8538
commit
9bcd809493
7
content/zh-CN/docs/solar-network/index.mdx
Normal file
7
content/zh-CN/docs/solar-network/index.mdx
Normal 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
103
layouts/docs.vue
Normal 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>
|
||||
@ -17,23 +17,57 @@
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="docs-widgets">
|
||||
<v-card title="Table of Contents" prepend-icon="mdi-table-of-contents" density="comfortable">
|
||||
<div class="mt-[-8px]">
|
||||
<docs-table-of-contents :links="page.body.toc.links" />
|
||||
</div>
|
||||
</v-card>
|
||||
</div>
|
||||
<v-navigation-drawer app v-model="drawerOpen" floating location="right" width="320">
|
||||
<v-tabs v-model="drawerTab" hide-slider align-tabs="center">
|
||||
<v-tab :value="1">
|
||||
<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>
|
||||
</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 {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
.docs-content {
|
||||
max-width: 75ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -99,6 +111,7 @@ useSeoMeta({
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
html, body, .v-application, .docs-article {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user