|
| 1 | +/** |
| 2 | + * Shadows the comark-docs layer's `useFilteredNavigation` to support labeled |
| 3 | + * sidebar groups, restoring the grouped guide sidebar the VitePress site had. |
| 4 | + * |
| 5 | + * Groups are declared in `app.config.ts` under `docs.sidebarGroups`, keyed by |
| 6 | + * top-level content section; each group lists page paths (which may live in |
| 7 | + * other sections, e.g. the adapter pages the guide's "Mount anywhere" group |
| 8 | + * links to). Sections without a groups entry keep the layer's behavior: the |
| 9 | + * section's pages as a flat list (single-section tab) or the sections as |
| 10 | + * collapsible groups (multi-section tab). |
| 11 | + */ |
| 12 | + |
| 13 | +/** Structural mirror of comark-content's NavigationItem (avoids depending on the transitive package). */ |
| 14 | +interface NavItem { |
| 15 | + title: string |
| 16 | + path: string |
| 17 | + stem?: string |
| 18 | + children?: NavItem[] |
| 19 | + page?: boolean |
| 20 | +} |
| 21 | + |
| 22 | +interface SidebarGroup { |
| 23 | + title: string |
| 24 | + items: string[] |
| 25 | +} |
| 26 | + |
| 27 | +interface HeaderNavGroup { |
| 28 | + label: string |
| 29 | + sections?: string[] |
| 30 | +} |
| 31 | + |
| 32 | +/** Logical top-level segment of a path, ignoring the active version `base`. */ |
| 33 | +function segmentOf(path: string, base: string): string { |
| 34 | + const rel = base && path.startsWith(base) ? path.slice(base.length) : path |
| 35 | + return rel.split('/').filter(Boolean)[0] ?? '' |
| 36 | +} |
| 37 | + |
| 38 | +function relOf(path: string, base: string): string { |
| 39 | + return (base && path.startsWith(base) ? path.slice(base.length) : path) || '/' |
| 40 | +} |
| 41 | + |
| 42 | +export function useFilteredNavigation(): ComputedRef<NavItem[]> { |
| 43 | + const route = useRoute() |
| 44 | + const content = useDocsContent() |
| 45 | + const appConfig = useAppConfig() |
| 46 | + const navigation = inject<Ref<NavItem[]>>('navigation', ref([])) |
| 47 | + |
| 48 | + return computed<NavItem[]>(() => { |
| 49 | + const base = content.value.base |
| 50 | + const seg = segmentOf(route.path, base) |
| 51 | + const nav = navigation.value ?? [] |
| 52 | + |
| 53 | + const headerGroups = (appConfig.header?.nav ?? []) as HeaderNavGroup[] |
| 54 | + const groups = headerGroups.length |
| 55 | + ? headerGroups |
| 56 | + : nav.map(item => ({ label: item.title, sections: [segmentOf(item.path, base)] })) |
| 57 | + |
| 58 | + const active = groups.find(group => group.sections?.includes(seg)) ?? groups[0] |
| 59 | + const sections = active?.sections |
| 60 | + // Manual tabs (no sections) have no content sidebar; fall back to the full tree. |
| 61 | + if (!sections?.length) |
| 62 | + return nav |
| 63 | + |
| 64 | + // Single-section tab with configured groups: labeled subsections. |
| 65 | + const sidebarGroups = (appConfig as { docs?: { sidebarGroups?: Record<string, SidebarGroup[]> } }) |
| 66 | + .docs |
| 67 | + ?.sidebarGroups |
| 68 | + const groupsConfig = sections.length === 1 ? sidebarGroups?.[sections[0]!] : undefined |
| 69 | + if (groupsConfig) { |
| 70 | + // Index every page by base-relative path, preferring leaf pages over |
| 71 | + // section nodes (a section node carries the directory title). |
| 72 | + const byPath = new Map<string, NavItem>() |
| 73 | + const walk = (items: NavItem[]): void => { |
| 74 | + for (const item of items) { |
| 75 | + if (item.page !== false) { |
| 76 | + const rel = relOf(item.path, base) |
| 77 | + const existing = byPath.get(rel) |
| 78 | + if (!existing || (existing.children?.length && !item.children?.length)) |
| 79 | + byPath.set(rel, item) |
| 80 | + } |
| 81 | + if (item.children) |
| 82 | + walk(item.children) |
| 83 | + } |
| 84 | + } |
| 85 | + walk(nav) |
| 86 | + |
| 87 | + const used = new Set<string>() |
| 88 | + const grouped: NavItem[] = [] |
| 89 | + for (const [index, group] of groupsConfig.entries()) { |
| 90 | + const children = group.items |
| 91 | + .map((path) => { |
| 92 | + used.add(path) |
| 93 | + return byPath.get(path) |
| 94 | + }) |
| 95 | + .filter(child => child !== undefined) |
| 96 | + .map(child => ({ ...child, children: undefined })) |
| 97 | + if (!children.length) |
| 98 | + continue |
| 99 | + grouped.push({ |
| 100 | + title: group.title, |
| 101 | + path: `${base}/${sections[0]}-group-${index}`, |
| 102 | + children, |
| 103 | + page: false, |
| 104 | + }) |
| 105 | + } |
| 106 | + |
| 107 | + // Append pages the groups don't cover, so a new page never vanishes. |
| 108 | + const node = nav.find(item => segmentOf(item.path, base) === sections[0]) |
| 109 | + const leftovers = (node?.children ?? []) |
| 110 | + .filter(child => !used.has(relOf(child.path, base))) |
| 111 | + return [...grouped, ...leftovers] |
| 112 | + } |
| 113 | + |
| 114 | + // Single-section tab: that section's children as a flat tree. |
| 115 | + if (sections.length === 1) { |
| 116 | + const node = nav.find(item => segmentOf(item.path, base) === sections[0]) |
| 117 | + return (node?.children ?? []).filter(child => child.path !== node?.path) |
| 118 | + } |
| 119 | + |
| 120 | + // Multi-section tab: the sections as collapsible groups. |
| 121 | + return nav.filter(item => sections.includes(segmentOf(item.path, base))) |
| 122 | + }) |
| 123 | +} |
0 commit comments