refactor(hooks): rewrite useBreadcrumbs hook

* use next/router to get the slug instead of using props
* handle cases where the current page title is not provided
* update JSON-LD schema to match the example in documentation
* add tests

1 files changed, 5 insertions, 11 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index bd102a9..6333056 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -46,7 +46,7 @@ import {
 import { loadTranslation, type Messages } from '../../utils/helpers/server';
 import {
   useArticle,
-  useBreadcrumb,
+  useBreadcrumbs,
   useComments,
   useHeadingsTree,
   usePrism,
@@ -74,10 +74,9 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({ data }) => {
       contentId: article.id,
     },
   });
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title: data.post.title,
-    url: data.post.slug,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs(
+    article.title
+  );
   const { ref, tree } = useHeadingsTree<HTMLDivElement>({ fromLevel: 2 });
   const { attributes, className: prismClassName } = usePrism({
     attributes: {
@@ -172,6 +171,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({ data }) => {
     webpageSchema,
     blogSchema,
     blogPostSchema,
+    breadcrumbSchema,
     ...getCommentsSchema(comments),
   ]);
 
@@ -208,12 +208,6 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({ data }) => {
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={title}
         intro={intro}