From 7063b199b4748a9c354ed37e64cdc84c512f2c0c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 14 Dec 2023 15:30:34 +0100
Subject: 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)
---
 src/pages/blog/index.tsx         | 58 +++++++++++++++++++++-------------------
 src/pages/blog/page/[number].tsx | 57 ++++++++++++++++++++-------------------
 2 files changed, 60 insertions(+), 55 deletions(-)

(limited to 'src/pages/blog')

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 49c16b1..f58d36f 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,7 +1,5 @@
-/* eslint-disable max-statements */
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
-import Script from 'next/script';
 import { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import {
@@ -37,13 +35,17 @@ import type {
   WPTopicPreview,
 } from '../../types';
 import { CONFIG } from '../../utils/config';
-import { PAGINATED_ROUTE_PREFIX, ROUTES } from '../../utils/constants';
 import {
-  getBlogSchema,
+  ARTICLE_ID,
+  PAGINATED_ROUTE_PREFIX,
+  ROUTES,
+} from '../../utils/constants';
+import {
+  getBlogGraph,
   getLinksItemData,
   getPostsWithUrl,
-  getSchemaJson,
-  getWebPageSchema,
+  getSchemaFrom,
+  getWebPageGraph,
 } from '../../utils/helpers';
 import { loadTranslation, type Messages } from '../../utils/helpers/server';
 import {
@@ -160,21 +162,23 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ data }) => {
     messages.pageTitle
   );
 
-  const webpageSchema = getWebPageSchema({
-    description: messages.seo.metaDesc,
-    locale: CONFIG.locales.defaultLocale,
-    slug: ROUTES.BLOG,
-    title: messages.pageTitle,
-  });
-  const blogSchema = getBlogSchema({
-    isSinglePage: false,
-    locale: CONFIG.locales.defaultLocale,
-    slug: ROUTES.BLOG,
-  });
-  const schemaJsonLd = getSchemaJson([
-    webpageSchema,
-    blogSchema,
-    breadcrumbSchema,
+  const jsonLd = getSchemaFrom([
+    getWebPageGraph({
+      breadcrumb: breadcrumbSchema,
+      description: messages.seo.metaDesc,
+      slug: ROUTES.BLOG,
+      title: messages.pageTitle,
+    }),
+    getBlogGraph({
+      description: '',
+      posts: articles?.flatMap((page) =>
+        page.edges.map(({ node }) => {
+          return { '@id': `${node.slug}#${ARTICLE_ID}` };
+        })
+      ),
+      slug: ROUTES.BLOG,
+      title: messages.pageTitle,
+    }),
   ]);
 
   const renderPaginationLabel: RenderPaginationItemAriaLabel = useCallback(
@@ -235,14 +239,12 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ data }) => {
         <meta property="og:type" content="website" />
         <meta property="og:title" content={messages.pageTitle} />
         <meta property="og:description" content={messages.seo.metaDesc} />
+        <script
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+          type="application/ld+json"
+        />
       </Head>
-      <Script
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-blog"
-        type="application/ld+json"
-        // eslint-disable-next-line react/no-danger -- Necessary for schema
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
       <PageHeader
         heading={messages.pageTitle}
         meta={{ total: data.posts.pageInfo.total }}
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index 906a08e..fa1123d 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -3,7 +3,6 @@ import type { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import Script from 'next/script';
 import { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import {
@@ -44,13 +43,17 @@ import type {
   WPTopicPreview,
 } from '../../../types';
 import { CONFIG } from '../../../utils/config';
-import { PAGINATED_ROUTE_PREFIX, ROUTES } from '../../../utils/constants';
 import {
-  getBlogSchema,
+  ARTICLE_ID,
+  PAGINATED_ROUTE_PREFIX,
+  ROUTES,
+} from '../../../utils/constants';
+import {
+  getBlogGraph,
   getLinksItemData,
   getPostsWithUrl,
-  getSchemaJson,
-  getWebPageSchema,
+  getSchemaFrom,
+  getWebPageGraph,
 } from '../../../utils/helpers';
 import { loadTranslation, type Messages } from '../../../utils/helpers/server';
 import {
@@ -189,21 +192,23 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     messages.pageTitle
   );
 
-  const webpageSchema = getWebPageSchema({
-    description: messages.seo.metaDesc,
-    locale: CONFIG.locales.defaultLocale,
-    slug: ROUTES.BLOG,
-    title: messages.pageTitle,
-  });
-  const blogSchema = getBlogSchema({
-    isSinglePage: false,
-    locale: CONFIG.locales.defaultLocale,
-    slug: ROUTES.BLOG,
-  });
-  const schemaJsonLd = getSchemaJson([
-    webpageSchema,
-    blogSchema,
-    breadcrumbSchema,
+  const jsonLd = getSchemaFrom([
+    getWebPageGraph({
+      breadcrumb: breadcrumbSchema,
+      description: messages.seo.metaDesc,
+      slug: ROUTES.BLOG,
+      title: messages.pageTitle,
+    }),
+    getBlogGraph({
+      description: '',
+      posts: articles?.flatMap((page) =>
+        page.edges.map(({ node }) => {
+          return { '@id': `${node.slug}#${ARTICLE_ID}` };
+        })
+      ),
+      slug: ROUTES.BLOG,
+      title: messages.pageTitle,
+    }),
   ]);
 
   const renderPaginationLabel: RenderPaginationItemAriaLabel = useCallback(
@@ -266,14 +271,12 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
         <meta property="og:type" content="website" />
         <meta property="og:title" content={messages.pageTitle} />
         <meta property="og:description" content={messages.seo.metaDesc} />
+        <script
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+          type="application/ld+json"
+        />
       </Head>
-      <Script
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-blog"
-        type="application/ld+json"
-        // eslint-disable-next-line react/no-danger -- Necessary for schema
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
       <PageHeader
         heading={messages.pageTitle}
         meta={{ total: data.posts.pageInfo.total }}
-- 
cgit v1.2.3