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

diff --git a/src/components/templates/page/page-comments.tsx b/src/components/templates/page/page-comments.tsx
index 5f5208f..01c4eea 100644
--- a/src/components/templates/page/page-comments.tsx
+++ b/src/components/templates/page/page-comments.tsx
@@ -10,6 +10,7 @@ import {
   createComment,
   type CreateCommentInput,
 } from '../../../services/graphql';
+import { COMMENTS_SECTION_ID } from '../../../utils/constants';
 import { Heading, Link, Section } from '../../atoms';
 import { Card, CardBody } from '../../molecules';
 import {
@@ -27,7 +28,7 @@ const link = (chunks: ReactNode) => (
 
 export type PageCommentsProps = Omit<
   HTMLAttributes<HTMLDivElement>,
-  'children' | 'onSubmit'
+  'children' | 'id' | 'onSubmit'
 > &
   Pick<CommentsListProps, 'depth'> & {
     /**
@@ -139,7 +140,7 @@ const PageCommentsWithRef: ForwardRefRenderFunction<
   );
 
   return (
-    <div {...props} className={wrapperClass} ref={ref}>
+    <div {...props} className={wrapperClass} id={COMMENTS_SECTION_ID} ref={ref}>
       <Section className={styles.comments__body}>
         <Heading className={styles.heading} level={2}>
           {commentsListTitle}
diff --git a/src/components/templates/page/page.tsx b/src/components/templates/page/page.tsx
index b40c2f9..e3a4453 100644
--- a/src/components/templates/page/page.tsx
+++ b/src/components/templates/page/page.tsx
@@ -4,6 +4,7 @@ import {
   type HTMLAttributes,
 } from 'react';
 import { useIntl } from 'react-intl';
+import { ARTICLE_ID } from '../../../utils/constants';
 import { Article } from '../../atoms';
 import { Breadcrumbs, type BreadcrumbsItem } from '../../organisms/nav';
 import styles from './page.module.scss';
@@ -63,7 +64,9 @@ const PageWithRef: ForwardRefRenderFunction<HTMLDivElement, PageProps> = (
           items={breadcrumbs}
         />
       ) : null}
-      <Article className={pageClass}>{children}</Article>
+      <Article className={pageClass} id={ARTICLE_ID}>
+        {children}
+      </Article>
     </div>
   );
 };