feat: toc container

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
ZTL-UwU · May 23, 2024 · a0695b4 · a0695b4
1 parent 180f18c
commit a0695b4
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 37 deletions.
diff --git a/components/content/ProseCode.vue b/components/content/ProseCode.vue
@@ -1,6 +1,6 @@
 <template>
   <UiCard class="[&:not(:first-child)]:mt-5 mb-5 overflow-hidden">
-    <div v-if="filename" class="p-3 border-b flex">
+    <div v-if="filename" class="p-3 border-b flex text-sm font-mono">
       {{ filename }}
       <span class="ml-auto mr-1">
         <Transition name="fade" mode="out-in">

diff --git a/components/layout/Aside.vue b/components/layout/Aside.vue
@@ -1,8 +1,8 @@
 <template>
   <aside
-    class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto"
+    class="fixed top-16 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block overflow-y-auto"
   >
-    <UiScrollArea orientation="vertical" class="relative overflow-hidden h-full py-6 pr-6 lg:py-8" type="auto">
+    <UiScrollArea orientation="vertical" class="relative overflow-hidden h-full py-6 pr-6" type="auto">
       Aside
     </UiScrollArea>
   </aside>

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -1,14 +1,5 @@
 <template>
   <div class="min-h-screen">
-    <LayoutHeader />
-    <div class="border-b">
-      <div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-        <LayoutAside />
-        <div class="py-6 lg:py-8">
-          <slot />
-        </div>
-      </div>
-    </div>
-    <LayoutFooter />
+    <slot />
   </div>
 </template>
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
@@ -1,29 +1,45 @@
 <template>
-  <main>
-    <LayoutBreadcrumb class="mb-4" />
-    <div class="space-y-2 mb-6">
-      <ProseH1>
-        {{ page?.title }}
-      </ProseH1>
-      <p class="text-lg text-muted-foreground">
-        {{ page?.description }}
-      </p>
+  <LayoutHeader />
+  <div class="border-b">
+    <div class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+      <LayoutAside />
+      <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_250px]">
+        <div class="mx-auto w-full min-w-0">
+          <LayoutBreadcrumb class="mb-4" />
+          <div class="space-y-2 mb-6">
+            <ProseH1>
+              {{ page?.title }}
+            </ProseH1>
+            <p class="text-lg text-muted-foreground">
+              {{ page?.description }}
+            </p>
+          </div>
+          <Alert
+            v-if="!page?.body || page?.body?.children?.length === 0"
+            title="Empty Page"
+            icon="lucide:circle-x"
+          >
+            Start writing in <ProseCodeInline>content/{{ page._file }}</ProseCodeInline> to see this page taking shape.
+          </Alert>
+          <ContentRenderer
+            v-else
+            :key="page._id"
+            :value="page"
+            class="docs-content"
+          />
+          <LayoutPrevNext />
+        </div>
+        <div class="hidden text-sm xl:block">
+          <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+            <div class="w-10">
+              TOC
+            </div>
+          </div>
+        </div>
+      </main>
     </div>
-    <Alert
-      v-if="!page?.body || page?.body?.children?.length === 0"
-      title="Empty Page"
-      icon="lucide:circle-x"
-    >
-      Start writing in <ProseCodeInline>content/{{ page._file }}</ProseCodeInline> to see this page taking shape.
-    </Alert>
-    <ContentRenderer
-      v-else
-      :key="page._id"
-      :value="page"
-      class="docs-content"
-    />
-    <LayoutPrevNext />
-  </main>
+  </div>
+  <LayoutFooter />
 </template>
 
 <script setup lang="ts">