From d5ade2359539648845a5854ed353b29367961d74 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 20 Nov 2023 11:02:20 +0100
Subject: refactor(components): extract MetaItem from MetaList

* replace `items` prop on MetaList with `children` prop: it was too
restrictive and the global options was not really useful. It is better
too give control to the consumers.
---
 src/pages/article/[slug].tsx     | 194 +++++++++++++++++++--------------------
 src/pages/blog/index.tsx         |  47 +++++-----
 src/pages/blog/page/[number].tsx |  47 +++++-----
 src/pages/cv.tsx                 |  54 ++++++-----
 src/pages/index.tsx              |  21 ++---
 src/pages/mentions-legales.tsx   |  54 ++++++-----
 src/pages/projets/[slug].tsx     |  54 ++++++-----
 src/pages/projets/index.tsx      |  26 +++---
 src/pages/recherche/index.tsx    |  47 +++++-----
 src/pages/sujet/[slug].tsx       | 114 +++++++++++------------
 src/pages/thematique/[slug].tsx  |  92 +++++++++----------
 11 files changed, 364 insertions(+), 386 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 7875d1d..0cba7a6 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -15,10 +15,11 @@ import {
   PageLayout,
   SharingWidget,
   Spinner,
-  type MetaItemData,
   Time,
   type CommentData,
   Heading,
+  MetaList,
+  MetaItem,
 } from '../../components';
 import {
   getAllArticlesSlugs,
@@ -112,102 +113,6 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
   const { content, id, intro, meta, title } = article;
   const { author, commentsCount, cover, dates, seo, thematics, topics } = meta;
 
-  const headerMeta: (MetaItemData | undefined)[] = [
-    author
-      ? {
-          id: 'author',
-          label: intl.formatMessage({
-            defaultMessage: 'Written by:',
-            description: 'ArticlePage: author label',
-            id: 'MJbZfX',
-          }),
-          value: author.name,
-        }
-      : undefined,
-    {
-      id: 'publication-date',
-      label: intl.formatMessage({
-        defaultMessage: 'Published on:',
-        description: 'ArticlePage: publication date label',
-        id: 'RecdwX',
-      }),
-      value: <Time date={dates.publication} />,
-    },
-    dates.update && dates.publication !== dates.update
-      ? {
-          id: 'update-date',
-          label: intl.formatMessage({
-            defaultMessage: 'Updated on:',
-            description: 'ArticlePage: update date label',
-            id: 'ZAqGZ6',
-          }),
-          value: <Time date={dates.update} />,
-        }
-      : undefined,
-    {
-      id: 'reading-time',
-      label: intl.formatMessage({
-        defaultMessage: 'Reading time:',
-        description: 'ArticlePage: reading time label',
-        id: 'Gw7X3x',
-      }),
-      value: readingTime,
-    },
-    thematics
-      ? {
-          id: 'thematics',
-          label: intl.formatMessage({
-            defaultMessage: 'Thematics:',
-            description: 'ArticlePage: thematics meta label',
-            id: 'CvOqoh',
-          }),
-          value: thematics.map((thematic) => {
-            return {
-              id: `thematic-${thematic.id}`,
-              value: (
-                <Link key={thematic.id} href={thematic.url}>
-                  {thematic.name}
-                </Link>
-              ),
-            };
-          }),
-        }
-      : undefined,
-  ];
-  const filteredHeaderMeta = headerMeta.filter(
-    (item): item is MetaItemData => !!item
-  );
-
-  const footerMetaLabel = intl.formatMessage({
-    defaultMessage: 'Read more articles about:',
-    description: 'ArticlePage: footer topics list label',
-    id: '50xc4o',
-  });
-
-  const footerMeta: MetaItemData[] = topics
-    ? [
-        {
-          id: 'more-about',
-          label: footerMetaLabel,
-          value: topics.map((topic) => {
-            return {
-              id: `topic--${topic.id}`,
-              value: (
-                <ButtonLink
-                  className={styles.btn}
-                  key={topic.id}
-                  to={topic.url}
-                >
-                  {topic.logo ? <NextImage {...topic.logo} /> : null}{' '}
-                  {topic.name}
-                </ButtonLink>
-              ),
-            };
-          }),
-        },
-      ]
-    : [];
-
   const webpageSchema = getWebPageSchema({
     description: intro,
     locale: CONFIG.locales.defaultLocale,
@@ -333,8 +238,99 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
         comments={getComments(commentsData)}
-        footerMeta={footerMeta}
-        headerMeta={filteredHeaderMeta}
+        footerMeta={
+          topics ? (
+            <MetaList>
+              <MetaItem
+                hasInlinedValues
+                label={intl.formatMessage({
+                  defaultMessage: 'Read more articles about:',
+                  description: 'ArticlePage: footer topics list label',
+                  id: '50xc4o',
+                })}
+                value={topics.map((topic) => {
+                  return {
+                    id: `topic--${topic.id}`,
+                    value: (
+                      <ButtonLink
+                        className={styles.btn}
+                        key={topic.id}
+                        to={topic.url}
+                      >
+                        {topic.logo ? <NextImage {...topic.logo} /> : null}{' '}
+                        {topic.name}
+                      </ButtonLink>
+                    ),
+                  };
+                })}
+              />
+            </MetaList>
+          ) : undefined
+        }
+        headerMeta={
+          <MetaList>
+            {author ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Written by:',
+                  description: 'ArticlePage: author label',
+                  id: 'MJbZfX',
+                })}
+                value={author.name}
+              />
+            ) : null}
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Published on:',
+                description: 'Page: publication date label',
+                id: '4QbTDq',
+              })}
+              value={<Time date={dates.publication} />}
+            />
+            {dates.update ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Updated on:',
+                  description: 'Page: update date label',
+                  id: 'Ez8Qim',
+                })}
+                value={<Time date={dates.update} />}
+              />
+            ) : null}
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Reading time:',
+                description: 'ArticlePage: reading time label',
+                id: 'Gw7X3x',
+              })}
+              value={readingTime}
+            />
+            {thematics ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Thematics:',
+                  description: 'ArticlePage: thematics meta label',
+                  id: 'CvOqoh',
+                })}
+                value={thematics.map((thematic) => {
+                  return {
+                    id: `thematic-${thematic.id}`,
+                    value: (
+                      <Link key={thematic.id} href={thematic.url}>
+                        {thematic.name}
+                      </Link>
+                    ),
+                  };
+                })}
+              />
+            ) : null}
+          </MetaList>
+        }
         id={id as number}
         intro={intro}
         title={title}
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 5a13e3e..6ed6eda 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -9,13 +9,14 @@ import {
   getLayout,
   Heading,
   LinksWidget,
-  type MetaItemData,
   Notice,
   PageLayout,
   PostsList,
   Pagination,
   type RenderPaginationLink,
   type RenderPaginationItemAriaLabel,
+  MetaList,
+  MetaItem,
 } from '../../components';
 import {
   getArticles,
@@ -183,28 +184,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     [intl]
   );
 
-  const headerMeta: MetaItemData[] = totalArticles
-    ? [
-        {
-          id: 'posts-count',
-          label: intl.formatMessage({
-            defaultMessage: 'Total:',
-            description: 'Page: total label',
-            id: 'kNBXyK',
-          }),
-          value: intl.formatMessage(
-            {
-              defaultMessage:
-                '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-              description: 'Page: posts count meta',
-              id: 'RvGb2c',
-            },
-            { postsCount: totalArticles }
-          ),
-        },
-      ]
-    : [];
-
   const paginationAriaLabel = intl.formatMessage({
     defaultMessage: 'Pagination',
     description: 'BlogPage: pagination accessible name',
@@ -234,7 +213,27 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
         title={title}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={headerMeta}
+        headerMeta={
+          <MetaList>
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Total:',
+                description: 'Page: total label',
+                id: 'kNBXyK',
+              })}
+              value={intl.formatMessage(
+                {
+                  defaultMessage:
+                    '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+                  description: 'Page: posts count meta',
+                  id: 'RvGb2c',
+                },
+                { postsCount: totalArticles }
+              )}
+            />
+          </MetaList>
+        }
         widgets={[
           <LinksWidget
             heading={
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index 03b641b..27d1816 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -10,12 +10,13 @@ import {
   getLayout,
   Heading,
   LinksWidget,
-  type MetaItemData,
   PageLayout,
   PostsList,
   Pagination,
   type RenderPaginationLink,
   type RenderPaginationItemAriaLabel,
+  MetaList,
+  MetaItem,
 } from '../../../components';
 import {
   getArticles,
@@ -187,28 +188,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     [intl]
   );
 
-  const headerMeta: MetaItemData[] = totalArticles
-    ? [
-        {
-          id: 'posts-count',
-          label: intl.formatMessage({
-            defaultMessage: 'Total:',
-            description: 'Page: total label',
-            id: 'kNBXyK',
-          }),
-          value: intl.formatMessage(
-            {
-              defaultMessage:
-                '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-              description: 'Page: posts count meta',
-              id: 'RvGb2c',
-            },
-            { postsCount: totalArticles }
-          ),
-        },
-      ]
-    : [];
-
   const paginationAriaLabel = intl.formatMessage({
     defaultMessage: 'Pagination',
     description: 'BlogPage: pagination accessible name',
@@ -238,7 +217,27 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
         title={pageTitleWithPageNumber}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={headerMeta}
+        headerMeta={
+          <MetaList>
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Total:',
+                description: 'Page: total label',
+                id: 'kNBXyK',
+              })}
+              value={intl.formatMessage(
+                {
+                  defaultMessage:
+                    '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+                  description: 'Page: posts count meta',
+                  id: 'RvGb2c',
+                },
+                { postsCount: totalArticles }
+              )}
+            />
+          </MetaList>
+        }
         widgets={[
           <LinksWidget
             heading={
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 5157249..0cda194 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -20,8 +20,9 @@ import {
   PageLayout,
   SocialMediaWidget,
   ListItem,
-  type MetaItemData,
   Time,
+  MetaList,
+  MetaItem,
 } from '../components';
 import CVContent, { data, meta } from '../content/pages/cv.mdx';
 import type { NextPageWithLayout } from '../types';
@@ -154,32 +155,6 @@ const CVPage: NextPageWithLayout = () => {
     id: '+Dre5J',
   });
 
-  const headerMeta: (MetaItemData | undefined)[] = [
-    {
-      id: 'publication-date',
-      label: intl.formatMessage({
-        defaultMessage: 'Published on:',
-        description: 'Page: publication date label',
-        id: '4QbTDq',
-      }),
-      value: <Time date={dates.publication} />,
-    },
-    dates.update
-      ? {
-          id: 'update-date',
-          label: intl.formatMessage({
-            defaultMessage: 'Updated on:',
-            description: 'Page: update date label',
-            id: 'Ez8Qim',
-          }),
-          value: <Time date={dates.update} />,
-        }
-      : undefined,
-  ];
-  const filteredMeta = headerMeta.filter(
-    (item): item is MetaItemData => !!item
-  );
-
   const cvCaption = intl.formatMessage(
     {
       defaultMessage: '<link>Download the CV in PDF</link>',
@@ -282,7 +257,30 @@ const CVPage: NextPageWithLayout = () => {
     <PageLayout
       breadcrumb={breadcrumbItems}
       breadcrumbSchema={breadcrumbSchema}
-      headerMeta={filteredMeta}
+      headerMeta={
+        <MetaList>
+          <MetaItem
+            isInline
+            label={intl.formatMessage({
+              defaultMessage: 'Published on:',
+              description: 'Page: publication date label',
+              id: '4QbTDq',
+            })}
+            value={<Time date={dates.publication} />}
+          />
+          {dates.update ? (
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Updated on:',
+                description: 'Page: update date label',
+                id: 'Ez8Qim',
+              })}
+              value={<Time date={dates.update} />}
+            />
+          ) : null}
+        </MetaList>
+      }
       intro={intro}
       title={title}
       widgets={widgets}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0306736..d708ac5 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -25,6 +25,7 @@ import {
   Section,
   type SectionProps,
   Time,
+  MetaItem,
 } from '../components';
 import HomePageContent from '../content/pages/homepage.mdx';
 import { getArticlesCard } from '../services/graphql';
@@ -332,18 +333,14 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
               ) : undefined
             }
             meta={
-              <CardMeta
-                hasBorderedValues
-                hasInlinedValues
-                isCentered
-                items={[
-                  {
-                    id: 'publication-date',
-                    label: publicationDate,
-                    value: <Time date={post.dates.publication} />,
-                  },
-                ]}
-              />
+              <CardMeta isCentered>
+                <MetaItem
+                  hasBorderedValues
+                  isCentered
+                  label={publicationDate}
+                  value={<Time date={post.dates.publication} />}
+                />
+              </CardMeta>
             }
             isCentered
             linkTo={`${ROUTES.ARTICLE}/${post.slug}`}
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index 50f60f5..e07263f 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -11,8 +11,9 @@ import {
   Link,
   PageLayout,
   Figure,
-  type MetaItemData,
   Time,
+  MetaList,
+  MetaItem,
 } from '../components';
 import LegalNoticeContent, { meta } from '../content/pages/legal-notice.mdx';
 import type { NextPageWithLayout } from '../types';
@@ -48,32 +49,6 @@ const LegalNoticePage: NextPageWithLayout = () => {
     url: ROUTES.LEGAL_NOTICE,
   });
 
-  const headerMeta: (MetaItemData | undefined)[] = [
-    {
-      id: 'publication-date',
-      label: intl.formatMessage({
-        defaultMessage: 'Published on:',
-        description: 'Page: publication date label',
-        id: '4QbTDq',
-      }),
-      value: <Time date={dates.publication} />,
-    },
-    dates.update
-      ? {
-          id: 'update-date',
-          label: intl.formatMessage({
-            defaultMessage: 'Updated on:',
-            description: 'Page: update date label',
-            id: 'Ez8Qim',
-          }),
-          value: <Time date={dates.update} />,
-        }
-      : undefined,
-  ];
-  const filteredMeta = headerMeta.filter(
-    (item): item is MetaItemData => !!item
-  );
-
   const { asPath } = useRouter();
   const webpageSchema = getWebPageSchema({
     description: seo.description,
@@ -101,7 +76,30 @@ const LegalNoticePage: NextPageWithLayout = () => {
     <PageLayout
       breadcrumb={breadcrumbItems}
       breadcrumbSchema={breadcrumbSchema}
-      headerMeta={filteredMeta}
+      headerMeta={
+        <MetaList>
+          <MetaItem
+            isInline
+            label={intl.formatMessage({
+              defaultMessage: 'Published on:',
+              description: 'Page: publication date label',
+              id: '4QbTDq',
+            })}
+            value={<Time date={dates.publication} />}
+          />
+          {dates.update ? (
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Updated on:',
+                description: 'Page: update date label',
+                id: 'Ez8Qim',
+              })}
+              value={<Time date={dates.update} />}
+            />
+          ) : null}
+        </MetaList>
+      }
       intro={intro}
       title={title}
       withToC={true}
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 1aa9e7f..a8a4fea 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -19,12 +19,13 @@ import {
   List,
   ListItem,
   Figure,
-  type MetaItemData,
   Time,
   Grid,
   ProjectOverview,
   type ProjectMeta,
   type Repository,
+  MetaList,
+  MetaItem,
 } from '../../components';
 import styles from '../../styles/pages/project.module.scss';
 import type { NextPageWithLayout, ProjectPreview, Repos } from '../../types';
@@ -177,32 +178,6 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
     url: `${CONFIG.url}${asPath}`,
   };
 
-  const headerMeta: (MetaItemData | undefined)[] = [
-    {
-      id: 'publication-date',
-      label: intl.formatMessage({
-        defaultMessage: 'Published on:',
-        description: 'ProjectsPage: publication date label',
-        id: 'HxZvY4',
-      }),
-      value: <Time date={dates.publication} />,
-    },
-    dates.update && dates.update !== dates.publication
-      ? {
-          id: 'update-date',
-          label: intl.formatMessage({
-            defaultMessage: 'Updated on:',
-            description: 'ProjectsPage: update date label',
-            id: 'wQrvgw',
-          }),
-          value: <Time date={dates.update} />,
-        }
-      : undefined,
-  ];
-  const filteredHeaderMeta = headerMeta.filter(
-    (item): item is MetaItemData => !!item
-  );
-
   /**
    * Retrieve the project repositories.
    *
@@ -319,7 +294,30 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
         intro={intro}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={filteredHeaderMeta}
+        headerMeta={
+          <MetaList>
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Published on:',
+                description: 'Page: publication date label',
+                id: '4QbTDq',
+              })}
+              value={<Time date={dates.publication} />}
+            />
+            {dates.update ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Updated on:',
+                  description: 'Page: update date label',
+                  id: 'Ez8Qim',
+                })}
+                value={<Time date={dates.update} />}
+              />
+            ) : null}
+          </MetaList>
+        }
         withToC={true}
         widgets={[
           <SharingWidget
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index 97b43e3..8feb701 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -19,6 +19,7 @@ import {
   Link,
   MetaList,
   PageLayout,
+  MetaItem,
 } from '../../components';
 import PageContent, { meta } from '../../content/pages/projects.mdx';
 import styles from '../../styles/pages/projects.module.scss';
@@ -86,20 +87,17 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
             }
             meta={
               technologies ? (
-                <MetaList
-                  hasBorderedValues
-                  hasInlinedValues
-                  isCentered
-                  items={[
-                    {
-                      id: 'technologies',
-                      label: metaLabel,
-                      value: technologies.map((techno) => {
-                        return { id: techno, value: techno };
-                      }),
-                    },
-                  ]}
-                />
+                <MetaList isCentered>
+                  <MetaItem
+                    hasBorderedValues
+                    hasInlinedValues
+                    isCentered
+                    label={metaLabel}
+                    value={technologies.map((techno) => {
+                      return { id: techno, value: techno };
+                    })}
+                  />
+                </MetaList>
               ) : undefined
             }
             isCentered
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 92035b0..0fb279b 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -9,13 +9,14 @@ import {
   getLayout,
   Heading,
   LinksWidget,
-  type MetaItemData,
   Notice,
   PageLayout,
   PostsList,
   Spinner,
   SearchForm,
   type SearchFormSubmit,
+  MetaList,
+  MetaItem,
 } from '../../components';
 import {
   getArticles,
@@ -132,28 +133,6 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
     getTotalArticles(query.s as string)
   );
 
-  const headerMeta: MetaItemData[] = totalArticles
-    ? [
-        {
-          id: 'posts-count',
-          label: intl.formatMessage({
-            defaultMessage: 'Total:',
-            description: 'Page: total label',
-            id: 'kNBXyK',
-          }),
-          value: intl.formatMessage(
-            {
-              defaultMessage:
-                '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-              description: 'Page: posts count meta',
-              id: 'RvGb2c',
-            },
-            { postsCount: totalArticles }
-          ),
-        },
-      ]
-    : [];
-
   const thematicsListTitle = intl.formatMessage({
     defaultMessage: 'Thematics',
     description: 'SearchPage: thematics list widget title',
@@ -215,7 +194,27 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
         title={title}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={headerMeta}
+        headerMeta={
+          <MetaList>
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Total:',
+                description: 'Page: total label',
+                id: 'kNBXyK',
+              })}
+              value={intl.formatMessage(
+                {
+                  defaultMessage:
+                    '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+                  description: 'Page: posts count meta',
+                  id: 'RvGb2c',
+                },
+                { postsCount: totalArticles }
+              )}
+            />
+          </MetaList>
+        }
         widgets={[
           <LinksWidget
             heading={
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index a475df9..d9734a3 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -10,10 +10,11 @@ import {
   getLayout,
   Heading,
   LinksWidget,
-  type MetaItemData,
   PageLayout,
   PostsList,
   Time,
+  MetaList,
+  MetaItem,
 } from '../../components';
 import {
   getAllTopicsSlugs,
@@ -61,62 +62,6 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
     url: `${ROUTES.TOPICS}/${slug}`,
   });
 
-  const headerMeta: (MetaItemData | undefined)[] = [
-    {
-      id: 'publication-date',
-      label: intl.formatMessage({
-        defaultMessage: 'Published on:',
-        description: 'TopicPage: publication date label',
-        id: 'KV+NMZ',
-      }),
-      value: <Time date={dates.publication} />,
-    },
-    dates.update
-      ? {
-          id: 'update-date',
-          label: intl.formatMessage({
-            defaultMessage: 'Updated on:',
-            description: 'TopicPage: update date label',
-            id: '9DfuHk',
-          }),
-          value: <Time date={dates.update} />,
-        }
-      : undefined,
-    officialWebsite
-      ? {
-          id: 'website',
-          label: intl.formatMessage({
-            defaultMessage: 'Official website:',
-            description: 'TopicPage: official website label',
-            id: 'zoifQd',
-          }),
-          value: officialWebsite,
-        }
-      : undefined,
-    articles?.length
-      ? {
-          id: 'total',
-          label: intl.formatMessage({
-            defaultMessage: 'Total:',
-            description: 'TopicPage: total label',
-            id: 'tBX4mb',
-          }),
-          value: intl.formatMessage(
-            {
-              defaultMessage:
-                '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-              description: 'TopicPage: posts count meta',
-              id: 'uAL4iW',
-            },
-            { postsCount: articles.length }
-          ),
-        }
-      : undefined,
-  ];
-  const filteredMeta = headerMeta.filter(
-    (item): item is MetaItemData => !!item
-  );
-
   const { asPath } = useRouter();
   const webpageSchema = getWebPageSchema({
     description: seo.description,
@@ -181,7 +126,60 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
         breadcrumbSchema={breadcrumbSchema}
         title={getPageHeading()}
         intro={intro}
-        headerMeta={filteredMeta}
+        headerMeta={
+          <MetaList>
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Published on:',
+                description: 'Page: publication date label',
+                id: '4QbTDq',
+              })}
+              value={<Time date={dates.publication} />}
+            />
+            {dates.update ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Updated on:',
+                  description: 'Page: update date label',
+                  id: 'Ez8Qim',
+                })}
+                value={<Time date={dates.update} />}
+              />
+            ) : null}
+            {officialWebsite ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Official website:',
+                  description: 'TopicPage: official website label',
+                  id: 'zoifQd',
+                })}
+                value={officialWebsite}
+              />
+            ) : null}
+            {articles ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Total:',
+                  description: 'ThematicPage: total label',
+                  id: 'lHkta9',
+                })}
+                value={intl.formatMessage(
+                  {
+                    defaultMessage:
+                      '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+                    description: 'ThematicPage: posts count meta',
+                    id: 'iv3Ex1',
+                  },
+                  { postsCount: articles.length }
+                )}
+              />
+            ) : null}
+          </MetaList>
+        }
         widgets={
           thematics
             ? [
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index ea8c6b0..9220ccd 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -9,10 +9,11 @@ import {
   getLayout,
   Heading,
   LinksWidget,
-  type MetaItemData,
   PageLayout,
   PostsList,
   Time,
+  MetaList,
+  MetaItem,
 } from '../../components';
 import {
   getAllThematicsSlugs,
@@ -53,51 +54,6 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
     url: `${ROUTES.THEMATICS.INDEX}/${slug}`,
   });
 
-  const headerMeta: (MetaItemData | undefined)[] = [
-    {
-      id: 'publication-date',
-      label: intl.formatMessage({
-        defaultMessage: 'Published on:',
-        description: 'ThematicPage: publication date label',
-        id: 'UTGhUU',
-      }),
-      value: <Time date={dates.publication} />,
-    },
-    dates.update
-      ? {
-          id: 'update-date',
-          label: intl.formatMessage({
-            defaultMessage: 'Updated on:',
-            description: 'ThematicPage: update date label',
-            id: '24FIsG',
-          }),
-          value: <Time date={dates.update} />,
-        }
-      : undefined,
-    articles
-      ? {
-          id: 'total',
-          label: intl.formatMessage({
-            defaultMessage: 'Total:',
-            description: 'ThematicPage: total label',
-            id: 'lHkta9',
-          }),
-          value: intl.formatMessage(
-            {
-              defaultMessage:
-                '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-              description: 'ThematicPage: posts count meta',
-              id: 'iv3Ex1',
-            },
-            { postsCount: articles.length }
-          ),
-        }
-      : undefined,
-  ];
-  const filteredMeta = headerMeta.filter(
-    (item): item is MetaItemData => !!item
-  );
-
   const { asPath } = useRouter();
   const webpageSchema = getWebPageSchema({
     description: seo.description,
@@ -154,7 +110,49 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
         breadcrumbSchema={breadcrumbSchema}
         title={title}
         intro={intro}
-        headerMeta={filteredMeta}
+        headerMeta={
+          <MetaList>
+            <MetaItem
+              isInline
+              label={intl.formatMessage({
+                defaultMessage: 'Published on:',
+                description: 'Page: publication date label',
+                id: '4QbTDq',
+              })}
+              value={<Time date={dates.publication} />}
+            />
+            {dates.update ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Updated on:',
+                  description: 'Page: update date label',
+                  id: 'Ez8Qim',
+                })}
+                value={<Time date={dates.update} />}
+              />
+            ) : null}
+            {articles ? (
+              <MetaItem
+                isInline
+                label={intl.formatMessage({
+                  defaultMessage: 'Total:',
+                  description: 'ThematicPage: total label',
+                  id: 'lHkta9',
+                })}
+                value={intl.formatMessage(
+                  {
+                    defaultMessage:
+                      '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+                    description: 'ThematicPage: posts count meta',
+                    id: 'iv3Ex1',
+                  },
+                  { postsCount: articles.length }
+                )}
+              />
+            ) : null}
+          </MetaList>
+        }
         widgets={
           topics
             ? [
-- 
cgit v1.2.3