feat: breadcrumbs

Author: antfu

README.md

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

components/ContentNavCard.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 defineProps<{
-  to: string
+  to?: string
   icon?: string
-  title: string
+  title?: string
   subheader: string
   description: string
 }>()

components/PanelDocs.vue

@@ -1,43 +1,86 @@
 <script setup lang="ts">
-const { page } = useContent()
+import type { NavItem, ParsedContent } from '@nuxt/content/dist/runtime/types'
+
+const {
+  navigation,
+  page,
+  next,
+  prev,
+} = useContent() as {
+  navigation: Ref<NavItem[]>
+  page: Ref<ParsedContent>
+  next: Ref<ParsedContent | undefined>
+  prev: Ref<ParsedContent | undefined>
+}
+
+interface BreadcrumbItem {
+  title: string
+  path?: string
+}
+
+function findNavItemFromPath(path: string, items = navigation.value): NavItem | undefined {
+  const item = items.find(i => i._path === path)
+  if (item)
+    return item
+
+  const parts = path.split('/').filter(Boolean)
+  for (let i = parts.length - 1; i > 0; i--) {
+    const parentPath = `/${parts.slice(0, i).join('/')}`
+    const parent = items.find(i => i._path === parentPath)
+    if (parent)
+      return findNavItemFromPath(path, parent.children || [])
+  }
+}
+
+const contentPath = computed(() => page.value?._path as string | undefined)
+const breadcrumbs = computed(() => {
+  const parts = contentPath.value?.split('/').filter(Boolean) || []
+  const breadcrumbs = parts
+    .map((part, idx): BreadcrumbItem => {
+      const path = `/${parts.slice(0, idx + 1).join('/')}`
+      const item = findNavItemFromPath(path)
+      return {
+        title: item?.title || 'Not found',
+        path: item ? path : undefined,
+      }
+    })
+
+  if (!breadcrumbs.find(i => i.path === '/')) {
+    breadcrumbs.unshift({
+      title: 'Guide',
+      path: '/',
+    })
+  }
+  return breadcrumbs
+})
+
 const ui = useUiState()
 
 const sourceUrl = computed(() => page.value?._file
   ? `https://github.com/nuxt/learn.nuxt.com/edit/main/content/${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>
   <div grid="~ rows-[min-content_1fr_min-content]" relative h-full>
-    <button
-      flex="~ gap-2 items-center" border="b base dashed" bg-faded px4 py2
-      @click="ui.isContentDropdownShown = !ui.isContentDropdownShown"
-    >
+    <div flex="~ gap-2 items-center" border="b base dashed" bg-faded px4 py2>
       <div i-ph-book-duotone />
-      <NuxtLink to="/" text-sm>
-        Guide
-      </NuxtLink>
-      <div flex-auto />
-      <div i-ph-caret-down-duotone text-sm op50 transition duration-400 :class="ui.isContentDropdownShown ? 'rotate-180' : ''" />
-    </button>
+      <template v-for="bc, idx of breadcrumbs" :key="bc.path">
+        <div v-if="idx !== 0" i-ph-caret-right mx--1 text-sm op50 />
+        <NuxtLink :to="bc.path" text-sm hover="underline underline-dashed text-primary">
+          {{ bc.title }}
+        </NuxtLink>
+      </template>
+      <button
+        h-full flex-auto
+        @click="ui.isContentDropdownShown = !ui.isContentDropdownShown"
+      />
+      <button
+        i-ph-caret-down-duotone text-sm op50 transition duration-400
+        :class="ui.isContentDropdownShown ? 'rotate-180' : ''"
+        @click="ui.isContentDropdownShown = !ui.isContentDropdownShown"
+      />
+    </div>
     <div relative h-full of-hidden>
       <article class="max-w-none prose" h-full of-auto p6>
         <ContentDoc />