💄 Better docs page

app.vue

@@ -34,3 +34,15 @@ onMounted(() => {
   auth.readProfiles()
 })
 </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>

components/LocaleSelect.vue

@@ -15,7 +15,7 @@
         :key="item.code"
         :value="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>
@@ -24,5 +24,6 @@
 </template>
 
 <script lang="ts" setup>
+const emits = defineEmits(['update'])
 const { locale, locales, setLocale } = useI18n()
 </script>

components/activity/Carousel.vue

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

components/activity/List.vue

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

lang/en-US.json

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

lang/zh-CN.json

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

layouts/docs.vue

@@ -1,36 +1,22 @@
 <template>
   <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>
-        <h2 class="mt-1">Solsynth Knowledge Base</h2>
+        <h2 class="mt-0.5">Solsynth Knowledge Base</h2>
       </nuxt-link>
 
       <v-spacer></v-spacer>
 
-      <locale-select />
+      <locale-select @update="reload" />
       <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 density="compact" nav color="primary" class="mt-1">
         <v-list-item
           v-if="navNotRoot"
           title="Previous"
@@ -60,21 +46,19 @@
     <footer-links class="px-5 mt-3" />
   </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 />
   </v-main>
 </template>
 
 <script setup lang="ts">
-import Logo from "../assets/logo-w-shadow.png"
-
 const { locale } = useI18n()
 const route = useRoute()
 
@@ -83,17 +67,18 @@ const breadcrumb = computed(() => {
   arr.shift()
   return arr.map((x, idx) => ({
     title: x,
-    to: `/docs/${arr.slice(0, idx+1).join("/")}`,
+    to: `/docs/${arr.slice(0, idx + 1).join("/")}`,
   }))
 })
 
 const navNotRoot = computed(() => route.path.split("/").length > 2)
 const navQuery = computed(() => ({
   where: {
-    _path: new RegExp("^\\/" + route.path.replace(/^\/|\/$/g, '') + "\\/[^\\/]+\\/?$"),
+    _path: new RegExp("^\\/" + route.path.replace(/^\/|\/$/g, "") + "\\/[^\\/]+\\/?$"),
     _locale: getLocale(locale),
   },
 }))
+console.log(navQuery.value)
 
 function previousNav() {
   const arr = route.path.split("/")
@@ -116,4 +101,8 @@ function fullyFlatMap(input: any): any[] {
 }
 
 const openDrawer = ref(false)
+
+function reload() {
+  window.location.reload()
+}
 </script>

nuxt.config.ts

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

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

@@ -17,33 +17,22 @@
         </article>
       </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" />
             <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
         app
         appear
         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>
   </v-container>
@@ -58,7 +47,7 @@ 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)
+const dialogOpen = ref(false)
 
 if (page.value == null) {
   throw createError({

pages/index.vue

@@ -21,8 +21,8 @@
     </v-row>
     <v-row class="content-section">
       <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-col>
       <v-col cols="12" md="4" class="flex justify-end" order="first" order-md="last">