From bda6098db35d4afe5ed9f56223069094d7c672a1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 29 Nov 2024 17:28:19 +0100
Subject: [PATCH] docs(app): improve navigation

---
 docs/app/app.vue                             | 29 ++----------------
 docs/app/composables/useContentNavigation.ts | 31 ++++++++++++++++++++
 docs/app/error.vue                           | 31 +++-----------------
 3 files changed, 38 insertions(+), 53 deletions(-)
 create mode 100644 docs/app/composables/useContentNavigation.ts

diff --git a/docs/app/app.vue b/docs/app/app.vue
index 11eb2264..1f3e2a46 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -73,33 +73,10 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-const { framework, frameworks } = useSharedData()
+const { frameworks } = useSharedData()
+const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)
 
-function filterFrameworkItems(items: any[]) {
-  return items?.filter(item => !item.framework || item.framework === framework.value)
-}
-
-function processNavigationItem(item: any): any {
-  if (item.shadow) {
-    const matchingChild = filterFrameworkItems(item.children)?.[0]
-    return matchingChild
-      ? {
-          ...matchingChild,
-          title: item.title,
-          children: matchingChild.children ? processNavigationItem(matchingChild) : undefined
-        }
-      : item
-  }
-
-  return {
-    ...item,
-    children: item.children?.length ? filterFrameworkItems(item.children)?.map(processNavigationItem) : undefined
-  }
-}
-
-const filteredNavigation = computed(() => navigation.value?.map(processNavigationItem))
-
-provide('navigation', filteredNavigation)
+provide('navigation', mappedNavigation)
 </script>
 
 <template>
diff --git a/docs/app/composables/useContentNavigation.ts b/docs/app/composables/useContentNavigation.ts
new file mode 100644
index 00000000..fe59b4f0
--- /dev/null
+++ b/docs/app/composables/useContentNavigation.ts
@@ -0,0 +1,31 @@
+import type { ContentNavigationItem } from '@nuxt/content'
+
+function processNavigationItem(item: ContentNavigationItem, parent?: ContentNavigationItem): any {
+  if (item.shadow) {
+    return item.children?.map(child => processNavigationItem(child, item))
+  }
+
+  return {
+    ...item,
+    title: parent?.title || item.title,
+    class: item.framework ? `${item.framework}-only` : undefined,
+    children: item.children?.length ? item.children?.flatMap(child => processNavigationItem(child)) : undefined
+  }
+}
+
+export const useContentNavigation = (navigation: Ref<ContentNavigationItem[] | undefined>) => {
+  const { framework } = useSharedData()
+
+  const mappedNavigation = computed(() => navigation.value?.map(item => processNavigationItem(item)))
+  const filteredNavigation = computed(() => mappedNavigation.value?.map((item) => {
+    return {
+      ...item,
+      children: item.children?.filter((child: any) => !child.framework || child.framework === framework.value)
+    }
+  }))
+
+  return {
+    mappedNavigation,
+    filteredNavigation
+  }
+}
diff --git a/docs/app/error.vue b/docs/app/error.vue
index 9114a0cb..ed2737ae 100644
--- a/docs/app/error.vue
+++ b/docs/app/error.vue
@@ -11,7 +11,7 @@ const route = useRoute()
 const appConfig = useAppConfig()
 const colorMode = useColorMode()
 
-const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content', ['framework']))
 const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
   server: false
 })
@@ -81,33 +81,10 @@ useServerSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
-const { framework, frameworks } = useSharedData()
+const { frameworks } = useSharedData()
+const { mappedNavigation, filteredNavigation } = useContentNavigation(navigation)
 
-function filterFrameworkItems(items: any[]) {
-  return items?.filter(item => !item.framework || item.framework === framework.value)
-}
-
-function processNavigationItem(item: any): any {
-  if (item.shadow) {
-    const matchingChild = filterFrameworkItems(item.children)?.[0]
-    return matchingChild
-      ? {
-          ...matchingChild,
-          title: item.title,
-          children: matchingChild.children ? processNavigationItem(matchingChild) : undefined
-        }
-      : item
-  }
-
-  return {
-    ...item,
-    children: item.children?.length ? filterFrameworkItems(item.children)?.map(processNavigationItem) : undefined
-  }
-}
-
-const filteredNavigation = computed(() => navigation.value?.map(processNavigationItem))
-
-provide('navigation', filteredNavigation)
+provide('navigation', mappedNavigation)
 </script>
 
 <template>