feat: implement breadcrumbs

Author: onmax

packages/nimiq-vitepress-theme/src/composables/useBreadcrumbs.ts

@@ -0,0 +1,58 @@
+import { useCurrentModule } from "./useCurrentModule"
+import { useRoute, withBase } from 'vitepress'
+import { computed } from 'vue'
+
+export interface Breadcrumb {
+  text: string
+  link?: string
+  icon?: string
+}
+
+export function useBreadcrumbs() {
+  const { currentDocModule } = useCurrentModule()
+  const route = useRoute()
+
+  const breadcrumbs = computed<Breadcrumb[]>(() => {
+    const items: Breadcrumb[] = []
+
+    // 1. Add module info with link
+    items.push({
+      text: currentDocModule.value.text,
+      link: currentDocModule.value.subpath,
+    })
+
+    // Find current page in sidebar
+    const currentSidebar = currentDocModule.value.sidebar.find(section => {
+      return section.items.some(item =>
+        item.link && withBase(item.link) + '/' === route.path ||
+        (item.items?.some(subitem => withBase(subitem.link) + '/' === route.path))
+      )
+    })
+
+    // 2. Add section label if exists
+    if (currentSidebar?.label)
+      items.push({ text: currentSidebar.label })
+
+    // 3. Add parent item if exists (for nested items)
+    const parentItem = currentSidebar?.items.find(item =>
+      item.items?.some(subitem => withBase(subitem.link) + '/' === route.path)
+    )
+    if (parentItem)
+      items.push({ text: parentItem.text })
+
+    // 4. Add current item
+    const currentItem = currentSidebar?.items.find(item => item.link === route.path) ||
+      currentSidebar?.items
+        .find(item => item.items?.some(subitem => subitem.link === route.path))
+        ?.items?.find(subitem => subitem.link === route.path)
+
+    if (currentItem)
+      items.push({ text: currentItem.text })
+
+    return items
+  })
+
+  return {
+    breadcrumbs
+  }
+}

packages/nimiq-vitepress-theme/src/layout/PageContent.vue

@@ -7,6 +7,7 @@ import { useData, useRoute } from 'vitepress'
 import { computed, onMounted, ref, watch } from 'vue'
 import SecondarySidebar from './SecondarySidebar.vue'
 import { data } from '../lib/git.data'
+import { useBreadcrumbs } from '../composables/useBreadcrumbs'
 import '../assets/code-blocks.css'
 import '../assets/typography.css'
 import '../assets/github-callouts.css'
@@ -41,11 +42,21 @@ onMounted(() => {
 
 const showEditContent = computed(() => theme.value.showEditContent !== false)
 const showLastUpdated = computed(() => theme.value.showLastUpdated !== false)
+
+const { breadcrumbs } = useBreadcrumbs()
 </script>
 
 <template>
-  <div f-pl-xl f-pr-xs f-pt-xl f="$px $px-min-48 $px-max-72" f-pb-md flex="~ gap-16" relative h-full>
+  <div f-pl-xl f-pr-xs f-pt-sm f="$px $px-min-48 $px-max-72" f-pb-md flex="~ gap-16" relative h-full>
     <div flex="~ col" h-full flex-1 w="[calc(100vw-2*var(--nq-sidebar-width)-2*var(--f-px))]">
+      <ul px-32 f-pb-lg flex="~ items-center gap-12">
+        <li v-for="({text, icon},i) in breadcrumbs" :key="text" contents w-max>
+          <div v-if="icon" :class="icon" />
+          <span nq-label f-text-2xs w-max>{{ text }}</span>
+          <div i-nimiq:chevron-right  text="neutral-700 9" v-if="i < breadcrumbs.length - 1" />
+        </li>
+      </ul>
+
       <article flex-1 class="nq-prose" var:nq-prose-max-width:none>
         <Content max-w-none />
       </article>