arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(app): improve navigation

Browse Source
This commit is contained in:
Benjamin Canac
2024-11-29 17:28:19 +01:00
parent 8344d852a5
commit bda6098db3
3 changed files with 38 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/app/app.vue
View File

@@ -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>

31
docs/app/composables/useContentNavigation.ts Normal file
View File

@@ -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
}
}

31
docs/app/error.vue
View File

@@ -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>