feat: breadcrumbs

client/components/ContentBreadcrumbs.vue

@@ -0,0 +1,48 @@
+<template>
+  <Breadcrumbs :breadcrumb-items="breadcrumbItems" />
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+import type { BreadcrumbItem } from './BreadcrumbsTypes'
+
+// import type { BreadcrumbItem } from '~/components/BreadcrumbsTypes'
+
+const { data: navigation } = await useAsyncData('navigation', () =>
+  fetchContentNavigation()
+)
+
+const route = useRoute()
+
+function shallowNavitems(navItems: NavItem[] | null | undefined): NavItem[] {
+  if (!navItems) return []
+
+  return [
+    ...navItems,
+    ...navItems.map((navItem) => shallowNavitems(navItem.children))
+  ].flat(10)
+}
+
+function navItemToBreadcrumbItem(navItem: NavItem): BreadcrumbItem {
+  return {
+    url: navItem._path,
+    label: navItem.title
+  }
+}
+
+const breadcrumbItems = shallowNavitems(navigation.value)
+  .filter((item) => route.path.substring(0, item._path.length) === item._path)
+  .sort((a, b) => {
+    return a._path.length - b._path.length
+  })
+  .map(navItemToBreadcrumbItem)
+
+// function navigationToBreadcrumbs(navigation: Navigation): BreadcrumbItem[] {
+//   return navigation.map(
+//     (item): BreadcrumbItem => ({
+//       url: item._path,
+//       label: item.title
+//     })
+//   )
+// }
+</script>

client/content/about.md

@@ -1 +1,5 @@
+---
+title: About
+---
+
 # Hello Content

client/content/about/subpub_stats.md

@@ -1 +1,5 @@
+---
+title: Subpub Statistics
+---
+
 # Subpub Stats

client/content/test.md

@@ -0,0 +1,5 @@
+---
+title: Test Is Not In Path
+---
+
+# my title

client/pages/[...slug].vue

@@ -1,31 +1,17 @@
 <template>
   <div class="min-h-[100vh]">
     <div class="container mx-auto">
-      <Breadcrumbs :breadcrumb-items="breadcrumbItems" />
+      <ContentBreadcrumbs />
       <ContentDoc />
       <ContentDocLastUpdated />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { startCase } from 'lodash-es'
 import _contentMetadata from '../content-metadata.json'
-import type { BreadcrumbItem } from '~/components/BreadcrumbsTypes'
 
-const route = useRoute()
+const { data: page } = await useAsyncData('my-page', queryContent('/').findOne)
 
-const pathParts = route.path.substring(1).split('/')
-
-// const { data: navigation } = await useAsyncData('navigation', () =>
-//   fetchContentNavigation()
-// )
-
-const breadcrumbItems: BreadcrumbItem[] = [
-  { url: '/', label: 'Home' },
-  ...pathParts.map((pathPart, index, arr) => ({
-    url: `/${arr.slice(0, index + 1).join('/')}`,
-    label: startCase(pathPart)
-  }))
-]
+useContentHead(page)
 </script>

client/scripts/generate-content-metadata.ts

@@ -16,31 +16,32 @@ export type ContentMetadata = Record<
   string, // path within content directory
   {
     mtime: string // timestamp ISO 8601
-  }
+  } | undefined
 >
 
 const markdownMetadataArray = await Promise.all(
   contentMarkdownPaths.map(
     (contentMarkdownPath) =>
-      new Promise<ContentMetadata>((resolve, reject) => {
+      new Promise<ContentMetadata>((resolve) => {
         git
           .log({
             file: contentMarkdownPath,
             maxCount: 1,
             strictDate: true
           })
           .then((gitLog) => {
-            if (gitLog.latest?.date) {
-              const relativePath = contentMarkdownPath
+            const relativePath = contentMarkdownPath
                 .substring(contentPath.length)
                 .replace(/\.md$/, '')
+            if (gitLog.latest?.date) {
               resolve({
                 [relativePath]: { mtime: gitLog.latest?.date }
               })
             } else {
-              reject(
+              console.warn(
                 `Unable to extract latest Git log time from path ${contentMarkdownPath}`
               )
+              resolve({ [relativePath]: undefined })
             }
           })
       })