refactor(pages): rewrite helpers to output schema in json-ld format

* make sure url are absolutes
* nest breadcrumb schema in webpage schema
* trim HTML tags from content/description
* use a regular script instead of next/script (with the latter the
schema is not updated on route change)
* place the script in document head
* add keywords, wordCount and readingTime keys in BlogPosting schema
* fix breadcrumbs in search page (without query)
* add tests (a `MatchInlineSnapshot` will be better but Prettier 3 is
not supported yet)

2 files changed, 14 insertions, 14 deletions

diff --git a/src/utils/hooks/use-breadcrumbs/use-breadcrumbs.test.tsx b/src/utils/hooks/use-breadcrumbs/use-breadcrumbs.test.tsx
index 9778aed..c80db1c 100644
--- a/src/utils/hooks/use-breadcrumbs/use-breadcrumbs.test.tsx
+++ b/src/utils/hooks/use-breadcrumbs/use-breadcrumbs.test.tsx
@@ -4,8 +4,9 @@ import nextRouterMock from 'next-router-mock';
 import { MemoryRouterProvider } from 'next-router-mock/MemoryRouterProvider';
 import type { ReactNode } from 'react';
 import { IntlProvider } from 'react-intl';
+import { CONFIG } from '../../config';
 import { PAGINATED_ROUTE_PREFIX, ROUTES } from '../../constants';
-import { capitalize } from '../../helpers';
+import { capitalize, trimTrailingChars } from '../../helpers';
 import { useBreadcrumbs } from './use-breadcrumbs';
 
 const AllProviders = ({ children }: { children: ReactNode }) => (
@@ -48,7 +49,7 @@ describe('useBreadcrumbs', () => {
         {
           '@type': 'ListItem',
           item: {
-            '@id': ROUTES.HOME,
+            '@id': trimTrailingChars(CONFIG.url, '/'),
             name: 'Home',
           },
           position: 1,
@@ -56,7 +57,7 @@ describe('useBreadcrumbs', () => {
         {
           '@type': 'ListItem',
           item: {
-            '@id': currentSlug,
+            '@id': `${trimTrailingChars(CONFIG.url, '/')}${currentSlug}`,
             name: label,
           },
           position: 2,
diff --git a/src/utils/hooks/use-breadcrumbs/use-breadcrumbs.ts b/src/utils/hooks/use-breadcrumbs/use-breadcrumbs.ts
index a0132c0..fd14e23 100644
--- a/src/utils/hooks/use-breadcrumbs/use-breadcrumbs.ts
+++ b/src/utils/hooks/use-breadcrumbs/use-breadcrumbs.ts
@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import type { BreadcrumbList } from 'schema-dts';
 import type { BreadcrumbsItem } from '../../../components';
 import { PAGINATED_ROUTE_PREFIX, ROUTES } from '../../constants';
-import { capitalize } from '../../helpers';
+import { capitalize, getBreadcrumbItemGraph } from '../../helpers';
 
 const is404 = (slug: string) => slug === ROUTES.NOT_FOUND;
 const isArticle = (slug: string) => slug === ROUTES.ARTICLE;
@@ -23,7 +23,9 @@ const getCrumbsSlug = (
   index: number
 ): string[] => [
   ...acc,
-  ...(isSearch(`/${current}`) ? [`/${current.split('?s=')[0]}`] : []),
+  ...(isSearch(`/${current}`) && current.includes('?s=')
+    ? [`/${current.split('?s=')[0]}`]
+    : []),
   `${acc[acc.length - 1]}${index === 0 ? '' : '/'}${current}`,
 ];
 
@@ -129,16 +131,13 @@ export const useBreadcrumbs = (
     schema: {
       '@type': 'BreadcrumbList',
       '@id': 'breadcrumbs',
-      itemListElement: items.map((item, index) => {
-        return {
-          '@type': 'ListItem',
-          item: {
-            '@id': item.slug,
-            name: item.label,
-          },
+      itemListElement: items.map((item, index) =>
+        getBreadcrumbItemGraph({
+          label: item.label,
           position: index + 1,
-        };
-      }),
+          slug: item.slug,
+        })
+      ),
     },
   };
 };