feat: prev next navigation

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>

components/content/Alert.vue

@@ -1,7 +1,7 @@
 <template>
-  <UiAlert class="[&:not(:first-child)]:mt-4" :class="[typeTwClass[type]]">
+  <UiAlert class="[&:not(:first-child)]:mt-5" :class="[typeTwClass[type]]">
     <Icon v-if="icon && title" :name="icon" />
-    <UiAlertTitle v-if="title">
+    <UiAlertTitle v-if="title" class="font-semibold">
       {{ title }}
     </UiAlertTitle>
     <UiAlertDescription>
@@ -16,11 +16,13 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  title: string;
-  icon: string;
-  type: 'info' | 'warning' | 'success' | 'danger';
-}>();
+withDefaults(defineProps<{
+  title?: string;
+  icon?: string;
+  type?: 'info' | 'warning' | 'success' | 'danger';
+}>(), {
+  type: 'info',
+});
 
 const typeTwClass = {
   info: '',

components/content/ProseCode.vue

@@ -19,30 +19,33 @@
         </Transition>
       </span>
     </div>
-    <div
-      class="p-3 bg-zinc-50 dark:bg-zinc-900 text-sm relative"
-      :class="[`highlight-${language}`]"
-      @mouseenter="hovered = true"
-      @mouseleave="hovered = false"
-    >
-      <span v-if="!filename" class="absolute right-4">
-        <Transition name="fade" mode="out-in">
-          <Icon
-            v-if="copied === false"
-            name="lucide:copy"
-            class="self-center cursor-pointer text-muted-foreground hover:text-primary"
-            @click="copyCode"
-          />
-          <Icon
-            v-else
-            ref="checkIconRef"
-            name="lucide:check"
-            class="self-center cursor-pointer text-muted-foreground hover:text-primary"
-          />
-        </Transition>
-      </span>
-      <slot />
-    </div>
+    <UiScrollArea>
+      <div
+        class="p-3 bg-zinc-50 dark:bg-zinc-900 text-sm relative overflow-x-auto "
+        :class="[`highlight-${language}`, !filename && 'pr-10']"
+        @mouseenter="hovered = true"
+        @mouseleave="hovered = false"
+      >
+        <span v-if="!filename" class="absolute right-4">
+          <Transition name="fade" mode="out-in">
+            <Icon
+              v-if="copied === false"
+              name="lucide:copy"
+              class="self-center cursor-pointer text-muted-foreground hover:text-primary"
+              @click="copyCode"
+            />
+            <Icon
+              v-else
+              ref="checkIconRef"
+              name="lucide:check"
+              class="self-center cursor-pointer text-muted-foreground hover:text-primary"
+            />
+          </Transition>
+        </span>
+        <slot />
+      </div>
+      <UiScrollBar orientation="horizontal" />
+    </UiScrollArea>
   </UiCard>
 </template>
 

components/content/ProseCodeInline.vue

@@ -1,11 +1,11 @@
 <template>
-  <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold inline-code">
+  <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono inline-code">
     <slot />
   </code>
 </template>
 
 <style scoped>
-.inline-code:not(h1>a>code, h2>a>code, h3>a>code, h4>a>code, h5>a>code, strong>a>code) {
+.inline-code:not(h1>code, h1>a>code, h2>a>code, h3>a>code, h4>a>code, h5>a>code, strong>a>code) {
   /* text-sm */
   font-size: 0.875rem;
   line-height: 1.25rem;

components/content/ProseTr.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr class="m-0 border-t p-0 even:bg-muted">
+  <tr class="m-0 border-t p-0 even:bg-zinc-50 even:dark:bg-zinc-900">
     <slot />
   </tr>
 </template>

components/layout/PrevNext.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="lg:flex lg:flex-row pt-8 mt-10 border-t">
+    <LayoutPrevNextButton :prev-next="prev" side="left" />
+    <span class="flex-1" />
+    <LayoutPrevNextButton :prev-next="next" side="right" />
+  </div>
+</template>
+
+<script setup lang="ts">
+const { prev, next } = useContent();
+</script>

components/layout/PrevNextButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <NuxtLink
+    v-if="prevNext && prevNext._path"
+    :to="prevNext._path"
+    class="basis-1/3"
+  >
+    <div class="border p-4 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-all space-y-2 mb-4">
+      <div class="flex flex-row gap-3">
+        <div v-if="side === 'left'" class="flex h-6 w-6 min-w-6">
+          <Icon name="lucide:arrow-left" size="20" class="self-center mx-auto" />
+        </div>
+        <span class="self-center space-y-2">
+          <div class="text-lg font-semibold">
+            {{ prevNext.title }}
+          </div>
+          <div v-if="prevNext.description" class="text-sm text-muted-foreground">
+            {{ prevNext.description }}
+          </div>
+        </span>
+        <div v-if="side === 'right'" class="flex h-6 w-6 min-w-6 ml-auto">
+          <Icon name="lucide:arrow-right" size="20" class="self-center mx-auto" />
+        </div>
+      </div>
+    </div>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  prevNext: any;
+  side: 'left' | 'right';
+}>();
+</script>

content/1.getting-started/1.aaa.md

@@ -3,8 +3,6 @@ title: Usage
 description: Learn how to write and customize your documentation.
 ---
 
-# Hi
-
 This is only a **basic** *example* of what you can achieve with [Nuxt UI Pro](https://ui.nuxt.com/pro/guide), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content, [`@nuxtjs/fontaine`](https://github.com/nuxt-modules/fontaine) and [`@nuxtjs/google-fonts`](https://github.com/nuxt-modules/google-fonts) to change the font and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews.
 
 `asas`

content/index.md

@@ -44,6 +44,16 @@ You can start a fresh new project with:
 npx nuxi init -t github:nuxt-ui-pro/docs
 ```
 
+```bash
+npx nuxi init -t github:nuxt-ui-pro/docs dasjnasdhashdishdiashduiashdsuahdiashdsaihduiashdashdusahdauhaishdishdadsaddasdasdasdsad
+```
+
+```bash
+npx nuxi init -t github:nuxt-ui-pro/docs dasjnasdhashdishdia
+shduiashdsuahdiashdsaihduiash
+dashdusahdauhaishdishdadsaddasdasdasdsad
+```
+
 or create a new repository from GitHub:
 
 1. Open <https://github.com/nuxt-ui-pro/docs>

nuxt.config.ts

@@ -20,6 +20,7 @@ export default defineNuxtConfig({
     componentDir: './components/ui',
   },
   content: {
+    documentDriven: true,
     highlight: {
       theme: {
         default: 'github-light',

pages/[...slug].vue

@@ -1,15 +1,31 @@
 <template>
   <main>
-    <LayoutBreadcrumb />
+    <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-if="page?.body"
+      v-else
+      :key="page._id"
       :value="page"
       class="docs-content"
     />
+    <LayoutPrevNext />
   </main>
 </template>
 
 <script setup lang="ts">
-const route = useRoute();
-const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne());
+const { page } = useContent();
 </script>