6 files changed, 74 insertions, 51 deletions
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 493f061..e8df85e 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -9,7 +9,7 @@ import { config } from '@config/website';
 import { t } from '@lingui/macro';
 import { getAllPostsSlug, getPostBySlug } from '@services/graphql/queries';
 import { NextPageWithLayout } from '@ts/types/app';
-import { ArticleProps } from '@ts/types/articles';
+import { ArticleMeta, ArticleProps } from '@ts/types/articles';
 import { loadTranslation } from '@utils/helpers/i18n';
 import { addPrismClasses, translateCopyButton } from '@utils/helpers/prism';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
@@ -32,6 +32,13 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
     title,
   } = post;
 
+  const meta: ArticleMeta = {
+    author,
+    commentCount: comments.length,
+    dates,
+    thematics,
+  };
+
   const router = useRouter();
   const locale = router.locale ? router.locale : config.defaultLocale;
 
@@ -51,17 +58,15 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
         <meta name="description" content={seo.metaDesc} />
       </Head>
       <article>
-        <PostHeader
-          author={author}
-          dates={dates}
-          intro={intro}
-          title={title}
-          thematics={thematics}
-        />
-        <ToC />
+        <PostHeader intro={intro} meta={meta} title={title} />
+        <aside>
+          <ToC />
+        </aside>
         <div dangerouslySetInnerHTML={{ __html: content }}></div>
         <PostFooter subjects={subjects} />
-        <Sharing title={title} excerpt={intro} />
+        <aside>
+          <Sharing title={title} excerpt={intro} />
+        </aside>
         <section>
           <h2>{t`Comments`}</h2>
           <CommentsList comments={comments} />
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index 3ce6098..ca82f5b 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -9,6 +9,7 @@ import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import { FormEvent, useState } from 'react';
+import PostHeader from '@components/PostHeader/PostHeader';
 
 const ContactPage: NextPageWithLayout = () => {
   const [name, setName] = useState('');
@@ -48,6 +49,9 @@ const ContactPage: NextPageWithLayout = () => {
     }
   };
 
+  const title = t`Contact`;
+  const intro = t`Please fill the form to contact me.`;
+
   return (
     <>
       <Head>
@@ -55,9 +59,7 @@ const ContactPage: NextPageWithLayout = () => {
         <meta name="description" content={seo.contact.description} />
       </Head>
       <article>
-        <header>
-          <h1>{t`Contact`}</h1>
-        </header>
+        <PostHeader title={title} intro={intro} />
         <div>
           <p>{t`All fields marked with * are required.`}</p>
           {status && <p>{status}</p>}
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 5107f6a..3faa941 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -6,8 +6,19 @@ import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
 import CVContent, { intro, meta } from '@content/pages/cv.mdx';
+import PostHeader from '@components/PostHeader/PostHeader';
+import { ArticleMeta } from '@ts/types/articles';
 
 const CV: NextPageWithLayout = () => {
+  const dates = {
+    publication: meta.publishedOn,
+    update: meta.updatedOn,
+  };
+
+  const pageMeta: ArticleMeta = {
+    dates,
+  };
+
   return (
     <>
       <Head>
@@ -15,12 +26,13 @@ const CV: NextPageWithLayout = () => {
         <meta name="description" content={seo.cv.description} />
       </Head>
       <article>
-        <header>
-          <h1>{meta.title}</h1>
-          <div dangerouslySetInnerHTML={{ __html: intro }}></div>
-        </header>
-        <ToC />
-        <CVContent />
+        <PostHeader intro={intro} meta={pageMeta} title={meta.title} />
+        <aside>
+          <ToC />
+        </aside>
+        <div>
+          <CVContent />
+        </div>
       </article>
     </>
   );
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index 6bb1a55..d8dfe49 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -5,9 +5,23 @@ import { NextPageWithLayout } from '@ts/types/app';
 import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
 import Head from 'next/head';
-import LegalNoticeContent, { meta } from '@content/pages/legal-notice.mdx';
+import LegalNoticeContent, {
+  intro,
+  meta,
+} from '@content/pages/legal-notice.mdx';
+import PostHeader from '@components/PostHeader/PostHeader';
+import { ArticleMeta } from '@ts/types/articles';
 
 const LegalNotice: NextPageWithLayout = () => {
+  const dates = {
+    publication: meta.publishedOn,
+    update: meta.updatedOn,
+  };
+
+  const pageMeta: ArticleMeta = {
+    dates,
+  };
+
   return (
     <>
       <Head>
@@ -15,11 +29,13 @@ const LegalNotice: NextPageWithLayout = () => {
         <meta name="description" content={seo.legalNotice.description} />
       </Head>
       <article>
-        <header>
-          <h1>{meta.title}</h1>
-        </header>
-        <ToC />
-        <LegalNoticeContent />
+        <PostHeader intro={intro} meta={pageMeta} title={meta.title} />
+        <aside>
+          <ToC />
+        </aside>
+        <div>
+          <LegalNoticeContent />
+        </div>
       </article>
     </>
   );
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 527d529..bcea544 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -5,13 +5,14 @@ import { NextPageWithLayout } from '@ts/types/app';
 import { SubjectProps } from '@ts/types/taxonomies';
 import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
-import Image from 'next/image';
 import { ParsedUrlQuery } from 'querystring';
 import styles from '@styles/pages/Subject.module.scss';
 import {
   getAllSubjectsSlug,
   getSubjectBySlug,
 } from '@services/graphql/queries';
+import PostHeader from '@components/PostHeader/PostHeader';
+import { ArticleMeta } from '@ts/types/articles';
 
 const Subject: NextPageWithLayout<SubjectProps> = ({ subject }) => {
   const getPostsList = () => {
@@ -22,29 +23,18 @@ const Subject: NextPageWithLayout<SubjectProps> = ({ subject }) => {
     ));
   };
 
+  const meta: ArticleMeta = {
+    website: subject.officialWebsite,
+  };
+
   return (
     <article>
-      <header>
-        <h1 className={styles.title}>
-          {subject.featuredImage && (
-            <span className={styles.cover}>
-              <Image
-                src={subject.featuredImage.sourceUrl}
-                alt={subject.featuredImage.altText}
-                layout="fill"
-              />
-            </span>
-          )}
-          {subject.title}
-        </h1>
-        {subject.officialWebsite && (
-          <dl>
-            <dt>{t`Official website:`}</dt>
-            <dd>{subject.officialWebsite}</dd>
-          </dl>
-        )}
-        <div dangerouslySetInnerHTML={{ __html: subject.intro }}></div>
-      </header>
+      <PostHeader
+        cover={subject.featuredImage}
+        intro={subject.intro}
+        meta={meta}
+        title={subject.title}
+      />
       <div dangerouslySetInnerHTML={{ __html: subject.content }}></div>
       {subject.posts.length > 0 && (
         <div>
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index 74c2212..dca8f25 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -11,6 +11,7 @@ import {
   getAllThematicsSlug,
   getThematicBySlug,
 } from '@services/graphql/queries';
+import PostHeader from '@components/PostHeader/PostHeader';
 
 const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
   const getPostsList = () => {
@@ -23,10 +24,7 @@ const Thematic: NextPageWithLayout<ThematicProps> = ({ thematic }) => {
 
   return (
     <article>
-      <header>
-        <h1>{thematic.title}</h1>
-        <div dangerouslySetInnerHTML={{ __html: thematic.intro }}></div>
-      </header>
+      <PostHeader intro={thematic.intro} title={thematic.title} />
       <div dangerouslySetInnerHTML={{ __html: thematic.content }}></div>
       {thematic.posts.length > 0 && (
         <div>