feat: prev/next buttons for navigation

Author: antfu

README.md

@@ -48,9 +48,9 @@ The development server will be running at [http://localhost:3000](http://localho
     - [x] Search in command palette
     - [ ] Search button
   - [ ] Navigation
-    - [ ] Dropdown for guide outlines
+    - [x] Dropdown for guide outlines
     - [ ] Breadcrumbs
-    - [ ] Previous/Next buttons
+    - [x] Previous/Next buttons
   - [x] Embedded Nuxt Docs (update CORS headers)
   - [x] Only make necessary changes when navigating between guides
   - [x] Switch playgrounds on different guides

components/ContentNavCard.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+defineProps<{
+  to: string
+  icon?: string
+  title: string
+  subheader: string
+  description: string
+}>()
+</script>
+
+<template>
+  <div
+    flex="~ col"
+    class="flex-1 p4"
+    border="~ base rounded-lg hover:primary"
+    relative block h-full
+  >
+    <span class="pointer-events-none mb4 h-7 w-7 inline-flex flex-none items-center text-lg text-primary" :class="icon" />
+    <div class="my-0 text-lg font-semibold">
+      {{ title }}
+    </div>
+    <div class="line-clamp line-clamp-2 mb-0 mt-1 text-[14px] op50">
+      {{ description }}
+      <slot />
+    </div>
+    <NuxtLink :to="to" class="absolute inset-0" />
+  </div>
+</template>

components/PanelDocs.vue

@@ -7,6 +7,22 @@ const sourceUrl = computed(() => page.value?._file
   : undefined)
 
 const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
+
+const {
+  // // Global references
+  // globals,
+  // navigation,
+  // surround,
+  // page,
+  // // Computed properties from `page` key
+  // excerpt,
+  // toc,
+  // type,
+  // layout,
+  // Computed properties from `surround` key
+  next,
+  prev,
+} = useContent()
 </script>
 
 <template>
@@ -25,6 +41,29 @@ const { data: navigation } = await useAsyncData('navigation', () => fetchContent
     <div relative h-full of-hidden>
       <article class="max-w-none prose" h-full of-auto p6>
         <ContentDoc />
+        <div mt8 py2 grid="~ cols-[1fr_1fr] gap-4">
+          <div>
+            <ContentNavCard
+              v-if="prev"
+              :to="prev._path"
+              :title="prev.title"
+              :description="prev.description"
+              subheader="Previous section"
+              icon="i-ph-arrow-left"
+            />
+          </div>
+          <div>
+            <ContentNavCard
+              v-if="next"
+              :to="next._path"
+              :title="next.title"
+              :description="next.description"
+              subheader="Next section"
+              icon="i-ph-arrow-right"
+              items-end text-right
+            />
+          </div>
+        </div>
       </article>
       <!-- Navigration Dropdown -->
       <div