refactor(components): rewrite Card component

* make the component more generic
* merge `<Summary />` and `<Comment />` styles into card component
to avoid repeating the same structure
* remove most of the props to use composition

However the CSS is a bit complex because of the two variants...

Also, the component should be refactored when the CSS pseudo-class
`:has` has enough support: the provider and the `cover` and `meta`
props should be removed.

2 files changed, 100 insertions, 31 deletions

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fb6ba9a..e482fb4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -8,19 +8,25 @@ import type { FC, HTMLAttributes } from 'react';
 import { useIntl } from 'react-intl';
 import {
   ButtonLink,
+  Card,
+  CardCover,
+  CardFooter,
+  CardHeader,
+  CardMeta,
+  CardTitle,
   CardsList,
   type CardsListItem,
   Column,
   Columns,
   type ColumnsProps,
+  Figure,
   getLayout,
+  Heading,
   Icon,
   List,
   ListItem,
   Section,
   type SectionProps,
-  Heading,
-  Figure,
   Time,
 } from '../components';
 import HomePageContent from '../content/pages/homepage.mdx';
@@ -299,22 +305,47 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
   const getRecentPosts = (): JSX.Element => {
     const posts: CardsListItem[] = recentPosts.map((post) => {
       return {
-        cover: post.cover,
-        id: post.slug,
-        meta: [
-          {
-            id: 'publication-date',
-            label: publicationDate,
-            value: <Time date={post.dates.publication} />,
-          },
-        ],
-        title: post.title,
-        url: `${ROUTES.ARTICLE}/${post.slug}`,
+        card: (
+          <Card
+            cover={
+              post.cover ? (
+                <CardCover hasBorders>
+                  <NextImage
+                    {...post.cover}
+                    style={{ objectFit: 'scale-down' }}
+                  />
+                </CardCover>
+              ) : undefined
+            }
+            meta={
+              <CardMeta
+                hasBorderedValues
+                hasInlinedValues
+                isCentered
+                items={[
+                  {
+                    id: 'publication-date',
+                    label: publicationDate,
+                    value: <Time date={post.dates.publication} />,
+                  },
+                ]}
+              />
+            }
+            isCentered
+            linkTo={`${ROUTES.ARTICLE}/${post.slug}`}
+          >
+            <CardHeader>
+              <CardTitle level={3}>{post.title}</CardTitle>
+            </CardHeader>
+            <CardFooter />
+          </Card>
+        ),
+        id: `${post.id}`,
       };
     });
     const listClass = `${styles.list} ${styles['list--cards']}`;
 
-    return <CardsList className={listClass} items={posts} titleLevel={3} />;
+    return <CardsList className={listClass} items={posts} />;
   };
 
   const components: MDXComponents = {
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index 44354ce..abb6da0 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -2,14 +2,22 @@
 import type { MDXComponents } from 'mdx/types';
 import type { GetStaticProps } from 'next';
 import Head from 'next/head';
+import NextImage from 'next/image';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
 import { useIntl } from 'react-intl';
 import {
+  Card,
+  CardCover,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardTitle,
   CardsList,
   type CardsListItem,
   getLayout,
   Link,
+  MetaList,
   PageLayout,
 } from '../../components';
 import PageContent, { meta } from '../../content/pages/projects.mdx';
@@ -56,24 +64,54 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
   const items: CardsListItem[] = projects.map(
     ({ id, meta: projectMeta, slug, title: projectTitle }) => {
       const { cover, tagline, technologies } = projectMeta;
+      const figureLabel = intl.formatMessage(
+        {
+          defaultMessage: '{title} cover',
+          description: 'ProjectsPage: figure (cover) accessible name',
+          id: 'FdF33B',
+        },
+        { title: projectTitle }
+      );
 
       return {
-        cover,
-        id: id as string,
-        meta: technologies?.length
-          ? [
-              {
-                id: 'technologies',
-                label: metaLabel,
-                value: technologies.map((techno) => {
-                  return { id: techno, value: techno };
-                }),
-              },
-            ]
-          : [],
-        tagline,
-        title: projectTitle,
-        url: `${ROUTES.PROJECTS}/${slug}`,
+        card: (
+          <Card
+            cover={
+              cover ? (
+                <CardCover aria-label={figureLabel} hasBorders>
+                  <NextImage {...cover} />
+                </CardCover>
+              ) : undefined
+            }
+            meta={
+              technologies ? (
+                <MetaList
+                  hasBorderedValues
+                  hasInlinedValues
+                  isCentered
+                  items={[
+                    {
+                      id: 'technologies',
+                      label: metaLabel,
+                      value: technologies.map((techno) => {
+                        return { id: techno, value: techno };
+                      }),
+                    },
+                  ]}
+                />
+              ) : undefined
+            }
+            isCentered
+            linkTo={`${ROUTES.PROJECTS}/${slug}`}
+          >
+            <CardHeader>
+              <CardTitle>{projectTitle}</CardTitle>
+            </CardHeader>
+            <CardBody>{tagline}</CardBody>
+            <CardFooter />
+          </Card>
+        ),
+        id: `${id}`,
       };
     }
   );
@@ -127,7 +165,7 @@ const ProjectsPage: NextPageWithLayout<ProjectsPageProps> = ({ projects }) => {
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
       >
-        <CardsList items={items} titleLevel={2} className={styles.list} />
+        <CardsList className={styles.list} items={items} />
       </PageLayout>
     </>
   );