refactor(components): replace Summary component with PostPreview

* rename component to PostPreview because Summary is an HTML element
and it could lead to confusion
* replace `title` and `titleLevel` with `heading` and `headingLvl`
because `title` is a native attribute
* rename `intro` prop to `excerpt`
* extract `cover` from `meta` prop
* rewrite meta type
* extract meta logic into a new component

16 files changed, 795 insertions, 451 deletions

diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
index 092b78e..43414fa 100644
--- a/src/components/organisms/index.ts
+++ b/src/components/organisms/index.ts
@@ -2,4 +2,5 @@ export * from './forms';
 export * from './layout';
 export * from './nav';
 export * from './navbar';
+export * from './post-preview';
 export * from './widgets';
diff --git a/src/components/organisms/layout/index.ts b/src/components/organisms/layout/index.ts
index 86670e3..552ed27 100644
--- a/src/components/organisms/layout/index.ts
+++ b/src/components/organisms/layout/index.ts
@@ -3,4 +3,3 @@ export * from './comments-list';
 export * from './no-results';
 export * from './overview';
 export * from './posts-list';
-export * from './summary';
diff --git a/src/components/organisms/layout/posts-list.fixture.ts b/src/components/organisms/layout/posts-list.fixture.tsx
index dfb0d97..e1f7a95 100644
--- a/src/components/organisms/layout/posts-list.fixture.ts
+++ b/src/components/organisms/layout/posts-list.fixture.tsx
@@ -1,4 +1,5 @@
-import type { Post } from './posts-list';
+import NextImage from 'next/image';
+import type { PostData } from './posts-list';
 
 export const introPost1 =
   'Esse et voluptas sapiente modi impedit unde et. Ducimus nulla ea impedit sit placeat nihil assumenda. Rem est fugiat amet quo hic. Corrupti fuga quod animi autem dolorem ullam corrupti vel aut.';
@@ -16,46 +17,46 @@ export const cover = {
   width: 640,
 };
 
-export const posts: Post[] = [
+export const posts: PostData[] = [
   {
-    intro: introPost1,
+    cover: <NextImage {...cover} />,
+    excerpt: introPost1,
     id: 'post-1',
     meta: {
-      cover,
-      dates: { publication: '2022-02-26' },
+      publicationDate: '2022-02-26',
       wordsCount: introPost1.split(' ').length,
       thematics: [
         { id: 1, name: 'Cat 1', url: '#' },
         { id: 2, name: 'Cat 2', url: '#' },
       ],
-      commentsCount: 1,
+      comments: { count: 1, postHeading: 'Ratione velit fuga' },
     },
-    title: 'Ratione velit fuga',
+    heading: 'Ratione velit fuga',
     url: '#',
   },
   {
-    intro: introPost2,
+    excerpt: introPost2,
     id: 'post-2',
     meta: {
-      dates: { publication: '2022-02-20' },
+      publicationDate: '2022-02-20',
       wordsCount: introPost2.split(' ').length,
       thematics: [{ id: 2, name: 'Cat 2', url: '#' }],
-      commentsCount: 0,
+      comments: { count: 0, postHeading: 'Debitis laudantium laudantium' },
     },
-    title: 'Debitis laudantium laudantium',
+    heading: 'Debitis laudantium laudantium',
     url: '#',
   },
   {
-    intro: introPost3,
+    cover: <NextImage {...cover} />,
+    excerpt: introPost3,
     id: 'post-3',
     meta: {
-      cover,
-      dates: { publication: '2021-12-20' },
+      publicationDate: '2021-12-20',
       wordsCount: introPost3.split(' ').length,
       thematics: [{ id: 1, name: 'Cat 1', url: '#' }],
-      commentsCount: 3,
+      comments: { count: 3, postHeading: 'Quaerat ut corporis' },
     },
-    title: 'Quaerat ut corporis',
+    heading: 'Quaerat ut corporis',
     url: '#',
   },
 ];
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 36d3c87..40306a6 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -17,18 +17,30 @@ import {
   type RenderPaginationItemAriaLabel,
   type RenderPaginationLink,
 } from '../nav';
+import {
+  PostPreview,
+  type PostPreviewMetaData,
+  type PostPreviewProps,
+} from '../post-preview';
 import { NoResults } from './no-results';
 import styles from './posts-list.module.scss';
-import { Summary, type SummaryProps } from './summary';
 
-export type Post = Omit<SummaryProps, 'titleLevel'> & {
+export type PostData = Pick<
+  PostPreviewProps,
+  'cover' | 'excerpt' | 'heading' | 'url'
+> & {
   /**
    * The post id.
    */
   id: string | number;
+  /**
+   * The post meta.
+   */
+  meta: PostPreviewMetaData &
+    Required<Pick<PostPreviewMetaData, 'publicationDate'>>;
 };
 
-export type YearCollection = Record<string, Post[]>;
+export type YearCollection = Record<string, PostData[]>;
 
 export type PostsListProps = Pick<PaginationProps, 'siblings'> & {
   /**
@@ -54,7 +66,7 @@ export type PostsListProps = Pick<PaginationProps, 'siblings'> & {
   /**
    * The posts data.
    */
-  posts: Post[];
+  posts: PostData[];
   /**
    * Determine if the load more button should be visible.
    */
@@ -72,14 +84,14 @@ export type PostsListProps = Pick<PaginationProps, 'siblings'> & {
 /**
  * Create a collection of posts sorted by year.
  *
- * @param {Posts[]} data - A collection of posts.
+ * @param {PostData[]} data - A collection of posts.
  * @returns {YearCollection} The posts sorted by year.
  */
-const sortPostsByYear = (data: Post[]): YearCollection => {
+const sortPostsByYear = (data: PostData[]): YearCollection => {
   const yearCollection: Partial<YearCollection> = {};
 
   data.forEach((post) => {
-    const postYear = new Date(post.meta.dates.publication)
+    const postYear = new Date(post.meta.publicationDate)
       .getFullYear()
       .toString();
     yearCollection[postYear] = [...(yearCollection[postYear] ?? []), post];
@@ -116,12 +128,12 @@ export const PostsList: FC<PostsListProps> = ({
   /**
    * Retrieve the list of posts.
    *
-   * @param {Posts[]} allPosts - A collection fo posts.
+   * @param {PostData[]} allPosts - A collection fo posts.
    * @param {HeadingLevel} [headingLevel] - The posts heading level (hn).
    * @returns {JSX.Element} The list of posts.
    */
   const getList = (
-    allPosts: Post[],
+    allPosts: PostData[],
     headingLevel: HeadingLevel = 2
   ): JSX.Element => (
     <List
@@ -136,7 +148,7 @@ export const PostsList: FC<PostsListProps> = ({
       {allPosts.map(({ id, ...post }) => (
         <Fragment key={id}>
           <ListItem className={styles.item}>
-            <Summary {...post} titleLevel={headingLevel} />
+            <PostPreview {...post} headingLvl={headingLevel} />
           </ListItem>
           {id === lastPostId && (
             <ListItem>
diff --git a/src/components/organisms/layout/summary.fixture.ts b/src/components/organisms/layout/summary.fixture.ts
deleted file mode 100644
index 6f90b4a..0000000
--- a/src/components/organisms/layout/summary.fixture.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { SummaryMeta } from './summary';
-
-export const cover = {
-  alt: 'A cover',
-  height: 480,
-  src: 'https://picsum.photos/640/480',
-  width: 640,
-};
-
-export const intro =
-  'Perspiciatis quasi libero nemo non eligendi nam minima. Deleniti expedita tempore. Praesentium explicabo molestiae eaque consectetur vero. Quae nostrum quisquam similique. Ut hic est quas ut esse quisquam nobis.';
-
-export const meta: SummaryMeta = {
-  dates: { publication: '2022-04-11' },
-  wordsCount: intro.split(' ').length,
-  thematics: [
-    { id: 1, name: 'Cat 1', url: '#' },
-    { id: 2, name: 'Cat 2', url: '#' },
-  ],
-  commentsCount: 1,
-};
-
-export const title = 'Odio odit necessitatibus';
-
-export const url = '#';
diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx
deleted file mode 100644
index fe8b704..0000000
--- a/src/components/organisms/layout/summary.stories.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Summary } from './summary';
-import { cover, intro, meta } from './summary.fixture';
-
-/**
- * Summary - Storybook Meta
- */
-export default {
-  title: 'Organisms/Layout/Summary',
-  component: Summary,
-  args: {
-    titleLevel: 2,
-  },
-  argTypes: {
-    cover: {
-      description: 'The cover data.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'object',
-        required: false,
-        value: {},
-      },
-    },
-    excerpt: {
-      control: {
-        type: 'text',
-      },
-      description: 'The page excerpt.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    meta: {
-      description: 'The page metadata.',
-      type: {
-        name: 'object',
-        required: true,
-        value: {},
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The page title',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    titleLevel: {
-      control: {
-        type: 'number',
-        min: 1,
-        max: 6,
-      },
-      description: 'The page title level (hn)',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 2 },
-      },
-      type: {
-        name: 'number',
-        required: false,
-      },
-    },
-    url: {
-      control: {
-        type: 'text',
-      },
-      description: 'The page url.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof Summary>;
-
-const Template: ComponentStory<typeof Summary> = (args) => (
-  <Summary {...args} />
-);
-
-/**
- * Summary Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  intro,
-  meta,
-  title: 'Odio odit necessitatibus',
-  url: '#',
-};
-
-/**
- * Summary Stories - With cover
- */
-export const WithCover = Template.bind({});
-WithCover.args = {
-  intro,
-  meta: { ...meta, cover },
-  title: 'Odio odit necessitatibus',
-  url: '#',
-};
diff --git a/src/components/organisms/layout/summary.test.tsx b/src/components/organisms/layout/summary.test.tsx
deleted file mode 100644
index 3e58e9a..0000000
--- a/src/components/organisms/layout/summary.test.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
-import { Summary } from './summary';
-import { cover, intro, meta, title, url } from './summary.fixture';
-
-describe('Summary', () => {
-  it('renders a title wrapped in a h2 element', () => {
-    render(
-      <Summary
-        intro={intro}
-        meta={meta}
-        title={title}
-        titleLevel={2}
-        url={url}
-      />
-    );
-    expect(
-      screen.getByRole('heading', { level: 2, name: title })
-    ).toBeInTheDocument();
-  });
-
-  it('renders an excerpt', () => {
-    render(<Summary intro={intro} meta={meta} title={title} url={url} />);
-    expect(screen.getByText(intro)).toBeInTheDocument();
-  });
-
-  it('renders a cover', () => {
-    render(
-      <Summary
-        intro={intro}
-        meta={{ ...meta, cover }}
-        title={title}
-        url={url}
-      />
-    );
-    expect(screen.getByRole('img', { name: cover.alt })).toBeInTheDocument();
-  });
-
-  it('renders a link to the full post', () => {
-    render(<Summary intro={intro} meta={meta} title={title} url={url} />);
-    expect(screen.getByRole('link', { name: title })).toBeInTheDocument();
-  });
-
-  it('renders a read more link', () => {
-    render(<Summary intro={intro} meta={meta} title={title} url={url} />);
-    expect(
-      screen.getByRole('link', { name: `Read more about ${title}` })
-    ).toBeInTheDocument();
-  });
-
-  it('renders some meta', () => {
-    render(<Summary intro={intro} meta={meta} title={title} url={url} />);
-    expect(screen.getByText(meta.thematics![0].name)).toBeInTheDocument();
-  });
-});
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
deleted file mode 100644
index 0c95f90..0000000
--- a/src/components/organisms/layout/summary.tsx
+++ /dev/null
@@ -1,235 +0,0 @@
-import NextImage, { type ImageProps as NextImageProps } from 'next/image';
-import type { FC, ReactNode } from 'react';
-import { useIntl } from 'react-intl';
-import type { Article, Meta as MetaType } from '../../../types';
-import { useReadingTime } from '../../../utils/hooks';
-import { ButtonLink, type HeadingLevel, Icon, Link, Time } from '../../atoms';
-import {
-  Card,
-  CardActions,
-  CardBody,
-  CardCover,
-  CardFooter,
-  CardHeader,
-  CardMeta,
-  CardTitle,
-  type MetaItemData,
-} from '../../molecules';
-import styles from './summary.module.scss';
-
-export type Cover = Pick<NextImageProps, 'alt' | 'src' | 'width' | 'height'>;
-
-export type SummaryMeta = Pick<
-  MetaType<'article'>,
-  | 'author'
-  | 'commentsCount'
-  | 'cover'
-  | 'dates'
-  | 'thematics'
-  | 'topics'
-  | 'wordsCount'
->;
-
-export type SummaryProps = Pick<Article, 'intro' | 'title'> & {
-  /**
-   * The post metadata.
-   */
-  meta: SummaryMeta;
-  /**
-   * The heading level (hn).
-   */
-  titleLevel?: HeadingLevel;
-  /**
-   * The post url.
-   */
-  url: string;
-};
-
-/**
- * Summary component
- *
- * Render a page summary.
- */
-export const Summary: FC<SummaryProps> = ({
-  intro,
-  meta,
-  title,
-  titleLevel = 2,
-  url,
-}) => {
-  const intl = useIntl();
-  const figureLabel = intl.formatMessage(
-    {
-      defaultMessage: '{title} cover',
-      description: 'Summary: figure (cover) accessible name',
-      id: 'RNVe1W',
-    },
-    { title }
-  );
-  const readMore = intl.formatMessage(
-    {
-      defaultMessage: 'Read more<a11y> about {title}</a11y>',
-      description: 'Summary: read more link',
-      id: 'Zpgv+f',
-    },
-    {
-      title,
-      a11y: (chunks: ReactNode) => (
-        // eslint-disable-next-line react/jsx-no-literals -- SR class allowed
-        <span className="screen-reader-text">{chunks}</span>
-      ),
-    }
-  );
-  const readingTime = useReadingTime(meta.wordsCount, true);
-
-  const getMetaItems = (): MetaItemData[] => {
-    const summaryMeta: MetaItemData[] = [
-      {
-        id: 'publication-date',
-        label: intl.formatMessage({
-          defaultMessage: 'Published on:',
-          description: 'Summary: publication date label',
-          id: 'TvQ2Ee',
-        }),
-        value: <Time date={meta.dates.publication} />,
-      },
-    ];
-
-    if (meta.dates.update && meta.dates.update !== meta.dates.publication)
-      summaryMeta.push({
-        id: 'update-date',
-        label: intl.formatMessage({
-          defaultMessage: 'Updated on:',
-          description: 'Summary: update date label',
-          id: 'f0Z/Po',
-        }),
-        value: <Time date={meta.dates.update} />,
-      });
-
-    summaryMeta.push({
-      id: 'reading-time',
-      label: intl.formatMessage({
-        defaultMessage: 'Reading time:',
-        description: 'Summary: reading time label',
-        id: 'tyzdql',
-      }),
-      value: readingTime,
-    });
-
-    if (meta.author)
-      summaryMeta.push({
-        id: 'author',
-        label: intl.formatMessage({
-          defaultMessage: 'Written by:',
-          description: 'Summary: author label',
-          id: 'r/6HOI',
-        }),
-        value: meta.author.name,
-      });
-
-    if (meta.thematics)
-      summaryMeta.push({
-        id: 'thematics',
-        label: intl.formatMessage({
-          defaultMessage: 'Thematics:',
-          description: 'Summary: thematics label',
-          id: 'bk0WOp',
-        }),
-        value: meta.thematics.map((thematic) => {
-          return {
-            id: `thematic-${thematic.id}`,
-            value: <Link href={thematic.url}>{thematic.name}</Link>,
-          };
-        }),
-      });
-
-    if (meta.topics)
-      summaryMeta.push({
-        id: 'topics',
-        label: intl.formatMessage({
-          defaultMessage: 'Topics:',
-          description: 'Summary: topics label',
-          id: 'yIZ+AC',
-        }),
-        value: meta.topics.map((topic) => {
-          return {
-            id: `topic-${topic.id}`,
-            value: <Link href={topic.url}>{topic.name}</Link>,
-          };
-        }),
-      });
-
-    if (meta.commentsCount !== undefined) {
-      const commentsCount = intl.formatMessage(
-        {
-          defaultMessage:
-            '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}<a11y> about {title}</a11y>',
-          description: 'Summary: comments count',
-          id: 'ye/vlA',
-        },
-        {
-          a11y: (chunks: ReactNode) => (
-            <span className="screen-reader-text">{chunks}</span>
-          ),
-          commentsCount: meta.commentsCount,
-          title,
-        }
-      );
-      summaryMeta.push({
-        id: 'comments-count',
-        label: intl.formatMessage({
-          defaultMessage: 'Comments:',
-          description: 'Summary: comments label',
-          id: 'bfPp0g',
-        }),
-        value: (
-          <Link href={`${url}#comments`}>{commentsCount as JSX.Element}</Link>
-        ),
-      });
-    }
-
-    return summaryMeta;
-  };
-
-  return (
-    <Card
-      className={styles.wrapper}
-      cover={
-        meta.cover ? (
-          <CardCover aria-label={figureLabel} hasBorders>
-            <NextImage {...meta.cover} />
-          </CardCover>
-        ) : undefined
-      }
-      meta={<CardMeta items={getMetaItems()} />}
-    >
-      <CardHeader>
-        <CardTitle className={styles.title} level={titleLevel}>
-          <Link href={url}>{title}</Link>
-        </CardTitle>
-      </CardHeader>
-      <CardBody>
-        <div
-          className={styles.intro}
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: intro }}
-        />
-      </CardBody>
-      <CardFooter>
-        <CardActions>
-          <ButtonLink to={url}>
-            {readMore}
-            <Icon
-              aria-hidden={true}
-              className={styles.icon}
-              // eslint-disable-next-line react/jsx-no-literals -- Direction allowed
-              orientation="right"
-              // eslint-disable-next-line react/jsx-no-literals -- Shape allowed
-              shape="arrow"
-            />
-          </ButtonLink>
-        </CardActions>
-      </CardFooter>
-    </Card>
-  );
-};
diff --git a/src/components/organisms/post-preview/index.ts b/src/components/organisms/post-preview/index.ts
new file mode 100644
index 0000000..8c49301
--- /dev/null
+++ b/src/components/organisms/post-preview/index.ts
@@ -0,0 +1,2 @@
+export * from './post-preview';
+export type { PostPreviewMetaData } from './post-preview-meta';
diff --git a/src/components/organisms/post-preview/post-preview-meta/index.ts b/src/components/organisms/post-preview/post-preview-meta/index.ts
new file mode 100644
index 0000000..0305db3
--- /dev/null
+++ b/src/components/organisms/post-preview/post-preview-meta/index.ts
@@ -0,0 +1 @@
+export * from './post-preview-meta';
diff --git a/src/components/organisms/post-preview/post-preview-meta/post-preview-meta.test.tsx b/src/components/organisms/post-preview/post-preview-meta/post-preview-meta.test.tsx
new file mode 100644
index 0000000..188afcc
--- /dev/null
+++ b/src/components/organisms/post-preview/post-preview-meta/post-preview-meta.test.tsx
@@ -0,0 +1,141 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../../tests/utils';
+import { getReadingTimeFrom } from '../../../../utils/helpers';
+import { PostPreviewMeta, type PostPreviewMetaData } from './post-preview-meta';
+
+describe('PostPreviewMeta', () => {
+  it('can render a meta for the author', () => {
+    const meta = {
+      author: 'Gilberto70',
+    } satisfies PostPreviewMetaData;
+
+    render(<PostPreviewMeta meta={meta} />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Written by:');
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(meta.author);
+  });
+
+  it('can render a meta for a single comment', () => {
+    const meta = {
+      comments: {
+        count: 1,
+        postHeading: 'quae commodi deserunt',
+      },
+    } satisfies PostPreviewMetaData;
+
+    render(<PostPreviewMeta meta={meta} />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Comments:');
+    expect(rtlScreen.getByRole('definition').textContent).toBe(
+      `${meta.comments.count} comment about ${meta.comments.postHeading}`
+    );
+  });
+
+  it('can render a meta for comments with a link', () => {
+    const meta = {
+      comments: {
+        count: 3,
+        postHeading: 'quae commodi deserunt',
+        url: '#temporibus',
+      },
+    } satisfies PostPreviewMetaData;
+
+    render(<PostPreviewMeta meta={meta} />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Comments:');
+    expect(rtlScreen.getByRole('definition').textContent).toBe(
+      `${meta.comments.count} comments about ${meta.comments.postHeading}`
+    );
+    expect(rtlScreen.getByRole('link')).toHaveAttribute(
+      'href',
+      meta.comments.url
+    );
+  });
+
+  it('can render a meta for the publication date', () => {
+    const meta = {
+      publicationDate: '2002',
+    } satisfies PostPreviewMetaData;
+
+    render(<PostPreviewMeta meta={meta} />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Published on:');
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(
+      meta.publicationDate
+    );
+  });
+
+  it('can render a meta for thematics', () => {
+    const meta = {
+      thematics: [{ id: 1, name: 'autem', url: '#est' }],
+    } satisfies PostPreviewMetaData;
+
+    render(<PostPreviewMeta meta={meta} />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Thematic:');
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(
+      meta.thematics[0].name
+    );
+    expect(rtlScreen.getByRole('link')).toHaveAttribute(
+      'href',
+      meta.thematics[0].url
+    );
+  });
+
+  it('can render a meta for topics', () => {
+    const meta = {
+      topics: [{ id: 1, name: 'hic', url: '#ipsa' }],
+    } satisfies PostPreviewMetaData;
+
+    render(<PostPreviewMeta meta={meta} />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Topic:');
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(
+      meta.topics[0].name
+    );
+    expect(rtlScreen.getByRole('link')).toHaveAttribute(
+      'href',
+      meta.topics[0].url
+    );
+  });
+
+  it('can render a meta for the update date', () => {
+    const meta = {
+      updateDate: '2020',
+    } satisfies PostPreviewMetaData;
+
+    render(<PostPreviewMeta meta={meta} />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Updated on:');
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(
+      meta.updateDate
+    );
+  });
+
+  it('does not render a meta for the update date if it is equal to the publication date', () => {
+    const meta = {
+      publicationDate: '2020',
+      updateDate: '2020',
+    } satisfies PostPreviewMetaData;
+
+    render(<PostPreviewMeta meta={meta} />);
+
+    const terms = rtlScreen.getAllByRole('term');
+
+    expect(terms.length).toBe(1);
+    expect(terms[0].textContent).toBe('Published on:');
+  });
+
+  it('can render a meta for the reading time', () => {
+    const meta = {
+      wordsCount: 500,
+    } satisfies PostPreviewMetaData;
+
+    render(<PostPreviewMeta meta={meta} />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent('Reading time:');
+    expect(rtlScreen.getByRole('definition')).toHaveTextContent(
+      `${getReadingTimeFrom(meta.wordsCount).inMinutes()} minutes`
+    );
+  });
+});
diff --git a/src/components/organisms/post-preview/post-preview-meta/post-preview-meta.tsx b/src/components/organisms/post-preview/post-preview-meta/post-preview-meta.tsx
new file mode 100644
index 0000000..5a342da
--- /dev/null
+++ b/src/components/organisms/post-preview/post-preview-meta/post-preview-meta.tsx
@@ -0,0 +1,254 @@
+import type { FC, ReactNode } from 'react';
+import { useIntl } from 'react-intl';
+import type { PageLink } from '../../../../types';
+import { getReadingTimeFrom } from '../../../../utils/helpers';
+import { Link, Time, VisuallyHidden } from '../../../atoms';
+import {
+  CardMeta,
+  type MetaItemData,
+  type CardMetaProps,
+} from '../../../molecules';
+
+const a11y = (chunks: ReactNode) => <VisuallyHidden>{chunks}</VisuallyHidden>;
+
+export type PostPreviewMetaComment = {
+  /**
+   * The number of comments.
+   */
+  count: number;
+  /**
+   * The post heading (used to generate an accessible label).
+   */
+  postHeading: string;
+  /**
+   * An url to the comments section.
+   */
+  url?: string;
+};
+
+export type PostPreviewMetaData = {
+  /**
+   * The author name.
+   */
+  author?: string;
+  /**
+   * The number of comments on the post and eventually an url to read them.
+   */
+  comments?: PostPreviewMetaComment;
+  /**
+   * The publication date of the post.
+   */
+  publicationDate?: string;
+  /**
+   * The thematics attached to the post.
+   */
+  thematics?: PageLink[];
+  /**
+   * The topics attached to the post.
+   */
+  topics?: PageLink[];
+  /**
+   * The last modification date of the post.
+   */
+  updateDate?: string;
+  /**
+   * The number of words in the post.
+   */
+  wordsCount?: number;
+};
+
+const validMetaKeys = [
+  'author',
+  'comments',
+  'publicationDate',
+  'thematics',
+  'topics',
+  'updateDate',
+  'wordsCount',
+] satisfies (keyof PostPreviewMetaData)[];
+
+const isValidMetaKey = (key: string): key is keyof PostPreviewMetaData =>
+  (validMetaKeys as string[]).includes(key);
+
+export type PostPreviewMetaProps = Omit<CardMetaProps, 'items'> & {
+  /**
+   * The post meta.
+   */
+  meta: PostPreviewMetaData;
+};
+
+export const PostPreviewMeta: FC<PostPreviewMetaProps> = ({
+  meta,
+  ...props
+}) => {
+  const intl = useIntl();
+
+  const getAuthor = (): MetaItemData | undefined => {
+    if (!meta.author) return undefined;
+
+    return {
+      id: 'author',
+      label: intl.formatMessage({
+        defaultMessage: 'Written by:',
+        description: 'PostPreviewMeta: author label',
+        id: '2U7ixo',
+      }),
+      value: meta.author,
+    };
+  };
+
+  const getCommentsCount = (): MetaItemData | undefined => {
+    if (!meta.comments) return undefined;
+
+    const commentsLabel = intl.formatMessage<ReactNode>(
+      {
+        defaultMessage:
+          '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}<a11y> about {title}</a11y>',
+        description: 'PostPreviewMeta: comments count',
+        id: 'NfAn9N',
+      },
+      {
+        a11y,
+        commentsCount: meta.comments.count,
+        title: meta.comments.postHeading,
+      }
+    );
+
+    return {
+      id: 'comments',
+      label: intl.formatMessage({
+        defaultMessage: 'Comments:',
+        description: 'PostPreviewMeta: comments label',
+        id: 'FCpPCm',
+      }),
+      value: meta.comments.url ? (
+        <Link href={meta.comments.url}>{commentsLabel}</Link>
+      ) : (
+        <>{commentsLabel}</>
+      ),
+    };
+  };
+
+  const getPublicationDate = (): MetaItemData | undefined => {
+    if (!meta.publicationDate) return undefined;
+
+    return {
+      id: 'publication-date',
+      label: intl.formatMessage({
+        defaultMessage: 'Published on:',
+        description: 'PostPreviewMeta: publication date label',
+        id: '+6f4p1',
+      }),
+      value: <Time date={meta.publicationDate} />,
+    };
+  };
+
+  const getThematics = (): MetaItemData | undefined => {
+    if (!meta.thematics?.length) return undefined;
+
+    return {
+      id: 'thematics',
+      label: intl.formatMessage(
+        {
+          defaultMessage:
+            '{thematicsCount, plural, =0 {Thematics:} one {Thematic:} other {Thematics:}}',
+          description: 'PostPreviewMeta: thematics label',
+          id: '9MTBCG',
+        },
+        { thematicsCount: meta.thematics.length }
+      ),
+      value: meta.thematics.map((thematic) => {
+        return {
+          id: `thematic-${thematic.id}`,
+          value: <Link href={thematic.url}>{thematic.name}</Link>,
+        };
+      }),
+    };
+  };
+
+  const getTopics = (): MetaItemData | undefined => {
+    if (!meta.topics?.length) return undefined;
+
+    return {
+      id: 'topics',
+      label: intl.formatMessage(
+        {
+          defaultMessage:
+            '{topicsCount, plural, =0 {Topics:} one {Topic:} other {Topics:}}',
+          description: 'PostPreviewMeta: topics label',
+          id: 'aBQYbE',
+        },
+        { topicsCount: meta.topics.length }
+      ),
+      value: meta.topics.map((topic) => {
+        return {
+          id: `topic-${topic.id}`,
+          value: <Link href={topic.url}>{topic.name}</Link>,
+        };
+      }),
+    };
+  };
+
+  const getUpdateDate = (): MetaItemData | undefined => {
+    if (!meta.updateDate || meta.updateDate === meta.publicationDate)
+      return undefined;
+
+    return {
+      id: 'update-date',
+      label: intl.formatMessage({
+        defaultMessage: 'Updated on:',
+        description: 'PostPreviewMeta: update date label',
+        id: 'ZmRh0V',
+      }),
+      value: <Time date={meta.updateDate} />,
+    };
+  };
+
+  const getReadingTime = (): MetaItemData | undefined => {
+    if (!meta.wordsCount) return undefined;
+
+    return {
+      id: 'reading-time',
+      label: intl.formatMessage({
+        defaultMessage: 'Reading time:',
+        description: 'PostPreviewMeta: reading time label',
+        id: 'B1lS/v',
+      }),
+      value: intl.formatMessage(
+        {
+          defaultMessage:
+            '{minutesCount, plural, =0 {Less than one minute} one {# minute} other {# minutes}}',
+          description: 'PostPreviewMeta: rounded minutes count',
+          id: 'y+13Ax',
+        },
+        { minutesCount: getReadingTimeFrom(meta.wordsCount).inMinutes() }
+      ),
+    };
+  };
+
+  const items: MetaItemData[] = Object.keys(meta)
+    .filter(isValidMetaKey)
+    .map((key): MetaItemData | undefined => {
+      switch (key) {
+        case 'author':
+          return getAuthor();
+        case 'comments':
+          return getCommentsCount();
+        case 'publicationDate':
+          return getPublicationDate();
+        case 'thematics':
+          return getThematics();
+        case 'topics':
+          return getTopics();
+        case 'updateDate':
+          return getUpdateDate();
+        case 'wordsCount':
+          return getReadingTime();
+        default:
+          throw new Error('Unsupported meta key.');
+      }
+    })
+    .filter((item): item is MetaItemData => item !== undefined);
+
+  return <CardMeta {...props} items={items} />;
+};
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/post-preview/post-preview.module.scss
index 6e0af6a..2ff2e0e 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/post-preview/post-preview.module.scss
@@ -10,11 +10,11 @@
   }
 }
 
-.title {
+.heading {
   font-size: var(--font-size-2xl);
 }
 
-.intro {
+.excerpt {
   > *:last-child {
     margin-bottom: 0;
   }
diff --git a/src/components/organisms/post-preview/post-preview.stories.tsx b/src/components/organisms/post-preview/post-preview.stories.tsx
new file mode 100644
index 0000000..c22698f
--- /dev/null
+++ b/src/components/organisms/post-preview/post-preview.stories.tsx
@@ -0,0 +1,157 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import NextImage from 'next/image';
+import { PostPreview } from './post-preview';
+
+/**
+ * PostPreview - Storybook Meta
+ */
+export default {
+  title: 'Organisms/PostPreview',
+  component: PostPreview,
+  argTypes: {
+    cover: {
+      description: 'The cover data.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'object',
+        required: false,
+        value: {},
+      },
+    },
+    excerpt: {
+      control: {
+        type: 'text',
+      },
+      description: 'The page excerpt.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    meta: {
+      description: 'The page metadata.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    heading: {
+      control: {
+        type: 'text',
+      },
+      description: 'The page title',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    headingLvl: {
+      control: {
+        type: 'number',
+        min: 1,
+        max: 6,
+      },
+      description: 'The page title level (hn)',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 2 },
+      },
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
+    url: {
+      control: {
+        type: 'text',
+      },
+      description: 'The page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof PostPreview>;
+
+const Template: ComponentStory<typeof PostPreview> = (args) => (
+  <PostPreview {...args} />
+);
+
+/**
+ * PostPreview Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  excerpt:
+    'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.',
+  heading: 'The post title',
+  url: '#post',
+};
+
+/**
+ * PostPreview Stories - WithCover
+ */
+export const WithCover = Template.bind({});
+WithCover.args = {
+  cover: (
+    <NextImage
+      alt=""
+      height={480}
+      src="https://picsum.photos/640/480"
+      width={640}
+    />
+  ),
+  excerpt:
+    'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.',
+  heading: 'The post title',
+  url: '#post',
+};
+
+/**
+ * PostPreview Stories - WithMeta
+ */
+export const WithMeta = Template.bind({});
+WithMeta.args = {
+  excerpt:
+    'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.',
+  heading: 'The post title',
+  meta: {
+    publicationDate: '06/11/2023',
+    thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }],
+    wordsCount: 300,
+  },
+  url: '#post',
+};
+
+/**
+ * PostPreview Stories - WithCoverAndMeta
+ */
+export const WithCoverAndMeta = Template.bind({});
+WithCoverAndMeta.args = {
+  cover: (
+    <NextImage
+      alt=""
+      height={480}
+      src="https://picsum.photos/640/480"
+      width={640}
+    />
+  ),
+  excerpt:
+    'Et vel amet minus. Inventore magnam et vel ea animi omnis qui. Dicta quos qui consequuntur aspernatur ullam non nam odio et. Incidunt fugit sequi. Neque sit vel tenetur libero sit aut quisquam est et. Nostrum autem et.',
+  heading: 'The post title',
+  meta: {
+    publicationDate: '06/11/2023',
+    wordsCount: 300,
+    thematics: [{ id: 1, name: 'Thematic 1', url: '#thematic' }],
+    comments: {
+      count: 3,
+      postHeading: 'The post title',
+      url: '#comments',
+    },
+  },
+  url: '#post',
+};
diff --git a/src/components/organisms/post-preview/post-preview.test.tsx b/src/components/organisms/post-preview/post-preview.test.tsx
new file mode 100644
index 0000000..78012ed
--- /dev/null
+++ b/src/components/organisms/post-preview/post-preview.test.tsx
@@ -0,0 +1,66 @@
+import { describe, expect, it } from '@jest/globals';
+import NextImage from 'next/image';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import { PostPreview } from './post-preview';
+import type { PostPreviewMetaData } from './post-preview-meta';
+
+describe('PostPreview', () => {
+  it('renders an excerpt with a heading and a link', () => {
+    const excerpt = 'At necessitatibus id soluta adipisci quibusdam.';
+    const heading = 'impedit et ea';
+    const url = '#quia';
+
+    render(<PostPreview excerpt={excerpt} heading={heading} url={url} />);
+
+    expect(rtlScreen.getByRole('heading')).toHaveTextContent(heading);
+    expect(rtlScreen.getByRole('link', { name: heading })).toHaveAttribute(
+      'href',
+      url
+    );
+    expect(rtlScreen.getByText(excerpt)).toBeInTheDocument();
+  });
+
+  it('can render a cover', () => {
+    const excerpt = 'At necessitatibus id soluta adipisci quibusdam.';
+    const heading = 'impedit et ea';
+    const url = '#quia';
+    const altTxt = 'alias consequatur quod';
+
+    render(
+      <PostPreview
+        cover={
+          <NextImage
+            alt={altTxt}
+            height={480}
+            src="https://picsum.photos/640/480"
+            width={640}
+          />
+        }
+        excerpt={excerpt}
+        heading={heading}
+        url={url}
+      />
+    );
+
+    expect(rtlScreen.getByRole('img')).toHaveAccessibleName(altTxt);
+  });
+
+  it('can render some meta', () => {
+    const excerpt = 'At necessitatibus id soluta adipisci quibusdam.';
+    const heading = 'impedit et ea';
+    const url = '#quia';
+    const meta = {
+      author: 'Noah_Gleason48',
+      publicationDate: '2023',
+      wordsCount: 250,
+    } satisfies PostPreviewMetaData;
+
+    render(
+      <PostPreview excerpt={excerpt} heading={heading} meta={meta} url={url} />
+    );
+
+    expect(rtlScreen.getAllByRole('term')).toHaveLength(
+      Object.keys(meta).length
+    );
+  });
+});
diff --git a/src/components/organisms/post-preview/post-preview.tsx b/src/components/organisms/post-preview/post-preview.tsx
new file mode 100644
index 0000000..df459e2
--- /dev/null
+++ b/src/components/organisms/post-preview/post-preview.tsx
@@ -0,0 +1,132 @@
+import {
+  type ForwardRefRenderFunction,
+  type ReactElement,
+  forwardRef,
+  type ReactNode,
+} from 'react';
+import { useIntl } from 'react-intl';
+import {
+  ButtonLink,
+  type HeadingLevel,
+  Icon,
+  Link,
+  VisuallyHidden,
+} from '../../atoms';
+import {
+  Card,
+  CardActions,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  type CardProps,
+  CardTitle,
+  CardCover,
+} from '../../molecules';
+import { PostPreviewMeta, type PostPreviewMetaData } from './post-preview-meta';
+import styles from './post-preview.module.scss';
+
+const a11y = (chunks: ReactNode) => <VisuallyHidden>{chunks}</VisuallyHidden>;
+
+export type PostPreviewProps = Omit<
+  CardProps<undefined>,
+  'children' | 'cover' | 'linkTo' | 'meta' | 'variant'
+> & {
+  /**
+   * The post cover.
+   */
+  cover?: ReactElement;
+  /**
+   * The post excerpt.
+   */
+  excerpt: string;
+  /**
+   * The post title.
+   */
+  heading: string;
+  /**
+   * The heading level to use on post title.
+   */
+  headingLvl?: HeadingLevel;
+  /**
+   * The post meta.
+   */
+  meta?: PostPreviewMetaData;
+  /**
+   * The post url.
+   */
+  url: string;
+};
+
+const PostPreviewWithRef: ForwardRefRenderFunction<
+  HTMLDivElement,
+  PostPreviewProps
+> = (
+  { className, cover, excerpt, heading, headingLvl, meta, url, ...props },
+  ref
+) => {
+  const wrapperClass = `${styles.wrapper} ${className}`;
+  const intl = useIntl();
+  const coverLabel = intl.formatMessage(
+    {
+      defaultMessage: '{postTitle} cover',
+      description:
+        'PostPreview: an accessible name for the figure wrapping the cover',
+      id: 'iG5SHf',
+    },
+    { postTitle: heading }
+  );
+  const readMore = intl.formatMessage<ReactNode>(
+    {
+      defaultMessage: 'Read more<a11y> about {postTitle}</a11y>',
+      description: 'PostPreview: read more link',
+      id: 'BYdQze',
+    },
+    {
+      postTitle: heading,
+      a11y,
+    }
+  );
+
+  return (
+    <Card
+      {...props}
+      className={wrapperClass}
+      cover={
+        cover ? (
+          <CardCover aria-label={coverLabel} hasBorders>
+            {cover}
+          </CardCover>
+        ) : undefined
+      }
+      meta={meta ? <PostPreviewMeta meta={meta} /> : undefined}
+      ref={ref}
+    >
+      <CardHeader>
+        <CardTitle className={styles.heading} level={headingLvl}>
+          <Link href={url}>{heading}</Link>
+        </CardTitle>
+      </CardHeader>
+      <CardBody
+        className={styles.excerpt}
+        dangerouslySetInnerHTML={{ __html: excerpt }}
+      />
+      <CardFooter>
+        <CardActions>
+          <ButtonLink to={url}>
+            {readMore}
+            <Icon
+              aria-hidden
+              className={styles.icon}
+              // eslint-disable-next-line react/jsx-no-literals
+              orientation="right"
+              // eslint-disable-next-line react/jsx-no-literals
+              shape="arrow"
+            />
+          </ButtonLink>
+        </CardActions>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export const PostPreview = forwardRef(PostPreviewWithRef);