💄 Better docs page

This commit is contained in:
LittleSheep 2024-10-04 02:35:02 +08:00
parent 295d2d5b95
commit 92e56e7e88
10 changed files with 102 additions and 102 deletions

12
app.vue
View File

@ -34,3 +34,15 @@ onMounted(() => {
auth.readProfiles() auth.readProfiles()
}) })
</script> </script>
<style>
.page-enter-active,
.page-leave-active {
transition: all 0.25s ease-in-out;
}
.page-enter-from,
.page-leave-to {
opacity: 0;
filter: blur(1rem);
}
</style>

View File

@ -15,7 +15,7 @@
:key="item.code" :key="item.code"
:value="item.code" :value="item.code"
:active="locale == item.code" :active="locale == item.code"
@click.prevent.stop="setLocale(item.code)" @click.prevent.stop="() => { setLocale(item.code); emits('update') }"
> >
<v-list-item-title>{{ item.name }}</v-list-item-title> <v-list-item-title>{{ item.name }}</v-list-item-title>
</v-list-item> </v-list-item>
@ -24,5 +24,6 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
const emits = defineEmits(['update'])
const { locale, locales, setLocale } = useI18n() const { locale, locales, setLocale } = useI18n()
</script> </script>

View File

@ -1,46 +0,0 @@
<template>
<v-carousel v-if="!loading" show-arrows="hover" cycle hide-delimiters progress="primary">
<v-carousel-item v-for="(item, i) in items" :key="i">
<v-sheet color="rgba(0, 0, 0, .4)" class="h-full w-full flex items-center justify-center post-container overflow-scroll">
<post-item class="mt-5 mb-2" force-show-content :post="item" />
</v-sheet>
</v-carousel-item>
</v-carousel>
<div v-else class="w-full h-full flex items-center justify-center">
<v-progress-circular indeterminate />
</div>
</template>
<script setup lang="ts">
const config = useRuntimeConfig()
const items = ref<any[]>([])
const loading = ref(false)
async function load() {
loading.value = true
const res = await fetch(`${config.public.solarNetworkApi}/cgi/co/posts?take=5&realm=${config.public.solarRealm}`)
const result = await res.json()
items.value.push(...result.data)
loading.value = false
}
onMounted(() => {
load()
})
</script>
<style scoped>
.post-container::-webkit-scrollbar {
display: none;
}
.post-container {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>

View File

@ -0,0 +1,52 @@
<template>
<v-card v-if="!loading" density="compact" variant="outlined">
<div class="h-[500px] overflow-y-auto no-scrollbar">
<div v-for="item in items" class="mt-5 mb-2">
<post-item :key="item.id" force-show-content :post="item" />
</div>
<div class="mt-4 mb-5 flex justify-center">
<v-btn :text="t('seeMore')" size="small" variant="text" to="/activity" />
</div>
</div>
</v-card>
<v-card v-else density="compact" variant="outlined">
<div class="w-full h-full flex items-center justify-center">
<v-progress-circular indeterminate />
</div>
</v-card>
</template>
<script setup lang="ts">
const { t } = useI18n()
const config = useRuntimeConfig()
const items = ref<any[]>([])
const loading = ref(false)
async function load() {
loading.value = true
const res = await fetch(`${config.public.solarNetworkApi}/cgi/co/posts?take=5&realm=${config.public.solarRealm}`)
const result = await res.json()
items.value.push(...result.data)
loading.value = false
}
onMounted(() => {
load()
})
</script>
<style scoped>
.no-scrollbar {
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
width: 0;
display: none;
}
</style>

View File

@ -75,5 +75,6 @@
"attachmentUploadProgress": "Uploading", "attachmentUploadProgress": "Uploading",
"attachmentUploadCompleted": "Uploaded", "attachmentUploadCompleted": "Uploaded",
"upload": "Upload", "upload": "Upload",
"cancel": "Cancel" "cancel": "Cancel",
"seeMore": "See more"
} }

View File

@ -75,5 +75,6 @@
"attachmentUploadProgress": "上传中", "attachmentUploadProgress": "上传中",
"attachmentUploadCompleted": "上传完成", "attachmentUploadCompleted": "上传完成",
"upload": "上传", "upload": "上传",
"cancel": "取消" "cancel": "取消",
"seeMore": "查看更多"
} }

View File

@ -1,36 +1,22 @@
<template> <template>
<v-app-bar flat color="primary"> <v-app-bar flat color="primary">
<v-container fluid class="mx-auto d-flex align-center justify-center px-8"> <v-container fluid class="mx-auto d-flex align-center justify-center pe-8">
<v-tooltip> <v-app-bar-nav-icon class="me-1" @click="openDrawer = !openDrawer" />
<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> <nuxt-link to="/docs" exact>
<h2 class="mt-1">Solsynth Knowledge Base</h2> <h2 class="mt-0.5">Solsynth Knowledge Base</h2>
</nuxt-link> </nuxt-link>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<locale-select /> <locale-select @update="reload" />
<user-menu /> <user-menu />
</v-container> </v-container>
</v-app-bar> </v-app-bar>
<v-navigation-drawer v-model="openDrawer" location="left" width="300" floating> <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"> <content-navigation v-slot="{ navigation }" :query="navQuery" :key="route.path">
<v-list density="compact" nav color="primary"> <v-list density="compact" nav color="primary" class="mt-1">
<v-list-item <v-list-item
v-if="navNotRoot" v-if="navNotRoot"
title="Previous" title="Previous"
@ -60,21 +46,19 @@
<footer-links class="px-5 mt-3" /> <footer-links class="px-5 mt-3" />
</v-navigation-drawer> </v-navigation-drawer>
<v-main> <v-app-bar color="transparent" density="compact" class="backdrop-blur-md">
<v-sheet color="grey-lighten-8" v-if="breadcrumb.length >= 1"> <v-app-bar-nav-icon icon="mdi-home" to="/" class="ms-4" />
<div class="flex items-center justify-center h-[60px] px-5"> <div class="flex items-center justify-center h-[60px]">
<v-breadcrumbs :items="breadcrumb" density="compact"></v-breadcrumbs> <v-breadcrumbs :items="breadcrumb" density="compact" class="px-0 mt-0.5"></v-breadcrumbs>
</div> </div>
<v-divider class="border-opacity-50" /> </v-app-bar>
</v-sheet>
<v-main>
<slot /> <slot />
</v-main> </v-main>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Logo from "../assets/logo-w-shadow.png"
const { locale } = useI18n() const { locale } = useI18n()
const route = useRoute() const route = useRoute()
@ -90,10 +74,11 @@ const breadcrumb = computed(() => {
const navNotRoot = computed(() => route.path.split("/").length > 2) const navNotRoot = computed(() => route.path.split("/").length > 2)
const navQuery = computed(() => ({ const navQuery = computed(() => ({
where: { where: {
_path: new RegExp("^\\/" + route.path.replace(/^\/|\/$/g, '') + "\\/[^\\/]+\\/?$"), _path: new RegExp("^\\/" + route.path.replace(/^\/|\/$/g, "") + "\\/[^\\/]+\\/?$"),
_locale: getLocale(locale), _locale: getLocale(locale),
}, },
})) }))
console.log(navQuery.value)
function previousNav() { function previousNav() {
const arr = route.path.split("/") const arr = route.path.split("/")
@ -116,4 +101,8 @@ function fullyFlatMap(input: any): any[] {
} }
const openDrawer = ref(false) const openDrawer = ref(false)
function reload() {
window.location.reload()
}
</script> </script>

View File

@ -62,6 +62,7 @@ export default defineNuxtConfig({
}, },
app: { app: {
pageTransition: { name: "page", mode: "out-in" },
head: { head: {
title: "Solsynth LLC", title: "Solsynth LLC",
titleTemplate: "%s | Solsynth", titleTemplate: "%s | Solsynth",

View File

@ -17,33 +17,22 @@
</article> </article>
</div> </div>
<v-navigation-drawer app v-model="drawerOpen" floating location="right" width="300"> <v-dialog max-width="540" v-model="dialogOpen" close-on-content-click>
<div class="h-[60px] flex justify-center items-center"> <v-card title="Table of Contents" density="compact">
<v-tabs v-model="drawerTab" hide-slider align-tabs="center"> <div class="mt-[-12px]">
<v-tab :value="1">
<v-icon icon="mdi-table-of-contents" />
</v-tab>
</v-tabs>
</div>
<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" /> <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-empty-state v-else text="No Headers Available" />
</v-tabs-window-item> </div>
</v-tabs-window> </v-card>
</v-navigation-drawer> </v-dialog>
<v-fab <v-fab
app app
appear appear
location="bottom end" location="bottom end"
variant="plain" :key="'docs-fab-'+dialogOpen"
:key="'docs-fab-'+drawerOpen" :icon="dialogOpen ? 'mdi-arrow-collapse-right' : 'mdi-menu'"
:icon="drawerOpen ? 'mdi-arrow-collapse-right' : 'mdi-menu'" @click="dialogOpen = !dialogOpen"
@click="drawerOpen = !drawerOpen"
/> />
</div> </div>
</v-container> </v-container>
@ -58,7 +47,7 @@ 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 drawerTab = ref(0)
const drawerOpen = ref(false) const dialogOpen = ref(false)
if (page.value == null) { if (page.value == null) {
throw createError({ throw createError({

View File

@ -21,8 +21,8 @@
</v-row> </v-row>
<v-row class="content-section"> <v-row class="content-section">
<v-col cols="12" md="8"> <v-col cols="12" md="8">
<v-card class="max-h-[500px]"> <v-card class="h-[500px]">
<activity-carousel class="carousel-section" /> <activity-list class="carousel-section" />
</v-card> </v-card>
</v-col> </v-col>
<v-col cols="12" md="4" class="flex justify-end" order="first" order-md="last"> <v-col cols="12" md="4" class="flex justify-end" order="first" order-md="last">