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, 3 insertions, 12 deletions

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f4d36c1..ade628a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -29,7 +29,7 @@ import { CONFIG } from '../utils/config';
 import { ROUTES } from '../utils/constants';
 import { getSchemaJson, getWebPageSchema } from '../utils/helpers';
 import { loadTranslation, type Messages } from '../utils/helpers/server';
-import { useBreadcrumb } from '../utils/hooks';
+import { useBreadcrumbs } from '../utils/hooks';
 
 type RecentPostsProps = {
   posts: RecentArticle[];
@@ -129,10 +129,7 @@ type HomeProps = {
  * Home page.
  */
 const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
-  const { schema: breadcrumbSchema } = useBreadcrumb({
-    title: '',
-    url: ROUTES.HOME,
-  });
+  const { schema: breadcrumbSchema } = useBreadcrumbs();
 
   const webpageSchema = getWebPageSchema({
     description: meta.seo.description,
@@ -140,7 +137,7 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
     slug: ROUTES.HOME,
     title: meta.seo.title,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema]);
+  const schemaJsonLd = getSchemaJson([webpageSchema, breadcrumbSchema]);
 
   return (
     <Page hasSections>
@@ -158,12 +155,6 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-      />
       <HomePageContent components={getComponents(recentPosts)} />
     </Page>
   );