Complete the Charts and Catalog breadcrumb hierarchy

src/components/charts/ChartsCatalogPages.tsx

@@ -1,6 +1,7 @@
 import { Breadcrumbs } from '~/components/Breadcrumbs'
 import {
   getChartBreadcrumbItems,
+  chartCatalogBreadcrumbItems,
   getChartCollectionBreadcrumbItems,
 } from '~/utils/chart-breadcrumbs'
 import {
@@ -66,6 +67,11 @@ export function ChartsCatalog({
 
   return (
     <CatalogSurface>
+      {!collection && (
+        <div className="mb-4">
+          <Breadcrumbs section="Charts" items={chartCatalogBreadcrumbItems} />
+        </div>
+      )}
       {collection ? (
         <header className="mb-6 max-w-2xl">
           <Breadcrumbs

src/routes/_library/charts.catalog.index.tsx

@@ -1,3 +1,4 @@
+import { getChartCatalogBreadcrumbJsonLd } from '~/utils/chart-breadcrumbs'
 import { createFileRoute } from '@tanstack/react-router'
 import { ChartsCatalog } from '~/components/charts/ChartsCatalogPages'
 import { getChartsCatalogAll } from '~/utils/charts-catalog.functions'
@@ -6,7 +7,15 @@ import { seo } from '~/utils/seo'
 export const Route = createFileRoute('/_library/charts/catalog/')({
   loader: () => getChartsCatalogAll(),
   component: ChartsCatalogIndexRoute,
-  head: () => ({
+  head: ({ loaderData }) => ({
+    scripts: loaderData
+      ? [
+          {
+            type: 'application/ld+json',
+            children: JSON.stringify(getChartCatalogBreadcrumbJsonLd()),
+          },
+        ]
+      : [],
     meta: seo({
       title: 'Charts Catalog | TanStack',
       description: 'Executable TanStack Charts examples.',

src/utils/chart-breadcrumbs.ts

@@ -10,9 +10,7 @@ export function getChartBreadcrumbItems(
   const collection = chart.collection
     ? findChartsCatalogCollection(chart.collection)
     : undefined
-  const items: Array<BreadcrumbItem> = [
-    { label: 'Catalog', to: '/charts/catalog', search: true, preload: false },
-  ]
+  const items: Array<BreadcrumbItem> = [...chartCatalogBreadcrumbItems]
   if (collection) {
     items.push({
       label: collection.title,
@@ -43,7 +41,7 @@ export function getChartCollectionBreadcrumbItems(collection: {
   title: string
 }): Array<BreadcrumbItem> {
   return [
-    { label: 'Catalog', to: '/charts/catalog', search: true, preload: false },
+    ...chartCatalogBreadcrumbItems,
     {
       label: collection.title,
       to: `/charts/catalog/collections/${collection.id}`,
@@ -68,3 +66,21 @@ export function getChartCollectionBreadcrumbJsonLd(collection: {
     ),
   }
 }
+
+export const chartCatalogBreadcrumbItems: Array<BreadcrumbItem> = [
+  { label: 'Charts', to: '/charts/latest', search: true, preload: false },
+  { label: 'Catalog', to: '/charts/catalog', search: true, preload: false },
+]
+
+export function getChartCatalogBreadcrumbJsonLd() {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: chartCatalogBreadcrumbItems.map((item, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name: item.label,
+      item: canonicalUrl(item.to),
+    })),
+  }
+}

tests/chart-breadcrumbs.test.ts

@@ -2,6 +2,8 @@ import assert from 'node:assert/strict'
 import { test } from 'node:test'
 import {
   getChartBreadcrumbItems,
+  chartCatalogBreadcrumbItems,
+  getChartCatalogBreadcrumbJsonLd,
   getChartCollectionBreadcrumbItems,
   getChartCollectionBreadcrumbJsonLd,
   getChartBreadcrumbJsonLd,
@@ -17,46 +19,66 @@ test('chart hierarchy includes only known collections and keeps navigation optio
   const items = getChartBreadcrumbItems(chart)
   assert.deepEqual(
     items.map((item) => item.label),
-    ['Catalog', 'shadcn/ui Charts', 'Area <simple>'],
+    ['Charts', 'Catalog', 'shadcn/ui Charts', 'Area <simple>'],
   )
   assert.equal(items[1].search, true)
   assert.equal(items[1].preload, false)
   const schema = getChartBreadcrumbJsonLd(chart)
   assert.deepEqual(
     schema.itemListElement.map((item) => item.position),
-    [1, 2, 3],
+    [1, 2, 3, 4],
   )
   assert.equal(
-    schema.itemListElement[2].item,
+    schema.itemListElement[3].item,
     'https://tanstack.com/charts/catalog/charts/area-simple',
   )
   for (const collection of [undefined, 'unknown']) {
-    assert.equal(getChartBreadcrumbItems({ ...chart, collection }).length, 2)
+    assert.equal(getChartBreadcrumbItems({ ...chart, collection }).length, 3)
   }
 })
 
 test('collection trail returns to the complete catalog while schema stays canonical', () => {
   const collection = { id: 'shadcn', title: 'shadcn/ui Charts' }
   const items = getChartCollectionBreadcrumbItems(collection)
-  assert.equal(items[0].to, '/charts/catalog')
+  assert.equal(items[0].to, '/charts/latest')
   assert.equal(items[0].search, true)
   assert.equal(items[0].preload, false)
-  assert.equal(items[1].label, collection.title)
+  assert.equal(items[2].label, collection.title)
   assert.deepEqual(
     getChartCollectionBreadcrumbJsonLd(collection).itemListElement,
     [
       {
         '@type': 'ListItem',
         position: 1,
+        name: 'Charts',
+        item: 'https://tanstack.com/charts/latest',
+      },
+      {
+        '@type': 'ListItem',
+        position: 2,
         name: 'Catalog',
         item: 'https://tanstack.com/charts/catalog',
       },
       {
         '@type': 'ListItem',
-        position: 2,
+        position: 3,
         name: 'shadcn/ui Charts',
         item: 'https://tanstack.com/charts/catalog/collections/shadcn',
       },
     ],
   )
 })
+
+test('catalog root exposes the Charts parent without marking it as the catalog', () => {
+  assert.deepEqual(
+    chartCatalogBreadcrumbItems.map((item) => item.label),
+    ['Charts', 'Catalog'],
+  )
+  assert.deepEqual(
+    getChartCatalogBreadcrumbJsonLd().itemListElement.map((item) => item.item),
+    [
+      'https://tanstack.com/charts/latest',
+      'https://tanstack.com/charts/catalog',
+    ],
+  )
+})