feat: prevNext & breadcrumb config in frontmatter

Signed-off-by: ZTL-UwU <[email protected]>

components/layout/PrevNext.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="border-t pt-6 lg:flex lg:flex-row">
+  <div v-if="page.prevNext ?? true" class="border-t pt-6 lg:flex lg:flex-row">
     <LayoutPrevNextButton :prev-next="prev" side="left" />
     <span class="flex-1" />
     <LayoutPrevNextButton :prev-next="next" side="right" />
   </div>
 </template>
 
 <script setup lang="ts">
+const { page } = useContent();
 const { prev, next } = useContent();
 </script>

composables/useBreadcrumb.ts

@@ -13,10 +13,14 @@ export function useBreadcrumb(url: string): BreadcrumbItem[] {
   // Construct breadcrumb for each segment
   let href = '';
   let nav = navigation.value;
+
+  if (!nav)
+    return [];
+
   for (let i = 0; i < segments.length; i++) {
     const segment = segments[i].replace('.html', '');
     href += `/${segment}`;
-    const page = nav.find(x => (x._path as string) === href);
+    const page = nav?.find(x => (x._path as string) === href);
     nav = page?.children;
     breadcrumbItems.push({ title: page?.title ?? segment, href });
   }

content/1.getting-started/3.writing/2.pages.md

@@ -59,4 +59,10 @@ badges:
   ::field{name="editLink" type="boolean" default-value="true"}
   Whether to show the edit link for this page.
   ::
+  ::field{name="prevNext" type="boolean" default-value="true"}
+  Whether to show the previous & next page buttons.
+  ::
+  ::field{name="breadcrumb" type="boolean" default-value="true"}
+  Whether to show the breadcrumb.
+  ::
 ::

content/3.api/1.configuration/1.shadcn-docs.md

@@ -226,7 +226,7 @@ All configurable icons can be set to iconify icons, emojis and urls, using [smar
 
 ::field-group
   ::field{name="credits" type="string" defaultValue="''"}
-  The credit text on the left side of the footer.
+  The credit text on the left side of the footer (parsed by the MDC parser).
   ::
   ::field{name="links" type="ILink[]" defaultValue="[]"}
   The links on the right side of the footer.

content/index.md

@@ -6,7 +6,7 @@ navigation: false
 ::hero
 ---
 announcement:
-  title: 'Release v0.8.4'
+  title: 'Release v0.8.5'
   icon: '🎉'
   to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/releases/latest
   target: _blank

nuxt.config.ts

@@ -53,6 +53,8 @@ export default defineNuxtConfig({
         'sidebar',
         'collapse',
         'editLink',
+        'prevNext',
+        'breadcrumb',
       ],
     },
     experimental: {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-docs-nuxt",
   "type": "module",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "Effortless and beautiful docs template built with Nuxt Content & shadcn-vue.",
   "author": "Tony Zhang <[email protected]>",
   "license": "MIT",

pages/[...slug].vue

@@ -17,7 +17,7 @@
     :class="[config.toc.enable && (page.toc ?? true) && 'lg:grid lg:grid-cols-[1fr_220px] lg:gap-14 lg:py-8']"
   >
     <div class="mx-auto w-full min-w-0">
-      <LayoutBreadcrumb v-if="page?.body && config.main.breadCrumb" class="mb-4" />
+      <LayoutBreadcrumb v-if="page?.body && config.main.breadCrumb && (page.breadcrumb ?? true)" class="mb-4" />
       <LayoutTitle
         v-if="config.main.showTitle"
         :title="page?.title"