From fd9831446ff87414da772b17327368cb291192e6 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 21 Apr 2022 18:36:45 +0200
Subject: chore: add a Comment component

---
 .../organisms/layout/comment.stories.tsx           | 117 +++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 src/components/organisms/layout/comment.stories.tsx

(limited to 'src/components/organisms/layout/comment.stories.tsx')

diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
new file mode 100644
index 0000000..01d9ac6
--- /dev/null
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -0,0 +1,117 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import CommentComponent from './comment';
+
+/**
+ * Comment - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Layout',
+  component: CommentComponent,
+  argTypes: {
+    author: {
+      description: 'The author data.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    canReply: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Enable or disable the reply button.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: true },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    content: {
+      control: {
+        type: 'text',
+      },
+      description: 'The comment body.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    id: {
+      control: {
+        type: 'number',
+      },
+      description: 'The comment id.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    postId: {
+      control: {
+        type: 'number',
+      },
+      description: 'The post id.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    publication: {
+      description: 'The publication date.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    saveComment: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to save the comment form data.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof CommentComponent>;
+
+const Template: ComponentStory<typeof CommentComponent> = (args) => (
+  <CommentComponent {...args} />
+);
+
+/**
+ * Layout Stories - Comment
+ */
+export const Comment = Template.bind({});
+Comment.args = {
+  author: {
+    avatar: 'http://placeimg.com/640/480',
+    name: 'Armand',
+    url: 'https://www.armandphilippot.com/',
+  },
+  content:
+    'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.',
+  id: 2,
+  postId: 21,
+  publication: '2021-04-03 23:04:24',
+  saveComment: () => null,
+  // @ts-ignore - Needed because of the placeholder image.
+  unoptimized: true,
+};
-- 
cgit v1.2.3


From cb6a54e54f2f013e06049b20388ca78e26201e16 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 22 Apr 2022 17:27:01 +0200
Subject: chore: add a CommentsList component

---
 .../organisms/layout/comment.stories.tsx           |   1 -
 src/components/organisms/layout/comment.test.tsx   |   2 -
 src/components/organisms/layout/comment.tsx        |   4 -
 .../organisms/layout/comments-list.module.scss     |  16 +++
 .../organisms/layout/comments-list.stories.tsx     | 144 +++++++++++++++++++++
 .../organisms/layout/comments-list.test.tsx        |  66 ++++++++++
 src/components/organisms/layout/comments-list.tsx  |  65 ++++++++++
 7 files changed, 291 insertions(+), 7 deletions(-)
 create mode 100644 src/components/organisms/layout/comments-list.module.scss
 create mode 100644 src/components/organisms/layout/comments-list.stories.tsx
 create mode 100644 src/components/organisms/layout/comments-list.test.tsx
 create mode 100644 src/components/organisms/layout/comments-list.tsx

(limited to 'src/components/organisms/layout/comment.stories.tsx')

diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
index 01d9ac6..b14621b 100644
--- a/src/components/organisms/layout/comment.stories.tsx
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -109,7 +109,6 @@ Comment.args = {
   content:
     'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.',
   id: 2,
-  postId: 21,
   publication: '2021-04-03 23:04:24',
   saveComment: () => null,
   // @ts-ignore - Needed because of the placeholder image.
diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx
index 942ed0f..9e537e5 100644
--- a/src/components/organisms/layout/comment.test.tsx
+++ b/src/components/organisms/layout/comment.test.tsx
@@ -11,13 +11,11 @@ const content =
   'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.';
 const publication = '2021-04-03 23:04:24';
 const id = 5;
-const postId = 31;
 
 const data = {
   author,
   content,
   id,
-  postId,
   publication,
   saveComment: () => null,
 };
diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
index f4b822a..6d41c00 100644
--- a/src/components/organisms/layout/comment.tsx
+++ b/src/components/organisms/layout/comment.tsx
@@ -40,10 +40,6 @@ export type CommentProps = {
    * The comment id.
    */
   id: number | string;
-  /**
-   * The post id.
-   */
-  postId: number | string;
   /**
    * The comment date.
    */
diff --git a/src/components/organisms/layout/comments-list.module.scss b/src/components/organisms/layout/comments-list.module.scss
new file mode 100644
index 0000000..803a418
--- /dev/null
+++ b/src/components/organisms/layout/comments-list.module.scss
@@ -0,0 +1,16 @@
+@use "@styles/abstracts/placeholders";
+
+.list {
+  @extend %reset-ordered-list;
+
+  & & {
+    margin: var(--spacing-sm) 0;
+    padding-left: var(--spacing-sm);
+  }
+}
+
+.item {
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-sm);
+  }
+}
diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx
new file mode 100644
index 0000000..9edf368
--- /dev/null
+++ b/src/components/organisms/layout/comments-list.stories.tsx
@@ -0,0 +1,144 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import CommentsListComponent, { Comment } from './comments-list';
+
+/**
+ * CommentsList - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Layout/CommentsList',
+  component: CommentsListComponent,
+  argTypes: {
+    comments: {
+      control: {
+        type: null,
+      },
+      description: 'An array of comments.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    depth: {
+      control: {
+        type: 'number',
+      },
+      description: 'The maximum depth. Use `0` to not display nested comments.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    saveComment: {
+      control: {
+        type: null,
+      },
+      description: 'A callback function to save the comment form data.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof CommentsListComponent>;
+
+const Template: ComponentStory<typeof CommentsListComponent> = (args) => (
+  <CommentsListComponent {...args} />
+);
+
+const comments: Comment[] = [
+  {
+    author: {
+      avatar: 'http://placeimg.com/640/480',
+      name: 'Author 1',
+    },
+    content:
+      'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
+    id: 1,
+    publication: '2021-04-03 18:04:11',
+    // @ts-ignore - Needed because of the placeholder image.
+    unoptimized: true,
+  },
+  {
+    child: [
+      {
+        author: {
+          avatar: 'http://placeimg.com/640/480',
+          name: 'Author 4',
+        },
+        content:
+          'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
+        id: 4,
+        publication: '2021-04-03 23:04:24',
+        // @ts-ignore - Needed because of the placeholder image.
+        unoptimized: true,
+      },
+      {
+        author: {
+          avatar: 'http://placeimg.com/640/480',
+          name: 'Author 1',
+        },
+        content:
+          'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
+        id: 5,
+        publication: '2021-04-04 08:05:14',
+        // @ts-ignore - Needed because of the placeholder image.
+        unoptimized: true,
+      },
+    ],
+    author: {
+      avatar: 'http://placeimg.com/640/480',
+      name: 'Author 2',
+      url: '#',
+    },
+    content:
+      'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
+    id: 2,
+    publication: '2021-04-03 23:30:20',
+    // @ts-ignore - Needed because of the placeholder image.
+    unoptimized: true,
+  },
+  {
+    author: {
+      avatar: 'http://placeimg.com/640/480',
+      name: 'Author 3',
+    },
+    content:
+      'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
+    id: 3,
+    publication: '2021-09-13 13:24:54',
+    // @ts-ignore - Needed because of the placeholder image.
+    unoptimized: true,
+  },
+];
+
+/**
+ * Layout Stories - Without child comments
+ */
+export const WithoutChildComments = Template.bind({});
+WithoutChildComments.args = {
+  comments,
+  depth: 0,
+  saveComment: () => null,
+};
+
+/**
+ * Layout Stories - With child comments
+ */
+export const WithChildComments = Template.bind({});
+WithChildComments.args = {
+  comments,
+  depth: 1,
+  saveComment: () => null,
+};
diff --git a/src/components/organisms/layout/comments-list.test.tsx b/src/components/organisms/layout/comments-list.test.tsx
new file mode 100644
index 0000000..542b1df
--- /dev/null
+++ b/src/components/organisms/layout/comments-list.test.tsx
@@ -0,0 +1,66 @@
+import { render } from '@test-utils';
+import CommentsList, { type Comment } from './comments-list';
+
+const comments: Comment[] = [
+  {
+    author: {
+      avatar: 'http://placeimg.com/640/480',
+      name: 'Author 1',
+    },
+    content:
+      'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
+    id: 1,
+    publication: '2021-04-03 18:04:11',
+  },
+  {
+    child: [
+      {
+        author: {
+          avatar: 'http://placeimg.com/640/480',
+          name: 'Author 4',
+        },
+        content:
+          'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
+        id: 4,
+        publication: '2021-04-03 23:04:24',
+      },
+      {
+        author: {
+          avatar: 'http://placeimg.com/640/480',
+          name: 'Author 1',
+        },
+        content:
+          'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
+        id: 5,
+        publication: '2021-04-04 08:05:14',
+      },
+    ],
+    author: {
+      avatar: 'http://placeimg.com/640/480',
+      name: 'Author 2',
+      url: '#',
+    },
+    content:
+      'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
+    id: 2,
+    publication: '2021-04-03 23:30:20',
+  },
+  {
+    author: {
+      avatar: 'http://placeimg.com/640/480',
+      name: 'Author 3',
+    },
+    content:
+      'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
+    id: 3,
+    publication: '2021-05-13 13:24:54',
+  },
+];
+
+describe('CommentsList', () => {
+  it('renders a comments list', () => {
+    render(
+      <CommentsList comments={comments} depth={1} saveComment={() => null} />
+    );
+  });
+});
diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx
new file mode 100644
index 0000000..03f508e
--- /dev/null
+++ b/src/components/organisms/layout/comments-list.tsx
@@ -0,0 +1,65 @@
+import SingleComment, {
+  type CommentProps,
+} from '@components/organisms/layout/comment';
+import { FC } from 'react';
+import styles from './comments-list.module.scss';
+
+export type Comment = Omit<CommentProps, 'canReply' | 'saveComment'> & {
+  child?: Comment[];
+};
+
+export type CommentsListProps = {
+  /**
+   * An array of comments.
+   */
+  comments: Comment[];
+  /**
+   * The maximum depth. Use `0` to not display nested comments.
+   */
+  depth: 0 | 1 | 2 | 3 | 4;
+  /**
+   * A callback function to save comment form data.
+   */
+  saveComment: CommentProps['saveComment'];
+};
+
+/**
+ * CommentsList component
+ *
+ * Render a comments list.
+ */
+const CommentsList: FC<CommentsListProps> = ({
+  comments,
+  depth,
+  saveComment,
+}) => {
+  /**
+   * Get each comment wrapped in a list item.
+   *
+   * @param {Comment[]} commentsList - An array of comments.
+   * @returns {JSX.Element[]} The list items.
+   */
+  const getItems = (
+    commentsList: Comment[],
+    startLevel: number
+  ): JSX.Element[] => {
+    const isLastLevel = startLevel === depth;
+
+    return commentsList.map(({ child, ...comment }) => (
+      <li key={comment.id} className={styles.item}>
+        <SingleComment
+          saveComment={saveComment}
+          canReply={!isLastLevel}
+          {...comment}
+        />
+        {child && !isLastLevel && (
+          <ol className={styles.list}>{getItems(child, startLevel + 1)}</ol>
+        )}
+      </li>
+    ));
+  };
+
+  return <ol className={styles.list}>{getItems(comments, 0)}</ol>;
+};
+
+export default CommentsList;
-- 
cgit v1.2.3


From 8a6f09b564d5d2f02d0a2605f6b52070a910aaa3 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 25 Apr 2022 12:57:12 +0200
Subject: chore: add a PageLayout component

---
 src/components/atoms/layout/sidebar.module.scss    |   5 +
 src/components/atoms/layout/sidebar.tsx            |   6 +-
 src/components/molecules/layout/meta.module.scss   |  17 +
 src/components/molecules/layout/meta.tsx           |  14 +-
 .../molecules/nav/breadcrumb.stories.tsx           |  13 +
 src/components/molecules/nav/breadcrumb.tsx        |  22 +-
 .../organisms/layout/comment.stories.tsx           |  10 -
 src/components/organisms/layout/header.module.scss |   2 +-
 .../organisms/layout/posts-list.module.scss        |  11 +-
 .../organisms/layout/posts-list.stories.tsx        |   7 +
 .../organisms/layout/summary.module.scss           |   2 +
 src/components/templates/layout/layout.module.scss |   1 -
 .../templates/page/page-layout.module.scss         |  85 ++++
 .../templates/page/page-layout.stories.tsx         | 520 +++++++++++++++++++++
 src/components/templates/page/page-layout.test.tsx |  90 ++++
 src/components/templates/page/page-layout.tsx      | 166 +++++++
 src/styles/abstracts/_placeholders.scss            |   1 +
 src/styles/abstracts/placeholders/_layout.scss     |  25 +
 src/utils/helpers/format.ts                        |  28 +-
 src/utils/hooks/use-is-mounted.tsx                 |  19 +
 20 files changed, 1019 insertions(+), 25 deletions(-)
 create mode 100644 src/components/molecules/layout/meta.module.scss
 create mode 100644 src/components/templates/page/page-layout.module.scss
 create mode 100644 src/components/templates/page/page-layout.stories.tsx
 create mode 100644 src/components/templates/page/page-layout.test.tsx
 create mode 100644 src/components/templates/page/page-layout.tsx
 create mode 100644 src/styles/abstracts/placeholders/_layout.scss
 create mode 100644 src/utils/hooks/use-is-mounted.tsx

(limited to 'src/components/organisms/layout/comment.stories.tsx')

diff --git a/src/components/atoms/layout/sidebar.module.scss b/src/components/atoms/layout/sidebar.module.scss
index da2acbe..5d36f18 100644
--- a/src/components/atoms/layout/sidebar.module.scss
+++ b/src/components/atoms/layout/sidebar.module.scss
@@ -5,3 +5,8 @@
     margin-top: fun.convert-px(-2);
   }
 }
+
+.body {
+  position: sticky;
+  top: var(--spacing-xs);
+}
diff --git a/src/components/atoms/layout/sidebar.tsx b/src/components/atoms/layout/sidebar.tsx
index 194ed9f..d13cc0d 100644
--- a/src/components/atoms/layout/sidebar.tsx
+++ b/src/components/atoms/layout/sidebar.tsx
@@ -18,7 +18,11 @@ export type SidebarProps = {
  * Render an aside element.
  */
 const Sidebar: FC<SidebarProps> = ({ children, className = '' }) => {
-  return <aside className={`${styles.wrapper} ${className}`}>{children}</aside>;
+  return (
+    <aside className={`${styles.wrapper} ${className}`}>
+      <div className={styles.body}>{children}</div>
+    </aside>
+  );
 };
 
 export default Sidebar;
diff --git a/src/components/molecules/layout/meta.module.scss b/src/components/molecules/layout/meta.module.scss
new file mode 100644
index 0000000..f7cc55b
--- /dev/null
+++ b/src/components/molecules/layout/meta.module.scss
@@ -0,0 +1,17 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      display: flex;
+      flex-flow: column nowrap;
+    }
+  }
+}
+
+.value {
+  word-break: break-all;
+}
diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index fcce473..d05396e 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -3,6 +3,7 @@ import DescriptionList, {
   type DescriptionListItem,
 } from '@components/atoms/lists/description-list';
 import { FC, ReactNode } from 'react';
+import styles from './meta.module.scss';
 
 export type MetaItem = {
   /**
@@ -23,7 +24,7 @@ export type MetaProps = {
   /**
    * Set additional classnames to the meta wrapper.
    */
-  className?: string;
+  className?: DescriptionListProps['className'];
   /**
    * The meta data.
    */
@@ -43,7 +44,7 @@ export type MetaProps = {
  *
  * Renders the page metadata.
  */
-const Meta: FC<MetaProps> = ({ data, ...props }) => {
+const Meta: FC<MetaProps> = ({ className, data, ...props }) => {
   /**
    * Transform the metadata to description list item format.
    *
@@ -68,7 +69,14 @@ const Meta: FC<MetaProps> = ({ data, ...props }) => {
     return listItems;
   };
 
-  return <DescriptionList items={getItems(data)} {...props} />;
+  return (
+    <DescriptionList
+      items={getItems(data)}
+      className={`${styles.list} ${className}`}
+      descriptionClassName={styles.value}
+      {...props}
+    />
+  );
 };
 
 export default Meta;
diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx
index 500ae6c..e26b480 100644
--- a/src/components/molecules/nav/breadcrumb.stories.tsx
+++ b/src/components/molecules/nav/breadcrumb.stories.tsx
@@ -22,6 +22,19 @@ export default {
         required: false,
       },
     },
+    itemClassName: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Styles',
+      },
+      description: 'Set additional classnames to the breadcrumb items.',
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     items: {
       description: 'The breadcrumb items.',
       type: {
diff --git a/src/components/molecules/nav/breadcrumb.tsx b/src/components/molecules/nav/breadcrumb.tsx
index 6dc86a0..d184d65 100644
--- a/src/components/molecules/nav/breadcrumb.tsx
+++ b/src/components/molecules/nav/breadcrumb.tsx
@@ -26,6 +26,10 @@ export type BreadcrumbProps = {
    * Set additional classnames to the nav element.
    */
   className?: string;
+  /**
+   * Set additional classnames to the breadcrumb items.
+   */
+  itemClassName?: string;
   /**
    * The breadcrumb items
    */
@@ -37,9 +41,19 @@ export type BreadcrumbProps = {
  *
  * Render a breadcrumb navigation.
  */
-const Breadcrumb: FC<BreadcrumbProps> = ({ items, ...props }) => {
+const Breadcrumb: FC<BreadcrumbProps> = ({
+  itemClassName = '',
+  items,
+  ...props
+}) => {
   const intl = useIntl();
 
+  const ariaLabel = intl.formatMessage({
+    defaultMessage: 'Breadcrumb',
+    description: 'Breadcrumb: an accessible name for the breadcrumb nav.',
+    id: '28nnDY',
+  });
+
   /**
    * Retrieve the breadcrumb list items.
    *
@@ -49,12 +63,12 @@ const Breadcrumb: FC<BreadcrumbProps> = ({ items, ...props }) => {
   const getListItems = (list: BreadcrumbItem[]): JSX.Element[] => {
     return list.map((item, index) => {
       const isLastItem = index === list.length - 1;
-      const itemClassnames = isLastItem
+      const itemStyles = isLastItem
         ? `${styles.item} screen-reader-text`
         : styles.item;
 
       return (
-        <li key={item.id} className={itemClassnames}>
+        <li key={item.id} className={`${itemStyles} ${itemClassName}`}>
           {isLastItem ? item.name : <Link href={item.url}>{item.name}</Link>}
         </li>
       );
@@ -96,7 +110,7 @@ const Breadcrumb: FC<BreadcrumbProps> = ({ items, ...props }) => {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <nav {...props}>
+      <nav aria-label={ariaLabel} {...props}>
         <span className="screen-reader-text">
           {intl.formatMessage({
             defaultMessage: 'You are here:',
diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
index b14621b..3794b06 100644
--- a/src/components/organisms/layout/comment.stories.tsx
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -51,16 +51,6 @@ export default {
         required: true,
       },
     },
-    postId: {
-      control: {
-        type: 'number',
-      },
-      description: 'The post id.',
-      type: {
-        name: 'number',
-        required: true,
-      },
-    },
     publication: {
       description: 'The publication date.',
       type: {
diff --git a/src/components/organisms/layout/header.module.scss b/src/components/organisms/layout/header.module.scss
index 7ae683f..a98cf45 100644
--- a/src/components/organisms/layout/header.module.scss
+++ b/src/components/organisms/layout/header.module.scss
@@ -7,7 +7,7 @@
     minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 100ch)
     minmax(0, 1fr);
   align-items: center;
-  padding: var(--spacing-sm) 0 var(--spacing-md);
+  padding: var(--spacing-md) 0 var(--spacing-lg);
 
   .toolbar {
     justify-content: space-around;
diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss
index 4d80442..f072082 100644
--- a/src/components/organisms/layout/posts-list.module.scss
+++ b/src/components/organisms/layout/posts-list.module.scss
@@ -1,3 +1,4 @@
+@use "@styles/abstracts/functions" as fun;
 @use "@styles/abstracts/mixins" as mix;
 @use "@styles/abstracts/placeholders";
 
@@ -5,8 +6,9 @@
   @include mix.media("screen") {
     @include mix.dimensions("md") {
       display: grid;
-      grid-template-columns: max-content minmax(0, 1fr);
+      grid-template-columns: fun.convert-px(150) minmax(0, 1fr);
       align-items: first baseline;
+      margin-left: fun.convert-px(-150);
     }
   }
 }
@@ -16,6 +18,7 @@
 
   .item {
     margin-bottom: var(--spacing-md);
+    border-bottom: fun.convert-px(1) solid var(--color-border);
   }
 }
 
@@ -24,9 +27,13 @@
     @include mix.dimensions("md") {
       grid-column: 1;
       justify-self: end;
-      margin-right: var(--spacing-lg);
+      padding-right: var(--spacing-lg);
       position: sticky;
       top: var(--spacing-xs);
     }
+
+    @include mix.dimensions("lg") {
+      padding-right: var(--spacing-xl);
+    }
   }
 }
diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
index 783d333..f80e1ca 100644
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ b/src/components/organisms/layout/posts-list.stories.tsx
@@ -171,6 +171,13 @@ ByYears.args = {
   posts,
   byYear: true,
 };
+ByYears.decorators = [
+  (Story) => (
+    <div style={{ marginLeft: 150 }}>
+      <Story />
+    </div>
+  ),
+];
 
 /**
  * PostsList Stories - No results
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index 3919e15..1cdda98 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -2,6 +2,8 @@
 @use "@styles/abstracts/mixins" as mix;
 
 .wrapper {
+  padding: var(--spacing-2xs) 0 var(--spacing-lg);
+
   @include mix.media("screen") {
     @include mix.dimensions("xs") {
       padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss
index eb84c70..3533257 100644
--- a/src/components/templates/layout/layout.module.scss
+++ b/src/components/templates/layout/layout.module.scss
@@ -11,7 +11,6 @@
 }
 
 .header {
-  padding: var(--spacing-sm) 0 var(--spacing-md);
   border-bottom: fun.convert-px(3) solid var(--color-border-light);
 }
 
diff --git a/src/components/templates/page/page-layout.module.scss b/src/components/templates/page/page-layout.module.scss
new file mode 100644
index 0000000..d5a1a2b
--- /dev/null
+++ b/src/components/templates/page/page-layout.module.scss
@@ -0,0 +1,85 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+.article {
+  @extend %grid;
+
+  grid-auto-flow: column dense;
+  align-items: baseline;
+
+  &--no-comments {
+    padding-bottom: var(--spacing-lg);
+  }
+}
+
+.breadcrumb {
+  @extend %grid;
+
+  grid-column: 1 / -1;
+  padding: var(--spacing-md) 0;
+
+  > * {
+    grid-column: 2;
+  }
+
+  &__items {
+    font-size: var(--font-size-sm);
+  }
+}
+
+.header {
+  grid-column: 1 / -1;
+  margin-bottom: var(--spacing-md);
+}
+
+.body {
+  grid-column: 2;
+}
+
+.sidebar {
+  grid-column: 2;
+
+  &--first {
+    margin-bottom: var(--spacing-xs);
+
+    @include mix.media("screen") {
+      @include mix.dimensions("lg") {
+        grid-column: 1;
+        align-self: stretch;
+        margin: 0 var(--spacing-xs) var(--spacing-md);
+      }
+    }
+  }
+
+  &--last {
+    margin: var(--spacing-lg) 0 0;
+
+    @include mix.media("screen") {
+      @include mix.dimensions("md") {
+        grid-column: 3;
+        align-self: stretch;
+        margin: 0 var(--spacing-xs) var(--spacing-md);
+      }
+    }
+  }
+}
+
+.footer {
+  grid-column: 2;
+}
+
+.comments {
+  @extend %grid;
+
+  grid-column: 1 / -1;
+  margin: var(--spacing-lg) 0 0;
+  padding: 0 0 var(--spacing-lg);
+  background: var(--color-bg-secondary);
+  border-top: fun.convert-px(3) solid var(--color-border-light);
+
+  &__section {
+    grid-column: 2;
+    margin: var(--spacing-md) 0 0;
+  }
+}
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
new file mode 100644
index 0000000..1f72cb0
--- /dev/null
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -0,0 +1,520 @@
+import ButtonLink from '@components/atoms/buttons/button-link';
+import Heading from '@components/atoms/headings/heading';
+import Link from '@components/atoms/links/link';
+import ProgressBar from '@components/atoms/loaders/progress-bar';
+import PostsList from '@components/organisms/layout/posts-list';
+import LinksListWidget from '@components/organisms/widgets/links-list-widget';
+import Sharing from '@components/organisms/widgets/sharing';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import PageLayoutComponent from './page-layout';
+
+/**
+ * PageLayout - Storybook Meta
+ */
+export default {
+  title: 'Templates/Page',
+  component: PageLayoutComponent,
+  args: {
+    allowComments: false,
+  },
+  argTypes: {
+    allowComments: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the comment form is displayed.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    breadcrumb: {
+      description: 'The breadcrumb items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    children: {
+      control: {
+        type: 'text',
+      },
+      description: 'The page content.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    comments: {
+      description: 'The page comments.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'object',
+        required: false,
+        value: {},
+      },
+    },
+    footerMeta: {
+      description: 'The metadata to display in the page footer.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'object',
+        required: false,
+        value: {},
+      },
+    },
+    headerMeta: {
+      description: 'The metadata to display in the page header.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'object',
+        required: false,
+        value: {},
+      },
+    },
+    id: {
+      control: {
+        type: 'text',
+      },
+      description: 'The page id.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    intro: {
+      control: {
+        type: 'text',
+      },
+      description: 'The page introduction.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    isHome: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the current page is the homepage.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'The page title.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+    widgets: {
+      control: {
+        type: null,
+      },
+      description: 'An array of widgets to put inside the last sidebar.',
+      type: {
+        name: 'object',
+        required: false,
+        value: {},
+      },
+    },
+    withToC: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the Table of Contents should be in the page.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <div id="__next">
+          <Story />
+        </div>
+      </IntlProvider>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as ComponentMeta<typeof PageLayoutComponent>;
+
+const Template: ComponentStory<typeof PageLayoutComponent> = (args) => (
+  <PageLayoutComponent {...args} />
+);
+
+const pageTitle = 'Incidunt ad earum';
+const pageIntro =
+  'Recusandae mollitia enim quo omnis rerum enim corporis ratione quidem. Pariatur omnis quas est ut ut numquam totam. Sunt sapiente nostrum aut sunt provident perspiciatis magni illum. Quidem nihil velit quasi fugit minima sint.';
+const pageBreadcrumb = [
+  { id: 'home', url: '#', name: 'Home' },
+  { id: 'page', url: '#', name: pageTitle },
+];
+
+/**
+ * Page Layout Stories - Single Page
+ */
+export const SinglePage = Template.bind({});
+SinglePage.args = {
+  breadcrumb: pageBreadcrumb,
+  title: pageTitle,
+  intro: pageIntro,
+  children: (
+    <>
+      <Heading level={2}>Impedit commodi rerum</Heading>
+      <p>
+        Omnis vel earum cupiditate delectus reprehenderit perferendis distinctio
+        omnis. Laudantium rem tempore eligendi porro officia est dolorum
+        assumenda. Corrupti tempore quia ab. Quidem est inventore. Autem
+        nesciunt sed rerum praesentium.
+      </p>
+      <p>
+        Illo nostrum inventore tenetur quo repellendus autem nisi nostrum
+        dolore. Et velit assumenda. Veniam harum officia et. Blanditiis et et
+        qui cum. Rerum illum quo doloribus neque non velit. Unde iusto et eaque
+        a ut.
+      </p>
+      <Heading level={2}>Et omnis ducimus</Heading>
+      <p>
+        Dolor quidem quas perferendis in nam molestiae. Accusamus quidem
+        accusantium quaerat est praesentium accusamus ab dolorem. Beatae illum
+        totam et corrupti assumenda corporis aut illo animi.
+      </p>
+      <p>
+        Ad rem soluta. Est tenetur consequatur sequi voluptates autem. Molestiae
+        in neque dignissimos. Dolorum numquam quos quam voluptas atque facilis
+        et. Accusantium fuga architecto excepturi consequatur libero est.
+      </p>
+    </>
+  ),
+  widgets: [
+    <Sharing
+      key="sidebar2-widget1"
+      data={{ excerpt: pageIntro, title: pageTitle, url: '#' }}
+      media={[
+        'diaspora',
+        'email',
+        'facebook',
+        'journal-du-hacker',
+        'linkedin',
+        'twitter',
+      ]}
+      title="Share"
+      level={2}
+      expanded={true}
+    />,
+  ],
+  withToC: true,
+};
+
+const postBreadcrumb = [
+  { id: 'home', url: '#', name: 'Home' },
+  { id: 'blog', url: '#', name: 'Blog' },
+  { id: 'post', url: '#', name: pageTitle },
+];
+
+const comments = [
+  {
+    author: {
+      avatar: 'http://placeimg.com/640/480',
+      name: 'Author 1',
+    },
+    content:
+      'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
+    id: 1,
+    publication: '2021-04-03 18:04:11',
+    // @ts-ignore - Needed because of the placeholder image.
+    unoptimized: true,
+  },
+  {
+    child: [
+      {
+        author: {
+          avatar: 'http://placeimg.com/640/480',
+          name: 'Author 4',
+        },
+        content:
+          'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
+        id: 4,
+        publication: '2021-04-03 23:04:24',
+        // @ts-ignore - Needed because of the placeholder image.
+        unoptimized: true,
+      },
+      {
+        author: {
+          avatar: 'http://placeimg.com/640/480',
+          name: 'Author 1',
+        },
+        content:
+          'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
+        id: 5,
+        publication: '2021-04-04 08:05:14',
+        // @ts-ignore - Needed because of the placeholder image.
+        unoptimized: true,
+      },
+    ],
+    author: {
+      avatar: 'http://placeimg.com/640/480',
+      name: 'Author 2',
+      url: '#',
+    },
+    content:
+      'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
+    id: 2,
+    publication: '2021-04-03 23:30:20',
+    // @ts-ignore - Needed because of the placeholder image.
+    unoptimized: true,
+  },
+  {
+    author: {
+      avatar: 'http://placeimg.com/640/480',
+      name: 'Author 3',
+    },
+    content:
+      'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
+    id: 3,
+    publication: '2021-09-13 13:24:54',
+    // @ts-ignore - Needed because of the placeholder image.
+    unoptimized: true,
+  },
+];
+
+/**
+ * Page Layout Stories - Post
+ */
+export const Post = Template.bind({});
+Post.args = {
+  breadcrumb: postBreadcrumb,
+  title: pageTitle,
+  intro: pageIntro,
+  headerMeta: {
+    publication: { name: 'Published on:', value: 'March 14th 2020' },
+    categories: {
+      name: 'Categories:',
+      value: [
+        <Link key="cat1" href="#">
+          Cat 1
+        </Link>,
+        <Link key="cat2" href="#">
+          Cat 2
+        </Link>,
+      ],
+    },
+  },
+  footerMeta: {
+    tags: {
+      name: 'Read more about:',
+      value: <ButtonLink target="#">Topic 1</ButtonLink>,
+    },
+  },
+  children: (
+    <>
+      <Heading level={2}>Impedit commodi rerum</Heading>
+      <p>
+        Omnis vel earum cupiditate delectus reprehenderit perferendis distinctio
+        omnis. Laudantium rem tempore eligendi porro officia est dolorum
+        assumenda. Corrupti tempore quia ab. Quidem est inventore. Autem
+        nesciunt sed rerum praesentium.
+      </p>
+      <p>
+        Illo nostrum inventore tenetur quo repellendus autem nisi nostrum
+        dolore. Et velit assumenda. Veniam harum officia et. Blanditiis et et
+        qui cum. Rerum illum quo doloribus neque non velit. Unde iusto et eaque
+        a ut.
+      </p>
+      <Heading level={2}>Et omnis ducimus</Heading>
+      <p>
+        Dolor quidem quas perferendis in nam molestiae. Accusamus quidem
+        accusantium quaerat est praesentium accusamus ab dolorem. Beatae illum
+        totam et corrupti assumenda corporis aut illo animi.
+      </p>
+      <p>
+        Ad rem soluta. Est tenetur consequatur sequi voluptates autem. Molestiae
+        in neque dignissimos. Dolorum numquam quos quam voluptas atque facilis
+        et. Accusantium fuga architecto excepturi consequatur libero est.
+      </p>
+    </>
+  ),
+  widgets: [
+    <Sharing
+      key="sidebar2-widget1"
+      data={{ excerpt: pageIntro, title: pageTitle, url: '#' }}
+      media={[
+        'diaspora',
+        'email',
+        'facebook',
+        'journal-du-hacker',
+        'linkedin',
+        'twitter',
+      ]}
+      title="Share"
+      level={2}
+      expanded={true}
+    />,
+  ],
+  withToC: true,
+  comments,
+  allowComments: true,
+};
+
+const postsListBreadcrumb = [
+  { id: 'home', url: '#', name: 'Home' },
+  { id: 'blog', url: '#', name: 'Blog' },
+];
+
+const posts = [
+  {
+    excerpt:
+      '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.',
+    id: 'post-1',
+    meta: {
+      publication: {
+        name: 'Published on:',
+        value: '2022-02-26T00:42:02',
+      },
+      readingTime: { name: 'Reading time:', value: '5 minutes' },
+      categories: {
+        name: 'Categories:',
+        value: [
+          <a key="cat-1" href="#">
+            Cat 1
+          </a>,
+          <a key="cat-2" href="#">
+            Cat 2
+          </a>,
+        ],
+      },
+      comments: { name: 'Comments:', value: '1 comment' },
+    },
+    title: 'Ratione velit fuga',
+    url: '#',
+    cover: {
+      alt: 'cover',
+      height: 480,
+      src: 'http://placeimg.com/640/480',
+      width: 640,
+      // @ts-ignore - Needed because of the placeholder image.
+      unoptimized: true,
+    },
+  },
+  {
+    excerpt:
+      'Illum quae asperiores quod aut necessitatibus itaque excepturi voluptas. Incidunt exercitationem ullam saepe alias consequatur sed. Quam veniam quaerat voluptatum earum quia quisquam fugiat sed perspiciatis. Et velit saepe est recusandae facilis eos eum ipsum.',
+    id: 'post-2',
+    meta: {
+      publication: {
+        name: 'Published on:',
+        value: '2022-02-20T10:40:00',
+      },
+      readingTime: { name: 'Reading time:', value: '8 minutes' },
+      categories: {
+        name: 'Categories:',
+        value: [
+          <a key="cat-2" href="#">
+            Cat 2
+          </a>,
+        ],
+      },
+      comments: { name: 'Comments:', value: '0 comments' },
+    },
+    title: 'Debitis laudantium laudantium',
+    url: '#',
+  },
+  {
+    excerpt:
+      'Sunt aperiam ut rem impedit dolor id sit. Reprehenderit ipsum iusto fugiat. Quaerat laboriosam magnam facilis. Totam sint aliquam voluptatem in quis laborum sunt eum. Enim aut debitis officiis porro iure quia nihil voluptas ipsum. Praesentium quis necessitatibus cumque quia qui velit quos dolorem.',
+    id: 'post-3',
+    meta: {
+      publication: {
+        name: 'Published on:',
+        value: '2021-12-20T15:12:02',
+      },
+      readingTime: { name: 'Reading time:', value: '3 minutes' },
+      categories: {
+        name: 'Categories:',
+        value: [
+          <a key="cat-1" href="#">
+            Cat 1
+          </a>,
+        ],
+      },
+      comments: { name: 'Comments:', value: '3 comments' },
+    },
+    title: 'Quaerat ut corporis',
+    url: '#',
+    cover: {
+      alt: 'cover',
+      height: 480,
+      src: 'http://placeimg.com/640/480',
+      width: 640,
+      // @ts-ignore - Needed because of the placeholder image.
+      unoptimized: true,
+    },
+  },
+];
+
+const blogCategories = [
+  { name: 'Cat 1', url: '#' },
+  {
+    name: 'Cat 2',
+    url: '#',
+  },
+  { name: 'Cat 3', url: '#' },
+  { name: 'Cat 4', url: '#' },
+];
+
+/**
+ * Page Layout Stories - Posts list
+ */
+export const Blog = Template.bind({});
+Blog.args = {
+  breadcrumb: postsListBreadcrumb,
+  title: 'Blog',
+  headerMeta: { total: { name: 'Total:', value: `${posts.length} posts` } },
+  children: (
+    <>
+      <PostsList posts={posts} byYear={true} />
+      <ProgressBar min={1} max={1} current={1} info="1/1 page loaded." />
+    </>
+  ),
+  widgets: [
+    <LinksListWidget
+      key="sidebar-widget1"
+      items={blogCategories}
+      title="Categories"
+      level={2}
+    />,
+  ],
+};
diff --git a/src/components/templates/page/page-layout.test.tsx b/src/components/templates/page/page-layout.test.tsx
new file mode 100644
index 0000000..b8fff6a
--- /dev/null
+++ b/src/components/templates/page/page-layout.test.tsx
@@ -0,0 +1,90 @@
+import { render, screen } from '@test-utils';
+import PageLayout from './page-layout';
+
+const title = 'Incidunt ad earum';
+const breadcrumb = [
+  { id: 'home', url: '#', name: 'Home' },
+  { id: 'page', url: '#', name: title },
+];
+const children =
+  'Reprehenderit aut quis aperiam magnam quia id. Vero enim animi placeat quia. Laborum sit odio minima. Dolores et debitis eaque iste quidem. Omnis aliquam illum porro ea non. Quaerat totam iste quos ex facilis officia accusantium.';
+
+describe('PageLayout', () => {
+  it('renders the page title', () => {
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title}>
+        {children}
+      </PageLayout>
+    );
+    expect(
+      screen.getByRole('heading', { level: 1, name: title })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the page content', () => {
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title}>
+        {children}
+      </PageLayout>
+    );
+    expect(screen.getByText(children)).toBeInTheDocument();
+  });
+
+  it('renders the breadcrumb', () => {
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title}>
+        {children}
+      </PageLayout>
+    );
+    expect(
+      screen.getByRole('navigation', { name: 'Breadcrumb' })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the table of contents', () => {
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title} withToC={true}>
+        {children}
+      </PageLayout>
+    );
+    expect(
+      screen.getByRole('heading', { level: 2, name: /Table of Contents/i })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the comment form', () => {
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title} allowComments={true}>
+        {children}
+      </PageLayout>
+    );
+    expect(
+      screen.getByRole('form', { name: /Leave a comment/i })
+    ).toBeInTheDocument();
+  });
+
+  it('renders the comments list', () => {
+    const comments = [
+      {
+        author: {
+          avatar: 'http://placeimg.com/640/480',
+          name: 'Author 1',
+        },
+        content:
+          'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
+        id: 1,
+        publication: '2021-04-03 18:04:11',
+        // @ts-ignore - Needed because of the placeholder image.
+        unoptimized: true,
+      },
+    ];
+    render(
+      <PageLayout breadcrumb={breadcrumb} title={title} comments={comments}>
+        {children}
+      </PageLayout>
+    );
+    expect(
+      screen.getByRole('heading', { level: 2, name: /Comments/i })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
new file mode 100644
index 0000000..24c4e50
--- /dev/null
+++ b/src/components/templates/page/page-layout.tsx
@@ -0,0 +1,166 @@
+import Heading from '@components/atoms/headings/heading';
+import Sidebar from '@components/atoms/layout/sidebar';
+import PageFooter, {
+  type PageFooterProps,
+} from '@components/molecules/layout/page-footer';
+import PageHeader, {
+  type PageHeaderProps,
+} from '@components/molecules/layout/page-header';
+import Breadcrumb, {
+  type BreadcrumbItem,
+} from '@components/molecules/nav/breadcrumb';
+import CommentForm from '@components/organisms/forms/comment-form';
+import CommentsList, {
+  type CommentsListProps,
+} from '@components/organisms/layout/comments-list';
+import TableOfContents from '@components/organisms/widgets/table-of-contents';
+import useIsMounted from '@utils/hooks/use-is-mounted';
+import { FC, ReactNode, useRef } from 'react';
+import { useIntl } from 'react-intl';
+import Layout, { LayoutProps } from '../layout/layout';
+import styles from './page-layout.module.scss';
+
+export type PageLayoutProps = {
+  /**
+   * True if the page accepts new comments. Default: false.
+   */
+  allowComments?: boolean;
+  /**
+   * The breadcrumb items.
+   */
+  breadcrumb: BreadcrumbItem[];
+  /**
+   * The main content of the page.
+   */
+  children: ReactNode;
+  /**
+   * The page comments
+   */
+  comments?: CommentsListProps['comments'];
+  /**
+   * The footer metadata.
+   */
+  footerMeta?: PageFooterProps['meta'];
+  /**
+   * The header metadata.
+   */
+  headerMeta?: PageHeaderProps['meta'];
+  /**
+   * The page introduction.
+   */
+  intro?: PageHeaderProps['intro'];
+  /**
+   * True if it is homepage. Default: false.
+   */
+  isHome?: LayoutProps['isHome'];
+  /**
+   * The page title.
+   */
+  title: PageHeaderProps['title'];
+  /**
+   * An array of widgets to put in the last sidebar.
+   */
+  widgets?: ReactNode[];
+  /**
+   * Show the table of contents. Default: false.
+   */
+  withToC?: boolean;
+};
+
+/**
+ * PageLayout component
+ *
+ * Render the pages layout.
+ */
+const PageLayout: FC<PageLayoutProps> = ({
+  children,
+  allowComments = false,
+  breadcrumb,
+  comments,
+  footerMeta,
+  headerMeta,
+  intro,
+  isHome = false,
+  widgets,
+  title,
+  withToC = false,
+}) => {
+  const intl = useIntl();
+  const commentsTitle = intl.formatMessage({
+    defaultMessage: 'Comments',
+    description: 'PageLayout: comments title',
+    id: '+dJU3e',
+  });
+  const commentFormTitle = intl.formatMessage({
+    defaultMessage: 'Leave a comment',
+    description: 'PageLayout: comment form title',
+    id: 'kzIYoQ',
+  });
+
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const isMounted = useIsMounted(bodyRef);
+
+  const hasComments = Array.isArray(comments) && comments.length > 0;
+  const hasCommentsSection = hasComments || allowComments;
+  const articleModifier = hasCommentsSection
+    ? 'article--has-comments'
+    : 'article--no-comments';
+
+  const saveComment = () => {
+    return null;
+  };
+
+  return (
+    <Layout
+      isHome={isHome}
+      className={`${styles.article} ${styles[articleModifier]}`}
+    >
+      <Breadcrumb
+        items={breadcrumb}
+        className={styles.breadcrumb}
+        itemClassName={styles.breadcrumb__items}
+      />
+      <PageHeader
+        title={title}
+        intro={intro}
+        meta={headerMeta}
+        className={styles.header}
+      />
+      {withToC && (
+        <Sidebar className={`${styles.sidebar} ${styles['sidebar--first']}`}>
+          {isMounted && bodyRef.current && (
+            <TableOfContents wrapper={bodyRef.current} />
+          )}
+        </Sidebar>
+      )}
+      <div ref={bodyRef} className={styles.body}>
+        {children}
+      </div>
+      <PageFooter meta={footerMeta} className={styles.footer} />
+      <Sidebar className={`${styles.sidebar} ${styles['sidebar--last']}`}>
+        {widgets}
+      </Sidebar>
+      {hasCommentsSection && (
+        <div className={styles.comments}>
+          {hasComments && (
+            <section className={styles.comments__section}>
+              <Heading level={2}>{commentsTitle}</Heading>
+              <CommentsList
+                saveComment={saveComment}
+                comments={comments}
+                depth={2}
+              />
+            </section>
+          )}
+          {allowComments && (
+            <section className={styles.comments__section}>
+              <CommentForm saveComment={saveComment} title={commentFormTitle} />
+            </section>
+          )}
+        </div>
+      )}
+    </Layout>
+  );
+};
+
+export default PageLayout;
diff --git a/src/styles/abstracts/_placeholders.scss b/src/styles/abstracts/_placeholders.scss
index d1c0a7a..18b1c03 100644
--- a/src/styles/abstracts/_placeholders.scss
+++ b/src/styles/abstracts/_placeholders.scss
@@ -1,3 +1,4 @@
 @forward "./placeholders/animations";
 @forward "./placeholders/clearfix";
+@forward "./placeholders/layout";
 @forward "./placeholders/list";
diff --git a/src/styles/abstracts/placeholders/_layout.scss b/src/styles/abstracts/placeholders/_layout.scss
new file mode 100644
index 0000000..1a28acb
--- /dev/null
+++ b/src/styles/abstracts/placeholders/_layout.scss
@@ -0,0 +1,25 @@
+@use "@styles/abstracts/mixins" as mix;
+
+%grid {
+  display: grid;
+  align-items: center;
+  grid-template-columns:
+    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 80ch)
+    var(--column-3, minmax(0, 1fr));
+  column-gap: var(--grid-gap, var(--spacing-md));
+
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      grid-template-columns:
+        minmax(0, 1fr) clamp(60ch, 60vw, 80ch)
+        var(--column-3, minmax(0, 3fr));
+      column-gap: var(--grid-gap, var(--spacing-xl));
+    }
+
+    @include mix.dimensions("lg") {
+      grid-template-columns:
+        minmax(0, 1fr) clamp(47ch, 47vw, 80ch)
+        var(--column-3, minmax(0, 1fr));
+    }
+  }
+}
diff --git a/src/utils/helpers/format.ts b/src/utils/helpers/format.ts
index dd35868..47a7b57 100644
--- a/src/utils/helpers/format.ts
+++ b/src/utils/helpers/format.ts
@@ -14,6 +14,7 @@ import {
   TopicPreview,
   Thematic,
 } from '@ts/types/taxonomies';
+import { settings } from '@utils/config';
 
 /**
  * Format a post preview from RawArticlePreview to ArticlePreview type.
@@ -269,11 +270,14 @@ export const getFormattedPost = (rawPost: RawArticle): Article => {
 
 /**
  * Converts a date to a string by using the specified locale.
- * @param {string} date The date.
- * @param {string} locale A locale.
+ * @param {string} date - The date.
+ * @param {string} [locale] - A locale.
  * @returns {string} The formatted date to locale date string.
  */
-export const getFormattedDate = (date: string, locale: string) => {
+export const getFormattedDate = (
+  date: string,
+  locale: string = settings.locales.defaultLocale
+): string => {
   const dateOptions: Intl.DateTimeFormatOptions = {
     day: 'numeric',
     month: 'long',
@@ -283,6 +287,24 @@ export const getFormattedDate = (date: string, locale: string) => {
   return new Date(date).toLocaleDateString(locale, dateOptions);
 };
 
+/**
+ * Converts a date to a time string by using the specified locale.
+ * @param {string} date - The date.
+ * @param {string} [locale] - A locale.
+ * @returns {string} The formatted time to locale date string.
+ */
+export const getFormattedTime = (
+  date: string,
+  locale: string = settings.locales.defaultLocale
+): string => {
+  const time = new Date(date).toLocaleTimeString(locale, {
+    hour: 'numeric',
+    minute: 'numeric',
+  });
+
+  return locale === 'fr' ? time.replace(':', 'h') : time;
+};
+
 /**
  * Convert an array of slugs to an array of params with slug.
  * @param {Slug} array - An array of object with slug.
diff --git a/src/utils/hooks/use-is-mounted.tsx b/src/utils/hooks/use-is-mounted.tsx
new file mode 100644
index 0000000..ca79afb
--- /dev/null
+++ b/src/utils/hooks/use-is-mounted.tsx
@@ -0,0 +1,19 @@
+import { RefObject, useEffect, useState } from 'react';
+
+/**
+ * Check if an HTML element is mounted.
+ *
+ * @param {RefObject<HTMLElement>} ref - A React reference to an HTML element.
+ * @returns {boolean} True if the HTML element is mounted.
+ */
+const useIsMounted = (ref: RefObject<HTMLElement>) => {
+  const [isMounted, setIsMounted] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (ref.current) setIsMounted(true);
+  }, [ref]);
+
+  return isMounted;
+};
+
+export default useIsMounted;
-- 
cgit v1.2.3


From c95cce04393080a52a54191cff7be8fec68af4b0 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 15 May 2022 17:45:41 +0200
Subject: chore: add Article pages

---
 src/components/atoms/layout/notice.module.scss     |   1 -
 .../organisms/forms/comment-form.stories.tsx       |  30 +--
 .../organisms/forms/comment-form.test.tsx          |   7 +-
 src/components/organisms/forms/comment-form.tsx    |  19 +-
 .../organisms/layout/comment.stories.tsx           |  39 +++-
 src/components/organisms/layout/comment.test.tsx   |   6 +-
 src/components/organisms/layout/comment.tsx        |  14 +-
 .../organisms/layout/comments-list.stories.tsx     |  30 ++-
 .../organisms/layout/comments-list.test.tsx        |   6 +-
 src/components/organisms/layout/comments-list.tsx  |  10 +-
 .../templates/page/page-layout.stories.tsx         |   6 +-
 src/components/templates/page/page-layout.tsx      |  95 +++++++-
 src/pages/article/[slug].tsx                       | 251 +++++++++++++++++++++
 src/services/graphql/api.ts                        |  52 ++++-
 src/services/graphql/comments.mutation.ts          |  30 +++
 src/services/graphql/comments.ts                   | 102 +++++++++
 16 files changed, 634 insertions(+), 64 deletions(-)
 create mode 100644 src/pages/article/[slug].tsx
 create mode 100644 src/services/graphql/comments.mutation.ts
 create mode 100644 src/services/graphql/comments.ts

(limited to 'src/components/organisms/layout/comment.stories.tsx')

diff --git a/src/components/atoms/layout/notice.module.scss b/src/components/atoms/layout/notice.module.scss
index 38ec7ee..7fd972c 100644
--- a/src/components/atoms/layout/notice.module.scss
+++ b/src/components/atoms/layout/notice.module.scss
@@ -1,7 +1,6 @@
 @use "@styles/abstracts/functions" as fun;
 
 .wrapper {
-  width: max-content;
   padding: var(--spacing-2xs) var(--spacing-xs);
   border: fun.convert-px(2) solid;
   font-weight: bold;
diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx
index f66d35c..8b11df7 100644
--- a/src/components/organisms/forms/comment-form.stories.tsx
+++ b/src/components/organisms/forms/comment-form.stories.tsx
@@ -1,13 +1,19 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import CommentForm from './comment-form';
 
+const saveComment = async () => {
+  /** Do nothing. */
+};
+
 /**
  * CommentForm - Storybook Meta
  */
 export default {
   title: 'Organisms/Forms',
   component: CommentForm,
+  args: {
+    saveComment,
+  },
   argTypes: {
     className: {
       control: {
@@ -35,6 +41,16 @@ export default {
         required: false,
       },
     },
+    parentId: {
+      control: {
+        type: null,
+      },
+      description: 'The parent id if it is a reply.',
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
     saveComment: {
       control: {
         type: null,
@@ -74,13 +90,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof CommentForm>;
 
 const Template: ComponentStory<typeof CommentForm> = (args) => (
@@ -91,8 +100,3 @@ const Template: ComponentStory<typeof CommentForm> = (args) => (
  * Forms Stories - Comment
  */
 export const Comment = Template.bind({});
-Comment.args = {
-  saveComment: (reset: () => void) => {
-    reset();
-  },
-};
diff --git a/src/components/organisms/forms/comment-form.test.tsx b/src/components/organisms/forms/comment-form.test.tsx
index 0d387b5..c67ad6b 100644
--- a/src/components/organisms/forms/comment-form.test.tsx
+++ b/src/components/organisms/forms/comment-form.test.tsx
@@ -1,17 +1,20 @@
 import { render, screen } from '@test-utils';
 import CommentForm from './comment-form';
 
+const saveComment = async () => {
+  /** Do nothing. */
+};
 const title = 'Cum voluptas voluptatibus';
 
 describe('CommentForm', () => {
   it('renders a form', () => {
-    render(<CommentForm saveComment={() => null} />);
+    render(<CommentForm saveComment={saveComment} />);
     expect(screen.getByRole('form')).toBeInTheDocument();
   });
 
   it('renders an optional title', () => {
     render(
-      <CommentForm saveComment={() => null} title={title} titleLevel={2} />
+      <CommentForm saveComment={saveComment} title={title} titleLevel={2} />
     );
     expect(
       screen.getByRole('heading', { level: 2, name: title })
diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx
index d7cb0f5..9e0abdf 100644
--- a/src/components/organisms/forms/comment-form.tsx
+++ b/src/components/organisms/forms/comment-form.tsx
@@ -7,6 +7,14 @@ import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './comment-form.module.scss';
 
+export type CommentFormData = {
+  comment: string;
+  email: string;
+  name: string;
+  parentId?: number;
+  website?: string;
+};
+
 export type CommentFormProps = {
   /**
    * Set additional classnames to the form wrapper.
@@ -16,11 +24,15 @@ export type CommentFormProps = {
    * Pass a component to print a success/error message.
    */
   Notice?: ReactNode;
+  /**
+   * The comment parent id.
+   */
+  parentId?: number;
   /**
    * A callback function to save comment. It takes a function as parameter to
    * reset the form.
    */
-  saveComment: (reset: () => void) => void;
+  saveComment: (data: CommentFormData, reset: () => void) => Promise<void>;
   /**
    * The form title.
    */
@@ -34,6 +46,7 @@ export type CommentFormProps = {
 const CommentForm: FC<CommentFormProps> = ({
   className = '',
   Notice,
+  parentId,
   saveComment,
   title,
   titleLevel = 2,
@@ -95,7 +108,9 @@ const CommentForm: FC<CommentFormProps> = ({
    */
   const submitHandler = () => {
     setIsSubmitting(true);
-    saveComment(resetForm);
+    saveComment({ comment, email, name, parentId, website }, resetForm).then(
+      () => setIsSubmitting(false)
+    );
   };
 
   return (
diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
index 3794b06..c31b77a 100644
--- a/src/components/organisms/layout/comment.stories.tsx
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -1,13 +1,19 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import CommentComponent from './comment';
 
+const saveComment = async () => {
+  /** Do nothing. */
+};
+
 /**
  * Comment - Storybook Meta
  */
 export default {
   title: 'Organisms/Layout',
   component: CommentComponent,
+  args: {
+    saveComment,
+  },
   argTypes: {
     author: {
       description: 'The author data.',
@@ -51,6 +57,29 @@ export default {
         required: true,
       },
     },
+    Notice: {
+      control: {
+        type: null,
+      },
+      description: 'A component to display a success or error message.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'function',
+        required: false,
+      },
+    },
+    parentId: {
+      control: {
+        type: null,
+      },
+      description: 'The parent id if it is a reply.',
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
     publication: {
       description: 'The publication date.',
       type: {
@@ -73,13 +102,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof CommentComponent>;
 
 const Template: ComponentStory<typeof CommentComponent> = (args) => (
@@ -100,7 +122,6 @@ Comment.args = {
     'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.',
   id: 2,
   publication: '2021-04-03 23:04:24',
-  saveComment: () => null,
   // @ts-ignore - Needed because of the placeholder image.
   unoptimized: true,
 };
diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx
index 4961722..02a51dc 100644
--- a/src/components/organisms/layout/comment.test.tsx
+++ b/src/components/organisms/layout/comment.test.tsx
@@ -11,13 +11,15 @@ const content =
   'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.';
 const publication = '2021-04-03 23:04:24';
 const id = 5;
-
+const saveComment = async () => {
+  /** Do nothing. */
+};
 const data = {
   author,
   content,
   id,
   publication,
-  saveComment: () => null,
+  saveComment,
 };
 
 const formattedDate = getFormattedDate(publication);
diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
index 248efc2..6df393b 100644
--- a/src/components/organisms/layout/comment.tsx
+++ b/src/components/organisms/layout/comment.tsx
@@ -25,7 +25,7 @@ export type CommentAuthor = {
   url?: string;
 };
 
-export type CommentProps = {
+export type CommentProps = Pick<CommentFormProps, 'Notice' | 'saveComment'> & {
   /**
    * The comment author data.
    */
@@ -50,10 +50,6 @@ export type CommentProps = {
    * The comment date and time separated with a space.
    */
   publication: string;
-  /**
-   * A callback function to save comment form data.
-   */
-  saveComment: CommentFormProps['saveComment'];
 };
 
 /**
@@ -66,6 +62,7 @@ const Comment: FC<CommentProps> = ({
   canReply = true,
   content,
   id,
+  Notice,
   parentId,
   publication,
   saveComment,
@@ -169,7 +166,10 @@ const Comment: FC<CommentProps> = ({
           className={styles.date}
           groupClassName={styles.date__item}
         />
-        <div className={styles.body}>{content}</div>
+        <div
+          className={styles.body}
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
         <footer className={styles.footer}>
           {canReply && (
             <Button kind="tertiary" onClick={() => setIsReplying(!isReplying)}>
@@ -180,6 +180,8 @@ const Comment: FC<CommentProps> = ({
       </article>
       {isReplying && (
         <CommentForm
+          Notice={Notice}
+          parentId={id as number}
           saveComment={saveComment}
           title={formTitle}
           className={`${styles.wrapper} ${styles['wrapper--form']}`}
diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx
index 9edf368..4d95205 100644
--- a/src/components/organisms/layout/comments-list.stories.tsx
+++ b/src/components/organisms/layout/comments-list.stories.tsx
@@ -1,13 +1,19 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import CommentsListComponent, { Comment } from './comments-list';
 
+const saveComment = async () => {
+  /** Do nothing. */
+};
+
 /**
  * CommentsList - Storybook Meta
  */
 export default {
   title: 'Organisms/Layout/CommentsList',
   component: CommentsListComponent,
+  args: {
+    saveComment,
+  },
   argTypes: {
     comments: {
       control: {
@@ -30,6 +36,19 @@ export default {
         required: true,
       },
     },
+    Notice: {
+      control: {
+        type: null,
+      },
+      description: 'A component to display a success or error message.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'function',
+        required: false,
+      },
+    },
     saveComment: {
       control: {
         type: null,
@@ -44,13 +63,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof CommentsListComponent>;
 
 const Template: ComponentStory<typeof CommentsListComponent> = (args) => (
@@ -130,7 +142,6 @@ export const WithoutChildComments = Template.bind({});
 WithoutChildComments.args = {
   comments,
   depth: 0,
-  saveComment: () => null,
 };
 
 /**
@@ -140,5 +151,4 @@ export const WithChildComments = Template.bind({});
 WithChildComments.args = {
   comments,
   depth: 1,
-  saveComment: () => null,
 };
diff --git a/src/components/organisms/layout/comments-list.test.tsx b/src/components/organisms/layout/comments-list.test.tsx
index 542b1df..e135ec9 100644
--- a/src/components/organisms/layout/comments-list.test.tsx
+++ b/src/components/organisms/layout/comments-list.test.tsx
@@ -57,10 +57,14 @@ const comments: Comment[] = [
   },
 ];
 
+const saveComment = async () => {
+  /** Do nothing. */
+};
+
 describe('CommentsList', () => {
   it('renders a comments list', () => {
     render(
-      <CommentsList comments={comments} depth={1} saveComment={() => null} />
+      <CommentsList comments={comments} depth={1} saveComment={saveComment} />
     );
   });
 });
diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx
index 03f508e..f04354c 100644
--- a/src/components/organisms/layout/comments-list.tsx
+++ b/src/components/organisms/layout/comments-list.tsx
@@ -8,7 +8,7 @@ export type Comment = Omit<CommentProps, 'canReply' | 'saveComment'> & {
   child?: Comment[];
 };
 
-export type CommentsListProps = {
+export type CommentsListProps = Pick<CommentProps, 'Notice' | 'saveComment'> & {
   /**
    * An array of comments.
    */
@@ -17,10 +17,6 @@ export type CommentsListProps = {
    * The maximum depth. Use `0` to not display nested comments.
    */
   depth: 0 | 1 | 2 | 3 | 4;
-  /**
-   * A callback function to save comment form data.
-   */
-  saveComment: CommentProps['saveComment'];
 };
 
 /**
@@ -31,6 +27,7 @@ export type CommentsListProps = {
 const CommentsList: FC<CommentsListProps> = ({
   comments,
   depth,
+  Notice,
   saveComment,
 }) => {
   /**
@@ -48,8 +45,9 @@ const CommentsList: FC<CommentsListProps> = ({
     return commentsList.map(({ child, ...comment }) => (
       <li key={comment.id} className={styles.item}>
         <SingleComment
-          saveComment={saveComment}
           canReply={!isLastLevel}
+          Notice={Notice}
+          saveComment={saveComment}
           {...comment}
         />
         {child && !isLastLevel && (
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 480c76e..8e518aa 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -85,12 +85,12 @@ export default {
     },
     id: {
       control: {
-        type: 'text',
+        type: 'number',
       },
       description: 'The page id.',
       type: {
-        name: 'string',
-        required: true,
+        name: 'number',
+        required: false,
       },
     },
     intro: {
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index ac021ba..045b8c1 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -1,4 +1,5 @@
 import Heading from '@components/atoms/headings/heading';
+import Notice, { type NoticeKind } from '@components/atoms/layout/notice';
 import Sidebar from '@components/atoms/layout/sidebar';
 import PageFooter, {
   type PageFooterProps,
@@ -9,15 +10,19 @@ import PageHeader, {
 import Breadcrumb, {
   type BreadcrumbItem,
 } from '@components/molecules/nav/breadcrumb';
-import CommentForm from '@components/organisms/forms/comment-form';
+import CommentForm, {
+  type CommentFormProps,
+} from '@components/organisms/forms/comment-form';
 import CommentsList, {
   type CommentsListProps,
 } from '@components/organisms/layout/comments-list';
 import TableOfContents from '@components/organisms/widgets/table-of-contents';
+import { type SendCommentVars } from '@services/graphql/api';
+import { sendComment } from '@services/graphql/comments';
 import useIsMounted from '@utils/hooks/use-is-mounted';
-import { FC, ReactNode, useRef } from 'react';
+import { FC, ReactNode, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import Layout, { LayoutProps } from '../layout/layout';
+import Layout, { type LayoutProps } from '../layout/layout';
 import styles from './page-layout.module.scss';
 
 export type PageLayoutProps = {
@@ -45,6 +50,10 @@ export type PageLayoutProps = {
    * The header metadata.
    */
   headerMeta?: PageHeaderProps['meta'];
+  /**
+   * The page id.
+   */
+  id?: number;
   /**
    * The page introduction.
    */
@@ -79,6 +88,7 @@ const PageLayout: FC<PageLayoutProps> = ({
   comments,
   footerMeta,
   headerMeta,
+  id,
   intro,
   isHome = false,
   widgets,
@@ -106,8 +116,56 @@ const PageLayout: FC<PageLayoutProps> = ({
     ? 'article--has-comments'
     : 'article--no-comments';
 
-  const saveComment = () => {
-    return null;
+  const [status, setStatus] = useState<NoticeKind>('info');
+  const [statusMessage, setStatusMessage] = useState<string>('');
+  const isReplyRef = useRef<boolean>(false);
+
+  const saveComment: CommentFormProps['saveComment'] = async (data, reset) => {
+    if (!id) throw new Error('Page id missing. Cannot save comment.');
+
+    const { comment: commentBody, email, name, parentId, website } = data;
+    const commentData: SendCommentVars = {
+      author: name,
+      authorEmail: email,
+      authorUrl: website || '',
+      clientMutationId: 'contact',
+      commentOn: id,
+      content: commentBody,
+      parent: parentId,
+    };
+    const { comment, success } = await sendComment(commentData);
+
+    isReplyRef.current = !!parentId;
+
+    if (success) {
+      setStatus('success');
+      const successPrefix = intl.formatMessage({
+        defaultMessage: 'Thanks, your comment was successfully sent.',
+        description: 'PageLayout: comment form success message',
+        id: 'B290Ph',
+      });
+      const successMessage = comment?.approved
+        ? intl.formatMessage({
+            defaultMessage: 'It has been approved.',
+            id: 'g3+Ahv',
+            description: 'PageLayout: comment approved.',
+          })
+        : intl.formatMessage({
+            defaultMessage: 'It is now awaiting moderation.',
+            id: 'Vmj5cw',
+            description: 'PageLayout: comment awaiting moderation',
+          });
+      setStatusMessage(`${successPrefix} ${successMessage}`);
+      reset();
+    } else {
+      const error = intl.formatMessage({
+        defaultMessage: 'An error occurred:',
+        description: 'PageLayout: comment form error message',
+        id: 'fkcTGp',
+      });
+      setStatus('error');
+      setStatusMessage(error);
+    }
   };
 
   return (
@@ -154,15 +212,36 @@ const PageLayout: FC<PageLayoutProps> = ({
             <section className={styles.comments__section}>
               <Heading level={2}>{commentsTitle}</Heading>
               <CommentsList
-                saveComment={saveComment}
                 comments={comments}
-                depth={2}
+                depth={1}
+                Notice={
+                  isReplyRef.current === true ? (
+                    <Notice
+                      kind={status}
+                      message={statusMessage}
+                      className={styles.notice}
+                    />
+                  ) : undefined
+                }
+                saveComment={saveComment}
               />
             </section>
           )}
           {allowComments && (
             <section className={styles.comments__section}>
-              <CommentForm saveComment={saveComment} title={commentFormTitle} />
+              <CommentForm
+                saveComment={saveComment}
+                title={commentFormTitle}
+                Notice={
+                  isReplyRef.current === false ? (
+                    <Notice
+                      kind={status}
+                      message={statusMessage}
+                      className={styles.notice}
+                    />
+                  ) : undefined
+                }
+              />
             </section>
           )}
         </div>
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
new file mode 100644
index 0000000..6a47c16
--- /dev/null
+++ b/src/pages/article/[slug].tsx
@@ -0,0 +1,251 @@
+import ButtonLink from '@components/atoms/buttons/button-link';
+import Link from '@components/atoms/links/link';
+import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import Sharing from '@components/organisms/widgets/sharing';
+import PageLayout, {
+  type PageLayoutProps,
+} from '@components/templates/page/page-layout';
+import {
+  getAllArticlesSlugs,
+  getArticleBySlug,
+} from '@services/graphql/articles';
+import { getPostComments } from '@services/graphql/comments';
+import { type Article, type Comment } from '@ts/types/app';
+import { loadTranslation, type Messages } from '@utils/helpers/i18n';
+import useSettings from '@utils/hooks/use-settings';
+import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { ParsedUrlQuery } from 'querystring';
+import { useIntl } from 'react-intl';
+import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts';
+import useSWR from 'swr';
+
+type ArticlePageProps = {
+  comments: Comment[];
+  post: Article;
+  translation: Messages;
+};
+
+/**
+ * Article page.
+ */
+const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
+  const { content, id, intro, meta, slug, title } = post;
+  const { author, commentsCount, cover, dates, seo, thematics, topics } = meta;
+  const { data } = useSWR(() => id, getPostComments, {
+    fallbackData: comments,
+  });
+  const intl = useIntl();
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const blogLabel = intl.formatMessage({
+    defaultMessage: 'Blog',
+    description: 'Breadcrumb: blog label',
+    id: 'Es52wh',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'blog', name: blogLabel, url: '/blog' },
+    { id: 'article', name: title, url: `/article/${slug}` },
+  ];
+
+  const headerMeta: PageLayoutProps['headerMeta'] = {
+    author: author?.name,
+    publication: { date: dates.publication },
+    update: dates.update ? { date: dates.update } : undefined,
+    thematics:
+      thematics &&
+      thematics.map((thematic) => (
+        <Link key={thematic.id} href={`/thematique/${thematic.slug}`}>
+          {thematic.name}
+        </Link>
+      )),
+  };
+
+  const footerMeta: PageLayoutProps['footerMeta'] = {
+    topics:
+      topics &&
+      topics.map((topic) => {
+        return (
+          <ButtonLink key={topic.id} target={`/sujet/${topic.slug}`}>
+            {topic.name}
+          </ButtonLink>
+        );
+      }),
+  };
+
+  const { website } = useSettings();
+  const { asPath } = useRouter();
+  const pageUrl = `${website.url}${asPath}`;
+  const pagePublicationDate = new Date(dates.publication);
+  const pageUpdateDate = dates.update ? new Date(dates.update) : undefined;
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    lastReviewed: dates.update,
+    name: seo.title,
+    description: seo.description,
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${pageUrl}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const blogSchema: Blog = {
+    '@id': `${website.url}/#blog`,
+    '@type': 'Blog',
+    blogPost: { '@id': `${website.url}/#article` },
+    isPartOf: {
+      '@id': `${pageUrl}`,
+    },
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+  };
+
+  const blogPostSchema: BlogPosting = {
+    '@id': `${website.url}/#article`,
+    '@type': 'BlogPosting',
+    name: title,
+    description: intro,
+    articleBody: content,
+    author: { '@id': `${website.url}/#branding` },
+    commentCount: commentsCount,
+    copyrightYear: pagePublicationDate.getFullYear(),
+    creator: { '@id': `${website.url}/#branding` },
+    dateCreated: pagePublicationDate.toISOString(),
+    dateModified: pageUpdateDate && pageUpdateDate.toISOString(),
+    datePublished: pagePublicationDate.toISOString(),
+    discussionUrl: `${pageUrl}/#comments`,
+    editor: { '@id': `${website.url}/#branding` },
+    headline: title,
+    image: cover?.src,
+    inLanguage: website.locales.default,
+    isPartOf: {
+      '@id': `${website.url}/blog`,
+    },
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+    thumbnailUrl: cover?.src,
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, blogSchema, blogPostSchema],
+  };
+
+  /**
+   * Convert the comments list to the right format.
+   *
+   * @param {Comment[]} list - The comments list.
+   * @returns {PageLayoutProps['comments']} - The formatted comments list.
+   */
+  const getCommentsList = (list: Comment[]): PageLayoutProps['comments'] => {
+    return list.map((comment) => {
+      const {
+        content: commentBody,
+        id: commentId,
+        meta: commentMeta,
+        parentId,
+        replies,
+      } = comment;
+      const { author: commentAuthor, date } = commentMeta;
+      const { name, avatar, website: authorUrl } = commentAuthor;
+
+      return {
+        author: { name, avatar: avatar!.src, url: authorUrl },
+        content: commentBody,
+        id: commentId,
+        publication: date,
+        child: getCommentsList(replies),
+        parentId,
+      };
+    });
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{seo.title}</title>
+        <meta name="description" content={seo.description} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={intro} />
+      </Head>
+      <Script
+        id="schema-project"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <PageLayout
+        allowComments={true}
+        breadcrumb={breadcrumb}
+        comments={data && getCommentsList(data)}
+        footerMeta={footerMeta}
+        headerMeta={headerMeta}
+        id={id as number}
+        intro={intro}
+        title={title}
+        withToC={true}
+        widgets={[
+          <Sharing
+            key="sharing-widget"
+            data={{ excerpt: intro, title, url: pageUrl }}
+            media={[
+              'diaspora',
+              'email',
+              'facebook',
+              'journal-du-hacker',
+              'linkedin',
+              'twitter',
+            ]}
+          />,
+        ]}
+      >
+        {content}
+      </PageLayout>
+    </>
+  );
+};
+
+interface PostParams extends ParsedUrlQuery {
+  slug: string;
+}
+
+export const getStaticProps: GetStaticProps<ArticlePageProps> = async ({
+  locale,
+  params,
+}) => {
+  const post = await getArticleBySlug(params!.slug as PostParams['slug']);
+  const comments = await getPostComments(post.id as number);
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      comments: JSON.parse(JSON.stringify(comments)),
+      post: JSON.parse(JSON.stringify(post)),
+      translation,
+    },
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const slugs = await getAllArticlesSlugs();
+  const paths = slugs.map((slug) => {
+    return { params: { slug } };
+  });
+
+  return {
+    paths,
+    fallback: true,
+  };
+};
+
+export default ArticlePage;
diff --git a/src/services/graphql/api.ts b/src/services/graphql/api.ts
index 171ab23..9f68ddc 100644
--- a/src/services/graphql/api.ts
+++ b/src/services/graphql/api.ts
@@ -6,6 +6,7 @@ import {
   articlesSlugQuery,
   totalArticlesQuery,
 } from './articles.query';
+import { sendCommentMutation } from './comments.mutation';
 import { commentsQuery } from './comments.query';
 import { sendMailMutation } from './contact.mutation';
 import {
@@ -21,7 +22,7 @@ import {
   totalTopicsQuery,
 } from './topics.query';
 
-export type Mutations = typeof sendMailMutation;
+export type Mutations = typeof sendMailMutation | typeof sendCommentMutation;
 
 export type Queries =
   | typeof articlesQuery
@@ -51,6 +52,10 @@ export type CommentsResponse<T> = {
   comments: T;
 };
 
+export type SendCommentResponse<T> = {
+  createComment: T;
+};
+
 export type SendMailResponse<T> = {
   sendEmail: T;
 };
@@ -101,6 +106,7 @@ export type ResponseMap<T> = {
   [articlesQuery]: ArticlesResponse<EdgesResponse<T>>;
   [articlesSlugQuery]: ArticlesResponse<EdgesResponse<T>>;
   [commentsQuery]: CommentsResponse<NodesResponse<T>>;
+  [sendCommentMutation]: SendCommentResponse<T>;
   [sendMailMutation]: SendMailResponse<T>;
   [thematicBySlugQuery]: ThematicResponse<T>;
   [thematicsListQuery]: ThematicsResponse<EdgesResponse<T>>;
@@ -154,10 +160,53 @@ export type SearchVar = {
   search?: string;
 };
 
+export type SendCommentVars = {
+  /**
+   * The author name.
+   */
+  author: string;
+  /**
+   * The author e-mail address.
+   */
+  authorEmail: string;
+  /**
+   * The author website.
+   */
+  authorUrl: string;
+  /**
+   * A mutation id.
+   */
+  clientMutationId: string;
+  /**
+   * A post or page id.
+   */
+  commentOn: number;
+  /**
+   * The comment body.
+   */
+  content: string;
+  /**
+   * The comment parent.
+   */
+  parent?: number;
+};
+
 export type SendMailVars = {
+  /**
+   * The mail body.
+   */
   body: string;
+  /**
+   * A mutation id.
+   */
   clientMutationId: string;
+  /**
+   * The reply to e-mail address.
+   */
   replyTo: string;
+  /**
+   * The mail subject.
+   */
   subject: string;
 };
 
@@ -167,6 +216,7 @@ export type VariablesMap = {
   [articlesQuery]: EdgesVars;
   [articlesSlugQuery]: EdgesVars;
   [commentsQuery]: ByContentIdVar;
+  [sendCommentMutation]: SendCommentVars;
   [sendMailMutation]: SendMailVars;
   [thematicBySlugQuery]: BySlugVar;
   [thematicsListQuery]: EdgesVars;
diff --git a/src/services/graphql/comments.mutation.ts b/src/services/graphql/comments.mutation.ts
new file mode 100644
index 0000000..f52c7e9
--- /dev/null
+++ b/src/services/graphql/comments.mutation.ts
@@ -0,0 +1,30 @@
+/**
+ * Send comment mutation.
+ */
+export const sendCommentMutation = `mutation CreateComment(
+  $author: String!
+  $authorEmail: String!
+  $authorUrl: String!
+  $content: String!
+  $parent: ID = null
+  $commentOn: Int!
+  $clientMutationId: String!
+) {
+  createComment(
+    input: {
+      author: $author
+      authorEmail: $authorEmail
+      authorUrl: $authorUrl
+      content: $content
+      parent: $parent
+      commentOn: $commentOn
+      clientMutationId: $clientMutationId
+    }
+  ) {
+    clientMutationId
+    success
+    comment {
+      approved
+    }
+  }
+}`;
diff --git a/src/services/graphql/comments.ts b/src/services/graphql/comments.ts
new file mode 100644
index 0000000..28ddfd0
--- /dev/null
+++ b/src/services/graphql/comments.ts
@@ -0,0 +1,102 @@
+import { Comment } from '@ts/types/app';
+import { RawComment } from '@ts/types/raw-data';
+import { getAuthorFromRawData } from '@utils/helpers/author';
+import { fetchAPI, getAPIUrl, SendCommentVars } from './api';
+import { sendCommentMutation } from './comments.mutation';
+import { commentsQuery } from './comments.query';
+
+/**
+ * Create a comments tree with replies.
+ *
+ * @param {Comment[]} comments - A flatten comments list.
+ * @returns {Comment[]} An array of comments with replies.
+ */
+export const buildCommentsTree = (comments: Comment[]): Comment[] => {
+  type CommentsHashTable = {
+    [key: string]: Comment;
+  };
+
+  const hashTable: CommentsHashTable = Object.create(null);
+  const commentsTree: Comment[] = [];
+
+  comments.forEach(
+    (comment) => (hashTable[comment.id] = { ...comment, replies: [] })
+  );
+
+  comments.forEach((comment) => {
+    if (!comment.parentId) {
+      commentsTree.push(hashTable[comment.id]);
+    } else {
+      hashTable[comment.parentId].replies.push(hashTable[comment.id]);
+    }
+  });
+
+  return commentsTree;
+};
+
+/**
+ * Convert a comment from RawComment to Comment type.
+ *
+ * @param {RawComment} comment - A raw comment.
+ * @returns {Comment} A formatted comment.
+ */
+export const getCommentFromRawData = (comment: RawComment): Comment => {
+  const { author, databaseId, date, parentDatabaseId, ...data } = comment;
+
+  return {
+    id: databaseId,
+    meta: {
+      author: getAuthorFromRawData(author.node, 'comment'),
+      date,
+    },
+    parentId: parentDatabaseId,
+    replies: [],
+    ...data,
+  };
+};
+
+/**
+ * Retrieve a comments list by post id.
+ *
+ * @param {number} id - A post id.
+ * @returns {Promise<Comment[]>} The comments list.
+ */
+export const getPostComments = async (id: number): Promise<Comment[]> => {
+  const response = await fetchAPI<RawComment, typeof commentsQuery>({
+    api: getAPIUrl(),
+    query: commentsQuery,
+    variables: { contentId: id },
+  });
+
+  const comments = response.comments.nodes.map((comment) =>
+    getCommentFromRawData(comment)
+  );
+
+  return buildCommentsTree(comments);
+};
+
+export type SentComment = {
+  clientMutationId: string;
+  success: boolean;
+  comment: {
+    approved: boolean;
+  } | null;
+};
+
+/**
+ * Send a comment using GraphQL API.
+ *
+ * @param {SendCommentVars} data - The comment data.
+ * @returns {Promise<SentEmail>} The mutation response.
+ */
+export const sendComment = async (
+  data: SendCommentVars
+): Promise<SentComment> => {
+  const response = await fetchAPI<SentComment, typeof sendCommentMutation>({
+    api: getAPIUrl(),
+    query: sendCommentMutation,
+    variables: { ...data },
+  });
+
+  return response.createComment;
+};
-- 
cgit v1.2.3


From 4581c262ca06704baaa3c0a172d509207f41f5c3 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 21 May 2022 18:42:19 +0200
Subject: chore: complete Storybook stories

---
 .../atoms/buttons/button-link.stories.tsx          | 14 ++++++
 src/components/atoms/icons/cc-by-sa.stories.tsx    |  8 ----
 src/components/atoms/layout/copyright.stories.tsx  |  8 ----
 src/components/atoms/layout/sidebar.stories.tsx    |  8 ----
 .../atoms/links/sharing-link.stories.tsx           |  5 +--
 .../atoms/lists/description-list-item.stories.tsx  |  2 +-
 src/components/atoms/lists/list.stories.tsx        | 13 ++++++
 src/components/atoms/loaders/spinner.stories.tsx   |  8 ----
 .../molecules/buttons/back-to-top.stories.tsx      |  8 ----
 .../molecules/buttons/heading-button.stories.tsx   |  1 +
 .../molecules/buttons/help-button.stories.tsx      |  8 ----
 src/components/molecules/buttons/help-button.tsx   | 11 ++---
 .../molecules/forms/labelled-field.stories.tsx     |  1 +
 .../forms/select-with-tooltip.stories.tsx          |  8 ----
 .../molecules/images/responsive-image.stories.tsx  | 13 ++++++
 .../molecules/layout/branding.stories.tsx          |  9 +---
 src/components/molecules/layout/code.stories.tsx   |  8 ----
 src/components/molecules/layout/code.tsx           | 36 ++--------------
 src/components/molecules/layout/meta.stories.tsx   | 34 +++++++--------
 src/components/molecules/layout/widget.stories.tsx | 50 +++++++++++++---------
 src/components/molecules/modals/modal.stories.tsx  | 13 ++++++
 .../molecules/nav/breadcrumb.stories.tsx           |  8 ----
 src/components/molecules/nav/nav.stories.tsx       |  8 ----
 .../molecules/nav/pagination.stories.tsx           | 12 ++----
 .../organisms/forms/comment-form.stories.tsx       | 21 +++++++++
 .../organisms/forms/contact-form.stories.tsx       | 11 ++---
 .../organisms/forms/search-form.stories.tsx        | 10 +++++
 .../organisms/forms/settings-form.stories.tsx      | 20 +++++++++
 .../organisms/layout/comment.stories.tsx           |  1 +
 .../organisms/layout/comments-list.stories.tsx     |  4 +-
 src/components/organisms/layout/header.stories.tsx | 10 +++++
 .../organisms/layout/posts-list.stories.tsx        | 44 +++++++++++++++++++
 .../organisms/modals/search-modal.stories.tsx      | 10 +++++
 .../organisms/modals/settings-modal.stories.tsx    | 20 +++++++++
 .../organisms/toolbar/main-nav.stories.tsx         | 11 ++---
 .../organisms/toolbar/search.stories.tsx           | 13 ++++++
 .../organisms/toolbar/settings.stories.tsx         |  3 ++
 src/components/organisms/toolbar/settings.tsx      |  9 +---
 .../organisms/toolbar/toolbar.stories.tsx          | 10 +++++
 .../organisms/widgets/image-widget.stories.tsx     | 21 +++++----
 .../widgets/links-list-widget.stories.tsx          | 21 +++++----
 .../organisms/widgets/social-media.stories.tsx     |  8 ----
 .../widgets/table-of-contents.stories.tsx          |  8 ----
 src/components/templates/layout/layout.stories.tsx | 26 +++++++++++
 .../templates/page/page-layout.stories.tsx         | 24 +++++++++++
 45 files changed, 362 insertions(+), 237 deletions(-)

(limited to 'src/components/organisms/layout/comment.stories.tsx')

diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx
index 2e1c040..d06aff3 100644
--- a/src/components/atoms/buttons/button-link.stories.tsx
+++ b/src/components/atoms/buttons/button-link.stories.tsx
@@ -47,6 +47,20 @@ export default {
         required: false,
       },
     },
+    external: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the link is an external link.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
     kind: {
       control: {
         type: 'select',
diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx
index f2bc8f0..4229725 100644
--- a/src/components/atoms/icons/cc-by-sa.stories.tsx
+++ b/src/components/atoms/icons/cc-by-sa.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import CCBySAIcon from './cc-by-sa';
 
 /**
@@ -23,13 +22,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof CCBySAIcon>;
 
 const Template: ComponentStory<typeof CCBySAIcon> = (args) => (
diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx
index b988165..612b114 100644
--- a/src/components/atoms/layout/copyright.stories.tsx
+++ b/src/components/atoms/layout/copyright.stories.tsx
@@ -1,6 +1,5 @@
 import CCBySA from '@components/atoms/icons/cc-by-sa';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import CopyrightComponent from './copyright';
 
 /**
@@ -39,13 +38,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof CopyrightComponent>;
 
 const Template: ComponentStory<typeof CopyrightComponent> = (args) => (
diff --git a/src/components/atoms/layout/sidebar.stories.tsx b/src/components/atoms/layout/sidebar.stories.tsx
index 175af94..6876f95 100644
--- a/src/components/atoms/layout/sidebar.stories.tsx
+++ b/src/components/atoms/layout/sidebar.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SidebarComponent from './sidebar';
 
 /**
@@ -46,13 +45,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SidebarComponent>;
 
 const Template: ComponentStory<typeof SidebarComponent> = (args) => (
diff --git a/src/components/atoms/links/sharing-link.stories.tsx b/src/components/atoms/links/sharing-link.stories.tsx
index c91e938..e6bd11b 100644
--- a/src/components/atoms/links/sharing-link.stories.tsx
+++ b/src/components/atoms/links/sharing-link.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SharingLinkComponent from './sharing-link';
 
 /**
@@ -41,9 +40,7 @@ export default {
 } as ComponentMeta<typeof SharingLinkComponent>;
 
 const Template: ComponentStory<typeof SharingLinkComponent> = (args) => (
-  <IntlProvider locale="en">
-    <SharingLinkComponent {...args} />
-  </IntlProvider>
+  <SharingLinkComponent {...args} />
 );
 
 /**
diff --git a/src/components/atoms/lists/description-list-item.stories.tsx b/src/components/atoms/lists/description-list-item.stories.tsx
index e05493c..c7beb0d 100644
--- a/src/components/atoms/lists/description-list-item.stories.tsx
+++ b/src/components/atoms/lists/description-list-item.stories.tsx
@@ -52,7 +52,7 @@ export default {
       description: 'The item layout.',
       options: ['inline', 'inline-values', 'stacked'],
       table: {
-        category: 'Styles',
+        category: 'Options',
         defaultValue: { summary: 'stacked' },
       },
       type: {
diff --git a/src/components/atoms/lists/list.stories.tsx b/src/components/atoms/lists/list.stories.tsx
index 54fdd3a..eac3cd3 100644
--- a/src/components/atoms/lists/list.stories.tsx
+++ b/src/components/atoms/lists/list.stories.tsx
@@ -35,6 +35,19 @@ export default {
         value: {},
       },
     },
+    itemsClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the list items.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     kind: {
       control: {
         type: 'select',
diff --git a/src/components/atoms/loaders/spinner.stories.tsx b/src/components/atoms/loaders/spinner.stories.tsx
index dc577dc..1792c6c 100644
--- a/src/components/atoms/loaders/spinner.stories.tsx
+++ b/src/components/atoms/loaders/spinner.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SpinnerComponent from './spinner';
 
 /**
@@ -23,13 +22,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SpinnerComponent>;
 
 const Template: ComponentStory<typeof SpinnerComponent> = (args) => (
diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx
index 7d4bc39..a338b8b 100644
--- a/src/components/molecules/buttons/back-to-top.stories.tsx
+++ b/src/components/molecules/buttons/back-to-top.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import BackToTopComponent from './back-to-top';
 
 /**
@@ -33,13 +32,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof BackToTopComponent>;
 
 const Template: ComponentStory<typeof BackToTopComponent> = (args) => (
diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx
index d1b5ed4..59f7be9 100644
--- a/src/components/molecules/buttons/heading-button.stories.tsx
+++ b/src/components/molecules/buttons/heading-button.stories.tsx
@@ -1,3 +1,4 @@
+import headingStories from '@components/atoms/headings/heading.stories';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
 import HeadingButtonComponent from './heading-button';
diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx
index cfc603e..4968b27 100644
--- a/src/components/molecules/buttons/help-button.stories.tsx
+++ b/src/components/molecules/buttons/help-button.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import HelpButtonComponent from './help-button';
 
 /**
@@ -36,13 +35,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof HelpButtonComponent>;
 
 const Template: ComponentStory<typeof HelpButtonComponent> = (args) => (
diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index e351453..ccf1ebd 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -3,12 +3,7 @@ import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './help-button.module.scss';
 
-export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & {
-  /**
-   * Set additional classnames to the button wrapper.
-   */
-  className?: string;
-};
+export type HelpButtonProps = Pick<ButtonProps, 'className' | 'onClick'>;
 
 /**
  * HelpButton component
@@ -18,7 +13,7 @@ export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & {
 const HelpButton: ForwardRefRenderFunction<
   HTMLButtonElement,
   HelpButtonProps
-> = ({ className = '', onClick }, ref) => {
+> = ({ className = '', ...props }, ref) => {
   const intl = useIntl();
   const text = intl.formatMessage({
     defaultMessage: 'Help',
@@ -29,9 +24,9 @@ const HelpButton: ForwardRefRenderFunction<
   return (
     <Button
       className={`${styles.btn} ${className}`}
-      onClick={onClick}
       ref={ref}
       shape="circle"
+      {...props}
     >
       <span className="screen-reader-text">{text}</span>
       <span className={styles.icon}>?</span>
diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx
index 56eef00..795e785 100644
--- a/src/components/molecules/forms/labelled-field.stories.tsx
+++ b/src/components/molecules/forms/labelled-field.stories.tsx
@@ -10,6 +10,7 @@ export default {
   component: LabelledField,
   args: {
     disabled: false,
+    hideLabel: false,
     labelPosition: 'top',
     required: false,
   },
diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx
index d757b2b..ddf5d4c 100644
--- a/src/components/molecules/forms/select-with-tooltip.stories.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx
@@ -1,6 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import { IntlProvider } from 'react-intl';
 import SelectWithTooltip from './select-with-tooltip';
 
 /**
@@ -178,13 +177,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SelectWithTooltip>;
 
 const selectOptions = [
diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
index 4294208..ca69d4f 100644
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ b/src/components/molecules/images/responsive-image.stories.tsx
@@ -34,6 +34,19 @@ export default {
         required: false,
       },
     },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the image wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     height: {
       control: {
         type: 'number',
diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
index 1637c99..d2e0694 100644
--- a/src/components/molecules/layout/branding.stories.tsx
+++ b/src/components/molecules/layout/branding.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import Branding from './branding';
 
 /**
@@ -10,6 +9,7 @@ export default {
   component: Branding,
   args: {
     isHome: false,
+    withLink: false,
   },
   argTypes: {
     baseline: {
@@ -72,13 +72,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof Branding>;
 
 const Template: ComponentStory<typeof Branding> = (args) => (
diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx
index a2a6b2c..ac0e98f 100644
--- a/src/components/molecules/layout/code.stories.tsx
+++ b/src/components/molecules/layout/code.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import CodeComponent from './code';
 
 /**
@@ -70,13 +69,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof CodeComponent>;
 
 const Template: ComponentStory<typeof CodeComponent> = (args) => (
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index f5b60b9..30351b9 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -1,38 +1,10 @@
-import usePrism, { OptionalPrismPlugin } from '@utils/hooks/use-prism';
+import usePrism, {
+  type OptionalPrismPlugin,
+  type PrismLanguage,
+} from '@utils/hooks/use-prism';
 import { FC, useRef } from 'react';
 import styles from './code.module.scss';
 
-export type PrismLanguage =
-  | 'apacheconf'
-  | 'bash'
-  | 'css'
-  | 'diff'
-  | 'docker'
-  | 'editorconfig'
-  | 'ejs'
-  | 'git'
-  | 'graphql'
-  | 'html'
-  | 'ignore'
-  | 'ini'
-  | 'javascript'
-  | 'jsdoc'
-  | 'json'
-  | 'jsx'
-  | 'makefile'
-  | 'markup'
-  | 'php'
-  | 'phpdoc'
-  | 'regex'
-  | 'scss'
-  | 'shell-session'
-  | 'smarty'
-  | 'tcl'
-  | 'toml'
-  | 'tsx'
-  | 'twig'
-  | 'yaml';
-
 export type CodeProps = {
   /**
    * The code to highlight.
diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx
index a1755a0..c33680f 100644
--- a/src/components/molecules/layout/meta.stories.tsx
+++ b/src/components/molecules/layout/meta.stories.tsx
@@ -1,3 +1,5 @@
+import descriptionListItemStories from '@components/atoms/lists/description-list-item.stories';
+import descriptionListStories from '@components/atoms/lists/description-list.stories';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import MetaComponent, { MetaData } from './meta';
 
@@ -7,7 +9,12 @@ import MetaComponent, { MetaData } from './meta';
 export default {
   title: 'Molecules/Layout',
   component: MetaComponent,
+  args: {
+    itemsLayout: 'inline-values',
+    withSeparator: false,
+  },
   argTypes: {
+    className: descriptionListStories.argTypes?.className,
     data: {
       description: 'The page metadata.',
       type: {
@@ -16,34 +23,23 @@ export default {
         value: {},
       },
     },
+    groupClassName: descriptionListStories.argTypes?.groupClassName,
     itemsLayout: {
-      control: {
-        type: 'select',
-      },
-      description: 'The items layout.',
-      options: ['inline', 'inline-values', 'stacked'],
+      ...descriptionListItemStories.argTypes?.layout,
       table: {
-        category: 'Options',
+        ...descriptionListItemStories.argTypes?.layout?.table,
         defaultValue: { summary: 'inline-values' },
       },
-      type: {
-        name: 'string',
-        required: false,
-      },
     },
+    labelClassName: descriptionListStories.argTypes?.labelClassName,
+    layout: descriptionListStories.argTypes?.layout,
+    valueClassName: descriptionListStories.argTypes?.valueClassName,
     withSeparator: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Add a slash as separator between multiple values.',
+      ...descriptionListStories.argTypes?.withSeparator,
       table: {
-        category: 'Options',
+        ...descriptionListStories.argTypes?.withSeparator?.table,
         defaultValue: { summary: true },
       },
-      type: {
-        name: 'boolean',
-        required: true,
-      },
     },
   },
 } as ComponentMeta<typeof MetaComponent>;
diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx
index c113db9..dd5a30b 100644
--- a/src/components/molecules/layout/widget.stories.tsx
+++ b/src/components/molecules/layout/widget.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
+import headingButtonStories from '../buttons/heading-button.stories';
 import Widget from './widget';
 
 /**
@@ -10,6 +10,7 @@ export default {
   component: Widget,
   args: {
     withBorders: false,
+    withScroll: false,
   },
   argTypes: {
     children: {
@@ -22,6 +23,19 @@ export default {
         required: true,
       },
     },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the widget wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     expanded: {
       control: {
         type: 'boolean',
@@ -36,18 +50,7 @@ export default {
         required: false,
       },
     },
-    level: {
-      control: {
-        type: 'number',
-        min: 1,
-        max: 6,
-      },
-      description: 'The heading level.',
-      type: {
-        name: 'number',
-        required: true,
-      },
-    },
+    level: headingButtonStories.argTypes?.level,
     title: {
       control: {
         type: 'text',
@@ -72,14 +75,21 @@ export default {
         required: false,
       },
     },
+    withScroll: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Define if the widget should be scrollable',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof Widget>;
 
 const Template: ComponentStory<typeof Widget> = (args) => <Widget {...args} />;
diff --git a/src/components/molecules/modals/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx
index 55b7677..f6dd364 100644
--- a/src/components/molecules/modals/modal.stories.tsx
+++ b/src/components/molecules/modals/modal.stories.tsx
@@ -31,6 +31,19 @@ export default {
         required: false,
       },
     },
+    headingClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the modal heading.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     icon: {
       control: {
         type: 'select',
diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx
index e26b480..cf67e60 100644
--- a/src/components/molecules/nav/breadcrumb.stories.tsx
+++ b/src/components/molecules/nav/breadcrumb.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import Breadcrumb from './breadcrumb';
 
 /**
@@ -44,13 +43,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof Breadcrumb>;
 
 const Template: ComponentStory<typeof Breadcrumb> = (args) => (
diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx
index 5cef5f0..f3a29a6 100644
--- a/src/components/molecules/nav/nav.stories.tsx
+++ b/src/components/molecules/nav/nav.stories.tsx
@@ -1,7 +1,6 @@
 import Envelop from '@components/atoms/icons/envelop';
 import Home from '@components/atoms/icons/home';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import NavComponent, { type NavItem } from './nav';
 
 /**
@@ -73,13 +72,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof NavComponent>;
 
 const Template: ComponentStory<typeof NavComponent> = (args) => (
diff --git a/src/components/molecules/nav/pagination.stories.tsx b/src/components/molecules/nav/pagination.stories.tsx
index b31c2b5..2e86db4 100644
--- a/src/components/molecules/nav/pagination.stories.tsx
+++ b/src/components/molecules/nav/pagination.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import PaginationComponent from './pagination';
 
 /**
@@ -8,6 +7,10 @@ import PaginationComponent from './pagination';
 export default {
   title: 'Molecules/Navigation/Pagination',
   component: PaginationComponent,
+  args: {
+    baseUrl: '/page/',
+    siblings: 1,
+  },
   argTypes: {
     'aria-label': {
       control: {
@@ -95,13 +98,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof PaginationComponent>;
 
 const Template: ComponentStory<typeof PaginationComponent> = (args) => (
diff --git a/src/components/organisms/forms/comment-form.stories.tsx b/src/components/organisms/forms/comment-form.stories.tsx
index 8b11df7..1a9e7b7 100644
--- a/src/components/organisms/forms/comment-form.stories.tsx
+++ b/src/components/organisms/forms/comment-form.stories.tsx
@@ -13,6 +13,8 @@ export default {
   component: CommentForm,
   args: {
     saveComment,
+    titleAlignment: 'left',
+    titleLevel: 2,
   },
   argTypes: {
     className: {
@@ -56,6 +58,9 @@ export default {
         type: null,
       },
       description: 'A callback function to process the comment form data.',
+      table: {
+        category: 'Events',
+      },
       type: {
         name: 'function',
         required: true,
@@ -74,6 +79,21 @@ export default {
         required: false,
       },
     },
+    titleAlignment: {
+      control: {
+        type: 'select',
+      },
+      description: 'The heading alignment.',
+      options: ['center', 'left'],
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 'left' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     titleLevel: {
       control: {
         type: 'number',
@@ -83,6 +103,7 @@ export default {
       description: 'The title level (hn).',
       table: {
         category: 'Options',
+        defaultValue: { summary: 2 },
       },
       type: {
         name: 'number',
diff --git a/src/components/organisms/forms/contact-form.stories.tsx b/src/components/organisms/forms/contact-form.stories.tsx
index 39d0b71..191d448 100644
--- a/src/components/organisms/forms/contact-form.stories.tsx
+++ b/src/components/organisms/forms/contact-form.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import ContactForm from './contact-form';
 
 /**
@@ -40,19 +39,15 @@ export default {
         type: null,
       },
       description: 'A callback function to process the contact form data.',
+      table: {
+        category: 'Events',
+      },
       type: {
         name: 'function',
         required: true,
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof ContactForm>;
 
 const Template: ComponentStory<typeof ContactForm> = (args) => (
diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx
index 6ea6122..d8c8e1e 100644
--- a/src/components/organisms/forms/search-form.stories.tsx
+++ b/src/components/organisms/forms/search-form.stories.tsx
@@ -39,6 +39,16 @@ export default {
         required: false,
       },
     },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
   },
 } as ComponentMeta<typeof SearchForm>;
 
diff --git a/src/components/organisms/forms/settings-form.stories.tsx b/src/components/organisms/forms/settings-form.stories.tsx
index 46305e7..70e1844 100644
--- a/src/components/organisms/forms/settings-form.stories.tsx
+++ b/src/components/organisms/forms/settings-form.stories.tsx
@@ -8,6 +8,16 @@ export default {
   title: 'Organisms/Forms',
   component: SettingsForm,
   argTypes: {
+    ackeeStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'The local storage key for Ackee setting.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     className: {
       control: {
         type: 'text',
@@ -21,6 +31,16 @@ export default {
         required: false,
       },
     },
+    motionStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'The local storage key for reduced motion setting.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     tooltipClassName: {
       control: {
         type: 'text',
diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
index c31b77a..c7649ab 100644
--- a/src/components/organisms/layout/comment.stories.tsx
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -12,6 +12,7 @@ export default {
   title: 'Organisms/Layout',
   component: CommentComponent,
   args: {
+    canReply: true,
     saveComment,
   },
   argTypes: {
diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx
index 4d95205..1ed159a 100644
--- a/src/components/organisms/layout/comments-list.stories.tsx
+++ b/src/components/organisms/layout/comments-list.stories.tsx
@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CommentsListComponent, { Comment } from './comments-list';
+import CommentsListComponent, { type Comment } from './comments-list';
 
 const saveComment = async () => {
   /** Do nothing. */
@@ -29,6 +29,8 @@ export default {
     depth: {
       control: {
         type: 'number',
+        min: 0,
+        max: 4,
       },
       description: 'The maximum depth. Use `0` to not display nested comments.',
       type: {
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx
index 3ceb337..a5233ea 100644
--- a/src/components/organisms/layout/header.stories.tsx
+++ b/src/components/organisms/layout/header.stories.tsx
@@ -92,6 +92,16 @@ export default {
         required: true,
       },
     },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     title: {
       control: {
         type: 'text',
diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
index 77318f4..96fb2f0 100644
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ b/src/components/organisms/layout/posts-list.stories.tsx
@@ -10,10 +10,26 @@ export default {
   args: {
     byYear: false,
     isLoading: false,
+    pageNumber: 1,
     showLoadMoreBtn: false,
+    siblings: 1,
     titleLevel: 2,
   },
   argTypes: {
+    baseUrl: {
+      control: {
+        type: 'text',
+      },
+      description: 'The pagination base url.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: '/page/' },
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     byYear: {
       control: {
         type: 'boolean',
@@ -55,6 +71,20 @@ export default {
         required: false,
       },
     },
+    pageNumber: {
+      control: {
+        type: 'number',
+      },
+      description: 'The current page number.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 1 },
+      },
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
     posts: {
       description: 'The posts data.',
       type: {
@@ -77,6 +107,20 @@ export default {
         required: false,
       },
     },
+    siblings: {
+      control: {
+        type: 'number',
+      },
+      description: 'The number of page siblings inside pagination.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 1 },
+      },
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
     titleLevel: {
       control: {
         type: 'number',
diff --git a/src/components/organisms/modals/search-modal.stories.tsx b/src/components/organisms/modals/search-modal.stories.tsx
index f40696c..5a607c6 100644
--- a/src/components/organisms/modals/search-modal.stories.tsx
+++ b/src/components/organisms/modals/search-modal.stories.tsx
@@ -24,6 +24,16 @@ export default {
         required: false,
       },
     },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
   },
 } as ComponentMeta<typeof SearchModal>;
 
diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx
index 0fe8c18..d263e2b 100644
--- a/src/components/organisms/modals/settings-modal.stories.tsx
+++ b/src/components/organisms/modals/settings-modal.stories.tsx
@@ -8,6 +8,16 @@ export default {
   title: 'Organisms/Modals',
   component: SettingsModal,
   argTypes: {
+    ackeeStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'A local storage key for Ackee.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     className: {
       control: {
         type: 'text',
@@ -21,6 +31,16 @@ export default {
         required: false,
       },
     },
+    motionStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'A local storage key for reduced motion setting..',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     tooltipClassName: {
       control: {
         type: 'text',
diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx
index 04b22cb..831636f 100644
--- a/src/components/organisms/toolbar/main-nav.stories.tsx
+++ b/src/components/organisms/toolbar/main-nav.stories.tsx
@@ -1,6 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import { IntlProvider } from 'react-intl';
 import MainNav from './main-nav';
 
 /**
@@ -46,19 +45,15 @@ export default {
         type: null,
       },
       description: 'A callback function to change main nav state.',
+      table: {
+        category: 'Events',
+      },
       type: {
         name: 'function',
         required: true,
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof MainNav>;
 
 const Template: ComponentStory<typeof MainNav> = ({
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
index 6aaffde..f0f65b4 100644
--- a/src/components/organisms/toolbar/search.stories.tsx
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -35,11 +35,24 @@ export default {
         required: true,
       },
     },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     setIsActive: {
       control: {
         type: null,
       },
       description: 'A callback function to update modal state.',
+      table: {
+        category: 'Events',
+      },
       type: {
         name: 'function',
         required: true,
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index 9d04932..08ec579 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -41,6 +41,9 @@ export default {
         type: null,
       },
       description: 'Define the modal state: either opened or closed.',
+      table: {
+        category: 'Events',
+      },
       type: {
         name: 'boolean',
         required: true,
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 9985ba0..f558eb7 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -9,14 +9,7 @@ import SettingsModal, {
 import settingsStyles from './settings.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
-export type SettingsProps = Pick<
-  SettingsModalProps,
-  'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName'
-> & {
-  /**
-   * Set additional classnames to the modal wrapper.
-   */
-  className?: string;
+export type SettingsProps = SettingsModalProps & {
   /**
    * The button state.
    */
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
index 1f07e79..d613442 100644
--- a/src/components/organisms/toolbar/toolbar.stories.tsx
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -54,6 +54,16 @@ export default {
         value: {},
       },
     },
+    searchPage: {
+      control: {
+        type: 'text',
+      },
+      description: 'The search results page url.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
   },
   parameters: {
     layout: 'fullscreen',
diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx
index 3014b36..fa39745 100644
--- a/src/components/organisms/widgets/image-widget.stories.tsx
+++ b/src/components/organisms/widgets/image-widget.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import ImageWidget from './image-widget';
 
 /**
@@ -27,6 +26,19 @@ export default {
         required: false,
       },
     },
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the widget wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     description: {
       control: {
         type: 'text',
@@ -107,13 +119,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof ImageWidget>;
 
 const Template: ComponentStory<typeof ImageWidget> = (args) => (
diff --git a/src/components/organisms/widgets/links-list-widget.stories.tsx b/src/components/organisms/widgets/links-list-widget.stories.tsx
index 0f03a2c..cdfa96a 100644
--- a/src/components/organisms/widgets/links-list-widget.stories.tsx
+++ b/src/components/organisms/widgets/links-list-widget.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import LinksListWidget from './links-list-widget';
 
 /**
@@ -12,6 +11,19 @@ export default {
     kind: 'unordered',
   },
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the list wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     items: {
       description: 'The widget data.',
       type: {
@@ -58,13 +70,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof LinksListWidget>;
 
 const Template: ComponentStory<typeof LinksListWidget> = (args) => (
diff --git a/src/components/organisms/widgets/social-media.stories.tsx b/src/components/organisms/widgets/social-media.stories.tsx
index 2fa8bd7..6c9de4d 100644
--- a/src/components/organisms/widgets/social-media.stories.tsx
+++ b/src/components/organisms/widgets/social-media.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SocialMediaWidget, { Media } from './social-media';
 
 /**
@@ -40,13 +39,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SocialMediaWidget>;
 
 const Template: ComponentStory<typeof SocialMediaWidget> = (args) => (
diff --git a/src/components/organisms/widgets/table-of-contents.stories.tsx b/src/components/organisms/widgets/table-of-contents.stories.tsx
index fba7c54..d8b3af7 100644
--- a/src/components/organisms/widgets/table-of-contents.stories.tsx
+++ b/src/components/organisms/widgets/table-of-contents.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import ToCWidget from './table-of-contents';
 
 /**
@@ -21,13 +20,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof ToCWidget>;
 
 const Template: ComponentStory<typeof ToCWidget> = (args) => (
diff --git a/src/components/templates/layout/layout.stories.tsx b/src/components/templates/layout/layout.stories.tsx
index 105e808..4666b07 100644
--- a/src/components/templates/layout/layout.stories.tsx
+++ b/src/components/templates/layout/layout.stories.tsx
@@ -60,6 +60,32 @@ export default {
         required: false,
       },
     },
+    useGrid: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Use the grid layout.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    withExtraPadding: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Set additional padding at the bottom of the page.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
   },
   decorators: [
     (Story) => (
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index bec1066..12fe26a 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -33,6 +33,30 @@ export default {
         required: false,
       },
     },
+    bodyAttributes: {
+      description: 'Set additional HTML attributes to the main content body.',
+      table: {
+        category: 'Options',
+      },
+      type: {
+        name: 'object',
+        required: false,
+        value: {},
+      },
+    },
+    bodyClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the main content body.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     breadcrumb: {
       description: 'The breadcrumb items.',
       type: {
-- 
cgit v1.2.3


From 321dae4a47594af83269fa560b375965d7f35763 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 22 May 2022 15:09:39 +0200
Subject: fix: render all images unoptimized in Storybook

There is a bug with next/image and Storybook. I was manually adding
`unoptimized` to images. Instead we can use a workaround by adding an
extra config in Storybook `preview.js` file.
---
 .storybook/preview.js                              | 18 +++++++
 .../molecules/images/flipping-logo.stories.tsx     |  3 --
 .../molecules/images/responsive-image.stories.tsx  | 57 ++++++++++++++++++++--
 .../molecules/layout/branding.stories.tsx          |  5 --
 src/components/molecules/layout/card.stories.tsx   |  1 -
 .../organisms/images/gallery.stories.tsx           |  8 +--
 .../organisms/layout/cards-list.stories.tsx        |  6 ---
 .../organisms/layout/cards-list.test.tsx           |  6 ---
 .../organisms/layout/comment.stories.tsx           |  2 -
 .../organisms/layout/comments-list.stories.tsx     | 10 ----
 src/components/organisms/layout/header.stories.tsx |  3 --
 .../organisms/layout/overview.stories.tsx          |  1 -
 .../organisms/layout/posts-list.stories.tsx        |  4 --
 .../organisms/layout/posts-list.test.tsx           |  4 --
 .../organisms/layout/summary.stories.tsx           |  1 -
 .../organisms/widgets/image-widget.stories.tsx     |  1 -
 .../templates/page/page-layout.stories.tsx         | 22 +++------
 src/components/templates/page/page-layout.test.tsx |  2 -
 18 files changed, 80 insertions(+), 74 deletions(-)

(limited to 'src/components/organisms/layout/comment.stories.tsx')

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 344df2a..e30927b 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,24 @@
 import '@styles/globals.scss';
+import * as NextImage from 'next/image';
 import { IntlProvider } from 'react-intl';
 
+const OriginalNextImage = NextImage.default;
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: (props) =>
+    typeof props.src === 'string' ? (
+      <OriginalNextImage {...props} unoptimized blurDataURL={props.src} />
+    ) : (
+      <OriginalNextImage {...props} unoptimized />
+    ),
+});
+
+Object.defineProperty(NextImage, '__esModule', {
+  configurable: true,
+  value: true,
+});
+
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
diff --git a/src/components/molecules/images/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo.stories.tsx
index 40a4c49..9d09293 100644
--- a/src/components/molecules/images/flipping-logo.stories.tsx
+++ b/src/components/molecules/images/flipping-logo.stories.tsx
@@ -54,7 +54,6 @@ export default {
         required: true,
       },
     },
-    unoptimized: { table: { disable: true } },
   },
 } as ComponentMeta<typeof FlippingLogoComponent>;
 
@@ -70,6 +69,4 @@ FlippingLogo.args = {
   altText: 'Website picture',
   logoTitle: 'Website logo',
   photo: 'http://placeimg.com/640/480',
-  // @ts-ignore - Needed because of the placeholder image.
-  unoptimized: true,
 };
diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx
index ca69d4f..4917cde 100644
--- a/src/components/molecules/images/responsive-image.stories.tsx
+++ b/src/components/molecules/images/responsive-image.stories.tsx
@@ -80,7 +80,6 @@ export default {
         required: false,
       },
     },
-    unoptimized: { table: { disable: true } },
     width: {
       control: {
         type: 'number',
@@ -121,7 +120,18 @@ Default.args = {
   src: 'http://placeimg.com/640/480/transport',
   width: 640,
   height: 480,
-  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With borders
+ */
+export const WithBorders = Template.bind({});
+WithBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  withBorders: true,
 };
 
 /**
@@ -133,10 +143,22 @@ WithLink.args = {
   src: 'http://placeimg.com/640/480/transport',
   width: 640,
   height: 480,
-  unoptimized: true,
   target: '#',
 };
 
+/**
+ * Responsive Image Stories - With link and borders
+ */
+export const WithLinkAndBorders = Template.bind({});
+WithLinkAndBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  target: '#',
+  withBorders: true,
+};
+
 /**
  * Responsive Image Stories - With caption
  */
@@ -147,7 +169,19 @@ WithCaption.args = {
   width: 640,
   height: 480,
   caption: 'Omnis nulla labore',
-  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With caption and borders
+ */
+export const WithCaptionAndBorders = Template.bind({});
+WithCaptionAndBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  caption: 'Omnis nulla labore',
+  withBorders: true,
 };
 
 /**
@@ -161,5 +195,18 @@ WithCaptionAndLink.args = {
   height: 480,
   caption: 'Omnis nulla labore',
   target: '#',
-  unoptimized: true,
+};
+
+/**
+ * Responsive Image Stories - With caption, link and borders
+ */
+export const WithCaptionLinkAndBorders = Template.bind({});
+WithCaptionLinkAndBorders.args = {
+  alt: 'An example',
+  src: 'http://placeimg.com/640/480/transport',
+  width: 640,
+  height: 480,
+  caption: 'Omnis nulla labore',
+  target: '#',
+  withBorders: true,
 };
diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx
index d2e0694..94bb166 100644
--- a/src/components/molecules/layout/branding.stories.tsx
+++ b/src/components/molecules/layout/branding.stories.tsx
@@ -56,7 +56,6 @@ export default {
         required: true,
       },
     },
-    unoptimized: { table: { disable: true } },
     withLink: {
       control: {
         type: 'boolean',
@@ -85,8 +84,6 @@ export const Default = Template.bind({});
 Default.args = {
   title: 'Website title',
   photo: 'http://placeimg.com/640/480',
-  // @ts-ignore - Needed because of the placeholder image.
-  unoptimized: true,
 };
 
 /**
@@ -97,6 +94,4 @@ WithBaseline.args = {
   title: 'Website title',
   baseline: 'Maiores corporis qui',
   photo: 'http://placeimg.com/640/480',
-  // @ts-ignore - Needed because of the placeholder image.
-  unoptimized: true,
 };
diff --git a/src/components/molecules/layout/card.stories.tsx b/src/components/molecules/layout/card.stories.tsx
index 2e99bbb..0ad42c0 100644
--- a/src/components/molecules/layout/card.stories.tsx
+++ b/src/components/molecules/layout/card.stories.tsx
@@ -113,7 +113,6 @@ const cover = {
   height: 480,
   src: 'http://placeimg.com/640/480',
   width: 640,
-  unoptimized: true,
 };
 
 const meta = {
diff --git a/src/components/organisms/images/gallery.stories.tsx b/src/components/organisms/images/gallery.stories.tsx
index 786cfff..6fc278f 100644
--- a/src/components/organisms/images/gallery.stories.tsx
+++ b/src/components/organisms/images/gallery.stories.tsx
@@ -43,10 +43,10 @@ const image = {
 
 const Template: ComponentStory<typeof Gallery> = (args) => (
   <Gallery {...args}>
-    <ResponsiveImage unoptimized {...image} />
-    <ResponsiveImage unoptimized {...image} />
-    <ResponsiveImage unoptimized {...image} />
-    <ResponsiveImage unoptimized {...image} />
+    <ResponsiveImage {...image} />
+    <ResponsiveImage {...image} />
+    <ResponsiveImage {...image} />
+    <ResponsiveImage {...image} />
   </Gallery>
 );
 
diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx
index 522d068..c19220a 100644
--- a/src/components/organisms/layout/cards-list.stories.tsx
+++ b/src/components/organisms/layout/cards-list.stories.tsx
@@ -90,8 +90,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: { thematics: ['Velit', 'Ex', 'Alias'] },
     tagline: 'Molestias ut error',
@@ -105,8 +103,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: { thematics: ['Voluptas'] },
     tagline: 'Quod vel accusamus',
@@ -120,8 +116,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: {
       thematics: ['Quisquam', 'Quia', 'Sapiente', 'Perspiciatis'],
diff --git a/src/components/organisms/layout/cards-list.test.tsx b/src/components/organisms/layout/cards-list.test.tsx
index 7d98844..8558fa6 100644
--- a/src/components/organisms/layout/cards-list.test.tsx
+++ b/src/components/organisms/layout/cards-list.test.tsx
@@ -9,8 +9,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: { thematics: ['Velit', 'Ex', 'Alias'] },
     tagline: 'Molestias ut error',
@@ -24,8 +22,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: { thematics: ['Voluptas'] },
     tagline: 'Quod vel accusamus',
@@ -39,8 +35,6 @@ const items: CardsListItem[] = [
       src: 'http://placeimg.com/640/480',
       width: 640,
       height: 480,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
     meta: {
       thematics: ['Quisquam', 'Quia', 'Sapiente', 'Perspiciatis'],
diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
index c7649ab..fa4bba9 100644
--- a/src/components/organisms/layout/comment.stories.tsx
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -123,6 +123,4 @@ Comment.args = {
     'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.',
   id: 2,
   publication: '2021-04-03 23:04:24',
-  // @ts-ignore - Needed because of the placeholder image.
-  unoptimized: true,
 };
diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx
index 1ed159a..22cc9d9 100644
--- a/src/components/organisms/layout/comments-list.stories.tsx
+++ b/src/components/organisms/layout/comments-list.stories.tsx
@@ -81,8 +81,6 @@ const comments: Comment[] = [
       'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
     id: 1,
     publication: '2021-04-03 18:04:11',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
   {
     child: [
@@ -95,8 +93,6 @@ const comments: Comment[] = [
           'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
         id: 4,
         publication: '2021-04-03 23:04:24',
-        // @ts-ignore - Needed because of the placeholder image.
-        unoptimized: true,
       },
       {
         author: {
@@ -107,8 +103,6 @@ const comments: Comment[] = [
           'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
         id: 5,
         publication: '2021-04-04 08:05:14',
-        // @ts-ignore - Needed because of the placeholder image.
-        unoptimized: true,
       },
     ],
     author: {
@@ -120,8 +114,6 @@ const comments: Comment[] = [
       'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
     id: 2,
     publication: '2021-04-03 23:30:20',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
   {
     author: {
@@ -132,8 +124,6 @@ const comments: Comment[] = [
       'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
     id: 3,
     publication: '2021-09-13 13:24:54',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
 ];
 
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx
index a5233ea..0507e89 100644
--- a/src/components/organisms/layout/header.stories.tsx
+++ b/src/components/organisms/layout/header.stories.tsx
@@ -112,7 +112,6 @@ export default {
         required: true,
       },
     },
-    unoptimized: { table: { disable: true } },
     withLink: {
       control: {
         type: 'boolean',
@@ -151,6 +150,4 @@ Header.args = {
   nav,
   photo: 'http://placeimg.com/640/480/people',
   title: 'Website title',
-  // @ts-ignore - Needed because of the placeholder image.
-  unoptimized: true,
 };
diff --git a/src/components/organisms/layout/overview.stories.tsx b/src/components/organisms/layout/overview.stories.tsx
index 1139350..26f7ba0 100644
--- a/src/components/organisms/layout/overview.stories.tsx
+++ b/src/components/organisms/layout/overview.stories.tsx
@@ -52,7 +52,6 @@ const cover = {
   height: 480,
   src: 'http://placeimg.com/640/480/cats',
   width: 640,
-  unoptimized: true,
 };
 
 const meta: OverviewMeta = {
diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
index 96fb2f0..360d441 100644
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ b/src/components/organisms/layout/posts-list.stories.tsx
@@ -181,8 +181,6 @@ const posts: Post[] = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
   {
@@ -213,8 +211,6 @@ const posts: Post[] = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
 ];
diff --git a/src/components/organisms/layout/posts-list.test.tsx b/src/components/organisms/layout/posts-list.test.tsx
index 7429cbd..dfb9825 100644
--- a/src/components/organisms/layout/posts-list.test.tsx
+++ b/src/components/organisms/layout/posts-list.test.tsx
@@ -28,8 +28,6 @@ const posts: Post[] = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
   {
@@ -60,8 +58,6 @@ const posts: Post[] = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
 ];
diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx
index 92736b8..2512051 100644
--- a/src/components/organisms/layout/summary.stories.tsx
+++ b/src/components/organisms/layout/summary.stories.tsx
@@ -88,7 +88,6 @@ const cover = {
   height: 480,
   src: 'http://placeimg.com/640/480',
   width: 640,
-  unoptimized: true,
 };
 
 const excerpt =
diff --git a/src/components/organisms/widgets/image-widget.stories.tsx b/src/components/organisms/widgets/image-widget.stories.tsx
index fa39745..2271c03 100644
--- a/src/components/organisms/widgets/image-widget.stories.tsx
+++ b/src/components/organisms/widgets/image-widget.stories.tsx
@@ -130,7 +130,6 @@ const image = {
   height: 480,
   src: 'http://placeimg.com/640/480/nature',
   width: 640,
-  unoptimized: true,
 };
 
 /**
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 12fe26a..bc1d7b6 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -179,8 +179,12 @@ export default {
     },
   },
   decorators: [
-    (Story) => (
-      <LayoutBase {...LayoutBase.args}>
+    (Story, context) => (
+      <LayoutBase
+        useGrid={true}
+        withExtraPadding={!context.args.allowComments && !context.args.comments}
+        {...LayoutBase.args}
+      >
         <Story />
       </LayoutBase>
     ),
@@ -273,8 +277,6 @@ const comments = [
       'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
     id: 1,
     publication: '2021-04-03 18:04:11',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
   {
     child: [
@@ -287,8 +289,6 @@ const comments = [
           'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
         id: 4,
         publication: '2021-04-03 23:04:24',
-        // @ts-ignore - Needed because of the placeholder image.
-        unoptimized: true,
       },
       {
         author: {
@@ -299,8 +299,6 @@ const comments = [
           'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
         id: 5,
         publication: '2021-04-04 08:05:14',
-        // @ts-ignore - Needed because of the placeholder image.
-        unoptimized: true,
       },
     ],
     author: {
@@ -312,8 +310,6 @@ const comments = [
       'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
     id: 2,
     publication: '2021-04-03 23:30:20',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
   {
     author: {
@@ -324,8 +320,6 @@ const comments = [
       'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
     id: 3,
     publication: '2021-09-13 13:24:54',
-    // @ts-ignore - Needed because of the placeholder image.
-    unoptimized: true,
   },
 ];
 
@@ -435,8 +429,6 @@ const posts = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
   {
@@ -467,8 +459,6 @@ const posts = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
-      // @ts-ignore - Needed because of the placeholder image.
-      unoptimized: true,
     },
   },
 ];
diff --git a/src/components/templates/page/page-layout.test.tsx b/src/components/templates/page/page-layout.test.tsx
index a414e14..a0c8923 100644
--- a/src/components/templates/page/page-layout.test.tsx
+++ b/src/components/templates/page/page-layout.test.tsx
@@ -98,8 +98,6 @@ describe('PageLayout', () => {
           'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
         id: 1,
         publication: '2021-04-03 18:04:11',
-        // @ts-ignore - Needed because of the placeholder image.
-        unoptimized: true,
       },
     ];
     render(
-- 
cgit v1.2.3


From 34e216546151eaf8a0a3cbb0bc8b65dae4c63bf2 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 23 May 2022 14:07:02 +0200
Subject: refactor: reduce the number of data transformation

---
 src/components/molecules/layout/card.tsx           |  22 +---
 src/components/organisms/layout/cards-list.tsx     |  36 +++---
 .../organisms/layout/comment.fixture.tsx           |  41 +++++++
 .../organisms/layout/comment.stories.tsx           |  28 ++---
 src/components/organisms/layout/comment.test.tsx   |  39 ++-----
 src/components/organisms/layout/comment.tsx        |  98 ++++++++---------
 .../organisms/layout/comments-list.fixture.tsx     | 106 ++++++++++++++++++
 .../organisms/layout/comments-list.stories.tsx     |  59 +---------
 .../organisms/layout/comments-list.test.tsx        |  64 +----------
 src/components/organisms/layout/comments-list.tsx  |  11 +-
 .../organisms/layout/posts-list.fixture.tsx        |  61 +++++++++++
 .../organisms/layout/posts-list.stories.tsx        |  64 +----------
 .../organisms/layout/posts-list.test.tsx           |  64 +----------
 src/components/organisms/layout/posts-list.tsx     |   4 +-
 .../organisms/layout/summary.fixture.tsx           |  25 +++++
 .../organisms/layout/summary.stories.tsx           |  28 +----
 src/components/organisms/layout/summary.test.tsx   |  44 ++------
 src/components/organisms/layout/summary.tsx        |  73 ++++---------
 .../templates/page/page-layout.stories.tsx         | 121 +--------------------
 src/components/templates/page/page-layout.test.tsx |  13 +--
 src/pages/article/[slug].tsx                       |  43 ++------
 src/pages/blog/index.tsx                           |  75 +------------
 src/pages/blog/page/[number].tsx                   |  66 +----------
 src/pages/projets/[slug].tsx                       |  14 ++-
 src/pages/projets/index.tsx                        |   4 +-
 src/pages/recherche/index.tsx                      |  76 +------------
 src/pages/sujet/[slug].tsx                         |  28 +----
 src/pages/thematique/[slug].tsx                    |  28 +----
 src/services/graphql/articles.query.ts             |   7 --
 src/services/graphql/articles.ts                   |   3 +-
 src/services/graphql/thematics.query.ts            |   9 --
 src/services/graphql/thematics.ts                  |   1 -
 src/services/graphql/topics.query.ts               |   9 --
 src/services/graphql/topics.ts                     |   1 -
 src/ts/types/app.ts                                |   5 +-
 src/ts/types/mdx.ts                                |   5 +-
 src/ts/types/raw-data.ts                           |   3 +-
 src/utils/helpers/pages.ts                         |  49 ++++++---
 38 files changed, 456 insertions(+), 971 deletions(-)
 create mode 100644 src/components/organisms/layout/comment.fixture.tsx
 create mode 100644 src/components/organisms/layout/comments-list.fixture.tsx
 create mode 100644 src/components/organisms/layout/posts-list.fixture.tsx
 create mode 100644 src/components/organisms/layout/summary.fixture.tsx

(limited to 'src/components/organisms/layout/comment.stories.tsx')

diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index e465f76..68e364a 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -1,5 +1,6 @@
 import ButtonLink from '@components/atoms/buttons/button-link';
 import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
+import { type Image } from '@ts/types/app';
 import { FC } from 'react';
 import ResponsiveImage, {
   type ResponsiveImageProps,
@@ -7,25 +8,6 @@ import ResponsiveImage, {
 import styles from './card.module.scss';
 import Meta, { type MetaData } from './meta';
 
-export type Cover = {
-  /**
-   * The cover alternative text.
-   */
-  alt: string;
-  /**
-   * The cover height.
-   */
-  height: number;
-  /**
-   * The cover source.
-   */
-  src: string;
-  /**
-   * The cover width.
-   */
-  width: number;
-};
-
 export type CardProps = {
   /**
    * Set additional classnames to the card wrapper.
@@ -34,7 +16,7 @@ export type CardProps = {
   /**
    * The card cover.
    */
-  cover?: Cover;
+  cover?: Image;
   /**
    * The cover fit. Default: cover.
    */
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index 0168bb2..1feddd0 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -10,32 +10,24 @@ export type CardsListItem = Omit<
   CardProps,
   'className' | 'coverFit' | 'titleLevel'
 > & {
-  id: string;
-};
-
-export type CardsListProps = {
-  /**
-   * Set additional classnames to the list wrapper.
-   */
-  className?: string;
-  /**
-   * The cover fit.
-   */
-  coverFit?: CardProps['coverFit'];
   /**
-   * The cards data.
+   * The card id.
    */
-  items: CardsListItem[];
-  /**
-   * The list kind. Either ordered or unordered.
-   */
-  kind?: ListProps['kind'];
-  /**
-   * The title level (hn).
-   */
-  titleLevel: CardProps['titleLevel'];
+  id: string;
 };
 
+export type CardsListProps = Pick<CardProps, 'coverFit' | 'titleLevel'> &
+  Pick<ListProps, 'kind'> & {
+    /**
+     * Set additional classnames to the list wrapper.
+     */
+    className?: string;
+    /**
+     * The cards data.
+     */
+    items: CardsListItem[];
+  };
+
 /**
  * CardsList component
  *
diff --git a/src/components/organisms/layout/comment.fixture.tsx b/src/components/organisms/layout/comment.fixture.tsx
new file mode 100644
index 0000000..0118139
--- /dev/null
+++ b/src/components/organisms/layout/comment.fixture.tsx
@@ -0,0 +1,41 @@
+import { getFormattedDate, getFormattedTime } from '@utils/helpers/dates';
+import { CommentProps } from './comment';
+
+export const author = {
+  avatar: {
+    alt: 'Author avatar',
+    height: 480,
+    src: 'http://placeimg.com/640/480',
+    width: 640,
+  },
+  name: 'Armand',
+  website: 'https://www.armandphilippot.com/',
+};
+
+export const content =
+  'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.';
+
+export const date = '2021-04-03 23:04:24';
+
+export const meta = {
+  author,
+  date,
+};
+
+export const id = 5;
+
+export const saveComment = async () => {
+  /** Do nothing. */
+};
+
+export const data: CommentProps = {
+  approved: true,
+  content,
+  id,
+  meta,
+  parentId: 0,
+  saveComment,
+};
+
+export const formattedDate = getFormattedDate(date);
+export const formattedTime = getFormattedTime(date);
diff --git a/src/components/organisms/layout/comment.stories.tsx b/src/components/organisms/layout/comment.stories.tsx
index fa4bba9..7a8ac95 100644
--- a/src/components/organisms/layout/comment.stories.tsx
+++ b/src/components/organisms/layout/comment.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import CommentComponent from './comment';
+import { data } from './comment.fixture';
 
 const saveComment = async () => {
   /** Do nothing. */
@@ -9,7 +10,7 @@ const saveComment = async () => {
  * Comment - Storybook Meta
  */
 export default {
-  title: 'Organisms/Layout',
+  title: 'Organisms/Layout/Comment',
   component: CommentComponent,
   args: {
     canReply: true,
@@ -110,17 +111,18 @@ const Template: ComponentStory<typeof CommentComponent> = (args) => (
 );
 
 /**
- * Layout Stories - Comment
+ * Layout Stories - Approved
  */
-export const Comment = Template.bind({});
-Comment.args = {
-  author: {
-    avatar: 'http://placeimg.com/640/480',
-    name: 'Armand',
-    url: 'https://www.armandphilippot.com/',
-  },
-  content:
-    'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.',
-  id: 2,
-  publication: '2021-04-03 23:04:24',
+export const Approved = Template.bind({});
+Approved.args = {
+  ...data,
+};
+
+/**
+ * Layout Stories - Unapproved
+ */
+export const Unapproved = Template.bind({});
+Unapproved.args = {
+  ...data,
+  approved: false,
 };
diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx
index 02a51dc..490a52b 100644
--- a/src/components/organisms/layout/comment.test.tsx
+++ b/src/components/organisms/layout/comment.test.tsx
@@ -1,48 +1,31 @@
 import { render, screen } from '@test-utils';
-import { getFormattedDate, getFormattedTime } from '@utils/helpers/dates';
 import Comment from './comment';
-
-const author = {
-  avatar: 'http://placeimg.com/640/480',
-  name: 'Your name',
-  url: 'https://www.example.test/',
-};
-const content =
-  'Harum aut cumque iure fugit neque sequi cupiditate repudiandae laudantium. Ratione aut assumenda qui illum voluptas accusamus quis officiis exercitationem. Consectetur est harum eius perspiciatis officiis nihil. Aut corporis minima debitis adipisci possimus debitis et.';
-const publication = '2021-04-03 23:04:24';
-const id = 5;
-const saveComment = async () => {
-  /** Do nothing. */
-};
-const data = {
+import {
   author,
-  content,
+  data,
+  formattedDate,
+  formattedTime,
   id,
-  publication,
-  saveComment,
-};
-
-const formattedDate = getFormattedDate(publication);
-const formattedTime = getFormattedTime(publication);
+} from './comment.fixture';
 
 describe('Comment', () => {
   it('renders an avatar', () => {
-    render(<Comment {...data} />);
+    render(<Comment canReply={true} {...data} />);
     expect(
       screen.getByRole('img', { name: 'Your name avatar' })
     ).toBeInTheDocument();
   });
 
   it('renders the author website url', () => {
-    render(<Comment {...data} />);
+    render(<Comment canReply={true} {...data} />);
     expect(screen.getByRole('link', { name: author.name })).toHaveAttribute(
       'href',
-      author.url
+      author.website
     );
   });
 
   it('renders a permalink to the comment', () => {
-    render(<Comment {...data} />);
+    render(<Comment canReply={true} {...data} />);
     expect(
       screen.getByRole('link', {
         name: `${formattedDate} at ${formattedTime}`,
@@ -51,12 +34,12 @@ describe('Comment', () => {
   });
 
   it('renders a reply button', () => {
-    render(<Comment {...data} canReply={true} />);
+    render(<Comment canReply={true} {...data} />);
     expect(screen.getByRole('button', { name: 'Reply' })).toBeInTheDocument();
   });
 
   it('does not render a reply button', () => {
-    render(<Comment {...data} canReply={false} />);
+    render(<Comment canReply={false} {...data} />);
     expect(
       screen.queryByRole('button', { name: 'Reply' })
     ).not.toBeInTheDocument();
diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
index 6df393b..1dc2c71 100644
--- a/src/components/organisms/layout/comment.tsx
+++ b/src/components/organisms/layout/comment.tsx
@@ -1,6 +1,7 @@
 import Button from '@components/atoms/buttons/button';
 import Link from '@components/atoms/links/link';
 import Meta from '@components/molecules/layout/meta';
+import { type Comment as CommentType } from '@ts/types/app';
 import useSettings from '@utils/hooks/use-settings';
 import Image from 'next/image';
 import Script from 'next/script';
@@ -25,32 +26,16 @@ export type CommentAuthor = {
   url?: string;
 };
 
-export type CommentProps = Pick<CommentFormProps, 'Notice' | 'saveComment'> & {
-  /**
-   * The comment author data.
-   */
-  author: CommentAuthor;
-  /**
-   * Enable or disable the reply button. Default: true.
-   */
-  canReply?: boolean;
-  /**
-   * The comment body.
-   */
-  content: string;
-  /**
-   * The comment id.
-   */
-  id: number | string;
-  /**
-   * The comment parent id.
-   */
-  parentId?: number | string;
-  /**
-   * The comment date and time separated with a space.
-   */
-  publication: string;
-};
+export type CommentProps = Pick<
+  CommentType,
+  'approved' | 'content' | 'id' | 'meta' | 'parentId'
+> &
+  Pick<CommentFormProps, 'Notice' | 'saveComment'> & {
+    /**
+     * Enable or disable the reply button. Default: true.
+     */
+    canReply?: boolean;
+  };
 
 /**
  * Comment component
@@ -58,19 +43,34 @@ export type CommentProps = Pick<CommentFormProps, 'Notice' | 'saveComment'> & {
  * Render a single comment.
  */
 const Comment: FC<CommentProps> = ({
-  author,
+  approved,
   canReply = true,
   content,
   id,
+  meta,
   Notice,
   parentId,
-  publication,
   saveComment,
   ...props
 }) => {
   const intl = useIntl();
+  const { website } = useSettings();
   const [isReplying, setIsReplying] = useState<boolean>(false);
-  const [publicationDate, publicationTime] = publication.split(' ');
+
+  if (!approved) {
+    return (
+      <div className={styles.wrapper}>
+        {intl.formatMessage({
+          defaultMessage: 'This comment is awaiting moderation...',
+          description: 'Comment: awaiting moderation',
+          id: '6a1Uo6',
+        })}
+      </div>
+    );
+  }
+
+  const { author, date } = meta;
+  const [publicationDate, publicationTime] = date.split(' ');
 
   const avatarAltText = intl.formatMessage(
     {
@@ -97,8 +97,6 @@ const Comment: FC<CommentProps> = ({
     id: '2fD5CI',
   });
 
-  const { website } = useSettings();
-
   const commentSchema: WithContext<CommentSchema> = {
     '@context': 'https://schema.org',
     '@id': `${website.url}/#comment-${id}`,
@@ -110,17 +108,17 @@ const Comment: FC<CommentProps> = ({
     author: {
       '@type': 'Person',
       name: author.name,
-      image: author.avatar,
-      url: author.url,
+      image: author.avatar?.src,
+      url: author.website,
     },
     creator: {
       '@type': 'Person',
       name: author.name,
-      image: author.avatar,
-      url: author.url,
+      image: author.avatar?.src,
+      url: author.website,
     },
-    dateCreated: publication,
-    datePublished: publication,
+    dateCreated: date,
+    datePublished: date,
     text: content,
   };
 
@@ -136,17 +134,19 @@ const Comment: FC<CommentProps> = ({
         className={`${styles.wrapper} ${styles['wrapper--comment']}`}
       >
         <header className={styles.header}>
-          <div className={styles.avatar}>
-            <Image
-              src={author.avatar}
-              alt={avatarAltText}
-              layout="fill"
-              objectFit="cover"
-              {...props}
-            />
-          </div>
-          {author.url ? (
-            <Link href={author.url} className={styles.author}>
+          {author.avatar && (
+            <div className={styles.avatar}>
+              <Image
+                src={author.avatar?.src}
+                alt={avatarAltText}
+                layout="fill"
+                objectFit="cover"
+                {...props}
+              />
+            </div>
+          )}
+          {author.website ? (
+            <Link href={author.website} className={styles.author}>
               {author.name}
             </Link>
           ) : (
@@ -181,7 +181,7 @@ const Comment: FC<CommentProps> = ({
       {isReplying && (
         <CommentForm
           Notice={Notice}
-          parentId={id as number}
+          parentId={id}
           saveComment={saveComment}
           title={formTitle}
           className={`${styles.wrapper} ${styles['wrapper--form']}`}
diff --git a/src/components/organisms/layout/comments-list.fixture.tsx b/src/components/organisms/layout/comments-list.fixture.tsx
new file mode 100644
index 0000000..2618f77
--- /dev/null
+++ b/src/components/organisms/layout/comments-list.fixture.tsx
@@ -0,0 +1,106 @@
+import { Comment } from '@ts/types/app';
+
+export const comments: Comment[] = [
+  {
+    approved: true,
+    content:
+      'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
+    id: 1,
+    meta: {
+      author: {
+        avatar: {
+          alt: 'Author 1 avatar',
+          height: 480,
+          src: 'http://placeimg.com/640/480',
+          width: 640,
+        },
+        name: 'Author 1',
+      },
+      date: '2021-04-03 18:04:11',
+    },
+    parentId: 0,
+    replies: [],
+  },
+  {
+    approved: true,
+    content:
+      'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
+    id: 2,
+    meta: {
+      author: {
+        avatar: {
+          alt: 'Author 2 avatar',
+          height: 480,
+          src: 'http://placeimg.com/640/480',
+          width: 640,
+        },
+        name: 'Author 2',
+        website: '#',
+      },
+      date: '2021-04-03 23:30:20',
+    },
+    parentId: 0,
+    replies: [
+      {
+        approved: true,
+        content:
+          'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
+        id: 4,
+        meta: {
+          author: {
+            avatar: {
+              alt: 'Author 4 avatar',
+              height: 480,
+              src: 'http://placeimg.com/640/480',
+              width: 640,
+            },
+            name: 'Author 4',
+          },
+          date: '2021-04-03 23:04:24',
+        },
+        parentId: 2,
+        replies: [],
+      },
+      {
+        approved: true,
+        content:
+          'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
+        id: 5,
+        meta: {
+          author: {
+            avatar: {
+              alt: 'Author 1 avatar',
+              height: 480,
+              src: 'http://placeimg.com/640/480',
+              width: 640,
+            },
+            name: 'Author 1',
+          },
+          date: '2021-04-04 08:05:14',
+        },
+        parentId: 2,
+        replies: [],
+      },
+    ],
+  },
+  {
+    approved: false,
+    content:
+      'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
+    id: 3,
+    meta: {
+      author: {
+        avatar: {
+          alt: 'Author 3',
+          height: 480,
+          src: 'http://placeimg.com/640/480',
+          width: 640,
+        },
+        name: 'Author 3',
+      },
+      date: '2021-09-13 13:24:54',
+    },
+    parentId: 0,
+    replies: [],
+  },
+];
diff --git a/src/components/organisms/layout/comments-list.stories.tsx b/src/components/organisms/layout/comments-list.stories.tsx
index 22cc9d9..5ed0f2a 100644
--- a/src/components/organisms/layout/comments-list.stories.tsx
+++ b/src/components/organisms/layout/comments-list.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CommentsListComponent, { type Comment } from './comments-list';
+import CommentsListComponent from './comments-list';
+import { comments } from './comments-list.fixture';
 
 const saveComment = async () => {
   /** Do nothing. */
@@ -71,62 +72,6 @@ const Template: ComponentStory<typeof CommentsListComponent> = (args) => (
   <CommentsListComponent {...args} />
 );
 
-const comments: Comment[] = [
-  {
-    author: {
-      avatar: 'http://placeimg.com/640/480',
-      name: 'Author 1',
-    },
-    content:
-      'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
-    id: 1,
-    publication: '2021-04-03 18:04:11',
-  },
-  {
-    child: [
-      {
-        author: {
-          avatar: 'http://placeimg.com/640/480',
-          name: 'Author 4',
-        },
-        content:
-          'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
-        id: 4,
-        publication: '2021-04-03 23:04:24',
-      },
-      {
-        author: {
-          avatar: 'http://placeimg.com/640/480',
-          name: 'Author 1',
-        },
-        content:
-          'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
-        id: 5,
-        publication: '2021-04-04 08:05:14',
-      },
-    ],
-    author: {
-      avatar: 'http://placeimg.com/640/480',
-      name: 'Author 2',
-      url: '#',
-    },
-    content:
-      'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
-    id: 2,
-    publication: '2021-04-03 23:30:20',
-  },
-  {
-    author: {
-      avatar: 'http://placeimg.com/640/480',
-      name: 'Author 3',
-    },
-    content:
-      'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
-    id: 3,
-    publication: '2021-09-13 13:24:54',
-  },
-];
-
 /**
  * Layout Stories - Without child comments
  */
diff --git a/src/components/organisms/layout/comments-list.test.tsx b/src/components/organisms/layout/comments-list.test.tsx
index e135ec9..b0a2467 100644
--- a/src/components/organisms/layout/comments-list.test.tsx
+++ b/src/components/organisms/layout/comments-list.test.tsx
@@ -1,65 +1,7 @@
 import { render } from '@test-utils';
-import CommentsList, { type Comment } from './comments-list';
-
-const comments: Comment[] = [
-  {
-    author: {
-      avatar: 'http://placeimg.com/640/480',
-      name: 'Author 1',
-    },
-    content:
-      'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
-    id: 1,
-    publication: '2021-04-03 18:04:11',
-  },
-  {
-    child: [
-      {
-        author: {
-          avatar: 'http://placeimg.com/640/480',
-          name: 'Author 4',
-        },
-        content:
-          'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
-        id: 4,
-        publication: '2021-04-03 23:04:24',
-      },
-      {
-        author: {
-          avatar: 'http://placeimg.com/640/480',
-          name: 'Author 1',
-        },
-        content:
-          'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
-        id: 5,
-        publication: '2021-04-04 08:05:14',
-      },
-    ],
-    author: {
-      avatar: 'http://placeimg.com/640/480',
-      name: 'Author 2',
-      url: '#',
-    },
-    content:
-      'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
-    id: 2,
-    publication: '2021-04-03 23:30:20',
-  },
-  {
-    author: {
-      avatar: 'http://placeimg.com/640/480',
-      name: 'Author 3',
-    },
-    content:
-      'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
-    id: 3,
-    publication: '2021-05-13 13:24:54',
-  },
-];
-
-const saveComment = async () => {
-  /** Do nothing. */
-};
+import { saveComment } from './comment.fixture';
+import CommentsList from './comments-list';
+import { comments } from './comments-list.fixture';
 
 describe('CommentsList', () => {
   it('renders a comments list', () => {
diff --git a/src/components/organisms/layout/comments-list.tsx b/src/components/organisms/layout/comments-list.tsx
index f04354c..97eccb7 100644
--- a/src/components/organisms/layout/comments-list.tsx
+++ b/src/components/organisms/layout/comments-list.tsx
@@ -1,13 +1,10 @@
 import SingleComment, {
   type CommentProps,
 } from '@components/organisms/layout/comment';
+import { Comment } from '@ts/types/app';
 import { FC } from 'react';
 import styles from './comments-list.module.scss';
 
-export type Comment = Omit<CommentProps, 'canReply' | 'saveComment'> & {
-  child?: Comment[];
-};
-
 export type CommentsListProps = Pick<CommentProps, 'Notice' | 'saveComment'> & {
   /**
    * An array of comments.
@@ -42,7 +39,7 @@ const CommentsList: FC<CommentsListProps> = ({
   ): JSX.Element[] => {
     const isLastLevel = startLevel === depth;
 
-    return commentsList.map(({ child, ...comment }) => (
+    return commentsList.map(({ replies, ...comment }) => (
       <li key={comment.id} className={styles.item}>
         <SingleComment
           canReply={!isLastLevel}
@@ -50,8 +47,8 @@ const CommentsList: FC<CommentsListProps> = ({
           saveComment={saveComment}
           {...comment}
         />
-        {child && !isLastLevel && (
-          <ol className={styles.list}>{getItems(child, startLevel + 1)}</ol>
+        {replies && !isLastLevel && (
+          <ol className={styles.list}>{getItems(replies, startLevel + 1)}</ol>
         )}
       </li>
     ));
diff --git a/src/components/organisms/layout/posts-list.fixture.tsx b/src/components/organisms/layout/posts-list.fixture.tsx
new file mode 100644
index 0000000..b0afdf8
--- /dev/null
+++ b/src/components/organisms/layout/posts-list.fixture.tsx
@@ -0,0 +1,61 @@
+import { type Post } 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.';
+
+export const introPost2 =
+  'Illum quae asperiores quod aut necessitatibus itaque excepturi voluptas. Incidunt exercitationem ullam saepe alias consequatur sed. Quam veniam quaerat voluptatum earum quia quisquam fugiat sed perspiciatis. Et velit saepe est recusandae facilis eos eum ipsum.';
+
+export const introPost3 =
+  'Sunt aperiam ut rem impedit dolor id sit. Reprehenderit ipsum iusto fugiat. Quaerat laboriosam magnam facilis. Totam sint aliquam voluptatem in quis laborum sunt eum. Enim aut debitis officiis porro iure quia nihil voluptas ipsum. Praesentium quis necessitatibus cumque quia qui velit quos dolorem.';
+
+export const cover = {
+  alt: 'cover',
+  height: 480,
+  src: 'http://placeimg.com/640/480',
+  width: 640,
+};
+
+export const posts: Post[] = [
+  {
+    intro: introPost1,
+    id: 'post-1',
+    meta: {
+      cover,
+      dates: { publication: '2022-02-26' },
+      wordsCount: introPost1.split(' ').length,
+      thematics: [
+        { id: 1, name: 'Cat 1', slug: '#' },
+        { id: 2, name: 'Cat 2', slug: '#' },
+      ],
+      commentsCount: 1,
+    },
+    title: 'Ratione velit fuga',
+    url: '#',
+  },
+  {
+    intro: introPost2,
+    id: 'post-2',
+    meta: {
+      dates: { publication: '2022-02-20' },
+      wordsCount: introPost2.split(' ').length,
+      thematics: [{ id: 2, name: 'Cat 2', slug: '#' }],
+      commentsCount: 0,
+    },
+    title: 'Debitis laudantium laudantium',
+    url: '#',
+  },
+  {
+    intro: introPost3,
+    id: 'post-3',
+    meta: {
+      cover,
+      dates: { publication: '2021-12-20' },
+      wordsCount: introPost3.split(' ').length,
+      thematics: [{ id: 1, name: 'Cat 1', slug: '#' }],
+      commentsCount: 3,
+    },
+    title: 'Quaerat ut corporis',
+    url: '#',
+  },
+];
diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
index 360d441..68e3dc0 100644
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ b/src/components/organisms/layout/posts-list.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import PostsList, { type Post } from './posts-list';
+import PostsList from './posts-list';
+import { posts } from './posts-list.fixture';
 
 /**
  * PostsList - Storybook Meta
@@ -154,67 +155,6 @@ const Template: ComponentStory<typeof PostsList> = (args) => (
   <PostsList {...args} />
 );
 
-const excerpt1 =
-  '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.';
-const excerpt2 =
-  'Illum quae asperiores quod aut necessitatibus itaque excepturi voluptas. Incidunt exercitationem ullam saepe alias consequatur sed. Quam veniam quaerat voluptatum earum quia quisquam fugiat sed perspiciatis. Et velit saepe est recusandae facilis eos eum ipsum.';
-const excerpt3 =
-  'Sunt aperiam ut rem impedit dolor id sit. Reprehenderit ipsum iusto fugiat. Quaerat laboriosam magnam facilis. Totam sint aliquam voluptatem in quis laborum sunt eum. Enim aut debitis officiis porro iure quia nihil voluptas ipsum. Praesentium quis necessitatibus cumque quia qui velit quos dolorem.';
-
-const posts: Post[] = [
-  {
-    excerpt: excerpt1,
-    id: 'post-1',
-    meta: {
-      dates: { publication: '2022-02-26' },
-      readingTime: { wordsCount: excerpt1.split(' ').length },
-      thematics: [
-        { id: 'cat-1', name: 'Cat 1', url: '#' },
-        { id: 'cat-2', name: 'Cat 2', url: '#' },
-      ],
-      commentsCount: 1,
-    },
-    title: 'Ratione velit fuga',
-    url: '#',
-    cover: {
-      alt: 'cover',
-      height: 480,
-      src: 'http://placeimg.com/640/480',
-      width: 640,
-    },
-  },
-  {
-    excerpt: excerpt2,
-    id: 'post-2',
-    meta: {
-      dates: { publication: '2022-02-20' },
-      readingTime: { wordsCount: excerpt2.split(' ').length },
-      thematics: [{ id: 'cat-2', name: 'Cat 2', url: '#' }],
-      commentsCount: 0,
-    },
-    title: 'Debitis laudantium laudantium',
-    url: '#',
-  },
-  {
-    excerpt: excerpt3,
-    id: 'post-3',
-    meta: {
-      dates: { publication: '2021-12-20' },
-      readingTime: { wordsCount: excerpt3.split(' ').length },
-      thematics: [{ id: 'cat-1', name: 'Cat 1', url: '#' }],
-      commentsCount: 3,
-    },
-    title: 'Quaerat ut corporis',
-    url: '#',
-    cover: {
-      alt: 'cover',
-      height: 480,
-      src: 'http://placeimg.com/640/480',
-      width: 640,
-    },
-  },
-];
-
 /**
  * PostsList Stories - Default
  */
diff --git a/src/components/organisms/layout/posts-list.test.tsx b/src/components/organisms/layout/posts-list.test.tsx
index dfb9825..1bab466 100644
--- a/src/components/organisms/layout/posts-list.test.tsx
+++ b/src/components/organisms/layout/posts-list.test.tsx
@@ -1,66 +1,6 @@
 import { render, screen } from '@test-utils';
-import PostsList, { Post } from './posts-list';
-
-const excerpt1 =
-  '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.';
-const excerpt2 =
-  'Illum quae asperiores quod aut necessitatibus itaque excepturi voluptas. Incidunt exercitationem ullam saepe alias consequatur sed. Quam veniam quaerat voluptatum earum quia quisquam fugiat sed perspiciatis. Et velit saepe est recusandae facilis eos eum ipsum.';
-const excerpt3 =
-  'Sunt aperiam ut rem impedit dolor id sit. Reprehenderit ipsum iusto fugiat. Quaerat laboriosam magnam facilis. Totam sint aliquam voluptatem in quis laborum sunt eum. Enim aut debitis officiis porro iure quia nihil voluptas ipsum. Praesentium quis necessitatibus cumque quia qui velit quos dolorem.';
-
-const posts: Post[] = [
-  {
-    excerpt: excerpt1,
-    id: 'post-1',
-    meta: {
-      dates: { publication: '2022-02-26' },
-      readingTime: { wordsCount: excerpt1.split(' ').length },
-      thematics: [
-        { id: 'cat-1', name: 'Cat 1', url: '#' },
-        { id: 'cat-2', name: 'Cat 2', url: '#' },
-      ],
-      commentsCount: 1,
-    },
-    title: 'Ratione velit fuga',
-    url: '#',
-    cover: {
-      alt: 'cover',
-      height: 480,
-      src: 'http://placeimg.com/640/480',
-      width: 640,
-    },
-  },
-  {
-    excerpt: excerpt2,
-    id: 'post-2',
-    meta: {
-      dates: { publication: '2022-02-20' },
-      readingTime: { wordsCount: excerpt2.split(' ').length },
-      thematics: [{ id: 'cat-2', name: 'Cat 2', url: '#' }],
-      commentsCount: 0,
-    },
-    title: 'Debitis laudantium laudantium',
-    url: '#',
-  },
-  {
-    excerpt: excerpt3,
-    id: 'post-3',
-    meta: {
-      dates: { publication: '2021-12-20' },
-      readingTime: { wordsCount: excerpt3.split(' ').length },
-      thematics: [{ id: 'cat-1', name: 'Cat 1', url: '#' }],
-      commentsCount: 3,
-    },
-    title: 'Quaerat ut corporis',
-    url: '#',
-    cover: {
-      alt: 'cover',
-      height: 480,
-      src: 'http://placeimg.com/640/480',
-      width: 640,
-    },
-  },
-];
+import PostsList from './posts-list';
+import { posts } from './posts-list.fixture';
 
 describe('PostsList', () => {
   it('renders the correct number of posts', () => {
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 608130e..91fc62d 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -3,7 +3,7 @@ import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
 import ProgressBar from '@components/atoms/loaders/progress-bar';
 import Spinner from '@components/atoms/loaders/spinner';
 import Pagination, {
-  PaginationProps,
+  type PaginationProps,
 } from '@components/molecules/nav/pagination';
 import useIsMounted from '@utils/hooks/use-is-mounted';
 import useSettings from '@utils/hooks/use-settings';
@@ -12,7 +12,7 @@ import { useIntl } from 'react-intl';
 import styles from './posts-list.module.scss';
 import Summary, { type SummaryProps } from './summary';
 
-export type Post = SummaryProps & {
+export type Post = Omit<SummaryProps, 'titleLevel'> & {
   /**
    * The post id.
    */
diff --git a/src/components/organisms/layout/summary.fixture.tsx b/src/components/organisms/layout/summary.fixture.tsx
new file mode 100644
index 0000000..fbc46a5
--- /dev/null
+++ b/src/components/organisms/layout/summary.fixture.tsx
@@ -0,0 +1,25 @@
+import { type SummaryMeta } from './summary';
+
+export const cover = {
+  alt: 'A cover',
+  height: 480,
+  src: 'http://placeimg.com/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', slug: '#' },
+    { id: 2, name: 'Cat 2', slug: '#' },
+  ],
+  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
index 2512051..0b91e24 100644
--- a/src/components/organisms/layout/summary.stories.tsx
+++ b/src/components/organisms/layout/summary.stories.tsx
@@ -1,5 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Summary from './summary';
+import { cover, intro, meta } from './summary.fixture';
 
 /**
  * Summary - Storybook Meta
@@ -83,32 +84,12 @@ const Template: ComponentStory<typeof Summary> = (args) => (
   <Summary {...args} />
 );
 
-const cover = {
-  alt: 'A cover',
-  height: 480,
-  src: 'http://placeimg.com/640/480',
-  width: 640,
-};
-
-const excerpt =
-  '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.';
-
-const meta = {
-  dates: { publication: '2022-04-11' },
-  readingTime: { wordsCount: excerpt.split(' ').length },
-  thematics: [
-    { id: 'cat-1', name: 'Cat 1', url: '#' },
-    { id: 'cat-2', name: 'Cat 2', url: '#' },
-  ],
-  commentsCount: 1,
-};
-
 /**
  * Summary Stories - Default
  */
 export const Default = Template.bind({});
 Default.args = {
-  excerpt,
+  intro,
   meta,
   title: 'Odio odit necessitatibus',
   url: '#',
@@ -119,9 +100,8 @@ Default.args = {
  */
 export const WithCover = Template.bind({});
 WithCover.args = {
-  cover,
-  excerpt,
-  meta,
+  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
index 9e34254..7617c26 100644
--- a/src/components/organisms/layout/summary.test.tsx
+++ b/src/components/organisms/layout/summary.test.tsx
@@ -1,35 +1,12 @@
 import { render, screen } from '@test-utils';
 import Summary from './summary';
-
-const cover = {
-  alt: 'A cover',
-  height: 480,
-  src: 'http://placeimg.com/640/480',
-  width: 640,
-};
-
-const excerpt =
-  '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.';
-
-const meta = {
-  dates: { publication: '2022-04-11' },
-  readingTime: { wordsCount: excerpt.split(' ').length },
-  thematics: [
-    { id: 'cat-1', name: 'Cat 1', url: '#' },
-    { id: 'cat-2', name: 'Cat 2', url: '#' },
-  ],
-  commentsCount: 1,
-};
-
-const title = 'Odio odit necessitatibus';
-
-const url = '#';
+import { cover, intro, meta, title, url } from './summary.fixture';
 
 describe('Summary', () => {
   it('renders a title wrapped in a h2 element', () => {
     render(
       <Summary
-        excerpt={excerpt}
+        intro={intro}
         meta={meta}
         title={title}
         titleLevel={2}
@@ -42,16 +19,15 @@ describe('Summary', () => {
   });
 
   it('renders an excerpt', () => {
-    render(<Summary excerpt={excerpt} meta={meta} title={title} url={url} />);
-    expect(screen.getByText(excerpt)).toBeInTheDocument();
+    render(<Summary intro={intro} meta={meta} title={title} url={url} />);
+    expect(screen.getByText(intro)).toBeInTheDocument();
   });
 
   it('renders a cover', () => {
     render(
       <Summary
-        cover={cover}
-        excerpt={excerpt}
-        meta={meta}
+        intro={intro}
+        meta={{ ...meta, cover }}
         title={title}
         url={url}
       />
@@ -60,19 +36,19 @@ describe('Summary', () => {
   });
 
   it('renders a link to the full post', () => {
-    render(<Summary excerpt={excerpt} meta={meta} title={title} url={url} />);
+    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 excerpt={excerpt} meta={meta} title={title} url={url} />);
+    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 excerpt={excerpt} meta={meta} title={title} url={url} />);
-    expect(screen.getByText(meta.thematics[0].name)).toBeInTheDocument();
+    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
index 3831c0c..ca51cd6 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -6,7 +6,7 @@ import ResponsiveImage, {
   type ResponsiveImageProps,
 } from '@components/molecules/images/responsive-image';
 import Meta, { type MetaData } from '@components/molecules/layout/meta';
-import { type Dates } from '@ts/types/app';
+import { type Article, type Meta as MetaType } from '@ts/types/app';
 import useReadingTime from '@utils/hooks/use-reading-time';
 import { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
@@ -17,43 +17,22 @@ export type Cover = Pick<
   'alt' | 'src' | 'width' | 'height'
 >;
 
-export type SummaryMetaLink = {
-  id: number | string;
-  name: string;
-  url: string;
-};
-
-export type SummaryMetaReadingTime = {
-  wordsCount: number;
-  onlyMinutes?: boolean;
-};
-
-export type SummaryMeta = {
-  author?: string;
-  commentsCount?: number;
-  dates: Dates;
-  readingTime: SummaryMetaReadingTime;
-  thematics?: SummaryMetaLink[];
-  topics?: SummaryMetaLink[];
-};
+export type SummaryMeta = Pick<
+  MetaType<'article'>,
+  | 'author'
+  | 'commentsCount'
+  | 'cover'
+  | 'dates'
+  | 'thematics'
+  | 'topics'
+  | 'wordsCount'
+>;
 
-export type SummaryProps = {
+export type SummaryProps = Pick<Article, 'intro' | 'title'> & {
   /**
-   * The post cover.
-   */
-  cover?: Cover;
-  /**
-   * The post excerpt.
-   */
-  excerpt: string;
-  /**
-   * The post meta.
+   * The post metadata.
    */
   meta: SummaryMeta;
-  /**
-   * The post title.
-   */
-  title: string;
   /**
    * The heading level (hn).
    */
@@ -70,8 +49,7 @@ export type SummaryProps = {
  * Render a page summary.
  */
 const Summary: FC<SummaryProps> = ({
-  cover,
-  excerpt,
+  intro,
   meta,
   title,
   titleLevel = 2,
@@ -91,14 +69,13 @@ const Summary: FC<SummaryProps> = ({
       ),
     }
   );
-  const { wordsCount, onlyMinutes } = meta.readingTime;
-  const readingTime = useReadingTime(wordsCount, onlyMinutes);
-
-  const getMeta = (data: SummaryMeta): MetaData => {
-    const { author, commentsCount, dates, thematics, topics } = data;
+  const { author, commentsCount, cover, dates, thematics, topics, wordsCount } =
+    meta;
+  const readingTime = useReadingTime(wordsCount, true);
 
+  const getMeta = (): MetaData => {
     return {
-      author,
+      author: author?.name,
       publication: { date: dates.publication },
       update:
         dates.update && dates.publication !== dates.update
@@ -106,12 +83,12 @@ const Summary: FC<SummaryProps> = ({
           : undefined,
       readingTime,
       thematics: thematics?.map((thematic) => (
-        <Link key={thematic.id} href={thematic.url}>
+        <Link key={thematic.id} href={thematic.slug}>
           {thematic.name}
         </Link>
       )),
       topics: topics?.map((topic) => (
-        <Link key={topic.id} href={topic.url}>
+        <Link key={topic.id} href={topic.slug}>
           {topic.name}
         </Link>
       )),
@@ -134,11 +111,7 @@ const Summary: FC<SummaryProps> = ({
         </Link>
       </header>
       <div className={styles.body}>
-        {typeof excerpt === 'string' ? (
-          <div dangerouslySetInnerHTML={{ __html: excerpt }} />
-        ) : (
-          excerpt
-        )}
+        <div dangerouslySetInnerHTML={{ __html: intro }} />
         <ButtonLink target={url} className={styles['read-more']}>
           <>
             {readMore}
@@ -148,7 +121,7 @@ const Summary: FC<SummaryProps> = ({
       </div>
       <footer className={styles.footer}>
         <Meta
-          data={getMeta(meta)}
+          data={getMeta()}
           layout="column"
           itemsLayout="stacked"
           withSeparator={false}
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index bc1d7b6..88e3785 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -1,7 +1,9 @@
 import ButtonLink from '@components/atoms/buttons/button-link';
 import Heading from '@components/atoms/headings/heading';
 import Link from '@components/atoms/links/link';
+import { comments } from '@components/organisms/layout/comments-list.fixture';
 import PostsList from '@components/organisms/layout/posts-list';
+import { posts } from '@components/organisms/layout/posts-list.fixture';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import Sharing from '@components/organisms/widgets/sharing';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
@@ -267,62 +269,6 @@ const postBreadcrumb = [
   { id: 'post', url: '#', name: pageTitle },
 ];
 
-const comments = [
-  {
-    author: {
-      avatar: 'http://placeimg.com/640/480',
-      name: 'Author 1',
-    },
-    content:
-      'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
-    id: 1,
-    publication: '2021-04-03 18:04:11',
-  },
-  {
-    child: [
-      {
-        author: {
-          avatar: 'http://placeimg.com/640/480',
-          name: 'Author 4',
-        },
-        content:
-          'Vel ullam in porro tempore. Maiores quos quia magnam beatae nemo libero velit numquam. Sapiente aliquid cumque. Velit neque in adipisci aut assumenda voluptates earum. Autem esse autem provident in tempore. Aut distinctio dolor qui repellat et et adipisci velit aspernatur.',
-        id: 4,
-        publication: '2021-04-03 23:04:24',
-      },
-      {
-        author: {
-          avatar: 'http://placeimg.com/640/480',
-          name: 'Author 1',
-        },
-        content:
-          'Sed non omnis. Quam porro est. Quae tempore quae. Exercitationem eos non velit voluptatem velit voluptas iusto. Sit debitis qui ipsam quo asperiores numquam veniam praesentium ut.',
-        id: 5,
-        publication: '2021-04-04 08:05:14',
-      },
-    ],
-    author: {
-      avatar: 'http://placeimg.com/640/480',
-      name: 'Author 2',
-      url: '#',
-    },
-    content:
-      'Sit sed error quasi voluptatem velit voluptas aut. Aut debitis eveniet. Praesentium dolores quia voluptate vero quis dicta quasi vel. Aut voluptas accusantium ut aut quidem consectetur itaque laboriosam occaecati.',
-    id: 2,
-    publication: '2021-04-03 23:30:20',
-  },
-  {
-    author: {
-      avatar: 'http://placeimg.com/640/480',
-      name: 'Author 3',
-    },
-    content:
-      'Natus consequatur maiores aperiam dolore eius nesciunt ut qui et. Ab ea nobis est. Eaque dolor corrupti id aut. Impedit architecto autem qui neque rerum ab dicta dignissimos voluptates.',
-    id: 3,
-    publication: '2021-09-13 13:24:54',
-  },
-];
-
 /**
  * Page Layout Stories - Post
  */
@@ -393,7 +339,7 @@ Post.args = {
     />,
   ],
   withToC: true,
-  comments,
+  comments: comments,
   allowComments: true,
 };
 
@@ -402,67 +348,6 @@ const postsListBreadcrumb = [
   { id: 'blog', url: '#', name: 'Blog' },
 ];
 
-const excerpt1 =
-  '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.';
-const excerpt2 =
-  'Illum quae asperiores quod aut necessitatibus itaque excepturi voluptas. Incidunt exercitationem ullam saepe alias consequatur sed. Quam veniam quaerat voluptatum earum quia quisquam fugiat sed perspiciatis. Et velit saepe est recusandae facilis eos eum ipsum.';
-const excerpt3 =
-  'Sunt aperiam ut rem impedit dolor id sit. Reprehenderit ipsum iusto fugiat. Quaerat laboriosam magnam facilis. Totam sint aliquam voluptatem in quis laborum sunt eum. Enim aut debitis officiis porro iure quia nihil voluptas ipsum. Praesentium quis necessitatibus cumque quia qui velit quos dolorem.';
-
-const posts = [
-  {
-    excerpt: excerpt1,
-    id: 'post-1',
-    meta: {
-      dates: { publication: '2022-02-26' },
-      readingTime: { wordsCount: excerpt1.split(' ').length },
-      thematics: [
-        { id: 'cat-1', name: 'Cat 1', url: '#' },
-        { id: 'cat-2', name: 'Cat 2', url: '#' },
-      ],
-      commentsCount: 1,
-    },
-    title: 'Ratione velit fuga',
-    url: '#',
-    cover: {
-      alt: 'cover',
-      height: 480,
-      src: 'http://placeimg.com/640/480',
-      width: 640,
-    },
-  },
-  {
-    excerpt: excerpt2,
-    id: 'post-2',
-    meta: {
-      dates: { publication: '2022-02-20' },
-      readingTime: { wordsCount: excerpt2.split(' ').length },
-      thematics: [{ id: 'cat-2', name: 'Cat 2', url: '#' }],
-      commentsCount: 0,
-    },
-    title: 'Debitis laudantium laudantium',
-    url: '#',
-  },
-  {
-    excerpt: excerpt3,
-    id: 'post-3',
-    meta: {
-      dates: { publication: '2021-12-20' },
-      readingTime: { wordsCount: excerpt3.split(' ').length },
-      thematics: [{ id: 'cat-1', name: 'Cat 1', url: '#' }],
-      commentsCount: 3,
-    },
-    title: 'Quaerat ut corporis',
-    url: '#',
-    cover: {
-      alt: 'cover',
-      height: 480,
-      src: 'http://placeimg.com/640/480',
-      width: 640,
-    },
-  },
-];
-
 const blogCategories = [
   { name: 'Cat 1', url: '#' },
   {
diff --git a/src/components/templates/page/page-layout.test.tsx b/src/components/templates/page/page-layout.test.tsx
index a0c8923..f2d07d7 100644
--- a/src/components/templates/page/page-layout.test.tsx
+++ b/src/components/templates/page/page-layout.test.tsx
@@ -1,3 +1,4 @@
+import { comments } from '@components/organisms/layout/comments-list.fixture';
 import { render, screen } from '@test-utils';
 import { BreadcrumbList } from 'schema-dts';
 import PageLayout from './page-layout';
@@ -88,18 +89,6 @@ describe('PageLayout', () => {
   });
 
   it('renders the comments list', () => {
-    const comments = [
-      {
-        author: {
-          avatar: 'http://placeimg.com/640/480',
-          name: 'Author 1',
-        },
-        content:
-          'Voluptas ducimus inventore. Libero ut et doloribus. Earum nostrum ab. Aliquam rem dolores omnis voluptate. Sunt aut ut et.',
-        id: 1,
-        publication: '2021-04-03 18:04:11',
-      },
-    ];
     render(
       <PageLayout
         breadcrumb={breadcrumb}
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 812fffe..2878538 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -18,11 +18,8 @@ import {
   type NextPageWithLayout,
 } from '@ts/types/app';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
-import useAddClassName from '@utils/hooks/use-add-classname';
-import useAttributes from '@utils/hooks/use-attributes';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import usePrism, { type OptionalPrismPlugin } from '@utils/hooks/use-prism';
-import useQuerySelectorAll from '@utils/hooks/use-query-selector-all';
 import useReadingTime from '@utils/hooks/use-reading-time';
 import useSettings from '@utils/hooks/use-settings';
 import { GetStaticPaths, GetStaticProps } from 'next';
@@ -66,12 +63,15 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
     title,
     url: `/article/${slug}`,
   });
-  const readingTime = useReadingTime(wordsCount || 0, true);
+  const readingTime = useReadingTime(wordsCount, true);
 
   const headerMeta: PageLayoutProps['headerMeta'] = {
     author: author?.name,
     publication: { date: dates.publication },
-    update: dates.update ? { date: dates.update } : undefined,
+    update:
+      dates.update && dates.publication !== dates.update
+        ? { date: dates.update }
+        : undefined,
     readingTime,
     thematics:
       thematics &&
@@ -167,35 +167,6 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
     '@graph': [webpageSchema, blogSchema, blogPostSchema],
   };
 
-  /**
-   * Convert the comments list to the right format.
-   *
-   * @param {Comment[]} list - The comments list.
-   * @returns {PageLayoutProps['comments']} - The formatted comments list.
-   */
-  const getCommentsList = (list: Comment[]): PageLayoutProps['comments'] => {
-    return list.map((comment) => {
-      const {
-        content: commentBody,
-        id: commentId,
-        meta: commentMeta,
-        parentId,
-        replies,
-      } = comment;
-      const { author: commentAuthor, date } = commentMeta;
-      const { name, avatar, website: authorUrl } = commentAuthor;
-
-      return {
-        author: { name, avatar: avatar!.src, url: authorUrl },
-        content: commentBody,
-        id: commentId,
-        publication: date,
-        child: getCommentsList(replies),
-        parentId,
-      };
-    });
-  };
-
   const prismPlugins: OptionalPrismPlugin[] = ['command-line', 'line-numbers'];
   const { attributes, className } = usePrism({ plugins: prismPlugins });
   const lineNumbersClassName = className
@@ -254,7 +225,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
         bodyClassName={styles.body}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        comments={data && getCommentsList(data)}
+        comments={data}
         footerMeta={footerMeta}
         headerMeta={headerMeta}
         id={id as number}
@@ -314,7 +285,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
   return {
     paths,
-    fallback: true,
+    fallback: false,
   };
 };
 
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 90f56be..dd04fad 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,34 +1,27 @@
 import Notice from '@components/atoms/layout/notice';
-import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import PostsList from '@components/organisms/layout/posts-list';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import { getLayout } from '@components/templates/layout/layout';
 import PageLayout from '@components/templates/page/page-layout';
 import { type EdgesResponse } from '@services/graphql/api';
-import {
-  getArticleFromRawData,
-  getArticles,
-  getTotalArticles,
-} from '@services/graphql/articles';
+import { getArticles, getTotalArticles } from '@services/graphql/articles';
 import {
   getThematicsPreview,
   getTotalThematics,
 } from '@services/graphql/thematics';
 import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics';
+import { type NextPageWithLayout } from '@ts/types/app';
 import {
-  type Article,
-  type Meta,
-  type NextPageWithLayout,
-} from '@ts/types/app';
-import {
-  RawThematicPreview,
-  RawTopicPreview,
   type RawArticle,
+  type RawThematicPreview,
+  type RawTopicPreview,
 } from '@ts/types/raw-data';
 import { settings } from '@utils/config';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
 import {
   getLinksListItems,
   getPageLinkFromRawData,
+  getPostsList,
 } from '@utils/helpers/pages';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import usePagination from '@utils/hooks/use-pagination';
@@ -119,62 +112,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     '@graph': [webpageSchema, blogSchema],
   };
 
-  /**
-   * Retrieve the formatted meta.
-   *
-   * @param {Meta<'article'>} meta - The article meta.
-   * @returns {Post['meta']} The formatted meta.
-   */
-  const getPostMeta = (meta: Meta<'article'>): Post['meta'] => {
-    const { commentsCount, dates, thematics, wordsCount } = meta;
-
-    return {
-      commentsCount,
-      dates,
-      readingTime: { wordsCount: wordsCount || 0, onlyMinutes: true },
-      thematics: thematics?.map((thematic) => {
-        return { ...thematic, url: `/thematique/${thematic.slug}` };
-      }),
-    };
-  };
-
-  /**
-   * Retrieve the formatted posts.
-   *
-   * @param {Article[]} posts - An array of articles.
-   * @returns {Post[]} An array of formatted posts.
-   */
-  const getPosts = (posts: Article[]): Post[] => {
-    return posts.map((post) => {
-      return {
-        ...post,
-        cover: post.meta.cover,
-        excerpt: post.intro,
-        meta: getPostMeta(post.meta),
-        url: `/article/${post.slug}`,
-      };
-    });
-  };
-
-  /**
-   * Retrieve the posts list from raw data.
-   *
-   * @param {EdgesResponse<RawArticle>[]} rawData - The raw data.
-   * @returns {Post[]} An array of posts.
-   */
-  const getPostsList = (rawData: EdgesResponse<RawArticle>[]): Post[] => {
-    const articlesList: RawArticle[] = [];
-    rawData.forEach((articleData) =>
-      articleData.edges.forEach((edge) => {
-        articlesList.push(edge.node);
-      })
-    );
-
-    return getPosts(
-      articlesList.map((article) => getArticleFromRawData(article))
-    );
-  };
-
   const {
     data,
     error,
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index e8c93f7..8f50ddd 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -1,10 +1,9 @@
-import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import PostsList from '@components/organisms/layout/posts-list';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import { getLayout } from '@components/templates/layout/layout';
 import PageLayout from '@components/templates/page/page-layout';
 import { type EdgesResponse } from '@services/graphql/api';
 import {
-  getArticleFromRawData,
   getArticles,
   getArticlesEndCursor,
   getTotalArticles,
@@ -14,11 +13,7 @@ import {
   getTotalThematics,
 } from '@services/graphql/thematics';
 import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics';
-import {
-  type Article,
-  type Meta,
-  type NextPageWithLayout,
-} from '@ts/types/app';
+import { type NextPageWithLayout } from '@ts/types/app';
 import {
   type RawArticle,
   type RawThematicPreview,
@@ -29,6 +24,7 @@ import { loadTranslation, type Messages } from '@utils/helpers/i18n';
 import {
   getLinksListItems,
   getPageLinkFromRawData,
+  getPostsList,
 } from '@utils/helpers/pages';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useRedirection from '@utils/hooks/use-redirection';
@@ -131,62 +127,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     '@graph': [webpageSchema, blogSchema],
   };
 
-  /**
-   * Retrieve the formatted meta.
-   *
-   * @param {Meta<'article'>} meta - The article meta.
-   * @returns {Post['meta']} The formatted meta.
-   */
-  const getPostMeta = (meta: Meta<'article'>): Post['meta'] => {
-    const { commentsCount, dates, thematics, wordsCount } = meta;
-
-    return {
-      commentsCount,
-      dates,
-      readingTime: { wordsCount: wordsCount || 0, onlyMinutes: true },
-      thematics: thematics?.map((thematic) => {
-        return { ...thematic, url: `/thematique/${thematic.slug}` };
-      }),
-    };
-  };
-
-  /**
-   * Retrieve the formatted posts.
-   *
-   * @param {Article[]} posts - An array of articles.
-   * @returns {Post[]} An array of formatted posts.
-   */
-  const getPosts = (posts: Article[]): Post[] => {
-    return posts.map((post) => {
-      return {
-        ...post,
-        cover: post.meta.cover,
-        excerpt: post.intro,
-        meta: getPostMeta(post.meta),
-        url: `/article/${post.slug}`,
-      };
-    });
-  };
-
-  /**
-   * Retrieve the posts list from raw data.
-   *
-   * @param {EdgesResponse<RawArticle>[]} rawData - The raw data.
-   * @returns {Post[]} An array of posts.
-   */
-  const getPostsList = (rawData: EdgesResponse<RawArticle>[]): Post[] => {
-    const articlesList: RawArticle[] = [];
-    rawData.forEach((articleData) =>
-      articleData.edges.forEach((edge) => {
-        articlesList.push(edge.node);
-      })
-    );
-
-    return getPosts(
-      articlesList.map((article) => getArticleFromRawData(article))
-    );
-  };
-
   const thematicsListTitle = intl.formatMessage({
     defaultMessage: 'Thematics',
     description: 'BlogPage: thematics list widget title',
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index e9b36fa..27c715d 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -1,14 +1,18 @@
 import Link from '@components/atoms/links/link';
-import SocialLink, { SocialWebsite } from '@components/atoms/links/social-link';
+import SocialLink, {
+  type SocialWebsite,
+} from '@components/atoms/links/social-link';
 import Spinner from '@components/atoms/loaders/spinner';
 import ResponsiveImage from '@components/molecules/images/responsive-image';
 import Code from '@components/molecules/layout/code';
 import Gallery from '@components/organisms/images/gallery';
-import Overview, { OverviewMeta } from '@components/organisms/layout/overview';
+import Overview, {
+  type OverviewMeta,
+} from '@components/organisms/layout/overview';
 import Sharing from '@components/organisms/widgets/sharing';
 import { getLayout } from '@components/templates/layout/layout';
 import PageLayout, {
-  PageLayoutProps,
+  type PageLayoutProps,
 } from '@components/templates/page/page-layout';
 import styles from '@styles/pages/project.module.scss';
 import {
@@ -16,11 +20,11 @@ import {
   type ProjectPreview,
   type Repos,
 } from '@ts/types/app';
-import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import { loadTranslation, type Messages } from '@utils/helpers/i18n';
 import { getProjectData, getProjectFilenames } from '@utils/helpers/projects';
 import { capitalize } from '@utils/helpers/strings';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
-import useGithubApi, { RepoData } from '@utils/hooks/use-github-api';
+import useGithubApi, { type RepoData } from '@utils/hooks/use-github-api';
 import useSettings from '@utils/hooks/use-settings';
 import { MDXComponents, NestedMDXComponents } from 'mdx/types';
 import { GetStaticPaths, GetStaticProps } from 'next';
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index d500b6b..9ca289a 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -1,13 +1,13 @@
 import Link from '@components/atoms/links/link';
 import CardsList, {
-  CardsListItem,
+  type CardsListItem,
 } from '@components/organisms/layout/cards-list';
 import { getLayout } from '@components/templates/layout/layout';
 import PageLayout from '@components/templates/page/page-layout';
 import PageContent, { meta } from '@content/pages/projects.mdx';
 import styles from '@styles/pages/projects.module.scss';
 import { type NextPageWithLayout, type ProjectCard } from '@ts/types/app';
-import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import { loadTranslation, type Messages } from '@utils/helpers/i18n';
 import { getProjectsCard } from '@utils/helpers/projects';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 8895015..c69d931 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -1,34 +1,26 @@
 import Notice from '@components/atoms/layout/notice';
 import Spinner from '@components/atoms/loaders/spinner';
-import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import PostsList from '@components/organisms/layout/posts-list';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import { getLayout } from '@components/templates/layout/layout';
 import PageLayout from '@components/templates/page/page-layout';
-import { type EdgesResponse } from '@services/graphql/api';
-import {
-  getArticleFromRawData,
-  getArticles,
-  getTotalArticles,
-} from '@services/graphql/articles';
+import { getArticles, getTotalArticles } from '@services/graphql/articles';
 import {
   getThematicsPreview,
   getTotalThematics,
 } from '@services/graphql/thematics';
 import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics';
+import { type NextPageWithLayout } from '@ts/types/app';
 import {
-  type Article,
-  type Meta,
-  type NextPageWithLayout,
-} from '@ts/types/app';
-import {
-  RawThematicPreview,
-  RawTopicPreview,
   type RawArticle,
+  type RawThematicPreview,
+  type RawTopicPreview,
 } from '@ts/types/raw-data';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
 import {
   getLinksListItems,
   getPageLinkFromRawData,
+  getPostsList,
 } from '@utils/helpers/pages';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useDataFromAPI from '@utils/hooks/use-data-from-api';
@@ -145,62 +137,6 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
     getTotalArticles(query.s as string)
   );
 
-  /**
-   * Retrieve the formatted meta.
-   *
-   * @param {Meta<'article'>} meta - The article meta.
-   * @returns {Post['meta']} The formatted meta.
-   */
-  const getPostMeta = (meta: Meta<'article'>): Post['meta'] => {
-    const { commentsCount, dates, thematics, wordsCount } = meta;
-
-    return {
-      commentsCount,
-      dates,
-      readingTime: { wordsCount: wordsCount || 0, onlyMinutes: true },
-      thematics: thematics?.map((thematic) => {
-        return { ...thematic, url: `/thematique/${thematic.slug}` };
-      }),
-    };
-  };
-
-  /**
-   * Retrieve the formatted posts.
-   *
-   * @param {Article[]} posts - An array of articles.
-   * @returns {Post[]} An array of formatted posts.
-   */
-  const getPosts = (posts: Article[]): Post[] => {
-    return posts.map((post) => {
-      return {
-        ...post,
-        cover: post.meta.cover,
-        excerpt: post.intro,
-        meta: getPostMeta(post.meta),
-        url: `/article/${post.slug}`,
-      };
-    });
-  };
-
-  /**
-   * Retrieve the posts list from raw data.
-   *
-   * @param {EdgesResponse<RawArticle>[]} rawData - The raw data.
-   * @returns {Post[]} An array of posts.
-   */
-  const getPostsList = (rawData: EdgesResponse<RawArticle>[]): Post[] => {
-    const articlesList: RawArticle[] = [];
-    rawData.forEach((articleData) =>
-      articleData.edges.forEach((edge) => {
-        articlesList.push(edge.node);
-      })
-    );
-
-    return getPosts(
-      articlesList.map((article) => getArticleFromRawData(article))
-    );
-  };
-
   /**
    * Load more posts handler.
    */
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index b4845eb..95843cd 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -1,6 +1,6 @@
 import Heading from '@components/atoms/headings/heading';
 import ResponsiveImage from '@components/molecules/images/responsive-image';
-import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import PostsList from '@components/organisms/layout/posts-list';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import { getLayout } from '@components/templates/layout/layout';
 import PageLayout, {
@@ -14,7 +14,6 @@ import {
 } from '@services/graphql/topics';
 import styles from '@styles/pages/topic.module.scss';
 import {
-  type Article,
   type NextPageWithLayout,
   type PageLink,
   type Topic,
@@ -23,7 +22,7 @@ import { loadTranslation, type Messages } from '@utils/helpers/i18n';
 import {
   getLinksListItems,
   getPageLinkFromRawData,
-  getPostMeta,
+  getPostsWithUrl,
 } from '@utils/helpers/pages';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
@@ -109,27 +108,6 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
     '@graph': [webpageSchema, articleSchema],
   };
 
-  const getPosts = (array: Article[]): Post[] => {
-    return array.map((article) => {
-      const {
-        intro: articleIntro,
-        meta: articleMeta,
-        slug: articleSlug,
-        ...remainingData
-      } = article;
-
-      const { cover: articleCover, ...remainingMeta } = articleMeta;
-
-      return {
-        cover: articleCover,
-        excerpt: articleIntro,
-        meta: getPostMeta(remainingMeta),
-        url: `/article/${articleSlug}`,
-        ...remainingData,
-      };
-    });
-  };
-
   const topicsListTitle = intl.formatMessage({
     defaultMessage: 'Other topics',
     description: 'TopicPage: other topics list widget title',
@@ -206,7 +184,7 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
             </Heading>
             <PostsList
               baseUrl="/sujet/page/"
-              posts={getPosts(articles)}
+              posts={getPostsWithUrl(articles)}
               total={articles.length}
               titleLevel={3}
               byYear={true}
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index ce4eccf..a91483e 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -1,5 +1,5 @@
 import Heading from '@components/atoms/headings/heading';
-import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import PostsList from '@components/organisms/layout/posts-list';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import { getLayout } from '@components/templates/layout/layout';
 import PageLayout, {
@@ -12,7 +12,6 @@ import {
   getTotalThematics,
 } from '@services/graphql/thematics';
 import {
-  type Article,
   type NextPageWithLayout,
   type PageLink,
   type Thematic,
@@ -21,7 +20,7 @@ import { loadTranslation, type Messages } from '@utils/helpers/i18n';
 import {
   getLinksListItems,
   getPageLinkFromRawData,
-  getPostMeta,
+  getPostsWithUrl,
 } from '@utils/helpers/pages';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
@@ -99,27 +98,6 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
     '@graph': [webpageSchema, articleSchema],
   };
 
-  const getPosts = (array: Article[]): Post[] => {
-    return array.map((article) => {
-      const {
-        intro: articleIntro,
-        meta: articleMeta,
-        slug: articleSlug,
-        ...remainingData
-      } = article;
-
-      const { cover, ...remainingMeta } = articleMeta;
-
-      return {
-        cover,
-        excerpt: articleIntro,
-        meta: getPostMeta(remainingMeta),
-        url: `/article/${articleSlug}`,
-        ...remainingData,
-      };
-    });
-  };
-
   const thematicsListTitle = intl.formatMessage({
     defaultMessage: 'Other thematics',
     description: 'ThematicPage: other thematics list widget title',
@@ -187,7 +165,7 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
             </Heading>
             <PostsList
               baseUrl="/thematique/page/"
-              posts={getPosts(articles)}
+              posts={getPostsWithUrl(articles)}
               total={articles.length}
               titleLevel={3}
               byYear={true}
diff --git a/src/services/graphql/articles.query.ts b/src/services/graphql/articles.query.ts
index 7bd0901..3e1f575 100644
--- a/src/services/graphql/articles.query.ts
+++ b/src/services/graphql/articles.query.ts
@@ -56,7 +56,6 @@ export const articleBySlugQuery = `query PostBy($slug: ID!) {
       }
     }
     info {
-      readingTime
       wordsCount
     }
     modified
@@ -90,11 +89,6 @@ export const articlesQuery = `query Articles($after: String = "", $first: Int =
             }
           }
         }
-        author {
-          node {
-            name
-          }
-        }
         commentCount
         contentParts {
           beforeMore
@@ -113,7 +107,6 @@ export const articlesQuery = `query Articles($after: String = "", $first: Int =
           }
         }
         info {
-          readingTime
           wordsCount
         }
         modified
diff --git a/src/services/graphql/articles.ts b/src/services/graphql/articles.ts
index f130872..f0ba4e4 100644
--- a/src/services/graphql/articles.ts
+++ b/src/services/graphql/articles.ts
@@ -71,13 +71,12 @@ export const getArticleFromRawData = (data: RawArticle): Article => {
     id: databaseId,
     intro: contentParts.beforeMore,
     meta: {
-      author: getAuthorFromRawData(author.node, 'page'),
+      author: author && getAuthorFromRawData(author.node, 'page'),
       commentsCount: commentCount || 0,
       cover: featuredImage?.node
         ? getImageFromRawData(featuredImage.node)
         : undefined,
       dates: { publication: date, update: modified },
-      readingTime: info.readingTime,
       seo: {
         description: seo?.metaDesc || '',
         title: seo?.title || '',
diff --git a/src/services/graphql/thematics.query.ts b/src/services/graphql/thematics.query.ts
index 3b3ebd6..5a82133 100644
--- a/src/services/graphql/thematics.query.ts
+++ b/src/services/graphql/thematics.query.ts
@@ -15,13 +15,6 @@ export const thematicBySlugQuery = `query ThematicBy($slug: ID!) {
               }
             }
           }
-          author {
-            node {
-              gravatarUrl
-              name
-              url
-            }
-          }
           commentCount
           contentParts {
             beforeMore
@@ -40,7 +33,6 @@ export const thematicBySlugQuery = `query ThematicBy($slug: ID!) {
             }
           }
           info {
-            readingTime
             wordsCount
           }
           modified
@@ -67,7 +59,6 @@ export const thematicBySlugQuery = `query ThematicBy($slug: ID!) {
       }
     }
     info {
-      readingTime
       wordsCount
     }
     modified
diff --git a/src/services/graphql/thematics.ts b/src/services/graphql/thematics.ts
index e526db8..fd9d9f5 100644
--- a/src/services/graphql/thematics.ts
+++ b/src/services/graphql/thematics.ts
@@ -117,7 +117,6 @@ export const getThematicFromRawData = (data: RawThematic): Thematic => {
         ? getImageFromRawData(featuredImage.node)
         : undefined,
       dates: { publication: date, update: modified },
-      readingTime: info.readingTime,
       seo: {
         description: seo?.metaDesc || '',
         title: seo?.title || '',
diff --git a/src/services/graphql/topics.query.ts b/src/services/graphql/topics.query.ts
index 4574256..57b2569 100644
--- a/src/services/graphql/topics.query.ts
+++ b/src/services/graphql/topics.query.ts
@@ -16,13 +16,6 @@ export const topicBySlugQuery = `query TopicBy($slug: ID!) {
               }
             }
           }
-          author {
-            node {
-              gravatarUrl
-              name
-              url
-            }
-          }
           commentCount
           contentParts {
             beforeMore
@@ -41,7 +34,6 @@ export const topicBySlugQuery = `query TopicBy($slug: ID!) {
             }
           }
           info {
-            readingTime
             wordsCount
           }
           modified
@@ -68,7 +60,6 @@ export const topicBySlugQuery = `query TopicBy($slug: ID!) {
       }
     }
     info {
-      readingTime
       wordsCount
     }
     modified
diff --git a/src/services/graphql/topics.ts b/src/services/graphql/topics.ts
index 3c92442..277580f 100644
--- a/src/services/graphql/topics.ts
+++ b/src/services/graphql/topics.ts
@@ -119,7 +119,6 @@ export const getTopicFromRawData = (data: RawTopic): Topic => {
         : undefined,
       dates: { publication: date, update: modified },
       website: acfTopics.officialWebsite,
-      readingTime: info.readingTime,
       seo: {
         description: seo?.metaDesc || '',
         title: seo?.title || '',
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index feff5a5..cb5429b 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -44,7 +44,7 @@ export type Comment = {
   content: string;
   id: number;
   meta: CommentMeta;
-  parentId: number;
+  parentId?: number;
   replies: Comment[];
 };
 
@@ -80,7 +80,6 @@ export type Meta<T extends PageKind> = {
   cover?: Image;
   dates: Dates;
   license?: T extends 'project' ? string : never;
-  readingTime?: number;
   repos?: T extends 'project' ? Repos : never;
   seo: SEO;
   tagline?: T extends 'project' ? string : never;
@@ -88,7 +87,7 @@ export type Meta<T extends PageKind> = {
   thematics?: T extends 'article' | 'topic' ? PageLink[] : never;
   topics?: T extends 'article' | 'thematic' ? PageLink[] : never;
   website?: T extends 'topic' ? string : never;
-  wordsCount?: number;
+  wordsCount: number;
 };
 
 export type Page<T extends PageKind> = {
diff --git a/src/ts/types/mdx.ts b/src/ts/types/mdx.ts
index 6b72f21..16538c1 100644
--- a/src/ts/types/mdx.ts
+++ b/src/ts/types/mdx.ts
@@ -11,10 +11,7 @@ export type MDXPageMeta = Pick<Meta<'page'>, 'cover' | 'dates' | 'seo'> & {
   title: string;
 };
 
-export type MDXProjectMeta = Omit<
-  Meta<'project'>,
-  'readingTime' | 'wordsCount'
-> & {
+export type MDXProjectMeta = Exclude<Meta<'project'>, 'wordsCount'> & {
   intro: string;
   title: string;
 };
diff --git a/src/ts/types/raw-data.ts b/src/ts/types/raw-data.ts
index ba6d596..dc3db90 100644
--- a/src/ts/types/raw-data.ts
+++ b/src/ts/types/raw-data.ts
@@ -25,7 +25,6 @@ export type ContentParts = {
 };
 
 export type Info = {
-  readingTime: number;
   wordsCount: number;
 };
 
@@ -66,7 +65,7 @@ export type RawArticlePreview = Pick<
 >;
 
 export type RawPage = {
-  author: NodeResponse<RawAuthor<'page'>>;
+  author?: NodeResponse<RawAuthor<'page'>>;
   contentParts: ContentParts;
   databaseId: number;
   date: string;
diff --git a/src/utils/helpers/pages.ts b/src/utils/helpers/pages.ts
index 62337db..1a388e1 100644
--- a/src/utils/helpers/pages.ts
+++ b/src/utils/helpers/pages.ts
@@ -1,7 +1,10 @@
 import { type Post } from '@components/organisms/layout/posts-list';
 import { type LinksListItems } from '@components/organisms/widgets/links-list-widget';
-import { type Meta, type PageLink } from '@ts/types/app';
+import { type EdgesResponse } from '@services/graphql/api';
+import { getArticleFromRawData } from '@services/graphql/articles';
+import { type Article, type PageLink } from '@ts/types/app';
 import {
+  type RawArticle,
   type RawThematicPreview,
   type RawTopicPreview,
 } from '@ts/types/raw-data';
@@ -52,23 +55,35 @@ export const getLinksListItems = (
 };
 
 /**
- * Retrieve the formatted meta.
+ * Retrieve the posts list with the article URL.
  *
- * @param {Meta<'article'>} meta - The article meta.
- * @returns {Post['meta']} The formatted meta.
+ * @param {Article[]} posts - An array of articles.
+ * @returns {Post[]} An array of posts with full article URL.
  */
-export const getPostMeta = (meta: Meta<'article'>): Post['meta'] => {
-  const { commentsCount, dates, thematics, topics, wordsCount } = meta;
+export const getPostsWithUrl = (posts: Article[]): Post[] => {
+  return posts.map((post) => {
+    return {
+      ...post,
+      url: `/article/${post.slug}`,
+    };
+  });
+};
 
-  return {
-    commentsCount,
-    dates,
-    readingTime: { wordsCount: wordsCount || 0, onlyMinutes: true },
-    thematics: thematics?.map((thematic) => {
-      return { ...thematic, url: `/thematique/${thematic.slug}` };
-    }),
-    topics: topics?.map((topic) => {
-      return { ...topic, url: `/sujet/${topic.slug}` };
-    }),
-  };
+/**
+ * Retrieve the posts list from raw data.
+ *
+ * @param {EdgesResponse<RawArticle>[]} rawData - The raw data.
+ * @returns {Post[]} An array of posts.
+ */
+export const getPostsList = (rawData: EdgesResponse<RawArticle>[]): Post[] => {
+  const articlesList: RawArticle[] = [];
+  rawData.forEach((articleData) =>
+    articleData.edges.forEach((edge) => {
+      articlesList.push(edge.node);
+    })
+  );
+
+  return getPostsWithUrl(
+    articlesList.map((article) => getArticleFromRawData(article))
+  );
 };
-- 
cgit v1.2.3

