diff --git a/components/content/ReadMore.vue b/components/content/ReadMore.vue index df89e38c..504b1827 100644 --- a/components/content/ReadMore.vue +++ b/components/content/ReadMore.vue @@ -11,17 +11,7 @@ const props = defineProps<{ target?: string; }>(); -function createBreadcrumb(link: string = 'here') { - if (link.startsWith('http')) - return link.replace(/^https?:\/\//, ''); - - return link - .split('/') - .filter(Boolean) - .join(' > ') - .replace('Api', 'API'); -} - -// Guess title from link! -const computedTitle = computed(() => props.title || createBreadcrumb(props.to)); +const computedTitle = computed( + () => props.title || useBreadcrumb(props.to).map(x => x.title).join(' > '), +); diff --git a/components/layout/Breadcrumb.vue b/components/layout/Breadcrumb.vue index d6a977df..93edc70f 100644 --- a/components/layout/Breadcrumb.vue +++ b/components/layout/Breadcrumb.vue @@ -18,29 +18,6 @@ diff --git a/composables/useBreadcrumb.ts b/composables/useBreadcrumb.ts new file mode 100644 index 00000000..199a2a90 --- /dev/null +++ b/composables/useBreadcrumb.ts @@ -0,0 +1,24 @@ +interface BreadcrumbItem { + title: string; + href: string; +} + +export function useBreadcrumb(url: string): BreadcrumbItem[] { + const { navigation } = useContent(); + + const breadcrumbItems: BreadcrumbItem[] = []; + // Remove empty segments + const segments = url.split('/').filter(segment => segment !== ''); + + // Construct breadcrumb for each segment + let href = ''; + let nav = navigation.value; + for (let i = 0; i < segments.length; i++) { + const segment = segments[i].replace('.html', ''); + href += `/${segment}`; + const page = nav.find(x => (x._path as string) === href); + nav = page?.children; + breadcrumbItems.push({ title: page?.title ?? segment, href }); + } + return breadcrumbItems; +}