diff --git a/src/lib/components/Breadcrumbs.svelte b/src/lib/components/Breadcrumbs.svelte index f31f02a..640c80a 100644 --- a/src/lib/components/Breadcrumbs.svelte +++ b/src/lib/components/Breadcrumbs.svelte @@ -4,8 +4,9 @@ * * Pass an ordered list of crumbs from the site root to the current page. The * final crumb is rendered as the current page - no link, `aria-current="page"`. - * The component also emits a matching schema.org `BreadcrumbList` so the trail - * is eligible for breadcrumb rich results in search. + * The component also emits a matching schema.org `BreadcrumbList` (via the + * shared breadcrumbSchema builder + ) so the trail is eligible for + * breadcrumb rich results in search. * * Usage: * */ + import JsonLd from './JsonLd.svelte'; + import { breadcrumbSchema } from '$lib/seo/schema'; + export interface Crumb { label: string; /** Absolute or root-relative path. Omit on the final (current) crumb. */ href?: string; } - let { items, origin = 'https://cropwatch.io' }: { items: Crumb[]; origin?: string } = - $props(); + let { items }: { items: Crumb[] } = $props(); const lastIndex = $derived(items.length - 1); - // BreadcrumbList JSON-LD: absolute URLs from each href; the current page omits - // `item`. `<` is escaped so a label can never break out of the script tag. - const jsonLd = $derived( - JSON.stringify({ - '@context': 'https://schema.org', - '@type': 'BreadcrumbList', - itemListElement: items.map((crumb, i) => ({ - '@type': 'ListItem', - position: i + 1, - name: crumb.label, - ...(crumb.href ? { item: origin + crumb.href } : {}) - })) - }).replace(/. + const breadcrumbLd = $derived( + breadcrumbSchema(items.map((crumb) => ({ name: crumb.label, path: crumb.href }))) ); - - {@html ``} - +