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/projets/[slug].tsx | 50 +++++++++++++++-----------------------------
 src/pages/projets/index.tsx  | 50 +++++++++++++++-----------------------------
 2 files changed, 34 insertions(+), 66 deletions(-)

(limited to 'src/pages/projets')

diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 8985f47..1f9723a 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -1,10 +1,8 @@
-/* eslint-disable max-statements */
 import type { MDXComponents } from 'mdx/types';
 import type { GetStaticPaths, GetStaticProps } from 'next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import NextImage from 'next/image';
-import Script from 'next/script';
 import { useMemo, type ComponentType, type FC } from 'react';
 import { useIntl } from 'react-intl';
 import {
@@ -38,9 +36,8 @@ import type {
 import { CONFIG } from '../../utils/config';
 import {
   capitalize,
-  getSchemaJson,
-  getSinglePageSchema,
-  getWebPageSchema,
+  getSchemaFrom,
+  getWebPageGraph,
 } from '../../utils/helpers';
 import {
   type Messages,
@@ -192,27 +189,16 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ data }) => {
     url: `${CONFIG.url}${slug}`,
   };
 
-  const webpageSchema = getWebPageSchema({
-    description: meta.seo.description,
-    locale: CONFIG.locales.defaultLocale,
-    slug,
-    title: meta.seo.title,
-    updateDate: meta.dates.update,
-  });
-  const articleSchema = getSinglePageSchema({
-    cover: `/projects/${id}.jpg`,
-    dates: meta.dates,
-    description: intro,
-    id: 'project',
-    kind: 'page',
-    locale: CONFIG.locales.defaultLocale,
-    slug,
-    title,
-  });
-  const schemaJsonLd = getSchemaJson([
-    webpageSchema,
-    articleSchema,
-    breadcrumbSchema,
+  const jsonLd = getSchemaFrom([
+    getWebPageGraph({
+      breadcrumb: breadcrumbSchema,
+      copyrightYear: new Date(meta.dates.publication).getFullYear(),
+      cover: `/projects/${id}.jpg`,
+      dates: meta.dates,
+      description: intro,
+      slug,
+      title,
+    }),
   ]);
 
   const messages = {
@@ -256,14 +242,12 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ data }) => {
         <meta property="og:type" content="article" />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={intro} />
+        <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-project"
-        type="application/ld+json"
-        // eslint-disable-next-line react/no-danger -- Necessary for schema
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
       <PageHeader
         heading={title}
         intro={intro}
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index 401c68c..3815370 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -1,7 +1,6 @@
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import NextImage from 'next/image';
-import Script from 'next/script';
 import { useIntl } from 'react-intl';
 import {
   Card,
@@ -25,11 +24,7 @@ import styles from '../../styles/pages/projects.module.scss';
 import type { NextPageWithLayout, ProjectPreview } from '../../types';
 import { CONFIG } from '../../utils/config';
 import { ROUTES } from '../../utils/constants';
-import {
-  getSchemaJson,
-  getSinglePageSchema,
-  getWebPageSchema,
-} from '../../utils/helpers';
+import { getSchemaFrom, getWebPageGraph } from '../../utils/helpers';
 import {
   getAllProjects,
   loadTranslation,
@@ -52,27 +47,18 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ data }) => {
   const { items: breadcrumbItems, schema: breadcrumbSchema } =
     useBreadcrumbs(title);
   const intl = useIntl();
-  const webpageSchema = getWebPageSchema({
-    description: seo.description,
-    locale: CONFIG.locales.defaultLocale,
-    slug: ROUTES.PROJECTS,
-    title: seo.title,
-    updateDate: dates.update,
-  });
-  const articleSchema = getSinglePageSchema({
-    dates,
-    description: seo.description,
-    id: 'projects',
-    kind: 'page',
-    locale: CONFIG.locales.defaultLocale,
-    slug: ROUTES.PROJECTS,
-    title,
-  });
-  const schemaJsonLd = getSchemaJson([
-    webpageSchema,
-    articleSchema,
-    breadcrumbSchema,
+
+  const jsonLd = getSchemaFrom([
+    getWebPageGraph({
+      breadcrumb: breadcrumbSchema,
+      copyrightYear: new Date(dates.publication).getFullYear(),
+      dates,
+      description: seo.description,
+      slug: ROUTES.PROJECTS,
+      title,
+    }),
   ]);
+
   const page = {
     title: `${seo.title} - ${CONFIG.name}`,
     url: `${CONFIG.url}${ROUTES.PROJECTS}`,
@@ -89,14 +75,12 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ data }) => {
         <meta property="og:type" content="article" />
         <meta property="og:title" content={page.title} />
         <meta property="og:description" content={seo.description} />
+        <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-projects"
-        type="application/ld+json"
-        // eslint-disable-next-line react/no-danger -- Necessary for schema
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
       <PageHeader
         heading={title}
         intro={<PageContent components={mdxComponents} />}
-- 
cgit v1.2.3