From 70b4f633a6fbedb58c8b9134ac64ede854d489de Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 20 Nov 2023 12:27:46 +0100
Subject: refactor(components): replace PageLayout template with Page

* split pages in smaller components (it is both easier to maintain and
more readable, we avoid the use of fragments in pages directory)
* extract breadcrumbs from article tag (the navigation is not related
to the page contents)
* remove useReadingTime hook
* remove layout options except `isHome`
---
 src/pages/404.tsx | 80 ++++++++++++++++++++++++++++---------------------------
 1 file changed, 41 insertions(+), 39 deletions(-)

(limited to 'src/pages/404.tsx')

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 75e2205..d6785b6 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -2,6 +2,7 @@
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
+import Script from 'next/script';
 import { useCallback, type ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import {
@@ -9,7 +10,10 @@ import {
   Heading,
   Link,
   LinksWidget,
-  PageLayout,
+  Page,
+  PageBody,
+  PageHeader,
+  PageSidebar,
   SearchForm,
   type SearchFormSubmit,
 } from '../components';
@@ -111,45 +115,20 @@ const Error404Page: NextPageWithLayout<Error404PageProps> = ({
   );
 
   return (
-    <>
+    <Page breadcrumbs={breadcrumbItems}>
       <Head>
         <title>{pageTitle}</title>
         {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */}
         <meta name="description" content={pageDescription} />
       </Head>
-      <PageLayout
-        title={title}
-        breadcrumb={breadcrumbItems}
-        breadcrumbSchema={breadcrumbSchema}
-        widgets={[
-          <LinksWidget
-            heading={
-              <Heading isFake level={3}>
-                {thematicsListTitle}
-              </Heading>
-            }
-            items={getLinksItemData(
-              thematicsList.map((thematic) =>
-                getPageLinkFromRawData(thematic, 'thematic')
-              )
-            )}
-            // eslint-disable-next-line react/jsx-no-literals -- Key allowed
-            key="thematics-list"
-          />,
-          <LinksWidget
-            heading={
-              <Heading isFake level={3}>
-                {topicsListTitle}
-              </Heading>
-            }
-            items={getLinksItemData(
-              topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
-            )}
-            // eslint-disable-next-line react/jsx-no-literals -- Key allowed
-            key="topics-list"
-          />,
-        ]}
-      >
+      <Script
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
+        id="schema-breadcrumb"
+        type="application/ld+json"
+      />
+      <PageHeader heading={title} />
+      <PageBody>
         {body}
         <p>
           {intl.formatMessage({
@@ -159,13 +138,36 @@ const Error404Page: NextPageWithLayout<Error404PageProps> = ({
           })}
         </p>
         <SearchForm isLabelHidden onSubmit={searchSubmitHandler} />
-      </PageLayout>
-    </>
+      </PageBody>
+      <PageSidebar>
+        <LinksWidget
+          heading={
+            <Heading isFake level={3}>
+              {thematicsListTitle}
+            </Heading>
+          }
+          items={getLinksItemData(
+            thematicsList.map((thematic) =>
+              getPageLinkFromRawData(thematic, 'thematic')
+            )
+          )}
+        />
+        <LinksWidget
+          heading={
+            <Heading isFake level={3}>
+              {topicsListTitle}
+            </Heading>
+          }
+          items={getLinksItemData(
+            topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic'))
+          )}
+        />
+      </PageSidebar>
+    </Page>
   );
 };
 
-Error404Page.getLayout = (page) =>
-  getLayout(page, { useGrid: true, withExtraPadding: true });
+Error404Page.getLayout = (page) => getLayout(page);
 
 export const getStaticProps: GetStaticProps<Error404PageProps> = async ({
   locale,
-- 
cgit v1.2.3

