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/projets/index.tsx | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

(limited to 'src/pages/projets/index.tsx')

diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index 8feb701..0b9a91c 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -18,8 +18,10 @@ import {
   type GridItem,
   Link,
   MetaList,
-  PageLayout,
   MetaItem,
+  Page,
+  PageHeader,
+  PageBody,
 } from '../../components';
 import PageContent, { meta } from '../../content/pages/projects.mdx';
 import styles from '../../styles/pages/projects.module.scss';
@@ -139,7 +141,7 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
   };
 
   return (
-    <>
+    <Page breadcrumbs={breadcrumbItems} isBodyLastChild>
       <Head>
         <title>{page.title}</title>
         {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */}
@@ -157,12 +159,17 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <PageLayout
-        title={title}
+      <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}
         intro={<PageContent components={components} />}
-        breadcrumb={breadcrumbItems}
-        breadcrumbSchema={breadcrumbSchema}
-      >
+      />
+      <PageBody className={styles.body}>
         <Grid
           className={styles.list}
           gap="sm"
@@ -170,13 +177,12 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
           items={items}
           sizeMax="30ch"
         />
-      </PageLayout>
-    </>
+      </PageBody>
+    </Page>
   );
 };
 
-ProjectsPage.getLayout = (page) =>
-  getLayout(page, { useGrid: true, withExtraPadding: true });
+ProjectsPage.getLayout = (page) => getLayout(page);
 
 export const getStaticProps: GetStaticProps<ProjectsPageProps> = async ({
   locale,
-- 
cgit v1.2.3

