From 362cf45bc520a68a1c1be20e1189ca2307577dde Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 19 Apr 2022 12:12:15 +0200
Subject: chore: add a Code component

---
 src/utils/hooks/use-prism-plugins.tsx | 115 ++++++++++++++++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 src/utils/hooks/use-prism-plugins.tsx

(limited to 'src/utils/hooks')

diff --git a/src/utils/hooks/use-prism-plugins.tsx b/src/utils/hooks/use-prism-plugins.tsx
new file mode 100644
index 0000000..c4959ac
--- /dev/null
+++ b/src/utils/hooks/use-prism-plugins.tsx
@@ -0,0 +1,115 @@
+import Prism from 'prismjs';
+import { useEffect, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+
+export type PrismPlugin =
+  | 'autoloader'
+  | 'color-scheme'
+  | 'command-line'
+  | 'copy-to-clipboard'
+  | 'diff-highlight'
+  | 'inline-color'
+  | 'line-highlight'
+  | 'line-numbers'
+  | 'match-braces'
+  | 'normalize-whitespace'
+  | 'show-language'
+  | 'toolbar';
+
+/**
+ * Import and configure all given Prism plugins.
+ *
+ * @param {PrismPlugin[]} prismPlugins - The Prism plugins to activate.
+ */
+const loadPrismPlugins = async (prismPlugins: PrismPlugin[]) => {
+  for (const plugin of prismPlugins) {
+    try {
+      if (plugin === 'color-scheme') {
+        await import(`@utils/plugins/prism-${plugin}`);
+      } else {
+        await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`);
+      }
+
+      if (plugin === 'autoloader') {
+        Prism.plugins.autoloader.languages_path = '/prism/';
+      }
+    } catch (error) {
+      console.error(
+        'usePrismPlugins: an error occurred while loading Prism plugins.'
+      );
+      console.error(error);
+    }
+  }
+};
+
+/**
+ * Load both the given Prism plugins and the default plugins.
+ *
+ * @param {PrismPlugin[]} plugins - The Prism plugins to activate.
+ */
+const usePrismPlugins = (plugins: PrismPlugin[]) => {
+  const intl = useIntl();
+
+  const copyText = intl.formatMessage({
+    defaultMessage: 'Copy',
+    description: 'usePrismPlugins: copy button text (not clicked)',
+    id: 'FIE/eC',
+  });
+  const copiedText = intl.formatMessage({
+    defaultMessage: 'Copied!',
+    description: 'usePrismPlugins: copy button text (clicked)',
+    id: 'MzLdEl',
+  });
+  const errorText = intl.formatMessage({
+    defaultMessage: 'Use Ctrl+c to copy',
+    description: 'usePrismPlugins: copy button error text',
+    id: '0XePFn',
+  });
+  const darkTheme = intl.formatMessage({
+    defaultMessage: 'Dark Theme 🌙',
+    description: 'usePrismPlugins: toggle dark theme button text',
+    id: 'jo9vr5',
+  });
+  const lightTheme = intl.formatMessage({
+    defaultMessage: 'Light Theme 🌞',
+    description: 'usePrismPlugins: toggle light theme button text',
+    id: '6EUEtH',
+  });
+
+  const attributes = {
+    'data-prismjs-copy': copyText,
+    'data-prismjs-copy-success': copiedText,
+    'data-prismjs-copy-error': errorText,
+    'data-prismjs-color-scheme-dark': darkTheme,
+    'data-prismjs-color-scheme-light': lightTheme,
+  };
+
+  const defaultPlugins: PrismPlugin[] = useMemo(
+    () => [
+      'toolbar',
+      'autoloader',
+      'show-language',
+      'copy-to-clipboard',
+      'color-scheme',
+      'match-braces',
+      'normalize-whitespace',
+    ],
+    []
+  );
+
+  useEffect(() => {
+    loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
+      Prism.highlightAll();
+    });
+  }, [defaultPlugins, plugins]);
+
+  const defaultPluginsClasses = 'match-braces';
+  const pluginsClasses = plugins.join(' ');
+
+  return {
+    pluginsAttribute: attributes,
+    pluginsClassName: `${defaultPluginsClasses} ${pluginsClasses}`,
+  };
+};
+
+export default usePrismPlugins;
-- 
cgit v1.2.3


From 947a06bfdfdc5bca62c27fa2ee27f0ab9fefa0ea Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 22 Apr 2022 18:33:04 +0200
Subject: chore: add a TableOfContents component

---
 .../widgets/table-of-contents.stories.tsx          |  41 ++++++
 .../organisms/widgets/table-of-contents.test.tsx   |  12 ++
 .../organisms/widgets/table-of-contents.tsx        |  53 +++++++
 src/utils/hooks/use-headings-tree.tsx              | 153 +++++++++++++++++++++
 4 files changed, 259 insertions(+)
 create mode 100644 src/components/organisms/widgets/table-of-contents.stories.tsx
 create mode 100644 src/components/organisms/widgets/table-of-contents.test.tsx
 create mode 100644 src/components/organisms/widgets/table-of-contents.tsx
 create mode 100644 src/utils/hooks/use-headings-tree.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/organisms/widgets/table-of-contents.stories.tsx b/src/components/organisms/widgets/table-of-contents.stories.tsx
new file mode 100644
index 0000000..fba7c54
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.stories.tsx
@@ -0,0 +1,41 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import ToCWidget from './table-of-contents';
+
+/**
+ * TableOfContents - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Widgets',
+  component: ToCWidget,
+  argTypes: {
+    wrapper: {
+      control: {
+        type: null,
+      },
+      description:
+        'A reference to the HTML element that contains the headings.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as ComponentMeta<typeof ToCWidget>;
+
+const Template: ComponentStory<typeof ToCWidget> = (args) => (
+  <ToCWidget {...args} />
+);
+
+/**
+ * Widgets Stories - Table of Contents
+ */
+export const TableOfContents = Template.bind({});
+TableOfContents.args = {};
diff --git a/src/components/organisms/widgets/table-of-contents.test.tsx b/src/components/organisms/widgets/table-of-contents.test.tsx
new file mode 100644
index 0000000..2064f39
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from '@test-utils';
+import TableOfContents from './table-of-contents';
+
+describe('TableOfContents', () => {
+  it('renders the ToC title', () => {
+    const divEl = document.createElement('div');
+    render(<TableOfContents wrapper={divEl} />);
+    expect(
+      screen.getByRole('heading', { level: 2, name: /Table of Contents/i })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/widgets/table-of-contents.tsx b/src/components/organisms/widgets/table-of-contents.tsx
new file mode 100644
index 0000000..3778e02
--- /dev/null
+++ b/src/components/organisms/widgets/table-of-contents.tsx
@@ -0,0 +1,53 @@
+import useHeadingsTree, { type Heading } from '@utils/hooks/use-headings-tree';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import LinksListWidget, { type LinksListItems } from './links-list-widget';
+
+type TableOfContentsProps = {
+  /**
+   * A reference to the HTML element that contains the headings.
+   */
+  wrapper: HTMLElement;
+};
+
+/**
+ * Table of Contents widget component
+ *
+ * Render a table of contents.
+ */
+const TableOfContents: FC<TableOfContentsProps> = ({ wrapper }) => {
+  const intl = useIntl();
+  const headingsTree = useHeadingsTree(wrapper);
+  const title = intl.formatMessage({
+    defaultMessage: 'Table of Contents',
+    description: 'TableOfContents: the widget title',
+    id: 'WKG9wj',
+  });
+
+  /**
+   * Convert an headings tree to list items.
+   *
+   * @param {Heading[]} tree - The headings tree.
+   * @returns {LinksListItems[]} The list items.
+   */
+  const getItems = (tree: Heading[]): LinksListItems[] => {
+    return tree.map((heading) => {
+      return {
+        name: heading.title,
+        url: `#${heading.id}`,
+        child: getItems(heading.children),
+      };
+    });
+  };
+
+  return (
+    <LinksListWidget
+      kind="ordered"
+      title={title}
+      level={2}
+      items={getItems(headingsTree)}
+    />
+  );
+};
+
+export default TableOfContents;
diff --git a/src/utils/hooks/use-headings-tree.tsx b/src/utils/hooks/use-headings-tree.tsx
new file mode 100644
index 0000000..5506e8b
--- /dev/null
+++ b/src/utils/hooks/use-headings-tree.tsx
@@ -0,0 +1,153 @@
+import { slugify } from '@utils/helpers/slugify';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+export type Heading = {
+  /**
+   * The heading depth.
+   */
+  depth: number;
+  /**
+   * The heading id.
+   */
+  id: string;
+  /**
+   * The heading children.
+   */
+  children: Heading[];
+  /**
+   * The heading title.
+   */
+  title: string;
+};
+
+/**
+ * Get the headings tree of the given HTML element.
+ *
+ * @param {HTMLElement} wrapper - An HTML element that contains the headings.
+ * @returns {Heading[]} The headings tree.
+ */
+const useHeadingsTree = (wrapper: HTMLElement): Heading[] => {
+  const depths = useMemo(() => ['h2', 'h3', 'h4', 'h5', 'h6'], []);
+  const [allHeadings, setAllHeadings] =
+    useState<NodeListOf<HTMLHeadingElement>>();
+  const [headingsTree, setHeadingsTree] = useState<Heading[]>([]);
+
+  useEffect(() => {
+    const query = depths.join(', ');
+    const result: NodeListOf<HTMLHeadingElement> =
+      wrapper.querySelectorAll(query);
+    setAllHeadings(result);
+  }, [depths, wrapper]);
+
+  const getDepth = useCallback(
+    /**
+     * Retrieve the heading element depth.
+     *
+     * @param {HTMLHeadingElement} el - An heading element.
+     * @returns {number} The heading depth.
+     */
+    (el: HTMLHeadingElement): number => {
+      return depths.findIndex((depth) => depth === el.localName);
+    },
+    [depths]
+  );
+
+  const formatHeadings = useCallback(
+    /**
+     * Convert a list of headings into an array of Heading objects.
+     *
+     * @param {NodeListOf<HTMLHeadingElement>} headings - A list of headings.
+     * @returns {Heading[]} An array of Heading objects.
+     */
+    (headings: NodeListOf<HTMLHeadingElement>): Heading[] => {
+      const formattedHeadings: Heading[] = [];
+
+      Array.from(headings).forEach((heading) => {
+        const title: string = heading.textContent!;
+        const id = slugify(title);
+        const depth = getDepth(heading);
+        const children: Heading[] = [];
+
+        heading.id = id;
+
+        formattedHeadings.push({
+          depth,
+          id,
+          children,
+          title,
+        });
+      });
+
+      return formattedHeadings;
+    },
+    [getDepth]
+  );
+
+  const buildSubTree = useCallback(
+    /**
+     * Build the heading subtree.
+     *
+     * @param {Heading} parent - The heading parent.
+     * @param {Heading} currentHeading - The current heading element.
+     */
+    (parent: Heading, currentHeading: Heading): void => {
+      if (parent.depth === currentHeading.depth - 1) {
+        parent.children.push(currentHeading);
+      } else {
+        const lastItem = parent.children[parent.children.length - 1];
+        buildSubTree(lastItem, currentHeading);
+      }
+    },
+    []
+  );
+
+  const buildTree = useCallback(
+    /**
+     * Build a heading tree.
+     *
+     * @param {Heading[]} headings - An array of Heading objects.
+     * @returns {Heading[]} The headings tree.
+     */
+    (headings: Heading[]): Heading[] => {
+      const tree: Heading[] = [];
+
+      headings.forEach((heading) => {
+        if (heading.depth === 0) {
+          tree.push(heading);
+        } else {
+          const lastItem = tree[tree.length - 1];
+          buildSubTree(lastItem, heading);
+        }
+      });
+
+      return tree;
+    },
+    [buildSubTree]
+  );
+
+  const getHeadingsTree = useCallback(
+    /**
+     * Retrieve a headings tree from a list of headings element.
+     *
+     * @param {NodeListOf<HTMLHeadingElement>} headings - A headings list.
+     * @returns {Heading[]} The headings tree.
+     */
+    (headings: NodeListOf<HTMLHeadingElement>): Heading[] => {
+      const formattedHeadings = formatHeadings(headings);
+
+      return buildTree(formattedHeadings);
+    },
+    [formatHeadings, buildTree]
+  );
+
+  useEffect(() => {
+    if (allHeadings) {
+      const headingsList = getHeadingsTree(allHeadings);
+      setHeadingsTree(headingsList);
+    }
+  }, [allHeadings, getHeadingsTree]);
+
+  return headingsTree;
+};
+
+export default useHeadingsTree;
-- 
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/utils/hooks')

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 7e16f500cb7bc0cfd8bafbf6bb1555704f771231 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Apr 2022 12:13:34 +0200
Subject: chore: remove old pages, components, helpers and types

Since I'm using new components, I will also rewrite the GraphQL queries
so it is easier to start from scratch.
---
 __tests__/jest/components/Branding.test.tsx        |  24 -
 __tests__/jest/components/Copyright.test.tsx       |  13 -
 __tests__/jest/components/Header.test.tsx          |  12 -
 src/components/Branding/Branding.module.scss       | 169 -------
 src/components/Branding/Branding.tsx               | 107 -----
 src/components/Branding/Logo/Logo.module.scss      |  23 -
 src/components/Branding/Logo/Logo.tsx              |  32 --
 src/components/Breadcrumb/Breadcrumb.module.scss   |  29 --
 src/components/Breadcrumb/Breadcrumb.tsx           | 155 ------
 src/components/Buttons/Button/Button.tsx           |  35 --
 .../Buttons/ButtonHelp/ButtonHelp.module.scss      |  52 --
 src/components/Buttons/ButtonHelp/ButtonHelp.tsx   |  42 --
 src/components/Buttons/ButtonLink/ButtonLink.tsx   |  30 --
 .../Buttons/ButtonSubmit/ButtonSubmit.tsx          |  22 -
 .../Buttons/ButtonToolbar/ButtonToolbar.tsx        |  72 ---
 src/components/Buttons/Buttons.module.scss         | 289 -----------
 src/components/Buttons/index.tsx                   |   7 -
 src/components/Comment/Comment.module.scss         |  99 ----
 src/components/Comment/Comment.tsx                 | 200 --------
 src/components/CommentForm/CommentForm.module.scss |  25 -
 src/components/CommentForm/CommentForm.tsx         | 240 ---------
 .../CommentsList/CommentsList.module.scss          |  14 -
 src/components/CommentsList/CommentsList.tsx       |  69 ---
 src/components/ContactForm/ContactForm.module.scss |  21 -
 src/components/ContactForm/ContactForm.tsx         | 180 -------
 src/components/Copyright/Copyright.module.scss     |  33 --
 src/components/Copyright/Copyright.tsx             |  17 -
 src/components/Footer/Footer.module.scss           |  90 ----
 src/components/Footer/Footer.tsx                   |  54 ---
 src/components/FooterNav/FooterNav.module.scss     |  20 -
 src/components/FooterNav/FooterNav.tsx             |  45 --
 .../FormElements/Field/Field.module.scss           |  53 --
 src/components/FormElements/Field/Field.tsx        | 106 ----
 src/components/FormElements/Form/Form.module.scss  |  37 --
 src/components/FormElements/Form/Form.tsx          |  27 --
 .../FormElements/FormItem/FormItem.module.scss     |   4 -
 src/components/FormElements/FormItem/FormItem.tsx  |   7 -
 .../FormElements/Label/Label.module.scss           |  22 -
 src/components/FormElements/Label/Label.tsx        |  24 -
 .../FormElements/Toggle/Toggle.module.scss         |  75 ---
 src/components/FormElements/Toggle/Toggle.tsx      |  46 --
 src/components/FormElements/index.tsx              |   7 -
 src/components/Header/Header.module.scss           |  22 -
 src/components/Header/Header.tsx                   |  16 -
 src/components/Icons/Arrow/Arrow.module.scss       |   7 -
 src/components/Icons/Arrow/Arrow.tsx               |  81 ----
 src/components/Icons/Blog/Blog.module.scss         |  23 -
 src/components/Icons/Blog/Blog.tsx                 |  62 ---
 src/components/Icons/CV/CV.module.scss             |  54 ---
 src/components/Icons/CV/CV.tsx                     |  58 ---
 src/components/Icons/Close/Close.module.scss       |  13 -
 src/components/Icons/Close/Close.tsx               |  22 -
 src/components/Icons/Cog/Cog.module.scss           |  10 -
 src/components/Icons/Cog/Cog.tsx                   |  16 -
 src/components/Icons/Contact/Contact.module.scss   |  29 --
 src/components/Icons/Contact/Contact.tsx           |  54 ---
 .../Icons/Copyright/Copyright.module.scss          |   7 -
 src/components/Icons/Copyright/Copyright.tsx       |  23 -
 .../Icons/Hamburger/Hamburger.module.scss          |  56 ---
 src/components/Icons/Hamburger/Hamburger.tsx       |  10 -
 src/components/Icons/Home/Home.module.scss         |  42 --
 src/components/Icons/Home/Home.tsx                 |  42 --
 src/components/Icons/Moon/Moon.module.scss         |   8 -
 src/components/Icons/Moon/Moon.tsx                 |  25 -
 src/components/Icons/Projects/Projects.module.scss |  40 --
 src/components/Icons/Projects/Projects.tsx         |  66 ---
 src/components/Icons/Search/Search.module.scss     |  31 --
 src/components/Icons/Search/Search.tsx             |  30 --
 src/components/Icons/Sun/Sun.module.scss           |   8 -
 src/components/Icons/Sun/Sun.tsx                   |  25 -
 src/components/Icons/index.tsx                     |  29 --
 src/components/Layouts/Layout.module.scss          |  20 -
 src/components/Layouts/Layout.tsx                  | 155 ------
 src/components/MDX/CodeBlock/CodeBlock.tsx         | 115 -----
 src/components/MDX/Gallery/Gallery.module.scss     |  32 --
 src/components/MDX/Gallery/Gallery.tsx             |  22 -
 src/components/MDX/Link/Link.tsx                   |  23 -
 .../ResponsiveImage/ResponsiveImage.module.scss    |  50 --
 .../MDX/ResponsiveImage/ResponsiveImage.tsx        |  40 --
 src/components/MDX/index.tsx                       |   6 -
 src/components/Main/Main.module.scss               |   7 -
 src/components/Main/Main.tsx                       |  12 -
 src/components/MainNav/MainNav.module.scss         | 242 ----------
 src/components/MainNav/MainNav.tsx                 | 155 ------
 src/components/MetaItems/Author/Author.tsx         |  21 -
 .../MetaItems/CommentsCount/CommentsCount.tsx      |  43 --
 src/components/MetaItems/Dates/Dates.tsx           |  58 ---
 .../MetaItems/MetaItem/MetaItem.module.scss        |  18 -
 src/components/MetaItems/MetaItem/MetaItem.tsx     |  36 --
 src/components/MetaItems/PostsCount/PostsCount.tsx |  29 --
 .../MetaItems/ReadingTime/ReadingTime.tsx          |  59 ---
 src/components/MetaItems/Thematics/Thematics.tsx   |  43 --
 src/components/MetaItems/Topics/Topics.tsx         |  37 --
 src/components/MetaItems/Website/Website.tsx       |  21 -
 src/components/MetaItems/index.tsx                 |  21 -
 src/components/Notice/Notice.module.scss           |  28 --
 src/components/Notice/Notice.tsx                   |  21 -
 src/components/Pagination/Pagination.module.scss   |  92 ----
 src/components/Pagination/Pagination.tsx           | 136 ------
 .../PaginationCursor/PaginationCursor.module.scss  |  43 --
 .../PaginationCursor/PaginationCursor.tsx          |  43 --
 src/components/PostFooter/PostFooter.module.scss   |  18 -
 src/components/PostFooter/PostFooter.tsx           |  53 --
 src/components/PostHeader/PostHeader.module.scss   |  83 ----
 src/components/PostHeader/PostHeader.tsx           |  57 ---
 src/components/PostMeta/PostMeta.module.scss       |  31 --
 src/components/PostMeta/PostMeta.tsx               |  67 ---
 src/components/PostPreview/PostPreview.module.scss | 105 ----
 src/components/PostPreview/PostPreview.tsx         | 120 -----
 src/components/PostsList/PostsList.module.scss     |  51 --
 src/components/PostsList/PostsList.tsx             | 110 -----
 .../ProjectPreview/ProjectPreview.module.scss      |  98 ----
 src/components/ProjectPreview/ProjectPreview.tsx   |  73 ---
 .../ProjectSummary/ProjectSummary.module.scss      |  73 ---
 src/components/ProjectSummary/ProjectSummary.tsx   | 178 -------
 .../ProjectsList/ProjectsList.module.scss          |  25 -
 src/components/ProjectsList/ProjectsList.tsx       |  21 -
 src/components/SearchForm/SearchForm.module.scss   |   6 -
 src/components/SearchForm/SearchForm.tsx           |  70 ---
 .../Settings/AckeeSelect/AckeeSelect.module.scss   |   6 -
 .../Settings/AckeeSelect/AckeeSelect.tsx           |  96 ----
 .../Settings/PrismThemeToggle/PrismThemeToggle.tsx |  50 --
 .../Settings/ReduceMotion/ReduceMotion.tsx         |  48 --
 src/components/Settings/Settings.module.scss       |  17 -
 src/components/Settings/Settings.tsx               |  30 --
 .../Settings/ThemeToggle/ThemeToggle.tsx           |  41 --
 src/components/Sidebar/Sidebar.module.scss         |  43 --
 src/components/Sidebar/Sidebar.tsx                 |  40 --
 src/components/Spinner/Spinner.module.scss         |  48 --
 src/components/Spinner/Spinner.tsx                 |  24 -
 src/components/Toolbar/Toolbar.module.scss         | 114 -----
 src/components/Toolbar/Toolbar.tsx                 | 162 -------
 src/components/Tooltip/Tooltip.module.scss         | 120 -----
 src/components/Tooltip/Tooltip.tsx                 |  59 ---
 .../ExpandableWidget/ExpandableWidget.module.scss  | 146 ------
 .../ExpandableWidget/ExpandableWidget.tsx          |  61 ---
 src/components/WidgetParts/List/List.module.scss   |  49 --
 src/components/WidgetParts/List/List.tsx           |   7 -
 .../OrderedList/OrderedList.module.scss            |  66 ---
 .../WidgetParts/OrderedList/OrderedList.tsx        |   7 -
 src/components/WidgetParts/index.tsx               |   5 -
 .../Widgets/CVPreview/CVPreview.module.scss        |   6 -
 src/components/Widgets/CVPreview/CVPreview.tsx     |  45 --
 .../Widgets/RecentPosts/RecentPosts.module.scss    | 109 -----
 src/components/Widgets/RecentPosts/RecentPosts.tsx |  78 ---
 .../Widgets/RelatedThematics/RelatedThematics.tsx  |  41 --
 .../Widgets/RelatedTopics/RelatedTopics.tsx        |  41 --
 src/components/Widgets/Sharing/Sharing.module.scss | 193 --------
 src/components/Widgets/Sharing/Sharing.tsx         | 238 ---------
 .../Widgets/SocialMedia/SocialMedia.module.scss    |  59 ---
 src/components/Widgets/SocialMedia/SocialMedia.tsx | 113 -----
 .../Widgets/ThematicsList/ThematicsList.tsx        |  76 ---
 src/components/Widgets/ToC/ToC.tsx                 |  55 ---
 src/components/Widgets/TopicsList/TopicsList.tsx   |  76 ---
 src/components/Widgets/index.tsx                   |  21 -
 src/pages/404.tsx                                  |  85 ----
 src/pages/_app.tsx                                 |   9 +-
 src/pages/article/[slug].tsx                       | 291 -----------
 src/pages/blog/index.tsx                           | 269 -----------
 src/pages/blog/page/[id].tsx                       | 205 --------
 src/pages/contact.tsx                              | 151 ------
 src/pages/cv.tsx                                   | 181 -------
 src/pages/index.tsx                                | 241 ----------
 src/pages/mentions-legales.tsx                     | 150 ------
 src/pages/projet/[slug].tsx                        | 186 -------
 src/pages/projets.tsx                              | 128 -----
 src/pages/recherche/index.tsx                      | 213 --------
 src/pages/sujet/[slug].tsx                         | 224 ---------
 src/pages/thematique/[slug].tsx                    | 214 ---------
 src/services/graphql/api.ts                        |  25 -
 src/services/graphql/mutations.ts                  |  82 ----
 src/services/graphql/queries.ts                    | 535 ---------------------
 src/ts/types/app.ts                                | 160 ------
 src/ts/types/articles.ts                           | 102 ----
 src/ts/types/blog.ts                               |  41 --
 src/ts/types/comments.ts                           |  61 ---
 src/ts/types/contact.ts                            |  19 -
 src/ts/types/cover.ts                              |   9 -
 src/ts/types/nav.ts                                |   5 -
 src/ts/types/prism.ts                              |  51 --
 src/ts/types/repos.ts                              |   7 -
 src/ts/types/seo.ts                                |   6 -
 src/ts/types/taxonomies.ts                         | 114 -----
 src/utils/helpers/format.ts                        | 332 -------------
 src/utils/helpers/i18n.ts                          |   2 +-
 src/utils/helpers/prism.ts                         |  34 --
 src/utils/helpers/projects.ts                      |  86 ----
 src/utils/helpers/sort.ts                          |  21 -
 src/utils/hooks/useGithubApi.tsx                   |  23 -
 src/utils/hooks/useHeadingsTree.tsx                | 104 ----
 src/utils/providers/ackee.tsx                      |   3 +-
 src/utils/providers/prism-theme.tsx                |   2 +
 192 files changed, 9 insertions(+), 13156 deletions(-)
 delete mode 100644 __tests__/jest/components/Branding.test.tsx
 delete mode 100644 __tests__/jest/components/Copyright.test.tsx
 delete mode 100644 __tests__/jest/components/Header.test.tsx
 delete mode 100644 src/components/Branding/Branding.module.scss
 delete mode 100644 src/components/Branding/Branding.tsx
 delete mode 100644 src/components/Branding/Logo/Logo.module.scss
 delete mode 100644 src/components/Branding/Logo/Logo.tsx
 delete mode 100644 src/components/Breadcrumb/Breadcrumb.module.scss
 delete mode 100644 src/components/Breadcrumb/Breadcrumb.tsx
 delete mode 100644 src/components/Buttons/Button/Button.tsx
 delete mode 100644 src/components/Buttons/ButtonHelp/ButtonHelp.module.scss
 delete mode 100644 src/components/Buttons/ButtonHelp/ButtonHelp.tsx
 delete mode 100644 src/components/Buttons/ButtonLink/ButtonLink.tsx
 delete mode 100644 src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
 delete mode 100644 src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx
 delete mode 100644 src/components/Buttons/Buttons.module.scss
 delete mode 100644 src/components/Buttons/index.tsx
 delete mode 100644 src/components/Comment/Comment.module.scss
 delete mode 100644 src/components/Comment/Comment.tsx
 delete mode 100644 src/components/CommentForm/CommentForm.module.scss
 delete mode 100644 src/components/CommentForm/CommentForm.tsx
 delete mode 100644 src/components/CommentsList/CommentsList.module.scss
 delete mode 100644 src/components/CommentsList/CommentsList.tsx
 delete mode 100644 src/components/ContactForm/ContactForm.module.scss
 delete mode 100644 src/components/ContactForm/ContactForm.tsx
 delete mode 100644 src/components/Copyright/Copyright.module.scss
 delete mode 100644 src/components/Copyright/Copyright.tsx
 delete mode 100644 src/components/Footer/Footer.module.scss
 delete mode 100644 src/components/Footer/Footer.tsx
 delete mode 100644 src/components/FooterNav/FooterNav.module.scss
 delete mode 100644 src/components/FooterNav/FooterNav.tsx
 delete mode 100644 src/components/FormElements/Field/Field.module.scss
 delete mode 100644 src/components/FormElements/Field/Field.tsx
 delete mode 100644 src/components/FormElements/Form/Form.module.scss
 delete mode 100644 src/components/FormElements/Form/Form.tsx
 delete mode 100644 src/components/FormElements/FormItem/FormItem.module.scss
 delete mode 100644 src/components/FormElements/FormItem/FormItem.tsx
 delete mode 100644 src/components/FormElements/Label/Label.module.scss
 delete mode 100644 src/components/FormElements/Label/Label.tsx
 delete mode 100644 src/components/FormElements/Toggle/Toggle.module.scss
 delete mode 100644 src/components/FormElements/Toggle/Toggle.tsx
 delete mode 100644 src/components/FormElements/index.tsx
 delete mode 100644 src/components/Header/Header.module.scss
 delete mode 100644 src/components/Header/Header.tsx
 delete mode 100644 src/components/Icons/Arrow/Arrow.module.scss
 delete mode 100644 src/components/Icons/Arrow/Arrow.tsx
 delete mode 100644 src/components/Icons/Blog/Blog.module.scss
 delete mode 100644 src/components/Icons/Blog/Blog.tsx
 delete mode 100644 src/components/Icons/CV/CV.module.scss
 delete mode 100644 src/components/Icons/CV/CV.tsx
 delete mode 100644 src/components/Icons/Close/Close.module.scss
 delete mode 100644 src/components/Icons/Close/Close.tsx
 delete mode 100644 src/components/Icons/Cog/Cog.module.scss
 delete mode 100644 src/components/Icons/Cog/Cog.tsx
 delete mode 100644 src/components/Icons/Contact/Contact.module.scss
 delete mode 100644 src/components/Icons/Contact/Contact.tsx
 delete mode 100644 src/components/Icons/Copyright/Copyright.module.scss
 delete mode 100644 src/components/Icons/Copyright/Copyright.tsx
 delete mode 100644 src/components/Icons/Hamburger/Hamburger.module.scss
 delete mode 100644 src/components/Icons/Hamburger/Hamburger.tsx
 delete mode 100644 src/components/Icons/Home/Home.module.scss
 delete mode 100644 src/components/Icons/Home/Home.tsx
 delete mode 100644 src/components/Icons/Moon/Moon.module.scss
 delete mode 100644 src/components/Icons/Moon/Moon.tsx
 delete mode 100644 src/components/Icons/Projects/Projects.module.scss
 delete mode 100644 src/components/Icons/Projects/Projects.tsx
 delete mode 100644 src/components/Icons/Search/Search.module.scss
 delete mode 100644 src/components/Icons/Search/Search.tsx
 delete mode 100644 src/components/Icons/Sun/Sun.module.scss
 delete mode 100644 src/components/Icons/Sun/Sun.tsx
 delete mode 100644 src/components/Icons/index.tsx
 delete mode 100644 src/components/Layouts/Layout.module.scss
 delete mode 100644 src/components/Layouts/Layout.tsx
 delete mode 100644 src/components/MDX/CodeBlock/CodeBlock.tsx
 delete mode 100644 src/components/MDX/Gallery/Gallery.module.scss
 delete mode 100644 src/components/MDX/Gallery/Gallery.tsx
 delete mode 100644 src/components/MDX/Link/Link.tsx
 delete mode 100644 src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss
 delete mode 100644 src/components/MDX/ResponsiveImage/ResponsiveImage.tsx
 delete mode 100644 src/components/MDX/index.tsx
 delete mode 100644 src/components/Main/Main.module.scss
 delete mode 100644 src/components/Main/Main.tsx
 delete mode 100644 src/components/MainNav/MainNav.module.scss
 delete mode 100644 src/components/MainNav/MainNav.tsx
 delete mode 100644 src/components/MetaItems/Author/Author.tsx
 delete mode 100644 src/components/MetaItems/CommentsCount/CommentsCount.tsx
 delete mode 100644 src/components/MetaItems/Dates/Dates.tsx
 delete mode 100644 src/components/MetaItems/MetaItem/MetaItem.module.scss
 delete mode 100644 src/components/MetaItems/MetaItem/MetaItem.tsx
 delete mode 100644 src/components/MetaItems/PostsCount/PostsCount.tsx
 delete mode 100644 src/components/MetaItems/ReadingTime/ReadingTime.tsx
 delete mode 100644 src/components/MetaItems/Thematics/Thematics.tsx
 delete mode 100644 src/components/MetaItems/Topics/Topics.tsx
 delete mode 100644 src/components/MetaItems/Website/Website.tsx
 delete mode 100644 src/components/MetaItems/index.tsx
 delete mode 100644 src/components/Notice/Notice.module.scss
 delete mode 100644 src/components/Notice/Notice.tsx
 delete mode 100644 src/components/Pagination/Pagination.module.scss
 delete mode 100644 src/components/Pagination/Pagination.tsx
 delete mode 100644 src/components/PaginationCursor/PaginationCursor.module.scss
 delete mode 100644 src/components/PaginationCursor/PaginationCursor.tsx
 delete mode 100644 src/components/PostFooter/PostFooter.module.scss
 delete mode 100644 src/components/PostFooter/PostFooter.tsx
 delete mode 100644 src/components/PostHeader/PostHeader.module.scss
 delete mode 100644 src/components/PostHeader/PostHeader.tsx
 delete mode 100644 src/components/PostMeta/PostMeta.module.scss
 delete mode 100644 src/components/PostMeta/PostMeta.tsx
 delete mode 100644 src/components/PostPreview/PostPreview.module.scss
 delete mode 100644 src/components/PostPreview/PostPreview.tsx
 delete mode 100644 src/components/PostsList/PostsList.module.scss
 delete mode 100644 src/components/PostsList/PostsList.tsx
 delete mode 100644 src/components/ProjectPreview/ProjectPreview.module.scss
 delete mode 100644 src/components/ProjectPreview/ProjectPreview.tsx
 delete mode 100644 src/components/ProjectSummary/ProjectSummary.module.scss
 delete mode 100644 src/components/ProjectSummary/ProjectSummary.tsx
 delete mode 100644 src/components/ProjectsList/ProjectsList.module.scss
 delete mode 100644 src/components/ProjectsList/ProjectsList.tsx
 delete mode 100644 src/components/SearchForm/SearchForm.module.scss
 delete mode 100644 src/components/SearchForm/SearchForm.tsx
 delete mode 100644 src/components/Settings/AckeeSelect/AckeeSelect.module.scss
 delete mode 100644 src/components/Settings/AckeeSelect/AckeeSelect.tsx
 delete mode 100644 src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx
 delete mode 100644 src/components/Settings/ReduceMotion/ReduceMotion.tsx
 delete mode 100644 src/components/Settings/Settings.module.scss
 delete mode 100644 src/components/Settings/Settings.tsx
 delete mode 100644 src/components/Settings/ThemeToggle/ThemeToggle.tsx
 delete mode 100644 src/components/Sidebar/Sidebar.module.scss
 delete mode 100644 src/components/Sidebar/Sidebar.tsx
 delete mode 100644 src/components/Spinner/Spinner.module.scss
 delete mode 100644 src/components/Spinner/Spinner.tsx
 delete mode 100644 src/components/Toolbar/Toolbar.module.scss
 delete mode 100644 src/components/Toolbar/Toolbar.tsx
 delete mode 100644 src/components/Tooltip/Tooltip.module.scss
 delete mode 100644 src/components/Tooltip/Tooltip.tsx
 delete mode 100644 src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
 delete mode 100644 src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
 delete mode 100644 src/components/WidgetParts/List/List.module.scss
 delete mode 100644 src/components/WidgetParts/List/List.tsx
 delete mode 100644 src/components/WidgetParts/OrderedList/OrderedList.module.scss
 delete mode 100644 src/components/WidgetParts/OrderedList/OrderedList.tsx
 delete mode 100644 src/components/WidgetParts/index.tsx
 delete mode 100644 src/components/Widgets/CVPreview/CVPreview.module.scss
 delete mode 100644 src/components/Widgets/CVPreview/CVPreview.tsx
 delete mode 100644 src/components/Widgets/RecentPosts/RecentPosts.module.scss
 delete mode 100644 src/components/Widgets/RecentPosts/RecentPosts.tsx
 delete mode 100644 src/components/Widgets/RelatedThematics/RelatedThematics.tsx
 delete mode 100644 src/components/Widgets/RelatedTopics/RelatedTopics.tsx
 delete mode 100644 src/components/Widgets/Sharing/Sharing.module.scss
 delete mode 100644 src/components/Widgets/Sharing/Sharing.tsx
 delete mode 100644 src/components/Widgets/SocialMedia/SocialMedia.module.scss
 delete mode 100644 src/components/Widgets/SocialMedia/SocialMedia.tsx
 delete mode 100644 src/components/Widgets/ThematicsList/ThematicsList.tsx
 delete mode 100644 src/components/Widgets/ToC/ToC.tsx
 delete mode 100644 src/components/Widgets/TopicsList/TopicsList.tsx
 delete mode 100644 src/components/Widgets/index.tsx
 delete mode 100644 src/pages/404.tsx
 delete mode 100644 src/pages/article/[slug].tsx
 delete mode 100644 src/pages/blog/index.tsx
 delete mode 100644 src/pages/blog/page/[id].tsx
 delete mode 100644 src/pages/contact.tsx
 delete mode 100644 src/pages/cv.tsx
 delete mode 100644 src/pages/index.tsx
 delete mode 100644 src/pages/mentions-legales.tsx
 delete mode 100644 src/pages/projet/[slug].tsx
 delete mode 100644 src/pages/projets.tsx
 delete mode 100644 src/pages/recherche/index.tsx
 delete mode 100644 src/pages/sujet/[slug].tsx
 delete mode 100644 src/pages/thematique/[slug].tsx
 delete mode 100644 src/services/graphql/api.ts
 delete mode 100644 src/services/graphql/mutations.ts
 delete mode 100644 src/services/graphql/queries.ts
 delete mode 100644 src/ts/types/app.ts
 delete mode 100644 src/ts/types/articles.ts
 delete mode 100644 src/ts/types/blog.ts
 delete mode 100644 src/ts/types/comments.ts
 delete mode 100644 src/ts/types/contact.ts
 delete mode 100644 src/ts/types/cover.ts
 delete mode 100644 src/ts/types/nav.ts
 delete mode 100644 src/ts/types/prism.ts
 delete mode 100644 src/ts/types/repos.ts
 delete mode 100644 src/ts/types/seo.ts
 delete mode 100644 src/ts/types/taxonomies.ts
 delete mode 100644 src/utils/helpers/format.ts
 delete mode 100644 src/utils/helpers/prism.ts
 delete mode 100644 src/utils/helpers/projects.ts
 delete mode 100644 src/utils/helpers/sort.ts
 delete mode 100644 src/utils/hooks/useGithubApi.tsx
 delete mode 100644 src/utils/hooks/useHeadingsTree.tsx

(limited to 'src/utils/hooks')

diff --git a/__tests__/jest/components/Branding.test.tsx b/__tests__/jest/components/Branding.test.tsx
deleted file mode 100644
index 14266be..0000000
--- a/__tests__/jest/components/Branding.test.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import Branding from '@components/Branding/Branding';
-import { render, screen } from '@test-utils';
-
-describe('Branding', () => {
-  it('renders the title wrapped with an h1 element on homepage', () => {
-    render(<Branding isHome={true} />);
-    expect(
-      screen.getByRole('heading', { level: 1, name: 'Armand Philippot' })
-    ).toBeInTheDocument();
-  });
-
-  it('renders the title wrapped without an h1 element on other pages', () => {
-    render(<Branding isHome={false} />);
-    expect(
-      screen.queryByRole('heading', { level: 1, name: 'Armand Philippot' })
-    ).not.toBeInTheDocument();
-  });
-
-  it('renders the baseline', () => {
-    render(<Branding isHome={false} />);
-    // Currently, only French translation is returned.
-    expect(screen.getByText('Intégrateur web')).toBeInTheDocument();
-  });
-});
diff --git a/__tests__/jest/components/Copyright.test.tsx b/__tests__/jest/components/Copyright.test.tsx
deleted file mode 100644
index 08beb50..0000000
--- a/__tests__/jest/components/Copyright.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Copyright from '@components/Copyright/Copyright';
-import { render, screen } from '@test-utils';
-
-describe('Copyright', () => {
-  it('renders the Copyright component', () => {
-    render(<Copyright />);
-  });
-
-  it('displays author name', () => {
-    render(<Copyright />);
-    expect(screen.getByText('Armand Philippot')).toBeInTheDocument();
-  });
-});
diff --git a/__tests__/jest/components/Header.test.tsx b/__tests__/jest/components/Header.test.tsx
deleted file mode 100644
index 44c6871..0000000
--- a/__tests__/jest/components/Header.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Header from '@components/Header/Header';
-import { render } from '@test-utils';
-
-// Toolbar uses forwardRef. Without mocking an error occurred.
-jest.mock('@components/Toolbar/Toolbar', () => 'div');
-
-describe('Header', () => {
-  it('renders the Header component', () => {
-    const { container } = render(<Header isHome={false} />);
-    expect(container).toBeTruthy();
-  });
-});
diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss
deleted file mode 100644
index 2cd3b15..0000000
--- a/src/components/Branding/Branding.module.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  --logo-size: clamp(#{fun.convert-px(68)}, 18vw, #{fun.convert-px(100)});
-
-  display: grid;
-  grid-template-columns:
-    var(--logo-size)
-    minmax(0, 1fr);
-  grid-template-rows: repeat(2, max-content);
-  align-items: center;
-  column-gap: var(--spacing-sm);
-  padding: var(--spacing-sm) 0;
-  text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-fg-inverted);
-}
-
-.logo {
-  --branding-logo-animation: none;
-
-  grid-column: 1;
-  grid-row: 1 / -1;
-  justify-self: center;
-  display: flex;
-  place-content: center;
-  width: var(--logo-size);
-  height: var(--logo-size);
-  position: relative;
-  border-radius: 50%;
-  transition: all 0.6s linear 0s;
-  transform-style: preserve-3d;
-  animation: var(--branding-logo-animation);
-
-  &__front,
-  &__back {
-    width: 100%;
-    height: 100%;
-    padding: fun.convert-px(2);
-    position: absolute;
-    top: 0;
-    left: 0;
-    backface-visibility: hidden;
-    background: var(--color-bg);
-    border: fun.convert-px(2) solid var(--color-primary-dark);
-    border-radius: 50%;
-    transition: all 0.6s linear 0s;
-  }
-
-  &__front {
-    box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
-        var(--color-shadow-light),
-      fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
-        var(--color-shadow-light);
-  }
-
-  &__back {
-    transform: rotateY(180deg);
-  }
-
-  img,
-  svg {
-    border-radius: 50%;
-  }
-
-  &:hover {
-    transform: rotateY(180deg);
-  }
-
-  &:hover & {
-    &__front {
-      box-shadow: none;
-    }
-
-    &__back {
-      box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0
-          var(--color-shadow-light),
-        fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0
-          var(--color-shadow-light);
-    }
-  }
-}
-
-.name {
-  --branding-name-animation: none;
-
-  grid-column: 2;
-  grid-row: 1;
-  margin: 0;
-  font-family: var(--font-family-secondary);
-  font-size: clamp(var(--font-size-xl), 6vw, var(--font-size-2xl));
-  font-weight: 500;
-  letter-spacing: 0.01ex;
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: "|";
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: var(--color-bg);
-    color: var(--color-primary-darker);
-    font-weight: 400;
-    visibility: hidden;
-    transform: translateX(100%);
-    transform-origin: right;
-    animation: var(--branding-name-animation);
-  }
-}
-
-.job {
-  --branding-job-animation: none;
-
-  grid-column: 2;
-  grid-row: 2;
-  width: max-content;
-  margin: 0;
-  color: var(--color-fg-light);
-  font-family: var(--font-family-secondary);
-  font-size: var(--font-size-lg);
-  font-weight: 500;
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: "|";
-    display: block;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: var(--color-bg);
-    color: var(--color-primary-darker);
-    font-weight: 400;
-    visibility: hidden;
-    transform: translateX(100%);
-    transform-origin: right;
-    animation: var(--branding-job-animation);
-  }
-}
-
-.link {
-  background: linear-gradient(
-      to top,
-      var(--color-primary-light) fun.convert-px(5),
-      transparent fun.convert-px(5)
-    )
-    left / 0 100% no-repeat;
-  text-decoration: none;
-  transition: all 0.6s ease-out 0s;
-
-  &:hover,
-  &:focus {
-    background-size: 100% 100%;
-  }
-
-  &:focus {
-    color: var(--color-primary-light);
-  }
-
-  &:active {
-    background-size: 0 100%;
-    color: var(--color-primary-dark);
-  }
-}
diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx
deleted file mode 100644
index b19116d..0000000
--- a/src/components/Branding/Branding.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import photo from '@assets/images/armand-philippot.jpg';
-import { settings } from '@utils/config';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { ReactElement, useEffect, useRef } from 'react';
-import { useIntl } from 'react-intl';
-import { Person, WithContext } from 'schema-dts';
-import styles from './Branding.module.scss';
-import Logo from './Logo/Logo';
-
-type BrandingReturn = ({ isHome }: { isHome: boolean }) => ReactElement;
-
-const Branding: BrandingReturn = ({ isHome = false }) => {
-  const intl = useIntl();
-  const { locale } = useRouter();
-  const TitleTag = isHome ? 'h1' : 'p';
-  const logoRef = useRef<HTMLDivElement>(null);
-  const titleRef = useRef<HTMLHeadingElement | HTMLParagraphElement>(null);
-  const jobRef = useRef<HTMLParagraphElement>(null);
-
-  useEffect(() => {
-    if (logoRef.current) {
-      logoRef.current.style.setProperty(
-        '--branding-logo-animation',
-        'flip-logo 9s ease-in 0s 1'
-      );
-    }
-  }, []);
-
-  useEffect(() => {
-    if (titleRef.current) {
-      titleRef.current.style.setProperty(
-        '--branding-name-animation',
-        'blink 0.8s ease-in-out 0s 2, typing 4.3s linear 0s 1'
-      );
-    }
-  }, []);
-
-  useEffect(() => {
-    if (jobRef.current) {
-      jobRef.current.style.setProperty(
-        '--branding-job-animation',
-        'hide-text 4.25s linear 0s 1, blink 0.8s ease-in-out 4.25s 2, typing 3.8s linear 4.25s 1'
-      );
-    }
-  }, []);
-
-  const schemaJsonLd: WithContext<Person> = {
-    '@context': 'https://schema.org',
-    '@type': 'Person',
-    '@id': `${settings.url}/#branding`,
-    name: settings.name,
-    url: settings.url,
-    jobTitle: locale?.startsWith('en')
-      ? settings.baseline.en
-      : settings.baseline.fr,
-    image: photo.src,
-    subjectOf: { '@id': `${settings.url}` },
-  };
-
-  return (
-    <>
-      <Script
-        id="schema-branding"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <div id="branding" className={styles.wrapper}>
-        <div className={styles.logo} ref={logoRef}>
-          <div className={styles.logo__front}>
-            <Image
-              src={photo}
-              alt={intl.formatMessage(
-                {
-                  defaultMessage: '{brandingName} picture',
-                  description: 'Branding: branding name picture.',
-                  id: 'ILRLTq',
-                },
-                {
-                  brandingName: settings.name,
-                }
-              )}
-              layout="responsive"
-            />
-          </div>
-          <div className={styles.logo__back}>
-            <Logo />
-          </div>
-        </div>
-        <TitleTag ref={titleRef} className={styles.name}>
-          <Link href="/">
-            <a className={styles.link}>{settings.name}</a>
-          </Link>
-        </TitleTag>
-        <p ref={jobRef} className={styles.job}>
-          {locale?.startsWith('en')
-            ? settings.baseline.en
-            : settings.baseline.fr}
-        </p>
-      </div>
-    </>
-  );
-};
-
-export default Branding;
diff --git a/src/components/Branding/Logo/Logo.module.scss b/src/components/Branding/Logo/Logo.module.scss
deleted file mode 100644
index 3d62bf9..0000000
--- a/src/components/Branding/Logo/Logo.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.wrapper {
-  position: relative;
-}
-
-.bg-left {
-  fill: var(--color-primary-light);
-}
-
-.bg-right {
-  fill: var(--color-primary-dark);
-}
-
-.letter {
-  fill: var(--color-fg-inverted);
-  stroke: var(--color-primary-darker);
-  stroke-width: 5;
-}
-
-.letter-shadow {
-  fill: var(--color-shadow-darker);
-  stroke: var(--color-shadow-darker);
-  stroke-width: 5;
-}
diff --git a/src/components/Branding/Logo/Logo.tsx b/src/components/Branding/Logo/Logo.tsx
deleted file mode 100644
index 0623042..0000000
--- a/src/components/Branding/Logo/Logo.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import styles from './Logo.module.scss';
-
-const Logo = () => {
-  return (
-    <svg
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-      className={styles.wrapper}
-    >
-      <path className={styles['bg-left']} d="M 0,0 H 506 L 0,506 Z" />
-      <path className={styles['bg-right']} d="M 512,512 H 6 L 512,6 Z" />
-      <path
-        className={styles['letter-shadow']}
-        d="m 66.049088,353.26557 h 57.233082 l 15.4763,-40.00476 h 56.64908 l 15.76831,40.00476 h 57.2331 L 196.28357,165.21398 h -58.10911 z m 80.009522,-79.42552 21.02441,-55.18904 21.02439,55.18904 z"
-      />
-      <path
-        className={styles['letter']}
-        d="m 59.569539,346.78602 h 57.233081 l 15.4763,-40.00476 H 188.928 l 15.76831,40.00476 h 57.2331 L 189.80402,158.73443 h -58.10911 z m 80.009521,-79.42552 21.02441,-55.18904 21.02439,55.18904 z"
-      />
-      <path
-        className={styles['letter-shadow']}
-        d="m 288.84935,353.26557 h 54.89704 v -50.51696 h 40.88078 c 42.04881,0 68.91332,-28.61654 68.91332,-68.32931 0,-38.5447 -21.60841,-69.20532 -67.74528,-69.20532 h -96.94586 z m 54.89704,-92.56578 v -53.437 h 29.78458 c 16.35231,0 23.94446,10.51221 23.94446,27.15651 0,15.47629 -8.46817,26.28049 -25.40449,26.28049 z"
-      />
-      <path
-        className={styles['letter']}
-        d="m 282.3698,346.78602 h 54.89704 v -50.51696 h 40.88078 c 42.04881,0 68.91332,-28.61654 68.91332,-68.3293 0,-38.54471 -21.60841,-69.20533 -67.74528,-69.20533 H 282.3698 Z m 54.89704,-92.56578 v -53.437 h 29.78458 c 16.35231,0 23.94446,10.51221 23.94446,27.15652 0,15.47628 -8.46817,26.28048 -25.40449,26.28048 z"
-      />
-    </svg>
-  );
-};
-
-export default Logo;
diff --git a/src/components/Breadcrumb/Breadcrumb.module.scss b/src/components/Breadcrumb/Breadcrumb.module.scss
deleted file mode 100644
index b8fadf8..0000000
--- a/src/components/Breadcrumb/Breadcrumb.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wrapper {
-  composes: grid from "@styles/layout/_grid.scss";
-  padding: var(--spacing-md) 0;
-}
-
-.list {
-  @extend %reset-ordered-list;
-
-  grid-column: 2;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  gap: var(--spacing-2xs);
-  margin: 0;
-  font-size: var(--font-size-sm);
-}
-
-.item {
-  &:not(:last-of-type) {
-    &::after {
-      content: ">";
-      margin-left: var(--spacing-2xs);
-    }
-  }
-}
diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx
deleted file mode 100644
index a7b945a..0000000
--- a/src/components/Breadcrumb/Breadcrumb.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { settings } from '@utils/config';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useIntl } from 'react-intl';
-import { BreadcrumbList, WithContext } from 'schema-dts';
-import styles from './Breadcrumb.module.scss';
-
-const Breadcrumb = ({ pageTitle }: { pageTitle: string }) => {
-  const intl = useIntl();
-  const router = useRouter();
-
-  const isHome = router.pathname === '/';
-  const isArticle = router.pathname.includes('/article/');
-  const isProject = router.pathname.includes('/projet/');
-  const isSubject = router.pathname.includes('/sujet/');
-  const isThematic = router.pathname.includes('/thematique/');
-
-  const getItems = () => {
-    return (
-      <>
-        <li className={styles.item}>
-          <Link href="/">
-            <a>
-              {intl.formatMessage({
-                defaultMessage: 'Home',
-                description: 'Breadcrumb: Home item',
-                id: 'Enij19',
-              })}
-            </a>
-          </Link>
-        </li>
-        {(isArticle || isThematic || isSubject) && (
-          <>
-            <li className={styles.item}>
-              <Link href="/blog">
-                <a>
-                  {intl.formatMessage({
-                    defaultMessage: 'Blog',
-                    description: 'Breadcrumb: Blog item',
-                    id: 'z0ic9c',
-                  })}
-                </a>
-              </Link>
-            </li>
-          </>
-        )}
-        {isProject && (
-          <>
-            <li className={styles.item}>
-              <Link href="/projets">
-                <a>
-                  {intl.formatMessage({
-                    defaultMessage: 'Projects',
-                    description: 'Breadcrumb: Projects item',
-                    id: 'Igx3qp',
-                  })}
-                </a>
-              </Link>
-            </li>
-          </>
-        )}
-        <li className="screen-reader-text">{pageTitle}</li>
-      </>
-    );
-  };
-
-  const getElementsSchema = () => {
-    const items = [];
-    const homepage: BreadcrumbList['itemListElement'] = {
-      '@type': 'ListItem',
-      position: 1,
-      name: intl.formatMessage({
-        defaultMessage: 'Home',
-        description: 'Breadcrumb: Home item',
-        id: 'Enij19',
-      }),
-      item: settings.url,
-    };
-
-    items.push(homepage);
-
-    if (isArticle || isThematic || isSubject) {
-      const blog: BreadcrumbList['itemListElement'] = {
-        '@type': 'ListItem',
-        position: 2,
-        name: intl.formatMessage({
-          defaultMessage: 'Blog',
-          description: 'Breadcrumb: Blog item',
-          id: 'z0ic9c',
-        }),
-        item: `${settings.url}/blog`,
-      };
-
-      items.push(blog);
-    }
-
-    if (isProject) {
-      const blog: BreadcrumbList['itemListElement'] = {
-        '@type': 'ListItem',
-        position: 2,
-        name: intl.formatMessage({
-          defaultMessage: 'Projects',
-          description: 'Breadcrumb: Projects item',
-          id: 'Igx3qp',
-        }),
-        item: `${settings.url}/projets`,
-      };
-
-      items.push(blog);
-    }
-
-    const currentPage: BreadcrumbList['itemListElement'] = {
-      '@type': 'ListItem',
-      position: items.length + 1,
-      name: pageTitle,
-      item: `${settings.url}${router.asPath}`,
-    };
-
-    items.push(currentPage);
-
-    return items;
-  };
-
-  const schemaJsonLd: WithContext<BreadcrumbList> = {
-    '@context': 'https://schema.org',
-    '@type': 'BreadcrumbList',
-    '@id': `${settings.url}/#breadcrumb`,
-    itemListElement: getElementsSchema(),
-  };
-
-  return (
-    <>
-      <Script
-        id="schema-breadcrumb"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      {!isHome && (
-        <nav id="breadcrumb" className={styles.wrapper}>
-          <span className="screen-reader-text">
-            {intl.formatMessage({
-              defaultMessage: 'You are here:',
-              description: 'Breadcrumb: You are here prefix',
-              id: '16zl9Z',
-            })}
-          </span>
-          <ol className={styles.list}>{getItems()}</ol>
-        </nav>
-      )}
-    </>
-  );
-};
-
-export default Breadcrumb;
diff --git a/src/components/Buttons/Button/Button.tsx b/src/components/Buttons/Button/Button.tsx
deleted file mode 100644
index ada23fe..0000000
--- a/src/components/Buttons/Button/Button.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { ButtonKind, ButtonPosition } from '@ts/types/app';
-import { ReactNode } from 'react';
-import styles from '../Buttons.module.scss';
-
-const Button = ({
-  children,
-  clickHandler,
-  kind = 'secondary',
-  position = 'left',
-  spacing = false,
-  isDisabled = false,
-}: {
-  children: ReactNode;
-  clickHandler: any;
-  kind?: ButtonKind;
-  position?: ButtonPosition;
-  spacing?: boolean;
-  isDisabled?: boolean;
-}) => {
-  const spacingClass = spacing ? styles.spacing : '';
-  const classes = `${styles.btn} ${styles[position]} ${styles[kind]} ${spacingClass}`;
-
-  return (
-    <button
-      className={classes}
-      type="button"
-      disabled={isDisabled}
-      onClick={clickHandler}
-    >
-      {children}
-    </button>
-  );
-};
-
-export default Button;
diff --git a/src/components/Buttons/ButtonHelp/ButtonHelp.module.scss b/src/components/Buttons/ButtonHelp/ButtonHelp.module.scss
deleted file mode 100644
index b2a05d7..0000000
--- a/src/components/Buttons/ButtonHelp/ButtonHelp.module.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.icon {
-  color: var(--color-primary-dark);
-  font-weight: 600;
-}
-
-.active {
-  .icon {
-    color: var(--color-fg-inverted);
-  }
-}
-
-.wrapper {
-  width: fun.convert-px(44);
-  height: fun.convert-px(44);
-  background: var(--color-bg);
-  border: fun.convert-px(3) solid var(--color-primary-dark);
-  border-radius: 50%;
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-  transition: all 0.3s ease-in-out 0s;
-
-  @include mix.pointer("fine") {
-    width: fun.convert-px(30);
-    height: fun.convert-px(30);
-    line-height: 1;
-  }
-
-  &:hover,
-  &:focus {
-    border-color: var(--color-primary-light);
-    color: var(--color-primary-light);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow-light),
-      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-        var(--color-shadow-light),
-      fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3)
-        var(--color-shadow-light);
-    transform: scale(1.1);
-
-    .icon {
-      transform: scale(1.1);
-    }
-  }
-
-  &.active {
-    background: var(--color-primary);
-  }
-}
diff --git a/src/components/Buttons/ButtonHelp/ButtonHelp.tsx b/src/components/Buttons/ButtonHelp/ButtonHelp.tsx
deleted file mode 100644
index 2616a8f..0000000
--- a/src/components/Buttons/ButtonHelp/ButtonHelp.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { SetStateAction } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './ButtonHelp.module.scss';
-
-const ButtonHelp = ({
-  showHelp,
-  setShowHelp,
-  title,
-}: {
-  showHelp: boolean;
-  setShowHelp: (value: SetStateAction<boolean>) => void;
-  title?: string;
-}) => {
-  const intl = useIntl();
-
-  const handleClick = () => {
-    setShowHelp((prev) => !prev);
-  };
-
-  const activeModifier = showHelp ? styles.active : '';
-
-  return (
-    <button
-      onClick={handleClick}
-      title={title}
-      className={`${styles.wrapper} ${activeModifier}`}
-    >
-      <span className={styles.icon} aria-hidden="true">
-        ?
-      </span>
-      <span className="screen-reader-text">
-        {intl.formatMessage({
-          defaultMessage: 'Help',
-          description: 'ButtonHelp: screen reader text',
-          id: 'oPf+XA',
-        })}
-      </span>
-    </button>
-  );
-};
-
-export default ButtonHelp;
diff --git a/src/components/Buttons/ButtonLink/ButtonLink.tsx b/src/components/Buttons/ButtonLink/ButtonLink.tsx
deleted file mode 100644
index 179c686..0000000
--- a/src/components/Buttons/ButtonLink/ButtonLink.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ButtonPosition } from '@ts/types/app';
-import Link from 'next/link';
-import { ReactNode } from 'react';
-import styles from '../Buttons.module.scss';
-
-const ButtonLink = ({
-  children,
-  target,
-  position = 'left',
-  isExternal = false,
-}: {
-  children: ReactNode;
-  target: string;
-  position?: ButtonPosition;
-  isExternal?: boolean;
-}) => {
-  const classes = `${styles.btn} ${styles[position]} ${styles.tertiary}`;
-
-  return isExternal ? (
-    <a className={classes} href={target}>
-      {children}
-    </a>
-  ) : (
-    <Link href={target}>
-      <a className={classes}>{children}</a>
-    </Link>
-  );
-};
-
-export default ButtonLink;
diff --git a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx b/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
deleted file mode 100644
index 4725cad..0000000
--- a/src/components/Buttons/ButtonSubmit/ButtonSubmit.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ReactNode } from 'react';
-import styles from '../Buttons.module.scss';
-
-type Modifier = 'search' | 'submit';
-
-const ButtonSubmit = ({
-  children,
-  modifier = 'submit',
-}: {
-  children: ReactNode;
-  modifier?: Modifier;
-}) => {
-  const withModifier = modifier === 'search' ? styles.search : styles.primary;
-
-  return (
-    <button type="submit" className={`${styles.btn} ${withModifier}`}>
-      {children}
-    </button>
-  );
-};
-
-export default ButtonSubmit;
diff --git a/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx b/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx
deleted file mode 100644
index 7ceb70d..0000000
--- a/src/components/Buttons/ButtonToolbar/ButtonToolbar.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { CloseIcon, CogIcon, SearchIcon } from '@components/Icons';
-import { ForwardedRef, forwardRef, SetStateAction } from 'react';
-import { useIntl } from 'react-intl';
-import styles from '../Buttons.module.scss';
-
-type ButtonType = 'search' | 'settings';
-
-const ButtonToolbar = (
-  {
-    type,
-    isActivated,
-    setIsActivated,
-  }: {
-    type: ButtonType;
-    isActivated: boolean;
-    setIsActivated: (value: SetStateAction<boolean>) => void;
-  },
-  ref: ForwardedRef<HTMLButtonElement>
-) => {
-  const intl = useIntl();
-  const ButtonIcon = () => (type === 'search' ? <SearchIcon /> : <CogIcon />);
-  const btnClasses = isActivated
-    ? `${styles.toolbar} ${styles['toolbar--activated']}`
-    : styles.toolbar;
-
-  return (
-    <button
-      ref={ref}
-      className={btnClasses}
-      type="button"
-      onClick={() => setIsActivated(!isActivated)}
-    >
-      <span className={styles.icon}>
-        <span className={styles.front}>
-          <ButtonIcon />
-        </span>
-        <span className={styles.back}>
-          <CloseIcon />
-        </span>
-      </span>
-      {isActivated ? (
-        <span className="screen-reader-text">
-          {intl.formatMessage(
-            {
-              defaultMessage: 'Close {type}',
-              description: 'ButtonToolbar: Close button',
-              id: 'SWq8a4',
-            },
-            {
-              type,
-            }
-          )}
-        </span>
-      ) : (
-        <span className="screen-reader-text">
-          {intl.formatMessage(
-            {
-              defaultMessage: 'Open {type}',
-              description: 'ButtonToolbar: Open button',
-              id: 'Z1eSIz',
-            },
-            {
-              type,
-            }
-          )}
-        </span>
-      )}
-    </button>
-  );
-};
-
-export default forwardRef(ButtonToolbar);
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
deleted file mode 100644
index 0ea9289..0000000
--- a/src/components/Buttons/Buttons.module.scss
+++ /dev/null
@@ -1,289 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.btn {
-  display: block;
-  border: none;
-  font-size: var(--font-size-md);
-}
-
-.left {
-  margin-right: auto;
-}
-
-.right {
-  margin-left: auto;
-}
-
-.center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.primary {
-  margin: auto;
-  padding: var(--spacing-2xs) var(--spacing-md);
-  background: var(--color-primary);
-  border: fun.convert-px(2) solid var(--color-bg);
-  border-radius: fun.convert-px(5);
-  box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
-    0 0 0 fun.convert-px(3) var(--color-primary-darker),
-    fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(3)
-      var(--color-primary-dark);
-  color: var(--color-fg-inverted);
-  font-weight: 600;
-  text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow);
-  transition: all 0.25s ease-in-out 0s;
-
-  &:hover,
-  &:focus {
-    background: var(--color-primary-light);
-    box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary-light),
-      0 0 0 fun.convert-px(3) var(--color-primary-darker),
-      fun.convert-px(7) fun.convert-px(7) 0 fun.convert-px(2)
-        var(--color-primary-dark);
-    transform: translateX(#{fun.convert-px(-4)})
-      translateY(#{fun.convert-px(-4)});
-  }
-
-  &:focus {
-    text-decoration: underline solid var(--color-fg-inverted) fun.convert-px(2);
-  }
-
-  &:active {
-    background: var(--color-primary-dark);
-    box-shadow: 0 0 0 fun.convert-px(2) var(--color-primary),
-      0 0 0 fun.convert-px(3) var(--color-primary-darker),
-      0 0 0 0 var(--color-primary-dark);
-    text-decoration: none;
-    transform: translateX(#{fun.convert-px(4)}) translateY(#{fun.convert-px(4)});
-  }
-}
-
-.secondary {
-  padding: var(--spacing-2xs) var(--spacing-md);
-  background: var(--color-bg);
-  border: fun.convert-px(3) solid var(--color-primary);
-  border-radius: fun.convert-px(5);
-  box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg),
-    fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-dark),
-    fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg),
-    fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-dark);
-  color: var(--color-primary);
-  font-weight: 600;
-  transition: all 0.35s ease-out 0s;
-
-  &:disabled {
-    color: var(--color-fg-light);
-    border-color: var(--color-border-dark);
-    box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-bg),
-      fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-primary-darker),
-      fun.convert-px(5) fun.convert-px(5) 0 0 var(--color-bg),
-      fun.convert-px(6) fun.convert-px(6) 0 0 var(--color-primary-darker);
-    cursor: wait;
-  }
-
-  &:not(:disabled) {
-    &:hover,
-    &:focus {
-      transform: translateX(#{fun.convert-px(-3)})
-        translateY(#{fun.convert-px(-5)});
-      border-color: var(--color-primary-light);
-      box-shadow: fun.convert-px(2) fun.convert-px(3) 0 0 var(--color-bg),
-        fun.convert-px(4) fun.convert-px(5) 0 0 var(--color-primary),
-        fun.convert-px(6) fun.convert-px(8) 0 0 var(--color-bg),
-        fun.convert-px(8) fun.convert-px(10) 0 0 var(--color-primary),
-        fun.convert-px(10) fun.convert-px(12) fun.convert-px(1) 0
-          var(--color-shadow-light),
-        fun.convert-px(10) fun.convert-px(12) fun.convert-px(5)
-          fun.convert-px(1) var(--color-shadow-light);
-      color: var(--color-primary-light);
-    }
-
-    &:focus {
-      text-decoration: underline var(--color-primary) fun.convert-px(2);
-    }
-
-    &:active {
-      text-decoration: none;
-      transform: translateX(#{fun.convert-px(5)})
-        translateY(#{fun.convert-px(6)});
-      box-shadow: 0 0 0 0 var(--color-shadow);
-    }
-  }
-}
-
-.tertiary {
-  display: flex;
-  flex-flow: row wrap;
-  place-items: center;
-  gap: var(--spacing-2xs);
-  width: max-content;
-  padding: var(--spacing-2xs) var(--spacing-sm);
-  position: relative;
-  background: var(--color-bg);
-  border: fun.convert-px(3) solid var(--color-primary);
-  border-radius: fun.convert-px(5);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow),
-    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-      var(--color-shadow),
-    fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-      var(--color-shadow);
-  color: var(--color-primary);
-  font-weight: 600;
-  text-decoration: underline transparent 0;
-  transition: all 0.3s ease-in-out 0s, text-decoration 0.35s ease-in-out 0s;
-
-  &:hover,
-  &:focus {
-    border-color: var(--color-primary-light);
-    color: var(--color-primary-light);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow-light),
-      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-        var(--color-shadow-light),
-      fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3)
-        var(--color-shadow-light);
-    transform: scale(1.1);
-  }
-
-  &:focus {
-    text-decoration: underline var(--color-primary-light) fun.convert-px(3);
-  }
-
-  &:active {
-    border-color: var(--color-primary-dark);
-    color: var(--color-primary-dark);
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    text-decoration: underline transparent 0;
-    transform: scale(0.94);
-  }
-}
-
-:global {
-  [data-theme="dark"] {
-    :local {
-      .tertiary {
-        img[src*="png"] {
-          background: none;
-        }
-      }
-    }
-  }
-}
-
-.toolbar {
-  --draw-border-thickness: #{fun.convert-px(4)};
-  --icon-size: 100%;
-
-  display: flex;
-  flex-flow: row nowrap;
-  place-items: center;
-  width: var(--btn-size, 100%);
-  height: var(--btn-size, 100%);
-  padding: var(--spacing-2xs);
-  background: none;
-  border: none;
-  font-size: var(--font-size-md);
-
-  &:hover,
-  &:focus {
-    --draw-border-color1: var(--color-primary-light);
-    --draw-border-color2: var(--color-primary-lighter);
-
-    @extend %draw-borders;
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      border-radius: 8%;
-    }
-  }
-}
-
-.icon {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: relative;
-  transform-style: preserve-3d;
-  transform: translate3d(0, 0, 0);
-  transition: all 0.5s ease-in-out 0s;
-}
-
-.front,
-.back {
-  display: flex;
-  place-content: center;
-  width: var(--icon-size);
-  height: var(--icon-size);
-  position: absolute;
-  top: 0;
-  right: 0;
-  transition: all 0.6s ease-in 0s;
-  backface-visibility: hidden;
-}
-
-.front {
-  transform: scale(1);
-  z-index: 20;
-}
-
-.back {
-  transform: scale(0.2) rotateY(180deg);
-  z-index: 10;
-}
-
-.toolbar--activated {
-  .icon {
-    transform: rotateY(180deg);
-  }
-
-  .front {
-    transform: scale(0.2);
-  }
-
-  .back {
-    transform: scale(1) rotateY(180deg);
-  }
-}
-
-.search {
-  background: transparent;
-  margin-left: calc(var(--btn-size) * -1);
-  z-index: 5;
-  transition: all 0.3s ease-in-out 0s;
-
-  svg {
-    transform: scale(0.85);
-    transition: all 0.3s ease-in-out 0s;
-  }
-
-  &:hover,
-  &:focus {
-    svg {
-      transform: scale(0.85) rotate(20deg) translateY(#{fun.convert-px(3)});
-    }
-  }
-
-  &:focus {
-    outline: var(--color-primary-light) solid fun.convert-px(3);
-  }
-
-  &:active {
-    outline: none;
-
-    svg {
-      transform: scale(0.7);
-    }
-  }
-}
-
-.spacing {
-  margin-top: var(--spacing-md);
-  margin-bottom: var(--spacing-md);
-}
diff --git a/src/components/Buttons/index.tsx b/src/components/Buttons/index.tsx
deleted file mode 100644
index 9b4b756..0000000
--- a/src/components/Buttons/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import Button from './Button/Button';
-import ButtonLink from './ButtonLink/ButtonLink';
-import ButtonToolbar from './ButtonToolbar/ButtonToolbar';
-import ButtonSubmit from './ButtonSubmit/ButtonSubmit';
-import ButtonHelp from './ButtonHelp/ButtonHelp';
-
-export { Button, ButtonHelp, ButtonLink, ButtonToolbar, ButtonSubmit };
diff --git a/src/components/Comment/Comment.module.scss b/src/components/Comment/Comment.module.scss
deleted file mode 100644
index dd52db2..0000000
--- a/src/components/Comment/Comment.module.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.item {
-  margin: var(--spacing-sm) 0;
-}
-
-.wrapper {
-  background: var(--color-bg);
-  border: fun.convert-px(1) solid var(--color-border);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow-light),
-    fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2)
-      var(--color-shadow);
-  padding: var(--spacing-md);
-  position: relative;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      display: grid;
-      grid-template-columns: minmax(#{fun.convert-px(150)}, 1fr) minmax(0, 85ch);
-      column-gap: var(--spacing-lg);
-    }
-  }
-}
-
-.header {
-  display: flex;
-  flex-flow: column wrap;
-  align-items: center;
-  row-gap: var(--spacing-sm);
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      grid-row: 1 / 4;
-    }
-  }
-}
-
-.avatar {
-  width: fun.convert-px(85);
-  height: fun.convert-px(85);
-  margin: 0 auto;
-  border-radius: fun.convert-px(3);
-  box-shadow: 0 0 0 fun.convert-px(1) var(--color-shadow-light),
-    fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(1) var(--color-shadow);
-  position: relative;
-
-  img {
-    border-radius: fun.convert-px(3);
-  }
-}
-
-.author {
-  color: var(--color-primary-darker);
-  font-weight: 600;
-  text-align: center;
-}
-
-.date {
-  color: var(--color-fg-secondary);
-  font-size: var(--font-size-sm);
-  display: flex;
-  flex-flow: row wrap;
-  column-gap: var(--spacing-2xs);
-  justify-content: center;
-  margin: var(--spacing-md) 0;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      justify-content: left;
-      margin: 0 0 var(--spacing-md);
-    }
-  }
-}
-
-.body {
-  overflow-wrap: break-word;
-}
-
-.footer {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  padding: var(--spacing-md) 0 0;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      padding: var(--spacing-sm) 0 0;
-    }
-  }
-
-  button {
-    margin: 0;
-  }
-}
-
-.list {
-  padding-left: var(--spacing-md);
-}
diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
deleted file mode 100644
index 355363b..0000000
--- a/src/components/Comment/Comment.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { Button } from '@components/Buttons';
-import Spinner from '@components/Spinner/Spinner';
-import { Comment as CommentData } from '@ts/types/comments';
-import { settings } from '@utils/config';
-import { getFormattedDate } from '@utils/helpers/format';
-import dynamic from 'next/dynamic';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useState } from 'react';
-import { useIntl } from 'react-intl';
-import { Comment as CommentSchema, WithContext } from 'schema-dts';
-import styles from './Comment.module.scss';
-
-const DynamicCommentForm = dynamic(
-  () => import('@components/CommentForm/CommentForm'),
-  {
-    loading: () => <Spinner />,
-  }
-);
-
-const Comment = ({
-  articleId,
-  comment,
-  isNested = false,
-}: {
-  articleId: number;
-  comment: CommentData;
-  isNested?: boolean;
-}) => {
-  const intl = useIntl();
-  const router = useRouter();
-  const locale = router.locale ? router.locale : settings.locales.defaultLocale;
-  const [shouldOpenForm, setShouldOpenForm] = useState<boolean>(false);
-
-  const getCommentAuthor = () => {
-    return comment.author.url ? (
-      <Link href={comment.author.url}>
-        <a className={styles.author}>{comment.author.name}</a>
-      </Link>
-    ) : (
-      <span className={styles.author}>{comment.author.name}</span>
-    );
-  };
-
-  const getLocaleDate = () => {
-    const date = getFormattedDate(comment.date, locale);
-    const time = new Date(comment.date)
-      .toLocaleTimeString(locale, {
-        hour: 'numeric',
-        minute: 'numeric',
-      })
-      .replace(':', 'h');
-    return intl.formatMessage(
-      {
-        defaultMessage: '{date} at {time}',
-        description: 'Comment: publication date',
-        id: 'CT3ydM',
-      },
-      {
-        date,
-        time,
-      }
-    );
-  };
-
-  const getApprovedComment = () => {
-    return (
-      <>
-        <article
-          className={styles.wrapper}
-          id={`comment-${comment.databaseId}`}
-        >
-          <header className={styles.header}>
-            {comment.author.gravatarUrl && (
-              <div className={styles.avatar}>
-                <Image
-                  src={comment.author.gravatarUrl}
-                  alt={comment.author.name}
-                  layout="fill"
-                />
-              </div>
-            )}
-            {getCommentAuthor()}
-          </header>
-          <dl className={styles.date}>
-            <dt>
-              {intl.formatMessage({
-                defaultMessage: 'Published on:',
-                description: 'Comment: publication date label',
-                id: 'soj7do',
-              })}
-            </dt>
-            <dd>
-              <time dateTime={comment.date}>
-                <Link href={`#comment-${comment.databaseId}`}>
-                  <a>{getLocaleDate()}</a>
-                </Link>
-              </time>
-            </dd>
-          </dl>
-          <div
-            className={styles.body}
-            dangerouslySetInnerHTML={{ __html: comment.content }}
-          ></div>
-          {!isNested && (
-            <footer className={styles.footer}>
-              <Button clickHandler={() => setShouldOpenForm((prev) => !prev)}>
-                {shouldOpenForm
-                  ? intl.formatMessage({
-                      defaultMessage: 'Cancel reply',
-                      description: 'Comment: reply button',
-                      id: 'e1Forh',
-                    })
-                  : intl.formatMessage({
-                      defaultMessage: 'Reply',
-                      description: 'Comment: reply button',
-                      id: 'hzHuCc',
-                    })}
-              </Button>
-            </footer>
-          )}
-        </article>
-        {shouldOpenForm && (
-          <DynamicCommentForm
-            articleId={articleId}
-            parentId={comment.databaseId}
-          />
-        )}
-        {comment.replies.length > 0 && (
-          <ol className={styles.list}>
-            {comment.replies.map((reply) => {
-              return (
-                <Comment
-                  articleId={articleId}
-                  key={reply.databaseId}
-                  comment={reply}
-                  isNested={true}
-                />
-              );
-            })}
-          </ol>
-        )}
-      </>
-    );
-  };
-
-  const getCommentStatus = () => {
-    return (
-      <p>
-        {intl.formatMessage({
-          defaultMessage: 'This comment is awaiting moderation.',
-          description: 'Comment: awaiting moderation message',
-          id: 'rXeTkM',
-        })}
-      </p>
-    );
-  };
-
-  const schemaJsonLd: WithContext<CommentSchema> = {
-    '@context': 'https://schema.org',
-    '@id': `${settings.url}/#comment-${comment.databaseId}`,
-    '@type': 'Comment',
-    parentItem: isNested
-      ? { '@id': `${settings.url}/#comment-${comment.parentDatabaseId}` }
-      : undefined,
-    about: { '@type': 'Article', '@id': `${settings.url}/#article` },
-    author: {
-      '@type': 'Person',
-      name: comment.author.name,
-      image: comment.author.gravatarUrl,
-      url: comment.author.url,
-    },
-    creator: {
-      '@type': 'Person',
-      name: comment.author.name,
-      image: comment.author.gravatarUrl,
-      url: comment.author.url,
-    },
-    dateCreated: comment.date,
-    datePublished: comment.date,
-    text: comment.content,
-  };
-
-  return (
-    <>
-      <Script
-        id="schema-comments"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <li className={styles.item}>
-        {comment.approved ? getApprovedComment() : getCommentStatus()}
-      </li>
-    </>
-  );
-};
-
-export default Comment;
diff --git a/src/components/CommentForm/CommentForm.module.scss b/src/components/CommentForm/CommentForm.module.scss
deleted file mode 100644
index d19a1ef..0000000
--- a/src/components/CommentForm/CommentForm.module.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  width: min(calc(100vw - (var(--spacing-md) * 2)), fun.convert-px(500));
-  margin: auto;
-
-  &--reply {
-    width: 100%;
-    margin-top: var(--spacing-sm);
-    padding: var(--spacing-md);
-    position: relative;
-    background: var(--color-bg);
-    border: fun.convert-px(1) solid var(--color-border);
-    box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
-        var(--color-shadow-light),
-      fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2)
-        var(--color-shadow);
-  }
-}
-
-.title {
-  width: max-content;
-  margin-left: auto;
-  margin-right: auto;
-}
diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
deleted file mode 100644
index 128dc58..0000000
--- a/src/components/CommentForm/CommentForm.tsx
+++ /dev/null
@@ -1,240 +0,0 @@
-import { ButtonSubmit } from '@components/Buttons';
-import { Field, Form, FormItem, Label } from '@components/FormElements';
-import Notice from '@components/Notice/Notice';
-import Spinner from '@components/Spinner/Spinner';
-import { createComment } from '@services/graphql/mutations';
-import { NoticeType } from '@ts/types/app';
-import { useEffect, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './CommentForm.module.scss';
-
-const CommentForm = ({
-  articleId,
-  parentId = 0,
-}: {
-  articleId: number;
-  parentId?: number;
-}) => {
-  const intl = useIntl();
-  const [name, setName] = useState<string>('');
-  const [email, setEmail] = useState<string>('');
-  const [website, setWebsite] = useState<string>('');
-  const [comment, setComment] = useState<string>('');
-  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  const [notice, setNotice] = useState<string>();
-  const [noticeType, setNoticeType] = useState<NoticeType>('success');
-  const nameFieldRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (parentId === 0) return;
-    nameFieldRef.current && nameFieldRef.current.focus();
-  });
-
-  const resetForm = () => {
-    setName('');
-    setEmail('');
-    setWebsite('');
-    setComment('');
-    setIsSubmitting(false);
-  };
-
-  const isEmptyString = (value: string): boolean => value.trim() === '';
-  const areRequiredFieldsSet = (): boolean =>
-    !isEmptyString(name) && !isEmptyString(email) && !isEmptyString(comment);
-
-  const sendComment = async () => {
-    const data = {
-      author: name,
-      authorEmail: email,
-      authorUrl: website,
-      content: comment,
-      parent: parentId,
-      commentOn: articleId,
-      mutationId: 'createComment',
-    };
-
-    const createdComment = await createComment(data);
-
-    if (createdComment.success) {
-      resetForm();
-      setNoticeType('success');
-      if (createdComment.comment?.approved) {
-        setNotice(
-          intl.formatMessage({
-            defaultMessage: 'Thanks for your comment!',
-            description: 'CommentForm: success notice',
-            id: 'AVUUgG',
-          })
-        );
-      } else {
-        setNotice(
-          intl.formatMessage({
-            defaultMessage:
-              'Thanks for your comment! It is now awaiting moderation.',
-            description: 'CommentForm: success notice but awaiting moderation',
-            id: 'Ul2NIl',
-          })
-        );
-      }
-
-      setTimeout(() => {
-        setNotice(undefined);
-      }, 10000);
-    } else {
-      setNoticeType('error');
-      setNotice(
-        intl.formatMessage({
-          defaultMessage:
-            'An unexpected error happened. Comment cannot be submitted.',
-          description: 'CommentForm: error notice',
-          id: 'cjK9Ad',
-        })
-      );
-    }
-  };
-
-  const submitHandler = async (e: SubmitEvent) => {
-    e.preventDefault();
-    setNotice(undefined);
-    setIsSubmitting(true);
-
-    if (areRequiredFieldsSet()) {
-      sendComment();
-    } else {
-      setIsSubmitting(false);
-      setNoticeType('warning');
-      setNotice(
-        intl.formatMessage({
-          defaultMessage:
-            'Some required fields are empty. Comment cannot be submitted.',
-          description: 'CommentForm: missing required fields',
-          id: 'Rle+UK',
-        })
-      );
-    }
-  };
-
-  const isReply = parentId !== 0;
-  const wrapperClasses = `${styles.wrapper} ${
-    isReply ? styles['wrapper--reply'] : ''
-  }`;
-
-  const getLabel = (
-    body: string,
-    htmlFor: string,
-    required: boolean = false
-  ) => {
-    return <Label body={body} htmlFor={htmlFor} required={required} />;
-  };
-
-  const nameLabelBody = intl.formatMessage({
-    defaultMessage: 'Name',
-    description: 'CommentForm: Name field label',
-    id: 'F7QxJH',
-  });
-
-  const emailLabelBody = intl.formatMessage({
-    defaultMessage: 'Email',
-    description: 'CommentForm: Email field label',
-    id: 'Oim3rQ',
-  });
-
-  const websiteLabelBody = intl.formatMessage({
-    defaultMessage: 'Website',
-    description: 'CommentForm: Website field label',
-    id: 'jN+dY5',
-  });
-
-  const commentLabelBody = intl.formatMessage({
-    defaultMessage: 'Comment',
-    description: 'CommentForm: Comment field label',
-    id: 'J4nhm4',
-  });
-
-  return (
-    <div className={wrapperClasses}>
-      <h2 className={styles.title}>
-        {intl.formatMessage({
-          defaultMessage: 'Leave a comment',
-          description: 'CommentForm: Form title',
-          id: '+aHn7j',
-        })}
-      </h2>
-      <Form
-        submitHandler={submitHandler}
-        kind={isReply ? 'centered' : undefined}
-      >
-        <FormItem>
-          <Field
-            id="commenter-name"
-            name="commenter-name"
-            label={getLabel(nameLabelBody, 'commenter-name', true)}
-            value={name}
-            setValue={setName}
-            required={true}
-            ref={nameFieldRef}
-          />
-        </FormItem>
-        <FormItem>
-          <Field
-            id="commenter-email"
-            name="commenter-email"
-            kind="email"
-            label={getLabel(emailLabelBody, 'commenter-email', true)}
-            value={email}
-            setValue={setEmail}
-            required={true}
-          />
-        </FormItem>
-        <FormItem>
-          <Field
-            id="commenter-website"
-            name="commenter-website"
-            label={getLabel(websiteLabelBody, 'commenter-website')}
-            value={website}
-            setValue={setWebsite}
-          />
-        </FormItem>
-        <FormItem>
-          <Field
-            id="commenter-comment"
-            name="commenter-comment"
-            kind="textarea"
-            label={getLabel(commentLabelBody, 'commenter-comment', true)}
-            value={comment}
-            setValue={setComment}
-            required={true}
-          />
-        </FormItem>
-        <FormItem>
-          <noscript>
-            {intl.formatMessage({
-              defaultMessage: 'Javascript is required to post a comment.',
-              description: 'CommentForm: noscript tag',
-              id: 'g1cFCa',
-            })}
-          </noscript>
-          <ButtonSubmit>
-            {intl.formatMessage({
-              defaultMessage: 'Send',
-              description: 'CommentForm: Send button',
-              id: 'WGFOmA',
-            })}
-          </ButtonSubmit>
-        </FormItem>
-      </Form>
-      {isSubmitting && (
-        <Spinner
-          message={intl.formatMessage({
-            defaultMessage: 'Submitting...',
-            description: 'CommentForm: submitting message',
-            id: 'HEJ3Gv',
-          })}
-        />
-      )}
-      {notice && <Notice type={noticeType}>{notice}</Notice>}
-    </div>
-  );
-};
-
-export default CommentForm;
diff --git a/src/components/CommentsList/CommentsList.module.scss b/src/components/CommentsList/CommentsList.module.scss
deleted file mode 100644
index 4971b15..0000000
--- a/src/components/CommentsList/CommentsList.module.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@use "@styles/abstracts/placeholders";
-
-.title,
-.no-comments {
-  width: max-content;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.list {
-  @extend %reset-ordered-list;
-
-  margin-bottom: var(--spacing-lg);
-}
diff --git a/src/components/CommentsList/CommentsList.tsx b/src/components/CommentsList/CommentsList.tsx
deleted file mode 100644
index 0eaac17..0000000
--- a/src/components/CommentsList/CommentsList.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import Comment from '@components/Comment/Comment';
-import Spinner from '@components/Spinner/Spinner';
-import { getCommentsByPostId } from '@services/graphql/queries';
-import { Comment as CommentData } from '@ts/types/comments';
-import { useIntl } from 'react-intl';
-import useSWR from 'swr';
-import styles from './CommentsList.module.scss';
-
-const CommentsList = ({
-  articleId,
-  comments,
-}: {
-  articleId: number;
-  comments: CommentData[];
-}) => {
-  const intl = useIntl();
-  const { data, error } = useSWR<CommentData[]>(
-    '/api/comments',
-    () => getCommentsByPostId(articleId),
-    { fallbackData: comments }
-  );
-
-  const getCommentsList = () => {
-    if (error) {
-      return intl.formatMessage({
-        defaultMessage: 'Failed to load.',
-        description: 'CommentsList: failed to load',
-        id: 'Zlkww3',
-      });
-    }
-
-    if (!data) return <Spinner />;
-
-    return data.map((comment) => {
-      return (
-        <Comment
-          key={comment.databaseId}
-          articleId={articleId}
-          comment={comment}
-        />
-      );
-    });
-  };
-
-  return (
-    <>
-      <h2 className={styles.title}>
-        {intl.formatMessage({
-          defaultMessage: 'Comments',
-          description: 'CommentsList: Comments section title',
-          id: 'Ns8CFb',
-        })}
-      </h2>
-      {data && data.length > 0 ? (
-        <ol className={styles.list}>{getCommentsList()}</ol>
-      ) : (
-        <p className={styles['no-comments']}>
-          {intl.formatMessage({
-            defaultMessage: 'No comments yet.',
-            description: 'CommentsList: No comment message',
-            id: 'e9L59q',
-          })}
-        </p>
-      )}
-    </>
-  );
-};
-
-export default CommentsList;
diff --git a/src/components/ContactForm/ContactForm.module.scss b/src/components/ContactForm/ContactForm.module.scss
deleted file mode 100644
index 3f0e861..0000000
--- a/src/components/ContactForm/ContactForm.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.status {
-  max-width: max-content;
-  margin: var(--spacing-md) 0;
-  padding: var(--spacing-sm);
-  border: fun.convert-px(3) solid var(--color-border-light);
-  border-radius: fun.convert-px(5);
-
-  &--error {
-    border-color: var(--color-token-red);
-  }
-
-  &--success {
-    border-color: var(--color-token-green);
-  }
-
-  &--warning {
-    border-color: var(--color-token-orange);
-  }
-}
diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx
deleted file mode 100644
index 5af6982..0000000
--- a/src/components/ContactForm/ContactForm.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { ButtonSubmit } from '@components/Buttons';
-import { Field, Form, FormItem, Label } from '@components/FormElements';
-import { sendMail } from '@services/graphql/mutations';
-import { settings } from '@utils/config';
-import { FormEvent, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './ContactForm.module.scss';
-
-type Status = 'success' | 'error' | 'warning';
-
-const ContactForm = () => {
-  const intl = useIntl();
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [subject, setSubject] = useState('');
-  const [message, setMessage] = useState('');
-  const [status, setStatus] = useState<Status>();
-  const [statusMessage, setStatusMessage] = useState<string>('');
-
-  const resetForm = () => {
-    setName('');
-    setEmail('');
-    setSubject('');
-    setMessage('');
-  };
-
-  const submitHandler = async (e: FormEvent) => {
-    e.preventDefault();
-
-    if (!name || !email || !message) {
-      setStatus('warning');
-      setStatusMessage(
-        intl.formatMessage({
-          defaultMessage:
-            'Warning: mail not sent. Some required fields are empty.',
-          description: 'ContactForm: missing fields message.',
-          id: 'WpycgB',
-        })
-      );
-      return;
-    }
-
-    const messageHTML = message.replace(/\r?\n/g, '<br />');
-    const body = `Message received from ${name} <${email}> on ${settings.url}.<br /><br />${messageHTML}`;
-    const replyTo = `${name} <${email}>`;
-    const data = {
-      body,
-      mutationId: 'contact',
-      replyTo,
-      subject,
-    };
-    const mail = await sendMail(data);
-
-    if (mail.sent) {
-      setStatus('success');
-      setStatusMessage(
-        intl.formatMessage({
-          defaultMessage:
-            'Thanks. Your message was successfully sent. I will answer it as soon as possible.',
-          description: 'ContactForm: success message',
-          id: 'gQKeF+',
-        })
-      );
-      resetForm();
-    } else {
-      const errorPrefix = intl.formatMessage({
-        defaultMessage: 'An error occurred:',
-        description: 'ContactForm: error message',
-        id: 'pTxT7N',
-      });
-      const error = `${errorPrefix} ${mail.message}`;
-      setStatus('error');
-      setStatusMessage(error);
-    }
-  };
-
-  const getStatus = () => {
-    if (!status) return <></>;
-
-    const statusModifier = `status--${status}`;
-
-    return (
-      <p className={`${styles.status} ${styles[statusModifier]}`}>
-        {statusMessage}
-      </p>
-    );
-  };
-
-  const getLabel = (
-    body: string,
-    htmlFor: string,
-    required: boolean = false
-  ) => {
-    return <Label body={body} htmlFor={htmlFor} required={required} />;
-  };
-
-  const nameLabelBody = intl.formatMessage({
-    defaultMessage: 'Name',
-    description: 'ContactForm: name field label',
-    id: '6ibqFS',
-  });
-
-  const emailLabelBody = intl.formatMessage({
-    defaultMessage: 'Email',
-    description: 'ContactForm: email field label',
-    id: 'Vuryko',
-  });
-
-  const subjectLabelBody = intl.formatMessage({
-    defaultMessage: 'Subject',
-    description: 'ContactForm: subject field label',
-    id: 'uMURuJ',
-  });
-
-  const messageLabelBody = intl.formatMessage({
-    defaultMessage: 'Message',
-    description: 'ContactForm: message field label',
-    id: '0zBQpa',
-  });
-
-  return (
-    <>
-      <Form submitHandler={submitHandler}>
-        <FormItem>
-          <Field
-            id="contact-name"
-            name="name"
-            value={name}
-            setValue={setName}
-            required={true}
-            label={getLabel(nameLabelBody, 'contact-name', true)}
-          />
-        </FormItem>
-        <FormItem>
-          <Field
-            id="contact-email"
-            kind="email"
-            name="email"
-            value={email}
-            setValue={setEmail}
-            required={true}
-            label={getLabel(emailLabelBody, 'contact-email', true)}
-          />
-        </FormItem>
-        <FormItem>
-          <Field
-            id="contact-subject"
-            name="subject"
-            value={subject}
-            setValue={setSubject}
-            label={getLabel(subjectLabelBody, 'contact-subject')}
-          />
-        </FormItem>
-        <FormItem>
-          <Field
-            id="contact-message"
-            kind="textarea"
-            name="message"
-            value={message}
-            setValue={setMessage}
-            required={true}
-            label={getLabel(messageLabelBody, 'contact-message', true)}
-          />
-        </FormItem>
-        <FormItem>
-          <ButtonSubmit>
-            {intl.formatMessage({
-              defaultMessage: 'Send',
-              description: 'ContactForm: send button text',
-              id: 'X7n7N2',
-            })}
-          </ButtonSubmit>
-        </FormItem>
-      </Form>
-      {getStatus()}
-    </>
-  );
-};
-
-export default ContactForm;
diff --git a/src/components/Copyright/Copyright.module.scss b/src/components/Copyright/Copyright.module.scss
deleted file mode 100644
index 35445b2..0000000
--- a/src/components/Copyright/Copyright.module.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  --icon-size: #{fun.convert-px(70)};
-
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  place-content: center;
-  gap: var(--spacing-2xs);
-  margin: 0;
-  font-family: var(--font-family-secondary);
-  font-size: var(--font-size-md);
-  text-align: center;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      place-content: start;
-      text-align: left;
-    }
-  }
-}
-
-.name {
-  flex: 1 0 100%;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      flex: auto;
-    }
-  }
-}
diff --git a/src/components/Copyright/Copyright.tsx b/src/components/Copyright/Copyright.tsx
deleted file mode 100644
index d2de2e9..0000000
--- a/src/components/Copyright/Copyright.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CopyrightIcon } from '@components/Icons';
-import { settings } from '@utils/config';
-import styles from './Copyright.module.scss';
-
-const Copyright = () => {
-  return (
-    <p className={styles.wrapper}>
-      <span className={styles.name}>{settings.name}</span>
-      <CopyrightIcon />
-      <span>
-        {settings.copyright.startYear} - {settings.copyright.endYear}
-      </span>
-    </p>
-  );
-};
-
-export default Copyright;
diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss
deleted file mode 100644
index 1d156f8..0000000
--- a/src/components/Footer/Footer.module.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  display: flex;
-  flex-flow: column wrap;
-  gap: var(--spacing-xs);
-  place-items: center;
-  place-content: center;
-  padding: var(--spacing-md) 0 calc(var(--toolbar-size) + var(--spacing-md));
-  border-top: fun.convert-px(3) solid var(--color-border-light);
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      flex-flow: row wrap;
-      font-size: var(--font-size-sm);
-    }
-  }
-}
-
-.back-to-top {
-  --button-size: #{fun.convert-px(55)};
-  --icon-size: #{fun.convert-px(32)};
-
-  position: fixed;
-  bottom: calc(var(--toolbar-size) + var(--spacing-md));
-  right: var(--spacing-md);
-  transition: all 0.4s ease-in 0s;
-
-  &--hidden {
-    opacity: 0;
-    transform: translateY(calc(var(--button-size) + var(--spacing-md)));
-  }
-
-  &--visible {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  a {
-    display: flex;
-    place-content: center;
-    padding: 0;
-    width: var(--button-size);
-    height: var(--button-size);
-
-    svg {
-      height: 85%;
-    }
-
-    :global {
-      .arrow-head {
-        transform: translateY(30%);
-        transition: all 0.45s ease-in-out 0s;
-      }
-
-      .arrow-bar {
-        opacity: 0;
-        transform: translateY(30%) translateX(25%) scale(0.5);
-        transition: transform 0.45s ease-in-out 0s, opacity 0.3s ease-in-out 0s;
-      }
-    }
-
-    &:hover,
-    &:focus {
-      :global {
-        .arrow-head {
-          transform: translateY(0);
-        }
-
-        .arrow-bar {
-          opacity: 1;
-          transform: translateY(0) translateX(0) scale(1);
-        }
-      }
-
-      svg {
-        :global {
-          animation: pulse 1.2s ease-in-out 0.6s infinite;
-        }
-      }
-    }
-
-    &:active {
-      svg {
-        animation-play-state: paused;
-      }
-    }
-  }
-}
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
deleted file mode 100644
index 381b4a8..0000000
--- a/src/components/Footer/Footer.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { ButtonLink } from '@components/Buttons';
-import Copyright from '@components/Copyright/Copyright';
-import FooterNav from '@components/FooterNav/FooterNav';
-import { ArrowIcon } from '@components/Icons';
-import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './Footer.module.scss';
-
-const Footer = () => {
-  const intl = useIntl();
-  const [backToTopClasses, setBackToTopClasses] = useState(
-    `${styles['back-to-top']} ${styles['back-to-top--hidden']}`
-  );
-
-  const handleScroll = () => {
-    const currentScrollY = window.scrollY;
-
-    if (currentScrollY > 300) {
-      setBackToTopClasses(
-        `${styles['back-to-top']} ${styles['back-to-top--visible']}`
-      );
-    } else {
-      setBackToTopClasses(
-        `${styles['back-to-top']} ${styles['back-to-top--hidden']}`
-      );
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  return (
-    <footer className={styles.wrapper}>
-      <Copyright />
-      <FooterNav />
-      <div className={backToTopClasses}>
-        <ButtonLink target="#top" position="center">
-          <span className="screen-reader-text">
-            {intl.formatMessage({
-              defaultMessage: 'Back to top',
-              description: 'Footer: Back to top button',
-              id: 'dqrd6I',
-            })}
-          </span>
-          <ArrowIcon direction="top" />
-        </ButtonLink>
-      </div>
-    </footer>
-  );
-};
-
-export default Footer;
diff --git a/src/components/FooterNav/FooterNav.module.scss b/src/components/FooterNav/FooterNav.module.scss
deleted file mode 100644
index 73ea568..0000000
--- a/src/components/FooterNav/FooterNav.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.list {
-  @extend %flex-list;
-
-  gap: var(--spacing-xs);
-  place-content: center;
-}
-
-.item {
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      &::before {
-        content: "\2022";
-        margin-right: var(--spacing-xs);
-      }
-    }
-  }
-}
diff --git a/src/components/FooterNav/FooterNav.tsx b/src/components/FooterNav/FooterNav.tsx
deleted file mode 100644
index 763e951..0000000
--- a/src/components/FooterNav/FooterNav.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import Link from 'next/link';
-import styles from './FooterNav.module.scss';
-import { NavItem } from '@ts/types/nav';
-import { useIntl } from 'react-intl';
-
-const FooterNav = () => {
-  const intl = useIntl();
-
-  const footerNavConfig: NavItem[] = [
-    {
-      id: 'legal-notice',
-      name: intl.formatMessage({
-        defaultMessage: 'Legal notice',
-        description: 'FooterNav: legal notice link',
-        id: 'yWjXRx',
-      }),
-      slug: '/mentions-legales',
-    },
-  ];
-
-  const navItems = footerNavConfig.map((item) => {
-    return (
-      <li key={item.id} className={styles.item}>
-        <Link href={item.slug}>
-          <a className={styles.link}>{item.name}</a>
-        </Link>
-      </li>
-    );
-  });
-
-  return (
-    <nav
-      className={styles.nav}
-      aria-label={intl.formatMessage({
-        defaultMessage: 'Footer',
-        description: 'FooterNav: aria-label',
-        id: 'HTdaZj',
-      })}
-    >
-      <ul className={styles.list}>{navItems}</ul>
-    </nav>
-  );
-};
-
-export default FooterNav;
diff --git a/src/components/FormElements/Field/Field.module.scss b/src/components/FormElements/Field/Field.module.scss
deleted file mode 100644
index 9100495..0000000
--- a/src/components/FormElements/Field/Field.module.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.field {
-  background: var(--color-bg-tertiary);
-  border: fun.convert-px(2) solid var(--color-border);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
-  transition: all 0.25s linear 0s;
-
-  &:not(.select) {
-    width: 100%;
-    padding: var(--spacing-2xs) var(--spacing-xs);
-  }
-
-  &:hover {
-    box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
-      var(--color-shadow);
-    transform: translate(#{fun.convert-px(-3)}, #{fun.convert-px(-3)});
-  }
-
-  &:focus {
-    background: var(--color-bg);
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
-    outline: none;
-    transition: all 0.2s ease-in-out 0s, transform 0.3s ease-out 0s;
-  }
-}
-
-.select {
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  cursor: pointer;
-
-  @include mix.pointer("fine") {
-    padding: fun.convert-px(3) var(--spacing-xs);
-  }
-
-  &:hover {
-    box-shadow: fun.convert-px(4) fun.convert-px(4) 0 fun.convert-px(1)
-      var(--color-shadow);
-    transform: translate(#{fun.convert-px(-2)}, #{fun.convert-px(-2)});
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    transform: translate(#{fun.convert-px(3)}, #{fun.convert-px(3)});
-  }
-}
-
-.textarea {
-  min-height: fun.convert-px(200);
-}
diff --git a/src/components/FormElements/Field/Field.tsx b/src/components/FormElements/Field/Field.tsx
deleted file mode 100644
index c8df0f9..0000000
--- a/src/components/FormElements/Field/Field.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import {
-  ChangeEvent,
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
-  SetStateAction,
-} from 'react';
-import styles from './Field.module.scss';
-
-type FieldType = 'email' | 'number' | 'search' | 'select' | 'text' | 'textarea';
-type SelectOptions = {
-  id: string;
-  name: string;
-  value: string;
-};
-
-const Field = (
-  {
-    id,
-    name,
-    value,
-    setValue,
-    required = false,
-    kind = 'text',
-    label,
-    options,
-  }: {
-    id: string;
-    name: string;
-    value: string;
-    setValue: (value: SetStateAction<string>) => void;
-    required?: boolean;
-    kind?: FieldType;
-    label?: ReactElement;
-    options?: SelectOptions[];
-  },
-  ref: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>
-) => {
-  const updateValue = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>
-  ) => {
-    setValue(e.target.value);
-  };
-
-  const getOptions = () => {
-    return options
-      ? options.map((option) => (
-          <option key={option.id} value={option.value}>
-            {option.name}
-          </option>
-        ))
-      : '';
-  };
-
-  const getField = () => {
-    switch (kind) {
-      case 'select':
-        return (
-          <select
-            name={name}
-            id={id}
-            value={value}
-            onChange={updateValue}
-            required={required}
-            className={`${styles.field} ${styles.select}`}
-          >
-            {getOptions()}
-          </select>
-        );
-      case 'textarea':
-        return (
-          <textarea
-            ref={ref as ForwardedRef<HTMLTextAreaElement>}
-            id={id}
-            name={name}
-            value={value}
-            required={required}
-            onChange={updateValue}
-            className={`${styles.field} ${styles.textarea}`}
-          />
-        );
-      default:
-        return (
-          <input
-            ref={ref as ForwardedRef<HTMLInputElement>}
-            type={kind}
-            id={id}
-            name={name}
-            value={value}
-            required={required}
-            onChange={updateValue}
-            className={styles.field}
-          />
-        );
-    }
-  };
-
-  return (
-    <>
-      {label}
-      {getField()}
-    </>
-  );
-};
-
-export default forwardRef(Field);
diff --git a/src/components/FormElements/Form/Form.module.scss b/src/components/FormElements/Form/Form.module.scss
deleted file mode 100644
index 0f7c437..0000000
--- a/src/components/FormElements/Form/Form.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  width: 100%;
-}
-
-.centered {
-  max-width: 45ch;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.search {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-
-  > input {
-    padding-right: calc(var(--btn-size) + var(--spacing-2xs));
-
-    &:hover ~ button {
-      transform: translate(fun.convert-px(-3), fun.convert-px(-3));
-    }
-
-    &:focus ~ button {
-      transform: translate(fun.convert-px(3), fun.convert-px(3));
-    }
-  }
-}
-
-.settings {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  margin: var(--spacing-sm) 0;
-  position: relative;
-}
diff --git a/src/components/FormElements/Form/Form.tsx b/src/components/FormElements/Form/Form.tsx
deleted file mode 100644
index 10fdcdf..0000000
--- a/src/components/FormElements/Form/Form.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ReactNode } from 'react';
-import styles from './Form.module.scss';
-
-type FormKind = 'centered' | 'search' | 'settings';
-
-const Form = ({
-  children,
-  submitHandler,
-  kind,
-  id,
-}: {
-  children: ReactNode;
-  submitHandler: any;
-  kind?: FormKind;
-  id?: string;
-}) => {
-  const kindStyles = kind ? styles[kind] : '';
-  const classes = `${styles.wrapper} ${kindStyles}`;
-
-  return (
-    <form onSubmit={submitHandler} className={classes} id={id}>
-      {children}
-    </form>
-  );
-};
-
-export default Form;
diff --git a/src/components/FormElements/FormItem/FormItem.module.scss b/src/components/FormElements/FormItem/FormItem.module.scss
deleted file mode 100644
index 07ef56f..0000000
--- a/src/components/FormElements/FormItem/FormItem.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.wrapper {
-  margin: var(--spacing-xs) 0;
-  max-width: 45ch;
-}
diff --git a/src/components/FormElements/FormItem/FormItem.tsx b/src/components/FormElements/FormItem/FormItem.tsx
deleted file mode 100644
index 8d674f1..0000000
--- a/src/components/FormElements/FormItem/FormItem.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styles from './FormItem.module.scss';
-
-const FormItem: React.FunctionComponent = ({ children }) => {
-  return <div className={styles.wrapper}>{children}</div>;
-};
-
-export default FormItem;
diff --git a/src/components/FormElements/Label/Label.module.scss b/src/components/FormElements/Label/Label.module.scss
deleted file mode 100644
index c527b16..0000000
--- a/src/components/FormElements/Label/Label.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.regular {
-  display: block;
-  color: var(--color-primary-darker);
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 600;
-}
-
-.settings {
-  --icon-size: #{fun.convert-px(25)};
-  --toggle-width: #{fun.convert-px(45)};
-  --toggle-height: calc(var(--toggle-width) / 2);
-
-  display: inline-flex;
-  align-items: center;
-}
-
-.required {
-  color: var(--color-secondary);
-}
diff --git a/src/components/FormElements/Label/Label.tsx b/src/components/FormElements/Label/Label.tsx
deleted file mode 100644
index baedff0..0000000
--- a/src/components/FormElements/Label/Label.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import styles from './Label.module.scss';
-
-type LabelKind = 'regular' | 'settings';
-
-const Label = ({
-  body,
-  htmlFor,
-  required = false,
-  kind = 'regular',
-}: {
-  body: string;
-  htmlFor: string;
-  required?: boolean;
-  kind?: LabelKind;
-}) => {
-  return (
-    <label htmlFor={htmlFor} className={styles[kind]}>
-      {body}
-      {required && <span className={styles.required}> *</span>}
-    </label>
-  );
-};
-
-export default Label;
diff --git a/src/components/FormElements/Toggle/Toggle.module.scss b/src/components/FormElements/Toggle/Toggle.module.scss
deleted file mode 100644
index 48c88f6..0000000
--- a/src/components/FormElements/Toggle/Toggle.module.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.label {
-  --icon-size: #{fun.convert-px(25)};
-  --toggle-width: #{fun.convert-px(45)};
-  --toggle-height: calc(var(--toggle-width) / 2);
-
-  display: inline-flex;
-  align-items: center;
-}
-
-.title {
-  margin-right: var(--spacing-xs);
-}
-
-.toggle {
-  display: inline-flex;
-  align-items: center;
-  width: var(--toggle-width);
-  height: var(--toggle-height);
-  background: var(--color-shadow-light);
-  border: fun.convert-px(1) solid var(--color-primary);
-  border-radius: fun.convert-px(32);
-  box-shadow: inset 0 0 fun.convert-px(3) 0 var(--color-shadow-dark);
-  margin: 0 var(--spacing-2xs);
-  position: relative;
-
-  &::after {
-    content: "";
-    display: block;
-    width: calc(var(--toggle-width) / 2);
-    height: calc(var(--toggle-width) / 2);
-    background: var(--color-primary-light);
-    border: fun.convert-px(1) solid var(--color-primary);
-    border-radius: 50%;
-    box-shadow: inset 0 0 fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow),
-      0 0 fun.convert-px(2) fun.convert-px(1) var(--color-shadow-light);
-    position: absolute;
-    left: fun.convert-px(-2);
-    transition: all 0.3s ease-in-out 0s;
-  }
-}
-
-.checkbox {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-
-  &:checked ~ .label {
-    .toggle::after {
-      position: absolute;
-      left: calc(100% - (var(--toggle-width) / 2) + #{fun.convert-px(2)});
-    }
-  }
-
-  &:hover,
-  &:focus {
-    ~ .label {
-      .toggle::after {
-        background: var(--color-primary-lighter);
-      }
-    }
-  }
-
-  &:focus ~ .label {
-    .title {
-      text-decoration: underline solid var(--color-primary) fun.convert-px(2);
-    }
-
-    .toggle {
-      outline: var(--color-border) solid fun.convert-px(5);
-    }
-  }
-}
diff --git a/src/components/FormElements/Toggle/Toggle.tsx b/src/components/FormElements/Toggle/Toggle.tsx
deleted file mode 100644
index 4db7d43..0000000
--- a/src/components/FormElements/Toggle/Toggle.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { FormEvent, ReactElement } from 'react';
-import { Form } from '..';
-import styles from './Toggle.module.scss';
-
-const Toggle = ({
-  id,
-  label,
-  value,
-  changeHandler,
-  leftChoice,
-  rightChoice,
-  name,
-}: {
-  id: string;
-  label: string;
-  value: boolean;
-  changeHandler: (value: boolean) => void;
-  leftChoice: ReactElement | string;
-  rightChoice: ReactElement | string;
-  name?: string;
-}) => {
-  const onSubmit = (e: FormEvent) => {
-    e.preventDefault();
-  };
-
-  return (
-    <Form kind="settings" submitHandler={onSubmit}>
-      <input
-        className={styles.checkbox}
-        type="checkbox"
-        id={id}
-        name={name ? name : id}
-        checked={value}
-        onChange={() => changeHandler(!value)}
-      />
-      <label htmlFor={id} className={styles.label}>
-        <span className={styles.title}>{label}</span>
-        {leftChoice}
-        <span className={styles.toggle}></span>
-        {rightChoice}
-      </label>
-    </Form>
-  );
-};
-
-export default Toggle;
diff --git a/src/components/FormElements/index.tsx b/src/components/FormElements/index.tsx
deleted file mode 100644
index 8ca69b4..0000000
--- a/src/components/FormElements/index.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import Field from './Field/Field';
-import Form from './Form/Form';
-import FormItem from './FormItem/FormItem';
-import Label from './Label/Label';
-import Toggle from './Toggle/Toggle';
-
-export { Field, Form, FormItem, Label, Toggle };
diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss
deleted file mode 100644
index aa0d8cf..0000000
--- a/src/components/Header/Header.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  display: grid;
-  grid-template-columns:
-    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);
-  position: relative;
-  background: var(--color-bg);
-  border-bottom: fun.convert-px(3) solid var(--color-border-light);
-}
-
-.body {
-  grid-column: 2;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
deleted file mode 100644
index 0b773e9..0000000
--- a/src/components/Header/Header.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import Branding from '@components/Branding/Branding';
-import Toolbar from '@components/Toolbar/Toolbar';
-import styles from './Header.module.scss';
-
-const Header = ({ isHome }: { isHome: boolean }) => {
-  return (
-    <header id="top" className={styles.wrapper}>
-      <div className={styles.body}>
-        <Branding isHome={isHome} />
-        <Toolbar />
-      </div>
-    </header>
-  );
-};
-
-export default Header;
diff --git a/src/components/Icons/Arrow/Arrow.module.scss b/src/components/Icons/Arrow/Arrow.module.scss
deleted file mode 100644
index 49e9b02..0000000
--- a/src/components/Icons/Arrow/Arrow.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  fill: var(--color-primary);
-  width: var(--icon-size, #{fun.convert-px(30)});
-  transition: all 0.25s ease-in-out 0s;
-}
diff --git a/src/components/Icons/Arrow/Arrow.tsx b/src/components/Icons/Arrow/Arrow.tsx
deleted file mode 100644
index e9131d1..0000000
--- a/src/components/Icons/Arrow/Arrow.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import styles from './Arrow.module.scss';
-
-type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
-
-const ArrowIcon = ({ direction = 'right' }: { direction?: ArrowDirection }) => {
-  if (direction === 'top') {
-    return (
-      <svg
-        className={styles.icon}
-        viewBox="0 0 23.476 64.644995"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          className="arrow-head"
-          d="M 23.476001,24.637 11.715001,0 0,24.800001 Z"
-        />
-        <path
-          className="arrow-bar"
-          d="m 15.441001,64.644997 -0.018,-40.007999 H 8.035 l 0.142,40.007999 z"
-        />
-      </svg>
-    );
-  }
-
-  if (direction === 'bottom') {
-    return (
-      <svg
-        className={styles.icon}
-        viewBox="0 0 23.476 64.644995"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          className="arrow-head"
-          d="m 23.476001,40.007997 -11.761,24.637 L 0,39.844996 Z"
-        />
-        <path
-          className="arrow-bar"
-          d="m 15.441001,0 -0.018,40.007999 H 8.035 L 8.177,0 Z"
-        />
-      </svg>
-    );
-  }
-
-  if (direction === 'left') {
-    return (
-      <svg
-        className={styles.icon}
-        viewBox="0 0 64.644997 23.476001"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          className="arrow-head"
-          d="M 24.637,23.476 0,11.715 24.8,-8.3923343e-8 Z"
-        />
-        <path
-          className="arrow-bar"
-          d="m 64.644997,15.441 -40.008,-0.018 V 8.0349999 l 40.008,0.142 z"
-        />
-      </svg>
-    );
-  }
-
-  return (
-    <svg
-      className={styles.icon}
-      viewBox="0 0 64.644997 23.476001"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        className="arrow-head"
-        d="M 40.007997,23.476 64.644997,11.715 39.844997,-8.3923343e-8 Z"
-      />
-      <path
-        className="arrow-bar"
-        d="M 0,15.441 40.008,15.423 V 8.0349999 L 0,8.1769999 Z"
-      />
-    </svg>
-  );
-};
-
-export default ArrowIcon;
diff --git a/src/components/Icons/Blog/Blog.module.scss b/src/components/Icons/Blog/Blog.module.scss
deleted file mode 100644
index 5376c61..0000000
--- a/src/components/Icons/Blog/Blog.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  margin: auto;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.lines {
-  fill: var(--color-fg);
-  stroke-width: 4;
-}
-
-.picture {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-}
-
-.background {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
diff --git a/src/components/Icons/Blog/Blog.tsx b/src/components/Icons/Blog/Blog.tsx
deleted file mode 100644
index bd32111..0000000
--- a/src/components/Icons/Blog/Blog.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import styles from './Blog.module.scss';
-
-const BlogIcon = () => {
-  return (
-    <svg
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
-    >
-      <path
-        className={styles.background}
-        d="M 28.992096,1.4822128 H 90.770752 V 82.312253 H 28.992096 Z"
-      />
-      <path
-        className={styles.background}
-        d="m 19.110672,8.992094 h 61.778656 v 80.83004 H 19.110672 Z"
-      />
-      <path
-        className={styles.background}
-        d="m 9.229248,17.687748 h 61.778656 v 80.83004 H 9.229248 Z"
-      />
-      <path
-        className={styles.picture}
-        d="M 18.149242,74.65544 H 33.375246 V 90.194215 H 18.149242 Z"
-      />
-      <path
-        className={styles.picture}
-        d="M 18.142653,24.858688 H 62.094499 V 35.908926 H 18.142653 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 17.618576,41.908926 h 45 v 2 h -45 z"
-      />
-      <path
-        className={styles.lines}
-        d="m 17.618576,49.908926 h 45 v 2 h -45 z"
-      />
-      <path
-        className={styles.lines}
-        d="m 17.618576,57.908926 h 45 v 2 h -45 z"
-      />
-      <path
-        className={styles.lines}
-        d="m 17.618576,65.908926 h 45 v 2 h -45 z"
-      />
-      <path
-        className={styles.lines}
-        d="m 41.833105,73.424828 h 20.785471 v 2 H 41.833105 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 41.833105,81.424828 h 20.785471 v 2 H 41.833105 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 41.833105,89.424828 h 20.785471 v 2 H 41.833105 Z"
-      />
-    </svg>
-  );
-};
-
-export default BlogIcon;
diff --git a/src/components/Icons/CV/CV.module.scss b/src/components/Icons/CV/CV.module.scss
deleted file mode 100644
index aaa8a1a..0000000
--- a/src/components/Icons/CV/CV.module.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  margin: auto;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.lock {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 3;
-}
-
-.lines {
-  fill: var(--color-fg);
-  stroke-width: 4;
-}
-
-.seal-top {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 2;
-}
-
-.seal-bottom {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 2;
-}
-
-.diploma {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.top {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.handle {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 3;
-}
-
-.bottom {
-  fill: var(--color-primary);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
diff --git a/src/components/Icons/CV/CV.tsx b/src/components/Icons/CV/CV.tsx
deleted file mode 100644
index 876d1cb..0000000
--- a/src/components/Icons/CV/CV.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import styles from './CV.module.scss';
-
-const CVIcon = () => {
-  return (
-    <svg
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
-    >
-      <path
-        className={styles.bottom}
-        d="M 0.72670447,19.813041 H 77.467597 v 54.36591 H 0.72670447 Z"
-      />
-      <path
-        className={styles.handle}
-        d="m 22.263958,10.17849 c 12.6493,-1.81512 21.613185,-1.732794 33.666442,0 l 1.683339,10.99517 h -5.891624 v -5.474639 c -7.949741,-2.722434 -16.311959,-2.706359 -25.249837,0 v 5.474639 h -5.891625 z"
-      />
-      <path
-        className={styles.top}
-        d="M 0.72670447,19.813041 H 77.467597 V 51.17622 H 0.72670447 Z"
-      />
-      <path
-        className={styles.diploma}
-        d="M 44.217117,47.159906 H 98.921356 V 82.664122 H 44.217117 Z"
-      />
-      <path
-        className={styles['seal-bottom']}
-        d="m 84.933665,80.775336 h 6.957554 V 90.992144 L 88.412426,87.2244 84.933665,90.992144 Z"
-      />
-      <path
-        className={styles['seal-top']}
-        d="m 93.326919,76.83334 a 4.914472,4.9188584 0 0 1 -4.914493,4.918858 4.914472,4.9188584 0 0 1 -4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914461,-4.918858 4.914472,4.9188584 0 0 1 4.914493,4.918858 z"
-      />
-      <path
-        className={styles.lines}
-        d="m 54.53557,60.491974 h 34.067282 v 1.515453 H 54.53557 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 54.53557,67.437763 h 34.067282 v 1.515453 H 54.53557 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 54.53557,74.383628 h 17.563315 v 1.515454 H 54.53557 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 63.495911,53.546123 h 16.146628 v 1.515452 H 63.495911 Z"
-      />
-      <path
-        className={styles.lock}
-        d="M 34.048314,42.893007 H 44.145988 V 57.849688 H 34.048314 Z"
-      />
-    </svg>
-  );
-};
-
-export default CVIcon;
diff --git a/src/components/Icons/Close/Close.module.scss b/src/components/Icons/Close/Close.module.scss
deleted file mode 100644
index 5a1f638..0000000
--- a/src/components/Icons/Close/Close.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  margin: auto;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.line {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 3;
-}
diff --git a/src/components/Icons/Close/Close.tsx b/src/components/Icons/Close/Close.tsx
deleted file mode 100644
index 12214de..0000000
--- a/src/components/Icons/Close/Close.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import styles from './Close.module.scss';
-
-const CloseIcon = () => {
-  return (
-    <svg
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
-    >
-      <path
-        className={styles.line}
-        d="m 3.6465461,3.6465455 c 2.8785908,-2.87859092 7.5134339,-2.87859092 10.3920249,0 L 96.353457,85.96143 c 2.878587,2.878591 2.878587,7.513434 0,10.392025 -2.878597,2.878591 -7.513432,2.878591 -10.392029,0 L 3.6465451,14.038571 C 0.76795421,11.15998 0.76795421,6.5251364 3.6465461,3.6465455 Z"
-      />
-      <path
-        className={styles.line}
-        d="m 96.353453,3.646546 c 2.878592,2.8785909 2.878592,7.513435 0,10.392026 L 14.03857,96.353457 c -2.878589,2.878587 -7.5134337,2.878587 -10.3920246,0 -2.87859084,-2.878597 -2.87858985,-7.513442 -1e-6,-10.392029 L 85.961428,3.646546 c 2.878591,-2.87859097 7.513434,-2.87859097 10.392025,0 z"
-      />
-    </svg>
-  );
-};
-
-export default CloseIcon;
diff --git a/src/components/Icons/Cog/Cog.module.scss b/src/components/Icons/Cog/Cog.module.scss
deleted file mode 100644
index a861f0c..0000000
--- a/src/components/Icons/Cog/Cog.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(40)});
-  margin: auto;
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
diff --git a/src/components/Icons/Cog/Cog.tsx b/src/components/Icons/Cog/Cog.tsx
deleted file mode 100644
index 7a04d76..0000000
--- a/src/components/Icons/Cog/Cog.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import styles from './Cog.module.scss';
-
-const CogIcon = () => {
-  return (
-    <svg
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
-    >
-      <path d="m 71.782287,3.1230469 c -1.164356,0 -2.3107,0.076326 -3.435131,0.2227895 L 66.33766,9.1021499 C 64.651951,9.5517047 63.049493,10.204637 61.558109,11.033725 L 56.112383,8.2889128 c -1.970928,1.4609237 -3.730521,3.1910632 -5.22513,5.1351362 l 2.648234,5.494014 c -0.855644,1.477262 -1.537042,3.067161 -2.016082,4.743334 l -5.791433,1.911821 c -0.188001,1.269731 -0.286444,2.568579 -0.286444,3.890587 0,1.164355 0.07633,2.310701 0.222789,3.435131 l 5.756315,2.009497 c 0.449555,1.685708 1.102486,3.288168 1.931575,4.779551 l -2.744813,5.445725 c 1.460924,1.970927 3.191063,3.730521 5.135137,5.22513 l 5.494014,-2.648233 c 1.477261,0.85564 3.067161,1.537039 4.743334,2.016081 L 67.8917,55.51812 c 1.26973,0.188002 2.568578,0.286444 3.890587,0.286444 1.16565,0 2.313889,-0.07601 3.43952,-0.222789 l 2.008399,-5.756314 c 1.684332,-0.449523 3.285984,-1.103103 4.776259,-1.931575 l 5.445725,2.744812 c 1.970928,-1.460924 3.730521,-3.191061 5.22513,-5.135136 l -2.648233,-5.494015 c 0.85564,-1.477262 1.537039,-3.067161 2.016082,-4.743334 l 5.79253,-1.91182 c 0.187995,-1.269731 0.285346,-2.56858 0.285346,-3.890588 0,-1.16565 -0.07601,-2.313889 -0.222789,-3.439521 L 92.143942,24.015886 C 91.694419,22.331554 91.04084,20.729903 90.212367,19.239628 l 2.744812,-5.445726 C 91.496255,11.822973 89.766118,10.063381 87.822043,8.5687715 L 82.328028,11.217006 C 80.850766,10.361361 79.260867,9.6799641 77.584694,9.2009234 L 75.672874,3.4094907 C 74.403143,3.2214898 73.104295,3.1230469 71.782287,3.1230469 Z m 0,15.0520191 a 11.288679,11.288679 0 0 1 11.288739,11.288739 11.288679,11.288679 0 0 1 -11.288739,11.28874 11.288679,11.288679 0 0 1 -11.28874,-11.28874 11.288679,11.288679 0 0 1 11.28874,-11.288739 z" />
-      <path d="m 38.326115,25.84777 c -1.583642,0 -3.142788,0.103807 -4.672127,0.303016 l -2.73312,7.829173 c -2.292736,0.611441 -4.472242,1.499494 -6.500676,2.627139 L 17.01345,32.873874 c -2.680664,1.987004 -5.073889,4.340169 -7.1067095,6.984309 l 3.6018685,7.472418 c -1.163764,2.009226 -2.090533,4.171652 -2.742078,6.451418 l -7.8769382,2.60027 C 2.6338924,58.109252 2.5,59.875819 2.5,61.673885 c 0,1.583642 0.1038125,3.142788 0.3030165,4.672128 l 7.8291725,2.73312 c 0.611441,2.292734 1.499494,4.472243 2.627139,6.500673 L 9.5261037,82.98655 c 1.9870063,2.680661 4.3401703,5.07389 6.9843093,7.106709 l 7.472419,-3.601867 c 2.009226,1.16376 4.171651,2.090533 6.451418,2.742079 l 2.60027,7.876932 C 34.761483,97.366114 36.528049,97.5 38.326115,97.5 c 1.585404,0 3.147126,-0.103373 4.678099,-0.303015 l 2.731628,-7.829178 c 2.290862,-0.611397 4.469272,-1.500329 6.496197,-2.627132 l 7.406741,3.733224 c 2.680664,-1.987007 5.07389,-4.340171 7.10671,-6.984313 l -3.601866,-7.472415 c 1.163756,-2.00923 2.090529,-4.171655 2.742076,-6.45142 l 7.878431,-2.60027 c 0.255691,-1.726964 0.3881,-3.49353 0.3881,-5.291596 0,-1.585404 -0.103373,-3.147127 -0.303016,-4.678099 L 66.020041,54.264159 C 65.408645,51.973296 64.51971,49.794888 63.392903,47.767962 l 3.733224,-7.406742 c -1.987006,-2.680664 -4.340168,-5.073889 -6.984309,-7.10671 l -7.472419,3.601867 c -2.009228,-1.163762 -4.171651,-2.090533 -6.451418,-2.742076 l -2.60027,-7.876939 C 41.890748,25.981661 40.124181,25.84777 38.326115,25.84777 Z m 0,20.472278 A 15.353754,15.353754 0 0 1 53.679952,61.673885 15.353754,15.353754 0 0 1 38.326115,77.027724 15.353754,15.353754 0 0 1 22.972279,61.673885 15.353754,15.353754 0 0 1 38.326115,46.320048 Z" />
-    </svg>
-  );
-};
-
-export default CogIcon;
diff --git a/src/components/Icons/Contact/Contact.module.scss b/src/components/Icons/Contact/Contact.module.scss
deleted file mode 100644
index 963c1dc..0000000
--- a/src/components/Icons/Contact/Contact.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  margin: auto;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.envelop {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.lines {
-  fill: var(--color-fg);
-}
-
-.background {
-  fill: var(--color-shadow-dark);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.paper {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
diff --git a/src/components/Icons/Contact/Contact.tsx b/src/components/Icons/Contact/Contact.tsx
deleted file mode 100644
index 19295d0..0000000
--- a/src/components/Icons/Contact/Contact.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import styles from './Contact.module.scss';
-
-const ContactIcon = () => {
-  return (
-    <svg
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
-    >
-      <path
-        className={styles.background}
-        d="M 1.5262527,42.535416 H 98.473747 V 98.371662 H 1.5262527 Z"
-      />
-      <path
-        className={styles.envelop}
-        d="m 49.999985,1.6283075 c 2.855148,0 48.473753,40.8563885 48.473753,40.8563885 H 1.5262359 c 0,0 45.6186001,-40.8563885 48.4737491,-40.8563885 z"
-      />
-      <path
-        className={styles.paper}
-        d="M 8.3434839,28.463842 H 91.656465 V 97.348661 H 8.3434839 Z"
-      />
-      <path
-        className={styles.envelop}
-        d="M 49.999985,63.571925 98.473738,98.371692 H 1.5262359 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 24.562439,37.640923 h 50.875053 v 1.5 H 24.562439 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 24.562439,45.140923 h 50.875053 v 1.5 H 24.562439 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 24.562443,52.640923 h 50.875053 v 1.5 H 24.562443 Z"
-      />
-      <path
-        className={styles.lines}
-        d="M 24.562447,60.140923 H 75.4375 v 1.5 H 24.562447 Z"
-      />
-      <path
-        className={styles.envelop}
-        d="M 39.93749,70.965004 1.5262559,43.55838 v 54.813242 z"
-      />
-      <path
-        className={styles.envelop}
-        d="M 60.0625,70.965004 98.473738,43.55838 v 54.813242 z"
-      />
-    </svg>
-  );
-};
-
-export default ContactIcon;
diff --git a/src/components/Icons/Copyright/Copyright.module.scss b/src/components/Icons/Copyright/Copyright.module.scss
deleted file mode 100644
index 8ea801e..0000000
--- a/src/components/Icons/Copyright/Copyright.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  width: var(--icon-size, #{fun.convert-px(40)});
-  fill: var(--color-fg);
-}
diff --git a/src/components/Icons/Copyright/Copyright.tsx b/src/components/Icons/Copyright/Copyright.tsx
deleted file mode 100644
index d27c042..0000000
--- a/src/components/Icons/Copyright/Copyright.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import styles from './Copyright.module.scss';
-
-const CopyrightIcon = () => {
-  return (
-    <svg
-      className={styles.icon}
-      viewBox="0 0 211.99811 63.999996"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>CC BY SA</title>
-      <path d="m 175.53911,15.829498 c 0,-3.008 1.485,-4.514 4.458,-4.514 2.973,0 4.457,1.504 4.457,4.514 0,2.971 -1.486,4.457 -4.457,4.457 -2.971,0 -4.458,-1.486 -4.458,-4.457 z" />
-      <path d="m 188.62611,24.057498 v 13.085 h -3.656 v 15.542 h -9.944 v -15.541 h -3.656 v -13.086 c 0,-0.572 0.2,-1.057 0.599,-1.457 0.401,-0.399 0.887,-0.6 1.457,-0.6 h 13.144 c 0.533,0 1.01,0.2 1.428,0.6 0.417,0.4 0.628,0.886 0.628,1.457 z" />
-      <path d="m 179.94147,-1.9073486e-6 c -8.839,0 -16.34167,3.0848125073486 -22.51367,9.2578125073486 -6.285,6.4000004 -9.42969,13.9811874 -9.42969,22.7421874 0,8.762 3.14469,16.284312 9.42969,22.570312 6.361,6.286 13.86467,9.429688 22.51367,9.429688 8.799,0 16.43611,-3.181922 22.91211,-9.544922 6.096,-5.98 9.14453,-13.464078 9.14453,-22.455078 0,-8.952 -3.10646,-16.532188 -9.31446,-22.7421874 -6.172,-6.172 -13.75418,-9.2578125073486 -22.74218,-9.2578125073486 z M 180.05475,5.7714825 c 7.238,0 13.40967,2.55225 18.51367,7.6562495 5.103,5.106 7.65625,11.294313 7.65625,18.570313 0,7.391 -2.51397,13.50575 -7.54297,18.34375 -5.295,5.221 -11.50591,7.828125 -18.6289,7.828125 -7.162,0 -13.33268,-2.589484 -18.51368,-7.771484 -5.18,-5.178001 -7.76953,-11.310485 -7.76953,-18.396485 0,-7.047 2.60813,-13.238266 7.82813,-18.572265 5.029,-5.1040004 11.18103,-7.6582035 18.45703,-7.6582035 z" />
-      <path d="m 91.998554,27.114498 c 0.609,-3.924 2.189,-6.962 4.742,-9.114 2.552,-2.152 5.655996,-3.228 9.313996,-3.228 5.027,0 9.029,1.62 12,4.856 2.971,3.238 4.457,7.391 4.457,12.457 0,4.915 -1.543,9 -4.627,12.256 -3.088,3.256 -7.086,4.886 -12.002,4.886 -3.619,0 -6.742996,-1.085 -9.370996,-3.257 -2.629,-2.172 -4.209,-5.257 -4.743,-9.257 h 8.059 c 0.189996,3.886 2.532996,5.829 7.028996,5.829 2.246,0 4.057,-0.972 5.428,-2.914 1.373,-1.942 2.059,-4.534 2.059,-7.771 0,-3.391 -0.629,-5.971 -1.885,-7.743 -1.258,-1.771 -3.066,-2.657 -5.43,-2.657 -4.268,0 -6.667,1.885 -7.199996,5.656 h 2.342996 l -6.341996,6.343 -6.343,-6.343 z" />
-      <path d="m 105.94241,-1.8610229e-6 c -8.799996,0 -16.304676,3.1054062610229 -22.513666,9.3164061610229 -6.285,6.3999997 -9.42969,13.9625467 -9.42969,22.6855467 0,8.763 3.14469,16.28336 9.42969,22.568359 6.361,6.286001 13.86467,9.429688 22.513666,9.429688 8.836,0 16.47511,-3.162328 22.91211,-9.486328 6.096,-6.057 9.14453,-13.559672 9.14453,-22.513672 0,-8.952 -3.10646,-16.513547 -9.31446,-22.6855468 -6.211,-6.21 -13.79118,-9.3144530610229 -22.74218,-9.3144530610229 z M 106.05569,5.7714825 c 7.275,0 13.44667,2.5698437 18.51367,7.7148435 5.103,5.028 7.65625,11.200672 7.65625,18.513672 0,7.353 -2.51397,13.46775 -7.54297,18.34375 -5.295,5.219 -11.50591,7.828125 -18.6289,7.828125 -7.161996,0 -13.332676,-2.589484 -18.513676,-7.771484 -5.18,-5.143 -7.76953,-11.275391 -7.76953,-18.400391 0,-7.046 2.60813,-13.217672 7.82813,-18.513672 5.029,-5.1429998 11.18103,-7.7148435 18.457026,-7.7148435 z" />
-      <path d="M 31.942383,5.9265138e-7 C 23.066111,5.9265138e-7 15.579851,3.1065496 9.484666,9.3147376 6.399571,12.400832 4.046856,15.896269 2.427808,19.801386 0.80876,23.706506 0,27.771846 0,32.000976 c 0,4.26713 0.800415,8.32413 2.400463,12.17225 1.600051,3.84811 3.933123,7.30532 7.000216,10.37141 3.067093,3.06609 6.534587,5.40951 10.400708,7.02756 3.867116,1.62105 7.914819,2.4278 12.142946,2.4278 4.22813,0 8.32441,-0.8171 12.28553,-2.45515 3.96313,-1.63805 7.50614,-4.00301 10.62923,-7.0881 3.0081,-2.93309 5.28529,-6.31477 6.82834,-10.14289 1.54104,-3.82712 2.31257,-7.93174 2.31257,-12.31288 0,-4.34313 -0.78277,-8.44771 -2.34382,-12.31483 C 60.094133,15.82003 57.808593,12.380471 54.800503,9.3713796 48.515313,3.1241896 40.893653,5.9265136e-7 31.942383,5.9265138e-7 Z M 32.057623,5.7716626 c 7.23822,0 13.42863,2.571923 18.57478,7.7150794 2.47408,2.478074 4.35948,5.297144 5.65252,8.459244 1.29504,3.16209 1.94342,6.51384 1.94342,10.05694 0,7.35423 -2.49445,13.46816 -7.4846,18.34432 -2.59208,2.51407 -5.49406,4.43661 -8.71316,5.77166 -3.2231,1.33404 -6.54486,1.9981 -9.97296,1.9981 -3.467107,0 -6.782568,-0.65672 -9.943661,-1.97076 -3.164098,-1.31604 -5.999858,-3.21894 -8.513933,-5.71502 -2.515077,-2.49507 -4.447918,-5.33279 -5.800959,-8.51588 -1.354042,-3.1791 -2.029358,-6.48331 -2.029358,-9.91242 0,-3.4671 0.675316,-6.79186 2.029358,-9.97295 1.352043,-3.1811 3.285882,-6.046798 5.800959,-8.599875 4.991151,-5.1041594 11.14337,-7.6584384 18.457594,-7.6584384 z" />
-      <path d="m 50.114533,26.687816 -4.22913,2.22907 c -0.45702,-0.95103 -1.02003,-1.61905 -1.68605,-2.00006 -0.66802,-0.38001 -1.30704,-0.57102 -1.91406,-0.57102 -2.85709,0 -4.28713,1.88506 -4.28713,5.65717 0,1.71406 0.363,3.0841 1.08603,4.11313 0.72302,1.02903 1.78906,1.54405 3.2011,1.54405 1.86506,0 3.1801,-0.91503 3.94112,-2.74309 l 4.00012,2.00007 c -0.87502,1.56304 -2.05706,2.79108 -3.54111,3.68611 -1.48604,0.89602 -3.10509,1.34304 -4.85715,1.34304 -2.89608,0 -5.20915,-0.87503 -6.94121,-2.62908 -1.73605,-1.75205 -2.60207,-4.19013 -2.60207,-7.31323 0,-3.04809 0.88502,-5.46616 2.65808,-7.25722 1.77005,-1.79005 4.00812,-2.68608 6.7132,-2.68608 3.96212,-0.002 6.78321,1.54105 8.45826,4.62714 z" />
-      <path d="m 31.656963,26.687816 -4.287128,2.22907 c -0.458013,-0.95103 -1.019029,-1.61905 -1.685048,-2.00006 -0.667024,-0.38001 -1.286042,-0.57102 -1.858057,-0.57102 -2.856087,0 -4.28613,1.88506 -4.28613,5.65717 0,1.71406 0.362014,3.0841 1.085029,4.11313 0.724025,1.02903 1.791056,1.54405 3.201101,1.54405 1.867057,0 3.181095,-0.91503 3.944118,-2.74309 l 3.942125,2.00007 c -0.83803,1.56304 -2.000065,2.79108 -3.486111,3.68611 -1.484043,0.89602 -3.123093,1.34304 -4.914149,1.34304 -2.857088,0 -5.163158,-0.87503 -6.915212,-2.62908 -1.752053,-1.75205 -2.62808,-4.19013 -2.62808,-7.31323 0,-3.04809 0.886028,-5.46616 2.657081,-7.25722 1.771054,-1.79005 4.009125,-2.68608 6.715205,-2.68608 3.963122,-0.002 6.800209,1.54105 8.515256,4.62714 z" />
-    </svg>
-  );
-};
-
-export default CopyrightIcon;
diff --git a/src/components/Icons/Hamburger/Hamburger.module.scss b/src/components/Icons/Hamburger/Hamburger.module.scss
deleted file mode 100644
index 9965c5e..0000000
--- a/src/components/Icons/Hamburger/Hamburger.module.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  position: relative;
-  width: 100%;
-
-  &,
-  &::before,
-  &::after {
-    background: var(--color-primary-lighter);
-    background-image: linear-gradient(
-      to right,
-      var(--color-primary-light) 0%,
-      var(--color-primary-lighter) 100%
-    );
-    border: fun.convert-px(1) solid var(--color-primary-darker);
-    border-radius: fun.convert-px(3);
-    display: block;
-    height: fun.convert-px(7);
-    margin: auto;
-    transition: all 0.25s ease-in-out 0s, transform 0.4s ease-in 0s;
-  }
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    left: fun.convert-px(-1);
-    right: fun.convert-px(-1);
-  }
-
-  &::before {
-    bottom: fun.convert-px(15);
-  }
-
-  &::after {
-    top: fun.convert-px(15);
-  }
-
-  &--active {
-    background: transparent;
-    border: transparent;
-
-    &::before {
-      transform-origin: 50% 50%;
-      transform: rotate(45deg);
-      bottom: 0;
-    }
-
-    &::after {
-      transform-origin: 50% 50%;
-      transform: rotate(-45deg);
-      top: 0;
-    }
-  }
-}
diff --git a/src/components/Icons/Hamburger/Hamburger.tsx b/src/components/Icons/Hamburger/Hamburger.tsx
deleted file mode 100644
index 9b39272..0000000
--- a/src/components/Icons/Hamburger/Hamburger.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import styles from './Hamburger.module.scss';
-
-const HamburgerIcon = ({ isActive }: { isActive: boolean }) => {
-  const withModifier = isActive ? ` ${styles['icon--active']}` : '';
-  const iconClasses = `${styles.icon} ${withModifier}`;
-
-  return <span className={iconClasses}></span>;
-};
-
-export default HamburgerIcon;
diff --git a/src/components/Icons/Home/Home.module.scss b/src/components/Icons/Home/Home.module.scss
deleted file mode 100644
index f2e7f9e..0000000
--- a/src/components/Icons/Home/Home.module.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  margin: auto;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.wall {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.indoor {
-  fill: var(--color-shadow-dark);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.door {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.roof {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.chimney {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-}
-
-.lines {
-  fill: var(--color-primary-darker);
-  stroke-width: 4;
-}
diff --git a/src/components/Icons/Home/Home.tsx b/src/components/Icons/Home/Home.tsx
deleted file mode 100644
index 11c0c8c..0000000
--- a/src/components/Icons/Home/Home.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import styles from './Home.module.scss';
-
-const HomeIcon = () => {
-  return (
-    <svg
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
-    >
-      <path
-        className={styles.wall}
-        d="M 9.2669392,15.413749 H 90.709833 V 97.751815 H 9.2669392 Z"
-      />
-      <path
-        className={styles.indoor}
-        d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
-      />
-      <path
-        className={styles.door}
-        d="m 39.190941,65.836418 h 21.594871 v 31.91539 H 39.190941 Z"
-      />
-      <path
-        className={styles.roof}
-        d="M 4.8219096,11.719266 H 94.720716 l 3.47304,33.365604 H 1.7830046 Z"
-      />
-      <path
-        className={styles.chimney}
-        d="M 70.41848,2.2481852 H 82.957212 V 22.636212 H 70.41848 Z"
-      />
-      <path
-        className={styles.lines}
-        d="M 3.9536645,19.342648 H 61.003053 v 3.293563 H 3.9536645 Z"
-      />
-      <path
-        className={styles.lines}
-        d="m 38.973709,32.057171 h 57.049389 v 3.293563 H 38.973709 Z"
-      />
-    </svg>
-  );
-};
-
-export default HomeIcon;
diff --git a/src/components/Icons/Moon/Moon.module.scss b/src/components/Icons/Moon/Moon.module.scss
deleted file mode 100644
index 799a282..0000000
--- a/src/components/Icons/Moon/Moon.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.moon {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-  width: var(--icon-size, #{fun.convert-px(25)});
-}
diff --git a/src/components/Icons/Moon/Moon.tsx b/src/components/Icons/Moon/Moon.tsx
deleted file mode 100644
index 26f56a1..0000000
--- a/src/components/Icons/Moon/Moon.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useIntl } from 'react-intl';
-import styles from './Moon.module.scss';
-
-const MoonIcon = () => {
-  const intl = useIntl();
-
-  return (
-    <svg
-      className={styles.moon}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        {intl.formatMessage({
-          defaultMessage: 'Dark theme',
-          description: 'Icons: Moon icon (dark theme)',
-          id: 'ode0YK',
-        })}
-      </title>
-      <path d="M 51.077315,1.9893942 A 43.319985,43.319985 0 0 1 72.840039,39.563145 43.319985,43.319985 0 0 1 29.520053,82.88313 43.319985,43.319985 0 0 1 5.4309911,75.569042 48.132997,48.132997 0 0 0 46.126047,98 48.132997,48.132997 0 0 0 94.260004,49.867002 48.132997,48.132997 0 0 0 51.077315,1.9893942 Z" />
-    </svg>
-  );
-};
-
-export default MoonIcon;
diff --git a/src/components/Icons/Projects/Projects.module.scss b/src/components/Icons/Projects/Projects.module.scss
deleted file mode 100644
index 3cf939a..0000000
--- a/src/components/Icons/Projects/Projects.module.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  margin: auto;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.root,
-.separator,
-.cursor,
-.line,
-.text {
-  fill: var(--color-fg);
-}
-
-.stand {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-dark);
-
-  &--top {
-    stroke-width: 3;
-  }
-
-  &--bottom {
-    stroke-width: 2;
-  }
-}
-
-.screen {
-  fill: var(--color-bg);
-  stroke: var(--color-primary-dark);
-  stroke-width: 3;
-}
-
-.contour {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-dark);
-  stroke-width: 3;
-}
diff --git a/src/components/Icons/Projects/Projects.tsx b/src/components/Icons/Projects/Projects.tsx
deleted file mode 100644
index d4af247..0000000
--- a/src/components/Icons/Projects/Projects.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import styles from './Projects.module.scss';
-
-const ProjectsIcon = () => {
-  return (
-    <svg
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
-    >
-      <path
-        d="M 1.0206528,11.991149 H 98.979347 V 78.466748 H 1.0206528 Z"
-        className={styles.contour}
-      />
-      <path
-        d="M 6.2503581,18.032451 H 93.563283 V 71.12731 H 6.2503581 Z"
-        className={styles.screen}
-      />
-      <path
-        d="m 40.038268,78.939276 c 4.614714,2.7794 4.333151,10.099225 0,17.60572 H 50 59.961731 c -4.333151,-7.506495 -4.614715,-14.82632 0,-17.60572 H 50 Z"
-        className={`${styles.stand} ${styles['stand--top']}`}
-      />
-      <path
-        d="m 31.084262,96.254656 h 37.831475 c 1.394769,0 2.517635,0.404907 2.517635,0.907864 v 1.179616 c 0,0.502956 -1.122866,0.907864 -2.517635,0.907864 H 31.084262 c -1.394769,0 -2.517635,-0.404908 -2.517635,-0.907864 V 97.16252 c 0,-0.502957 1.122866,-0.907864 2.517635,-0.907864 z"
-        className={`${styles.stand} ${styles['stand--bottom']}`}
-      />
-      <path
-        d="m 13.259277,26.737199 h 29.132596 v 2.567314 H 13.259277 Z"
-        className={styles.line}
-      />
-      <path
-        d="M 13.259277,36.439141 H 36.46805 v 2.567315 H 13.259277 Z"
-        className={styles.line}
-      />
-      <path
-        d="m 13.259277,46.141084 h 26.586812 v 2.567314 H 13.259277 Z"
-        className={styles.line}
-      />
-      <path
-        d="m 18.443194,65.930804 h 4.417548 v 1 h -4.417548 z"
-        className={styles.cursor}
-      />
-      <path
-        d="m 77.586096,42.217577 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z"
-        className={styles.text}
-      />
-      <path
-        d="m 68.396606,43.291289 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z"
-        className={styles.text}
-      />
-      <path
-        d="m 59.384832,39.322258 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z"
-        className={styles.text}
-      />
-      <path
-        d="M 7.1079167,57.876372 H 92.892083 v 0.813634 H 7.1079167 Z"
-        className={styles.separator}
-      />
-      <path
-        d="m 17.042456,64.960616 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 v -0.468093 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 q -0.104797,-0.600837 -0.653236,-0.674195 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z"
-        className={styles.root}
-      />
-    </svg>
-  );
-};
-
-export default ProjectsIcon;
diff --git a/src/components/Icons/Search/Search.module.scss b/src/components/Icons/Search/Search.module.scss
deleted file mode 100644
index 4c42028..0000000
--- a/src/components/Icons/Search/Search.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.icon {
-  display: block;
-  margin: auto;
-  width: var(--icon-size, #{fun.convert-px(40)});
-}
-
-.big-handle {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 3;
-}
-
-.glass {
-  fill: var(--color-bg-opacity);
-  stroke: var(--color-primary-darker);
-  stroke-width: 2;
-}
-
-.upright {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 3;
-}
-
-.small-handle {
-  fill: var(--color-primary);
-  stroke: var(--color-primary-darker);
-  stroke-width: 2;
-}
diff --git a/src/components/Icons/Search/Search.tsx b/src/components/Icons/Search/Search.tsx
deleted file mode 100644
index abb7b53..0000000
--- a/src/components/Icons/Search/Search.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import styles from './Search.module.scss';
-
-const SearchIcon = () => {
-  return (
-    <svg
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-      className={styles.icon}
-    >
-      <path
-        className={styles['small-handle']}
-        d="m 45.39268,48.064692 5.611922,4.307881 -10.292886,13.414321 -5.611923,-4.307882 z"
-      />
-      <path
-        className={styles.upright}
-        d="M 90.904041,28.730105 A 27.725691,27.730085 0 0 1 63.17835,56.46019 27.725691,27.730085 0 0 1 35.45266,28.730105 27.725691,27.730085 0 0 1 63.17835,1.00002 27.725691,27.730085 0 0 1 90.904041,28.730105 Z"
-      />
-      <path
-        className={styles.glass}
-        d="M 82.438984,28.730105 A 19.260633,19.263685 0 0 1 63.17835,47.99379 19.260633,19.263685 0 0 1 43.917716,28.730105 19.260633,19.263685 0 0 1 63.17835,9.4664203 19.260633,19.263685 0 0 1 82.438984,28.730105 Z"
-      />
-      <path
-        className={styles['big-handle']}
-        d="m 35.826055,60.434903 5.75193,4.415356 c 0.998045,0.766128 1.184879,2.186554 0.418913,3.184809 L 18.914717,98.117182 c -0.765969,0.998256 -2.186094,1.185131 -3.18414,0.418997 L 9.9786472,94.120827 C 8.9806032,93.354698 8.7937692,91.934273 9.5597392,90.936014 L 32.641919,60.853903 c 0.765967,-0.998254 2.186091,-1.185129 3.184136,-0.419 z"
-      />
-    </svg>
-  );
-};
-
-export default SearchIcon;
diff --git a/src/components/Icons/Sun/Sun.module.scss b/src/components/Icons/Sun/Sun.module.scss
deleted file mode 100644
index 5682aa3..0000000
--- a/src/components/Icons/Sun/Sun.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.sun {
-  fill: var(--color-primary-lighter);
-  stroke: var(--color-primary-darker);
-  stroke-width: 4;
-  width: var(--icon-size, #{fun.convert-px(25)});
-}
diff --git a/src/components/Icons/Sun/Sun.tsx b/src/components/Icons/Sun/Sun.tsx
deleted file mode 100644
index 12f47d3..0000000
--- a/src/components/Icons/Sun/Sun.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useIntl } from 'react-intl';
-import styles from './Sun.module.scss';
-
-const SunIcon = () => {
-  const intl = useIntl();
-
-  return (
-    <svg
-      className={styles.sun}
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        {intl.formatMessage({
-          defaultMessage: 'Light theme',
-          description: 'Icons: Sun icon (light theme)',
-          id: 'KeRtm/',
-        })}
-      </title>
-      <path d="M 69.398043,50.000437 A 19.399259,19.399204 0 0 1 49.998784,69.399641 19.399259,19.399204 0 0 1 30.599525,50.000437 19.399259,19.399204 0 0 1 49.998784,30.601234 19.399259,19.399204 0 0 1 69.398043,50.000437 Z m 27.699233,1.125154 c 2.657696,0.0679 1.156196,12.061455 -1.435545,11.463959 L 80.113224,59.000697 c -2.589801,-0.597494 -1.625657,-8.345536 1.032041,-8.278609 z m -18.06653,37.251321 c 1.644087,2.091234 -9.030355,8.610337 -10.126414,6.188346 L 62.331863,80.024585 c -1.096058,-2.423931 5.197062,-6.285342 6.839209,-4.194107 z M 38.611418,97.594444 C 38.02653,100.18909 26.24148,95.916413 27.436475,93.54001 l 7.168026,-14.256474 c 1.194024,-2.376403 8.102101,0.151313 7.517214,2.744986 z M 6.1661563,71.834242 C 3.7916868,73.028262 -0.25499873,61.16274 2.3386824,60.577853 L 17.905618,57.067567 c 2.593681,-0.584886 4.894434,6.403678 2.518995,7.598668 z M 6.146757,30.055146 c -2.3764094,-1.194991 4.46571,-11.714209 6.479353,-9.97798 l 12.090589,10.414462 c 2.014613,1.736229 -1.937017,7.926514 -4.314396,6.731524 z M 38.56777,4.2639045 C 37.982883,1.6682911 50.480855,0.41801247 50.415868,3.0766733 L 50.020123,19.028638 c -0.06596,2.657691 -7.357169,3.394862 -7.943027,0.800218 z m 40.403808,9.1622435 c 1.635357,-2.098023 10.437771,6.872168 8.339742,8.506552 l -12.58818,9.805327 c -2.099,1.634383 -7.192276,-3.626682 -5.557888,-5.724706 z M 97.096306,50.69105 c 2.657696,-0.06596 1.164926,12.462047 -1.425846,11.863582 L 80.122924,58.96578 c -2.590771,-0.597496 -1.636327,-7.814 1.021371,-7.879957 z" />
-    </svg>
-  );
-};
-
-export default SunIcon;
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
deleted file mode 100644
index 5fe2c19..0000000
--- a/src/components/Icons/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import ArrowIcon from './Arrow/Arrow';
-import BlogIcon from './Blog/Blog';
-import CloseIcon from './Close/Close';
-import CogIcon from './Cog/Cog';
-import ContactIcon from './Contact/Contact';
-import CopyrightIcon from './Copyright/Copyright';
-import CVIcon from './CV/CV';
-import HamburgerIcon from './Hamburger/Hamburger';
-import HomeIcon from './Home/Home';
-import MoonIcon from './Moon/Moon';
-import ProjectsIcon from './Projects/Projects';
-import SearchIcon from './Search/Search';
-import SunIcon from './Sun/Sun';
-
-export {
-  ArrowIcon,
-  BlogIcon,
-  CloseIcon,
-  CogIcon,
-  ContactIcon,
-  CopyrightIcon,
-  CVIcon,
-  HamburgerIcon,
-  HomeIcon,
-  MoonIcon,
-  ProjectsIcon,
-  SearchIcon,
-  SunIcon,
-};
diff --git a/src/components/Layouts/Layout.module.scss b/src/components/Layouts/Layout.module.scss
deleted file mode 100644
index 33339d4..0000000
--- a/src/components/Layouts/Layout.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.noscript {
-  width: 100%;
-  padding: var(--spacing-xs) var(--spacing-sm);
-  position: fixed;
-  top: 0;
-  z-index: 10;
-  background: var(--color-bg);
-  border-bottom: fun.convert-px(3) solid var(--color-border);
-  color: var(--color-primary-darker);
-  font-size: var(--font-size-sm);
-  font-weight: 600;
-  text-align: center;
-}
-
-.noscript-spacing {
-  width: 100%;
-  height: fun.convert-px(80);
-}
diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
deleted file mode 100644
index ada32b3..0000000
--- a/src/components/Layouts/Layout.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import Footer from '@components/Footer/Footer';
-import Header from '@components/Header/Header';
-import Main from '@components/Main/Main';
-import Breadcrumb from '@components/Breadcrumb/Breadcrumb';
-import { settings } from '@utils/config';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { ReactElement, ReactNode, useEffect, useRef } from 'react';
-import { useIntl } from 'react-intl';
-import { SearchAction, WebSite, WithContext } from 'schema-dts';
-import styles from './Layout.module.scss';
-import Script from 'next/script';
-
-const Layout = ({
-  children,
-  isHome = false,
-}: {
-  children: ReactNode;
-  isHome?: boolean;
-}) => {
-  const intl = useIntl();
-  const { asPath, locale } = useRouter();
-  const ref = useRef<HTMLSpanElement>(null);
-
-  useEffect(() => {
-    ref.current?.focus();
-  }, [asPath]);
-
-  type QueryAction = SearchAction & {
-    'query-input': string;
-  };
-
-  const searchActionSchema: QueryAction = {
-    '@type': 'SearchAction',
-    target: {
-      '@type': 'EntryPoint',
-      urlTemplate: `${settings.url}/recherche?s={search_term_string}`,
-    },
-    query: 'required',
-    'query-input': 'required name=search_term_string',
-  };
-
-  const schemaJsonLd: WithContext<WebSite> = {
-    '@context': 'https://schema.org',
-    '@id': `${settings.url}`,
-    '@type': 'WebSite',
-    name: settings.name,
-    description: locale?.startsWith('en')
-      ? settings.baseline.en
-      : settings.baseline.fr,
-    url: settings.url,
-    author: { '@id': `${settings.url}/#branding` },
-    copyrightYear: Number(settings.copyright.startYear),
-    creator: { '@id': `${settings.url}/#branding` },
-    editor: { '@id': `${settings.url}/#branding` },
-    inLanguage: settings.locales.defaultLocale,
-    potentialAction: searchActionSchema,
-  };
-
-  return (
-    <>
-      <Head>
-        <meta property="og:site_name" content={settings.name} />
-        <meta
-          property="og:locale"
-          content={`${settings.locales.defaultLocale}_${settings.locales.defaultCountry}`}
-        />
-        <meta property="twitter:card" content="summary" />
-        <meta property="twitter:site" content={settings.twitterId} />
-        <meta property="twitter:creator" content={settings.twitterId} />
-        <meta
-          name="theme-color"
-          content="#14578a"
-          media="(prefers-color-scheme: light)"
-        />
-        <meta
-          name="theme-color"
-          content="#85bbd6"
-          media="(prefers-color-scheme: dark)"
-        />
-        <link
-          rel="alternate"
-          href="/feed.xml"
-          type="application/rss+xml"
-          title={`${settings.name}'s RSS feed`}
-        />
-        <link
-          rel="alternate"
-          href="/atom.xml"
-          type="application/atom+xml"
-          title={`${settings.name}'s Atom feed`}
-        />
-        <link
-          rel="alternate"
-          href="/feed.json"
-          type="application/feed+json"
-          title={`${settings.name}'s Json feed`}
-        />
-        <link rel="icon" href="/favicon.ico" sizes="any" />
-        <link rel="icon" href="/icon.svg" type="image/svg+xml" />
-        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-        <link rel="manifest" href="/manifest.webmanifest" />
-      </Head>
-      <Script
-        id="schema-layout"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      ></Script>
-      <Script
-        strategy="afterInteractive"
-        async
-        src={`${settings.ackee.url}/${settings.ackee.filename}`}
-        data-ackee-server={settings.ackee.url}
-        data-ackee-domain-id={settings.ackee.siteId}
-      />
-      <noscript>
-        <div className={styles['noscript-spacing']}></div>
-      </noscript>
-      <span ref={ref} tabIndex={-1} />
-      <a href="#main" className="screen-reader-text">
-        {intl.formatMessage({
-          defaultMessage: 'Skip to content',
-          description: 'Layout: Skip to content button',
-          id: 'iqAbyn',
-        })}
-      </a>
-      <Header isHome={isHome} />
-      <Main>{children}</Main>
-      <Footer />
-      <noscript>
-        <div className={styles.noscript}>
-          {intl.formatMessage({
-            defaultMessage:
-              'Without Javascript, some features may not work like loading more posts or use search. If you want to benefit from these features, please activate Javascript.',
-            description: 'Layout: noscript banner',
-            id: 'LR70nt',
-          })}
-        </div>
-      </noscript>
-    </>
-  );
-};
-
-export const getLayout = (page: ReactElement) => {
-  const pageTitle: string = page.props.breadcrumbTitle;
-
-  return (
-    <Layout>
-      <Breadcrumb pageTitle={pageTitle} />
-      {page}
-    </Layout>
-  );
-};
-
-export default Layout;
diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx
deleted file mode 100644
index c330063..0000000
--- a/src/components/MDX/CodeBlock/CodeBlock.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import {
-  PrismDefaultPlugins,
-  PrismLanguages,
-  PrismPlugins,
-} from '@ts/types/prism';
-import { usePrismTheme } from '@utils/providers/prism-theme';
-import { useRouter } from 'next/router';
-import Prism from 'prismjs';
-import { useCallback, useEffect, useMemo } from 'react';
-import { useIntl } from 'react-intl';
-
-const CodeBlock = ({
-  code,
-  language,
-  plugins,
-}: {
-  code: string;
-  language: PrismLanguages;
-  plugins: PrismPlugins[];
-}) => {
-  const intl = useIntl();
-  const router = useRouter();
-  const { setCodeBlocks } = usePrismTheme();
-
-  useEffect(() => {
-    const allPre: NodeListOf<HTMLPreElement> = document.querySelectorAll(
-      'pre[data-prismjs-color-scheme-current]'
-    );
-    setCodeBlocks(allPre);
-  }, [setCodeBlocks, router.asPath]);
-
-  const defaultPlugins: PrismDefaultPlugins[] = useMemo(
-    () => [
-      'autoloader',
-      'toolbar',
-      'show-language',
-      'copy-to-clipboard',
-      'color-scheme',
-      'match-braces',
-      'normalize-whitespace',
-    ],
-    []
-  );
-
-  const loadPrismPlugins = useCallback(
-    async (prismPlugins: (PrismDefaultPlugins | PrismPlugins)[]) => {
-      for (const plugin of prismPlugins) {
-        try {
-          if (plugin === 'color-scheme') {
-            await import(`@utils/plugins/prism-${plugin}`);
-          } else {
-            await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`);
-
-            if (plugin === 'autoloader')
-              Prism.plugins.autoloader.languages_path = '/prism/';
-          }
-        } catch (error) {
-          console.error('CodeBlock: an error occurred with Prism.');
-          console.error(error);
-        }
-      }
-    },
-    []
-  );
-
-  useEffect(() => {
-    loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
-      Prism.highlightAll();
-    });
-  }, [loadPrismPlugins, defaultPlugins, plugins]);
-
-  const copyText = intl.formatMessage({
-    defaultMessage: 'Copy',
-    description: 'Prism: copy button text (no clicked)',
-    id: '/ly3AC',
-  });
-  const copiedText = intl.formatMessage({
-    defaultMessage: 'Copied!',
-    description: 'Prism: copy button text (clicked)',
-    id: 'OV9r1K',
-  });
-  const errorText = intl.formatMessage({
-    defaultMessage: 'Use Ctrl+c to copy',
-    description: 'Prism: error text',
-    id: 'z9qkcQ',
-  });
-  const darkTheme = intl.formatMessage({
-    defaultMessage: 'Dark Theme 🌙',
-    description: 'Prism: toggle dark theme button text',
-    id: 'nFMdWI',
-  });
-  const lightTheme = intl.formatMessage({
-    defaultMessage: 'Light Theme 🌞',
-    description: 'Prism: toggle light theme button text',
-    id: 'Ua2g2p',
-  });
-
-  const defaultPluginsClasses = 'match-braces';
-  const pluginsClasses = plugins.join(' ');
-
-  return (
-    <pre
-      className={`language-${language} ${defaultPluginsClasses} ${pluginsClasses}`}
-      data-prismjs-copy={copyText}
-      data-prismjs-copy-success={copiedText}
-      data-prismjs-copy-error={errorText}
-      data-prismjs-color-scheme-dark={darkTheme}
-      data-prismjs-color-scheme-light={lightTheme}
-    >
-      <code className={`language-${language}`}>{code}</code>
-    </pre>
-  );
-};
-
-export default CodeBlock;
diff --git a/src/components/MDX/Gallery/Gallery.module.scss b/src/components/MDX/Gallery/Gallery.module.scss
deleted file mode 100644
index 2654b59..0000000
--- a/src/components/MDX/Gallery/Gallery.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wrapper {
-  @extend %reset-list;
-
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--spacing-sm);
-  max-width: 100%;
-  margin: var(--spacing-sm) 0;
-
-  @for $i from 0 to 6 {
-    &--#{$i}-columns {
-      @include mix.media("screen") {
-        @include mix.dimensions("xs") {
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-
-        @include mix.dimensions("sm") {
-          grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
-        }
-      }
-    }
-  }
-}
-
-.item {
-  > figure {
-    margin: 0;
-  }
-}
diff --git a/src/components/MDX/Gallery/Gallery.tsx b/src/components/MDX/Gallery/Gallery.tsx
deleted file mode 100644
index 561ec53..0000000
--- a/src/components/MDX/Gallery/Gallery.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Children, ReactElement } from 'react';
-import styles from './Gallery.module.scss';
-
-const Gallery = ({
-  children,
-  columns = 2,
-}: {
-  children: ReactElement;
-  columns: number;
-}) => {
-  const columnClass = styles[`wrapper--${columns}-columns`];
-
-  return (
-    <ul className={`${styles.wrapper} ${columnClass}`}>
-      {Children.map(children, (child) => {
-        return <li className={styles.item}>{child}</li>;
-      })}
-    </ul>
-  );
-};
-
-export default Gallery;
diff --git a/src/components/MDX/Link/Link.tsx b/src/components/MDX/Link/Link.tsx
deleted file mode 100644
index 40e773b..0000000
--- a/src/components/MDX/Link/Link.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ReactChildren } from 'react';
-
-const Link = ({
-  children,
-  target,
-  isExternal = false,
-  lang,
-}: {
-  children: ReactChildren;
-  target: string;
-  isExternal: boolean;
-  lang?: string;
-}) => {
-  const className = isExternal ? 'external' : '';
-
-  return (
-    <a href={target} className={className} hrefLang={lang}>
-      {children}
-    </a>
-  );
-};
-
-export default Link;
diff --git a/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss b/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss
deleted file mode 100644
index cf2b77f..0000000
--- a/src/components/MDX/ResponsiveImage/ResponsiveImage.module.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  width: 100%;
-  max-width: 100%;
-  margin: var(--spacing-sm) auto;
-  position: relative;
-  text-align: center;
-}
-
-.caption {
-  margin: 0;
-  padding: fun.convert-px(4) var(--spacing-2xs);
-  background: var(--color-bg-secondary);
-  border: fun.convert-px(1) solid var(--color-border);
-  box-shadow: 0 fun.convert-px(-1) fun.convert-px(1) fun.convert-px(1)
-    var(--color-shadow-light);
-  font-weight: 500;
-}
-
-.link {
-  display: flex;
-  flex-flow: column;
-  background: none;
-  text-decoration: none;
-
-  .caption {
-    color: var(--color-primary-darker);
-  }
-
-  &:hover,
-  &:focus {
-    transform: scale(1.1);
-  }
-
-  &:focus {
-    .caption {
-      text-decoration: underline solid var(--color-primary-darker)
-        fun.convert-px(3);
-    }
-  }
-
-  &:active {
-    transform: scale(0.9);
-
-    .caption {
-      text-decoration: none;
-    }
-  }
-}
diff --git a/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx b/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx
deleted file mode 100644
index 6c39e7f..0000000
--- a/src/components/MDX/ResponsiveImage/ResponsiveImage.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { ResponsiveImageProps } from '@ts/types/app';
-import Image from 'next/image';
-import Link from 'next/link';
-import styles from './ResponsiveImage.module.scss';
-
-const ResponsiveImage = (props: ResponsiveImageProps) => {
-  const { caption, linkTarget, ...attributes } = props;
-
-  return (
-    <figure className={styles.wrapper}>
-      {linkTarget ? (
-        <Link href={linkTarget}>
-          <a className={styles.link}>
-            <Image
-              alt={attributes.alt}
-              layout={attributes.layout || 'intrinsic'}
-              {...attributes}
-            />
-            {caption && (
-              <figcaption className={styles.caption}>{caption}</figcaption>
-            )}
-          </a>
-        </Link>
-      ) : (
-        <>
-          <Image
-            alt={attributes.alt}
-            layout={attributes.layout || 'intrinsic'}
-            {...attributes}
-          />
-          {caption && (
-            <figcaption className={styles.caption}>{caption}</figcaption>
-          )}
-        </>
-      )}
-    </figure>
-  );
-};
-
-export default ResponsiveImage;
diff --git a/src/components/MDX/index.tsx b/src/components/MDX/index.tsx
deleted file mode 100644
index bc7aa35..0000000
--- a/src/components/MDX/index.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import CodeBlock from './CodeBlock/CodeBlock';
-import Gallery from './Gallery/Gallery';
-import Link from './Link/Link';
-import ResponsiveImage from './ResponsiveImage/ResponsiveImage';
-
-export { CodeBlock, Gallery, Link, ResponsiveImage };
diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
deleted file mode 100644
index 819474c..0000000
--- a/src/components/Main/Main.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.wrapper {
-  flex: 1;
-
-  :global {
-    animation: fade-in 1.5s ease-in-out 0s 1;
-  }
-}
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
deleted file mode 100644
index b21ab1c..0000000
--- a/src/components/Main/Main.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { FunctionComponent } from 'react';
-import styles from './Main.module.scss';
-
-const Main: FunctionComponent = ({ children }) => {
-  return (
-    <main id="main" className={styles.wrapper}>
-      {children}
-    </main>
-  );
-};
-
-export default Main;
diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
deleted file mode 100644
index f3e6c10..0000000
--- a/src/components/MainNav/MainNav.module.scss
+++ /dev/null
@@ -1,242 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wrapper {
-  --icon-size: #{fun.convert-px(30)};
-
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  height: var(--btn-size);
-  width: calc(var(--btn-size) * 1.2);
-  background: var(--color-bg);
-  position: relative;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      background: inherit;
-    }
-
-    @include mix.dimensions("md") {
-      width: unset;
-      height: unset;
-    }
-  }
-}
-
-.label {
-  --draw-border-thickness: #{fun.convert-px(5)};
-  --draw-border-color1: var(--color-primary-light);
-  --draw-border-color2: var(--color-primary-lighter);
-
-  flex: 1;
-  display: flex;
-  flex-flow: column nowrap;
-  width: 100%;
-  padding: var(--spacing-2xs);
-
-  &:hover {
-    @extend %draw-borders;
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      display: none;
-    }
-  }
-}
-
-.checkbox {
-  position: absolute;
-
-  // centered checkbox = btn-size - approximated checkbox size / 2
-  top: calc((var(--btn-size) - #{fun.convert-px(14)}) / 2);
-  left: calc(((var(--btn-size) * 1.2) - #{fun.convert-px(14)}) / 2);
-  opacity: 0;
-  cursor: pointer;
-
-  &:hover {
-    ~ .label {
-      @extend %draw-borders;
-    }
-  }
-
-  &:focus {
-    ~ .label {
-      @extend %draw-borders;
-    }
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      display: none;
-    }
-  }
-}
-
-.nav {
-  display: flex;
-  flex-flow: column wrap;
-  place-content: center;
-  padding-bottom: var(--toolbar-size);
-  position: fixed;
-  bottom: 0;
-  z-index: -1;
-  background: var(--color-bg-opacity);
-  box-shadow: 0 0 fun.convert-px(3) 0 var(--color-shadow-dark);
-  text-align: center;
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
-  transition: all 0.8s ease-in-out 0s;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      padding-bottom: 0;
-      position: absolute;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: calc(var(--btn-size) + var(--spacing-sm));
-      z-index: unset;
-      border-bottom-width: fun.convert-px(5);
-      transform-origin: 50% -100%;
-    }
-
-    @include mix.dimensions("md") {
-      background: transparent;
-      border: none;
-      box-shadow: none;
-      position: relative;
-      top: 0;
-    }
-  }
-}
-
-.list {
-  @extend %reset-list;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      display: grid;
-      grid-template-columns: min-content min-content;
-      max-height: calc(100vh - var(--toolbar-size));
-    }
-
-    @include mix.dimensions("md") {
-      display: flex;
-      flex-flow: row wrap;
-      align-items: center;
-      gap: var(--spacing-2xs);
-    }
-  }
-}
-
-.link {
-  --draw-border-thickness: #{fun.convert-px(4)};
-  --draw-border-color1: var(--color-primary-light);
-  --draw-border-color2: var(--color-primary-lighter);
-
-  display: block;
-  min-width: fun.convert-px(85);
-  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs);
-  background: var(--color-bg);
-  background-repeat: no-repeat;
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 600;
-  text-decoration: none;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      margin: 0;
-      background-color: inherit;
-      border-radius: 8%;
-    }
-  }
-
-  &:hover,
-  &:focus {
-    @extend %draw-borders;
-  }
-
-  &:focus {
-    color: var(--color-primary-light);
-  }
-
-  &:active {
-    --draw-border-color1: var(--color-primary-dark);
-    --draw-border-color2: var(--color-primary-light);
-
-    @extend %draw-borders;
-  }
-
-  &.current {
-    background-image: linear-gradient(to right, transparent, transparent),
-      linear-gradient(to bottom, transparent, transparent),
-      linear-gradient(
-        to left,
-        var(--color-primary-lighter),
-        var(--color-primary-light)
-      ),
-      linear-gradient(to top, transparent, transparent);
-    background-position: top left, top right, bottom center, bottom left;
-    background-size: 0% var(--draw-border-thickness),
-      var(--draw-border-thickness) 0%, 60% var(--draw-border-thickness),
-      var(--draw-border-thickness) 0%;
-
-    &:hover,
-    &:focus {
-      --draw-border-color1: var(--color-primary-light);
-      --draw-border-color2: var(--color-primary-lighter);
-
-      @extend %draw-borders;
-    }
-
-    &:active {
-      --draw-border-color1: var(--color-primary-dark);
-      --draw-border-color2: var(--color-primary-light);
-
-      @extend %draw-borders;
-    }
-  }
-}
-
-.checkbox:not(:checked) {
-  ~ .nav {
-    opacity: 0;
-    visibility: hidden;
-    transform: translateY(100vw);
-
-    @include mix.media("screen") {
-      @include mix.dimensions("sm") {
-        transform: perspective(20rem) translate3d(0, 100%, -20rem);
-      }
-
-      @include mix.dimensions("md") {
-        opacity: 1;
-        visibility: visible;
-        transform: none;
-      }
-    }
-  }
-}
-
-.checkbox:checked {
-  ~ .label:hover {
-    span {
-      background: none;
-      box-shadow: none;
-    }
-  }
-
-  &:hover {
-    ~ .label {
-      span {
-        background: none;
-        box-shadow: none;
-      }
-    }
-  }
-}
diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx
deleted file mode 100644
index 9cb6b4c..0000000
--- a/src/components/MainNav/MainNav.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import {
-  BlogIcon,
-  ContactIcon,
-  CVIcon,
-  HamburgerIcon,
-  HomeIcon,
-  ProjectsIcon,
-} from '@components/Icons';
-import { NavItem } from '@ts/types/nav';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { ForwardedRef, forwardRef, SetStateAction } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './MainNav.module.scss';
-
-const MainNav = (
-  {
-    isOpened,
-    setIsOpened,
-  }: {
-    isOpened: boolean;
-    setIsOpened: (value: SetStateAction<boolean>) => void;
-  },
-  ref: ForwardedRef<HTMLDivElement>
-) => {
-  const intl = useIntl();
-  const router = useRouter();
-
-  const mainNavConfig: NavItem[] = [
-    {
-      id: 'home',
-      name: intl.formatMessage({
-        defaultMessage: 'Home',
-        description: 'MainNav: home link',
-        id: 'ZJMNRW',
-      }),
-      slug: '/',
-    },
-    {
-      id: 'blog',
-      name: intl.formatMessage({
-        defaultMessage: 'Blog',
-        description: 'MainNav: blog link',
-        id: 'zPJifH',
-      }),
-      slug: '/blog',
-    },
-    {
-      id: 'projects',
-      name: intl.formatMessage({
-        defaultMessage: 'Projects',
-        description: 'MainNav: projects link',
-        id: 'akSutM',
-      }),
-      slug: '/projets',
-    },
-    {
-      id: 'cv',
-      name: intl.formatMessage({
-        defaultMessage: 'Resume',
-        description: 'MainNav: resume link',
-        id: 'jpv+Nz',
-      }),
-      slug: '/cv',
-    },
-    {
-      id: 'contact',
-      name: intl.formatMessage({
-        defaultMessage: 'Contact',
-        description: 'MainNav: contact link',
-        id: 'c2NtPj',
-      }),
-      slug: '/contact',
-    },
-  ];
-
-  const getIcon = (id: string) => {
-    switch (id) {
-      case 'home':
-        return <HomeIcon />;
-      case 'blog':
-        return <BlogIcon />;
-      case 'contact':
-        return <ContactIcon />;
-      case 'cv':
-        return <CVIcon />;
-      case 'projects':
-        return <ProjectsIcon />;
-      default:
-        break;
-    }
-  };
-
-  const navItems = mainNavConfig.map((item) => {
-    const currentClass = router.asPath === item.slug ? styles.current : '';
-
-    return (
-      <li key={item.id}>
-        <Link href={item.slug}>
-          <a className={`${styles.link} ${currentClass}`}>
-            {getIcon(item.id)}
-            <span>{item.name}</span>
-          </a>
-        </Link>
-      </li>
-    );
-  });
-
-  return (
-    <div id="main-nav" ref={ref} className={styles.wrapper}>
-      <input
-        type="checkbox"
-        name="main-nav__checkbox"
-        id="main-nav__checkbox"
-        aria-labelledby="main-nav-toggle"
-        className={styles.checkbox}
-        checked={isOpened}
-        onChange={() => setIsOpened(!isOpened)}
-        autoComplete="off"
-      />
-      <label
-        htmlFor="main-nav__checkbox"
-        id="main-nav-toggle"
-        className={styles.label}
-      >
-        <HamburgerIcon isActive={isOpened} />
-        <span className="screen-reader-text">
-          {isOpened
-            ? intl.formatMessage({
-                defaultMessage: 'Close menu',
-                description: 'MainNav: close button',
-                id: 'dE8xxV',
-              })
-            : intl.formatMessage({
-                defaultMessage: 'Open menu',
-                description: 'MainNav: open button',
-                id: 'azc1GT',
-              })}
-        </span>
-      </label>
-      <nav
-        className={styles.nav}
-        aria-label={intl.formatMessage({
-          defaultMessage: 'Primary',
-          description: 'MainNav: aria-label',
-          id: 'H7C5Bk',
-        })}
-      >
-        <ul className={styles.list}>{navItems}</ul>
-      </nav>
-    </div>
-  );
-};
-
-export default forwardRef(MainNav);
diff --git a/src/components/MetaItems/Author/Author.tsx b/src/components/MetaItems/Author/Author.tsx
deleted file mode 100644
index 4ff0086..0000000
--- a/src/components/MetaItems/Author/Author.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { MetaKind } from '@ts/types/app';
-import { useIntl } from 'react-intl';
-import { MetaItem } from '..';
-
-const Author = ({ name, kind }: { name: string; kind: MetaKind }) => {
-  const intl = useIntl();
-
-  return (
-    <MetaItem
-      title={intl.formatMessage({
-        defaultMessage: 'Written by:',
-        description: 'Author: article author meta label',
-        id: 'jCyqZS',
-      })}
-      value={name}
-      kind={kind}
-    />
-  );
-};
-
-export default Author;
diff --git a/src/components/MetaItems/CommentsCount/CommentsCount.tsx b/src/components/MetaItems/CommentsCount/CommentsCount.tsx
deleted file mode 100644
index 04cffa6..0000000
--- a/src/components/MetaItems/CommentsCount/CommentsCount.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { MetaKind } from '@ts/types/app';
-import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
-import { MetaItem } from '..';
-
-const CommentsCount = ({ total, kind }: { total: number; kind: MetaKind }) => {
-  const intl = useIntl();
-  const { asPath } = useRouter();
-
-  const isArticle = () => asPath.includes('/article/');
-
-  const getCommentsCount = () => {
-    return intl.formatMessage(
-      {
-        defaultMessage:
-          '{total, plural, =0 {No comments} one {# comment} other {# comments}}',
-        description: 'CommentsCount: comment count value',
-        id: 'lKGNKx',
-      },
-      { total }
-    );
-  };
-
-  return (
-    <MetaItem
-      title={intl.formatMessage({
-        defaultMessage: 'Comments:',
-        description: 'CommentsCount: comment count meta label',
-        id: '6BRtAu',
-      })}
-      value={
-        isArticle() ? (
-          <a href="#comments">{getCommentsCount()}</a>
-        ) : (
-          getCommentsCount()
-        )
-      }
-      kind={kind}
-    />
-  );
-};
-
-export default CommentsCount;
diff --git a/src/components/MetaItems/Dates/Dates.tsx b/src/components/MetaItems/Dates/Dates.tsx
deleted file mode 100644
index 4314ed9..0000000
--- a/src/components/MetaItems/Dates/Dates.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { MetaKind } from '@ts/types/app';
-import { settings } from '@utils/config';
-import { getFormattedDate } from '@utils/helpers/format';
-import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
-import { MetaItem } from '..';
-
-const Dates = ({
-  publication,
-  update,
-  kind,
-}: {
-  publication: string;
-  update: string;
-  kind: MetaKind;
-}) => {
-  const intl = useIntl();
-  const { locale } = useRouter();
-  const validLocale = locale ? locale : settings.locales.defaultLocale;
-
-  const publicationDate = getFormattedDate(publication, validLocale);
-  const updateDate = getFormattedDate(update, validLocale);
-
-  return (
-    <>
-      <MetaItem
-        title={intl.formatMessage({
-          defaultMessage: 'Published on:',
-          description: 'Dates: publication date meta label',
-          id: '52Fev1',
-        })}
-        values={[
-          <time key={publication} dateTime={publication}>
-            {publicationDate}
-          </time>,
-        ]}
-        kind={kind}
-      />
-      {publicationDate !== updateDate && (
-        <MetaItem
-          title={intl.formatMessage({
-            defaultMessage: 'Updated on:',
-            description: 'Dates: update date meta label',
-            id: 'C+r/LF',
-          })}
-          values={[
-            <time key={update} dateTime={update}>
-              {updateDate}
-            </time>,
-          ]}
-          kind={kind}
-        />
-      )}
-    </>
-  );
-};
-
-export default Dates;
diff --git a/src/components/MetaItems/MetaItem/MetaItem.module.scss b/src/components/MetaItems/MetaItem/MetaItem.module.scss
deleted file mode 100644
index 0b159ca..0000000
--- a/src/components/MetaItems/MetaItem/MetaItem.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.wrapper--article {
-  display: flex;
-  flex-flow: row wrap;
-}
-
-.title--article {
-  margin-right: var(--spacing-2xs);
-  color: var(--color-fg-light);
-}
-
-.body--article {
-  &:not(:first-of-type) {
-    &::before {
-      content: "/";
-      margin: 0 var(--spacing-2xs);
-    }
-  }
-}
diff --git a/src/components/MetaItems/MetaItem/MetaItem.tsx b/src/components/MetaItems/MetaItem/MetaItem.tsx
deleted file mode 100644
index 5c51283..0000000
--- a/src/components/MetaItems/MetaItem/MetaItem.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { MetaKind } from '@ts/types/app';
-import { ReactElement } from 'react';
-import styles from './MetaItem.module.scss';
-
-const MetaItem = ({
-  title,
-  value,
-  values,
-  info,
-  kind = 'list',
-}: {
-  title: string;
-  value?: ReactElement | string;
-  values?: ReactElement[] | string[];
-  info?: string;
-  kind: MetaKind;
-}) => {
-  return (
-    <div className={styles[`wrapper--${kind}`]}>
-      <dt className={styles[`title--${kind}`]}>{title}</dt>
-      {value && (
-        <dd className={styles[`body--${kind}`]} title={info}>
-          {value}
-        </dd>
-      )}
-      {values &&
-        values.map((currentValue, index) => (
-          <dd key={index} className={styles[`body--${kind}`]} title={info}>
-            {currentValue}
-          </dd>
-        ))}
-    </div>
-  );
-};
-
-export default MetaItem;
diff --git a/src/components/MetaItems/PostsCount/PostsCount.tsx b/src/components/MetaItems/PostsCount/PostsCount.tsx
deleted file mode 100644
index 679abcd..0000000
--- a/src/components/MetaItems/PostsCount/PostsCount.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { MetaKind } from '@ts/types/app';
-import { useIntl } from 'react-intl';
-import { MetaItem } from '..';
-
-const PostsCount = ({ total, kind }: { total: number; kind: MetaKind }) => {
-  const intl = useIntl();
-
-  return (
-    <MetaItem
-      title={intl.formatMessage({
-        defaultMessage: 'Total:',
-        description: 'PostCount: total found articles meta label',
-        id: 'p1zZ/Z',
-      })}
-      value={intl.formatMessage(
-        {
-          defaultMessage:
-            '{total, plural, =0 {No articles} one {# article} other {# articles}}',
-          description: 'PostCount: total found articles',
-          id: '4EMSLO',
-        },
-        { total }
-      )}
-      kind={kind}
-    />
-  );
-};
-
-export default PostsCount;
diff --git a/src/components/MetaItems/ReadingTime/ReadingTime.tsx b/src/components/MetaItems/ReadingTime/ReadingTime.tsx
deleted file mode 100644
index 79d6f3c..0000000
--- a/src/components/MetaItems/ReadingTime/ReadingTime.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { MetaKind } from '@ts/types/app';
-import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
-import { MetaItem } from '..';
-
-const ReadingTime = ({
-  time,
-  words,
-  kind,
-}: {
-  time: number;
-  words: number;
-  kind: MetaKind;
-}) => {
-  const intl = useIntl();
-  const { locale } = useRouter();
-
-  const getEstimation = () => {
-    if (time < 0) {
-      return intl.formatMessage({
-        defaultMessage: 'less than 1 minute',
-        description: 'ReadingTime: Reading time value',
-        id: 'ySsWZl',
-      });
-    }
-
-    return intl.formatMessage(
-      {
-        defaultMessage:
-          '{time, plural, =0 {# minutes} one {# minute} other {# minutes}}',
-        description: 'ReadingTime: reading time value',
-        id: 'wdqOpf',
-      },
-      { time }
-    );
-  };
-
-  return (
-    <MetaItem
-      title={intl.formatMessage({
-        defaultMessage: 'Reading time:',
-        description: 'ReadingTime: reading time meta label',
-        id: 'n0Gbod',
-      })}
-      value={getEstimation()}
-      info={intl.formatMessage(
-        {
-          defaultMessage: 'Approximately {number} words',
-          description: 'ReadingTime: number of words',
-          id: 'k7/SkN',
-        },
-        { number: words.toLocaleString(locale) }
-      )}
-      kind={kind}
-    />
-  );
-};
-
-export default ReadingTime;
diff --git a/src/components/MetaItems/Thematics/Thematics.tsx b/src/components/MetaItems/Thematics/Thematics.tsx
deleted file mode 100644
index e655c5d..0000000
--- a/src/components/MetaItems/Thematics/Thematics.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { MetaKind } from '@ts/types/app';
-import { ThematicPreview } from '@ts/types/taxonomies';
-import Link from 'next/link';
-import { useIntl } from 'react-intl';
-import { MetaItem } from '..';
-
-const Thematics = ({
-  list,
-  kind,
-}: {
-  list: ThematicPreview[];
-  kind: MetaKind;
-}) => {
-  const intl = useIntl();
-
-  const getThematics = () => {
-    return list.map((thematic) => {
-      return (
-        <Link key={thematic.databaseId} href={`/thematique/${thematic.slug}`}>
-          <a>{thematic.title}</a>
-        </Link>
-      );
-    });
-  };
-
-  return (
-    <MetaItem
-      title={intl.formatMessage(
-        {
-          defaultMessage:
-            '{thematicsCount, plural, =0 {Thematics:} one {Thematic:} other {Thematics:}}',
-          description: 'Thematics: thematics list meta label',
-          id: '1r4ujR',
-        },
-        { thematicsCount: list.length }
-      )}
-      values={getThematics()}
-      kind={kind}
-    />
-  );
-};
-
-export default Thematics;
diff --git a/src/components/MetaItems/Topics/Topics.tsx b/src/components/MetaItems/Topics/Topics.tsx
deleted file mode 100644
index d5d90f0..0000000
--- a/src/components/MetaItems/Topics/Topics.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { MetaKind } from '@ts/types/app';
-import { TopicPreview } from '@ts/types/taxonomies';
-import Link from 'next/link';
-import { useIntl } from 'react-intl';
-import { MetaItem } from '..';
-
-const Topics = ({ list, kind }: { list: TopicPreview[]; kind: MetaKind }) => {
-  const intl = useIntl();
-
-  const getTopics = () => {
-    return list.map((topic) => {
-      return (
-        <Link key={topic.databaseId} href={`/sujet/${topic.slug}`}>
-          <a>{topic.title}</a>
-        </Link>
-      );
-    });
-  };
-
-  return (
-    <MetaItem
-      title={intl.formatMessage(
-        {
-          defaultMessage:
-            '{topicsCount, plural, =0 {Topics:} one {Topic:} other {Topics:}}',
-          description: 'Topics: topics list meta label',
-          id: '0pp/IQ',
-        },
-        { topicsCount: list.length }
-      )}
-      values={getTopics()}
-      kind={kind}
-    />
-  );
-};
-
-export default Topics;
diff --git a/src/components/MetaItems/Website/Website.tsx b/src/components/MetaItems/Website/Website.tsx
deleted file mode 100644
index 7d2dc06..0000000
--- a/src/components/MetaItems/Website/Website.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { MetaKind } from '@ts/types/app';
-import { useIntl } from 'react-intl';
-import { MetaItem } from '..';
-
-const Website = ({ url, kind }: { url: string; kind: MetaKind }) => {
-  const intl = useIntl();
-
-  return (
-    <MetaItem
-      title={intl.formatMessage({
-        defaultMessage: 'Website:',
-        description: 'Website: website meta label',
-        id: 'JsOoAW',
-      })}
-      value={<a href={url}>{url}</a>}
-      kind={kind}
-    />
-  );
-};
-
-export default Website;
diff --git a/src/components/MetaItems/index.tsx b/src/components/MetaItems/index.tsx
deleted file mode 100644
index e90d5a6..0000000
--- a/src/components/MetaItems/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import Author from './Author/Author';
-import CommentsCount from './CommentsCount/CommentsCount';
-import Dates from './Dates/Dates';
-import MetaItem from './MetaItem/MetaItem';
-import PostsCount from './PostsCount/PostsCount';
-import ReadingTime from './ReadingTime/ReadingTime';
-import Thematics from './Thematics/Thematics';
-import Topics from './Topics/Topics';
-import Website from './Website/Website';
-
-export {
-  Author,
-  CommentsCount,
-  Dates,
-  MetaItem,
-  PostsCount,
-  ReadingTime,
-  Thematics,
-  Topics,
-  Website,
-};
diff --git a/src/components/Notice/Notice.module.scss b/src/components/Notice/Notice.module.scss
deleted file mode 100644
index aa7175c..0000000
--- a/src/components/Notice/Notice.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.message {
-  border: fun.convert-px(2) solid;
-  font-weight: bold;
-  margin: var(--spacing-sm) auto;
-  padding: var(--spacing-2xs) var(--spacing-xs);
-
-  &--error {
-    border-color: var(--color-token-red);
-    color: var(--color-token-red);
-  }
-
-  &--info {
-    border-color: var(--color-token-blue);
-    color: var(--color-token-blue);
-  }
-
-  &--success {
-    border-color: var(--color-token-green);
-    color: var(--color-token-green);
-  }
-
-  &--warning {
-    border-color: var(--color-token-orange);
-    color: var(--color-token-orange);
-  }
-}
diff --git a/src/components/Notice/Notice.tsx b/src/components/Notice/Notice.tsx
deleted file mode 100644
index 02b1f12..0000000
--- a/src/components/Notice/Notice.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NoticeType } from '@ts/types/app';
-import { ReactNode } from 'react';
-import styles from './Notice.module.scss';
-
-const Notice = ({
-  children,
-  type,
-}: {
-  children: ReactNode;
-  type: NoticeType;
-}) => {
-  const withModifier = `message--${type}`;
-
-  return (
-    <div className={`${styles.message} ${styles[withModifier]}`}>
-      {children}
-    </div>
-  );
-};
-
-export default Notice;
diff --git a/src/components/Pagination/Pagination.module.scss b/src/components/Pagination/Pagination.module.scss
deleted file mode 100644
index 4d74d1b..0000000
--- a/src/components/Pagination/Pagination.module.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.list {
-  @extend %flex-list;
-  justify-content: center;
-
-  row-gap: var(--spacing-sm);
-}
-
-.link {
-  display: block;
-  padding: var(--spacing-xs) var(--spacing-sm);
-  background: var(--color-bg);
-  border: fun.convert-px(2) solid var(--color-primary);
-  box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0
-    var(--color-primary-darker);
-  font-weight: 600;
-  text-decoration: none;
-
-  @include mix.pointer("fine") {
-    padding: var(--spacing-2xs) var(--spacing-xs);
-  }
-
-  &--current {
-    padding: calc(var(--spacing-xs) / 1.5) var(--spacing-sm);
-    border-color: var(--color-primary-darker);
-    box-shadow: none;
-    color: var(--color-primary-darker);
-    transform: translateY(#{fun.convert-px(10)});
-
-    @include mix.pointer("fine") {
-      padding: calc(var(--spacing-2xs) / 1.5) var(--spacing-xs);
-      transform: translateY(#{fun.convert-px(7)});
-    }
-  }
-
-  &:not(.link--current) {
-    &:hover,
-    &:focus {
-      border-color: var(--color-primary-light);
-      box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0
-          var(--color-primary-darker),
-        0 fun.convert-px(2) fun.convert-px(2) fun.convert-px(1)
-          var(--color-shadow-dark),
-        0 fun.convert-px(7) fun.convert-px(7) fun.convert-px(2)
-          var(--color-shadow-light);
-      color: var(--color-primary-light);
-      transform: translateY(#{fun.convert-px(-5)});
-    }
-
-    &:active {
-      padding: calc(var(--spacing-xs) / 1.5) var(--spacing-sm);
-      border-color: var(--color-primary-dark);
-      box-shadow: none;
-      color: var(--color-primary-dark);
-      transform: translateY(#{fun.convert-px(10)});
-
-      @include mix.pointer("fine") {
-        padding: calc(var(--spacing-2xs) / 1.5) var(--spacing-xs);
-        transform: translateY(#{fun.convert-px(7)});
-      }
-    }
-  }
-}
-
-.item {
-  position: relative;
-
-  &:first-child {
-    .link {
-      border-top-left-radius: fun.convert-px(4);
-      border-bottom-left-radius: fun.convert-px(4);
-    }
-  }
-
-  &:last-child {
-    .link {
-      border-top-right-radius: fun.convert-px(4);
-      border-bottom-right-radius: fun.convert-px(4);
-    }
-  }
-
-  &:not(:first-child) {
-    margin-left: fun.convert-px(-1);
-  }
-
-  &:not(:last-child) {
-    margin-right: fun.convert-px(-1);
-  }
-}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
deleted file mode 100644
index 55c366a..0000000
--- a/src/components/Pagination/Pagination.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { settings } from '@utils/config';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
-import styles from './Pagination.module.scss';
-
-const Pagination = ({ baseUrl, total }: { baseUrl: string; total: number }) => {
-  const intl = useIntl();
-  const { asPath } = useRouter();
-  const totalPages = Math.floor(total / settings.postsPerPage);
-  const currentPage = asPath.includes('/page/')
-    ? Number(asPath.split(`${baseUrl}/page/`)[1])
-    : 1;
-  const hasPreviousPage = currentPage !== 1;
-  const hasNextPage = currentPage !== totalPages;
-
-  const getPreviousPageItem = () => {
-    return (
-      <li className={styles.item}>
-        <Link href={`${baseUrl}/page/${currentPage - 1}`}>
-          <a className={styles.link}>
-            {intl.formatMessage(
-              {
-                defaultMessage: '{icon} Previous page',
-                description: 'Pagination: previous page link',
-                id: 'aMFqPH',
-              },
-              { icon: '←' }
-            )}
-          </a>
-        </Link>
-      </li>
-    );
-  };
-
-  const getNextPageItem = () => {
-    return (
-      <li className={styles.item}>
-        <Link href={`${baseUrl}/page/${currentPage + 1}`}>
-          <a className={styles.link}>
-            {intl.formatMessage(
-              {
-                defaultMessage: 'Next page {icon}',
-                description: 'Pagination: Next page link',
-                id: 'R4yaW6',
-              },
-              { icon: '→' }
-            )}
-          </a>
-        </Link>
-      </li>
-    );
-  };
-
-  const getPages = () => {
-    const pages = [];
-    for (let i = 1; i <= totalPages; i++) {
-      if (i === currentPage) {
-        pages.push({
-          id: `page-${i}`,
-          link: (
-            <span className={`${styles.link} ${styles['link--current']}`}>
-              {intl.formatMessage(
-                {
-                  defaultMessage: '<a11y>Page </a11y>{number}',
-                  description: 'Pagination: page number',
-                  id: 'TSXPzr',
-                },
-                {
-                  number: i,
-                  a11y: (chunks: string) => (
-                    <span className="screen-reader-text">{chunks}</span>
-                  ),
-                }
-              )}
-            </span>
-          ),
-        });
-      } else {
-        pages.push({
-          id: `page-${i}`,
-          link: (
-            <Link href={`${baseUrl}/page/${i}`}>
-              <a className={styles.link}>
-                {intl.formatMessage(
-                  {
-                    defaultMessage: '<a11y>Page </a11y>{number}',
-                    description: 'Pagination: page number',
-                    id: 'TSXPzr',
-                  },
-                  {
-                    number: i,
-                    a11y: (chunks: string) => (
-                      <span className="screen-reader-text">{chunks}</span>
-                    ),
-                  }
-                )}
-              </a>
-            </Link>
-          ),
-        });
-      }
-    }
-
-    return pages;
-  };
-
-  const getItems = () => {
-    const pages = getPages();
-
-    return pages.map((page) => (
-      <li key={page.id} className={styles.item}>
-        {page.link}
-      </li>
-    ));
-  };
-
-  return (
-    <nav className={styles.wrapper} aria-labelledby="pagination-title">
-      <h2 id="pagination-title" className="screen-reader-text">
-        {intl.formatMessage({
-          defaultMessage: 'Pagination',
-          description: 'Pagination: pagination title',
-          id: 'BAkq7J',
-        })}
-      </h2>
-      <ul className={styles.list}>
-        {hasPreviousPage && getPreviousPageItem()}
-        {getItems()}
-        {hasNextPage && getNextPageItem()}
-      </ul>
-    </nav>
-  );
-};
-
-export default Pagination;
diff --git a/src/components/PaginationCursor/PaginationCursor.module.scss b/src/components/PaginationCursor/PaginationCursor.module.scss
deleted file mode 100644
index 542584c..0000000
--- a/src/components/PaginationCursor/PaginationCursor.module.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  width: max-content;
-  margin: var(--spacing-sm) auto var(--spacing-md);
-  text-align: center;
-
-  .bar[value] {
-    display: block;
-    width: clamp(25ch, 20vw, 30ch);
-    max-width: 100%;
-    height: fun.convert-px(13);
-    appearance: none;
-    background: var(--color-bg-tertiary);
-    border: fun.convert-px(1) solid var(--color-primary-darker);
-    border-radius: 1em;
-    box-shadow: inset 0 0 fun.convert-px(4) fun.convert-px(1)
-      var(--color-shadow-light);
-
-    &::-webkit-progress-value {
-      background-color: var(--color-primary-dark);
-      border-radius: 1em;
-    }
-
-    &::-moz-progress-bar {
-      background-color: var(--color-primary-dark);
-      border-radius: 1em;
-    }
-
-    &::-webkit-progress-bar {
-      background: var(--color-bg-tertiary);
-      border: fun.convert-px(1) solid var(--color-primary-darker);
-      border-radius: 1em;
-      box-shadow: inset 0 0 fun.convert-px(4) fun.convert-px(1)
-        var(--color-shadow-light);
-    }
-  }
-}
-
-.info {
-  margin-bottom: var(--spacing-2xs);
-  font-size: var(--font-size-sm);
-}
diff --git a/src/components/PaginationCursor/PaginationCursor.tsx b/src/components/PaginationCursor/PaginationCursor.tsx
deleted file mode 100644
index d64f961..0000000
--- a/src/components/PaginationCursor/PaginationCursor.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useIntl } from 'react-intl';
-import styles from './PaginationCursor.module.scss';
-
-const PaginationCursor = ({
-  current,
-  total,
-}: {
-  current: number;
-  total: number;
-}) => {
-  const intl = useIntl();
-
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.info}>
-        {intl.formatMessage(
-          {
-            defaultMessage:
-              '{articlesCount, plural, =0 {# loaded articles} one {# loaded article} other {# loaded articles}} out of a total of {total}',
-            description: 'PaginationCursor: loaded articles count message',
-            id: 'du4MLN',
-          },
-          { articlesCount: current, total }
-        )}
-      </div>
-      <progress
-        className={styles.bar}
-        max={total}
-        value={current}
-        aria-valuemin={0}
-        aria-valuemax={total}
-        aria-label={intl.formatMessage({
-          defaultMessage:
-            'Number of articles loaded out of the total available.',
-          description: 'PaginationCursor: loaded articles count aria-label',
-          id: 'mC21ht',
-        })}
-      ></progress>
-    </div>
-  );
-};
-
-export default PaginationCursor;
diff --git a/src/components/PostFooter/PostFooter.module.scss b/src/components/PostFooter/PostFooter.module.scss
deleted file mode 100644
index 7c1f1ce..0000000
--- a/src/components/PostFooter/PostFooter.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
-
-.meta {
-  flex-flow: column wrap;
-}
-
-.list {
-  @extend %flex-list;
-
-  gap: var(--spacing-xs);
-}
-
-.item {
-  > a {
-    padding: calc(var(--spacing-2xs) / 2) var(--spacing-xs);
-  }
-}
diff --git a/src/components/PostFooter/PostFooter.tsx b/src/components/PostFooter/PostFooter.tsx
deleted file mode 100644
index 9bc4053..0000000
--- a/src/components/PostFooter/PostFooter.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ButtonLink } from '@components/Buttons';
-import { TopicPreview } from '@ts/types/taxonomies';
-import Image from 'next/image';
-import { useIntl } from 'react-intl';
-import styles from './PostFooter.module.scss';
-
-const PostFooter = ({ topics }: { topics: TopicPreview[] }) => {
-  const intl = useIntl();
-
-  const getTopics = () => {
-    return topics.map((topic) => {
-      return (
-        <li className={styles.item} key={topic.id}>
-          <ButtonLink target={`/sujet/${topic.slug}`}>
-            {topic.featuredImage && (
-              <Image
-                src={topic.featuredImage.sourceUrl}
-                alt={topic.featuredImage.altText}
-                layout="intrinsic"
-                width="20"
-                height="20"
-              />
-            )}
-            {topic.title}
-          </ButtonLink>
-        </li>
-      );
-    });
-  };
-
-  return (
-    <footer>
-      {topics.length > 0 && (
-        <>
-          <dl className={styles.meta}>
-            <dt>
-              {intl.formatMessage({
-                defaultMessage: 'Read more articles about:',
-                description: 'PostFooter: read more posts about given subjects',
-                id: 'YEudoh',
-              })}
-            </dt>
-            <dd>
-              <ul className={styles.list}>{getTopics()}</ul>
-            </dd>
-          </dl>
-        </>
-      )}
-    </footer>
-  );
-};
-
-export default PostFooter;
diff --git a/src/components/PostHeader/PostHeader.module.scss b/src/components/PostHeader/PostHeader.module.scss
deleted file mode 100644
index f813060..0000000
--- a/src/components/PostHeader/PostHeader.module.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  composes: grid from "@styles/layout/_grid.scss";
-  max-width: 100%;
-  position: relative;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      margin-bottom: var(--spacing-md);
-    }
-
-    @include mix.dimensions("lg") {
-      --grid-gap: var(--spacing-lg);
-    }
-  }
-
-  &::before,
-  &::after {
-    content: "";
-    width: 100%;
-    height: 100%;
-    background: var(--color-bg-secondary);
-    border-top: fun.convert-px(3) solid var(--color-border-light);
-    border-bottom: fun.convert-px(3) solid var(--color-border-light);
-  }
-
-  &::before {
-    grid-column: 1;
-    justify-self: start;
-    border-right: fun.convert-px(3) solid var(--color-border-light);
-  }
-
-  &::after {
-    grid-column: 3;
-    justify-self: end;
-    border-left: fun.convert-px(3) solid var(--color-border-light);
-  }
-}
-
-.body {
-  grid-column: 2;
-  background: var(--color-bg);
-}
-
-.title {
-  flex: 0 0 100%;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  margin: 0;
-  position: relative;
-  text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
-
-  &::before,
-  &::after {
-    content: "";
-    width: 100%;
-    height: fun.convert-px(4);
-    background: radial-gradient(
-      ellipse at center,
-      var(--color-primary-light),
-      var(--color-primary-dark)
-    );
-  }
-}
-
-.cover {
-  display: block;
-  width: fun.convert-px(50);
-  height: fun.convert-px(50);
-  position: relative;
-  margin-right: var(--spacing-sm);
-}
-
-.intro {
-  margin: var(--spacing-sm) 0 0;
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}
diff --git a/src/components/PostHeader/PostHeader.tsx b/src/components/PostHeader/PostHeader.tsx
deleted file mode 100644
index c0a6b68..0000000
--- a/src/components/PostHeader/PostHeader.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import PostMeta from '@components/PostMeta/PostMeta';
-import { ArticleMeta } from '@ts/types/articles';
-import { Cover } from '@ts/types/cover';
-import Image from 'next/image';
-import React, { ReactElement } from 'react';
-import styles from './PostHeader.module.scss';
-
-const PostHeader = ({
-  cover,
-  intro,
-  title,
-  meta,
-}: {
-  cover?: Cover;
-  intro?: string | ReactElement;
-  meta?: ArticleMeta;
-  title: string;
-}) => {
-  const getIntro = () => {
-    if (React.isValidElement(intro)) {
-      const Intro = () => intro;
-      return (
-        <div className={styles.intro}>
-          <Intro />
-        </div>
-      );
-    }
-
-    return (
-      intro && (
-        <div
-          className={styles.intro}
-          dangerouslySetInnerHTML={{ __html: intro }}
-        ></div>
-      )
-    );
-  };
-
-  return (
-    <header className={styles.wrapper}>
-      <div className={styles.body}>
-        <h1 className={styles.title}>
-          {cover && (
-            <span className={styles.cover}>
-              <Image src={cover.sourceUrl} alt={cover.altText} layout="fill" />
-            </span>
-          )}
-          {title}
-        </h1>
-        {meta && <PostMeta kind="article" meta={meta} />}
-        {getIntro()}
-      </div>
-    </header>
-  );
-};
-
-export default PostHeader;
diff --git a/src/components/PostMeta/PostMeta.module.scss b/src/components/PostMeta/PostMeta.module.scss
deleted file mode 100644
index d438635..0000000
--- a/src/components/PostMeta/PostMeta.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  &--list {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    margin-top: var(--spacing-md);
-    font-size: var(--font-size-sm);
-
-    @include mix.media("screen") {
-      @include mix.dimensions("sm") {
-        display: flex;
-        flex-flow: column nowrap;
-        margin: 0;
-        composes: meta from "@components/PostPreview/PostPreview.module.scss";
-      }
-    }
-  }
-
-  &--article {
-    flex-flow: column wrap;
-    margin: var(--spacing-sm) 0 0;
-
-    @include mix.media("screen") {
-      @include mix.dimensions("xs") {
-        font-size: var(--font-size-sm);
-      }
-    }
-  }
-}
diff --git a/src/components/PostMeta/PostMeta.tsx b/src/components/PostMeta/PostMeta.tsx
deleted file mode 100644
index 7fba0be..0000000
--- a/src/components/PostMeta/PostMeta.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-  Author,
-  CommentsCount,
-  Dates,
-  PostsCount,
-  ReadingTime,
-  Thematics,
-  Topics,
-  Website,
-} from '@components/MetaItems';
-import { MetaKind } from '@ts/types/app';
-import { ArticleMeta } from '@ts/types/articles';
-import { useRouter } from 'next/router';
-import styles from './PostMeta.module.scss';
-
-const PostMeta = ({
-  meta,
-  kind = 'list',
-}: {
-  meta: ArticleMeta;
-  kind?: MetaKind;
-}) => {
-  const {
-    author,
-    commentCount,
-    dates,
-    readingTime,
-    results,
-    thematics,
-    topics,
-    website,
-    wordsCount,
-  } = meta;
-  const { asPath } = useRouter();
-  const isThematic = () => asPath.includes('/thematique/');
-
-  const wrapperClass = styles[`wrapper--${kind}`];
-
-  return (
-    <dl className={wrapperClass}>
-      {author && <Author name={author.name} kind={kind} />}
-      {dates && (
-        <Dates
-          publication={dates.publication}
-          update={dates.update}
-          kind={kind}
-        />
-      )}
-      {readingTime !== undefined && wordsCount !== undefined && (
-        <ReadingTime time={readingTime} words={wordsCount} kind={kind} />
-      )}
-      {results !== undefined && <PostsCount total={results} kind={kind} />}
-      {!isThematic() && thematics && thematics.length > 0 && (
-        <Thematics list={thematics} kind={kind} />
-      )}
-      {isThematic() && topics && topics.length > 0 && (
-        <Topics list={topics} kind={kind} />
-      )}
-      {website && <Website url={website} kind={kind} />}
-      {commentCount !== undefined && (
-        <CommentsCount total={commentCount} kind={kind} />
-      )}
-    </dl>
-  );
-};
-
-export default PostMeta;
diff --git a/src/components/PostPreview/PostPreview.module.scss b/src/components/PostPreview/PostPreview.module.scss
deleted file mode 100644
index c30ab75..0000000
--- a/src/components/PostPreview/PostPreview.module.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  --icon-size: #{fun.convert-px(20)};
-
-  padding: var(--spacing-2xs) 0 var(--spacing-lg);
-  transition: all 0.3s ease-in-out 0s, border 0s;
-
-  &:hover {
-    --icon-size: #{fun.convert-px(25)};
-
-    a {
-      > svg {
-        :global {
-          animation: pulse 1.5s ease-in-out 0.5s infinite;
-        }
-      }
-
-      &:hover {
-        > svg {
-          animation: none;
-        }
-      }
-    }
-  }
-
-  &:active {
-    --icon-size: 0;
-  }
-}
-
-.cover {
-  width: auto;
-  height: fun.convert-px(100);
-  margin: 0 auto var(--spacing-sm);
-  position: relative;
-  border: fun.convert-px(1) solid var(--color-border);
-}
-
-h2.title {
-  background: none;
-  text-shadow: none;
-}
-
-@include mix.media("screen") {
-  @include mix.dimensions("xs") {
-    .wrapper {
-      margin: 0;
-      padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
-      border: fun.convert-px(1) solid var(--color-primary-dark);
-      border-radius: fun.convert-px(3);
-      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) 0
-          var(--color-shadow),
-        fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) fun.convert-px(-1)
-          var(--color-shadow-light),
-        fun.convert-px(5) fun.convert-px(5) fun.convert-px(7) fun.convert-px(-1)
-          var(--color-shadow-light);
-    }
-
-    .read-more {
-      font-size: var(--font-size-sm);
-    }
-  }
-
-  @include mix.dimensions("sm") {
-    .wrapper {
-      display: grid;
-      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
-      grid-template-rows: repeat(3, max-content);
-      column-gap: var(--spacing-md);
-    }
-
-    .cover {
-      grid-column: 2;
-      grid-row: 1;
-      margin: 0 0 var(--spacing-sm);
-    }
-
-    .header {
-      grid-column: 1;
-      grid-row: 1;
-      align-self: center;
-    }
-
-    .meta {
-      grid-column: 2;
-      grid-row: 2 / 4;
-    }
-
-    .body {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .footer {
-      grid-column: 1;
-      grid-row: 3;
-    }
-
-    .read-more {
-      margin: 0;
-    }
-  }
-}
diff --git a/src/components/PostPreview/PostPreview.tsx b/src/components/PostPreview/PostPreview.tsx
deleted file mode 100644
index 0b9e332..0000000
--- a/src/components/PostPreview/PostPreview.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { ButtonLink } from '@components/Buttons';
-import { ArrowIcon } from '@components/Icons';
-import PostMeta from '@components/PostMeta/PostMeta';
-import { TitleLevel } from '@ts/types/app';
-import { ArticleMeta, ArticlePreview } from '@ts/types/articles';
-import { settings } from '@utils/config';
-import Image from 'next/image';
-import Link from 'next/link';
-import { FormattedMessage } from 'react-intl';
-import { BlogPosting, WithContext } from 'schema-dts';
-import styles from './PostPreview.module.scss';
-import Script from 'next/script';
-
-const PostPreview = ({
-  post,
-  titleLevel,
-}: {
-  post: ArticlePreview;
-  titleLevel: TitleLevel;
-}) => {
-  const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
-  const {
-    commentCount,
-    dates,
-    featuredImage,
-    info,
-    intro,
-    slug,
-    thematics,
-    title,
-    topics,
-  } = post;
-
-  const meta: ArticleMeta = {
-    commentCount: commentCount ? commentCount : 0,
-    dates: dates,
-    readingTime: info.readingTime,
-    thematics: thematics,
-    topics: topics,
-    wordsCount: info.wordsCount,
-  };
-
-  const publicationDate = new Date(dates.publication);
-  const updateDate = new Date(dates.update);
-
-  const schemaJsonLd: WithContext<BlogPosting> = {
-    '@context': 'https://schema.org',
-    '@type': 'BlogPosting',
-    name: title,
-    description: intro,
-    articleBody: intro,
-    author: { '@id': `${settings.url}/#branding` },
-    commentCount: commentCount ? commentCount : 0,
-    copyrightYear: publicationDate.getFullYear(),
-    creator: { '@id': `${settings.url}/#branding` },
-    dateCreated: publicationDate.toISOString(),
-    dateModified: updateDate.toISOString(),
-    datePublished: publicationDate.toISOString(),
-    editor: { '@id': `${settings.url}/#branding` },
-    headline: title,
-    image: featuredImage?.sourceUrl,
-    inLanguage: settings.locales.defaultLocale,
-    isBasedOn: `${settings.url}/article/${slug}`,
-    isPartOf: { '@id': `${settings.url}/blog` },
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    thumbnailUrl: featuredImage?.sourceUrl,
-  };
-
-  return (
-    <>
-      <Script
-        id="schema-post-preview"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article className={styles.wrapper}>
-        {featuredImage && Object.keys(featuredImage).length > 0 && (
-          <div className={styles.cover}>
-            <Image
-              src={featuredImage.sourceUrl}
-              alt={featuredImage.altText}
-              layout="fill"
-              objectFit="contain"
-            />
-          </div>
-        )}
-        <header className={styles.header}>
-          <TitleTag className={styles.title}>
-            <Link href={`/article/${slug}`}>
-              <a>{title}</a>
-            </Link>
-          </TitleTag>
-        </header>
-        <div
-          className={styles.body}
-          dangerouslySetInnerHTML={{ __html: intro }}
-        ></div>
-        <footer className={styles.footer}>
-          <ButtonLink target={`/article/${slug}`} position="left">
-            <FormattedMessage
-              defaultMessage="Read more<a11y> about {title}</a11y>"
-              description="PostPreview: read more link"
-              id="bkbrN7"
-              values={{
-                title,
-                a11y: (chunks: string) => (
-                  <span className="screen-reader-text">{chunks}</span>
-                ),
-              }}
-            />
-            <ArrowIcon />
-          </ButtonLink>
-        </footer>
-        <PostMeta meta={meta} />
-      </article>
-    </>
-  );
-};
-
-export default PostPreview;
diff --git a/src/components/PostsList/PostsList.module.scss b/src/components/PostsList/PostsList.module.scss
deleted file mode 100644
index b4ffbd9..0000000
--- a/src/components/PostsList/PostsList.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.section {
-  --column-3: 0;
-  --grid-gap: 0;
-
-  composes: grid from "@styles/layout/_grid.scss";
-  align-items: first baseline;
-}
-
-.year {
-  grid-column: 2;
-  margin: var(--spacing-md) 0 0;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      grid-column: 1;
-      justify-self: end;
-      position: sticky;
-      top: var(--spacing-xs);
-      margin-right: var(--spacing-lg);
-    }
-  }
-}
-
-.list {
-  @extend %reset-ordered-list;
-
-  grid-column: 2;
-  margin: 0 auto var(--spacing-md);
-}
-
-li.item {
-  border-bottom: fun.convert-px(1) solid var(--color-border);
-
-  &:not(:last-of-type) {
-    margin: 0 0 var(--spacing-md) 0;
-  }
-
-  &:first-of-type {
-    margin-top: var(--spacing-sm);
-
-    @include mix.media("screen") {
-      @include mix.dimensions("md") {
-        margin-top: 0;
-      }
-    }
-  }
-}
diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx
deleted file mode 100644
index f998846..0000000
--- a/src/components/PostsList/PostsList.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import PostPreview from '@components/PostPreview/PostPreview';
-import { PostsList as PostsListData } from '@ts/types/blog';
-import { sortPostsByYear } from '@utils/helpers/sort';
-import { ForwardedRef, forwardRef, Fragment } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './PostsList.module.scss';
-
-const PostsList = (
-  {
-    data,
-    showYears,
-  }: {
-    data: PostsListData[];
-    showYears: boolean;
-  },
-  ref: ForwardedRef<HTMLSpanElement>
-) => {
-  const intl = useIntl();
-  const titleLevel = showYears ? 3 : 2;
-
-  const getPostsListByYear = () => {
-    const posts = sortPostsByYear(data);
-    const years = Object.keys(posts).reverse();
-
-    const getLastPostId = () => {
-      const oldestYear = Object.keys(posts)[0];
-      const lastPost = posts[oldestYear][posts[oldestYear].length - 1];
-      return lastPost.id;
-    };
-
-    return years.map((year) => {
-      return (
-        <section key={year} className={styles.section}>
-          {showYears && (
-            <h2 className={styles.year}>
-              <span className="screen-reader-text">
-                {intl.formatMessage({
-                  defaultMessage: 'Published on',
-                  description: 'PostsList: published on year label',
-                  id: 'EvODgw',
-                })}{' '}
-              </span>
-              {year}
-            </h2>
-          )}
-          <ol className={styles.list}>
-            {posts[year].map((post) => {
-              const isLastPost = post.id === getLastPostId();
-              return (
-                <Fragment key={post.id}>
-                  <li className={styles.item}>
-                    <PostPreview post={post} titleLevel={titleLevel} />
-                  </li>
-                  {isLastPost && (
-                    <li className={styles.item}>
-                      <span ref={ref} tabIndex={-1} />
-                    </li>
-                  )}
-                </Fragment>
-              );
-            })}
-          </ol>
-        </section>
-      );
-    });
-  };
-
-  const getPostsList = () => {
-    return data.map((page) => {
-      const getLastPostId = () => {
-        const lastPost = page.posts[page.posts.length - 1];
-        return lastPost.id;
-      };
-
-      if (page.posts.length === 0) {
-        return (
-          <p key="no-result">
-            {intl.formatMessage({
-              defaultMessage: 'No results found.',
-              description: 'PostsList: no results',
-              id: 'vK7Sxv',
-            })}
-          </p>
-        );
-      } else {
-        return (
-          <Fragment key={page.pageInfo.endCursor}>
-            <ol className={styles.list}>
-              {page.posts.map((post) => {
-                const isLastPost = post.id === getLastPostId();
-                return (
-                  <Fragment key={post.id}>
-                    <li key={post.id} className={styles.item}>
-                      <PostPreview post={post} titleLevel={titleLevel} />
-                    </li>
-                    {isLastPost && <span ref={ref} tabIndex={-1} />}
-                  </Fragment>
-                );
-              })}
-            </ol>
-          </Fragment>
-        );
-      }
-    });
-  };
-
-  return <div>{showYears ? getPostsListByYear() : getPostsList()}</div>;
-};
-
-export default forwardRef(PostsList);
diff --git a/src/components/ProjectPreview/ProjectPreview.module.scss b/src/components/ProjectPreview/ProjectPreview.module.scss
deleted file mode 100644
index 3bf56ec..0000000
--- a/src/components/ProjectPreview/ProjectPreview.module.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.article {
-  display: flex;
-  flex-flow: column nowrap;
-  height: 100%;
-  padding: var(--spacing-md);
-  text-align: center;
-}
-
-.cover {
-  height: fun.convert-px(150);
-  position: relative;
-}
-
-.title {
-  flex: 1;
-  margin: var(--spacing-xs) 0;
-  background: none;
-  text-decoration: underline solid transparent 0;
-  text-shadow: none;
-  transition: all 0.3s linear 0s;
-}
-
-.body {
-  margin: 0 0 var(--spacing-xs);
-}
-
-.footer {
-  margin-top: auto;
-}
-
-.meta {
-  display: block;
-
-  &__item {
-    display: flex;
-    flex-flow: row wrap;
-    place-content: center;
-    gap: var(--spacing-2xs);
-  }
-}
-
-.link {
-  display: block;
-  height: 100%;
-  background: var(--color-bg);
-  color: inherit;
-  text-decoration: none;
-  border: fun.convert-px(3) solid var(--color-primary);
-  border-radius: fun.convert-px(5);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow),
-    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-      var(--color-shadow),
-    fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-      var(--color-shadow);
-  transition: all 0.3s ease-in-out 0s;
-
-  &:hover,
-  &:focus,
-  &:active {
-    color: inherit;
-  }
-
-  &:hover,
-  &:focus {
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow-light),
-      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-        var(--color-shadow-light),
-      fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3)
-        var(--color-shadow-light);
-    transform: scale(1.05);
-  }
-
-  &:focus {
-    .title {
-      text-decoration: underline solid var(--color-primary) 0.3ex;
-    }
-  }
-
-  &:active {
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    transform: scale(0.95);
-
-    .title {
-      text-decoration: none;
-    }
-  }
-}
-
-.techno {
-  padding: 0 var(--spacing-2xs);
-  border: fun.convert-px(1) solid var(--color-primary-darker);
-}
diff --git a/src/components/ProjectPreview/ProjectPreview.tsx b/src/components/ProjectPreview/ProjectPreview.tsx
deleted file mode 100644
index 1e1ced2..0000000
--- a/src/components/ProjectPreview/ProjectPreview.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Project } from '@ts/types/app';
-import { slugify } from '@utils/helpers/slugify';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useIntl } from 'react-intl';
-import styles from './ProjectPreview.module.scss';
-
-const ProjectPreview = ({ project }: { project: Project }) => {
-  const { id, meta, tagline, title } = project;
-  const intl = useIntl();
-
-  return (
-    <Link href={`/projet/${project.slug}`}>
-      <a className={styles.link}>
-        <article className={styles.article}>
-          <header>
-            {meta.hasCover && (
-              <div className={styles.cover}>
-                <Image
-                  src={`/projects/${id}.jpg`}
-                  layout="fill"
-                  objectFit="contain"
-                  objectPosition="center"
-                  alt={intl.formatMessage(
-                    {
-                      defaultMessage: '{title} picture',
-                      description: 'ProjectPreview: cover alt text',
-                      id: '2pykor',
-                    },
-                    { title }
-                  )}
-                />
-              </div>
-            )}
-            <h2 className={styles.title}>{title}</h2>
-          </header>
-          {tagline && (
-            <div
-              className={styles.body}
-              dangerouslySetInnerHTML={{ __html: tagline }}
-            ></div>
-          )}
-          <footer className={styles.footer}>
-            <dl className={styles.meta}>
-              {meta.technologies && (
-                <div className={styles.meta__item}>
-                  <dt className="screen-reader-text">
-                    {intl.formatMessage(
-                      {
-                        defaultMessage:
-                          '{count, plural, =0 {Technologies:} one {Technology:} other {Technologies:}}',
-                        description: 'ProjectPreview: technologies list label',
-                        id: 'okFrAO',
-                      },
-                      { count: meta.technologies.length }
-                    )}
-                  </dt>
-                  {meta.technologies.map((techno) => (
-                    <dd key={slugify(techno)} className={styles.techno}>
-                      {techno}
-                    </dd>
-                  ))}
-                </div>
-              )}
-            </dl>
-          </footer>
-        </article>
-      </a>
-    </Link>
-  );
-};
-
-export default ProjectPreview;
diff --git a/src/components/ProjectSummary/ProjectSummary.module.scss b/src/components/ProjectSummary/ProjectSummary.module.scss
deleted file mode 100644
index cf1e77f..0000000
--- a/src/components/ProjectSummary/ProjectSummary.module.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  margin-bottom: var(--spacing-md);
-  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
-  border: fun.convert-px(1) solid var(--color-border);
-}
-
-.cover {
-  height: fun.convert-px(150);
-  position: relative;
-}
-
-.info {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
-  align-items: start;
-  justify-content: left;
-  column-gap: var(--spacing-md);
-  margin: var(--spacing-md) 0 0;
-}
-
-.inline-data {
-  display: inline-block;
-  margin-top: fun.convert-px(3);
-
-  &:not(:last-of-type) {
-    margin-right: var(--spacing-xs);
-  }
-}
-
-.techno {
-  padding: 0 var(--spacing-2xs);
-  border: fun.convert-px(1) solid var(--color-primary-darker);
-}
-
-.repo {
-  display: block;
-  width: 3em;
-  height: 3em;
-  background: none;
-  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow),
-    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
-      var(--color-shadow),
-    fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
-      var(--color-shadow),
-    0 0 0 0 var(--color-shadow);
-  transition: all 0.3s linear 0s;
-
-  &:hover,
-  &:focus {
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow),
-      fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1)
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4)
-        var(--color-shadow-light),
-      fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3)
-        var(--color-shadow);
-    transform: scale(1.15);
-  }
-
-  &:focus {
-    outline: var(--color-primary) dashed fun.convert-px(2);
-  }
-
-  &:active {
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    outline: none;
-    transform: scale(0.9);
-  }
-}
diff --git a/src/components/ProjectSummary/ProjectSummary.tsx b/src/components/ProjectSummary/ProjectSummary.tsx
deleted file mode 100644
index 79e783e..0000000
--- a/src/components/ProjectSummary/ProjectSummary.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import GithubIcon from '@assets/images/social-media/github.svg';
-import GitlabIcon from '@assets/images/social-media/gitlab.svg';
-import { ProjectMeta } from '@ts/types/app';
-import { settings } from '@utils/config';
-import { getFormattedDate } from '@utils/helpers/format';
-import { slugify } from '@utils/helpers/slugify';
-import useGithubApi from '@utils/hooks/useGithubApi';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
-import styles from './ProjectSummary.module.scss';
-
-const ProjectSummary = ({
-  id,
-  meta,
-}: {
-  id: string;
-  title: string;
-  meta: ProjectMeta;
-}) => {
-  const { hasCover, license, repos, technologies } = meta;
-  const intl = useIntl();
-  const router = useRouter();
-  const locale = router.locale ? router.locale : settings.locales.defaultLocale;
-  const { data } = useGithubApi(repos?.github ? repos.github : '');
-
-  return (
-    <div className={styles.wrapper}>
-      {hasCover && (
-        <div className={styles.cover}>
-          <Image
-            src={`/projects/${id}.jpg`}
-            alt={intl.formatMessage({
-              defaultMessage: '{title} preview',
-              description: 'ProjectSummary: cover alt text',
-              id: 'mh7tGg',
-            })}
-            layout="fill"
-            objectFit="contain"
-          />
-        </div>
-      )}
-      <dl className={styles.info}>
-        {data && (
-          <div className={styles.info__item}>
-            <dt>
-              {intl.formatMessage({
-                defaultMessage: 'Created on:',
-                description: 'ProjectSummary: creation date label',
-                id: 'CWi0go',
-              })}
-            </dt>
-            <dd>
-              <time dateTime={data.created_at}>
-                {getFormattedDate(data.created_at, locale)}
-              </time>
-            </dd>
-          </div>
-        )}
-        {data && (
-          <div className={styles.info__item}>
-            <dt>
-              {intl.formatMessage({
-                defaultMessage: 'Last updated on:',
-                description: 'ProjectSummary: update date label',
-                id: 'vJ+QDV',
-              })}
-            </dt>
-            <dd>
-              <time dateTime={data.updated_at}>
-                {getFormattedDate(data.updated_at, locale)}
-              </time>
-            </dd>
-          </div>
-        )}
-        <div className={styles.info__item}>
-          <dt>
-            {intl.formatMessage({
-              defaultMessage: 'License:',
-              description: 'ProjectSummary: license label',
-              id: 'hKagVG',
-            })}
-          </dt>
-          <dd>{license}</dd>
-        </div>
-        {technologies && (
-          <div className={styles.info__item}>
-            <dt>
-              {intl.formatMessage(
-                {
-                  defaultMessage:
-                    '{count, plural, =0 {Technologies:} one {Technology:} other {Technologies:}}',
-                  description: 'ProjectSummary: technologies list label',
-                  id: 'enwhNm',
-                },
-                { count: technologies.length }
-              )}
-            </dt>
-            {technologies.map((techno) => (
-              <dd
-                key={slugify(techno)}
-                className={`${styles.techno} ${styles['inline-data']}`}
-              >
-                {techno}
-              </dd>
-            ))}
-          </div>
-        )}
-        {repos && (
-          <div className={styles.info__item}>
-            <dt>
-              {intl.formatMessage(
-                {
-                  defaultMessage:
-                    '{count, plural, =0 {Repositories:} one {Repository:} other {Repositories:}}',
-                  description: 'ProjectSummary: repositories list label',
-                  id: 'OTTv+m',
-                },
-                { count: Object.keys(repos).length }
-              )}
-            </dt>
-            {repos.github && (
-              <dd className={styles['inline-data']}>
-                <a
-                  href={`https://github.com/${repos.github}`}
-                  className={styles.repo}
-                >
-                  <GithubIcon />
-                  <span className="screen-reader-text">Github</span>
-                </a>
-              </dd>
-            )}
-            {repos.gitlab && (
-              <dd className={styles['inline-data']}>
-                <a
-                  href={`https://gitlab.com/${repos.gitlab}`}
-                  className={styles.repo}
-                >
-                  <GitlabIcon />
-                  <span className="screen-reader-text">Gitlab</span>
-                </a>
-              </dd>
-            )}
-          </div>
-        )}
-        {data && repos && (
-          <div>
-            <dt>
-              {intl.formatMessage({
-                defaultMessage: 'Popularity:',
-                description: 'ProjectSummary: popularity label',
-                id: 'vgMk0q',
-              })}
-            </dt>
-            {repos.github && (
-              <dd>
-                ⭐&nbsp;
-                <a href={`https://github.com/${repos.github}/stargazers`}>
-                  {intl.formatMessage(
-                    {
-                      defaultMessage:
-                        '{starsCount, plural, =0 {0 stars on Github} one {# star on Github} other {# stars on Github}}',
-                      description: 'ProjectSummary: technologies list label',
-                      id: 'aA3hOT',
-                    },
-                    { starsCount: data.stargazers_count }
-                  )}
-                </a>
-              </dd>
-            )}
-          </div>
-        )}
-      </dl>
-    </div>
-  );
-};
-
-export default ProjectSummary;
diff --git a/src/components/ProjectsList/ProjectsList.module.scss b/src/components/ProjectsList/ProjectsList.module.scss
deleted file mode 100644
index fbed08d..0000000
--- a/src/components/ProjectsList/ProjectsList.module.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
-
-.list {
-  --items: 4;
-  --items-size: 31ch;
-
-  @extend %reset-list;
-
-  display: grid;
-  grid-template-columns: repeat(
-    auto-fit,
-    min(calc(100vw - (var(--spacing-md) * 2)), var(--items-size))
-  );
-  gap: var(--spacing-sm);
-  place-content: center;
-  width: min(
-    calc(100vw - (var(--spacing-md) * 2)),
-    calc(
-      (var(--items-size) * var(--items)) +
-        (var(--spacing-sm) * (var(--items) - 1))
-    )
-  );
-  margin: var(--spacing-sm) auto 0;
-}
diff --git a/src/components/ProjectsList/ProjectsList.tsx b/src/components/ProjectsList/ProjectsList.tsx
deleted file mode 100644
index 07e6a71..0000000
--- a/src/components/ProjectsList/ProjectsList.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import ProjectPreview from '@components/ProjectPreview/ProjectPreview';
-import { Project } from '@ts/types/app';
-import styles from './ProjectsList.module.scss';
-
-const ProjectsList = ({ projects }: { projects: Project[] }) => {
-  const getProjectItems = () => {
-    return projects.map((project) => {
-      return project.title ? (
-        <li className={styles.item} key={project.id}>
-          <ProjectPreview project={project} />
-        </li>
-      ) : (
-        ''
-      );
-    });
-  };
-
-  return <ul className={styles.list}>{getProjectItems()}</ul>;
-};
-
-export default ProjectsList;
diff --git a/src/components/SearchForm/SearchForm.module.scss b/src/components/SearchForm/SearchForm.module.scss
deleted file mode 100644
index 4debfbb..0000000
--- a/src/components/SearchForm/SearchForm.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.title {
-  margin-bottom: var(--spacing-sm);
-  color: var(--color-primary-dark);
-  font-size: var(--font-size-lg);
-  font-weight: 600;
-}
diff --git a/src/components/SearchForm/SearchForm.tsx b/src/components/SearchForm/SearchForm.tsx
deleted file mode 100644
index f4735af..0000000
--- a/src/components/SearchForm/SearchForm.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ButtonSubmit } from '@components/Buttons';
-import { Field, Form } from '@components/FormElements';
-import { SearchIcon } from '@components/Icons';
-import { useRouter } from 'next/router';
-import { FormEvent, useEffect, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './SearchForm.module.scss';
-
-const SearchForm = ({ isOpened }: { isOpened: boolean }) => {
-  const intl = useIntl();
-  const [query, setQuery] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
-  const router = useRouter();
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (isOpened && inputRef.current) {
-        inputRef.current.focus();
-      }
-    }, 400);
-  }, [isOpened]);
-
-  const launchSearch = (e: FormEvent) => {
-    e.preventDefault();
-    router.push({ pathname: '/recherche', query: { s: query } });
-    setQuery('');
-  };
-
-  return (
-    <>
-      <div className={styles.title}>
-        {intl.formatMessage({
-          defaultMessage: 'Search',
-          description: 'SearchForm : form title',
-          id: 'eFMu2E',
-        })}
-      </div>
-      <Form submitHandler={launchSearch} kind="search" id="search">
-        <label htmlFor="search-query" className="screen-reader-text">
-          {intl.formatMessage({
-            defaultMessage: 'Keywords:',
-            description: 'SearchForm: search field label',
-            id: 'YvMPuD',
-          })}
-        </label>
-        <Field
-          ref={inputRef}
-          id="search-query"
-          name="search-query"
-          kind="search"
-          value={query}
-          setValue={setQuery}
-          required={true}
-        />
-        <ButtonSubmit modifier="search">
-          <SearchIcon />
-          <span className="screen-reader-text">
-            {intl.formatMessage({
-              defaultMessage: 'Search',
-              description: 'SearchForm: search button text',
-              id: 'AnaPbu',
-            })}
-          </span>
-        </ButtonSubmit>
-      </Form>
-    </>
-  );
-};
-
-export default SearchForm;
diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.module.scss b/src/components/Settings/AckeeSelect/AckeeSelect.module.scss
deleted file mode 100644
index b145761..0000000
--- a/src/components/Settings/AckeeSelect/AckeeSelect.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.tsx b/src/components/Settings/AckeeSelect/AckeeSelect.tsx
deleted file mode 100644
index f711fe2..0000000
--- a/src/components/Settings/AckeeSelect/AckeeSelect.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Field, Label } from '@components/FormElements';
-import Tooltip from '@components/Tooltip/Tooltip';
-import { LocalStorage } from '@services/local-storage';
-import { useAckeeTracker } from '@utils/providers/ackee';
-import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './AckeeSelect.module.scss';
-
-const AckeeSelect = () => {
-  const intl = useIntl();
-  const options = [
-    {
-      id: 'partial',
-      name: intl.formatMessage({
-        defaultMessage: 'Partial',
-        description: 'AckeeSelect: partial option name',
-        id: 'e/8Kyj',
-      }),
-      value: 'partial',
-    },
-    {
-      id: 'full',
-      name: intl.formatMessage({
-        defaultMessage: 'Full',
-        description: 'AckeeSelect: full option name',
-        id: 'PzRpPw',
-      }),
-      value: 'full',
-    },
-  ];
-  const [value, setValue] = useState<string>('full');
-  const { setDetailed } = useAckeeTracker();
-
-  useEffect(() => {
-    setDetailed(value === 'full');
-  }, [setDetailed, value]);
-
-  useEffect(() => {
-    const initialState = LocalStorage.get('ackee-tracking');
-    if (initialState) setValue(initialState);
-  }, []);
-
-  useEffect(() => {
-    LocalStorage.set('ackee-tracking', `${value}`);
-  }, [value]);
-
-  const label = (
-    <Label
-      body={intl.formatMessage({
-        defaultMessage: 'Tracking:',
-        description: 'AckeeSelect: select label',
-        id: '2pmylc',
-      })}
-      htmlFor="ackee-settings"
-      kind="settings"
-    />
-  );
-
-  const message = [
-    intl.formatMessage({
-      defaultMessage: 'Partial includes only page url, views and duration.',
-      description: 'AckeeSelect: tooltip message',
-      id: 'skb4W5',
-    }),
-    intl.formatMessage({
-      defaultMessage:
-        'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.',
-      description: 'AckeeSelect: tooltip message',
-      id: 'Ogccx6',
-    }),
-  ];
-
-  return (
-    <div className={styles.wrapper}>
-      <Field
-        id="ackee-settings"
-        name="ackee-settings"
-        kind="select"
-        label={label}
-        options={options}
-        value={value}
-        setValue={setValue}
-      />
-      <Tooltip
-        message={message}
-        title={intl.formatMessage({
-          defaultMessage: 'Ackee tracking (analytics)',
-          description: 'AckeeSelect: tooltip title',
-          id: 'F1EQX3',
-        })}
-      />
-    </div>
-  );
-};
-
-export default AckeeSelect;
diff --git a/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx b/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx
deleted file mode 100644
index 20ad267..0000000
--- a/src/components/Settings/PrismThemeToggle/PrismThemeToggle.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Toggle } from '@components/FormElements';
-import { MoonIcon, SunIcon } from '@components/Icons';
-import Spinner from '@components/Spinner/Spinner';
-import { usePrismTheme } from '@utils/providers/prism-theme';
-import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-
-const PrismThemeToggle = () => {
-  const intl = useIntl();
-  const [isMounted, setIsMounted] = useState<boolean>(false);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  const { theme, setTheme, resolvedTheme } = usePrismTheme();
-  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(theme === 'dark');
-
-  useEffect(() => {
-    if (theme === 'system') {
-      setIsDarkTheme(resolvedTheme === 'dark');
-    } else {
-      setIsDarkTheme(theme === 'dark');
-    }
-  }, [theme, resolvedTheme]);
-
-  const updateTheme = () => {
-    isDarkTheme ? setTheme('light') : setTheme('dark');
-    setIsDarkTheme(!isDarkTheme);
-  };
-
-  if (!isMounted) return <Spinner />;
-
-  return (
-    <Toggle
-      id="prism-theme"
-      label={intl.formatMessage({
-        defaultMessage: 'Code blocks:',
-        description: 'PrismThemeToggle: toggle label',
-        id: 'w0UfY0',
-      })}
-      leftChoice={<SunIcon />}
-      rightChoice={<MoonIcon />}
-      value={isDarkTheme}
-      changeHandler={updateTheme}
-    />
-  );
-};
-
-export default PrismThemeToggle;
diff --git a/src/components/Settings/ReduceMotion/ReduceMotion.tsx b/src/components/Settings/ReduceMotion/ReduceMotion.tsx
deleted file mode 100644
index 00562cd..0000000
--- a/src/components/Settings/ReduceMotion/ReduceMotion.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Toggle } from '@components/FormElements';
-import { LocalStorage } from '@services/local-storage';
-import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-
-const ReduceMotion = () => {
-  const intl = useIntl();
-  const [isDeactivated, setIsDeactivated] = useState<boolean>(false);
-
-  useEffect(() => {
-    const initialState = LocalStorage.get('reduced-motion');
-    if (initialState) setIsDeactivated(initialState === 'true' ? true : false);
-  }, []);
-
-  useEffect(() => {
-    document.documentElement.dataset.reducedMotion = `${isDeactivated}`;
-    LocalStorage.set('reduced-motion', `${isDeactivated}`);
-  }, [isDeactivated]);
-
-  const updateState = () => {
-    setIsDeactivated(!isDeactivated);
-  };
-
-  return (
-    <Toggle
-      id="reduced-motion"
-      label={intl.formatMessage({
-        defaultMessage: 'Animations:',
-        description: 'ReduceMotion: toggle label',
-        id: 'X3PDXO',
-      })}
-      leftChoice={intl.formatMessage({
-        defaultMessage: 'On',
-        description: 'ReduceMotion: toggle on label',
-        id: 'qPU/Qn',
-      })}
-      rightChoice={intl.formatMessage({
-        defaultMessage: 'Off',
-        description: 'ReduceMotion: toggle off label',
-        id: 'w1nIrj',
-      })}
-      value={isDeactivated}
-      changeHandler={updateState}
-    />
-  );
-};
-
-export default ReduceMotion;
diff --git a/src/components/Settings/Settings.module.scss b/src/components/Settings/Settings.module.scss
deleted file mode 100644
index fe6b17b..0000000
--- a/src/components/Settings/Settings.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.title {
-  --icon-size: #{fun.convert-px(30)};
-
-  display: flex;
-  flex-flow: row nowrap;
-  gap: var(--spacing-2xs);
-  margin-bottom: var(--spacing-md);
-  color: var(--color-primary-dark);
-  font-size: var(--font-size-lg);
-  font-weight: 600;
-
-  svg {
-    margin: 0;
-  }
-}
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
deleted file mode 100644
index fec4c45..0000000
--- a/src/components/Settings/Settings.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { CogIcon } from '@components/Icons';
-import ThemeToggle from '@components/Settings/ThemeToggle/ThemeToggle';
-import { useIntl } from 'react-intl';
-import AckeeSelect from './AckeeSelect/AckeeSelect';
-import PrismThemeToggle from './PrismThemeToggle/PrismThemeToggle';
-import ReduceMotion from './ReduceMotion/ReduceMotion';
-import styles from './Settings.module.scss';
-
-const Settings = () => {
-  const intl = useIntl();
-
-  return (
-    <>
-      <div className={styles.title}>
-        <CogIcon />{' '}
-        {intl.formatMessage({
-          defaultMessage: 'Settings',
-          description: 'Settings: modal title',
-          id: 'bHEmkY',
-        })}
-      </div>
-      <ThemeToggle />
-      <ReduceMotion />
-      <PrismThemeToggle />
-      <AckeeSelect />
-    </>
-  );
-};
-
-export default Settings;
diff --git a/src/components/Settings/ThemeToggle/ThemeToggle.tsx b/src/components/Settings/ThemeToggle/ThemeToggle.tsx
deleted file mode 100644
index ec2cee1..0000000
--- a/src/components/Settings/ThemeToggle/ThemeToggle.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Toggle } from '@components/FormElements';
-import { MoonIcon, SunIcon } from '@components/Icons';
-import Spinner from '@components/Spinner/Spinner';
-import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-
-const ThemeToggle = () => {
-  const intl = useIntl();
-  const [isMounted, setIsMounted] = useState<boolean>(false);
-  const { resolvedTheme, setTheme } = useTheme();
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  if (!isMounted) return <Spinner />;
-
-  const isDarkTheme = resolvedTheme === 'dark';
-
-  const updateTheme = () => {
-    setTheme(isDarkTheme ? 'light' : 'dark');
-  };
-
-  return (
-    <Toggle
-      id="dark-theme"
-      label={intl.formatMessage({
-        defaultMessage: 'Theme:',
-        description: 'ThemeToggle: toggle label',
-        id: 'O9XLDc',
-      })}
-      leftChoice={<SunIcon />}
-      rightChoice={<MoonIcon />}
-      value={isDarkTheme}
-      changeHandler={updateTheme}
-    />
-  );
-};
-
-export default ThemeToggle;
diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
deleted file mode 100644
index fb6230d..0000000
--- a/src/components/Sidebar/Sidebar.module.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  grid-column: 2;
-
-  &--left {
-    margin: var(--spacing-md) 0;
-  }
-
-  &--right {
-    margin: var(--spacing-md) 0 0;
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      align-self: stretch;
-      margin: 0 var(--spacing-xs) var(--spacing-md);
-
-      &--right {
-        grid-row: 2 / 4;
-        grid-column: 3;
-      }
-    }
-
-    @include mix.dimensions("lg") {
-      &--left {
-        grid-row: 2 / 4;
-        grid-column: 1;
-      }
-    }
-  }
-}
-
-.body {
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      align-self: flex-start;
-      width: 100%;
-      position: sticky;
-      top: var(--spacing-xs);
-    }
-  }
-}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
deleted file mode 100644
index 9e2079d..0000000
--- a/src/components/Sidebar/Sidebar.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Children, cloneElement, isValidElement, ReactNode } from 'react';
-import styles from './Sidebar.module.scss';
-
-type SidebarPosition = 'left' | 'right';
-
-const Sidebar = ({
-  children,
-  position,
-  ariaLabel,
-  title,
-}: {
-  children: ReactNode;
-  position: SidebarPosition;
-  ariaLabel?: string;
-  title?: string;
-}) => {
-  const childrenWithProps = Children.map(children, (child) => {
-    if (isValidElement(child)) {
-      return cloneElement(child, { titleLevel: title ? 3 : 2 });
-    }
-    return child;
-  });
-
-  const positionClass = `wrapper--${position}`;
-
-  return (
-    <aside
-      className={`${styles.wrapper} ${styles[positionClass]}`}
-      aria-label={ariaLabel}
-      aria-labelledby={title ? `${position}-sidebar-title` : undefined}
-    >
-      <div className={styles.body}>
-        {title && <h2 id={`${position}-sidebar-title`}>{title}</h2>}
-        {childrenWithProps}
-      </div>
-    </aside>
-  );
-};
-
-export default Sidebar;
diff --git a/src/components/Spinner/Spinner.module.scss b/src/components/Spinner/Spinner.module.scss
deleted file mode 100644
index 8d818a2..0000000
--- a/src/components/Spinner/Spinner.module.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-2xs);
-  margin: var(--spacing-md) 0;
-}
-
-.ball {
-  width: fun.convert-px(8);
-  height: fun.convert-px(8);
-  background: linear-gradient(
-    to right,
-    var(--color-primary-light) 0%,
-    var(--color-primary-lighter) 100%
-  );
-  border-radius: 50%;
-  animation: spinner 1.4s infinite ease-in-out both;
-
-  &:first-child {
-    animation-delay: -0.32s;
-  }
-
-  &:nth-child(2) {
-    animation-delay: -0.16s;
-  }
-}
-
-.text {
-  margin-left: var(--spacing-xs);
-  color: var(--color-primary-darker);
-  text-align: center;
-}
-
-@keyframes spinner {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-
-  40% {
-    transform: scale(1);
-  }
-}
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
deleted file mode 100644
index 9117d90..0000000
--- a/src/components/Spinner/Spinner.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useIntl } from 'react-intl';
-import styles from './Spinner.module.scss';
-
-const Spinner = ({ message }: { message?: string }) => {
-  const intl = useIntl();
-
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.ball}></div>
-      <div className={styles.ball}></div>
-      <div className={styles.ball}></div>
-      <div className={styles.text}>
-        {message ||
-          intl.formatMessage({
-            defaultMessage: 'Loading...',
-            description: 'Spinner: loading text',
-            id: 'q9cJQe',
-          })}
-      </div>
-    </div>
-  );
-};
-
-export default Spinner;
diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
deleted file mode 100644
index debb3b7..0000000
--- a/src/components/Toolbar/Toolbar.module.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.wrapper {
-  --btn-size: #{fun.convert-px(60)};
-
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: space-around;
-  width: 100%;
-  height: var(--toolbar-size);
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 5;
-  background: var(--color-bg);
-  border-top: fun.convert-px(4) solid;
-  border-image: radial-gradient(
-      ellipse at top,
-      var(--color-primary-lighter) 20%,
-      var(--color-primary) 100%
-    )
-    1;
-  box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
-    var(--color-shadow-dark);
-
-  :global {
-    animation: slide-in-from-bottom 0.8s ease-in-out 0s 1;
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      --toolbar-size: auto;
-
-      justify-content: flex-end;
-      gap: var(--spacing-sm);
-      width: auto;
-      background: inherit;
-      border: none;
-      box-shadow: none;
-      position: relative;
-      left: unset;
-      margin-right: unset;
-      transform: unset;
-
-      :global {
-        animation: slide-in-from-top 1s ease-in-out 0s 1;
-      }
-    }
-  }
-}
-
-.menu {
-  padding: var(--spacing-md);
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  background: var(--color-bg-secondary);
-  border-top: fun.convert-px(4) solid;
-  border-bottom: fun.convert-px(4) solid;
-  border-image: radial-gradient(
-      ellipse at top,
-      var(--color-primary-lighter) 20%,
-      var(--color-primary) 100%
-    )
-    1;
-  box-shadow: fun.convert-px(2) fun.convert-px(-2) fun.convert-px(3)
-    fun.convert-px(-1) var(--color-shadow-dark);
-  transition: all 0.7s ease-in-out 0s;
-
-  &--closed {
-    transform: translateX(-100%);
-    visibility: hidden;
-  }
-
-  &--opened {
-    transform: translateX(0);
-    visibility: visible;
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      width: fun.convert-px(500);
-      left: unset;
-      right: unset;
-      top: 120%;
-      bottom: unset;
-      border: fun.convert-px(4) solid;
-      border-image: radial-gradient(
-          ellipse at top,
-          var(--color-primary-lighter) 20%,
-          var(--color-primary) 100%
-        )
-        1;
-      box-shadow: fun.convert-px(2) fun.convert-px(2) fun.convert-px(3)
-        fun.convert-px(1) var(--color-shadow-dark);
-      transform-origin: 50% -200%;
-      transition: all 0.8s ease-in-out 0s;
-
-      &--closed {
-        opacity: 0;
-        transform: perspective(20rem) translate3d(0, 100%, -20rem);
-        visibility: hidden;
-      }
-
-      &--opened {
-        opacity: 1;
-        transform: none;
-      }
-    }
-  }
-}
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
deleted file mode 100644
index 17f9ef9..0000000
--- a/src/components/Toolbar/Toolbar.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import { ButtonToolbar } from '@components/Buttons';
-import MainNav from '@components/MainNav/MainNav';
-import Spinner from '@components/Spinner/Spinner';
-import dynamic from 'next/dynamic';
-import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
-import styles from './Toolbar.module.scss';
-
-const DynamicSearchForm = dynamic(
-  () => import('@components/SearchForm/SearchForm'),
-  {
-    loading: () => <Spinner />,
-  }
-);
-
-const DynamicSettings = dynamic(() => import('@components/Settings/Settings'), {
-  loading: () => <Spinner />,
-});
-
-const Toolbar = () => {
-  const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
-  const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
-  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
-  const mainNavRef = useRef<HTMLDivElement>(null);
-  const searchBtnRef = useRef<HTMLButtonElement>(null);
-  const searchModalRef = useRef<HTMLDivElement>(null);
-  const settingsBtnRef = useRef<HTMLButtonElement>(null);
-  const settingsModalRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isNavOpened) {
-      setIsSearchOpened(false);
-      setIsSettingsOpened(false);
-    }
-  }, [isNavOpened]);
-
-  useEffect(() => {
-    if (isSearchOpened) {
-      setIsNavOpened(false);
-      setIsSettingsOpened(false);
-    }
-  }, [isSearchOpened]);
-
-  useEffect(() => {
-    if (isSettingsOpened) {
-      setIsNavOpened(false);
-      setIsSearchOpened(false);
-    }
-  }, [isSettingsOpened]);
-
-  const isClickOutside = (
-    ref: RefObject<HTMLDivElement>,
-    target: EventTarget
-  ) => {
-    return ref.current && !ref.current.contains(target as Node);
-  };
-
-  const isToggleBtn = (ref: RefObject<HTMLDivElement>, target: EventTarget) => {
-    return (
-      ref.current &&
-      ref.current.previousElementSibling &&
-      ref.current.previousElementSibling.contains(target as Node)
-    );
-  };
-
-  const isSearchBtn = useCallback((target: HTMLElement) => {
-    return (
-      target === searchBtnRef.current || searchBtnRef.current?.contains(target)
-    );
-  }, []);
-
-  const isSettingsBtn = useCallback((target: HTMLElement) => {
-    return (
-      target === settingsBtnRef.current ||
-      settingsBtnRef.current?.contains(target)
-    );
-  }, []);
-
-  const handleVisibility = useCallback(
-    (e: MouseEvent | FocusEvent) => {
-      let ref: RefObject<HTMLDivElement> | null = null;
-      if (isNavOpened) ref = mainNavRef;
-      if (isSearchOpened) ref = searchModalRef;
-      if (isSettingsOpened) ref = settingsModalRef;
-
-      if (!ref || !ref.current || !ref.current.id) return;
-      if (!isClickOutside(ref, e.target as Node)) return;
-      if (isToggleBtn(ref, e.target as Node)) return;
-
-      if (
-        ref.current.id === 'main-nav' &&
-        !isSettingsBtn(e.target as HTMLElement) &&
-        !isSearchBtn(e.target as HTMLElement)
-      ) {
-        setIsNavOpened(false);
-      }
-
-      if (
-        ref.current.id === 'search-modal' &&
-        !isSettingsBtn(e.target as HTMLElement)
-      )
-        setIsSearchOpened(false);
-      if (
-        ref.current.id === 'settings-modal' &&
-        !isSearchBtn(e.target as HTMLElement)
-      )
-        setIsSettingsOpened(false);
-    },
-    [isNavOpened, isSearchOpened, isSettingsOpened, isSearchBtn, isSettingsBtn]
-  );
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleVisibility);
-    document.addEventListener('focusin', handleVisibility);
-
-    return () => {
-      document.removeEventListener('mousedown', handleVisibility);
-      document.removeEventListener('focusin', handleVisibility);
-    };
-  }, [handleVisibility]);
-
-  const searchClasses = `${styles.menu} ${
-    isSearchOpened ? styles['menu--opened'] : styles['menu--closed']
-  }`;
-
-  const settingsClasses = `${styles.menu} ${
-    isSettingsOpened ? styles['menu--opened'] : styles['menu--closed']
-  }`;
-
-  return (
-    <div className={styles.wrapper}>
-      <MainNav
-        ref={mainNavRef}
-        isOpened={isNavOpened}
-        setIsOpened={setIsNavOpened}
-      />
-      <ButtonToolbar
-        ref={searchBtnRef}
-        type="search"
-        isActivated={isSearchOpened}
-        setIsActivated={setIsSearchOpened}
-      />
-      <div id="search-modal" className={searchClasses} ref={searchModalRef}>
-        <DynamicSearchForm isOpened={isSearchOpened} />
-      </div>
-      <ButtonToolbar
-        ref={settingsBtnRef}
-        type="settings"
-        isActivated={isSettingsOpened}
-        setIsActivated={setIsSettingsOpened}
-      />
-      <div
-        id="settings-modal"
-        className={settingsClasses}
-        ref={settingsModalRef}
-      >
-        <DynamicSettings />
-      </div>
-    </div>
-  );
-};
-
-export default Toolbar;
diff --git a/src/components/Tooltip/Tooltip.module.scss b/src/components/Tooltip/Tooltip.module.scss
deleted file mode 100644
index 34fa23d..0000000
--- a/src/components/Tooltip/Tooltip.module.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.title {
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  position: absolute;
-  top: calc(var(--spacing-sm) * -1);
-  left: var(--spacing-lg);
-  background: var(--color-bg);
-  border: fun.convert-px(1) solid var(--color-primary-dark);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-  color: var(--color-primary-darker);
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 500;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      top: 0;
-    }
-
-    @include mix.dimensions("md") {
-      left: var(--spacing-md);
-    }
-  }
-
-  &::before {
-    content: "?";
-    padding: var(--spacing-2xs);
-    position: absolute;
-    top: fun.convert-px(-1);
-    bottom: fun.convert-px(-1);
-    right: 100%;
-    background: var(--color-primary-dark);
-    border: fun.convert-px(1) solid var(--color-primary-dark);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-    color: var(--color-fg-inverted);
-    font-weight: 600;
-  }
-}
-
-.message {
-  transition: all 0.5s ease-in-out 0;
-}
-
-.wrapper {
-  padding: 9% 6% var(--spacing-sm) 6%;
-  position: absolute;
-  bottom: 30%;
-  left: fun.convert-px(15);
-  right: fun.convert-px(15);
-  background: var(--color-bg);
-  border: fun.convert-px(2) solid var(--color-primary-dark);
-  border-radius: fun.convert-px(3);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow),
-    fun.convert-px(2) fun.convert-px(2) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow-light);
-  transform-origin: bottom;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      overflow-y: auto;
-      top: 18%;
-    }
-
-    @include mix.dimensions("sm") {
-      bottom: unset;
-      left: fun.convert-px(15);
-      right: fun.convert-px(15);
-      top: 100%;
-      transform-origin: top;
-    }
-  }
-
-  ul,
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.hidden {
-  visibility: hidden;
-  opacity: 0;
-  transition: all 0.5s ease-in-out 0s, opacity 0.3s ease-in-out 0.2s;
-  transform: scaleY(0);
-
-  .message,
-  .title {
-    opacity: 0;
-  }
-
-  .message {
-    transition: all 0.3s ease-in-out 0s;
-  }
-
-  .title {
-    transition: all 0.2s ease-in-out 0.2s;
-  }
-}
-
-.visible {
-  visibility: visible;
-  opacity: 1;
-  transform: scaleY(1);
-  transition: all 0.8s ease-in-out 0s, opacity 0.7s ease-in-out 0.2s;
-
-  .message,
-  .title {
-    opacity: 1;
-  }
-
-  .message {
-    transition: all 0.5s ease-in-out 0.2s;
-  }
-
-  .title {
-    transition: all 0.4s ease-in-out 0s;
-  }
-}
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
deleted file mode 100644
index 56a87ab..0000000
--- a/src/components/Tooltip/Tooltip.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ButtonHelp } from '@components/Buttons';
-import { useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './Tooltip.module.scss';
-
-const Tooltip = ({
-  message,
-  title,
-}: {
-  message: string | string[];
-  title: string;
-}) => {
-  const intl = useIntl();
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  const getMessageFromArray = (strings: string[]) => {
-    let keyIndex = 0;
-    return (
-      <ul>
-        {strings.map((string) => {
-          keyIndex = keyIndex + 1;
-          return <li key={`message-${keyIndex}`}>{string}</li>;
-        })}
-      </ul>
-    );
-  };
-
-  const buttonTitle = isOpen
-    ? intl.formatMessage({
-        defaultMessage: 'Close help',
-        description: 'Tooltip: button title',
-        id: '9kx83j',
-      })
-    : intl.formatMessage({
-        defaultMessage: 'Show help',
-        description: 'Tooltip: button title',
-        id: 'A5n+C9',
-      });
-
-  const wrapperModifier = isOpen ? styles.visible : styles.hidden;
-
-  return (
-    <div>
-      <ButtonHelp
-        showHelp={isOpen}
-        setShowHelp={setIsOpen}
-        title={buttonTitle}
-      />
-      <div className={`${styles.wrapper} ${wrapperModifier}`}>
-        <div className={styles.title}>{title}</div>
-        <div className={styles.message}>
-          {Array.isArray(message) ? getMessageFromArray(message) : message}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Tooltip;
diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
deleted file mode 100644
index 6a7757d..0000000
--- a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.module.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.title {
-  margin: 0;
-  padding: 0;
-  background: none;
-  font-size: var(--font-size-xl);
-  text-align: left;
-}
-
-.icon {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-  width: fun.convert-px(30);
-  height: fun.convert-px(30);
-  background: var(--color-bg);
-  border: fun.convert-px(1) solid var(--color-primary);
-  border-radius: fun.convert-px(3);
-  color: var(--color-primary);
-  font-weight: 800;
-  transition: all 0.25s ease-in-out 0s;
-
-  &::before,
-  &::after {
-    content: "";
-    background: var(--color-primary);
-    transition: all 0.4s ease-out 0s;
-  }
-
-  &::before {
-    width: 10%;
-    height: 60%;
-    position: relative;
-    left: 30%;
-  }
-
-  &::after {
-    width: 60%;
-    height: 10%;
-    position: relative;
-    left: -5%;
-  }
-}
-
-.body {
-  width: 100%;
-  max-height: 0;
-  margin: 0 0 fun.convert-px(-6); // collapse borders
-  overflow: hidden;
-  visibility: hidden;
-  transition: all 0.6s cubic-bezier(0, 1, 0, 1) 0s, margin 0.2s ease-in-out 0s,
-    border 0.1s ease-in-out 0.3s, visibility 0.1s linear 0.6s;
-
-  &--borders {
-    border: 0 solid transparent;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      font-size: var(--font-size-sm);
-      font-weight: 500;
-    }
-  }
-}
-
-.wrapper {
-  --header-height: #{fun.convert-px(65)};
-
-  display: flex;
-  flex-flow: column;
-
-  &--expanded {
-    .icon::before {
-      height: 0;
-    }
-
-    .body {
-      max-height: 10000px; // needs a fixed value for transition.
-      margin: var(--spacing-sm) 0;
-      overflow: visible;
-      visibility: visible;
-      transition: visibility 0.1s linear 0s, max-height 0.6s linear 0s,
-        margin 0.2s ease-in-out 0s;
-
-      &--borders {
-        border: fun.convert-px(2) solid var(--color-primary-dark);
-      }
-    }
-  }
-}
-
-.wrapper--expanded.wrapper--toc {
-  @include mix.media("screen") {
-    @include mix.dimensions("lg") {
-      max-height: 100vh;
-
-      .body {
-        overflow-y: auto;
-      }
-    }
-  }
-}
-
-.header {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-  width: 100%;
-  min-height: var(--header-height);
-  padding: 0;
-  position: sticky;
-  top: 0;
-  z-index: 3;
-  background: var(--color-bg);
-  border: none;
-  border-top: fun.convert-px(2) solid var(--color-primary-dark);
-  border-bottom: fun.convert-px(2) solid var(--color-primary-dark);
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    .icon {
-      background: var(--color-primary-light);
-      color: var(--color-fg-inverted);
-      transform: scale(1.2);
-
-      &::before,
-      &::after {
-        background: var(--color-bg);
-      }
-    }
-  }
-
-  > button {
-    padding: 0 var(--spacing-xs);
-  }
-}
diff --git a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx b/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
deleted file mode 100644
index 38e57ad..0000000
--- a/src/components/WidgetParts/ExpandableWidget/ExpandableWidget.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { TitleLevel } from '@ts/types/app';
-import { ReactNode, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './ExpandableWidget.module.scss';
-
-const ExpandableWidget = ({
-  children,
-  title,
-  titleLevel = 2,
-  expand = false,
-  withBorders = false,
-  kind = 'regular',
-}: {
-  children: ReactNode;
-  title: string;
-  titleLevel?: TitleLevel;
-  expand?: boolean;
-  withBorders?: boolean;
-  kind?: 'regular' | 'toc';
-}) => {
-  const intl = useIntl();
-  const [isExpanded, setIsExpanded] = useState<boolean>(expand);
-
-  const handleExpanse = () => setIsExpanded((prev) => !prev);
-
-  const TitleTag = `h${titleLevel}` as keyof JSX.IntrinsicElements;
-
-  const wrapperKindClass = styles[`wrapper--${kind}`];
-  const wrapperClasses = `${styles.wrapper} ${
-    isExpanded ? styles['wrapper--expanded'] : ''
-  } ${wrapperKindClass}`;
-
-  const bodyClasses = `${styles.body} ${
-    withBorders ? styles['body--borders'] : ''
-  }`;
-
-  return (
-    <div className={wrapperClasses}>
-      <button type="button" className={styles.header} onClick={handleExpanse}>
-        <span className="screen-reader-text">
-          {isExpanded
-            ? intl.formatMessage({
-                defaultMessage: 'Collapse',
-                description: 'ExpandableWidget: collapse text',
-                id: 'WRkY1/',
-              })
-            : intl.formatMessage({
-                defaultMessage: 'Expand',
-                description: 'ExpandableWidget: expand text',
-                id: 'hV0qHp',
-              })}
-        </span>
-        <TitleTag className={styles.title}>{title}</TitleTag>
-        <span className={styles.icon} aria-hidden={true}></span>
-      </button>
-      <div className={bodyClasses}>{children}</div>
-    </div>
-  );
-};
-
-export default ExpandableWidget;
diff --git a/src/components/WidgetParts/List/List.module.scss b/src/components/WidgetParts/List/List.module.scss
deleted file mode 100644
index 958f792..0000000
--- a/src/components/WidgetParts/List/List.module.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.list {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-
-  .list {
-    border: none;
-    border-top: fun.convert-px(1) solid var(--color-primary-dark);
-  }
-
-  li {
-    margin: 0;
-
-    &:not(:last-of-type) {
-      border-bottom: fun.convert-px(1) solid var(--color-primary-dark);
-    }
-  }
-
-  a {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 100%;
-    padding: var(--spacing-2xs) var(--spacing-xs);
-    background: none;
-    text-decoration: underline solid transparent 0;
-    transition: all 0.2s ease-in-out 0s, font-weight 0s,
-      text-decoration-color 0s;
-
-    &:hover,
-    &:focus {
-      background: var(--color-bg-secondary);
-      font-weight: 600;
-    }
-
-    &:focus {
-      color: var(--color-primary);
-      text-decoration-color: var(--color-primary-light);
-      text-decoration-thickness: 0.25ex;
-    }
-
-    &:active {
-      background: var(--color-bg-tertiary);
-      text-decoration-color: transparent;
-      text-decoration-thickness: 0;
-    }
-  }
-}
diff --git a/src/components/WidgetParts/List/List.tsx b/src/components/WidgetParts/List/List.tsx
deleted file mode 100644
index 317c4d1..0000000
--- a/src/components/WidgetParts/List/List.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styles from './List.module.scss';
-
-const List = ({ items }: { items: Array<any> }) => {
-  return <ul className={styles.list}>{items}</ul>;
-};
-
-export default List;
diff --git a/src/components/WidgetParts/OrderedList/OrderedList.module.scss b/src/components/WidgetParts/OrderedList/OrderedList.module.scss
deleted file mode 100644
index a286932..0000000
--- a/src/components/WidgetParts/OrderedList/OrderedList.module.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
-
-.list {
-  @extend %reset-ordered-list;
-  counter-reset: link;
-
-  .list {
-    border-top: fun.convert-px(1) solid var(--color-primary-dark);
-  }
-
-  a {
-    display: flex;
-    flex-flow: row nowrap;
-    width: 100%;
-    padding: var(--spacing-2xs) var(--spacing-xs);
-    background: none;
-    text-decoration: underline solid transparent 0;
-    transition: all 0.16s ease-in-out 0s, text-decoration-color 0s;
-    counter-increment: link;
-
-    &:hover,
-    &:focus {
-      background: var(--color-bg-secondary);
-    }
-
-    &:focus {
-      color: var(--color-primary);
-      text-decoration-color: var(--color-primary-light);
-      text-decoration-thickness: 0.25ex;
-    }
-
-    &:active {
-      background: var(--color-bg-tertiary);
-      text-decoration-color: transparent;
-      text-decoration-thickness: 0;
-    }
-
-    &::before {
-      content: counters(link, ".") ". ";
-      color: var(--color-secondary);
-      padding-right: var(--spacing-2xs);
-    }
-  }
-
-  li {
-    width: 100%;
-    margin: 0;
-
-    &:not(:last-of-type) {
-      border-bottom: fun.convert-px(1) solid var(--color-primary-dark);
-    }
-
-    &::before {
-      display: none;
-    }
-  }
-
-  li li a::before {
-    padding-left: var(--spacing-sm);
-  }
-
-  li li li a::before {
-    padding-left: var(--spacing-lg);
-  }
-}
diff --git a/src/components/WidgetParts/OrderedList/OrderedList.tsx b/src/components/WidgetParts/OrderedList/OrderedList.tsx
deleted file mode 100644
index a12ec06..0000000
--- a/src/components/WidgetParts/OrderedList/OrderedList.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import styles from './OrderedList.module.scss';
-
-const OrderedList = ({ items }: { items: Array<any> }) => {
-  return <ol className={styles.list}>{items}</ol>;
-};
-
-export default OrderedList;
diff --git a/src/components/WidgetParts/index.tsx b/src/components/WidgetParts/index.tsx
deleted file mode 100644
index 59df3bd..0000000
--- a/src/components/WidgetParts/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import ExpandableWidget from './ExpandableWidget/ExpandableWidget';
-import List from './List/List';
-import OrderedList from './OrderedList/OrderedList';
-
-export { ExpandableWidget, List, OrderedList };
diff --git a/src/components/Widgets/CVPreview/CVPreview.module.scss b/src/components/Widgets/CVPreview/CVPreview.module.scss
deleted file mode 100644
index 6ddd696..0000000
--- a/src/components/Widgets/CVPreview/CVPreview.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.preview {
-  position: relative;
-  width: 100%;
-  height: 20rem;
-  margin-bottom: var(--spacing-sm);
-}
diff --git a/src/components/Widgets/CVPreview/CVPreview.tsx b/src/components/Widgets/CVPreview/CVPreview.tsx
deleted file mode 100644
index cf6a8fa..0000000
--- a/src/components/Widgets/CVPreview/CVPreview.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { ExpandableWidget } from '@components/WidgetParts';
-import Image from 'next/image';
-import Link from 'next/link';
-import { FormattedMessage } from 'react-intl';
-import styles from './CVPreview.module.scss';
-
-const CVPreview = ({
-  title,
-  imgSrc,
-  pdf,
-}: {
-  title: string;
-  imgSrc: string;
-  pdf: string;
-}) => {
-  return (
-    <ExpandableWidget title={title} expand={true}>
-      <div className={styles.preview}>
-        <Image
-          src={imgSrc}
-          layout="fill"
-          objectFit="contain"
-          objectPosition="left"
-          alt="CV Armand Philippot"
-        />
-      </div>
-      <p>
-        <FormattedMessage
-          defaultMessage="Download <link>CV in PDF</link>"
-          description="CVPreview: download as PDF link"
-          id="xC3Khf"
-          values={{
-            link: (chunks: string) => (
-              <Link href={pdf}>
-                <a>{chunks}</a>
-              </Link>
-            ),
-          }}
-        />
-      </p>
-    </ExpandableWidget>
-  );
-};
-
-export default CVPreview;
diff --git a/src/components/Widgets/RecentPosts/RecentPosts.module.scss b/src/components/Widgets/RecentPosts/RecentPosts.module.scss
deleted file mode 100644
index 1b85265..0000000
--- a/src/components/Widgets/RecentPosts/RecentPosts.module.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
-
-.list {
-  --items: 3;
-  --items-size: 25ch;
-
-  @extend %reset-list;
-
-  display: grid;
-  grid-template-columns: repeat(
-    auto-fit,
-    min(calc(100vw - (var(--spacing-md) * 2)), var(--items-size))
-  );
-  justify-content: center;
-  gap: var(--spacing-sm);
-  width: min(
-    calc(100vw - (var(--spacing-md) * 2)),
-    calc(
-      (var(--items-size) * var(--items)) +
-        (var(--spacing-sm) * (var(--items) - 1))
-    )
-  );
-  margin-bottom: var(--spacing-md);
-}
-
-.item {
-  text-align: center;
-}
-
-.article {
-  display: flex;
-  flex-flow: column nowrap;
-  height: 100%;
-  padding: 0 0 var(--spacing-md);
-}
-
-.title {
-  flex: 1;
-  margin: var(--spacing-sm) 0;
-  padding: 0 var(--spacing-md);
-  text-decoration: underline solid transparent 0;
-  transition: all 0.3s linear 0s;
-}
-
-.link {
-  display: block;
-  height: 100%;
-  background: var(--color-bg);
-  color: inherit;
-  text-decoration: none;
-  border: fun.convert-px(3) solid var(--color-primary);
-  border-radius: fun.convert-px(5);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow),
-    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-      var(--color-shadow),
-    fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-      var(--color-shadow);
-  transition: all 0.3s ease-in-out 0s;
-
-  &:hover,
-  &:focus,
-  &:active {
-    color: inherit;
-  }
-
-  &:hover,
-  &:focus {
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow-light),
-      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-        var(--color-shadow-light),
-      fun.convert-px(7) fun.convert-px(10) fun.convert-px(12) fun.convert-px(-3)
-        var(--color-shadow-light);
-    transform: scale(1.05);
-  }
-
-  &:focus {
-    .title {
-      text-decoration: underline solid var(--color-primary) 0.3ex;
-    }
-  }
-
-  &:active {
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    transform: scale(0.95);
-
-    .title {
-      text-decoration: none;
-    }
-  }
-}
-
-.cover {
-  width: 100%;
-  height: clamp(fun.convert-px(100), 20vw, fun.convert-px(150));
-  position: relative;
-  border: fun.convert-px(1) solid var(--color-border);
-}
-
-.meta {
-  display: block;
-  margin: 0;
-  padding: 0 var(--spacing-md);
-  font-size: var(--font-size-sm);
-}
diff --git a/src/components/Widgets/RecentPosts/RecentPosts.tsx b/src/components/Widgets/RecentPosts/RecentPosts.tsx
deleted file mode 100644
index 11d8558..0000000
--- a/src/components/Widgets/RecentPosts/RecentPosts.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import Spinner from '@components/Spinner/Spinner';
-import { getPublishedPosts } from '@services/graphql/queries';
-import { ArticlePreview } from '@ts/types/articles';
-import { PostsList } from '@ts/types/blog';
-import { settings } from '@utils/config';
-import { getFormattedDate } from '@utils/helpers/format';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
-import useSWR from 'swr';
-import styles from './RecentPosts.module.scss';
-
-const RecentPosts = ({ posts }: { posts: PostsList }) => {
-  const intl = useIntl();
-  const { data, error } = useSWR<PostsList>(
-    '/recent-posts',
-    () => getPublishedPosts({ first: 3 }),
-    { fallbackData: posts }
-  );
-  const router = useRouter();
-  const locale = router.locale ? router.locale : settings.locales.defaultLocale;
-
-  const getPost = (post: ArticlePreview) => {
-    return (
-      <li key={post.id} className={styles.item}>
-        <Link href={`/article/${post.slug}`}>
-          <a className={styles.link}>
-            <article className={styles.article}>
-              {post.featuredImage &&
-                Object.keys(post.featuredImage).length > 0 && (
-                  <div className={styles.cover}>
-                    <Image
-                      src={post.featuredImage.sourceUrl}
-                      alt={post.featuredImage.altText}
-                      layout="fill"
-                      objectFit="contain"
-                    />
-                  </div>
-                )}
-              <h3 className={styles.title}>{post.title}</h3>
-              <dl className={styles.meta}>
-                <dt>
-                  {intl.formatMessage({
-                    defaultMessage: 'Published on:',
-                    description: 'RecentPosts: publication date label',
-                    id: '1h+N2z',
-                  })}
-                </dt>
-                <dd>
-                  <time dateTime={post.dates.publication}>
-                    {getFormattedDate(post.dates.publication, locale)}
-                  </time>
-                </dd>
-              </dl>
-            </article>
-          </a>
-        </Link>
-      </li>
-    );
-  };
-
-  const getPostsItems = () => {
-    if (error)
-      return intl.formatMessage({
-        defaultMessage: 'Failed to load.',
-        description: 'RecentPosts: failed to load text',
-        id: 'iyEh0R',
-      });
-    if (!data) return <Spinner />;
-
-    return data.posts.map((post) => getPost(post));
-  };
-
-  return <ul className={styles.list}>{getPostsItems()}</ul>;
-};
-
-export default RecentPosts;
diff --git a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx b/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
deleted file mode 100644
index a66de82..0000000
--- a/src/components/Widgets/RelatedThematics/RelatedThematics.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ExpandableWidget, List } from '@components/WidgetParts';
-import { ThematicPreview } from '@ts/types/taxonomies';
-import Link from 'next/link';
-import { useIntl } from 'react-intl';
-
-const RelatedThematics = ({ thematics }: { thematics: ThematicPreview[] }) => {
-  const intl = useIntl();
-  const sortedThematics = [...thematics].sort((a, b) =>
-    a.title.localeCompare(b.title)
-  );
-
-  const thematicsList = sortedThematics.map((thematic) => {
-    return (
-      <li key={thematic.databaseId}>
-        <Link href={`/thematique/${thematic.slug}`}>
-          <a>{thematic.title}</a>
-        </Link>
-      </li>
-    );
-  });
-
-  return (
-    <ExpandableWidget
-      expand={true}
-      title={intl.formatMessage(
-        {
-          defaultMessage:
-            '{thematicsCount, plural, =0 {Related thematics} one {Related thematic} other {Related thematics}}',
-          description: 'RelatedThematics: widget title',
-          id: 'qXQETZ',
-        },
-        { thematicsCount: thematics.length }
-      )}
-      withBorders={true}
-    >
-      <List items={thematicsList} />
-    </ExpandableWidget>
-  );
-};
-
-export default RelatedThematics;
diff --git a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx b/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
deleted file mode 100644
index 992173d..0000000
--- a/src/components/Widgets/RelatedTopics/RelatedTopics.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { ExpandableWidget, List } from '@components/WidgetParts';
-import { TopicPreview } from '@ts/types/taxonomies';
-import Link from 'next/link';
-import { useIntl } from 'react-intl';
-
-const RelatedTopics = ({ topics }: { topics: TopicPreview[] }) => {
-  const intl = useIntl();
-  const sortedTopics = [...topics].sort((a, b) =>
-    a.title.localeCompare(b.title)
-  );
-
-  const topicsList = sortedTopics.map((topic) => {
-    return (
-      <li key={topic.databaseId}>
-        <Link href={`/sujet/${topic.slug}`}>
-          <a>{topic.title}</a>
-        </Link>
-      </li>
-    );
-  });
-
-  return (
-    <ExpandableWidget
-      expand={true}
-      title={intl.formatMessage(
-        {
-          defaultMessage:
-            '{topicsCount, plural, =0 {Related topics} one {Related topic} other {Related topics}}',
-          description: 'RelatedTopics: widget title',
-          id: 'w/lPUh',
-        },
-        { topicsCount: topicsList.length }
-      )}
-      withBorders={true}
-    >
-      <List items={topicsList} />
-    </ExpandableWidget>
-  );
-};
-
-export default RelatedTopics;
diff --git a/src/components/Widgets/Sharing/Sharing.module.scss b/src/components/Widgets/Sharing/Sharing.module.scss
deleted file mode 100644
index ada3e2f..0000000
--- a/src/components/Widgets/Sharing/Sharing.module.scss
+++ /dev/null
@@ -1,193 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.list {
-  @extend %flex-list;
-
-  gap: var(--spacing-sm);
-  padding: var(--spacing-2xs) 0 0 var(--spacing-2xs);
-
-  @include mix.media("screen") {
-    @include mix.dimensions("md") {
-      gap: var(--spacing-xs);
-      width: min-content;
-    }
-  }
-}
-
-.link {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  border-radius: fun.convert-px(3);
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.3s ease-in-out 0s;
-
-  &:hover,
-  &:focus {
-    color: hsl(0, 0%, 100%);
-    transform: translateX(#{fun.convert-px(-3)})
-      translateY(#{fun.convert-px(-3)});
-  }
-
-  &:active {
-    color: hsl(0, 0%, 100%);
-    transform: translateX(#{fun.convert-px(2)}) translateY(#{fun.convert-px(2)});
-
-    @include mix.motion("reduce") {
-      transform: none;
-    }
-  }
-
-  &::before {
-    display: block;
-    background-repeat: no-repeat;
-    content: "";
-    filter: drop-shadow(
-      #{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%)
-    );
-    width: fun.convert-px(30);
-    height: fun.convert-px(30);
-  }
-
-  &--diaspora {
-    background: hsl(0, 0%, 13%);
-    box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(0, 0%, 3%);
-
-    &:hover,
-    &:focus {
-      box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 hsl(0, 0%, 3%);
-    }
-
-    &:active {
-      box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 hsl(0, 0%, 3%);
-    }
-
-    &::before {
-      background-image: url(fun.encode-svg(
-        '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path style="fill:#ffffff;" d="M15.257 21.928l-2.33-3.255c-.622-.87-1.128-1.549-1.155-1.55-.027 0-1.007 1.317-2.317 3.115-1.248 1.713-2.28 3.115-2.292 3.115-.035 0-4.5-3.145-4.51-3.178-.006-.016 1.003-1.497 2.242-3.292 1.239-1.794 2.252-3.29 2.252-3.325 0-.056-.401-.197-3.55-1.247a1604.93 1604.93 0 01-3.593-1.2c-.033-.013.153-.635.79-2.648.46-1.446.845-2.642.857-2.656.013-.015 1.71.528 3.772 1.207 2.062.678 3.766 1.233 3.787 1.233.021 0 .045-.032.053-.07.008-.039.026-1.794.04-3.902.013-2.107.036-3.848.05-3.87.02-.03.599-.038 2.725-.038 1.485 0 2.716.01 2.735.023.023.016.064 1.175.132 3.776.112 4.273.115 4.33.183 4.33.026 0 1.66-.547 3.631-1.216 1.97-.668 3.593-1.204 3.605-1.191.04.045 1.656 5.307 1.636 5.327-.011.01-1.656.574-3.655 1.252-2.75.932-3.638 1.244-3.645 1.284-.006.029.94 1.442 2.143 3.202 1.184 1.733 2.148 3.164 2.143 3.18-.012.036-4.442 3.299-4.48 3.299-.015 0-.577-.767-1.249-1.705z"/></svg>'
-      ));
-    }
-  }
-
-  &--email {
-    background: hsl(0, 0%, 44%);
-    box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(0, 0%, 34%);
-
-    &:hover,
-    &:focus {
-      box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 hsl(0, 0%, 34%);
-    }
-
-    &:active {
-      box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 hsl(0, 0%, 34%);
-    }
-
-    &::before {
-      background-image: url(fun.encode-svg(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill:#ffffff;" d="M15.909 12.123L24 17.238V6.792zM0 6.792v10.446l8.091-5.115zM22.5 3.75h-21c-.748 0-1.343.558-1.455 1.276L12 12.904l11.955-7.877c-.112-.718-.706-1.276-1.455-1.276zm-7.965 9.279l-2.123 1.398a.75.75 0 01-.825 0l-2.122-1.4-9.417 5.957c.116.712.707 1.266 1.452 1.266h21c.746 0 1.337-.553 1.452-1.266z"/></svg>'
-      ));
-    }
-  }
-
-  &--facebook {
-    background: hsl(214, 89%, 52%);
-    box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(214, 89%, 42%);
-
-    &:hover,
-    &:focus {
-      box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
-        hsl(214, 89%, 42%);
-    }
-
-    &:active {
-      box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
-        hsl(214, 89%, 42%);
-    }
-
-    &::before {
-      background-image: url(fun.encode-svg(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill:#ffffff;" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>'
-      ));
-    }
-  }
-
-  &--journal-du-hacker {
-    background: hsl(210, 24%, 51%);
-    box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(210, 24%, 41%);
-
-    &:hover,
-    &:focus {
-      box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
-        hsl(210, 24%, 41%);
-    }
-
-    &:active {
-      box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
-        hsl(210, 24%, 41%);
-    }
-
-    &::before {
-      background-image: url(fun.encode-svg(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill:#ffffff;" d="M17.822 23.297a6.644 6.644 0 00-.654.032c-1.104.1-2.451-.378-3.244-1.15a3.223 3.223 0 01-.52-.739c-.209-.425-.22-.489-.211-1.178a8.174 8.174 0 01.19-1.585c.243-1.151.155-1.449-.514-1.737-.4-.172-.632-.135-1 .16-.268.215-.28.463-.07 1.532.298 1.526.286 2.238-.05 2.907-.28.56-.443.703-1.287 1.133-1.005.513-1.461.638-2.332.638-.73 0-1.014-.082-1.276-.366-.134-.145-.148-.2-.085-.32.099-.184.329-.3.959-.488.277-.082.604-.236.727-.341.123-.105.329-.265.457-.354.32-.222.562-.761.563-1.254 0-.331-.188-1.034-.45-1.676-.138-.338-.38.085-.38.666 0 .434-.673 1.569-.93 1.569-.048 0-.288.101-.532.225-.43.219-.47.225-1.31.225-.815 0-.889-.011-1.235-.194-.42-.22-.902-.694-1.094-1.073a2.752 2.752 0 00-.227-.377c-.083-.102-.08-.143.018-.293.206-.314.473-.317 1.186-.011.583.25 1.22.215 1.582-.086.168-.139.325-.697.342-1.217.02-.598-.049-.66-.596-.528-.86.206-1.762-.084-2.76-.887-.916-.739-1.362-.845-2.241-.538-.262.092-.51.153-.552.137-.042-.016-.134-.136-.204-.268-.118-.218-.12-.252-.02-.403.156-.24.714-.573 1.185-.708.297-.086.588-.11 1.076-.09.655.026.687.035 1.567.458.54.259.99.43 1.127.43.27 0 1.014-.37 1.159-.577.167-.238.124-.34-.322-.776-1.19-1.16-1.943-2.608-2.24-4.31-.124-.702-.14-1.888-.035-2.483.116-.656.677-2.273.915-2.64.385-.59 1.823-1.965 2.585-2.469C9.187.905 11.43.395 13.715.785c2.457.42 4.507 1.61 5.849 3.394 1.062 1.414 1.554 2.859 1.553 4.57 0 1.778-.497 3.238-1.599 4.693a6.207 6.207 0 00-.34.476c0 .013.205.12.456.238.737.345 1.169.844 1.726 1.994.256.527.531 1.031.613 1.12.225.247.614.42 1.099.49.588.085.804.178.9.388.109.24-.111.55-.402.563-.11.005-.394.033-.63.062-.887.107-1.851-.251-2.416-.898-.17-.193-.503-.616-.74-.939-.455-.616-.818-.922-1.054-.888-.117.017-.14.066-.127.28.008.142.068.34.133.438.09.137.127.412.161 1.196.05 1.153.147 1.458.55 1.726.306.204.552.198 1.11-.025.581-.233.923-.238 1.159-.018.243.227.2.637-.11 1.026-.33.419-1.338.899-2.001.954-1.194.1-2.371-.602-2.828-1.686-.062-.147-.197-.61-.301-1.03-.12-.486-.221-.762-.28-.762-.109 0-.263.401-.27.705-.003.12-.056.417-.118.657-.328 1.282.307 2.309 1.66 2.684.657.182.808.299.808.623 0 .319-.165.494-.454.481z"/></svg>'
-      ));
-    }
-  }
-
-  &--linkedin {
-    background: hsl(210, 90%, 40%);
-    box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(210, 90%, 30%);
-
-    &:hover,
-    &:focus {
-      box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
-        hsl(210, 90%, 30%);
-    }
-
-    &:active {
-      box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
-        hsl(210, 90%, 30%);
-    }
-
-    &::before {
-      background-image: url(fun.encode-svg(
-        '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path style="fill:#ffffff;" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'
-      ));
-    }
-  }
-
-  &--twitter {
-    background: hsl(203, 89%, 53%);
-    box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(203, 89%, 43%);
-
-    &:hover,
-    &:focus {
-      box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
-        hsl(203, 89%, 43%);
-    }
-
-    &:active {
-      box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
-        hsl(203, 89%, 43%);
-    }
-
-    &::before {
-      background-image: url(fun.encode-svg(
-        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path style="fill:#ffffff;" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>'
-      ));
-    }
-  }
-}
-
-:global {
-  [data-theme="dark"] {
-    :local {
-      .link {
-        filter: brightness(0.85) contrast(1.1);
-      }
-    }
-  }
-}
diff --git a/src/components/Widgets/Sharing/Sharing.tsx b/src/components/Widgets/Sharing/Sharing.tsx
deleted file mode 100644
index 45fe3ce..0000000
--- a/src/components/Widgets/Sharing/Sharing.tsx
+++ /dev/null
@@ -1,238 +0,0 @@
-import { ExpandableWidget } from '@components/WidgetParts';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './Sharing.module.scss';
-
-type Parameters = {
-  content: string;
-  image: string;
-  title: string;
-  url: string;
-};
-
-type Website = {
-  id: string;
-  name: string;
-  parameters: Parameters;
-  url: string;
-};
-
-const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
-  const intl = useIntl();
-  const [pageExcerpt, setPageExcerpt] = useState('');
-  const [pageUrl, setPageUrl] = useState('');
-  const [domainName, setDomainName] = useState('');
-  const router = useRouter();
-
-  useEffect(() => {
-    const divEl = document.createElement('div');
-    divEl.innerHTML = excerpt;
-    const cleanExcerpt = divEl.textContent!;
-    setPageExcerpt(cleanExcerpt);
-  }, [excerpt]);
-
-  useEffect(() => {
-    const { protocol, hostname, port } = window.location;
-    const currentPort = port ? `:${port}` : '';
-    const fullUrl = `${protocol}//${hostname}${currentPort}${router.asPath}`;
-
-    setDomainName(hostname);
-    setPageUrl(fullUrl);
-  }, [router.asPath]);
-
-  const getSharingUrl = (website: Website): string => {
-    const { id, parameters, url } = website;
-    let sharingUrl = `${url}?`;
-    let count = 0;
-
-    for (const [key, value] of Object.entries(parameters)) {
-      if (!value) continue;
-
-      sharingUrl += count > 0 ? `&${value}=` : `${value}=`;
-
-      switch (key) {
-        case 'content':
-          if (id === 'email') {
-            const intro = intl.formatMessage({
-              defaultMessage: 'Introduction:',
-              description: 'Sharing: email content prefix',
-              id: 'yfgMcl',
-            });
-            const readMore = intl.formatMessage({
-              defaultMessage: 'Read more here:',
-              description: 'Sharing: content link prefix',
-              id: 'UsQske',
-            });
-            const body = `${intro}\n\n"${pageExcerpt}"\n\n${readMore} ${pageUrl}`;
-            sharingUrl += encodeURI(body);
-          } else {
-            sharingUrl += encodeURI(pageExcerpt);
-          }
-          break;
-        case 'title':
-          const prefix =
-            id === 'email'
-              ? intl.formatMessage(
-                  {
-                    defaultMessage: 'Seen on {domainName}:',
-                    description: 'Sharing: seen on text',
-                    id: 'eUXMG4',
-                  },
-                  { domainName }
-                )
-              : '';
-          sharingUrl += encodeURI(`${prefix} ${title}`);
-          break;
-        case 'url':
-          sharingUrl += encodeURI(pageUrl);
-          break;
-        default:
-          break;
-      }
-
-      count++;
-    }
-
-    return sharingUrl;
-  };
-
-  const websites = [
-    {
-      id: 'diaspora',
-      name: intl.formatMessage({
-        defaultMessage: 'Diaspora',
-        description: 'Sharing: Diaspora',
-        id: 'Dhow1m',
-      }),
-      parameters: {
-        content: '',
-        image: '',
-        title: 'title',
-        url: 'url',
-      },
-      url: 'https://share.diasporafoundation.org/',
-    },
-    {
-      id: 'facebook',
-      name: intl.formatMessage({
-        defaultMessage: 'Facebook',
-        description: 'Sharing: Facebook',
-        id: '7iiaRx',
-      }),
-      parameters: {
-        content: '',
-        image: '',
-        title: '',
-        url: 'u',
-      },
-      url: 'https://www.facebook.com/sharer/sharer.php',
-    },
-    {
-      id: 'linkedin',
-      name: intl.formatMessage({
-        defaultMessage: 'LinkedIn',
-        description: 'Sharing: LinkedIn',
-        id: 'csCQQk',
-      }),
-      parameters: {
-        content: '',
-        image: '',
-        title: '',
-        url: 'url',
-      },
-      url: 'https://www.linkedin.com/sharing/share-offsite/',
-    },
-    {
-      id: 'twitter',
-      name: intl.formatMessage({
-        defaultMessage: 'Twitter',
-        description: 'Sharing: Twitter',
-        id: 'WjVBnY',
-      }),
-      parameters: {
-        content: '',
-        image: '',
-        title: 'text',
-        url: 'url',
-      },
-      url: 'https://twitter.com/intent/tweet',
-    },
-    {
-      id: 'journal-du-hacker',
-      name: intl.formatMessage({
-        defaultMessage: 'Journal du hacker',
-        description: 'Sharing: Journal du hacker',
-        id: 'P0I+Xm',
-      }),
-      parameters: {
-        content: '',
-        image: '',
-        title: 'title',
-        url: 'url',
-      },
-      url: 'https://www.journalduhacker.net/stories/new',
-    },
-    {
-      id: 'email',
-      name: intl.formatMessage({
-        defaultMessage: 'Email',
-        description: 'Sharing: Email',
-        id: 'lKZm9t',
-      }),
-      parameters: {
-        content: 'body',
-        image: '',
-        title: 'subject',
-        url: '',
-      },
-      url: 'mailto:',
-    },
-  ];
-
-  const getItems = () => {
-    return websites.map((website) => {
-      const { id, name } = website;
-      const sharingUrl = getSharingUrl(website);
-      const linkModifier = `link--${id}`;
-
-      return (
-        <li key={id}>
-          <a
-            href={sharingUrl}
-            title={name}
-            className={`${styles.link} ${styles[linkModifier]}`}
-          >
-            <span className="screen-reader-text">
-              {intl.formatMessage(
-                {
-                  defaultMessage: 'Share on {name}',
-                  description: 'Sharing: share on social network text',
-                  id: 'ureXFw',
-                },
-                { name }
-              )}
-            </span>
-          </a>
-        </li>
-      );
-    });
-  };
-
-  return (
-    <ExpandableWidget
-      title={intl.formatMessage({
-        defaultMessage: 'Share',
-        description: 'Sharing: widget title',
-        id: 'q3U6uI',
-      })}
-      expand={true}
-    >
-      <ul className={`${styles.list} ${styles['list--sharing']}`}>
-        {getItems()}
-      </ul>
-    </ExpandableWidget>
-  );
-};
-
-export default Sharing;
diff --git a/src/components/Widgets/SocialMedia/SocialMedia.module.scss b/src/components/Widgets/SocialMedia/SocialMedia.module.scss
deleted file mode 100644
index 2ef34bf..0000000
--- a/src/components/Widgets/SocialMedia/SocialMedia.module.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
-
-.list {
-  @extend %flex-list;
-
-  flex: 0 0 100%;
-  gap: var(--spacing-xs);
-  align-items: center;
-  padding: var(--spacing-2xs) 0 0 var(--spacing-2xs);
-}
-
-.link {
-  display: block;
-  width: 3em;
-  height: 3em;
-  background: none;
-  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow),
-    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
-      var(--color-shadow),
-    fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
-      var(--color-shadow),
-    0 0 0 0 var(--color-shadow);
-  transition: all 0.3s linear 0s;
-
-  &:hover,
-  &:focus {
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow),
-      fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1)
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4)
-        var(--color-shadow-light),
-      fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3)
-        var(--color-shadow);
-    transform: scale(1.15);
-  }
-
-  &:focus {
-    outline: var(--color-primary) dashed fun.convert-px(2);
-  }
-
-  &:active {
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    outline: none;
-    transform: scale(0.9);
-  }
-}
-
-:global {
-  [data-theme="dark"] {
-    :local {
-      .icon {
-        filter: brightness(0.85) contrast(1.1);
-      }
-    }
-  }
-}
diff --git a/src/components/Widgets/SocialMedia/SocialMedia.tsx b/src/components/Widgets/SocialMedia/SocialMedia.tsx
deleted file mode 100644
index decf657..0000000
--- a/src/components/Widgets/SocialMedia/SocialMedia.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import GithubIcon from '@assets/images/social-media/github.svg';
-import GitlabIcon from '@assets/images/social-media/gitlab.svg';
-import LinkedInIcon from '@assets/images/social-media/linkedin.svg';
-import TwitterIcon from '@assets/images/social-media/twitter.svg';
-import styles from './SocialMedia.module.scss';
-import { ExpandableWidget } from '@components/WidgetParts';
-import { useIntl } from 'react-intl';
-
-const SocialMedia = ({
-  title,
-  github = false,
-  gitlab = false,
-  linkedin = false,
-  twitter = false,
-}: {
-  title: string;
-  github?: boolean;
-  gitlab?: boolean;
-  linkedin?: boolean;
-  twitter?: boolean;
-}) => {
-  const intl = useIntl();
-
-  const websites = [
-    {
-      id: 'github',
-      name: intl.formatMessage({
-        defaultMessage: 'Github',
-        description: 'SocialMedia: Github',
-        id: 'SWjj4l',
-      }),
-      url: 'https://github.com/ArmandPhilippot',
-    },
-    {
-      id: 'gitlab',
-      name: intl.formatMessage({
-        defaultMessage: 'Gitlab',
-        description: 'SocialMedia: Gitlab',
-        id: 'obmlFh',
-      }),
-      url: 'https://gitlab.com/ArmandPhilippot',
-    },
-    {
-      id: 'linkedin',
-      name: intl.formatMessage({
-        defaultMessage: 'LinkedIn',
-        description: 'SocialMedia: LinkedIn',
-        id: 'VbcHZ4',
-      }),
-      url: 'https://www.linkedin.com/in/armandphilippot',
-    },
-    {
-      id: 'twitter',
-      name: intl.formatMessage({
-        defaultMessage: 'Twitter',
-        description: 'SocialMedia: Twitter',
-        id: 'IPs/Ck',
-      }),
-      url: 'https://twitter.com/ArmandPhilippot',
-    },
-  ];
-
-  const getIcon = (id: string) => {
-    switch (id) {
-      case 'github':
-        return <GithubIcon className={styles.icon} />;
-      case 'gitlab':
-        return <GitlabIcon className={styles.icon} />;
-      case 'linkedin':
-        return <LinkedInIcon className={styles.icon} />;
-      case 'twitter':
-        return <TwitterIcon className={styles.icon} />;
-      default:
-        break;
-    }
-  };
-
-  const shouldDisplayLink = (id: string) => {
-    switch (id) {
-      case 'github':
-        return github;
-      case 'gitlab':
-        return gitlab;
-      case 'linkedin':
-        return linkedin;
-      case 'twitter':
-        return twitter;
-      default:
-        break;
-    }
-  };
-
-  const items = websites.map((website) => {
-    return shouldDisplayLink(website.id) ? (
-      <li key={website.id}>
-        <a href={website.url} className={styles.link}>
-          {getIcon(website.id)}
-          <span className="screen-reader-text">{website.name}</span>
-        </a>
-      </li>
-    ) : (
-      ''
-    );
-  });
-
-  return (
-    <ExpandableWidget title={title} expand={true}>
-      <ul className={styles.list}>{items}</ul>
-    </ExpandableWidget>
-  );
-};
-
-export default SocialMedia;
diff --git a/src/components/Widgets/ThematicsList/ThematicsList.tsx b/src/components/Widgets/ThematicsList/ThematicsList.tsx
deleted file mode 100644
index 51254ee..0000000
--- a/src/components/Widgets/ThematicsList/ThematicsList.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import Spinner from '@components/Spinner/Spinner';
-import { ExpandableWidget, List } from '@components/WidgetParts';
-import { getAllThematics } from '@services/graphql/queries';
-import { TitleLevel } from '@ts/types/app';
-import { ThematicPreview } from '@ts/types/taxonomies';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
-import useSWR from 'swr';
-
-const ThematicsList = ({
-  title,
-  titleLevel,
-  initialData,
-}: {
-  title: string;
-  titleLevel?: TitleLevel;
-  initialData?: ThematicPreview[];
-}) => {
-  const intl = useIntl();
-  const router = useRouter();
-  const isThematic = () => router.asPath.includes('/thematique/');
-  const currentThematicSlug = isThematic()
-    ? router.asPath.replace('/thematique/', '')
-    : '';
-
-  const { data, error } = useSWR('/api/thematics', getAllThematics, {
-    fallbackData: initialData,
-  });
-
-  const getList = () => {
-    if (error)
-      return (
-        <ul>
-          {intl.formatMessage({
-            defaultMessage: 'Failed to load.',
-            description: 'ThematicsList: failed to load text',
-            id: 'PxMDzL',
-          })}
-        </ul>
-      );
-    if (!data)
-      return (
-        <ul>
-          <Spinner />
-        </ul>
-      );
-
-    const thematics = data.map((thematic) => {
-      return currentThematicSlug !== thematic.slug ? (
-        <li key={thematic.databaseId}>
-          <Link href={`/thematique/${thematic.slug}`}>
-            <a>{thematic.title}</a>
-          </Link>
-        </li>
-      ) : (
-        ''
-      );
-    });
-
-    return <List items={thematics} />;
-  };
-
-  return (
-    <ExpandableWidget
-      title={title}
-      titleLevel={titleLevel}
-      withBorders={true}
-      expand={true}
-    >
-      {getList()}
-    </ExpandableWidget>
-  );
-};
-
-export default ThematicsList;
diff --git a/src/components/Widgets/ToC/ToC.tsx b/src/components/Widgets/ToC/ToC.tsx
deleted file mode 100644
index 3f759db..0000000
--- a/src/components/Widgets/ToC/ToC.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ExpandableWidget, OrderedList } from '@components/WidgetParts';
-import { Heading } from '@ts/types/app';
-import useHeadingsTree from '@utils/hooks/useHeadingsTree';
-import { FormattedMessage, useIntl } from 'react-intl';
-
-const ToC = () => {
-  const intl = useIntl();
-  const headingsTree = useHeadingsTree('article');
-  const title = intl.formatMessage({
-    defaultMessage: 'Table of contents',
-    description: 'ToC: widget title',
-    id: 'Zg4L7U',
-  });
-
-  const getItems = (headings: Heading[]) => {
-    return headings.map((heading) => {
-      return (
-        <li key={heading.id}>
-          <a href={`#${heading.id}`}>
-            <FormattedMessage
-              defaultMessage="<a11y>Jump to </a11y>{title}"
-              description="ToC: link"
-              id="GgIWnN"
-              values={{
-                title: heading.title,
-                a11y: (chunks: string) => (
-                  <span className="screen-reader-text">{chunks}</span>
-                ),
-              }}
-            />
-          </a>
-          {heading.children.length > 0 && (
-            <OrderedList items={getItems(heading.children)} />
-          )}
-        </li>
-      );
-    });
-  };
-
-  return (
-    <ExpandableWidget title={title} kind="toc" expand={true} withBorders={true}>
-      <noscript>
-        {intl.formatMessage({
-          defaultMessage:
-            'Javascript is required to use the table of contents.',
-          description: 'ToC: noscript tag',
-          id: 'RZzx/4',
-        })}
-      </noscript>
-      <OrderedList items={getItems(headingsTree)} />
-    </ExpandableWidget>
-  );
-};
-
-export default ToC;
diff --git a/src/components/Widgets/TopicsList/TopicsList.tsx b/src/components/Widgets/TopicsList/TopicsList.tsx
deleted file mode 100644
index 7bc7d70..0000000
--- a/src/components/Widgets/TopicsList/TopicsList.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import Spinner from '@components/Spinner/Spinner';
-import { ExpandableWidget, List } from '@components/WidgetParts';
-import { getAllTopics } from '@services/graphql/queries';
-import { TitleLevel } from '@ts/types/app';
-import { TopicPreview } from '@ts/types/taxonomies';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
-import useSWR from 'swr';
-
-const TopicsList = ({
-  title,
-  titleLevel,
-  initialData,
-}: {
-  title: string;
-  titleLevel?: TitleLevel;
-  initialData?: TopicPreview[];
-}) => {
-  const intl = useIntl();
-  const router = useRouter();
-  const isTopic = () => router.asPath.includes('/sujet/');
-  const currentTopicSlug = isTopic()
-    ? router.asPath.replace('/sujet/', '')
-    : '';
-
-  const { data, error } = useSWR('/api/topics', getAllTopics, {
-    fallbackData: initialData,
-  });
-
-  const getList = () => {
-    if (error)
-      return (
-        <ul>
-          {intl.formatMessage({
-            defaultMessage: 'Failed to load.',
-            description: 'TopicsList: failed to load text',
-            id: '00Pf5p',
-          })}
-        </ul>
-      );
-    if (!data)
-      return (
-        <ul>
-          <Spinner />
-        </ul>
-      );
-
-    const topics = data.map((topic) => {
-      return currentTopicSlug !== topic.slug ? (
-        <li key={topic.databaseId}>
-          <Link href={`/sujet/${topic.slug}`}>
-            <a>{topic.title}</a>
-          </Link>
-        </li>
-      ) : (
-        ''
-      );
-    });
-
-    return <List items={topics} />;
-  };
-
-  return (
-    <ExpandableWidget
-      title={title}
-      titleLevel={titleLevel}
-      withBorders={true}
-      expand={true}
-    >
-      {getList()}
-    </ExpandableWidget>
-  );
-};
-
-export default TopicsList;
diff --git a/src/components/Widgets/index.tsx b/src/components/Widgets/index.tsx
deleted file mode 100644
index 8354449..0000000
--- a/src/components/Widgets/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import CVPreview from './CVPreview/CVPreview';
-import RecentPosts from './RecentPosts/RecentPosts';
-import RelatedThematics from './RelatedThematics/RelatedThematics';
-import RelatedTopics from './RelatedTopics/RelatedTopics';
-import Sharing from './Sharing/Sharing';
-import SocialMedia from './SocialMedia/SocialMedia';
-import ThematicsList from './ThematicsList/ThematicsList';
-import ToC from './ToC/ToC';
-import TopicsList from './TopicsList/TopicsList';
-
-export {
-  CVPreview,
-  RecentPosts,
-  RelatedThematics,
-  RelatedTopics,
-  Sharing,
-  SocialMedia,
-  ThematicsList,
-  ToC,
-  TopicsList,
-};
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
deleted file mode 100644
index 24c6951..0000000
--- a/src/pages/404.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { getLayout } from '@components/Layouts/Layout';
-import PostHeader from '@components/PostHeader/PostHeader';
-import styles from '@styles/pages/Page.module.scss';
-import { NextPageWithLayout } from '@ts/types/app';
-import { settings } from '@utils/config';
-import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import Link from 'next/link';
-import { FormattedMessage, useIntl } from 'react-intl';
-
-const Error404: NextPageWithLayout = () => {
-  const intl = useIntl();
-
-  const pageTitle = intl.formatMessage(
-    {
-      defaultMessage: 'Error 404: Page not found - {websiteName}',
-      description: '404Page: SEO - Page title',
-      id: '310o3F',
-    },
-    { websiteName: settings.name }
-  );
-  const pageDescription = intl.formatMessage({
-    defaultMessage: 'Page not found.',
-    description: '404Page: SEO - Meta description',
-    id: '48Ww//',
-  });
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-        <meta name="description" content={pageDescription} />
-      </Head>
-      <div className={`${styles.article} ${styles['article--no-comments']}`}>
-        <PostHeader
-          title={intl.formatMessage({
-            defaultMessage: 'Page not found',
-            description: '404Page: page title',
-            id: 'OccTWi',
-          })}
-        />
-        <div className={styles.body}>
-          <FormattedMessage
-            defaultMessage="Sorry, it seems that the page your are looking for does not exist. If you think this path should work, feel free to <link>contact me</link> with the necessary information so that I can fix the problem."
-            description="404Page: page body"
-            id="ZWh78Y"
-            values={{
-              link: (chunks: string) => (
-                <Link href="/contact/">
-                  <a>{chunks}</a>
-                </Link>
-              ),
-            }}
-          />
-        </div>
-      </div>
-    </>
-  );
-};
-
-Error404.getLayout = getLayout;
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const intl = await getIntlInstance();
-  const breadcrumbTitle = intl.formatMessage({
-    defaultMessage: 'Error 404',
-    description: '404Page: breadcrumb item',
-    id: 'ywkCsK',
-  });
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-
-  return {
-    props: {
-      breadcrumbTitle,
-      locale,
-      translation,
-    },
-  };
-};
-
-export default Error404;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 84c2469..939b337 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,17 +1,16 @@
-import { AppPropsWithLayout } from '@ts/types/app';
 import { settings } from '@utils/config';
 import { AckeeProvider } from '@utils/providers/ackee';
 import { PrismThemeProvider } from '@utils/providers/prism-theme';
 import { ThemeProvider } from 'next-themes';
+import { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
 import { IntlProvider } from 'react-intl';
 import '../styles/globals.scss';
 
-const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
+const App = ({ Component, pageProps }: AppProps) => {
   const { locale, defaultLocale } = useRouter();
   const appLocale: string = locale || settings.locales.defaultLocale;
 
-  const getLayout = Component.getLayout ?? ((page) => page);
   return (
     <AckeeProvider domain={settings.ackee.url} siteId={settings.ackee.siteId}>
       <IntlProvider
@@ -25,7 +24,7 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
           enableSystem={true}
         >
           <PrismThemeProvider>
-            {getLayout(<Component {...pageProps} />)}
+            <Component {...pageProps} />
           </PrismThemeProvider>
         </ThemeProvider>
       </IntlProvider>
@@ -33,4 +32,4 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
   );
 };
 
-export default MyApp;
+export default App;
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
deleted file mode 100644
index 27a6f7b..0000000
--- a/src/pages/article/[slug].tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import CommentForm from '@components/CommentForm/CommentForm';
-import CommentsList from '@components/CommentsList/CommentsList';
-import { getLayout } from '@components/Layouts/Layout';
-import PostFooter from '@components/PostFooter/PostFooter';
-import PostHeader from '@components/PostHeader/PostHeader';
-import Sidebar from '@components/Sidebar/Sidebar';
-import Spinner from '@components/Spinner/Spinner';
-import { Sharing, ToC } from '@components/Widgets';
-import {
-  getAllPostsSlug,
-  getCommentsByPostId,
-  getPostBySlug,
-} from '@services/graphql/queries';
-import styles from '@styles/pages/Page.module.scss';
-import { NextPageWithLayout } from '@ts/types/app';
-import { ArticleMeta, ArticleProps } from '@ts/types/articles';
-import { PrismDefaultPlugins, PrismPlugins } from '@ts/types/prism';
-import { settings } from '@utils/config';
-import { getFormattedPaths } from '@utils/helpers/format';
-import { loadTranslation } from '@utils/helpers/i18n';
-import { addPrismClasses } from '@utils/helpers/prism';
-import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import Prism from 'prismjs';
-import { ParsedUrlQuery } from 'querystring';
-import { useCallback, useEffect, useMemo } from 'react';
-import { useIntl } from 'react-intl';
-import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts';
-
-const SingleArticle: NextPageWithLayout<ArticleProps> = ({
-  comments,
-  post,
-}) => {
-  const intl = useIntl();
-  const router = useRouter();
-
-  const loadPrismPlugins = useCallback(
-    async (prismPlugins: (PrismDefaultPlugins | PrismPlugins)[]) => {
-      for (const plugin of prismPlugins) {
-        try {
-          if (plugin === 'color-scheme') {
-            await import(`@utils/plugins/prism-${plugin}`);
-          } else {
-            await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`);
-
-            if (plugin === 'autoloader')
-              Prism.plugins.autoloader.languages_path = '/prism/';
-          }
-        } catch (error) {
-          console.error('Article: an error occurred with Prism.');
-          console.error(error);
-        }
-      }
-    },
-    []
-  );
-
-  const plugins: (PrismDefaultPlugins | PrismPlugins)[] = useMemo(
-    () => [
-      'autoloader',
-      'toolbar',
-      'show-language',
-      'copy-to-clipboard',
-      'color-scheme',
-      'command-line',
-      'line-numbers',
-      'match-braces',
-      'normalize-whitespace',
-    ],
-    []
-  );
-
-  useEffect(() => {
-    loadPrismPlugins(plugins).then(() => {
-      addPrismClasses();
-      Prism.highlightAll();
-    });
-  }, [plugins, loadPrismPlugins]);
-
-  if (router.isFallback) return <Spinner />;
-
-  const {
-    author,
-    commentCount,
-    content,
-    databaseId,
-    dates,
-    featuredImage,
-    info,
-    intro,
-    seo,
-    topics,
-    thematics,
-    title,
-  } = post;
-
-  const meta: ArticleMeta = {
-    author,
-    commentCount: commentCount || undefined,
-    dates,
-    readingTime: info.readingTime,
-    thematics,
-    wordsCount: info.wordsCount,
-  };
-
-  const articleUrl = `${settings.url}${router.asPath}`;
-
-  const webpageSchema: WebPage = {
-    '@id': `${articleUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
-    lastReviewed: dates.update,
-    name: seo.title,
-    description: seo.metaDesc,
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${articleUrl}`,
-    isPartOf: {
-      '@id': `${settings.url}`,
-    },
-  };
-
-  const blogSchema: Blog = {
-    '@id': `${settings.url}/#blog`,
-    '@type': 'Blog',
-    blogPost: { '@id': `${settings.url}/#article` },
-    isPartOf: {
-      '@id': `${articleUrl}`,
-    },
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-  };
-
-  const publicationDate = new Date(dates.publication);
-  const updateDate = new Date(dates.update);
-
-  const blogPostSchema: BlogPosting = {
-    '@id': `${settings.url}/#article`,
-    '@type': 'BlogPosting',
-    name: title,
-    description: intro,
-    articleBody: content,
-    author: { '@id': `${settings.url}/#branding` },
-    commentCount: commentCount || undefined,
-    copyrightYear: publicationDate.getFullYear(),
-    creator: { '@id': `${settings.url}/#branding` },
-    dateCreated: publicationDate.toISOString(),
-    dateModified: updateDate.toISOString(),
-    datePublished: publicationDate.toISOString(),
-    discussionUrl: `${articleUrl}/#comments`,
-    editor: { '@id': `${settings.url}/#branding` },
-    headline: title,
-    image: featuredImage?.sourceUrl,
-    inLanguage: settings.locales.defaultLocale,
-    isPartOf: {
-      '@id': `${settings.url}/blog`,
-    },
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${articleUrl}` },
-    thumbnailUrl: featuredImage?.sourceUrl,
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, blogSchema, blogPostSchema],
-  };
-
-  const copyText = intl.formatMessage({
-    defaultMessage: 'Copy',
-    description: 'Prism: copy button text (no clicked)',
-    id: '/ly3AC',
-  });
-  const copiedText = intl.formatMessage({
-    defaultMessage: 'Copied!',
-    description: 'Prism: copy button text (clicked)',
-    id: 'OV9r1K',
-  });
-  const errorText = intl.formatMessage({
-    defaultMessage: 'Use Ctrl+c to copy',
-    description: 'Prism: error text',
-    id: 'z9qkcQ',
-  });
-  const darkTheme = intl.formatMessage({
-    defaultMessage: 'Dark Theme 🌙',
-    description: 'Prism: toggle dark theme button text',
-    id: 'nFMdWI',
-  });
-  const lightTheme = intl.formatMessage({
-    defaultMessage: 'Light Theme 🌞',
-    description: 'Prism: toggle light theme button text',
-    id: 'Ua2g2p',
-  });
-
-  return (
-    <>
-      <Head>
-        <title>{seo.title}</title>
-        <meta name="description" content={seo.metaDesc} />
-        <meta property="og:url" content={`${articleUrl}`} />
-        <meta property="og:type" content="article" />
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={intro} />
-        <meta property="og:image" content={featuredImage?.sourceUrl} />
-        <meta property="og:image:alt" content={featuredImage?.altText} />
-      </Head>
-      <Script
-        id="schema-article"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article
-        id="article"
-        className={styles.article}
-        data-prismjs-copy={copyText}
-        data-prismjs-copy-success={copiedText}
-        data-prismjs-copy-error={errorText}
-        data-prismjs-color-scheme-dark={darkTheme}
-        data-prismjs-color-scheme-light={lightTheme}
-      >
-        <PostHeader intro={intro} meta={meta} title={title} />
-        <Sidebar
-          position="left"
-          ariaLabel={intl.formatMessage({
-            defaultMessage: 'Table of Contents',
-            description: 'ArticlePage: ToC sidebar aria-label',
-            id: '9nhYRA',
-          })}
-        >
-          <ToC />
-        </Sidebar>
-        <div
-          className={styles.body}
-          dangerouslySetInnerHTML={{ __html: content }}
-        ></div>
-        <PostFooter topics={topics} />
-        <Sidebar
-          position="right"
-          ariaLabel={intl.formatMessage({
-            defaultMessage: 'Sidebar',
-            description: 'ArticlePage: right sidebar aria-label',
-            id: 'JeYOeA',
-          })}
-        >
-          <Sharing title={title} excerpt={intro} />
-        </Sidebar>
-        <section id="comments" className={styles.comments}>
-          <CommentsList articleId={databaseId} comments={comments} />
-          <CommentForm articleId={databaseId} />
-        </section>
-      </article>
-    </>
-  );
-};
-
-SingleArticle.getLayout = getLayout;
-
-interface PostParams extends ParsedUrlQuery {
-  slug: string;
-}
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-  const { slug } = context.params as PostParams;
-  const post = await getPostBySlug(slug);
-  const comments = await getCommentsByPostId(post.databaseId);
-  const breadcrumbTitle = post.title;
-
-  return {
-    props: {
-      breadcrumbTitle,
-      comments,
-      post,
-      translation,
-    },
-  };
-};
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  const allSlugs = await getAllPostsSlug();
-  const paths = getFormattedPaths(allSlugs);
-
-  return {
-    paths,
-    fallback: true,
-  };
-};
-
-export default SingleArticle;
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
deleted file mode 100644
index b5ced07..0000000
--- a/src/pages/blog/index.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-import { Button } from '@components/Buttons';
-import { getLayout } from '@components/Layouts/Layout';
-import Pagination from '@components/Pagination/Pagination';
-import PaginationCursor from '@components/PaginationCursor/PaginationCursor';
-import PostHeader from '@components/PostHeader/PostHeader';
-import PostsList from '@components/PostsList/PostsList';
-import Sidebar from '@components/Sidebar/Sidebar';
-import Spinner from '@components/Spinner/Spinner';
-import { ThematicsList, TopicsList } from '@components/Widgets';
-import {
-  getAllThematics,
-  getAllTopics,
-  getPostsTotal,
-  getPublishedPosts,
-} from '@services/graphql/queries';
-import styles from '@styles/pages/Page.module.scss';
-import { NextPageWithLayout } from '@ts/types/app';
-import { BlogPageProps, PostsList as PostsListData } from '@ts/types/blog';
-import { settings } from '@utils/config';
-import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useEffect, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { Blog as BlogSchema, Graph, WebPage } from 'schema-dts';
-import useSWRInfinite from 'swr/infinite';
-
-const Blog: NextPageWithLayout<BlogPageProps> = ({
-  allThematics,
-  allTopics,
-  posts,
-  totalPosts,
-}) => {
-  const intl = useIntl();
-  const lastPostRef = useRef<HTMLSpanElement>(null);
-  const router = useRouter();
-  const [isMounted, setIsMounted] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (typeof window !== undefined) setIsMounted(true);
-  }, []);
-
-  const getKey = (pageIndex: number, previousData: PostsListData) => {
-    if (previousData && !previousData.posts) return null;
-
-    return pageIndex === 0
-      ? { first: settings.postsPerPage }
-      : {
-          first: settings.postsPerPage,
-          after: previousData.pageInfo.endCursor,
-        };
-  };
-
-  const { data, error, size, setSize } = useSWRInfinite(
-    getKey,
-    getPublishedPosts,
-    { fallbackData: [posts] }
-  );
-  const [totalPostsCount, setTotalPostsCount] = useState<number>(totalPosts);
-
-  useEffect(() => {
-    if (data) setTotalPostsCount(data[0].pageInfo.total);
-  }, [data]);
-
-  const [loadedPostsCount, setLoadedPostsCount] = useState<number>(
-    settings.postsPerPage
-  );
-
-  useEffect(() => {
-    if (data && data.length > 0) {
-      const newCount =
-        settings.postsPerPage +
-        data[0].pageInfo.total -
-        data[data.length - 1].pageInfo.total;
-      setLoadedPostsCount(newCount);
-    }
-  }, [data]);
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore: boolean =
-    isLoadingInitialData ||
-    (size > 0 && data !== undefined && typeof data[size - 1] === 'undefined');
-
-  const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage;
-
-  const loadMorePosts = () => {
-    if (lastPostRef.current) {
-      lastPostRef.current.focus();
-    }
-    setSize(size + 1);
-  };
-
-  const getPostsList = () => {
-    if (error)
-      return intl.formatMessage({
-        defaultMessage: 'Failed to load.',
-        description: 'BlogPage: failed to load text',
-        id: 'C/XGkH',
-      });
-    if (!data) return <Spinner />;
-
-    return <PostsList ref={lastPostRef} data={data} showYears={true} />;
-  };
-
-  const pageTitle = intl.formatMessage(
-    {
-      defaultMessage: 'Blog: development, open source - {websiteName}',
-      description: 'BlogPage: SEO - Page title',
-      id: '+Y+tLK',
-    },
-    { websiteName: settings.name }
-  );
-  const pageDescription = intl.formatMessage(
-    {
-      defaultMessage:
-        "Discover {websiteName}'s writings. He talks about web development, Linux and open source mostly.",
-      description: 'BlogPage: SEO - Meta description',
-      id: '18h/t0',
-    },
-    { websiteName: settings.name }
-  );
-  const pageUrl = `${settings.url}${router.asPath}`;
-
-  const webpageSchema: WebPage = {
-    '@id': `${pageUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
-    name: pageTitle,
-    description: pageDescription,
-    inLanguage: settings.locales.defaultLocale,
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${settings.url}`,
-    isPartOf: {
-      '@id': `${settings.url}`,
-    },
-  };
-
-  const blogSchema: BlogSchema = {
-    '@id': `${settings.url}/#blog`,
-    '@type': 'Blog',
-    author: { '@id': `${settings.url}/#branding` },
-    creator: { '@id': `${settings.url}/#branding` },
-    editor: { '@id': `${settings.url}/#branding` },
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${pageUrl}` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, blogSchema],
-  };
-
-  const title = intl.formatMessage({
-    defaultMessage: 'Blog',
-    description: 'BlogPage: page title',
-    id: '7TbbIk',
-  });
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-        <meta name="description" content={pageDescription} />
-        <meta property="og:url" content={`${pageUrl}`} />
-        <meta property="og:type" content="website" />
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={pageDescription} />
-      </Head>
-      <Script
-        id="schema-blog"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article
-        id="blog"
-        className={`${styles.article} ${styles['article--no-comments']}`}
-      >
-        <PostHeader title={title} meta={{ results: totalPostsCount }} />
-        <div className={styles.body}>
-          {getPostsList()}
-          {hasNextPage &&
-            (isMounted ? (
-              <>
-                <PaginationCursor
-                  current={loadedPostsCount}
-                  total={totalPostsCount}
-                />
-                <Button
-                  isDisabled={isLoadingMore}
-                  clickHandler={loadMorePosts}
-                  position="center"
-                  spacing={true}
-                >
-                  {intl.formatMessage({
-                    defaultMessage: 'Load more?',
-                    description: 'BlogPage: load more text',
-                    id: 'Kqq2cm',
-                  })}
-                </Button>
-              </>
-            ) : (
-              <Pagination baseUrl="/blog" total={totalPostsCount} />
-            ))}
-        </div>
-        <Sidebar
-          position="right"
-          title={intl.formatMessage({
-            defaultMessage: 'Filter by:',
-            description: 'BlogPage: sidebar title',
-            id: 'KERk7L',
-          })}
-        >
-          <ThematicsList
-            initialData={allThematics}
-            title={intl.formatMessage({
-              defaultMessage: 'Thematics',
-              description: 'BlogPage: thematics list widget title',
-              id: 'HriY57',
-            })}
-          />
-          <TopicsList
-            initialData={allTopics}
-            title={intl.formatMessage({
-              defaultMessage: 'Topics',
-              description: 'BlogPage: topics list widget title',
-              id: '2D9tB5',
-            })}
-          />
-        </Sidebar>
-      </article>
-    </>
-  );
-};
-
-Blog.getLayout = getLayout;
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const intl = await getIntlInstance();
-  const breadcrumbTitle = intl.formatMessage({
-    defaultMessage: 'Blog',
-    description: 'BlogPage: breadcrumb item',
-    id: 'R0eDmw',
-  });
-  const firstPosts = await getPublishedPosts({ first: settings.postsPerPage });
-  const totalPosts = await getPostsTotal();
-  const allThematics = await getAllThematics();
-  const allTopics = await getAllTopics();
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-
-  return {
-    props: {
-      allThematics,
-      allTopics,
-      breadcrumbTitle,
-      locale,
-      posts: firstPosts,
-      totalPosts,
-      translation,
-    },
-  };
-};
-
-export default Blog;
diff --git a/src/pages/blog/page/[id].tsx b/src/pages/blog/page/[id].tsx
deleted file mode 100644
index 6c4d2f8..0000000
--- a/src/pages/blog/page/[id].tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-import { getLayout } from '@components/Layouts/Layout';
-import Pagination from '@components/Pagination/Pagination';
-import PostHeader from '@components/PostHeader/PostHeader';
-import PostsList from '@components/PostsList/PostsList';
-import Sidebar from '@components/Sidebar/Sidebar';
-import { ThematicsList, TopicsList } from '@components/Widgets';
-import {
-  getAllThematics,
-  getAllTopics,
-  getEndCursor,
-  getPostsTotal,
-  getPublishedPosts,
-} from '@services/graphql/queries';
-import { NextPageWithLayout } from '@ts/types/app';
-import { BlogPageProps } from '@ts/types/blog';
-import { settings } from '@utils/config';
-import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useIntl } from 'react-intl';
-import { Blog, Graph, WebPage } from 'schema-dts';
-import styles from '@styles/pages/Page.module.scss';
-import { getFormattedPageNumbers } from '@utils/helpers/format';
-import { useEffect } from 'react';
-import Spinner from '@components/Spinner/Spinner';
-
-const BlogPage: NextPageWithLayout<BlogPageProps> = ({
-  allThematics,
-  allTopics,
-  posts,
-  totalPosts,
-}) => {
-  const intl = useIntl();
-  const router = useRouter();
-  const pageNumber = Number(router.query.id);
-
-  useEffect(() => {
-    if (router.query.id === '1') router.push('/blog');
-  }, [router]);
-
-  if (router.isFallback) return <Spinner />;
-
-  const pageTitle = intl.formatMessage(
-    {
-      defaultMessage: 'Blog - Page {number} - {websiteName}',
-      description: 'BlogPage: SEO - Page title',
-      id: '8w+jnD',
-    },
-    { number: pageNumber, websiteName: settings.name }
-  );
-  const pageDescription = intl.formatMessage(
-    {
-      defaultMessage:
-        "Discover {websiteName}'s writings. He talks about web development, Linux and open source mostly.",
-      description: 'BlogPage: SEO - Meta description',
-      id: '18h/t0',
-    },
-    { websiteName: settings.name }
-  );
-  const pageUrl = `${settings.url}${router.asPath}`;
-
-  const webpageSchema: WebPage = {
-    '@id': `${pageUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
-    name: pageTitle,
-    description: pageDescription,
-    inLanguage: settings.locales.defaultLocale,
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${settings.url}`,
-    isPartOf: {
-      '@id': `${settings.url}`,
-    },
-  };
-
-  const blogSchema: Blog = {
-    '@id': `${settings.url}/#blog`,
-    '@type': 'Blog',
-    author: { '@id': `${settings.url}/#branding` },
-    creator: { '@id': `${settings.url}/#branding` },
-    editor: { '@id': `${settings.url}/#branding` },
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${pageUrl}` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, blogSchema],
-  };
-
-  const title = intl.formatMessage({
-    defaultMessage: 'Blog',
-    description: 'BlogPage: page title',
-    id: '7TbbIk',
-  });
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-        <meta name="description" content={pageDescription} />
-        <meta property="og:url" content={`${pageUrl}`} />
-        <meta property="og:type" content="website" />
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={pageDescription} />
-      </Head>
-      <Script
-        id="schema-blog"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article
-        id="blog"
-        className={`${styles.article} ${styles['article--no-comments']}`}
-      >
-        <PostHeader title={title} meta={{ results: totalPosts }} />
-        <div className={styles.body}>
-          <PostsList data={[posts]} showYears={true} />
-          <Pagination baseUrl="/blog" total={totalPosts} />
-        </div>
-        <Sidebar
-          position="right"
-          title={intl.formatMessage({
-            defaultMessage: 'Filter by:',
-            description: 'BlogPage: sidebar title',
-            id: 'KERk7L',
-          })}
-        >
-          <ThematicsList
-            initialData={allThematics}
-            title={intl.formatMessage({
-              defaultMessage: 'Thematics',
-              description: 'BlogPage: thematics list widget title',
-              id: 'HriY57',
-            })}
-          />
-          <TopicsList
-            initialData={allTopics}
-            title={intl.formatMessage({
-              defaultMessage: 'Topics',
-              description: 'BlogPage: topics list widget title',
-              id: '2D9tB5',
-            })}
-          />
-        </Sidebar>
-      </article>
-    </>
-  );
-};
-
-BlogPage.getLayout = getLayout;
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const intl = await getIntlInstance();
-  const breadcrumbTitle = intl.formatMessage({
-    defaultMessage: 'Blog',
-    description: 'BlogPage: breadcrumb item',
-    id: 'R0eDmw',
-  });
-  const { locale, params } = context;
-  const queriedPageNumber = params ? Number(params.id) : 1;
-  const queriedPostsNumber = settings.postsPerPage * queriedPageNumber;
-  const endCursor =
-    queriedPostsNumber === 1
-      ? undefined
-      : await getEndCursor({ first: queriedPostsNumber });
-  const posts = await getPublishedPosts({
-    first: settings.postsPerPage,
-    after: endCursor,
-  });
-  const totalPosts = await getPostsTotal();
-  const allThematics = await getAllThematics();
-  const allTopics = await getAllTopics();
-  const translation = await loadTranslation(locale);
-
-  return {
-    props: {
-      allThematics,
-      allTopics,
-      breadcrumbTitle,
-      locale,
-      posts,
-      totalPosts,
-      translation,
-    },
-  };
-};
-
-export default BlogPage;
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  const totalPosts = await getPostsTotal();
-  const totalPages = Math.floor(totalPosts / settings.postsPerPage);
-  const paths = getFormattedPageNumbers(totalPages);
-
-  return {
-    paths,
-    fallback: true,
-  };
-};
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
deleted file mode 100644
index 5934dd9..0000000
--- a/src/pages/contact.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import ContactForm from '@components/ContactForm/ContactForm';
-import { getLayout } from '@components/Layouts/Layout';
-import PostHeader from '@components/PostHeader/PostHeader';
-import Sidebar from '@components/Sidebar/Sidebar';
-import { SocialMedia } from '@components/Widgets';
-import styles from '@styles/pages/Page.module.scss';
-import { NextPageWithLayout } from '@ts/types/app';
-import { settings } from '@utils/config';
-import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useIntl } from 'react-intl';
-import { ContactPage as ContactPageSchema, Graph, WebPage } from 'schema-dts';
-
-const ContactPage: NextPageWithLayout = () => {
-  const intl = useIntl();
-  const router = useRouter();
-
-  const pageTitle = intl.formatMessage(
-    {
-      defaultMessage: 'Contact form - {websiteName}',
-      description: 'ContactPage: SEO - Page title',
-      id: 'Y3qRib',
-    },
-    { websiteName: settings.name }
-  );
-  const pageDescription = intl.formatMessage(
-    {
-      defaultMessage:
-        "Contact {websiteName} through its website. All you need to do it's to fill the contact form.",
-      description: 'ContactPage: SEO - Meta description',
-      id: 'OIffB4',
-    },
-    { websiteName: settings.name }
-  );
-  const pageUrl = `${settings.url}${router.asPath}`;
-  const title = intl.formatMessage({
-    defaultMessage: 'Contact',
-    description: 'ContactPage: page title',
-    id: 'AN9iy7',
-  });
-  const intro = intl.formatMessage({
-    defaultMessage: 'Please fill the form to contact me.',
-    description: 'ContactPage: page introduction',
-    id: '8Ls2mD',
-  });
-
-  const webpageSchema: WebPage = {
-    '@id': `${pageUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
-    name: pageTitle,
-    description: pageDescription,
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${pageUrl}`,
-    isPartOf: {
-      '@id': `${settings.url}`,
-    },
-  };
-
-  const contactSchema: ContactPageSchema = {
-    '@id': `${settings.url}/#contact`,
-    '@type': 'ContactPage',
-    name: title,
-    description: intro,
-    author: { '@id': `${settings.url}/#branding` },
-    creator: { '@id': `${settings.url}/#branding` },
-    editor: { '@id': `${settings.url}/#branding` },
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${pageUrl}` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, contactSchema],
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-        <meta name="description" content={pageDescription} />
-        <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-contact"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article
-        id="contact"
-        className={`${styles.article} ${styles['article--no-comments']}`}
-      >
-        <PostHeader title={title} intro={intro} />
-        <div className={styles.body}>
-          <p>
-            {intl.formatMessage({
-              defaultMessage: 'All fields marked with * are required.',
-              description: 'ContactPage: required fields text',
-              id: 'txusHd',
-            })}
-          </p>
-          <ContactForm />
-        </div>
-        <Sidebar position="right">
-          <SocialMedia
-            title={intl.formatMessage({
-              defaultMessage: 'Find me elsewhere',
-              description: 'ContactPage: social media widget title',
-              id: 'Qh2CwH',
-            })}
-            github={true}
-            gitlab={true}
-            linkedin={true}
-          />
-        </Sidebar>
-      </article>
-    </>
-  );
-};
-
-ContactPage.getLayout = getLayout;
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const intl = await getIntlInstance();
-  const breadcrumbTitle = intl.formatMessage({
-    defaultMessage: 'Contact',
-    description: 'ContactPage: breadcrumb item',
-    id: 'CzTbM4',
-  });
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-
-  return {
-    props: {
-      breadcrumbTitle,
-      locale,
-      translation,
-    },
-  };
-};
-
-export default ContactPage;
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
deleted file mode 100644
index 71eb449..0000000
--- a/src/pages/cv.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import { getLayout } from '@components/Layouts/Layout';
-import PostHeader from '@components/PostHeader/PostHeader';
-import Sidebar from '@components/Sidebar/Sidebar';
-import { CVPreview, SocialMedia, ToC } from '@components/Widgets';
-import CVContent, { intro, meta, pdf, image } from '@content/pages/cv.mdx';
-import styles from '@styles/pages/Page.module.scss';
-import { NextPageWithLayout } from '@ts/types/app';
-import { ArticleMeta } from '@ts/types/articles';
-import { settings } from '@utils/config';
-import { loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useIntl } from 'react-intl';
-import { AboutPage, Graph, WebPage } from 'schema-dts';
-
-const CV: NextPageWithLayout = () => {
-  const intl = useIntl();
-  const router = useRouter();
-  const dates = {
-    publication: meta.publishedOn,
-    update: meta.updatedOn,
-  };
-
-  const pageMeta: ArticleMeta = {
-    dates,
-  };
-  const pageUrl = `${settings.url}${router.asPath}`;
-  const pageTitle = intl.formatMessage(
-    {
-      defaultMessage: 'CV Front-end developer - {websiteName}',
-      description: 'CVPage: SEO - Page title',
-      id: 'Y1ZdJ6',
-    },
-    { websiteName: settings.name }
-  );
-  const pageDescription = intl.formatMessage(
-    {
-      defaultMessage:
-        'Discover the curriculum of {websiteName}, front-end developer located in France: skills, experiences and training.',
-      description: 'CVPage: SEO - Meta description',
-      id: 'bBdMGm',
-    },
-    { websiteName: settings.name }
-  );
-
-  const webpageSchema: WebPage = {
-    '@id': `${pageUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
-    name: pageTitle,
-    description: pageDescription,
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${pageUrl}`,
-    isPartOf: {
-      '@id': `${settings.url}`,
-    },
-  };
-
-  const publicationDate = new Date(dates.publication);
-  const updateDate = new Date(dates.update);
-
-  const cvSchema: AboutPage = {
-    '@id': `${settings.url}/#cv`,
-    '@type': 'AboutPage',
-    name: pageTitle,
-    description: intro,
-    author: { '@id': `${settings.url}/#branding` },
-    creator: { '@id': `${settings.url}/#branding` },
-    dateCreated: publicationDate.toISOString(),
-    dateModified: updateDate.toISOString(),
-    datePublished: publicationDate.toISOString(),
-    editor: { '@id': `${settings.url}/#branding` },
-    image,
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    thumbnailUrl: image,
-    mainEntityOfPage: { '@id': `${pageUrl}` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, cvSchema],
-  };
-
-  const title = intl.formatMessage(
-    {
-      defaultMessage: "{name}'s CV",
-      description: 'CVPage: page title',
-      id: 'Mj2BQf',
-    },
-    { name: settings.name }
-  );
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-        <meta name="description" content={pageDescription} />
-        <meta property="og:url" content={`${pageUrl}`} />
-        <meta property="og:type" content="article" />
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={intro} />
-        <meta property="og:image" content={image} />
-        <meta property="og:image:alt" content={title} />
-      </Head>
-      <Script
-        id="schema-cv"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article
-        id="cv"
-        className={`${styles.article} ${styles['article--no-comments']}`}
-      >
-        <PostHeader intro={intro} meta={pageMeta} title={meta.title} />
-        <Sidebar
-          position="left"
-          ariaLabel={intl.formatMessage({
-            defaultMessage: 'Table of Contents',
-            description: 'CVPage: ToC sidebar aria-label',
-            id: 'g4DckL',
-          })}
-        >
-          <ToC />
-        </Sidebar>
-        <div className={styles.body}>
-          <CVContent />
-        </div>
-        <Sidebar
-          position="right"
-          ariaLabel={intl.formatMessage({
-            defaultMessage: 'Sidebar',
-            description: 'CVPage: right sidebar aria-label',
-            id: 'QHOm5t',
-          })}
-        >
-          <CVPreview
-            title={intl.formatMessage({
-              defaultMessage: 'Others formats',
-              description: 'CVPage: cv preview widget title',
-              id: 'B9OCyV',
-            })}
-            imgSrc={image}
-            pdf={pdf}
-          />
-          <SocialMedia
-            title={intl.formatMessage({
-              defaultMessage: 'Open-source projects',
-              description: 'CVPage: social media widget title',
-              id: '+Dre5J',
-            })}
-            github={true}
-            gitlab={true}
-          />
-        </Sidebar>
-      </article>
-    </>
-  );
-};
-
-CV.getLayout = getLayout;
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const breadcrumbTitle = meta.title;
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-
-  return {
-    props: {
-      breadcrumbTitle,
-      locale,
-      translation,
-    },
-  };
-};
-
-export default CV;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
deleted file mode 100644
index ca0a809..0000000
--- a/src/pages/index.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import FeedIcon from '@assets/images/icon-feed.svg';
-import { ButtonLink } from '@components/Buttons';
-import { ContactIcon } from '@components/Icons';
-import Layout from '@components/Layouts/Layout';
-import { ResponsiveImage } from '@components/MDX';
-import { RecentPosts } from '@components/Widgets';
-import HomePageContent from '@content/pages/homepage.mdx';
-import { getPublishedPosts } from '@services/graphql/queries';
-import styles from '@styles/pages/Home.module.scss';
-import { NextPageWithLayout, ResponsiveImageProps } from '@ts/types/app';
-import { PostsList } from '@ts/types/blog';
-import { settings } from '@utils/config';
-import { loadTranslation } from '@utils/helpers/i18n';
-import { NestedMDXComponents } from 'mdx/types';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import Script from 'next/script';
-import type { ReactElement } from 'react';
-import { useIntl } from 'react-intl';
-import { Graph, WebPage } from 'schema-dts';
-
-type HomePageProps = {
-  recentPosts: PostsList;
-};
-
-const Home: NextPageWithLayout<HomePageProps> = ({
-  recentPosts,
-}: {
-  recentPosts: PostsList;
-}) => {
-  const intl = useIntl();
-
-  const CodingLinks = () => {
-    return (
-      <ul className={styles['links-list']}>
-        <li>
-          <ButtonLink target="/thematique/developpement-web">
-            {intl.formatMessage({
-              defaultMessage: 'Web development',
-              description: 'HomePage: link to web development thematic',
-              id: 'vkF/RP',
-            })}
-          </ButtonLink>
-        </li>
-        <li>
-          <ButtonLink target="/projets">
-            {intl.formatMessage({
-              defaultMessage: 'Projects',
-              description: 'HomePage: link to projects',
-              id: 'N44SOc',
-            })}
-          </ButtonLink>
-        </li>
-      </ul>
-    );
-  };
-
-  const ColdarkRepos = () => {
-    return (
-      <ul className={styles['links-list']}>
-        <li>
-          <ButtonLink
-            target="https://github.com/ArmandPhilippot/coldark"
-            isExternal={true}
-          >
-            Github
-          </ButtonLink>
-        </li>
-        <li>
-          <ButtonLink
-            target="https://gitlab.com/ArmandPhilippot/coldark"
-            isExternal={true}
-          >
-            Gitlab
-          </ButtonLink>
-        </li>
-      </ul>
-    );
-  };
-
-  const LibreLinks = () => {
-    return (
-      <ul className={styles['links-list']}>
-        <li>
-          <ButtonLink target="/thematique/libre">
-            {intl.formatMessage({
-              defaultMessage: 'Free',
-              description: 'HomePage: link to free thematic',
-              id: 'w8GrOf',
-            })}
-          </ButtonLink>
-        </li>
-        <li>
-          <ButtonLink target="/thematique/linux">
-            {intl.formatMessage({
-              defaultMessage: 'Linux',
-              description: 'HomePage: link to Linux thematic',
-              id: 'jASD7k',
-            })}
-          </ButtonLink>
-        </li>
-      </ul>
-    );
-  };
-
-  const ShaarliLink = () => {
-    return (
-      <ul className={styles['links-list']}>
-        <li>
-          <ButtonLink target="https://shaarli.armandphilippot.com/">
-            {intl.formatMessage({
-              defaultMessage: 'Shaarli',
-              description: 'HomePage: link to Shaarli',
-              id: 'i5L19t',
-            })}
-          </ButtonLink>
-        </li>
-      </ul>
-    );
-  };
-
-  const MoreLinks = () => {
-    return (
-      <ul className={styles['links-list']}>
-        <li>
-          <ButtonLink target="/contact">
-            <ContactIcon />
-            {intl.formatMessage({
-              defaultMessage: 'Contact me',
-              description: 'HomePage: contact button text',
-              id: 'sO/Iwj',
-            })}
-          </ButtonLink>
-        </li>
-        <li>
-          <ButtonLink target="/feed">
-            <FeedIcon className={styles['icon--feed']} />
-            {intl.formatMessage({
-              defaultMessage: 'Subscribe',
-              description: 'HomePage: RSS feed subscription text',
-              id: 'T4YA64',
-            })}
-          </ButtonLink>
-        </li>
-      </ul>
-    );
-  };
-
-  const getRecentPosts = () => {
-    return <RecentPosts posts={recentPosts} />;
-  };
-
-  const components: NestedMDXComponents = {
-    CodingLinks: CodingLinks,
-    ColdarkRepos: ColdarkRepos,
-    Image: (props: ResponsiveImageProps) => ResponsiveImage({ ...props }),
-    LibreLinks: LibreLinks,
-    MoreLinks: MoreLinks,
-    RecentPosts: getRecentPosts,
-    ShaarliLink: ShaarliLink,
-  };
-
-  const pageTitle = intl.formatMessage(
-    {
-      defaultMessage: '{websiteName} | Front-end developer: WordPress/React',
-      description: 'HomePage: SEO - Page title',
-      id: 'PXp2hv',
-    },
-    { websiteName: settings.name }
-  );
-  const pageDescription = intl.formatMessage(
-    {
-      defaultMessage:
-        '{websiteName} is a front-end developer located in France. He codes and he writes mostly about web development and open-source.',
-      description: 'HomePage: SEO - Meta description',
-      id: 'tMuNTy',
-    },
-    { websiteName: settings.name }
-  );
-
-  const webpageSchema: WebPage = {
-    '@id': `${settings.url}/#home`,
-    '@type': 'WebPage',
-    name: pageTitle,
-    description: pageDescription,
-    author: { '@id': `${settings.url}/#branding` },
-    creator: { '@id': `${settings.url}/#branding` },
-    editor: { '@id': `${settings.url}/#branding` },
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${settings.url}`,
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema],
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-        <meta name="description" content={pageDescription} />
-        <meta property="og:type" content="website" />
-        <meta property="og:url" content={`${settings.url}`} />
-        <meta property="og:title" content={pageTitle} />
-        <meta property="og:description" content={pageDescription} />
-      </Head>
-      <Script
-        id="schema-homepage"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <div id="home">
-        <HomePageContent components={components} />
-      </div>
-    </>
-  );
-};
-
-Home.getLayout = function getLayout(page: ReactElement) {
-  return <Layout isHome={true}>{page}</Layout>;
-};
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-  const recentPosts = await getPublishedPosts({ first: 3 });
-
-  return {
-    props: {
-      recentPosts,
-      translation,
-    },
-  };
-};
-
-export default Home;
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
deleted file mode 100644
index b103b5e..0000000
--- a/src/pages/mentions-legales.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import { getLayout } from '@components/Layouts/Layout';
-import { Link } from '@components/MDX';
-import PostHeader from '@components/PostHeader/PostHeader';
-import Sidebar from '@components/Sidebar/Sidebar';
-import { ToC } from '@components/Widgets';
-import LegalNoticeContent, {
-  intro,
-  meta,
-} from '@content/pages/legal-notice.mdx';
-import styles from '@styles/pages/Page.module.scss';
-import { NextPageWithLayout } from '@ts/types/app';
-import { ArticleMeta } from '@ts/types/articles';
-import { settings } from '@utils/config';
-import { loadTranslation } from '@utils/helpers/i18n';
-import { NestedMDXComponents } from 'mdx/types';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useIntl } from 'react-intl';
-import { Article, Graph, WebPage } from 'schema-dts';
-
-const LegalNotice: NextPageWithLayout = () => {
-  const intl = useIntl();
-  const router = useRouter();
-  const dates = {
-    publication: meta.publishedOn,
-    update: meta.updatedOn,
-  };
-
-  const pageMeta: ArticleMeta = {
-    dates,
-  };
-  const pageTitle = intl.formatMessage(
-    {
-      defaultMessage: 'Legal notice - {websiteName}',
-      description: 'LegalNoticePage: SEO - Page title',
-      id: '4zAUSu',
-    },
-    { websiteName: settings.name }
-  );
-  const pageDescription = intl.formatMessage(
-    {
-      defaultMessage: "Discover the legal notice of {websiteName}'s website.",
-      description: 'LegalNoticePage: SEO - Meta description',
-      id: 'uvB+32',
-    },
-    { websiteName: settings.name }
-  );
-  const pageUrl = `${settings.url}${router.asPath}`;
-  const title = intl.formatMessage({
-    defaultMessage: 'Legal notice',
-    description: 'LegalNoticePage: page title',
-    id: '/IirIt',
-  });
-  const publicationDate = new Date(dates.publication);
-  const updateDate = new Date(dates.update);
-
-  const webpageSchema: WebPage = {
-    '@id': `${pageUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
-    name: pageTitle,
-    description: pageDescription,
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${pageUrl}`,
-    isPartOf: {
-      '@id': `${settings.url}`,
-    },
-  };
-
-  const articleSchema: Article = {
-    '@id': `${settings.url}/#legal-notice`,
-    '@type': 'Article',
-    name: title,
-    description: intro,
-    author: { '@id': `${settings.url}/#branding` },
-    copyrightYear: publicationDate.getFullYear(),
-    creator: { '@id': `${settings.url}/#branding` },
-    dateCreated: publicationDate.toISOString(),
-    dateModified: updateDate.toISOString(),
-    datePublished: publicationDate.toISOString(),
-    editor: { '@id': `${settings.url}/#branding` },
-    headline: title,
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${pageUrl}` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, articleSchema],
-  };
-
-  const components: NestedMDXComponents = {
-    Link: (props) => Link(props),
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-        <meta name="description" content={pageDescription} />
-        <meta property="og:url" content={`${pageUrl}`} />
-        <meta property="og:type" content="article" />
-        <meta property="og:title" content={pageTitle} />
-        <meta property="og:description" content={intro} />
-      </Head>
-      <Script
-        id="schema-legal-notice"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article
-        id="legal-notice"
-        className={`${styles.article} ${styles['article--no-comments']}`}
-      >
-        <PostHeader intro={intro} meta={pageMeta} title={meta.title} />
-        <Sidebar position="left">
-          <ToC />
-        </Sidebar>
-        <div className={styles.body}>
-          <LegalNoticeContent components={components} />
-        </div>
-      </article>
-    </>
-  );
-};
-
-LegalNotice.getLayout = getLayout;
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const breadcrumbTitle = meta.title;
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-
-  return {
-    props: {
-      breadcrumbTitle,
-      locale,
-      translation,
-    },
-  };
-};
-
-export default LegalNotice;
diff --git a/src/pages/projet/[slug].tsx b/src/pages/projet/[slug].tsx
deleted file mode 100644
index 1f09fed..0000000
--- a/src/pages/projet/[slug].tsx
+++ /dev/null
@@ -1,186 +0,0 @@
-import { getLayout } from '@components/Layouts/Layout';
-import { CodeBlock, Gallery, Link, ResponsiveImage } from '@components/MDX';
-import PostHeader from '@components/PostHeader/PostHeader';
-import ProjectSummary from '@components/ProjectSummary/ProjectSummary';
-import Sidebar from '@components/Sidebar/Sidebar';
-import { Sharing, ToC } from '@components/Widgets';
-import styles from '@styles/pages/Page.module.scss';
-import {
-  NextPageWithLayout,
-  Project as ProjectData,
-  ProjectProps,
-} from '@ts/types/app';
-import { settings } from '@utils/config';
-import { loadTranslation } from '@utils/helpers/i18n';
-import {
-  getAllProjectsFilename,
-  getProjectData,
-} from '@utils/helpers/projects';
-import { MDXComponents, NestedMDXComponents } from 'mdx/types';
-import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { ParsedUrlQuery } from 'querystring';
-import { ComponentType } from 'react';
-import { useIntl } from 'react-intl';
-import { Article, Graph, WebPage } from 'schema-dts';
-
-const Project: NextPageWithLayout<ProjectProps> = ({
-  project,
-}: {
-  project: ProjectData;
-}) => {
-  const intl = useIntl();
-  const router = useRouter();
-  const projectUrl = `${settings.url}${router.asPath}`;
-  const { id, intro, meta, title, seo } = project;
-  const dates = {
-    publication: meta.publishedOn,
-    update: meta.updatedOn,
-  };
-
-  const components: NestedMDXComponents = {
-    CodeBlock: (props) => CodeBlock(props),
-    Gallery: (props) => Gallery(props),
-    Image: (props) => ResponsiveImage({ caption: props.caption, ...props }),
-    Link: (props) => Link(props),
-    pre: ({ children }) => CodeBlock(children.props),
-  };
-
-  const ProjectContent: ComponentType<MDXComponents> =
-    require(`../../content/projects/${id}.mdx`).default;
-
-  const webpageSchema: WebPage = {
-    '@id': `${projectUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
-    name: seo.title,
-    description: seo.description,
-    inLanguage: settings.locales.defaultLocale,
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${settings.url}`,
-    isPartOf: {
-      '@id': `${settings.url}`,
-    },
-  };
-
-  const publicationDate = new Date(dates.publication);
-  const updateDate = new Date(dates.update);
-
-  const articleSchema: Article = {
-    '@id': `${settings.url}/project`,
-    '@type': 'Article',
-    name: title,
-    description: intro,
-    author: { '@id': `${settings.url}/#branding` },
-    copyrightYear: publicationDate.getFullYear(),
-    creator: { '@id': `${settings.url}/#branding` },
-    dateCreated: publicationDate.toISOString(),
-    dateModified: updateDate.toISOString(),
-    datePublished: publicationDate.toISOString(),
-    editor: { '@id': `${settings.url}/#branding` },
-    headline: title,
-    thumbnailUrl: meta.hasCover ? `/projects/${id}.jpg` : '',
-    image: meta.hasCover ? `/projects/${id}.jpg` : '',
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${projectUrl}` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, articleSchema],
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{seo.title}</title>
-        <meta name="description" content={seo.description} />
-        <meta property="og:url" content={`${projectUrl}`} />
-        <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) }}
-      />
-      <article
-        id="project"
-        className={`${styles.article} ${styles['article--no-comments']}`}
-      >
-        <PostHeader title={title} intro={intro} meta={{ dates }} />
-        <Sidebar
-          position="left"
-          ariaLabel={intl.formatMessage({
-            defaultMessage: 'Table of Contents',
-            description: 'ProjectPage: ToC sidebar aria-label',
-            id: '6dXfvr',
-          })}
-        >
-          <ToC />
-        </Sidebar>
-        <div className={styles.body}>
-          <ProjectSummary id={id} title={title} meta={meta} />
-          <ProjectContent components={components} />
-        </div>
-        <Sidebar
-          position="right"
-          ariaLabel={intl.formatMessage({
-            defaultMessage: 'Sidebar',
-            description: 'ProjectPage: right sidebar aria-label',
-            id: 'hHrNd0',
-          })}
-        >
-          <Sharing title={title} excerpt={intro} />
-        </Sidebar>
-      </article>
-    </>
-  );
-};
-
-Project.getLayout = getLayout;
-
-interface ProjectParams extends ParsedUrlQuery {
-  slug: string;
-}
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-  const { slug } = context.params as ProjectParams;
-  const project = await getProjectData(slug);
-  const breadcrumbTitle = project.title;
-
-  return {
-    props: {
-      breadcrumbTitle,
-      locale,
-      project,
-      translation,
-    },
-  };
-};
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  const filenames = getAllProjectsFilename();
-  const paths = filenames.map((filename) => {
-    return {
-      params: {
-        slug: filename,
-      },
-    };
-  });
-
-  return {
-    paths,
-    fallback: false,
-  };
-};
-
-export default Project;
diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx
deleted file mode 100644
index 8a81f39..0000000
--- a/src/pages/projets.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { getLayout } from '@components/Layouts/Layout';
-import PostHeader from '@components/PostHeader/PostHeader';
-import ProjectsList from '@components/ProjectsList/ProjectsList';
-import PageContent, { meta } from '@content/pages/projects.mdx';
-import styles from '@styles/pages/Projects.module.scss';
-import { Project } from '@ts/types/app';
-import { settings } from '@utils/config';
-import { loadTranslation } from '@utils/helpers/i18n';
-import { getSortedProjects } from '@utils/helpers/projects';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useIntl } from 'react-intl';
-import { Article, Graph, WebPage } from 'schema-dts';
-
-const Projects = ({ projects }: { projects: Project[] }) => {
-  const intl = useIntl();
-  const dates = {
-    publication: meta.publishedOn,
-    update: meta.updatedOn,
-  };
-  const publicationDate = new Date(dates.publication);
-  const updateDate = new Date(dates.update);
-  const router = useRouter();
-  const pageUrl = `${settings.url}${router.asPath}`;
-  const pageTitle = intl.formatMessage(
-    {
-      defaultMessage: 'Projects: open-source makings - {websiteName}',
-      description: 'ProjectsPage: SEO - Page title',
-      id: 'SX1z3t',
-    },
-    { websiteName: settings.name }
-  );
-  const pageDescription = intl.formatMessage(
-    {
-      defaultMessage:
-        'Discover {websiteName} projects. Mostly related to web development and open source.',
-      description: 'ProjectsPage: SEO - Meta description',
-      id: 's6U1Xt',
-    },
-    { websiteName: settings.name }
-  );
-
-  const webpageSchema: WebPage = {
-    '@id': `${pageUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
-    name: pageTitle,
-    description: pageDescription,
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${pageUrl}`,
-    isPartOf: {
-      '@id': `${settings.url}`,
-    },
-  };
-
-  const articleSchema: Article = {
-    '@id': `${settings.url}/#projects`,
-    '@type': 'Article',
-    name: meta.title,
-    description: pageDescription,
-    author: { '@id': `${settings.url}/#branding` },
-    copyrightYear: publicationDate.getFullYear(),
-    creator: { '@id': `${settings.url}/#branding` },
-    dateCreated: publicationDate.toISOString(),
-    dateModified: updateDate.toISOString(),
-    datePublished: publicationDate.toISOString(),
-    editor: { '@id': `${settings.url}/#branding` },
-    headline: meta.title,
-    inLanguage: settings.locales.defaultLocale,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${pageUrl}` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, articleSchema],
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{pageTitle}</title>
-        <meta name="description" content={pageDescription} />
-        <meta property="og:url" content={`${pageUrl}`} />
-        <meta property="og:type" content="article" />
-        <meta property="og:title" content={meta.title} />
-        <meta property="og:description" content={pageDescription} />
-      </Head>
-      <Script
-        id="schema-projects"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article id="projects" className={styles.article}>
-        <PostHeader title={meta.title} intro={<PageContent />} />
-        <div className={styles.body}>
-          {projects.length > 0 && <ProjectsList projects={projects} />}
-        </div>
-      </article>
-    </>
-  );
-};
-
-Projects.getLayout = getLayout;
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const breadcrumbTitle = meta.title;
-  const { locale } = context;
-  const projects: Project[] = await getSortedProjects();
-  const translation = await loadTranslation(locale);
-
-  return {
-    props: {
-      breadcrumbTitle,
-      locale,
-      projects,
-      translation,
-    },
-  };
-};
-
-export default Projects;
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
deleted file mode 100644
index b843f8d..0000000
--- a/src/pages/recherche/index.tsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import { Button } from '@components/Buttons';
-import { getLayout } from '@components/Layouts/Layout';
-import PaginationCursor from '@components/PaginationCursor/PaginationCursor';
-import PostHeader from '@components/PostHeader/PostHeader';
-import PostsList from '@components/PostsList/PostsList';
-import Sidebar from '@components/Sidebar/Sidebar';
-import Spinner from '@components/Spinner/Spinner';
-import { ThematicsList, TopicsList } from '@components/Widgets';
-import { getPublishedPosts } from '@services/graphql/queries';
-import styles from '@styles/pages/Page.module.scss';
-import { NextPageWithLayout } from '@ts/types/app';
-import { PostsList as PostsListData } from '@ts/types/blog';
-import { settings } from '@utils/config';
-import { getIntlInstance, loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { useEffect, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import useSWRInfinite from 'swr/infinite';
-
-const Search: NextPageWithLayout = () => {
-  const intl = useIntl();
-  const [query, setQuery] = useState('');
-  const router = useRouter();
-  const lastPostRef = useRef<HTMLSpanElement>(null);
-
-  useEffect(() => {
-    if (!router.isReady) return;
-
-    if (router.query?.s && typeof router.query.s === 'string') {
-      setQuery(router.query.s);
-    }
-  }, [router.isReady, router.query.s]);
-
-  const getKey = (pageIndex: number, previousData: PostsListData) => {
-    if (previousData && !previousData.posts) return null;
-
-    return pageIndex === 0
-      ? { first: settings.postsPerPage, searchQuery: query }
-      : {
-          first: settings.postsPerPage,
-          after: previousData.pageInfo.endCursor,
-          searchQuery: query,
-        };
-  };
-
-  const { data, error, size, setSize } = useSWRInfinite(
-    getKey,
-    getPublishedPosts
-  );
-  const [totalPostsCount, setTotalPostsCount] = useState<number>(0);
-
-  useEffect(() => {
-    if (data) setTotalPostsCount(data[0].pageInfo.total);
-  }, [data]);
-
-  const [loadedPostsCount, setLoadedPostsCount] = useState<number>(
-    settings.postsPerPage
-  );
-
-  useEffect(() => {
-    if (data && data.length > 0) {
-      const newCount =
-        settings.postsPerPage +
-        data[0].pageInfo.total -
-        data[data.length - 1].pageInfo.total;
-      setLoadedPostsCount(newCount);
-    }
-  }, [data]);
-
-  const isLoadingInitialData = !data && !error;
-  const isLoadingMore: boolean =
-    isLoadingInitialData ||
-    (size > 0 && data !== undefined && typeof data[size - 1] === 'undefined');
-
-  const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage;
-
-  const title = query
-    ? intl.formatMessage(
-        {
-          defaultMessage: 'Search results for {query}',
-          description: 'SearchPage: search results text',
-          id: 'VSGuGE',
-        },
-        { query }
-      )
-    : intl.formatMessage({
-        defaultMessage: 'Search',
-        description: 'SearchPage: page title',
-        id: 'U+35YD',
-      });
-
-  const description = query
-    ? intl.formatMessage(
-        {
-          defaultMessage: 'Discover search results for {query}',
-          description: 'SearchPage: meta description with query',
-          id: 'A4LTGq',
-        },
-        { query }
-      )
-    : intl.formatMessage(
-        {
-          defaultMessage: 'Search for a post on {websiteName}',
-          description: 'SearchPage: meta description without query',
-          id: 'PrIz5o',
-        },
-        { websiteName: settings.name }
-      );
-
-  const head = {
-    title: `${title} | ${settings.name}`,
-    description,
-  };
-
-  const loadMorePosts = () => {
-    if (lastPostRef.current) {
-      lastPostRef.current.focus();
-    }
-    setSize(size + 1);
-  };
-
-  const getPostsList = () => {
-    if (error)
-      return intl.formatMessage({
-        defaultMessage: 'Failed to load.',
-        description: 'SearchPage: failed to load text',
-        id: 'fOe8rH',
-      });
-    if (!data) return <Spinner />;
-
-    return <PostsList ref={lastPostRef} data={data} showYears={false} />;
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{head.title}</title>
-        <meta name="description" content={head.description} />
-      </Head>
-      <article
-        className={`${styles.article} ${styles['article--no-comments']}`}
-      >
-        <PostHeader title={title} meta={{ results: totalPostsCount }} />
-        <div className={styles.body}>
-          {getPostsList()}
-          {hasNextPage && (
-            <>
-              <PaginationCursor
-                current={loadedPostsCount}
-                total={totalPostsCount}
-              />
-              <Button
-                isDisabled={isLoadingMore}
-                clickHandler={loadMorePosts}
-                position="center"
-                spacing={true}
-              >
-                {intl.formatMessage({
-                  defaultMessage: 'Load more?',
-                  description: 'SearchPage: load more text',
-                  id: 'pEtJik',
-                })}
-              </Button>
-            </>
-          )}
-        </div>
-        <Sidebar position="right">
-          <ThematicsList
-            title={intl.formatMessage({
-              defaultMessage: 'Thematics',
-              description: 'SearchPage: thematics list widget title',
-              id: 'Dq6+WH',
-            })}
-          />
-          <TopicsList
-            title={intl.formatMessage({
-              defaultMessage: 'Topics',
-              description: 'SearchPage: topics list widget title',
-              id: 'N804XO',
-            })}
-          />
-        </Sidebar>
-      </article>
-    </>
-  );
-};
-
-Search.getLayout = getLayout;
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const intl = await getIntlInstance();
-  const breadcrumbTitle = intl.formatMessage({
-    defaultMessage: 'Search',
-    description: 'SearchPage: breadcrumb item',
-    id: 'TfU6Qm',
-  });
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-
-  return {
-    props: {
-      breadcrumbTitle,
-      locale,
-      translation,
-    },
-  };
-};
-
-export default Search;
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
deleted file mode 100644
index 30dd36c..0000000
--- a/src/pages/sujet/[slug].tsx
+++ /dev/null
@@ -1,224 +0,0 @@
-import { getLayout } from '@components/Layouts/Layout';
-import PostHeader from '@components/PostHeader/PostHeader';
-import PostPreview from '@components/PostPreview/PostPreview';
-import Sidebar from '@components/Sidebar/Sidebar';
-import Spinner from '@components/Spinner/Spinner';
-import { RelatedThematics, ToC, TopicsList } from '@components/Widgets';
-import {
-  getAllTopics,
-  getAllTopicsSlug,
-  getTopicBySlug,
-} from '@services/graphql/queries';
-import styles from '@styles/pages/Page.module.scss';
-import { NextPageWithLayout } from '@ts/types/app';
-import { ArticleMeta } from '@ts/types/articles';
-import { TopicProps, ThematicPreview } from '@ts/types/taxonomies';
-import { settings } from '@utils/config';
-import { getFormattedPaths } from '@utils/helpers/format';
-import { loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { ParsedUrlQuery } from 'querystring';
-import { useRef } from 'react';
-import { useIntl } from 'react-intl';
-import { Article as Article, Graph, WebPage } from 'schema-dts';
-
-const Topic: NextPageWithLayout<TopicProps> = ({ topic, allTopics }) => {
-  const intl = useIntl();
-  const relatedThematics = useRef<ThematicPreview[]>([]);
-  const router = useRouter();
-
-  if (router.isFallback) return <Spinner />;
-
-  const updateRelatedThematics = (newThematics: ThematicPreview[]) => {
-    newThematics.forEach((thematic) => {
-      const thematicIndex = relatedThematics.current.findIndex(
-        (relatedThematic) => relatedThematic.id === thematic.id
-      );
-      const hasThematic = thematicIndex === -1 ? false : true;
-
-      if (!hasThematic) relatedThematics.current.push(thematic);
-    });
-  };
-
-  const getPostsList = () => {
-    return [...topic.posts].reverse().map((post) => {
-      updateRelatedThematics(post.thematics);
-
-      return (
-        <li key={post.id} className={styles.item}>
-          <PostPreview post={post} titleLevel={3} />
-        </li>
-      );
-    });
-  };
-
-  const meta: ArticleMeta = {
-    dates: topic.dates,
-    results: topic.posts.length,
-    website: topic.officialWebsite,
-  };
-  const topicUrl = `${settings.url}${router.asPath}`;
-
-  const webpageSchema: WebPage = {
-    '@id': `${topicUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
-    name: topic.seo.title,
-    description: topic.seo.metaDesc,
-    inLanguage: settings.locales.defaultLocale,
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${settings.url}`,
-    isPartOf: {
-      '@id': `${settings.url}`,
-    },
-  };
-
-  const publicationDate = new Date(topic.dates.publication);
-  const updateDate = new Date(topic.dates.update);
-
-  const articleSchema: Article = {
-    '@id': `${settings.url}/#topic`,
-    '@type': 'Article',
-    name: topic.title,
-    description: topic.intro,
-    author: { '@id': `${settings.url}/#branding` },
-    copyrightYear: publicationDate.getFullYear(),
-    creator: { '@id': `${settings.url}/#branding` },
-    dateCreated: publicationDate.toISOString(),
-    dateModified: updateDate.toISOString(),
-    datePublished: publicationDate.toISOString(),
-    editor: { '@id': `${settings.url}/#branding` },
-    headline: topic.title,
-    thumbnailUrl: topic.featuredImage?.sourceUrl,
-    image: topic.featuredImage?.sourceUrl,
-    inLanguage: settings.locales.defaultLocale,
-    isPartOf: { '@id': `${settings.url}/blog` },
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${topicUrl}` },
-    subjectOf: { '@id': `${settings.url}/blog` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, articleSchema],
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{topic.seo.title}</title>
-        <meta name="description" content={topic.seo.metaDesc} />
-        <meta property="og:url" content={`${topicUrl}`} />
-        <meta property="og:type" content="article" />
-        <meta property="og:title" content={topic.title} />
-        <meta property="og:description" content={topic.intro} />
-        <meta property="og:image" content={topic.featuredImage?.sourceUrl} />
-        <meta property="og:image:alt" content={topic.featuredImage?.altText} />
-      </Head>
-      <Script
-        id="schema-subject"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article
-        id="topic"
-        className={`${styles.article} ${styles['article--no-comments']}`}
-      >
-        <PostHeader
-          cover={topic.featuredImage}
-          intro={topic.intro}
-          meta={meta}
-          title={topic.title}
-        />
-        <Sidebar
-          position="left"
-          ariaLabel={intl.formatMessage({
-            defaultMessage: 'Table of Contents',
-            description: 'TopicPage: ToC sidebar aria-label',
-            id: 'lsDB5G',
-          })}
-        >
-          <ToC />
-        </Sidebar>
-        <div className={styles.body}>
-          <div dangerouslySetInnerHTML={{ __html: topic.content }}></div>
-          {topic.posts.length > 0 && (
-            <section className={styles.section}>
-              <h2>
-                {intl.formatMessage(
-                  {
-                    defaultMessage: 'All posts in {name}',
-                    description: 'TopicPage: posts list title',
-                    id: 'FLkF2R',
-                  },
-                  { name: topic.title }
-                )}
-              </h2>
-              <ol className={styles.list}>{getPostsList()}</ol>
-            </section>
-          )}
-        </div>
-        <Sidebar
-          position="right"
-          ariaLabel={intl.formatMessage({
-            defaultMessage: 'Sidebar',
-            description: 'TopicPage: right sidebar aria-label',
-            id: 'eu3beS',
-          })}
-        >
-          <RelatedThematics thematics={relatedThematics.current} />
-          <TopicsList
-            initialData={allTopics}
-            title={intl.formatMessage({
-              defaultMessage: 'Others topics',
-              description: 'TopicPage: topics list widget title',
-              id: '+4tiVb',
-            })}
-          />
-        </Sidebar>
-      </article>
-    </>
-  );
-};
-
-Topic.getLayout = getLayout;
-
-interface PostParams extends ParsedUrlQuery {
-  slug: string;
-}
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-  const { slug } = context.params as PostParams;
-  const topic = await getTopicBySlug(slug);
-  const allTopics = await getAllTopics();
-  const breadcrumbTitle = topic.title;
-
-  return {
-    props: {
-      allTopics,
-      breadcrumbTitle,
-      locale,
-      topic,
-      translation,
-    },
-  };
-};
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  const allTopics = await getAllTopicsSlug();
-  const paths = getFormattedPaths(allTopics);
-
-  return {
-    paths,
-    fallback: true,
-  };
-};
-
-export default Topic;
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
deleted file mode 100644
index db22214..0000000
--- a/src/pages/thematique/[slug].tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import { getLayout } from '@components/Layouts/Layout';
-import PostHeader from '@components/PostHeader/PostHeader';
-import PostPreview from '@components/PostPreview/PostPreview';
-import Sidebar from '@components/Sidebar/Sidebar';
-import Spinner from '@components/Spinner/Spinner';
-import { RelatedTopics, ThematicsList, ToC } from '@components/Widgets';
-import {
-  getAllThematics,
-  getAllThematicsSlug,
-  getThematicBySlug,
-} from '@services/graphql/queries';
-import styles from '@styles/pages/Page.module.scss';
-import { NextPageWithLayout } from '@ts/types/app';
-import { ArticleMeta } from '@ts/types/articles';
-import { TopicPreview, ThematicProps } from '@ts/types/taxonomies';
-import { settings } from '@utils/config';
-import { getFormattedPaths } from '@utils/helpers/format';
-import { loadTranslation } from '@utils/helpers/i18n';
-import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { ParsedUrlQuery } from 'querystring';
-import { useRef } from 'react';
-import { useIntl } from 'react-intl';
-import { Article, Graph, WebPage } from 'schema-dts';
-
-const Thematic: NextPageWithLayout<ThematicProps> = ({
-  thematic,
-  allThematics,
-}) => {
-  const intl = useIntl();
-  const relatedTopics = useRef<TopicPreview[]>([]);
-  const router = useRouter();
-
-  if (router.isFallback) return <Spinner />;
-
-  const updateRelatedTopics = (newTopics: TopicPreview[]) => {
-    newTopics.forEach((topic) => {
-      const topicIndex = relatedTopics.current.findIndex(
-        (relatedTopic) => relatedTopic.id === topic.id
-      );
-      const hasTopic = topicIndex === -1 ? false : true;
-
-      if (!hasTopic) relatedTopics.current.push(topic);
-    });
-  };
-
-  const getPostsList = () => {
-    return [...thematic.posts].reverse().map((post) => {
-      updateRelatedTopics(post.topics);
-
-      return (
-        <li key={post.id} className={styles.item}>
-          <PostPreview post={post} titleLevel={3} />
-        </li>
-      );
-    });
-  };
-
-  const meta: ArticleMeta = {
-    dates: thematic.dates,
-    results: thematic.posts.length,
-  };
-  const thematicUrl = `${settings.url}${router.asPath}`;
-
-  const webpageSchema: WebPage = {
-    '@id': `${thematicUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${settings.url}/#breadcrumb` },
-    name: thematic.seo.title,
-    description: thematic.seo.metaDesc,
-    inLanguage: settings.locales.defaultLocale,
-    reviewedBy: { '@id': `${settings.url}/#branding` },
-    url: `${settings.url}`,
-  };
-
-  const publicationDate = new Date(thematic.dates.publication);
-  const updateDate = new Date(thematic.dates.update);
-
-  const articleSchema: Article = {
-    '@id': `${settings.url}/#thematic`,
-    '@type': 'Article',
-    name: thematic.title,
-    description: thematic.intro,
-    author: { '@id': `${settings.url}/#branding` },
-    copyrightYear: publicationDate.getFullYear(),
-    creator: { '@id': `${settings.url}/#branding` },
-    dateCreated: publicationDate.toISOString(),
-    dateModified: updateDate.toISOString(),
-    datePublished: publicationDate.toISOString(),
-    editor: { '@id': `${settings.url}/#branding` },
-    headline: thematic.title,
-    inLanguage: settings.locales.defaultLocale,
-    isPartOf: { '@id': `${settings.url}/blog` },
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${thematicUrl}` },
-    subjectOf: { '@id': `${settings.url}/blog` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, articleSchema],
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{thematic.seo.title}</title>
-        <meta name="description" content={thematic.seo.metaDesc} />
-        <meta property="og:url" content={`${thematic}`} />
-        <meta property="og:type" content="article" />
-        <meta property="og:title" content={thematic.title} />
-        <meta property="og:description" content={thematic.intro} />
-      </Head>
-      <Script
-        id="schema-thematic"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <article
-        id="thematic"
-        className={`${styles.article} ${styles['article--no-comments']}`}
-      >
-        <PostHeader intro={thematic.intro} meta={meta} title={thematic.title} />
-        <Sidebar
-          position="left"
-          ariaLabel={intl.formatMessage({
-            defaultMessage: 'Table of Contents',
-            description: 'ThematicPage: ToC sidebar aria-label',
-            id: 'YwvYfw',
-          })}
-        >
-          <ToC />
-        </Sidebar>
-        <div className={styles.body}>
-          <div dangerouslySetInnerHTML={{ __html: thematic.content }}></div>
-          {thematic.posts.length > 0 && (
-            <section className={styles.section}>
-              <h2>
-                {intl.formatMessage(
-                  {
-                    defaultMessage: 'All posts in {name}',
-                    description: 'ThematicPage: posts list title',
-                    id: 'P7fxX2',
-                  },
-                  { name: thematic.title }
-                )}
-              </h2>
-              <ol className={styles.list}>{getPostsList()}</ol>
-            </section>
-          )}
-        </div>
-        <Sidebar
-          position="right"
-          ariaLabel={intl.formatMessage({
-            defaultMessage: 'Sidebar',
-            description: 'ThematicPage: right sidebar aria-label',
-            id: 'syLgY9',
-          })}
-        >
-          <RelatedTopics topics={relatedTopics.current} />
-          <ThematicsList
-            initialData={allThematics}
-            title={intl.formatMessage({
-              defaultMessage: 'Others thematics',
-              description: 'ThematicPage: thematics list widget title',
-              id: 'norrGp',
-            })}
-          />
-        </Sidebar>
-      </article>
-    </>
-  );
-};
-
-Thematic.getLayout = getLayout;
-
-interface PostParams extends ParsedUrlQuery {
-  slug: string;
-}
-
-export const getStaticProps: GetStaticProps = async (
-  context: GetStaticPropsContext
-) => {
-  const { locale } = context;
-  const translation = await loadTranslation(locale);
-  const { slug } = context.params as PostParams;
-  const thematic = await getThematicBySlug(slug);
-  const allThematics = await getAllThematics();
-  const breadcrumbTitle = thematic.title;
-
-  return {
-    props: {
-      allThematics,
-      breadcrumbTitle,
-      locale,
-      thematic,
-      translation,
-    },
-  };
-};
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  const allSlugs = await getAllThematicsSlug();
-  const paths = getFormattedPaths(allSlugs);
-
-  return {
-    paths,
-    fallback: true,
-  };
-};
-
-export default Thematic;
diff --git a/src/services/graphql/api.ts b/src/services/graphql/api.ts
deleted file mode 100644
index a5be026..0000000
--- a/src/services/graphql/api.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { RequestType, VariablesType } from '@ts/types/app';
-import { settings } from '@utils/config';
-import { GraphQLClient } from 'graphql-request';
-
-export const getGraphQLClient = (): GraphQLClient => {
-  const apiUrl = settings.api.url;
-
-  if (!apiUrl) throw new Error('API URL not defined.');
-
-  return new GraphQLClient(apiUrl);
-};
-
-export const fetchApi = async <T extends RequestType>(
-  query: string,
-  variables: VariablesType<T>
-): Promise<T> => {
-  const client = getGraphQLClient();
-
-  try {
-    return await client.request(query, variables);
-  } catch (error) {
-    console.error(error, undefined, 2);
-    process.exit(1);
-  }
-};
diff --git a/src/services/graphql/mutations.ts b/src/services/graphql/mutations.ts
deleted file mode 100644
index c697835..0000000
--- a/src/services/graphql/mutations.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { CommentData, CreateComment, CreatedComment } from '@ts/types/comments';
-import { ContactData, SendEmail } from '@ts/types/contact';
-import { gql } from 'graphql-request';
-import { fetchApi } from './api';
-
-//==============================================================================
-// Comment mutation
-//==============================================================================
-
-export const createComment = async (
-  data: CommentData
-): Promise<CreatedComment> => {
-  const mutation = gql`
-    mutation CreateComment(
-      $author: String!
-      $authorEmail: String!
-      $authorUrl: String!
-      $content: String!
-      $parent: ID!
-      $commentOn: Int!
-      $mutationId: String!
-    ) {
-      createComment(
-        input: {
-          author: $author
-          authorEmail: $authorEmail
-          authorUrl: $authorUrl
-          content: $content
-          parent: $parent
-          commentOn: $commentOn
-          clientMutationId: $mutationId
-        }
-      ) {
-        clientMutationId
-        success
-        comment {
-          approved
-        }
-      }
-    }
-  `;
-
-  const variables = { ...data };
-  const response = await fetchApi<CreateComment>(mutation, variables);
-
-  return response.createComment;
-};
-
-//==============================================================================
-// Contact mutation
-//==============================================================================
-
-export const sendMail = async (data: ContactData) => {
-  const mutation = gql`
-    mutation SendEmail(
-      $subject: String!
-      $body: String!
-      $replyTo: String!
-      $mutationId: String!
-    ) {
-      sendEmail(
-        input: {
-          clientMutationId: $mutationId
-          body: $body
-          replyTo: $replyTo
-          subject: $subject
-        }
-      ) {
-        clientMutationId
-        message
-        sent
-        origin
-        replyTo
-        to
-      }
-    }
-  `;
-
-  const variables = { ...data };
-  const response = await fetchApi<SendEmail>(mutation, variables);
-  return response.sendEmail;
-};
diff --git a/src/services/graphql/queries.ts b/src/services/graphql/queries.ts
deleted file mode 100644
index 9caf62b..0000000
--- a/src/services/graphql/queries.ts
+++ /dev/null
@@ -1,535 +0,0 @@
-import { Slug } from '@ts/types/app';
-import { Article, PostBy, TotalArticles } from '@ts/types/articles';
-import {
-  AllPostsSlug,
-  LastPostCursor,
-  PostsList,
-  RawPostsList,
-} from '@ts/types/blog';
-import { Comment, CommentsByPostId } from '@ts/types/comments';
-import {
-  AllTopics,
-  AllTopicsSlug,
-  AllThematics,
-  AllThematicsSlug,
-  Topic,
-  TopicBy,
-  TopicPreview,
-  Thematic,
-  ThematicBy,
-  ThematicPreview,
-} from '@ts/types/taxonomies';
-import {
-  getFormattedPost,
-  getFormattedPostPreview,
-  getFormattedTopic,
-  getFormattedThematic,
-  getFormattedComments,
-  buildCommentsTree,
-} from '@utils/helpers/format';
-import { gql } from 'graphql-request';
-import { fetchApi } from './api';
-
-//==============================================================================
-// Posts list queries
-//==============================================================================
-
-export const getPostsTotal = async (): Promise<number> => {
-  const query = gql`
-    query PostsTotal {
-      posts {
-        pageInfo {
-          total
-        }
-      }
-    }
-  `;
-
-  const response = await fetchApi<TotalArticles>(query, null);
-  return response.posts.pageInfo.total;
-};
-
-export const getPublishedPosts = async ({
-  first = 10,
-  after = '',
-  searchQuery = '',
-}: {
-  first: number;
-  after?: string;
-  searchQuery?: string;
-}): Promise<PostsList> => {
-  const query = gql`
-    query AllPublishedPosts($first: Int, $after: String, $searchQuery: String) {
-      posts(
-        after: $after
-        first: $first
-        where: {
-          status: PUBLISH
-          orderby: { field: DATE, order: DESC }
-          search: $searchQuery
-        }
-      ) {
-        edges {
-          cursor
-          node {
-            acfPosts {
-              postsInTopic {
-                ... on Topic {
-                  databaseId
-                  featuredImage {
-                    node {
-                      altText
-                      sourceUrl
-                      title
-                    }
-                  }
-                  id
-                  slug
-                  title
-                }
-              }
-              postsInThematic {
-                ... on Thematic {
-                  databaseId
-                  id
-                  slug
-                  title
-                }
-              }
-            }
-            commentCount
-            contentParts {
-              beforeMore
-            }
-            date
-            featuredImage {
-              node {
-                altText
-                sourceUrl
-                title
-              }
-            }
-            id
-            info {
-              readingTime
-              wordsCount
-            }
-            databaseId
-            modified
-            slug
-            title
-          }
-        }
-        pageInfo {
-          endCursor
-          hasNextPage
-          total
-        }
-      }
-    }
-  `;
-
-  const variables = { first, after, searchQuery };
-  const response = await fetchApi<RawPostsList>(query, variables);
-  const formattedPosts = response.posts.edges.map((post) => {
-    return getFormattedPostPreview(post.node);
-  });
-
-  return {
-    posts: formattedPosts,
-    pageInfo: response.posts.pageInfo,
-  };
-};
-
-export const getAllPostsSlug = async (): Promise<Slug[]> => {
-  // 10 000 is an arbitrary number that I use for small websites.
-  const query = gql`
-    query AllPostsSlug {
-      posts(first: 10000) {
-        nodes {
-          slug
-        }
-      }
-    }
-  `;
-
-  const response = await fetchApi<AllPostsSlug>(query, null);
-  return response.posts.nodes;
-};
-
-//==============================================================================
-// Single Post query
-//==============================================================================
-
-export const getPostBySlug = async (slug: string): Promise<Article> => {
-  const query = gql`
-    query PostBySlug($slug: ID!) {
-      post(id: $slug, idType: SLUG) {
-        acfPosts {
-          postsInTopic {
-            ... on Topic {
-              id
-              featuredImage {
-                node {
-                  altText
-                  sourceUrl
-                  title
-                }
-              }
-              slug
-              title
-            }
-          }
-          postsInThematic {
-            ... on Thematic {
-              id
-              slug
-              title
-            }
-          }
-        }
-        author {
-          node {
-            firstName
-            lastName
-            name
-          }
-        }
-        commentCount
-        contentParts {
-          afterMore
-          beforeMore
-        }
-        databaseId
-        date
-        featuredImage {
-          node {
-            altText
-            sourceUrl
-            title
-          }
-        }
-        id
-        info {
-          readingTime
-          wordsCount
-        }
-        modified
-        seo {
-          metaDesc
-          title
-        }
-        title
-      }
-    }
-  `;
-  const variables = { slug };
-  const response = await fetchApi<PostBy>(query, variables);
-
-  return getFormattedPost(response.post);
-};
-
-//==============================================================================
-// Comments query
-//==============================================================================
-
-export const getCommentsByPostId = async (id: number): Promise<Comment[]> => {
-  const query = gql`
-    query PostComments($id: ID!) {
-      comments(where: { contentId: $id, order: ASC, orderby: COMMENT_DATE }) {
-        nodes {
-          approved
-          author {
-            node {
-              databaseId
-              gravatarUrl
-              name
-              url
-            }
-          }
-          content
-          databaseId
-          date
-          parentDatabaseId
-        }
-      }
-    }
-  `;
-
-  const variables = { id };
-  const response = await fetchApi<CommentsByPostId>(query, variables);
-  const formattedComments = getFormattedComments(response.comments.nodes);
-
-  return buildCommentsTree(formattedComments);
-};
-
-//==============================================================================
-// Topic query
-//==============================================================================
-
-export const getTopicBySlug = async (slug: string): Promise<Topic> => {
-  const query = gql`
-    query TopicBySlug($slug: ID!) {
-      topic(id: $slug, idType: SLUG) {
-        acfTopics {
-          officialWebsite
-          postsInTopic {
-            ... on Post {
-              acfPosts {
-                postsInTopic {
-                  ... on Topic {
-                    databaseId
-                    featuredImage {
-                      node {
-                        altText
-                        sourceUrl
-                        title
-                      }
-                    }
-                    id
-                    slug
-                    title
-                  }
-                }
-                postsInThematic {
-                  ... on Thematic {
-                    databaseId
-                    id
-                    slug
-                    title
-                  }
-                }
-              }
-              id
-              info {
-                readingTime
-                wordsCount
-              }
-              commentCount
-              contentParts {
-                beforeMore
-              }
-              databaseId
-              date
-              featuredImage {
-                node {
-                  altText
-                  sourceUrl
-                  title
-                }
-              }
-              modified
-              slug
-              title
-            }
-          }
-        }
-        contentParts {
-          afterMore
-          beforeMore
-        }
-        databaseId
-        date
-        featuredImage {
-          node {
-            altText
-            sourceUrl
-            title
-          }
-        }
-        id
-        info {
-          readingTime
-          wordsCount
-        }
-        modified
-        seo {
-          metaDesc
-          title
-        }
-        title
-      }
-    }
-  `;
-  const variables = { slug };
-  const response = await fetchApi<TopicBy>(query, variables);
-
-  return getFormattedTopic(response.topic);
-};
-
-export const getAllTopicsSlug = async (): Promise<Slug[]> => {
-  // 10 000 is an arbitrary number that I use for small websites.
-  const query = gql`
-    query AllTopicsSlug {
-      topics(first: 10000) {
-        nodes {
-          slug
-        }
-      }
-    }
-  `;
-  const response = await fetchApi<AllTopicsSlug>(query, null);
-  return response.topics.nodes;
-};
-
-export const getAllTopics = async (): Promise<TopicPreview[]> => {
-  // 10 000 is an arbitrary number that I use for small websites.
-  const query = gql`
-    query AllTopics {
-      topics(first: 10000, where: { orderby: { field: TITLE, order: ASC } }) {
-        nodes {
-          databaseId
-          slug
-          title
-        }
-      }
-    }
-  `;
-
-  const response = await fetchApi<AllTopics>(query, null);
-  return response.topics.nodes;
-};
-
-//==============================================================================
-// Thematic query
-//==============================================================================
-
-export const getThematicBySlug = async (slug: string): Promise<Thematic> => {
-  const query = gql`
-    query ThematicBySlug($slug: ID!) {
-      thematic(id: $slug, idType: SLUG) {
-        acfThematics {
-          postsInThematic {
-            ... on Post {
-              acfPosts {
-                postsInTopic {
-                  ... on Topic {
-                    databaseId
-                    featuredImage {
-                      node {
-                        altText
-                        sourceUrl
-                        title
-                      }
-                    }
-                    id
-                    slug
-                    title
-                  }
-                }
-                postsInThematic {
-                  ... on Thematic {
-                    databaseId
-                    id
-                    slug
-                    title
-                  }
-                }
-              }
-              id
-              info {
-                readingTime
-                wordsCount
-              }
-              commentCount
-              contentParts {
-                beforeMore
-              }
-              databaseId
-              date
-              featuredImage {
-                node {
-                  altText
-                  sourceUrl
-                  title
-                }
-              }
-              modified
-              slug
-              title
-            }
-          }
-        }
-        contentParts {
-          afterMore
-          beforeMore
-        }
-        databaseId
-        date
-        id
-        info {
-          readingTime
-          wordsCount
-        }
-        modified
-        seo {
-          metaDesc
-          title
-        }
-        title
-      }
-    }
-  `;
-  const variables = { slug };
-  const response = await fetchApi<ThematicBy>(query, variables);
-
-  return getFormattedThematic(response.thematic);
-};
-
-export const getAllThematicsSlug = async (): Promise<Slug[]> => {
-  // 10 000 is an arbitrary number that I use for small websites.
-  const query = gql`
-    query AllThematicsSlug {
-      thematics(first: 10000) {
-        nodes {
-          slug
-        }
-      }
-    }
-  `;
-  const response = await fetchApi<AllThematicsSlug>(query, null);
-  return response.thematics.nodes;
-};
-
-export const getAllThematics = async (): Promise<ThematicPreview[]> => {
-  // 10 000 is an arbitrary number that I use for small websites.
-  const query = gql`
-    query AllThematics {
-      thematics(
-        first: 10000
-        where: { orderby: { field: TITLE, order: ASC } }
-      ) {
-        nodes {
-          databaseId
-          slug
-          title
-        }
-      }
-    }
-  `;
-
-  const response = await fetchApi<AllThematics>(query, null);
-  return response.thematics.nodes;
-};
-
-export const getEndCursor = async ({
-  first = 10,
-}: {
-  first: number;
-}): Promise<string> => {
-  const query = gql`
-    query EndCursorAfter($first: Int) {
-      posts(first: $first) {
-        pageInfo {
-          hasNextPage
-          endCursor
-        }
-      }
-    }
-  `;
-
-  const variables = { first };
-  const response = await fetchApi<LastPostCursor>(query, variables);
-
-  return response.posts.pageInfo.endCursor;
-};
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
deleted file mode 100644
index 4243762..0000000
--- a/src/ts/types/app.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import { NextPage } from 'next';
-import { AppProps } from 'next/app';
-import { ImageProps } from 'next/image';
-import { ReactElement, ReactNode } from 'react';
-import { PostBy, TotalArticles } from './articles';
-import { AllPostsSlug, LastPostCursor, RawPostsList } from './blog';
-import { CommentData, CommentsByPostId, CreateComment } from './comments';
-import { ContactData, SendEmail } from './contact';
-import {
-  AllTopics,
-  AllTopicsSlug,
-  AllThematics,
-  AllThematicsSlug,
-  TopicBy,
-  ThematicBy,
-} from './taxonomies';
-
-//==============================================================================
-// Next
-//==============================================================================
-
-export type NextPageWithLayout<P = {}> = NextPage<P> & {
-  getLayout?: (page: ReactElement) => ReactNode;
-};
-
-export type AppPropsWithLayout = AppProps & {
-  Component: NextPageWithLayout;
-};
-
-//==============================================================================
-// API
-//==============================================================================
-
-export type VariablesType<T> = T extends PostBy | TopicBy | ThematicBy
-  ? Slug
-  : T extends RawPostsList
-  ? CursorPagination
-  : T extends CommentsByPostId
-  ? { id: number }
-  : T extends CreateComment
-  ? CommentData
-  : T extends LastPostCursor
-  ? { first: number }
-  : T extends SendEmail
-  ? ContactData
-  : null;
-
-export type RequestType =
-  | AllPostsSlug
-  | AllTopics
-  | AllTopicsSlug
-  | AllThematics
-  | AllThematicsSlug
-  | CommentsByPostId
-  | CreateComment
-  | LastPostCursor
-  | PostBy
-  | RawPostsList
-  | SendEmail
-  | ThematicBy
-  | TopicBy
-  | TotalArticles;
-
-//==============================================================================
-// Globals
-//==============================================================================
-
-export type ButtonKind = 'primary' | 'secondary' | 'tertiary';
-
-export type ButtonPosition = 'left' | 'right' | 'center';
-
-export type ContentInfo = {
-  readingTime: number;
-  wordsCount: number;
-};
-
-export type ContentParts = {
-  afterMore: string;
-  beforeMore: string;
-};
-
-export type CursorPagination = {
-  first: number;
-  after: string;
-};
-
-export type Dates = {
-  publication: string;
-  update: string;
-};
-
-export type Heading = {
-  depth: number;
-  id: string;
-  children: Heading[];
-  title: string;
-};
-
-export type Meta = {
-  title: string;
-  publishedOn: string;
-  updatedOn: string;
-};
-
-export type MetaKind = 'article' | 'list';
-
-export type NoticeType = 'error' | 'info' | 'success' | 'warning';
-
-export type PageInfo = {
-  endCursor: string;
-  hasNextPage: boolean;
-  total: number;
-};
-
-export type ParamsIds = {
-  params: { id: string };
-};
-
-export type ParamsSlug = {
-  params: { slug: string };
-};
-
-export type Project = {
-  cover?: string;
-  id: string;
-  intro: string;
-  meta: ProjectMeta;
-  slug: string;
-  tagline?: string;
-  title: string;
-  seo: {
-    title: string;
-    description: string;
-  };
-};
-
-export type ProjectMeta = Omit<Meta, 'title'> & {
-  hasCover: boolean;
-  license: string;
-  repos?: {
-    github?: string;
-    gitlab?: string;
-  };
-  technologies?: string[];
-};
-
-export type ProjectProps = {
-  project: Project;
-};
-
-export type ResponsiveImageProps = ImageProps & {
-  caption?: string;
-  linkTarget?: string;
-};
-
-export type Slug = {
-  slug: string;
-};
-
-export type TitleLevel = 2 | 3 | 4 | 5 | 6;
diff --git a/src/ts/types/articles.ts b/src/ts/types/articles.ts
deleted file mode 100644
index 64d2860..0000000
--- a/src/ts/types/articles.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ContentInfo, ContentParts, Dates } from './app';
-import { Comment } from './comments';
-import { Cover, RawCover } from './cover';
-import { SEO } from './seo';
-import { RawTopicPreview, TopicPreview, ThematicPreview } from './taxonomies';
-
-export type ArticleAuthor = {
-  firstName: string;
-  lastName: string;
-  name: string;
-};
-
-export type RawACFPosts = {
-  postsInTopic: RawTopicPreview[] | null;
-  postsInThematic: ThematicPreview[] | null;
-};
-
-export type ACFPosts = {
-  postsInTopic: TopicPreview[] | null;
-  postsInThematic: ThematicPreview[] | null;
-};
-
-export type ArticleMeta = {
-  author?: ArticleAuthor;
-  commentCount?: number;
-  dates?: Dates;
-  readingTime?: number;
-  results?: number;
-  topics?: TopicPreview[];
-  thematics?: ThematicPreview[];
-  website?: string;
-  wordsCount?: number;
-};
-
-export type Article = {
-  author: ArticleAuthor;
-  commentCount: number | null;
-  content: string;
-  databaseId: number;
-  dates: Dates;
-  featuredImage: Cover;
-  id: string;
-  info: ContentInfo;
-  intro: string;
-  seo: SEO;
-  topics: TopicPreview[] | [];
-  thematics: ThematicPreview[] | [];
-  title: string;
-};
-
-export type RawArticle = Pick<
-  Article,
-  'commentCount' | 'databaseId' | 'id' | 'info' | 'seo' | 'title'
-> & {
-  acfPosts: RawACFPosts;
-  author: { node: ArticleAuthor };
-  contentParts: ContentParts;
-  date: string;
-  featuredImage: RawCover;
-  modified: string;
-};
-
-export type ArticlePreview = Pick<
-  Article,
-  | 'commentCount'
-  | 'dates'
-  | 'id'
-  | 'info'
-  | 'intro'
-  | 'topics'
-  | 'thematics'
-  | 'title'
-> & { featuredImage: Cover; slug: string };
-
-export type RawArticlePreview = Pick<
-  Article,
-  'commentCount' | 'id' | 'info' | 'title'
-> & {
-  acfPosts: ACFPosts;
-  contentParts: Pick<ContentParts, 'beforeMore'>;
-  date: string;
-  featuredImage: RawCover;
-  modified: string;
-  slug: string;
-};
-
-export type PostBy = {
-  post: RawArticle;
-};
-
-export type ArticleProps = {
-  comments: Comment[];
-  post: Article;
-};
-
-export type TotalArticles = {
-  posts: {
-    pageInfo: {
-      total: number;
-    };
-  };
-};
diff --git a/src/ts/types/blog.ts b/src/ts/types/blog.ts
deleted file mode 100644
index 05bdd1f..0000000
--- a/src/ts/types/blog.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { PageInfo, Slug } from './app';
-import { ArticlePreview, RawArticlePreview } from './articles';
-import { ThematicPreview, TopicPreview } from './taxonomies';
-
-export type PostsList = {
-  posts: ArticlePreview[];
-  pageInfo: PageInfo;
-};
-
-export type PostsListEdges = {
-  cursor: string;
-  node: RawArticlePreview;
-};
-
-export type RawPostsList = {
-  posts: {
-    edges: PostsListEdges[];
-    pageInfo: PageInfo;
-  };
-};
-
-export type LastPostCursor = {
-  posts: {
-    pageInfo: {
-      endCursor: string;
-    };
-  };
-};
-
-export type AllPostsSlug = {
-  posts: {
-    nodes: Slug[];
-  };
-};
-
-export type BlogPageProps = {
-  allThematics: ThematicPreview[];
-  allTopics: TopicPreview[];
-  posts: PostsList;
-  totalPosts: number;
-};
diff --git a/src/ts/types/comments.ts b/src/ts/types/comments.ts
deleted file mode 100644
index aa3fac3..0000000
--- a/src/ts/types/comments.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-//==============================================================================
-// Comments query
-//==============================================================================
-
-export type CommentAuthor = {
-  name: string;
-  gravatarUrl: string;
-  url: string;
-};
-
-export type RawCommentAuthor = {
-  node: CommentAuthor;
-};
-
-export type Comment = {
-  approved: '';
-  author: CommentAuthor;
-  databaseId: number;
-  content: string;
-  date: string;
-  parentDatabaseId: number;
-  replies: Comment[];
-};
-
-export type RawComment = Omit<Comment, 'author' | 'replies'> & {
-  author: RawCommentAuthor;
-};
-
-export type CommentsNode = {
-  nodes: RawComment[];
-};
-
-export type CommentsByPostId = {
-  comments: CommentsNode;
-};
-
-//==============================================================================
-// Comment mutations
-//==============================================================================
-
-export type CommentData = {
-  author: string;
-  authorEmail: string;
-  authorUrl: string;
-  content: string;
-  parent: number;
-  commentOn: number;
-  mutationId: string;
-};
-
-export type CreatedComment = {
-  clientMutationId: string;
-  success: boolean;
-  comment: null | {
-    approved: boolean;
-  };
-};
-
-export type CreateComment = {
-  createComment: CreatedComment;
-};
diff --git a/src/ts/types/contact.ts b/src/ts/types/contact.ts
deleted file mode 100644
index ef6847a..0000000
--- a/src/ts/types/contact.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export type ContactData = {
-  body: string;
-  mutationId: string;
-  replyTo: string;
-  subject: string;
-};
-
-export type SentEmail = {
-  clientMutationId: string;
-  message: string;
-  origin: string;
-  replyTo: string;
-  sent: boolean;
-  to: string;
-};
-
-export type SendEmail = {
-  sendEmail: SentEmail;
-};
diff --git a/src/ts/types/cover.ts b/src/ts/types/cover.ts
deleted file mode 100644
index 4df898e..0000000
--- a/src/ts/types/cover.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type Cover = {
-  altText: string;
-  sourceUrl: string;
-  title: string;
-} | null;
-
-export type RawCover = {
-  node: Cover;
-} | null;
diff --git a/src/ts/types/nav.ts b/src/ts/types/nav.ts
deleted file mode 100644
index 7cfc46b..0000000
--- a/src/ts/types/nav.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type NavItem = {
-  id: string;
-  name: string;
-  slug: string;
-};
diff --git a/src/ts/types/prism.ts b/src/ts/types/prism.ts
deleted file mode 100644
index 663bc08..0000000
--- a/src/ts/types/prism.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-export type PrismLanguages =
-  | '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 PrismDefaultPlugins =
-  | 'autoloader'
-  | 'color-scheme'
-  | 'copy-to-clipboard'
-  | 'match-braces'
-  | 'normalize-whitespace'
-  | 'show-language'
-  | 'toolbar';
-
-export type PrismPlugins =
-  | 'command-line'
-  | 'diff-highlight'
-  | 'inline-color'
-  | 'line-highlight'
-  | 'line-numbers';
-
-export type PrismProviderProps = {
-  language: PrismLanguages;
-  plugins: PrismPlugins[];
-};
diff --git a/src/ts/types/repos.ts b/src/ts/types/repos.ts
deleted file mode 100644
index 7dacacc..0000000
--- a/src/ts/types/repos.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type RepoData = {
-  created_at: string;
-  updated_at: string;
-  stargazers_count: number;
-};
-
-export type RepoAPI = 'github';
diff --git a/src/ts/types/seo.ts b/src/ts/types/seo.ts
deleted file mode 100644
index 18e3c95..0000000
--- a/src/ts/types/seo.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type SEO = {
-  title: string;
-  metaDesc: string;
-  metaRobotsNofollow: string;
-  metaRobotsNoindex: string;
-};
diff --git a/src/ts/types/taxonomies.ts b/src/ts/types/taxonomies.ts
deleted file mode 100644
index 17fc022..0000000
--- a/src/ts/types/taxonomies.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { ContentInfo, ContentParts, Dates, Slug } from './app';
-import { ArticlePreview, RawArticlePreview } from './articles';
-import { Cover, RawCover } from './cover';
-import { SEO } from './seo';
-
-//==============================================================================
-// Taxonomies base
-//==============================================================================
-
-type Taxonomy = {
-  content: string;
-  databaseId: number;
-  dates: Dates;
-  id: string;
-  info: ContentInfo;
-  intro: string;
-  posts: ArticlePreview[];
-  seo: SEO;
-  title: string;
-};
-
-type TaxonomyPreview = Pick<
-  Taxonomy,
-  'databaseId' | 'id' | 'info' | 'seo' | 'title'
-> & {
-  slug: string;
-};
-
-//==============================================================================
-// Topics
-//==============================================================================
-
-export type Topic = Taxonomy & {
-  featuredImage: Cover;
-  officialWebsite: string;
-};
-
-export type RawTopicPreview = TaxonomyPreview & {
-  featuredImage: RawCover;
-};
-
-export type TopicPreview = TaxonomyPreview & {
-  featuredImage: Cover;
-};
-
-export type AllTopics = {
-  topics: {
-    nodes: TopicPreview[];
-  };
-};
-
-export type RawTopic = TopicPreview & {
-  acfTopics: {
-    officialWebsite: string;
-    postsInTopic: RawArticlePreview[];
-  };
-  contentParts: ContentParts;
-  date: string;
-  featuredImage: RawCover;
-  modified: string;
-};
-
-export type TopicBy = {
-  topic: RawTopic;
-};
-
-export type AllTopicsSlug = {
-  topics: {
-    nodes: Slug[];
-  };
-};
-
-export type TopicProps = {
-  allTopics: TopicPreview[];
-  topic: Topic;
-};
-
-//==============================================================================
-// Thematics
-//==============================================================================
-
-export type Thematic = Taxonomy;
-
-export type ThematicPreview = TaxonomyPreview;
-
-export type AllThematics = {
-  thematics: {
-    nodes: ThematicPreview[];
-  };
-};
-
-export type RawThematic = TaxonomyPreview & {
-  acfThematics: {
-    postsInThematic: RawArticlePreview[];
-  };
-  contentParts: ContentParts;
-  date: string;
-  modified: string;
-};
-
-export type ThematicBy = {
-  thematic: RawThematic;
-};
-
-export type AllThematicsSlug = {
-  thematics: {
-    nodes: Slug[];
-  };
-};
-
-export type ThematicProps = {
-  allThematics: ThematicPreview[];
-  thematic: Thematic;
-};
diff --git a/src/utils/helpers/format.ts b/src/utils/helpers/format.ts
deleted file mode 100644
index 47a7b57..0000000
--- a/src/utils/helpers/format.ts
+++ /dev/null
@@ -1,332 +0,0 @@
-import { ParamsIds, ParamsSlug, Slug } from '@ts/types/app';
-import {
-  Article,
-  ArticlePreview,
-  RawArticle,
-  RawArticlePreview,
-} from '@ts/types/articles';
-import { Comment, RawComment } from '@ts/types/comments';
-import {
-  RawTopic,
-  RawTopicPreview,
-  RawThematic,
-  Topic,
-  TopicPreview,
-  Thematic,
-} from '@ts/types/taxonomies';
-import { settings } from '@utils/config';
-
-/**
- * Format a post preview from RawArticlePreview to ArticlePreview type.
- * @param rawPost - A post preview coming from WP GraphQL.
- * @returns A formatted post preview.
- */
-export const getFormattedPostPreview = (rawPost: RawArticlePreview) => {
-  const {
-    acfPosts,
-    commentCount,
-    contentParts,
-    date,
-    featuredImage,
-    id,
-    info,
-    modified,
-    slug,
-    title,
-  } = rawPost;
-
-  const dates = {
-    publication: date,
-    update: modified,
-  };
-
-  const topics = acfPosts.postsInTopic ? acfPosts.postsInTopic : [];
-  const thematics = acfPosts.postsInThematic ? acfPosts.postsInThematic : [];
-
-  const formattedPost: ArticlePreview = {
-    commentCount,
-    dates,
-    featuredImage: featuredImage ? featuredImage.node : null,
-    id,
-    info,
-    intro: contentParts.beforeMore,
-    slug,
-    topics,
-    thematics,
-    title,
-  };
-
-  return formattedPost;
-};
-
-/**
- * Format an array of posts list from RawArticlePreview to ArticlePreview type.
- * @param rawPosts - A posts list coming from WP GraphQL.
- * @returns A formatted posts list.
- */
-export const getFormattedPostsList = (
-  rawPosts: RawArticlePreview[]
-): ArticlePreview[] => {
-  return rawPosts
-    .filter((post) => Object.getOwnPropertyNames(post).length > 0)
-    .map((post) => {
-      return getFormattedPostPreview(post);
-    });
-};
-
-/**
- * Format a topic from RawTopic to Topic type.
- * @param rawTopic - A topic coming from WP GraphQL.
- * @returns A formatted topic.
- */
-export const getFormattedTopic = (rawTopic: RawTopic): Topic => {
-  const {
-    acfTopics,
-    contentParts,
-    databaseId,
-    date,
-    featuredImage,
-    id,
-    info,
-    modified,
-    seo,
-    title,
-  } = rawTopic;
-
-  const dates = {
-    publication: date,
-    update: modified,
-  };
-
-  const posts = getFormattedPostsList(acfTopics.postsInTopic);
-
-  const formattedTopic: Topic = {
-    content: contentParts.afterMore,
-    databaseId,
-    dates,
-    featuredImage: featuredImage ? featuredImage.node : null,
-    id,
-    info,
-    intro: contentParts.beforeMore,
-    officialWebsite: acfTopics.officialWebsite,
-    posts,
-    seo,
-    title,
-  };
-
-  return formattedTopic;
-};
-
-/**
- * Format a thematic from RawThematic to Thematic type.
- * @param rawThematic - A thematic coming from wP GraphQL.
- * @returns A formatted thematic.
- */
-export const getFormattedThematic = (rawThematic: RawThematic): Thematic => {
-  const {
-    acfThematics,
-    contentParts,
-    databaseId,
-    date,
-    id,
-    info,
-    modified,
-    seo,
-    title,
-  } = rawThematic;
-
-  const dates = {
-    publication: date,
-    update: modified,
-  };
-
-  const posts = getFormattedPostsList(acfThematics.postsInThematic);
-
-  const formattedThematic: Thematic = {
-    content: contentParts.afterMore,
-    databaseId,
-    dates,
-    id,
-    info,
-    intro: contentParts.beforeMore,
-    posts,
-    seo,
-    title,
-  };
-
-  return formattedThematic;
-};
-
-/**
- * Format a comments list from RawComment to Comment type.
- * @param rawComments - A comments list coming from WP GraphQL.
- * @returns A formatted comments list.
- */
-export const getFormattedComments = (rawComments: RawComment[]): Comment[] => {
-  const formattedComments: Comment[] = rawComments.map((comment) => {
-    const formattedComment: Comment = {
-      ...comment,
-      author: comment.author.node,
-      replies: [],
-    };
-
-    return formattedComment;
-  });
-
-  return formattedComments;
-};
-
-/**
- * Create a comments tree with replies.
- * @param comments - A flatten comments list.
- * @returns An array of comments with replies.
- */
-export const buildCommentsTree = (comments: Comment[]) => {
-  type CommentsHashTable = {
-    [key: string]: Comment;
-  };
-
-  const hashTable: CommentsHashTable = Object.create(null);
-  const commentsTree: Comment[] = [];
-
-  comments.forEach(
-    (comment) => (hashTable[comment.databaseId] = { ...comment, replies: [] })
-  );
-
-  comments.forEach((comment) => {
-    if (!comment.parentDatabaseId) {
-      commentsTree.push(hashTable[comment.databaseId]);
-    } else {
-      hashTable[comment.parentDatabaseId].replies.push(
-        hashTable[comment.databaseId]
-      );
-    }
-  });
-
-  return commentsTree;
-};
-
-export const getFormattedTopicsPreview = (
-  topics: RawTopicPreview[]
-): TopicPreview[] => {
-  const formattedTopics: TopicPreview[] = topics.map((topic) => {
-    return {
-      ...topic,
-      featuredImage: topic.featuredImage ? topic.featuredImage.node : null,
-    };
-  });
-
-  return formattedTopics;
-};
-
-/**
- * Format an article from RawArticle to Article type.
- * @param rawPost - An article coming from WP GraphQL.
- * @returns A formatted article.
- */
-export const getFormattedPost = (rawPost: RawArticle): Article => {
-  const {
-    acfPosts,
-    author,
-    commentCount,
-    contentParts,
-    databaseId,
-    date,
-    featuredImage,
-    id,
-    info,
-    modified,
-    seo,
-    title,
-  } = rawPost;
-
-  const dates = {
-    publication: date,
-    update: modified,
-  };
-
-  const topics = acfPosts.postsInTopic
-    ? getFormattedTopicsPreview(acfPosts.postsInTopic)
-    : [];
-
-  const formattedPost: Article = {
-    author: author.node,
-    commentCount,
-    content: contentParts.afterMore,
-    databaseId,
-    dates,
-    featuredImage: featuredImage ? featuredImage.node : null,
-    id,
-    info,
-    intro: contentParts.beforeMore,
-    seo,
-    topics,
-    thematics: acfPosts.postsInThematic ? acfPosts.postsInThematic : [],
-    title,
-  };
-
-  return formattedPost;
-};
-
-/**
- * Converts a date to a string by using the specified 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 = settings.locales.defaultLocale
-): string => {
-  const dateOptions: Intl.DateTimeFormatOptions = {
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-  };
-
-  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.
- * @returns {ParamsSlug} An array of params with slug.
- */
-export const getFormattedPaths = (array: Slug[]): ParamsSlug[] => {
-  return array.map((object) => {
-    return { params: { slug: object.slug } };
-  });
-};
-
-/**
- * Convert a number of pages to an array of params with ids.
- * @param {number} totalPages - The total pages.
- * @returns {ParamsIds} An array of params with ids.
- */
-export const getFormattedPageNumbers = (totalPages: number): ParamsIds[] => {
-  const paths = [];
-
-  for (let i = 1; i <= totalPages; i++) {
-    paths.push({ params: { id: `${i}` } });
-  }
-
-  return paths;
-};
diff --git a/src/utils/helpers/i18n.ts b/src/utils/helpers/i18n.ts
index c4734ad..5d19c8c 100644
--- a/src/utils/helpers/i18n.ts
+++ b/src/utils/helpers/i18n.ts
@@ -3,7 +3,7 @@ import { settings } from '@utils/config';
 import { readFile } from 'fs/promises';
 import path from 'path';
 
-type Messages = { [key: string]: string };
+export type Messages = { [key: string]: string };
 
 export const defaultLocale = settings.locales.defaultLocale;
 
diff --git a/src/utils/helpers/prism.ts b/src/utils/helpers/prism.ts
deleted file mode 100644
index a5f5787..0000000
--- a/src/utils/helpers/prism.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Check if the current block has a defined language.
- * @param classList - A list of class.
- * @returns {boolean} - True if a class starts with "language-".
- */
-const isLanguageBlock = (classList: DOMTokenList) => {
-  const classes = Array.from(classList);
-  return classes.some((className) => /language-.*/.test(className));
-};
-
-/**
- * Add automatically some classes and attributes for PrismJs.
- *
- * These classes and attributes are needed by Prism or to customize comments.
- */
-export const addPrismClasses = () => {
-  const preTags = document.getElementsByTagName('pre');
-
-  Array.from(preTags).forEach((preTag) => {
-    if (!isLanguageBlock(preTag.classList)) return;
-
-    preTag.classList.add('match-braces');
-
-    if (preTag.classList.contains('filter-output')) {
-      preTag.setAttribute('data-filter-output', '#output#');
-    }
-
-    if (preTag.classList.contains('language-bash')) {
-      preTag.classList.add('command-line');
-    } else if (!preTag.classList.contains('language-diff')) {
-      preTag.classList.add('line-numbers');
-    }
-  });
-};
diff --git a/src/utils/helpers/projects.ts b/src/utils/helpers/projects.ts
deleted file mode 100644
index 1612dae..0000000
--- a/src/utils/helpers/projects.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Project, ProjectMeta } from '@ts/types/app';
-import { readdirSync } from 'fs';
-import path from 'path';
-
-/**
- * Retrieve project's data by id.
- * @param {string} id - The filename without extension.
- * @returns {Promise<Project>} - The project data.
- */
-export const getProjectData = async (id: string): Promise<Project> => {
-  try {
-    const {
-      intro,
-      meta,
-      seo,
-      tagline,
-    }: {
-      intro: string;
-      meta: ProjectMeta & { title: string };
-      seo: { title: string; description: string };
-      tagline?: string;
-    } = await import(`../../content/projects/${id}.mdx`);
-
-    const { title, ...onlyMeta } = meta;
-
-    return {
-      id,
-      intro: intro || '',
-      meta: onlyMeta || {},
-      slug: id,
-      title,
-      seo: seo || {},
-      tagline: tagline || '',
-    };
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-};
-
-/**
- * Retrieve the projects data from filenames.
- * @param {string[]} filenames - An array of filenames.
- * @returns {Promise<Project[]>} An array of projects with meta.
- */
-const getProjectsWithMeta = async (filenames: string[]): Promise<Project[]> => {
-  return Promise.all(
-    filenames.map(async (filename) => {
-      return getProjectData(filename);
-    })
-  );
-};
-
-/**
- * Method to sort an array of projects by publication date.
- * @param {Project} a - A single project.
- * @param {Project} b - A single project.
- * @returns The result used by Array.sort() method: 1 || -1 || 0.
- */
-const sortProjectByPublicationDate = (a: Project, b: Project) => {
-  if (a.meta.publishedOn < b.meta.publishedOn) return 1;
-  if (a.meta.publishedOn > b.meta.publishedOn) return -1;
-  return 0;
-};
-
-/**
- * Retrieve all the projects filename.
- * @returns {string[]} An array of filenames.
- */
-export const getAllProjectsFilename = (): string[] => {
-  const projectsDirectory = path.join(process.cwd(), 'src/content/projects');
-  const filenames = readdirSync(projectsDirectory);
-
-  return filenames.map((filename) => filename.replace(/\.mdx$/, ''));
-};
-
-/**
- * Retrieve all projects in content folder sorted by publication date.
- * @returns {Promise<Project[]>} An array of projects.
- */
-export const getSortedProjects = async (): Promise<Project[]> => {
-  const filenames = getAllProjectsFilename();
-  const projects = await getProjectsWithMeta(filenames);
-
-  return [...projects].sort(sortProjectByPublicationDate);
-};
diff --git a/src/utils/helpers/sort.ts b/src/utils/helpers/sort.ts
deleted file mode 100644
index c1ee35d..0000000
--- a/src/utils/helpers/sort.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ArticlePreview } from '@ts/types/articles';
-import { PostsList } from '@ts/types/blog';
-
-type YearCollection = {
-  [key: string]: ArticlePreview[];
-};
-
-export const sortPostsByYear = (data: PostsList[]) => {
-  const yearCollection: YearCollection = {};
-
-  data.forEach((page) => {
-    page.posts.forEach((post) => {
-      const postYear = new Date(post.dates.publication)
-        .getFullYear()
-        .toString();
-      yearCollection[postYear] = [...(yearCollection[postYear] || []), post];
-    });
-  });
-
-  return yearCollection;
-};
diff --git a/src/utils/hooks/useGithubApi.tsx b/src/utils/hooks/useGithubApi.tsx
deleted file mode 100644
index 4b0b3b2..0000000
--- a/src/utils/hooks/useGithubApi.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { RepoData } from '@ts/types/repos';
-import useSWR, { Fetcher } from 'swr';
-
-const fetcher: Fetcher<RepoData, string> = (...args) =>
-  fetch(...args).then((res) => res.json());
-
-/**
- * Retrieve data from Github API.
- * @param repo The repo name. Format: "User/project-slug".
- * @returns {object} The data and two booleans to determine if is loading/error.
- */
-const useGithubApi = (repo: string) => {
-  const apiUrl = repo ? `https://api.github.com/repos/${repo}` : null;
-  const { data, error } = useSWR<RepoData>(apiUrl, fetcher);
-
-  return {
-    data,
-    isLoading: !error && !data,
-    isError: error,
-  };
-};
-
-export default useGithubApi;
diff --git a/src/utils/hooks/useHeadingsTree.tsx b/src/utils/hooks/useHeadingsTree.tsx
deleted file mode 100644
index f2be406..0000000
--- a/src/utils/hooks/useHeadingsTree.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { Heading } from '@ts/types/app';
-import { slugify } from '@utils/helpers/slugify';
-import { useRouter } from 'next/router';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
-const useHeadingsTree = (wrapper: string) => {
-  const router = useRouter();
-  const depths = useMemo(() => ['h2', 'h3', 'h4', 'h5', 'h6'], []);
-  const [allHeadings, setAllHeadings] =
-    useState<NodeListOf<HTMLHeadingElement>>();
-
-  useEffect(() => {
-    const query = depths
-      .map((depth) => `${wrapper} > *:not(aside, #comments) ${depth}`)
-      .join(', ');
-    const result: NodeListOf<HTMLHeadingElement> =
-      document.querySelectorAll(query);
-    setAllHeadings(result);
-  }, [depths, wrapper, router.asPath]);
-
-  const [headingsTree, setHeadingsTree] = useState<Heading[]>([]);
-
-  const getElementDepth = useCallback(
-    (el: HTMLHeadingElement) => {
-      return depths.findIndex((depth) => depth === el.localName);
-    },
-    [depths]
-  );
-
-  const formatHeadings = useCallback(
-    (headings: NodeListOf<HTMLHeadingElement>): Heading[] => {
-      const formattedHeadings: Heading[] = [];
-
-      Array.from(headings).forEach((heading) => {
-        const title: string = heading.textContent!;
-        const id = slugify(title);
-        const depth = getElementDepth(heading);
-        const children: Heading[] = [];
-
-        heading.id = id;
-
-        formattedHeadings.push({
-          depth,
-          id,
-          children,
-          title,
-        });
-      });
-
-      return formattedHeadings;
-    },
-    [getElementDepth]
-  );
-
-  const buildSubTree = useCallback(
-    (parent: Heading, currentHeading: Heading): void => {
-      if (parent.depth === currentHeading.depth - 1) {
-        parent.children.push(currentHeading);
-      } else {
-        const lastItem = parent.children[parent.children.length - 1];
-        buildSubTree(lastItem, currentHeading);
-      }
-    },
-    []
-  );
-
-  const buildTree = useCallback(
-    (headings: Heading[]): Heading[] => {
-      const tree: Heading[] = [];
-
-      headings.forEach((heading) => {
-        if (heading.depth === 0) {
-          tree.push(heading);
-        } else {
-          const lastItem = tree[tree.length - 1];
-          buildSubTree(lastItem, heading);
-        }
-      });
-
-      return tree;
-    },
-    [buildSubTree]
-  );
-
-  const getHeadingsList = useCallback(
-    (headings: NodeListOf<HTMLHeadingElement>): Heading[] => {
-      const formattedHeadings = formatHeadings(headings);
-
-      return buildTree(formattedHeadings);
-    },
-    [formatHeadings, buildTree]
-  );
-
-  useEffect(() => {
-    if (allHeadings) {
-      const headingsList = getHeadingsList(allHeadings);
-      setHeadingsTree(headingsList);
-    }
-  }, [allHeadings, getHeadingsList]);
-
-  return headingsTree;
-};
-
-export default useHeadingsTree;
diff --git a/src/utils/providers/ackee.tsx b/src/utils/providers/ackee.tsx
index c103668..0cb0166 100644
--- a/src/utils/providers/ackee.tsx
+++ b/src/utils/providers/ackee.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router';
-import { createContext, FC, useContext, useState } from 'react';
+import { createContext, FC, ReactNode, useContext, useState } from 'react';
 import useAckee from 'use-ackee';
 
 export type AckeeProps = {
@@ -10,6 +10,7 @@ export type AckeeProps = {
 };
 
 export type AckeeProviderProps = {
+  children: ReactNode;
   domain: string;
   siteId: string;
   ignoreLocalhost?: boolean;
diff --git a/src/utils/providers/prism-theme.tsx b/src/utils/providers/prism-theme.tsx
index 2ed8454..62bcf56 100644
--- a/src/utils/providers/prism-theme.tsx
+++ b/src/utils/providers/prism-theme.tsx
@@ -2,6 +2,7 @@ import { LocalStorage } from '@services/local-storage';
 import {
   createContext,
   FC,
+  ReactNode,
   useCallback,
   useContext,
   useEffect,
@@ -22,6 +23,7 @@ export type UsePrismThemeProps = {
 
 export type PrismThemeProviderProps = {
   attribute?: string;
+  children: ReactNode;
   storageKey?: string;
   themes?: PrismTheme[];
 };
-- 
cgit v1.2.3


From 732d0943f8041d76262222a092b014f2557085ef Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 2 May 2022 18:57:29 +0200
Subject: chore: add homepage

---
 src/components/atoms/lists/list.module.scss        |  16 +
 src/components/atoms/lists/list.stories.tsx        |  13 +-
 src/components/atoms/lists/list.tsx                |   4 +-
 src/components/molecules/layout/card.module.scss   |   3 +-
 src/components/molecules/layout/card.tsx           |   2 +-
 src/components/molecules/layout/page-header.tsx    |   2 +-
 src/components/molecules/nav/nav.stories.tsx       |  26 ++
 src/components/molecules/nav/nav.tsx               |   7 +-
 .../organisms/layout/cards-list.module.scss        |   4 +-
 .../organisms/layout/cards-list.stories.tsx        |  13 +
 src/components/organisms/layout/cards-list.tsx     |   8 +-
 src/components/templates/layout/layout.module.scss |   9 -
 src/components/templates/layout/layout.stories.tsx |  10 +-
 src/components/templates/layout/layout.tsx         | 107 ++++--
 src/pages/index.tsx                                | 365 +++++++++++++++++++++
 src/services/graphql/articles.ts                   |  52 ++-
 src/styles/pages/Home.module.scss                  |  49 ---
 src/styles/pages/home.module.scss                  |  36 ++
 src/utils/hooks/use-settings.tsx                   | 112 +++++++
 19 files changed, 745 insertions(+), 93 deletions(-)
 create mode 100644 src/pages/index.tsx
 delete mode 100644 src/styles/pages/Home.module.scss
 create mode 100644 src/styles/pages/home.module.scss
 create mode 100644 src/utils/hooks/use-settings.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/atoms/lists/list.module.scss b/src/components/atoms/lists/list.module.scss
index df3b49c..f647072 100644
--- a/src/components/atoms/lists/list.module.scss
+++ b/src/components/atoms/lists/list.module.scss
@@ -1,3 +1,5 @@
+@use "@styles/abstracts/placeholders";
+
 .list {
   margin: 0;
 
@@ -36,4 +38,18 @@
       margin-bottom: var(--spacing-2xs);
     }
   }
+
+  &--flex {
+    @extend %reset-list;
+
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--spacing-sm);
+  }
+
+  &--flex &--flex {
+    display: initial;
+    position: relative;
+    top: var(--spacing-2xs);
+  }
 }
diff --git a/src/components/atoms/lists/list.stories.tsx b/src/components/atoms/lists/list.stories.tsx
index 3a80962..54fdd3a 100644
--- a/src/components/atoms/lists/list.stories.tsx
+++ b/src/components/atoms/lists/list.stories.tsx
@@ -39,8 +39,8 @@ export default {
       control: {
         type: 'select',
       },
-      description: 'The list kind: ordered or unordered.',
-      options: ['ordered', 'unordered'],
+      description: 'The list kind: flex, ordered or unordered.',
+      options: ['flex', 'ordered', 'unordered'],
       table: {
         category: 'Options',
         defaultValue: { summary: 'unordered' },
@@ -71,6 +71,15 @@ const items: ListItem[] = [
   { id: 'item-4', value: 'Item 4' },
 ];
 
+/**
+ * List Stories - Flex list
+ */
+export const Flex = Template.bind({});
+Flex.args = {
+  items,
+  kind: 'flex',
+};
+
 /**
  * List Stories - Ordered list
  */
diff --git a/src/components/atoms/lists/list.tsx b/src/components/atoms/lists/list.tsx
index 6726802..711ade1 100644
--- a/src/components/atoms/lists/list.tsx
+++ b/src/components/atoms/lists/list.tsx
@@ -30,9 +30,9 @@ export type ListProps = {
    */
   itemsClassName?: string;
   /**
-   * The list kind (ordered or unordered).
+   * The list kind.
    */
-  kind?: 'ordered' | 'unordered';
+  kind?: 'ordered' | 'unordered' | 'flex';
   /**
    * Set margin between list items. Default: true.
    */
diff --git a/src/components/molecules/layout/card.module.scss b/src/components/molecules/layout/card.module.scss
index 85c319a..d5b9836 100644
--- a/src/components/molecules/layout/card.module.scss
+++ b/src/components/molecules/layout/card.module.scss
@@ -19,7 +19,8 @@
 
   .cover {
     align-self: flex-start;
-    max-height: fun.convert-px(150);
+    place-content: center;
+    height: fun.convert-px(150);
     margin: auto;
     border-bottom: fun.convert-px(1) solid var(--color-border);
   }
diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx
index 15927e9..89f100e 100644
--- a/src/components/molecules/layout/card.tsx
+++ b/src/components/molecules/layout/card.tsx
@@ -93,7 +93,7 @@ const Card: FC<CardProps> = ({
             {title}
           </Heading>
         </header>
-        {tagline && <div className={styles.tagline}>{tagline}</div>}
+        <div className={styles.tagline}>{tagline}</div>
         {meta && (
           <footer className={styles.footer}>
             <DescriptionList
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index 174e246..1663085 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -11,7 +11,7 @@ export type PageHeaderProps = {
   /**
    * The page introduction.
    */
-  intro?: string;
+  intro?: string | JSX.Element;
   /**
    * The page metadata.
    */
diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx
index 25455fd..5cef5f0 100644
--- a/src/components/molecules/nav/nav.stories.tsx
+++ b/src/components/molecules/nav/nav.stories.tsx
@@ -11,6 +11,19 @@ export default {
   title: 'Molecules/Navigation/Nav',
   component: NavComponent,
   argTypes: {
+    'aria-label': {
+      control: {
+        type: 'text',
+      },
+      description: 'An accessible name for the navigation.',
+      table: {
+        category: 'Accessibility',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
@@ -46,6 +59,19 @@ export default {
         required: true,
       },
     },
+    listClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the navigation list.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
   },
   decorators: [
     (Story) => (
diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx
index 2666ea2..581f813 100644
--- a/src/components/molecules/nav/nav.tsx
+++ b/src/components/molecules/nav/nav.tsx
@@ -23,6 +23,10 @@ export type NavItem = {
 };
 
 export type NavProps = {
+  /**
+   * An accessible name.
+   */
+  'aria-label'?: string;
   /**
    * Set additional classnames to the navigation wrapper.
    */
@@ -51,6 +55,7 @@ const Nav: FC<NavProps> = ({
   items,
   kind,
   listClassName = '',
+  ...props
 }) => {
   const kindClass = `nav--${kind}`;
 
@@ -71,7 +76,7 @@ const Nav: FC<NavProps> = ({
   };
 
   return (
-    <nav className={`${styles[kindClass]} ${className}`}>
+    <nav className={`${styles[kindClass]} ${className}`} {...props}>
       <ul className={`${styles.nav__list} ${listClassName}`}>{getItems()}</ul>
     </nav>
   );
diff --git a/src/components/organisms/layout/cards-list.module.scss b/src/components/organisms/layout/cards-list.module.scss
index 9fe428c..2763585 100644
--- a/src/components/organisms/layout/cards-list.module.scss
+++ b/src/components/organisms/layout/cards-list.module.scss
@@ -1,12 +1,10 @@
 @use "@styles/abstracts/placeholders";
 
 .wrapper {
-  --card-width: 30ch;
-
   display: grid;
   grid-template-columns: repeat(
     auto-fit,
-    min(calc(100vw - (var(--spacing-md) * 2)), var(--card-width))
+    min(calc(100vw - (var(--spacing-md) * 2)), var(--card-width, 30ch))
   );
   gap: var(--spacing-sm);
   place-content: center;
diff --git a/src/components/organisms/layout/cards-list.stories.tsx b/src/components/organisms/layout/cards-list.stories.tsx
index 7ff4365..fe0ebfd 100644
--- a/src/components/organisms/layout/cards-list.stories.tsx
+++ b/src/components/organisms/layout/cards-list.stories.tsx
@@ -12,6 +12,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,
+      },
+    },
     coverFit: {
       control: {
         type: 'select',
diff --git a/src/components/organisms/layout/cards-list.tsx b/src/components/organisms/layout/cards-list.tsx
index 33ffe23..1558d7c 100644
--- a/src/components/organisms/layout/cards-list.tsx
+++ b/src/components/organisms/layout/cards-list.tsx
@@ -14,6 +14,10 @@ export type CardsListItem = Omit<
 };
 
 export type CardsListProps = {
+  /**
+   * Set additional classnames to the list wrapper.
+   */
+  className?: string;
   /**
    * The cover fit.
    */
@@ -38,6 +42,7 @@ export type CardsListProps = {
  * Return a list of Card components.
  */
 const CardsList: FC<CardsListProps> = ({
+  className = '',
   coverFit,
   items,
   kind = 'unordered',
@@ -70,9 +75,10 @@ const CardsList: FC<CardsListProps> = ({
 
   return (
     <List
+      kind="flex"
       items={getCards(items)}
       withMargin={false}
-      className={`${styles.wrapper} ${styles[kindModifier]}`}
+      className={`${styles.wrapper} ${styles[kindModifier]} ${className}`}
     />
   );
 };
diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss
index 3533257..806d2d7 100644
--- a/src/components/templates/layout/layout.module.scss
+++ b/src/components/templates/layout/layout.module.scss
@@ -1,15 +1,6 @@
 @use "@styles/abstracts/functions" as fun;
 @use "@styles/abstracts/mixins" as mix;
 
-:global {
-  #__next {
-    flex: 1;
-    display: flex;
-    flex-flow: column nowrap;
-    min-height: 100vh;
-  }
-}
-
 .header {
   border-bottom: fun.convert-px(3) solid var(--color-border-light);
 }
diff --git a/src/components/templates/layout/layout.stories.tsx b/src/components/templates/layout/layout.stories.tsx
index f3579e3..2415412 100644
--- a/src/components/templates/layout/layout.stories.tsx
+++ b/src/components/templates/layout/layout.stories.tsx
@@ -36,7 +36,15 @@ export default {
   decorators: [
     (Story) => (
       <IntlProvider locale="en">
-        <div id="__next">
+        <div
+          id="__next"
+          style={{
+            flex: 1,
+            display: 'flex',
+            flexFlow: 'column nowrap',
+            minHeight: '100vh',
+          }}
+        >
           <Story />
         </div>
       </IntlProvider>
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index 601ced4..e1be1af 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -1,4 +1,3 @@
-import photo from '@assets/images/armand-philippot.jpg';
 import ButtonLink from '@components/atoms/buttons/button-link';
 import Career from '@components/atoms/icons/career';
 import CCBySA from '@components/atoms/icons/cc-by-sa';
@@ -8,13 +7,19 @@ import Home from '@components/atoms/icons/home';
 import PostsStack from '@components/atoms/icons/posts-stack';
 import Main from '@components/atoms/layout/main';
 import NoScript from '@components/atoms/layout/no-script';
-import Footer from '@components/organisms/layout/footer';
-import Header, { HeaderProps } from '@components/organisms/layout/header';
-import { settings } from '@utils/config';
+import Footer, { FooterProps } from '@components/organisms/layout/footer';
+import Header, { type HeaderProps } from '@components/organisms/layout/header';
+import useSettings from '@utils/hooks/use-settings';
+import Script from 'next/script';
 import { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
+import { Person, SearchAction, WebSite, WithContext } from 'schema-dts';
 import styles from './layout.module.scss';
 
+export type QueryAction = SearchAction & {
+  'query-input': string;
+};
+
 export type LayoutProps = Pick<HeaderProps, 'isHome'> & {
   /**
    * The layout main content.
@@ -33,6 +38,9 @@ export type LayoutProps = Pick<HeaderProps, 'isHome'> & {
  */
 const Layout: FC<LayoutProps> = ({ children, isHome, ...props }) => {
   const intl = useIntl();
+  const { website } = useSettings();
+  const { baseline, copyright, locales, name, picture, url } = website;
+
   const skipToContent = intl.formatMessage({
     defaultMessage: 'Skip to content',
     description: 'Layout: Skip to content link',
@@ -45,12 +53,12 @@ const Layout: FC<LayoutProps> = ({ children, isHome, ...props }) => {
     id: '7jVUT6',
   });
 
-  const copyright = {
+  const copyrightData = {
     dates: {
-      start: settings.copyright.startYear,
-      end: settings.copyright.endYear,
+      start: copyright.start,
+      end: copyright.end,
     },
-    owner: settings.name,
+    owner: name,
     icon: <CCBySA />,
   };
 
@@ -80,21 +88,77 @@ const Layout: FC<LayoutProps> = ({ children, isHome, ...props }) => {
     id: 'AE4kCD',
   });
 
-  const nav: HeaderProps['nav'] = [
-    { id: 'home', label: homeLabel, href: '#', logo: <Home /> },
-    { id: 'blog', label: blogLabel, href: '#', logo: <PostsStack /> },
+  const mainNav: HeaderProps['nav'] = [
+    { id: 'home', label: homeLabel, href: '/', logo: <Home /> },
+    { id: 'blog', label: blogLabel, href: '/blog', logo: <PostsStack /> },
     {
       id: 'projects',
       label: projectsLabel,
-      href: '#',
+      href: '/projets',
       logo: <ComputerScreen />,
     },
-    { id: 'cv', label: cvLabel, href: '#', logo: <Career /> },
-    { id: 'contact', label: contactLabel, href: '#', logo: <Envelop /> },
+    { id: 'cv', label: cvLabel, href: '/cv', logo: <Career /> },
+    { id: 'contact', label: contactLabel, href: '/contact', logo: <Envelop /> },
+  ];
+
+  const legalNoticeLabel = intl.formatMessage({
+    defaultMessage: 'Legal notice',
+    description: 'Layout: Legal notice label',
+    id: 'nwbzKm',
+  });
+
+  const footerNav: FooterProps['navItems'] = [
+    { id: 'legal-notice', label: legalNoticeLabel, href: '/mentions-legales' },
   ];
 
+  const searchActionSchema: QueryAction = {
+    '@type': 'SearchAction',
+    target: {
+      '@type': 'EntryPoint',
+      urlTemplate: `${url}/recherche?s={search_term_string}`,
+    },
+    query: 'required',
+    'query-input': 'required name=search_term_string',
+  };
+
+  const schemaJsonLd: WithContext<WebSite> = {
+    '@context': 'https://schema.org',
+    '@id': `${url}`,
+    '@type': 'WebSite',
+    name: name,
+    description: baseline,
+    url: url,
+    author: { '@id': `${url}/#branding` },
+    copyrightYear: Number(copyright.start),
+    creator: { '@id': `${url}/#branding` },
+    editor: { '@id': `${url}/#branding` },
+    inLanguage: locales.default,
+    potentialAction: searchActionSchema,
+  };
+
+  const brandingSchema: WithContext<Person> = {
+    '@context': 'https://schema.org',
+    '@type': 'Person',
+    '@id': `${url}/#branding`,
+    name: name,
+    url: url,
+    jobTitle: baseline,
+    image: picture.src,
+    subjectOf: { '@id': `${url}` },
+  };
+
   return (
     <>
+      <Script
+        id="schema-layout"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      ></Script>
+      <Script
+        id="schema-branding"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(brandingSchema) }}
+      />
       <noscript>
         <div className={styles['noscript-spacing']}></div>
       </noscript>
@@ -103,10 +167,10 @@ const Layout: FC<LayoutProps> = ({ children, isHome, ...props }) => {
         {skipToContent}
       </ButtonLink>
       <Header
-        title={settings.name}
-        baseline={settings.baseline.fr}
-        photo={photo.src}
-        nav={nav}
+        title={name}
+        baseline={baseline}
+        photo={picture}
+        nav={mainNav}
         isHome={isHome}
         className={styles.header}
         withLink={true}
@@ -114,7 +178,12 @@ const Layout: FC<LayoutProps> = ({ children, isHome, ...props }) => {
       <Main id="main" className={styles.main}>
         <article {...props}>{children}</article>
       </Main>
-      <Footer copyright={copyright} topId="top" className={styles.footer} />
+      <Footer
+        copyright={copyrightData}
+        navItems={footerNav}
+        topId="top"
+        className={styles.footer}
+      />
       <noscript>
         <NoScript message={noScript} position="top" />
       </noscript>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..c965320
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,365 @@
+import FeedIcon from '@assets/images/icon-feed.svg';
+import ButtonLink from '@components/atoms/buttons/button-link';
+import Envelop from '@components/atoms/icons/envelop';
+import Column, { type ColumnProps } from '@components/atoms/layout/column';
+import Section, { type SectionProps } from '@components/atoms/layout/section';
+import List, { type ListItem } from '@components/atoms/lists/list';
+import ResponsiveImage, {
+  type ResponsiveImageProps,
+} from '@components/molecules/images/responsive-image';
+import Columns, {
+  type ColumnsProps,
+} from '@components/molecules/layout/columns';
+import CardsList, {
+  type CardsListItem,
+} from '@components/organisms/layout/cards-list';
+import Layout from '@components/templates/layout/layout';
+import HomePageContent from '@content/pages/homepage.mdx';
+import { getArticlesCard } from '@services/graphql/articles';
+import styles from '@styles/pages/home.module.scss';
+import { ArticleCard } from '@ts/types/app';
+import { loadTranslation, type Messages } from '@utils/helpers/i18n';
+import useSettings from '@utils/hooks/use-settings';
+import { NestedMDXComponents } from 'mdx/types';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import Script from 'next/script';
+import { ReactElement } from 'react';
+import { useIntl } from 'react-intl';
+import { Graph, WebPage } from 'schema-dts';
+
+type HomeProps = {
+  recentPosts: ArticleCard[];
+  translation?: Messages;
+};
+
+/**
+ * Home page.
+ */
+const HomePage: NextPage<HomeProps> = ({ recentPosts }) => {
+  const intl = useIntl();
+
+  /**
+   * Retrieve a list of coding links.
+   *
+   * @returns {JSX.Element} - A list of links.
+   */
+  const CodingLinks = (): JSX.Element => {
+    const links: ListItem[] = [
+      {
+        id: 'web-development',
+        value: (
+          <ButtonLink target="/thematique/developpement-web">
+            {intl.formatMessage({
+              defaultMessage: 'Web development',
+              description: 'HomePage: link to web development thematic',
+              id: 'vkF/RP',
+            })}
+          </ButtonLink>
+        ),
+      },
+      {
+        id: 'projects',
+        value: (
+          <ButtonLink target="/projets">
+            {intl.formatMessage({
+              defaultMessage: 'Projects',
+              description: 'HomePage: link to projects',
+              id: 'N44SOc',
+            })}
+          </ButtonLink>
+        ),
+      },
+    ];
+
+    return <List kind="flex" items={links} className={styles.list} />;
+  };
+
+  /**
+   * Retrieve a list of Coldark repositories.
+   *
+   * @returns {JSX.Element} - A list of links.
+   */
+  const ColdarkRepos = (): JSX.Element => {
+    const links: ListItem[] = [
+      {
+        id: 'coldark-github',
+        value: (
+          <ButtonLink
+            target="https://github.com/ArmandPhilippot/coldark"
+            external={true}
+          >
+            {intl.formatMessage({
+              defaultMessage: 'Github',
+              description: 'HomePage: Github link',
+              id: '3f3PzH',
+            })}
+          </ButtonLink>
+        ),
+      },
+      {
+        id: 'coldark-gitlab',
+        value: (
+          <ButtonLink
+            target="https://gitlab.com/ArmandPhilippot/coldark"
+            external={true}
+          >
+            {intl.formatMessage({
+              defaultMessage: 'Gitlab',
+              description: 'HomePage: Gitlab link',
+              id: '7AnwZ7',
+            })}
+          </ButtonLink>
+        ),
+      },
+    ];
+
+    return <List kind="flex" items={links} className={styles.list} />;
+  };
+
+  /**
+   * Retrieve a list of links related to Free thematic.
+   *
+   * @returns {JSX.Element} - A list of links.
+   */
+  const LibreLinks = (): JSX.Element => {
+    const links: ListItem[] = [
+      {
+        id: 'free',
+        value: (
+          <ButtonLink target="/thematique/libre">
+            {intl.formatMessage({
+              defaultMessage: 'Free',
+              description: 'HomePage: link to free thematic',
+              id: 'w8GrOf',
+            })}
+          </ButtonLink>
+        ),
+      },
+      {
+        id: 'linux',
+        value: (
+          <ButtonLink target="/thematique/linux">
+            {intl.formatMessage({
+              defaultMessage: 'Linux',
+              description: 'HomePage: link to Linux thematic',
+              id: 'jASD7k',
+            })}
+          </ButtonLink>
+        ),
+      },
+    ];
+
+    return <List kind="flex" items={links} className={styles.list} />;
+  };
+
+  /**
+   * Retrieve the Shaarli link.
+   *
+   * @returns {JSX.Element} - A list of links
+   */
+  const ShaarliLink = (): JSX.Element => {
+    const links: ListItem[] = [
+      {
+        id: 'shaarli',
+        value: (
+          <ButtonLink target="https://shaarli.armandphilippot.com/">
+            {intl.formatMessage({
+              defaultMessage: 'Shaarli',
+              description: 'HomePage: link to Shaarli',
+              id: 'i5L19t',
+            })}
+          </ButtonLink>
+        ),
+      },
+    ];
+
+    return <List kind="flex" items={links} className={styles.list} />;
+  };
+
+  /**
+   * Retrieve the additional links.
+   *
+   * @returns {JSX.Element} - A list of links.
+   */
+  const MoreLinks = (): JSX.Element => {
+    const links: ListItem[] = [
+      {
+        id: 'contact-me',
+        value: (
+          <ButtonLink target="/contact">
+            <Envelop className={styles.icon} />
+            {intl.formatMessage({
+              defaultMessage: 'Contact me',
+              description: 'HomePage: contact button text',
+              id: 'sO/Iwj',
+            })}
+          </ButtonLink>
+        ),
+      },
+      {
+        id: 'rss-feed',
+        value: (
+          <ButtonLink target="/feed">
+            <FeedIcon className={`${styles.icon} ${styles['icon--feed']}`} />
+            {intl.formatMessage({
+              defaultMessage: 'Subscribe',
+              description: 'HomePage: RSS feed subscription text',
+              id: 'T4YA64',
+            })}
+          </ButtonLink>
+        ),
+      },
+    ];
+
+    return <List kind="flex" items={links} className={styles.list} />;
+  };
+
+  /**
+   * Get a cards list of recent posts.
+   *
+   * @returns {JSX.Element} - The cards list.
+   */
+  const getRecentPosts = (): JSX.Element => {
+    const posts: CardsListItem[] = recentPosts.map((post) => {
+      return {
+        cover: post.cover,
+        id: post.slug,
+        meta: [
+          {
+            id: 'publication',
+            term: intl.formatMessage({
+              defaultMessage: 'Published on:',
+              description: 'HomePage: publication date label',
+              id: 'pT5nHk',
+            }),
+            value: [post.dates.publication],
+          },
+        ],
+        title: post.title,
+        url: `/article/${post.slug}`,
+      };
+    });
+
+    return (
+      <CardsList
+        items={posts}
+        titleLevel={3}
+        className={`${styles.list} ${styles['list--cards']}`}
+      />
+    );
+  };
+
+  /**
+   * Create the page sections.
+   *
+   * @param {object} obj - An object containing the section body.
+   * @param {ReactElement[]} obj.children - The section body.
+   * @returns {JSX.Element} A section element.
+   */
+  const getSection = ({
+    children,
+    variant,
+  }: {
+    children: ReactElement[];
+    variant: SectionProps['variant'];
+  }): JSX.Element => {
+    const [headingEl, ...content] = children;
+    const title = headingEl.props.children;
+
+    return (
+      <Section
+        title={title}
+        content={content}
+        variant={variant}
+        className={styles.section}
+      />
+    );
+  };
+
+  const components: NestedMDXComponents = {
+    CodingLinks: CodingLinks,
+    ColdarkRepos: ColdarkRepos,
+    Column: (props: ColumnProps) => <Column {...props} />,
+    Columns: (props: ColumnsProps) => (
+      <Columns className={styles.columns} {...props} />
+    ),
+    Image: (props: ResponsiveImageProps) => <ResponsiveImage {...props} />,
+    LibreLinks: LibreLinks,
+    MoreLinks: MoreLinks,
+    RecentPosts: getRecentPosts,
+    Section: getSection,
+    ShaarliLink: ShaarliLink,
+  };
+
+  const { website } = useSettings();
+
+  const pageTitle = intl.formatMessage(
+    {
+      defaultMessage: '{websiteName} | Front-end developer: WordPress/React',
+      description: 'HomePage: SEO - Page title',
+      id: 'PXp2hv',
+    },
+    { websiteName: website.name }
+  );
+  const pageDescription = intl.formatMessage(
+    {
+      defaultMessage:
+        '{websiteName} is a front-end developer located in France. He codes and he writes mostly about web development and open-source.',
+      description: 'HomePage: SEO - Meta description',
+      id: 'tMuNTy',
+    },
+    { websiteName: website.name }
+  );
+
+  const webpageSchema: WebPage = {
+    '@id': `${website.url}/#home`,
+    '@type': 'WebPage',
+    name: pageTitle,
+    description: pageDescription,
+    author: { '@id': `${website.url}/#branding` },
+    creator: { '@id': `${website.url}/#branding` },
+    editor: { '@id': `${website.url}/#branding` },
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${website.url}`,
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema],
+  };
+
+  return (
+    <Layout>
+      <Head>
+        <title>{pageTitle}</title>
+        <meta name="description" content={pageDescription} />
+        <meta property="og:url" content={website.url} />
+        <meta property="og:title" content={pageTitle} />
+        <meta property="og:description" content={pageDescription} />
+      </Head>
+      <Script
+        id="schema-homepage"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <HomePageContent components={components} />
+    </Layout>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const translation = await loadTranslation(locale);
+  const recentPosts = await getArticlesCard({ first: 3 });
+
+  return {
+    props: {
+      recentPosts,
+      translation,
+    },
+  };
+};
+
+export default HomePage;
diff --git a/src/services/graphql/articles.ts b/src/services/graphql/articles.ts
index e5ce7a5..7aff3e0 100644
--- a/src/services/graphql/articles.ts
+++ b/src/services/graphql/articles.ts
@@ -1,10 +1,19 @@
-import { Article } from '@ts/types/app';
-import { RawArticle, TotalItems } from '@ts/types/raw-data';
+import { type Article, type ArticleCard } from '@ts/types/app';
+import {
+  type RawArticle,
+  type RawArticlePreview,
+  type TotalItems,
+} from '@ts/types/raw-data';
 import { getAuthorFromRawData } from '@utils/helpers/author';
+import { getDates } from '@utils/helpers/dates';
 import { getImageFromRawData } from '@utils/helpers/images';
 import { getPageLinkFromRawData } from '@utils/helpers/pages';
 import { EdgesVars, fetchAPI, getAPIUrl, PageInfo } from './api';
-import { articlesQuery, totalArticlesQuery } from './articles.query';
+import {
+  articlesCardQuery,
+  articlesQuery,
+  totalArticlesQuery,
+} from './articles.query';
 
 /**
  * Retrieve the total number of articles.
@@ -102,3 +111,40 @@ export const getArticles = async ({
     pageInfo: response.posts.pageInfo,
   };
 };
+
+/**
+ * Convert a raw article preview to an article card.
+ *
+ * @param {RawArticlePreview} data - A raw article preview.
+ * @returns {ArticleCard} An article card.
+ */
+const getArticleCardFromRawData = (data: RawArticlePreview): ArticleCard => {
+  const { databaseId, date, featuredImage, slug, title } = data;
+
+  return {
+    cover: featuredImage ? getImageFromRawData(featuredImage.node) : undefined,
+    dates: getDates(date, ''),
+    id: databaseId,
+    slug,
+    title,
+  };
+};
+
+/**
+ * Retrieve the given number of article cards from API.
+ *
+ * @param {EdgesVars} obj - An object.
+ * @param {number} obj.first - The number of articles.
+ * @returns {Promise<ArticleCard[]>} - The article cards data.
+ */
+export const getArticlesCard = async ({
+  first,
+}: EdgesVars): Promise<ArticleCard[]> => {
+  const response = await fetchAPI<RawArticlePreview, typeof articlesCardQuery>({
+    api: getAPIUrl(),
+    query: articlesCardQuery,
+    variables: { first },
+  });
+
+  return response.posts.nodes.map((node) => getArticleCardFromRawData(node));
+};
diff --git a/src/styles/pages/Home.module.scss b/src/styles/pages/Home.module.scss
deleted file mode 100644
index 8225a57..0000000
--- a/src/styles/pages/Home.module.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/placeholders";
-
-.links-list {
-  @extend %flex-list;
-
-  gap: var(--spacing-md);
-  margin: 0 0 var(--spacing-md);
-}
-
-.icon--feed {
-  width: fun.convert-px(20);
-}
-
-:global {
-  [data-theme="dark"] {
-    :local {
-      .icon--feed {
-        filter: brightness(0.8) contrast(1.1);
-      }
-    }
-  }
-}
-
-.section {
-  --icon-size: #{fun.convert-px(20)};
-
-  composes: grid from "@styles/layout/_grid.scss";
-  padding: var(--spacing-md) 0;
-  background: var(--color-bg-secondary);
-
-  &:not(:last-child) {
-    border-bottom: fun.convert-px(1) solid var(--color-border);
-  }
-
-  &:nth-child(2n) {
-    background: var(--color-bg);
-  }
-
-  > * {
-    grid-column: 2;
-  }
-
-  :global {
-    .wp-block-columns {
-      margin: 0 0 var(--spacing-md);
-    }
-  }
-}
diff --git a/src/styles/pages/home.module.scss b/src/styles/pages/home.module.scss
new file mode 100644
index 0000000..873a5a9
--- /dev/null
+++ b/src/styles/pages/home.module.scss
@@ -0,0 +1,36 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+.section {
+  --card-width: 25ch;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
+}
+
+.columns {
+  margin: 0 0 var(--spacing-sm);
+}
+
+.list {
+  margin: 0 0 var(--spacing-sm);
+
+  &--cards {
+    @include mix.media("screen") {
+      @include mix.dimensions("md") {
+        margin: 0 calc(var(--spacing-sm) * -1) var(--spacing-sm);
+      }
+    }
+  }
+}
+
+.icon {
+  --icon-size: #{fun.convert-px(20)};
+
+  margin-right: var(--spacing-2xs);
+
+  &--feed {
+    width: var(--icon-size);
+  }
+}
diff --git a/src/utils/hooks/use-settings.tsx b/src/utils/hooks/use-settings.tsx
new file mode 100644
index 0000000..a45e934
--- /dev/null
+++ b/src/utils/hooks/use-settings.tsx
@@ -0,0 +1,112 @@
+import photo from '@assets/images/armand-philippot.jpg';
+import { settings } from '@utils/config';
+import { useRouter } from 'next/router';
+
+export type BlogSettings = {
+  /**
+   * The number of posts per page.
+   */
+  postsPerPage: number;
+};
+
+export type CopyrightSettings = {
+  /**
+   * The copyright end year.
+   */
+  end: string;
+  /**
+   * The copyright start year.
+   */
+  start: string;
+};
+
+export type LocaleSettings = {
+  /**
+   * The default locale.
+   */
+  default: string;
+  /**
+   * The supported locales.
+   */
+  supported: string[];
+};
+
+export type PictureSettings = {
+  /**
+   * The picture height.
+   */
+  height: number;
+  /**
+   * The picture url.
+   */
+  src: string;
+  /**
+   * The picture width.
+   */
+  width: number;
+};
+
+export type WebsiteSettings = {
+  /**
+   * The website name.
+   */
+  name: string;
+  /**
+   * The website baseline.
+   */
+  baseline: string;
+  /**
+   * The website copyright dates.
+   */
+  copyright: CopyrightSettings;
+  /**
+   * The website locales.
+   */
+  locales: LocaleSettings;
+  /**
+   * A picture representing the website.
+   */
+  picture: PictureSettings;
+  /**
+   * The website url.
+   */
+  url: string;
+};
+
+export type UseSettingsReturn = {
+  blog: BlogSettings;
+  website: WebsiteSettings;
+};
+
+/**
+ * Retrieve the website and blog settings.
+ *
+ * @returns {UseSettingsReturn} - An object describing settings.
+ */
+const useSettings = (): UseSettingsReturn => {
+  const { baseline, copyright, locales, name, postsPerPage, url } = settings;
+  const router = useRouter();
+  const locale = router.locale || locales.defaultLocale;
+
+  return {
+    blog: {
+      postsPerPage,
+    },
+    website: {
+      baseline: locale.startsWith('en') ? baseline.en : baseline.fr,
+      copyright: {
+        end: copyright.endYear,
+        start: copyright.startYear,
+      },
+      locales: {
+        default: locales.defaultLocale,
+        supported: locales.supported,
+      },
+      name,
+      picture: photo,
+      url,
+    },
+  };
+};
+
+export default useSettings;
-- 
cgit v1.2.3


From 339c6957fe92c4ec1809159f09c55201d3794c18 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 6 May 2022 18:21:16 +0200
Subject: chore: add a Contact page

---
 src/components/atoms/layout/notice.stories.tsx     |  13 ++
 src/components/atoms/layout/notice.tsx             |  14 +-
 .../organisms/forms/contact-form.stories.tsx       |   2 +-
 .../organisms/forms/contact-form.test.tsx          |   4 +-
 src/components/organisms/forms/contact-form.tsx    |  18 +-
 src/pages/contact.tsx                              | 181 +++++++++++++++++++++
 src/services/graphql/api.ts                        |  26 ++-
 src/services/graphql/contact.mutation.ts           |  25 +++
 src/services/graphql/contact.ts                    |  26 +++
 src/styles/pages/contact.module.scss               |   3 +
 src/utils/config.ts                                |   1 +
 src/utils/hooks/use-settings.tsx                   |   8 +-
 12 files changed, 305 insertions(+), 16 deletions(-)
 create mode 100644 src/pages/contact.tsx
 create mode 100644 src/services/graphql/contact.mutation.ts
 create mode 100644 src/services/graphql/contact.ts
 create mode 100644 src/styles/pages/contact.module.scss

(limited to 'src/utils/hooks')

diff --git a/src/components/atoms/layout/notice.stories.tsx b/src/components/atoms/layout/notice.stories.tsx
index 62f4cba..dedf834 100644
--- a/src/components/atoms/layout/notice.stories.tsx
+++ b/src/components/atoms/layout/notice.stories.tsx
@@ -8,6 +8,19 @@ export default {
   title: 'Atoms/Layout/Notice',
   component: NoticeComponent,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the notice wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     kind: {
       control: {
         type: 'select',
diff --git a/src/components/atoms/layout/notice.tsx b/src/components/atoms/layout/notice.tsx
index 115bd9c..a0d1d3e 100644
--- a/src/components/atoms/layout/notice.tsx
+++ b/src/components/atoms/layout/notice.tsx
@@ -4,6 +4,10 @@ import styles from './notice.module.scss';
 export type NoticeKind = 'error' | 'info' | 'success' | 'warning';
 
 export type NoticeProps = {
+  /**
+   * Set additional classnames to the notice wrapper.
+   */
+  className?: string;
   /**
    * The notice kind.
    */
@@ -19,11 +23,15 @@ export type NoticeProps = {
  *
  * Render a colored message depending on notice kind.
  */
-const Notice: FC<NoticeProps> = ({ kind, message }) => {
+const Notice: FC<NoticeProps> = ({ className = '', kind, message }) => {
   const kindClass = `wrapper--${kind}`;
 
-  return (
-    <div className={`${styles.wrapper} ${styles[kindClass]}`}>{message}</div>
+  return message ? (
+    <div className={`${styles.wrapper} ${styles[kindClass]} ${className}`}>
+      {message}
+    </div>
+  ) : (
+    <></>
   );
 };
 
diff --git a/src/components/organisms/forms/contact-form.stories.tsx b/src/components/organisms/forms/contact-form.stories.tsx
index 9b936f9..39d0b71 100644
--- a/src/components/organisms/forms/contact-form.stories.tsx
+++ b/src/components/organisms/forms/contact-form.stories.tsx
@@ -64,7 +64,7 @@ const Template: ComponentStory<typeof ContactForm> = (args) => (
  */
 export const Contact = Template.bind({});
 Contact.args = {
-  sendMail: (reset: () => void) => {
+  sendMail: async (_data, reset: () => void) => {
     reset();
   },
 };
diff --git a/src/components/organisms/forms/contact-form.test.tsx b/src/components/organisms/forms/contact-form.test.tsx
index 744f147..6225fa9 100644
--- a/src/components/organisms/forms/contact-form.test.tsx
+++ b/src/components/organisms/forms/contact-form.test.tsx
@@ -2,7 +2,9 @@ import { render, screen } from '@test-utils';
 import ContactForm from './contact-form';
 
 const props = {
-  sendMail: () => null,
+  sendMail: async () => {
+    /** Do nothing. */
+  },
 };
 
 describe('ContactForm', () => {
diff --git a/src/components/organisms/forms/contact-form.tsx b/src/components/organisms/forms/contact-form.tsx
index 4a6902b..912402c 100644
--- a/src/components/organisms/forms/contact-form.tsx
+++ b/src/components/organisms/forms/contact-form.tsx
@@ -6,6 +6,13 @@ import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './contact-form.module.scss';
 
+export type ContactFormData = {
+  email: string;
+  message: string;
+  name: string;
+  subject: string;
+};
+
 export type ContactFormProps = {
   /**
    * Set additional classnames to the form wrapper.
@@ -16,10 +23,9 @@ export type ContactFormProps = {
    */
   Notice?: ReactNode;
   /**
-   * A callback function to send mail. It takes a function as parameter to
-   * reset the form.
+   * A callback function to send mail.
    */
-  sendMail: (reset: () => void) => void;
+  sendMail: (data: ContactFormData, reset: () => void) => Promise<void>;
 };
 
 /**
@@ -80,9 +86,11 @@ const ContactForm: FC<ContactFormProps> = ({
     id: 'yN5P+m',
   });
 
-  const submitHandler = () => {
+  const submitHandler = async () => {
     setIsSubmitting(true);
-    sendMail(resetForm);
+    sendMail({ email, message, name, subject: object }, resetForm).then(() =>
+      setIsSubmitting(false)
+    );
   };
 
   return (
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
new file mode 100644
index 0000000..d88a8a1
--- /dev/null
+++ b/src/pages/contact.tsx
@@ -0,0 +1,181 @@
+import Notice, { NoticeKind } from '@components/atoms/layout/notice';
+import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import ContactForm, {
+  ContactFormProps,
+} from '@components/organisms/forms/contact-form';
+import SocialMedia from '@components/organisms/widgets/social-media';
+import PageLayout from '@components/templates/page/page-layout';
+import { meta } from '@content/pages/contact.mdx';
+import styles from '@styles/pages/contact.module.scss';
+import { sendMail } from '@services/graphql/contact';
+import { loadTranslation } from '@utils/helpers/i18n';
+import useSettings from '@utils/hooks/use-settings';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useState } from 'react';
+import { useIntl } from 'react-intl';
+import { ContactPage as ContactPageSchema, Graph, WebPage } from 'schema-dts';
+
+const ContactPage: NextPage = () => {
+  const { dates, intro, seo, title } = meta;
+  const intl = useIntl();
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'contact', name: title, url: '/contact' },
+  ];
+
+  const socialMediaTitle = intl.formatMessage({
+    defaultMessage: 'Find me elsewhere',
+    description: 'ContactPage: social media widget title',
+    id: 'Qh2CwH',
+  });
+
+  const { website } = useSettings();
+  const { asPath } = useRouter();
+  const pageUrl = `${website.url}${asPath}`;
+  const pagePublicationDate = new Date(dates.publication);
+  const pageUpdateDate = new Date(dates.update);
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: seo.title,
+    description: seo.description,
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${pageUrl}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const contactSchema: ContactPageSchema = {
+    '@id': `${website.url}/#contact`,
+    '@type': 'ContactPage',
+    name: title,
+    description: intro,
+    author: { '@id': `${website.url}/#branding` },
+    creator: { '@id': `${website.url}/#branding` },
+    dateCreated: pagePublicationDate.toISOString(),
+    dateModified: pageUpdateDate.toISOString(),
+    datePublished: pagePublicationDate.toISOString(),
+    editor: { '@id': `${website.url}/#branding` },
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, contactSchema],
+  };
+
+  const widgets = [
+    <SocialMedia
+      key="social-media"
+      title={socialMediaTitle}
+      level={2}
+      media={[
+        { name: 'Github', url: 'https://github.com/ArmandPhilippot' },
+        { name: 'Gitlab', url: 'https://gitlab.com/ArmandPhilippot' },
+        {
+          name: 'LinkedIn',
+          url: 'https://www.linkedin.com/in/armandphilippot',
+        },
+      ]}
+    />,
+  ];
+
+  const [status, setStatus] = useState<NoticeKind>('info');
+  const [statusMessage, setStatusMessage] = useState<string>('');
+
+  const submitMail: ContactFormProps['sendMail'] = async (data, reset) => {
+    const { email, message, name, subject } = data;
+    const messageHTML = message.replace(/\r?\n/g, '<br />');
+    const body = `Message received from ${name} <${email}> on ${website.url}.<br /><br />${messageHTML}`;
+    const replyTo = `${name} <${email}>`;
+    const mailData = {
+      body,
+      clientMutationId: 'contact',
+      replyTo,
+      subject,
+    };
+    const { message: mutationMessage, sent } = await sendMail(mailData);
+
+    if (sent) {
+      setStatus('success');
+      setStatusMessage(
+        intl.formatMessage({
+          defaultMessage:
+            'Thanks. Your message was successfully sent. I will answer it as soon as possible.',
+          description: 'Contact: success message',
+          id: '3Pipok',
+        })
+      );
+      reset();
+    } else {
+      const errorPrefix = intl.formatMessage({
+        defaultMessage: 'An error occurred:',
+        description: 'Contact: error message',
+        id: 'TpyFZ6',
+      });
+      const error = `${errorPrefix} ${mutationMessage}`;
+      setStatus('error');
+      setStatusMessage(error);
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{`${seo.title} - ${website.name}`}</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-contact"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <PageLayout
+        title="Contact"
+        intro={intro}
+        breadcrumb={breadcrumb}
+        widgets={widgets}
+      >
+        <ContactForm
+          sendMail={submitMail}
+          Notice={
+            <Notice
+              kind={status}
+              message={statusMessage}
+              className={styles.notice}
+            />
+          }
+        />
+      </PageLayout>
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      translation,
+    },
+  };
+};
+
+export default ContactPage;
diff --git a/src/services/graphql/api.ts b/src/services/graphql/api.ts
index b0e8d3a..9811d86 100644
--- a/src/services/graphql/api.ts
+++ b/src/services/graphql/api.ts
@@ -7,6 +7,7 @@ import {
   totalArticlesQuery,
 } from './articles.query';
 import { commentsQuery } from './comments.query';
+import { sendMailMutation } from './contact.mutation';
 import {
   thematicBySlugQuery,
   thematicsListQuery,
@@ -18,6 +19,8 @@ import {
   topicsSlugQuery,
 } from './topics.query';
 
+export type Mutations = typeof sendMailMutation;
+
 export type Queries =
   | typeof articlesQuery
   | typeof articleBySlugQuery
@@ -44,6 +47,10 @@ export type CommentsResponse<T> = {
   comments: T[];
 };
 
+export type SendMailResponse<T> = {
+  sendEmail: T;
+};
+
 export type ThematicResponse<T> = {
   thematic: T;
 };
@@ -85,15 +92,16 @@ export type NodesResponse<T> = {
 };
 
 export type ResponseMap<T> = {
-  [articleBySlugQuery]: ArticleResponse<NodesResponse<T>>;
+  [articleBySlugQuery]: ArticleResponse<T>;
   [articlesCardQuery]: ArticlesResponse<NodesResponse<T>>;
   [articlesQuery]: ArticlesResponse<EdgesResponse<T>>;
   [articlesSlugQuery]: ArticlesResponse<EdgesResponse<T>>;
   [commentsQuery]: CommentsResponse<NodesResponse<T>>;
-  [thematicBySlugQuery]: ThematicResponse<NodesResponse<T>>;
+  [sendMailMutation]: SendMailResponse<T>;
+  [thematicBySlugQuery]: ThematicResponse<T>;
   [thematicsListQuery]: ThematicsResponse<EdgesResponse<T>>;
   [thematicsSlugQuery]: ThematicsResponse<EdgesResponse<T>>;
-  [topicBySlugQuery]: TopicResponse<NodesResponse<T>>;
+  [topicBySlugQuery]: TopicResponse<T>;
   [topicsListQuery]: TopicsResponse<EdgesResponse<T>>;
   [topicsSlugQuery]: TopicsResponse<EdgesResponse<T>>;
   [totalArticlesQuery]: ArticlesResponse<T>;
@@ -133,12 +141,20 @@ export type ByContentIdVar = {
   contentId: number;
 };
 
+export type sendMailVars = {
+  body: string;
+  clientMutationId: string;
+  replyTo: string;
+  subject: string;
+};
+
 export type VariablesMap = {
   [articleBySlugQuery]: BySlugVar;
   [articlesCardQuery]: EdgesVars;
   [articlesQuery]: EdgesVars;
   [articlesSlugQuery]: EdgesVars;
   [commentsQuery]: ByContentIdVar;
+  [sendMailMutation]: sendMailVars;
   [thematicBySlugQuery]: BySlugVar;
   [thematicsListQuery]: EdgesVars;
   [thematicsSlugQuery]: EdgesVars;
@@ -148,7 +164,7 @@ export type VariablesMap = {
   [totalArticlesQuery]: null;
 };
 
-export type FetchAPIProps<T extends Queries> = {
+export type FetchAPIProps<T extends Queries | Mutations> = {
   /**
    * A GraphQL API URL.
    */
@@ -170,7 +186,7 @@ export type FetchAPIProps<T extends Queries> = {
  * @param {Queries} obj.query - A GraphQL query.
  * @param {object} [obj.variables] - The query variables.
  */
-export async function fetchAPI<T, U extends Queries>({
+export async function fetchAPI<T, U extends Queries | Mutations>({
   api,
   query,
   variables,
diff --git a/src/services/graphql/contact.mutation.ts b/src/services/graphql/contact.mutation.ts
new file mode 100644
index 0000000..b82fc07
--- /dev/null
+++ b/src/services/graphql/contact.mutation.ts
@@ -0,0 +1,25 @@
+/**
+ * Send mail mutation.
+ */
+export const sendMailMutation = `mutation SendEmail(
+  $subject: String!
+  $body: String!
+  $replyTo: String!
+  $clientMutationId: String!
+) {
+  sendEmail(
+    input: {
+      clientMutationId: $clientMutationId
+      body: $body
+      replyTo: $replyTo
+      subject: $subject
+    }
+  ) {
+    clientMutationId
+    message
+    sent
+    origin
+    replyTo
+    to
+  }
+}`;
diff --git a/src/services/graphql/contact.ts b/src/services/graphql/contact.ts
new file mode 100644
index 0000000..fca718f
--- /dev/null
+++ b/src/services/graphql/contact.ts
@@ -0,0 +1,26 @@
+import { fetchAPI, getAPIUrl, sendMailVars } from './api';
+import { sendMailMutation } from './contact.mutation';
+
+export type SentEmail = {
+  clientMutationId: string;
+  message: string;
+  origin: string;
+  replyTo: string;
+  sent: boolean;
+};
+
+/**
+ * Send an email using GraphQL API.
+ *
+ * @param {sendMailVars} data - The mail data.
+ * @returns {Promise<SentEmail>} The mutation response.
+ */
+export const sendMail = async (data: sendMailVars): Promise<SentEmail> => {
+  const response = await fetchAPI<SentEmail, typeof sendMailMutation>({
+    api: getAPIUrl(),
+    query: sendMailMutation,
+    variables: { ...data },
+  });
+
+  return response.sendEmail;
+};
diff --git a/src/styles/pages/contact.module.scss b/src/styles/pages/contact.module.scss
new file mode 100644
index 0000000..65fb0d6
--- /dev/null
+++ b/src/styles/pages/contact.module.scss
@@ -0,0 +1,3 @@
+.notice {
+  margin-top: var(--spacing-md);
+}
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 6ec8c82..61a46b4 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -20,6 +20,7 @@ export const settings = {
     startYear: '2012',
     endYear: new Date().getFullYear().toString(),
   },
+  email: process.env.APP_AUTHOR_EMAIL || '',
   locales: {
     defaultLocale: 'fr',
     defaultCountry: 'FR',
diff --git a/src/utils/hooks/use-settings.tsx b/src/utils/hooks/use-settings.tsx
index a45e934..cc5261b 100644
--- a/src/utils/hooks/use-settings.tsx
+++ b/src/utils/hooks/use-settings.tsx
@@ -59,6 +59,10 @@ export type WebsiteSettings = {
    * The website copyright dates.
    */
   copyright: CopyrightSettings;
+  /**
+   * The website admin email.
+   */
+  email: string;
   /**
    * The website locales.
    */
@@ -84,7 +88,8 @@ export type UseSettingsReturn = {
  * @returns {UseSettingsReturn} - An object describing settings.
  */
 const useSettings = (): UseSettingsReturn => {
-  const { baseline, copyright, locales, name, postsPerPage, url } = settings;
+  const { baseline, copyright, email, locales, name, postsPerPage, url } =
+    settings;
   const router = useRouter();
   const locale = router.locale || locales.defaultLocale;
 
@@ -98,6 +103,7 @@ const useSettings = (): UseSettingsReturn => {
         end: copyright.endYear,
         start: copyright.startYear,
       },
+      email,
       locales: {
         default: locales.defaultLocale,
         supported: locales.supported,
-- 
cgit v1.2.3


From 9c8921db92d16b07ffc2a63ff3c80c4dcdd9ff9d Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 10 May 2022 17:38:07 +0200
Subject: chore: add Project single pages

---
 .../organisms/widgets/links-list-widget.tsx        |   2 +-
 .../organisms/widgets/sharing.stories.tsx          |  25 +--
 src/components/organisms/widgets/sharing.test.tsx  |  10 +-
 src/components/organisms/widgets/sharing.tsx       |  25 ++-
 .../templates/page/page-layout.module.scss         |   5 +
 src/pages/projets.tsx                              | 150 -------------
 src/pages/projets/[slug].tsx                       | 249 +++++++++++++++++++++
 src/pages/projets/index.tsx                        | 143 ++++++++++++
 src/ts/types/app.ts                                |  17 +-
 src/ts/types/swr.ts                                |   5 +
 src/utils/helpers/projects.ts                      |  80 ++++---
 src/utils/helpers/slugify.ts                       |  18 --
 src/utils/helpers/strings.ts                       |  29 +++
 src/utils/hooks/use-github-api.tsx                 |  30 +++
 src/utils/hooks/use-headings-tree.tsx              |   2 +-
 15 files changed, 553 insertions(+), 237 deletions(-)
 delete mode 100644 src/pages/projets.tsx
 create mode 100644 src/pages/projets/[slug].tsx
 create mode 100644 src/pages/projets/index.tsx
 create mode 100644 src/ts/types/swr.ts
 delete mode 100644 src/utils/helpers/slugify.ts
 create mode 100644 src/utils/helpers/strings.ts
 create mode 100644 src/utils/hooks/use-github-api.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/organisms/widgets/links-list-widget.tsx b/src/components/organisms/widgets/links-list-widget.tsx
index 37a20fc..3f291e3 100644
--- a/src/components/organisms/widgets/links-list-widget.tsx
+++ b/src/components/organisms/widgets/links-list-widget.tsx
@@ -4,7 +4,7 @@ import List, {
   type ListItem,
 } from '@components/atoms/lists/list';
 import Widget, { type WidgetProps } from '@components/molecules/layout/widget';
-import { slugify } from '@utils/helpers/slugify';
+import { slugify } from '@utils/helpers/strings';
 import { FC } from 'react';
 import styles from './links-list-widget.module.scss';
 
diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx
index c3c3488..47213b6 100644
--- a/src/components/organisms/widgets/sharing.stories.tsx
+++ b/src/components/organisms/widgets/sharing.stories.tsx
@@ -22,9 +22,13 @@ export default {
         type: null,
       },
       description: 'Default widget state (expanded or collapsed).',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: true },
+      },
       type: {
         name: 'boolean',
-        required: true,
+        required: false,
       },
     },
     level: {
@@ -34,9 +38,13 @@ export default {
         max: 6,
       },
       description: 'The heading level.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 2 },
+      },
       type: {
         name: 'number',
-        required: true,
+        required: false,
       },
     },
     media: {
@@ -49,16 +57,6 @@ export default {
         required: true,
       },
     },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The widget title.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
   },
   decorators: [
     (Story) => (
@@ -78,14 +76,11 @@ const Template: ComponentStory<typeof SharingWidget> = (args) => (
  */
 export const Sharing = Template.bind({});
 Sharing.args = {
-  expanded: true,
   data: {
     excerpt:
       'Alias similique eius ducimus laudantium aspernatur. Est rem ut eum temporibus sit reprehenderit aut non molestias. Vel dolorem expedita labore quo inventore aliquid nihil nam. Possimus nobis enim quas corporis eos.',
     title: 'Accusantium totam nostrum',
     url: 'https://www.example.test',
   },
-  level: 2,
   media: ['diaspora', 'facebook', 'linkedin', 'twitter', 'email'],
-  title: 'Sharing',
 };
diff --git a/src/components/organisms/widgets/sharing.test.tsx b/src/components/organisms/widgets/sharing.test.tsx
index 265dbe1..48da49e 100644
--- a/src/components/organisms/widgets/sharing.test.tsx
+++ b/src/components/organisms/widgets/sharing.test.tsx
@@ -9,15 +9,7 @@ const postData: SharingData = {
 
 describe('Sharing', () => {
   it('renders a sharing widget', () => {
-    render(
-      <Sharing
-        data={postData}
-        media={['facebook', 'twitter']}
-        expanded={true}
-        title="Sharing"
-        level={2}
-      />
-    );
+    render(<Sharing data={postData} media={['facebook', 'twitter']} />);
     expect(
       screen.getByRole('link', { name: 'Share on facebook' })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
index 05a3f73..85dadb0 100644
--- a/src/components/organisms/widgets/sharing.tsx
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -21,11 +21,19 @@ export type SharingData = {
   url: string;
 };
 
-export type SharingProps = Pick<WidgetProps, 'expanded' | 'level' | 'title'> & {
+export type SharingProps = {
   /**
    * The page data to share.
    */
   data: SharingData;
+  /**
+   * The widget default state.
+   */
+  expanded?: WidgetProps['expanded'];
+  /**
+   * The HTML heading level.
+   */
+  level?: WidgetProps['level'];
   /**
    * A list of active and ordered sharing medium.
    */
@@ -37,8 +45,19 @@ export type SharingProps = Pick<WidgetProps, 'expanded' | 'level' | 'title'> & {
  *
  * Render a list of sharing links inside a widget.
  */
-const Sharing: FC<SharingProps> = ({ data, media, ...props }) => {
+const Sharing: FC<SharingProps> = ({
+  data,
+  media,
+  expanded = true,
+  level = 2,
+  ...props
+}) => {
   const intl = useIntl();
+  const widgetTitle = intl.formatMessage({
+    defaultMessage: 'Share',
+    id: 'q3U6uI',
+    description: 'Sharing: widget title',
+  });
 
   /**
    * Build the Diaspora sharing url with provided data.
@@ -181,7 +200,7 @@ const Sharing: FC<SharingProps> = ({ data, media, ...props }) => {
   };
 
   return (
-    <Widget {...props}>
+    <Widget expanded={expanded} level={level} title={widgetTitle} {...props}>
       <ul className={styles.list}>{getItems()}</ul>
     </Widget>
   );
diff --git a/src/components/templates/page/page-layout.module.scss b/src/components/templates/page/page-layout.module.scss
index d5a1a2b..7602492 100644
--- a/src/components/templates/page/page-layout.module.scss
+++ b/src/components/templates/page/page-layout.module.scss
@@ -35,6 +35,11 @@
 
 .body {
   grid-column: 2;
+
+  > * + * {
+    margin-top: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+  }
 }
 
 .sidebar {
diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx
deleted file mode 100644
index 996af74..0000000
--- a/src/pages/projets.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import Link from '@components/atoms/links/link';
-import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
-import CardsList, {
-  CardsListItem,
-} from '@components/organisms/layout/cards-list';
-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 { ProjectCard } from '@ts/types/app';
-import { loadTranslation, Messages } from '@utils/helpers/i18n';
-import { getProjectsCard } from '@utils/helpers/projects';
-import useSettings from '@utils/hooks/use-settings';
-import { NestedMDXComponents } from 'mdx/types';
-import { GetStaticProps, NextPage } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useIntl } from 'react-intl';
-import { Article, Graph, WebPage } from 'schema-dts';
-
-type ProjectsPageProps = {
-  projects: ProjectCard[];
-  translation?: Messages;
-};
-
-/**
- * Projects page.
- */
-const ProjectsPage: NextPage<ProjectsPageProps> = ({ projects }) => {
-  const intl = useIntl();
-  const { dates, seo, title } = meta;
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
-  });
-  const breadcrumb: BreadcrumbItem[] = [
-    { id: 'home', name: homeLabel, url: '/' },
-    { id: 'projects', name: title, url: '/projets' },
-  ];
-
-  const items: CardsListItem[] = projects.map(
-    ({ id, meta: projectMeta, slug, title: projectTitle }) => {
-      const { cover, tagline, ...remainingMeta } = projectMeta;
-      const formattedMeta: CardsListItem['meta'] = remainingMeta.technologies
-        ? [
-            {
-              id: 'technologies',
-              term: 'Technologies',
-              value: remainingMeta.technologies,
-            },
-          ]
-        : undefined;
-
-      return {
-        cover,
-        id: id as string,
-        meta: formattedMeta,
-        tagline,
-        title: projectTitle,
-        url: `/projets/${slug}`,
-      };
-    }
-  );
-
-  const components: NestedMDXComponents = {
-    Links: (props) => <Link {...props} />,
-  };
-
-  const { website } = useSettings();
-  const { asPath } = useRouter();
-  const pageUrl = `${website.url}${asPath}`;
-  const pagePublicationDate = new Date(dates.publication);
-  const pageUpdateDate = new Date(dates.update);
-
-  const webpageSchema: WebPage = {
-    '@id': `${pageUrl}`,
-    '@type': 'WebPage',
-    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
-    name: seo.title,
-    description: seo.description,
-    inLanguage: website.locales.default,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    reviewedBy: { '@id': `${website.url}/#branding` },
-    url: `${pageUrl}`,
-    isPartOf: {
-      '@id': `${website.url}`,
-    },
-  };
-
-  const articleSchema: Article = {
-    '@id': `${website.url}/#projects`,
-    '@type': 'Article',
-    name: meta.title,
-    description: seo.description,
-    author: { '@id': `${website.url}/#branding` },
-    copyrightYear: pagePublicationDate.getFullYear(),
-    creator: { '@id': `${website.url}/#branding` },
-    dateCreated: pagePublicationDate.toISOString(),
-    dateModified: pageUpdateDate.toISOString(),
-    datePublished: pagePublicationDate.toISOString(),
-    editor: { '@id': `${website.url}/#branding` },
-    headline: meta.title,
-    inLanguage: website.locales.default,
-    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
-    mainEntityOfPage: { '@id': `${pageUrl}` },
-  };
-
-  const schemaJsonLd: Graph = {
-    '@context': 'https://schema.org',
-    '@graph': [webpageSchema, articleSchema],
-  };
-
-  return (
-    <PageLayout
-      title={title}
-      intro={<PageContent components={components} />}
-      breadcrumb={breadcrumb}
-    >
-      <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={`${seo.title} - ${website.name}`} />
-        <meta property="og:description" content={seo.description} />
-      </Head>
-      <Script
-        id="schema-projects"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <CardsList items={items} titleLevel={2} className={styles.list} />
-    </PageLayout>
-  );
-};
-
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
-  const projects = await getProjectsCard();
-  const translation = await loadTranslation(locale);
-
-  return {
-    props: {
-      projects,
-      translation,
-    },
-  };
-};
-
-export default ProjectsPage;
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
new file mode 100644
index 0000000..711a5cd
--- /dev/null
+++ b/src/pages/projets/[slug].tsx
@@ -0,0 +1,249 @@
+import Link from '@components/atoms/links/link';
+import SocialLink, { 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 { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import Gallery from '@components/organisms/images/gallery';
+import Overview, { OverviewMeta } from '@components/organisms/layout/overview';
+import Sharing from '@components/organisms/widgets/sharing';
+import PageLayout, {
+  PageLayoutProps,
+} from '@components/templates/page/page-layout';
+import { ProjectPreview, Repos } from '@ts/types/app';
+import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import { getProjectData, getProjectFilenames } from '@utils/helpers/projects';
+import { capitalize } from '@utils/helpers/strings';
+import useGithubApi, { RepoData } from '@utils/hooks/use-github-api';
+import useSettings from '@utils/hooks/use-settings';
+import { MDXComponents, NestedMDXComponents } from 'mdx/types';
+import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { ComponentType } from 'react';
+import { useIntl } from 'react-intl';
+import { Article, Graph, WebPage } from 'schema-dts';
+
+type ProjectPageProps = {
+  project: ProjectPreview;
+  translation: Messages;
+};
+
+/**
+ * Project page.
+ */
+const ProjectPage: NextPage<ProjectPageProps> = ({ project }) => {
+  const { id, intro, meta, title } = project;
+  const { cover, dates, license, repos, seo, technologies } = meta;
+  const intl = useIntl();
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const projectsLabel = intl.formatMessage({
+    defaultMessage: 'Projects',
+    description: 'Breadcrumb: projects label',
+    id: '28GZdv',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'projects', name: projectsLabel, url: '/projets' },
+    { id: 'project', name: title, url: `/projets/${id}` },
+  ];
+
+  const ProjectContent: ComponentType<MDXComponents> =
+    require(`../../content/projects/${id}.mdx`).default;
+
+  const components: NestedMDXComponents = {
+    Code: (props) => <Code {...props} />,
+    Gallery: (props) => <Gallery {...props} />,
+    Image: (props) => <ResponsiveImage {...props} />,
+    Link: (props) => <Link {...props} />,
+    pre: ({ children }) => <Code {...children.props} />,
+  };
+
+  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 headerMeta: PageLayoutProps['headerMeta'] = {
+    publication: { date: dates.publication },
+    update: dates.update ? { date: dates.update } : undefined,
+  };
+
+  /**
+   * Retrieve the repositories links.
+   *
+   * @param {Repos} repos - A repositories object.
+   * @returns {JSX.Element[]} - An array of SocialLink.
+   */
+  const getReposLinks = (repositories: Repos): JSX.Element[] => {
+    const links = [];
+
+    for (const [name, url] of Object.entries(repositories)) {
+      const socialWebsite = capitalize(name) as SocialWebsite;
+      const socialUrl = `https://${name}.com/${url}`;
+
+      links.push(<SocialLink name={socialWebsite} url={socialUrl} />);
+    }
+
+    return links;
+  };
+
+  const { isError, isLoading, data } = useGithubApi(meta.repos!.github!);
+
+  const getGithubData = (key: keyof RepoData) => {
+    if (isError) return 'Error';
+    if (isLoading || !data) return <Spinner />;
+
+    switch (key) {
+      case 'created_at':
+        return data.created_at;
+      case 'updated_at':
+        return data.updated_at;
+      case 'stargazers_count':
+        const stars = intl.formatMessage(
+          {
+            defaultMessage:
+              '{starsCount, plural, =0 {No stars on Github} one {# star on Github} other {# stars on Github}}',
+            id: 'Gnf1Si',
+            description: 'Projets: Github stars count',
+          },
+          { starsCount: data.stargazers_count }
+        );
+        return (
+          <>
+            ⭐&nbsp;
+            <Link href={`https://github.com/${repos!.github}/stargazers`}>
+              {stars}
+            </Link>
+          </>
+        );
+    }
+  };
+
+  const overviewData: OverviewMeta = {
+    creation: data && { date: getGithubData('created_at') as string },
+    update: data && { date: getGithubData('updated_at') as string },
+    license,
+    popularity: data && getGithubData('stargazers_count'),
+    repositories: repos ? getReposLinks(repos) : undefined,
+    technologies,
+  };
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: seo.title,
+    description: seo.description,
+    inLanguage: website.locales.default,
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${website.url}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const articleSchema: Article = {
+    '@id': `${website.url}/project`,
+    '@type': 'Article',
+    name: title,
+    description: intro,
+    author: { '@id': `${website.url}/#branding` },
+    copyrightYear: pagePublicationDate.getFullYear(),
+    creator: { '@id': `${website.url}/#branding` },
+    dateCreated: pagePublicationDate.toISOString(),
+    dateModified: pageUpdateDate && pageUpdateDate.toISOString(),
+    datePublished: pagePublicationDate.toISOString(),
+    editor: { '@id': `${website.url}/#branding` },
+    headline: title,
+    thumbnailUrl: `/projects/${id}.jpg`,
+    image: `/projects/${id}.jpg`,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, articleSchema],
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{`${seo.title} - ${website.name}`}</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
+        title={title}
+        intro={intro}
+        breadcrumb={breadcrumb}
+        headerMeta={headerMeta}
+        withToC={true}
+        widgets={[
+          <Sharing
+            key="sharing-widget"
+            data={{ excerpt: intro, title, url: pageUrl }}
+            media={[
+              'diaspora',
+              'email',
+              'facebook',
+              'journal-du-hacker',
+              'linkedin',
+              'twitter',
+            ]}
+          />,
+        ]}
+      >
+        <Overview cover={cover} meta={overviewData} />
+        <ProjectContent components={components} />
+      </PageLayout>
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale, params }) => {
+  const translation = await loadTranslation(locale);
+  const { slug } = params!;
+  const project = await getProjectData(slug as string);
+
+  return {
+    props: {
+      project,
+      translation,
+    },
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const filenames = getProjectFilenames();
+  const paths = filenames.map((filename) => {
+    return {
+      params: {
+        slug: filename,
+      },
+    };
+  });
+
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export default ProjectPage;
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
new file mode 100644
index 0000000..a6858c8
--- /dev/null
+++ b/src/pages/projets/index.tsx
@@ -0,0 +1,143 @@
+import Link from '@components/atoms/links/link';
+import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import CardsList, {
+  CardsListItem,
+} from '@components/organisms/layout/cards-list';
+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 { ProjectCard } from '@ts/types/app';
+import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import { getProjectsCard } from '@utils/helpers/projects';
+import useSettings from '@utils/hooks/use-settings';
+import { NestedMDXComponents } from 'mdx/types';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useIntl } from 'react-intl';
+import { Article, Graph, WebPage } from 'schema-dts';
+
+type ProjectsPageProps = {
+  projects: ProjectCard[];
+  translation?: Messages;
+};
+
+/**
+ * Projects page.
+ */
+const ProjectsPage: NextPage<ProjectsPageProps> = ({ projects }) => {
+  const intl = useIntl();
+  const { dates, seo, title } = meta;
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'projects', name: title, url: '/projets' },
+  ];
+
+  const items: CardsListItem[] = projects.map(
+    ({ id, meta: projectMeta, slug, title: projectTitle }) => {
+      const { cover, tagline, technologies } = projectMeta;
+
+      return {
+        cover,
+        id: id as string,
+        meta: { technologies: technologies },
+        tagline,
+        title: projectTitle,
+        url: `/projets/${slug}`,
+      };
+    }
+  );
+
+  const components: NestedMDXComponents = {
+    Links: (props) => <Link {...props} />,
+  };
+
+  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` },
+    name: seo.title,
+    description: seo.description,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${pageUrl}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const articleSchema: Article = {
+    '@id': `${website.url}/#projects`,
+    '@type': 'Article',
+    name: meta.title,
+    description: seo.description,
+    author: { '@id': `${website.url}/#branding` },
+    copyrightYear: pagePublicationDate.getFullYear(),
+    creator: { '@id': `${website.url}/#branding` },
+    dateCreated: pagePublicationDate.toISOString(),
+    dateModified: pageUpdateDate && pageUpdateDate.toISOString(),
+    datePublished: pagePublicationDate.toISOString(),
+    editor: { '@id': `${website.url}/#branding` },
+    headline: meta.title,
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, articleSchema],
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{`${seo.title} - ${website.name}`}</title>
+        <meta name="description" content={seo.description} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="article" />
+        <meta property="og:title" content={`${seo.title} - ${website.name}`} />
+        <meta property="og:description" content={seo.description} />
+      </Head>
+      <Script
+        id="schema-projects"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <PageLayout
+        title={title}
+        intro={<PageContent components={components} />}
+        breadcrumb={breadcrumb}
+      >
+        <CardsList items={items} titleLevel={2} className={styles.list} />
+      </PageLayout>
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const projects = await getProjectsCard();
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      projects: JSON.parse(JSON.stringify(projects)),
+      translation,
+    },
+  };
+};
+
+export default ProjectsPage;
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index 87ab042..f354118 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -29,7 +29,7 @@ export type Comment = {
 
 export type Dates = {
   publication: string;
-  update: string;
+  update?: string;
 };
 
 export type Image = {
@@ -58,23 +58,23 @@ export type Meta<T extends PageKind> = {
   commentsCount?: T extends 'article' ? number : never;
   cover?: Image;
   dates: Dates;
-  license?: T extends 'projects' ? string : never;
-  readingTime: number;
-  repos?: T extends 'projects' ? Repos : never;
+  license?: T extends 'project' ? string : never;
+  readingTime?: number;
+  repos?: T extends 'project' ? Repos : never;
   seo: SEO;
-  tagline?: T extends 'projects' ? string : never;
-  technologies?: T extends 'projects' ? string[] : never;
+  tagline?: T extends 'project' ? string : never;
+  technologies?: T extends 'project' ? string[] : never;
   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> = {
   content: string;
   id: number | string;
   intro: string;
-  meta?: Meta<T>;
+  meta: Meta<T>;
   slug: string;
   title: string;
 };
@@ -89,6 +89,7 @@ export type Article = Page<'article'>;
 export type ArticleCard = Pick<Article, 'id' | 'slug' | 'title'> &
   Pick<Meta<'article'>, 'cover' | 'dates'>;
 export type Project = Page<'project'>;
+export type ProjectPreview = Omit<Page<'project'>, 'content'>;
 export type ProjectCard = Pick<Page<'project'>, 'id' | 'slug' | 'title'> & {
   meta: Pick<Meta<'project'>, 'cover' | 'dates' | 'tagline' | 'technologies'>;
 };
diff --git a/src/ts/types/swr.ts b/src/ts/types/swr.ts
new file mode 100644
index 0000000..4da6b2c
--- /dev/null
+++ b/src/ts/types/swr.ts
@@ -0,0 +1,5 @@
+export type SWRResult<T> = {
+  data?: T;
+  isLoading: boolean;
+  isError: boolean;
+};
diff --git a/src/utils/helpers/projects.ts b/src/utils/helpers/projects.ts
index 02e0e02..a0f0c04 100644
--- a/src/utils/helpers/projects.ts
+++ b/src/utils/helpers/projects.ts
@@ -1,4 +1,4 @@
-import { ProjectCard } from '@ts/types/app';
+import { ProjectCard, ProjectPreview } from '@ts/types/app';
 import { MDXProjectMeta } from '@ts/types/mdx';
 import { readdirSync } from 'fs';
 import path from 'path';
@@ -16,45 +16,61 @@ export const getProjectFilenames = (): string[] => {
 };
 
 /**
- * Retrieve project's data by filename.
+ * Retrieve the data of a project by filename.
+ *
+ * @param {string} filename - The project filename.
+ * @returns {Promise<ProjectPreview>}
+ */
+export const getProjectData = async (
+  filename: string
+): Promise<ProjectPreview> => {
+  try {
+    const {
+      meta,
+    }: {
+      meta: MDXProjectMeta;
+    } = await import(`../../content/projects/${filename}.mdx`);
+
+    const { dates, intro, title, ...projectMeta } = meta;
+    const { publication, update } = dates;
+    const cover = await import(`../../../public/projects/${filename}.jpg`);
+
+    return {
+      id: filename,
+      intro,
+      meta: {
+        ...projectMeta,
+        dates: { publication, update },
+        // Dynamic import source does not work so I use it only to get sizes
+        cover: {
+          ...cover.default,
+          alt: `${title} image`,
+          src: `/projects/${filename}.jpg`,
+        },
+      },
+      slug: filename,
+      title: title,
+    };
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+};
+
+/**
+ * Retrieve all the projects data using filenames.
  *
  * @param {string[]} filenames - The filenames without extension.
- * @returns {Promise<ProjectCard[]>} - The project data.
+ * @returns {Promise<ProjectCard[]>} - An array of projects data.
  */
 export const getProjectsData = async (
   filenames: string[]
 ): Promise<ProjectCard[]> => {
   return Promise.all(
     filenames.map(async (filename) => {
-      try {
-        const {
-          meta,
-        }: {
-          meta: MDXProjectMeta;
-        } = await import(`../../content/projects/${filename}.mdx`);
-
-        const { intro: _intro, title, ...projectMeta } = meta;
-
-        const cover = await import(`../../../public/projects/${filename}.jpg`);
-
-        return {
-          id: filename,
-          meta: {
-            ...projectMeta,
-            // Dynamic import source does not work so I use it only to get sizes
-            cover: {
-              ...cover.default,
-              alt: `${title} image`,
-              src: `/projects/${filename}.jpg`,
-            },
-          },
-          slug: filename,
-          title: title,
-        };
-      } catch (err) {
-        console.error(err);
-        throw err;
-      }
+      const { id, meta, slug, title } = await getProjectData(filename);
+      const { cover, dates, tagline, technologies } = meta;
+      return { id, meta: { cover, dates, tagline, technologies }, slug, title };
     })
   );
 };
diff --git a/src/utils/helpers/slugify.ts b/src/utils/helpers/slugify.ts
deleted file mode 100644
index 55ff583..0000000
--- a/src/utils/helpers/slugify.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Convert a text into a slug or id.
- * https://gist.github.com/codeguy/6684588#gistcomment-3332719
- *
- * @param {string} text Text to slugify.
- */
-export const slugify = (text: string) => {
-  return text
-    .toString()
-    .normalize('NFD')
-    .replace(/[\u0300-\u036f]/g, '')
-    .toLowerCase()
-    .trim()
-    .replace(/\s+/g, '-')
-    .replace(/[^\w\-]+/g, '-')
-    .replace(/\-\-+/g, '-')
-    .replace(/(^-)|(-$)/g, '');
-};
diff --git a/src/utils/helpers/strings.ts b/src/utils/helpers/strings.ts
new file mode 100644
index 0000000..5d90161
--- /dev/null
+++ b/src/utils/helpers/strings.ts
@@ -0,0 +1,29 @@
+/**
+ * Convert a text into a slug or id.
+ * https://gist.github.com/codeguy/6684588#gistcomment-3332719
+ *
+ * @param {string} text - A text to slugify.
+ * @returns {string} The slug.
+ */
+export const slugify = (text: string): string => {
+  return text
+    .toString()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '-')
+    .replace(/\-\-+/g, '-')
+    .replace(/(^-)|(-$)/g, '');
+};
+
+/**
+ * Capitalize the first letter of a string.
+ *
+ * @param {string} text - A text to capitalize.
+ * @returns {string} The capitalized text.
+ */
+export const capitalize = (text: string): string => {
+  return text.replace(/^\w/, (firstLetter) => firstLetter.toUpperCase());
+};
diff --git a/src/utils/hooks/use-github-api.tsx b/src/utils/hooks/use-github-api.tsx
new file mode 100644
index 0000000..edff974
--- /dev/null
+++ b/src/utils/hooks/use-github-api.tsx
@@ -0,0 +1,30 @@
+import { SWRResult } from '@ts/types/swr';
+import useSWR, { Fetcher } from 'swr';
+
+export type RepoData = {
+  created_at: string;
+  updated_at: string;
+  stargazers_count: number;
+};
+
+const fetcher: Fetcher<RepoData, string> = (...args) =>
+  fetch(...args).then((res) => res.json());
+
+/**
+ * Retrieve data from Github API.
+ *
+ * @param repo - The Github repo (`owner/repo-name`).
+ * @returns The repository data.
+ */
+const useGithubApi = (repo: string): SWRResult<RepoData> => {
+  const apiUrl = repo ? `https://api.github.com/repos/${repo}` : null;
+  const { data, error } = useSWR<RepoData>(apiUrl, fetcher);
+
+  return {
+    data,
+    isLoading: !error && !data,
+    isError: error,
+  };
+};
+
+export default useGithubApi;
diff --git a/src/utils/hooks/use-headings-tree.tsx b/src/utils/hooks/use-headings-tree.tsx
index 5506e8b..4646b4a 100644
--- a/src/utils/hooks/use-headings-tree.tsx
+++ b/src/utils/hooks/use-headings-tree.tsx
@@ -1,4 +1,4 @@
-import { slugify } from '@utils/helpers/slugify';
+import { slugify } from '@utils/helpers/strings';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 export type Heading = {
-- 
cgit v1.2.3


From c5b516e2c933e77b2550fe6becebacb3fbdd30eb Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 11 May 2022 19:53:09 +0200
Subject: chore: add the Blog index page

---
 src/components/molecules/layout/meta.tsx           | 100 +++++++-----
 .../organisms/layout/posts-list.module.scss        |   5 +
 .../organisms/layout/posts-list.stories.tsx        |  67 ++++----
 .../organisms/layout/posts-list.test.tsx           |  60 ++++----
 src/components/organisms/layout/posts-list.tsx     |  36 ++++-
 .../organisms/layout/summary.stories.tsx           |  23 ++-
 src/components/organisms/layout/summary.test.tsx   |  16 +-
 src/components/organisms/layout/summary.tsx        |  64 ++++++--
 .../templates/page/page-layout.stories.tsx         |  62 +++-----
 src/pages/blog/index.tsx                           | 169 +++++++++++++++++++++
 src/styles/base/_typography.scss                   |  40 +----
 src/utils/hooks/use-reading-time.tsx               |  58 +++++++
 12 files changed, 489 insertions(+), 211 deletions(-)
 create mode 100644 src/pages/blog/index.tsx
 create mode 100644 src/utils/hooks/use-reading-time.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index 1401ac4..1d5e04b 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -12,6 +12,17 @@ export type CustomMeta = {
   value: ReactNode | ReactNode[];
 };
 
+export type MetaComments = {
+  /**
+   * The comments count.
+   */
+  count: number;
+  /**
+   * Wrap the comments count with a link to the given target.
+   */
+  target?: string;
+};
+
 export type MetaDate = {
   /**
    * A date string. Ex: `2022-04-30`.
@@ -35,7 +46,7 @@ export type MetaData = {
   /**
    * The comments count.
    */
-  commentsCount?: string | JSX.Element;
+  comments?: MetaComments;
   /**
    * The creation date.
    */
@@ -86,6 +97,8 @@ export type MetaData = {
   update?: MetaDate;
 };
 
+export type MetaKey = keyof MetaData;
+
 export type MetaProps = Omit<
   DescriptionListProps,
   'items' | 'withSeparator'
@@ -131,7 +144,7 @@ const Meta: FC<MetaProps> = ({
           id: 'OI0N37',
           description: 'Meta: author label',
         });
-      case 'commentsCount':
+      case 'comments':
         return intl.formatMessage({
           defaultMessage: 'Comments:',
           id: 'jTVIh8',
@@ -229,40 +242,48 @@ const Meta: FC<MetaProps> = ({
     }
 
     const isoDateTime = new Date(`${date}T${time}`).toISOString();
+    const dateString = intl.formatMessage(
+      {
+        defaultMessage: '{date} at {time}',
+        description: 'Meta: publication date and time',
+        id: 'fcHeyC',
+      },
+      {
+        date: getFormattedDate(dateTime.date),
+        time: getFormattedTime(`${dateTime.date}T${dateTime.time}`),
+      }
+    );
 
     return target ? (
       <Link href={target}>
-        <time dateTime={isoDateTime}>
-          {intl.formatMessage(
-            {
-              defaultMessage: '{date} at {time}',
-              description: 'Meta: publication date and time',
-              id: 'fcHeyC',
-            },
-            {
-              date: getFormattedDate(dateTime.date),
-              time: getFormattedTime(`${dateTime.date}T${dateTime.time}`),
-            }
-          )}
-        </time>
+        <time dateTime={isoDateTime}>{dateString}</time>
       </Link>
     ) : (
-      <time dateTime={isoDateTime}>
-        {intl.formatMessage(
-          {
-            defaultMessage: '{date} at {time}',
-            description: 'Meta: publication date and time',
-            id: 'fcHeyC',
-          },
-          {
-            date: getFormattedDate(dateTime.date),
-            time: getFormattedTime(`${dateTime.date}T${dateTime.time}`),
-          }
-        )}
-      </time>
+      <time dateTime={isoDateTime}>{dateString}</time>
     );
   };
 
+  /**
+   * Retrieve the formatted comments count.
+   *
+   * @param comments - The comments object.
+   * @returns {string | JSX.Element} - The comments count.
+   */
+  const getCommentsCount = (comments: MetaComments) => {
+    const { count, target } = comments;
+    const commentsCount = intl.formatMessage(
+      {
+        defaultMessage:
+          '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}',
+        id: 'adTrj7',
+        description: 'Meta: comments count',
+      },
+      { commentsCount: count }
+    );
+
+    return target ? <Link href={target}>{commentsCount}</Link> : commentsCount;
+  };
+
   /**
    * Retrieve the formatted item value.
    *
@@ -270,14 +291,20 @@ const Meta: FC<MetaProps> = ({
    * @param {ValueOf<MetaData>} value - The meta value.
    * @returns {string|ReactNode|ReactNode[]} - The formatted value.
    */
-  const getValue = <T extends keyof MetaData>(
+  const getValue = <T extends MetaKey>(
     key: T,
     value: MetaData[T]
   ): string | ReactNode | ReactNode[] => {
-    if (key === 'creation' || key === 'publication' || key === 'update') {
-      return getDate(value as MetaDate);
+    switch (key) {
+      case 'comments':
+        return getCommentsCount(value as MetaComments);
+      case 'creation':
+      case 'publication':
+      case 'update':
+        return getDate(value as MetaDate);
+      default:
+        return value as string | ReactNode | ReactNode[];
     }
-    return value as string | ReactNode | ReactNode[];
   };
 
   /**
@@ -291,7 +318,7 @@ const Meta: FC<MetaProps> = ({
       .map(([key, value]) => {
         if (!key || !value) return;
 
-        const metaKey = key as keyof MetaData;
+        const metaKey = key as MetaKey;
 
         return {
           id: metaKey,
@@ -301,12 +328,9 @@ const Meta: FC<MetaProps> = ({
               : getLabel(metaKey),
           layout: itemsLayout,
           value:
-            metaKey === 'custom'
+            metaKey === 'custom' && (value as CustomMeta)
               ? (value as CustomMeta).value
-              : getValue(
-                  metaKey,
-                  value as string | string[] | JSX.Element | JSX.Element[]
-                ),
+              : getValue(metaKey, value),
         } as DescriptionListItem;
       })
       .filter((item): item is DescriptionListItem => !!item);
diff --git a/src/components/organisms/layout/posts-list.module.scss b/src/components/organisms/layout/posts-list.module.scss
index f072082..8021b2b 100644
--- a/src/components/organisms/layout/posts-list.module.scss
+++ b/src/components/organisms/layout/posts-list.module.scss
@@ -37,3 +37,8 @@
     }
   }
 }
+
+.btn {
+  display: flex;
+  margin: auto;
+}
diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
index d97ad03..de0478f 100644
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ b/src/components/organisms/layout/posts-list.stories.tsx
@@ -49,6 +49,16 @@ export default {
         required: false,
       },
     },
+    total: {
+      control: {
+        type: 'number',
+      },
+      description: 'The number of posts.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
   },
 } as ComponentMeta<typeof PostsList>;
 
@@ -56,23 +66,25 @@ 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:
-      '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.',
+    excerpt: excerpt1,
     id: 'post-1',
     meta: {
-      publication: { date: '2022-02-26' },
-      readingTime: '5 minutes',
+      dates: { publication: '2022-02-26' },
+      readingTime: { wordsCount: excerpt1.split(' ').length },
       thematics: [
-        <a key="cat-1" href="#">
-          Cat 1
-        </a>,
-        <a key="cat-2" href="#">
-          Cat 2
-        </a>,
+        { id: 'cat-1', name: 'Cat 1', url: '#' },
+        { id: 'cat-2', name: 'Cat 2', url: '#' },
       ],
-      commentsCount: '1 comment',
+      commentsCount: 1,
     },
     title: 'Ratione velit fuga',
     url: '#',
@@ -86,35 +98,25 @@ const posts: Post[] = [
     },
   },
   {
-    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.',
+    excerpt: excerpt2,
     id: 'post-2',
     meta: {
-      publication: { date: '2022-02-20' },
-      readingTime: '8 minutes',
-      thematics: [
-        <a key="cat-2" href="#">
-          Cat 2
-        </a>,
-      ],
-      commentsCount: '0 comments',
+      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:
-      '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.',
+    excerpt: excerpt3,
     id: 'post-3',
     meta: {
-      publication: { date: '2021-12-20' },
-      readingTime: '3 minutes',
-      thematics: [
-        <a key="cat-1" href="#">
-          Cat 1
-        </a>,
-      ],
-      commentsCount: '3 comments',
+      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: '#',
@@ -135,6 +137,7 @@ const posts: Post[] = [
 export const Default = Template.bind({});
 Default.args = {
   posts,
+  total: posts.length,
 };
 
 /**
@@ -144,6 +147,7 @@ export const ByYears = Template.bind({});
 ByYears.args = {
   posts,
   byYear: true,
+  total: posts.length,
 };
 ByYears.decorators = [
   (Story) => (
@@ -159,4 +163,5 @@ ByYears.decorators = [
 export const NoResults = Template.bind({});
 NoResults.args = {
   posts: [],
+  total: posts.length,
 };
diff --git a/src/components/organisms/layout/posts-list.test.tsx b/src/components/organisms/layout/posts-list.test.tsx
index 98af1c3..9b226ac 100644
--- a/src/components/organisms/layout/posts-list.test.tsx
+++ b/src/components/organisms/layout/posts-list.test.tsx
@@ -1,23 +1,25 @@
 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:
-      '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.',
+    excerpt: excerpt1,
     id: 'post-1',
     meta: {
-      publication: { date: '2022-02-26' },
-      readingTime: '5 minutes',
+      dates: { publication: '2022-02-26' },
+      readingTime: { wordsCount: excerpt1.split(' ').length },
       thematics: [
-        <a key="cat-1" href="#">
-          Cat 1
-        </a>,
-        <a key="cat-2" href="#">
-          Cat 2
-        </a>,
+        { id: 'cat-1', name: 'Cat 1', url: '#' },
+        { id: 'cat-2', name: 'Cat 2', url: '#' },
       ],
-      commentsCount: '1 comment',
+      commentsCount: 1,
     },
     title: 'Ratione velit fuga',
     url: '#',
@@ -26,38 +28,30 @@ const posts: Post[] = [
       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.',
+    excerpt: excerpt2,
     id: 'post-2',
     meta: {
-      publication: { date: '2022-02-20' },
-      readingTime: '8 minutes',
-      thematics: [
-        <a key="cat-2" href="#">
-          Cat 2
-        </a>,
-      ],
-      commentsCount: '0 comments',
+      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:
-      '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.',
+    excerpt: excerpt3,
     id: 'post-3',
     meta: {
-      publication: { date: '2021-12-20' },
-      readingTime: '3 minutes',
-      thematics: [
-        <a key="cat-1" href="#">
-          Cat 1
-        </a>,
-      ],
-      commentsCount: '3 comments',
+      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: '#',
@@ -66,13 +60,15 @@ const posts: Post[] = [
       height: 480,
       src: 'http://placeimg.com/640/480',
       width: 640,
+      // @ts-ignore - Needed because of the placeholder image.
+      unoptimized: true,
     },
   },
 ];
 
 describe('PostsList', () => {
   it('renders the correct number of posts', () => {
-    render(<PostsList posts={posts} />);
+    render(<PostsList posts={posts} total={posts.length} />);
     expect(screen.getAllByRole('article')).toHaveLength(posts.length);
   });
 });
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 4855205..daf4491 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -3,6 +3,8 @@ import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import Summary, { type SummaryProps } from './summary';
 import styles from './posts-list.module.scss';
+import ProgressBar from '@components/atoms/loaders/progress-bar';
+import Button from '@components/atoms/buttons/button';
 
 export type Post = SummaryProps & {
   /**
@@ -28,6 +30,10 @@ export type PostsListProps = {
    * The posts heading level (hn).
    */
   titleLevel?: HeadingLevel;
+  /**
+   * The total posts number.
+   */
+  total: number;
 };
 
 /**
@@ -40,7 +46,7 @@ const sortPostsByYear = (data: Post[]): YearCollection => {
   const yearCollection: YearCollection = {};
 
   data.forEach((post) => {
-    const postYear = new Date(post.meta.publication!.date)
+    const postYear = new Date(post.meta.dates.publication)
       .getFullYear()
       .toString();
     yearCollection[postYear] = [...(yearCollection[postYear] || []), post];
@@ -58,6 +64,7 @@ const PostsList: FC<PostsListProps> = ({
   byYear = false,
   posts,
   titleLevel,
+  total,
 }) => {
   const intl = useIntl();
 
@@ -106,6 +113,22 @@ const PostsList: FC<PostsListProps> = ({
     });
   };
 
+  const progressInfo = intl.formatMessage(
+    {
+      defaultMessage:
+        '{articlesCount, plural, =0 {# loaded articles} one {# loaded article} other {# loaded articles}} out of a total of {total}',
+      description: 'PostsList: loaded articles progress',
+      id: '9MeLN3',
+    },
+    { articlesCount: posts.length, total: total }
+  );
+
+  const loadMore = intl.formatMessage({
+    defaultMessage: 'Load more articles?',
+    id: 'uaqd5F',
+    description: 'PostsList: load more button',
+  });
+
   return posts.length === 0 ? (
     <p>
       {intl.formatMessage({
@@ -115,7 +138,16 @@ const PostsList: FC<PostsListProps> = ({
       })}
     </p>
   ) : (
-    <>{getPosts()}</>
+    <>
+      {getPosts()}
+      <ProgressBar
+        min={1}
+        max={total}
+        current={posts.length}
+        info={progressInfo}
+      />
+      <Button className={styles.btn}>{loadMore}</Button>
+    </>
   );
 };
 
diff --git a/src/components/organisms/layout/summary.stories.tsx b/src/components/organisms/layout/summary.stories.tsx
index 42f1d44..92736b8 100644
--- a/src/components/organisms/layout/summary.stories.tsx
+++ b/src/components/organisms/layout/summary.stories.tsx
@@ -91,18 +91,17 @@ const cover = {
   unoptimized: true,
 };
 
+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 = {
-  publication: { date: '2022-04-11' },
-  readingTime: '5 minutes',
+  dates: { publication: '2022-04-11' },
+  readingTime: { wordsCount: excerpt.split(' ').length },
   thematics: [
-    <a key="cat-1" href="#">
-      Cat 1
-    </a>,
-    <a key="cat-2" href="#">
-      Cat 2
-    </a>,
+    { id: 'cat-1', name: 'Cat 1', url: '#' },
+    { id: 'cat-2', name: 'Cat 2', url: '#' },
   ],
-  commentsCount: '1 comment',
+  commentsCount: 1,
 };
 
 /**
@@ -110,8 +109,7 @@ const meta = {
  */
 export const Default = Template.bind({});
 Default.args = {
-  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.',
+  excerpt,
   meta,
   title: 'Odio odit necessitatibus',
   url: '#',
@@ -123,8 +121,7 @@ Default.args = {
 export const WithCover = Template.bind({});
 WithCover.args = {
   cover,
-  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.',
+  excerpt,
   meta,
   title: 'Odio odit necessitatibus',
   url: '#',
diff --git a/src/components/organisms/layout/summary.test.tsx b/src/components/organisms/layout/summary.test.tsx
index 09b797c..9e34254 100644
--- a/src/components/organisms/layout/summary.test.tsx
+++ b/src/components/organisms/layout/summary.test.tsx
@@ -12,17 +12,13 @@ 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 = {
-  publication: { date: '2022-04-11' },
-  readingTime: '5 minutes',
+  dates: { publication: '2022-04-11' },
+  readingTime: { wordsCount: excerpt.split(' ').length },
   thematics: [
-    <a key="cat-1" href="#">
-      Cat 1
-    </a>,
-    <a key="cat-2" href="#">
-      Cat 2
-    </a>,
+    { id: 'cat-1', name: 'Cat 1', url: '#' },
+    { id: 'cat-2', name: 'Cat 2', url: '#' },
   ],
-  commentsCount: '1 comment',
+  commentsCount: 1,
 };
 
 const title = 'Odio odit necessitatibus';
@@ -77,6 +73,6 @@ describe('Summary', () => {
 
   it('renders some meta', () => {
     render(<Summary excerpt={excerpt} meta={meta} title={title} url={url} />);
-    expect(screen.getByText(meta.readingTime)).toBeInTheDocument();
+    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 8b47833..1c4a38b 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -5,7 +5,9 @@ import Link from '@components/atoms/links/link';
 import ResponsiveImage, {
   type ResponsiveImageProps,
 } from '@components/molecules/images/responsive-image';
-import Meta, { MetaData } from '@components/molecules/layout/meta';
+import Meta, { type MetaData } from '@components/molecules/layout/meta';
+import { type Dates } from '@ts/types/app';
+import useReadingTime from '@utils/hooks/use-reading-time';
 import { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './summary.module.scss';
@@ -15,15 +17,25 @@ export type Cover = Pick<
   'alt' | 'src' | 'width' | 'height'
 >;
 
-export type SummaryMeta = Pick<
-  MetaData,
-  | 'author'
-  | 'commentsCount'
-  | 'publication'
-  | 'readingTime'
-  | 'thematics'
-  | 'update'
->;
+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 SummaryProps = {
   /**
@@ -79,6 +91,36 @@ 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;
+
+    return {
+      author,
+      publication: { date: dates.publication },
+      update:
+        dates.update && dates.publication !== dates.update
+          ? { date: dates.update }
+          : undefined,
+      readingTime,
+      thematics: thematics?.map((thematic) => (
+        <Link key={thematic.id} href={thematic.url}>
+          {thematic.name}
+        </Link>
+      )),
+      topics: topics?.map((topic) => (
+        <Link key={topic.id} href={topic.url}>
+          {topic.name}
+        </Link>
+      )),
+      comments: {
+        count: commentsCount || 0,
+        target: `${url}#comments`,
+      },
+    };
+  };
 
   return (
     <article className={styles.wrapper}>
@@ -104,7 +146,7 @@ const Summary: FC<SummaryProps> = ({
         </ButtonLink>
       </div>
       <footer className={styles.footer}>
-        <Meta data={meta} layout="column" className={styles.meta} />
+        <Meta data={getMeta(meta)} layout="column" className={styles.meta} />
       </footer>
     </article>
   );
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index b4b0d68..480c76e 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -379,23 +379,25 @@ 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:
-      '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.',
+    excerpt: excerpt1,
     id: 'post-1',
     meta: {
-      publication: { date: '2022-02-26' },
-      readingTime: '5 minutes',
-      categories: [
-        <a key="cat-1" href="#">
-          Cat 1
-        </a>,
-        <a key="cat-2" href="#">
-          Cat 2
-        </a>,
+      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 comment',
+      commentsCount: 1,
     },
     title: 'Ratione velit fuga',
     url: '#',
@@ -409,39 +411,25 @@ const posts = [
     },
   },
   {
-    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.',
+    excerpt: excerpt2,
     id: 'post-2',
     meta: {
-      publication: {
-        date: '2022-02-20',
-      },
-      readingTime: '8 minutes',
-      categories: [
-        <a key="cat-2" href="#">
-          Cat 2
-        </a>,
-      ],
-      comments: '0 comments',
+      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:
-      '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.',
+    excerpt: excerpt3,
     id: 'post-3',
     meta: {
-      publication: {
-        date: '2021-12-20',
-      },
-      readingTime: '3 minutes',
-      categories: [
-        <a key="cat-1" href="#">
-          Cat 1
-        </a>,
-      ],
-      comments: '3 comments',
+      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: '#',
@@ -476,7 +464,7 @@ Blog.args = {
   headerMeta: { total: `${posts.length} posts` },
   children: (
     <>
-      <PostsList posts={posts} byYear={true} />
+      <PostsList posts={posts} byYear={true} total={posts.length} />
       <ProgressBar min={1} max={1} current={1} info="1/1 page loaded." />
     </>
   ),
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
new file mode 100644
index 0000000..dc72388
--- /dev/null
+++ b/src/pages/blog/index.tsx
@@ -0,0 +1,169 @@
+import ProgressBar from '@components/atoms/loaders/progress-bar';
+import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import PostsList, { Post } from '@components/organisms/layout/posts-list';
+import PageLayout from '@components/templates/page/page-layout';
+import { getArticles, getTotalArticles } from '@services/graphql/articles';
+import { Article, Meta } from '@ts/types/app';
+import { settings } from '@utils/config';
+import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import useSettings from '@utils/hooks/use-settings';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useIntl } from 'react-intl';
+import { Blog, Graph, WebPage } from 'schema-dts';
+
+type BlogPageProps = {
+  posts: Article[];
+  totalPosts: number;
+  translation: Messages;
+};
+
+/**
+ * Blog index page.
+ */
+const BlogPage: NextPage<BlogPageProps> = ({ posts, totalPosts }) => {
+  const intl = useIntl();
+  const title = intl.formatMessage({
+    defaultMessage: 'Blog',
+    description: 'BlogPage: page title',
+    id: '7TbbIk',
+  });
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const breadcrumb: BreadcrumbItem[] = [
+    { id: 'home', name: homeLabel, url: '/' },
+    { id: 'blog', name: title, url: '/blog' },
+  ];
+
+  const { website } = useSettings();
+  const { asPath } = useRouter();
+  const pageTitle = intl.formatMessage(
+    {
+      defaultMessage: 'Blog: development, open source - {websiteName}',
+      description: 'BlogPage: SEO - Page title',
+      id: '+Y+tLK',
+    },
+    { websiteName: website.name }
+  );
+  const pageDescription = intl.formatMessage(
+    {
+      defaultMessage:
+        "Discover {websiteName}'s writings. He talks about web development, Linux and open source mostly.",
+      description: 'BlogPage: SEO - Meta description',
+      id: '18h/t0',
+    },
+    { websiteName: website.name }
+  );
+  const pageUrl = `${website.url}${asPath}`;
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: pageTitle,
+    description: pageDescription,
+    inLanguage: website.locales.default,
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${website.url}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const blogSchema: Blog = {
+    '@id': `${website.url}/#blog`,
+    '@type': 'Blog',
+    author: { '@id': `${website.url}/#branding` },
+    creator: { '@id': `${website.url}/#branding` },
+    editor: { '@id': `${website.url}/#branding` },
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, blogSchema],
+  };
+
+  const postsCount = intl.formatMessage(
+    {
+      defaultMessage:
+        '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+      id: 'OF5cPz',
+      description: 'BlogPage: posts count meta',
+    },
+    { postsCount: totalPosts }
+  );
+
+  const getPostMeta = (data: Meta<'article'>): Post['meta'] => {
+    const { commentsCount, dates, thematics, wordsCount } = data;
+
+    return {
+      commentsCount,
+      dates,
+      readingTime: { wordsCount: wordsCount || 0, onlyMinutes: true },
+      thematics: thematics?.map((thematic) => {
+        return { ...thematic, url: `/thematique/${thematic.slug}` };
+      }),
+    };
+  };
+
+  const getPosts = (): Post[] => {
+    return posts.map((post) => {
+      return {
+        ...post,
+        cover: post.meta.cover,
+        excerpt: post.intro,
+        meta: getPostMeta(post.meta),
+        url: `/article/${post.slug}`,
+      };
+    });
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+        <meta name="description" content={pageDescription} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={pageDescription} />
+      </Head>
+      <Script
+        id="schema-blog"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <PageLayout
+        title={title}
+        breadcrumb={breadcrumb}
+        headerMeta={{ total: postsCount }}
+      >
+        <PostsList posts={getPosts()} byYear={true} total={totalPosts} />
+      </PageLayout>
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const posts = await getArticles({ first: settings.postsPerPage });
+  const totalPosts = await getTotalArticles();
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      posts: JSON.parse(JSON.stringify(posts.articles)),
+      totalPosts,
+      translation,
+    },
+  };
+};
+
+export default BlogPage;
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index f1cb38a..7b7a695 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -1,5 +1,4 @@
 @use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/variables" as var;
 
 h1 {
   font-size: var(--font-size-3xl);
@@ -116,7 +115,7 @@ dl {
 ul,
 ol,
 dl {
-  margin: var(--spacing-md) 0;
+  margin: var(--spacing-sm) 0;
 
   & & {
     margin: var(--spacing-2xs) 0 0;
@@ -137,13 +136,13 @@ a {
   background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
     0 0 / 100% 200% no-repeat;
   color: var(--color-primary);
-  text-decoration-thickness: 13%;
+  text-decoration-thickness: 0.15em;
   text-underline-offset: 20%;
   transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s;
 
   &:hover {
     color: var(--color-primary-light);
-    text-decoration-thickness: 23%;
+    text-decoration-thickness: 0.25em;
   }
 
   &:focus {
@@ -156,39 +155,6 @@ a {
     color: var(--color-primary-dark);
     text-decoration-thickness: 18%;
   }
-
-  &.external {
-    &::after {
-      display: inline-block;
-      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
-    }
-
-    &:focus:not(:active)::after {
-      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
-    }
-  }
-
-  &[hreflang] {
-    &::after {
-      display: inline-block;
-      content: "\0000a0["attr(hreflang) "]";
-      font-size: var(--font-size-sm);
-    }
-
-    &.external {
-      &::after {
-        content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
-            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
-          ));
-      }
-
-      &:focus:not(:active)::after {
-        content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg(
-            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
-          ));
-      }
-    }
-  }
 }
 
 button,
diff --git a/src/utils/hooks/use-reading-time.tsx b/src/utils/hooks/use-reading-time.tsx
new file mode 100644
index 0000000..fb54135
--- /dev/null
+++ b/src/utils/hooks/use-reading-time.tsx
@@ -0,0 +1,58 @@
+import { useIntl } from 'react-intl';
+
+/**
+ * Retrieve the estimated reading time by words count.
+ *
+ * @param {number} wordsCount - The number of words.
+ * @returns {string} The estimated reading time.
+ */
+const useReadingTime = (
+  wordsCount: number,
+  onlyMinutes: boolean = false
+): string => {
+  const intl = useIntl();
+  const wordsPerMinute = 245;
+  const wordsPerSecond = wordsPerMinute / 60;
+  const estimatedTimeInSeconds = wordsCount / wordsPerSecond;
+
+  if (onlyMinutes) {
+    const estimatedTimeInMinutes = Math.round(estimatedTimeInSeconds / 60);
+
+    return intl.formatMessage(
+      {
+        defaultMessage: '{minutesCount} minutes',
+        description: 'useReadingTime: rounded minutes count',
+        id: 's1i43J',
+      },
+      { minutesCount: estimatedTimeInMinutes }
+    );
+  } else {
+    const estimatedTimeInMinutes = Math.floor(estimatedTimeInSeconds / 60);
+
+    if (estimatedTimeInMinutes <= 0) {
+      return intl.formatMessage(
+        {
+          defaultMessage: '{count} seconds',
+          description: 'useReadingTime: seconds count',
+          id: 'i7Wq3G',
+        },
+        { count: estimatedTimeInSeconds.toFixed(0) }
+      );
+    }
+
+    const remainingSeconds = Math.round(
+      estimatedTimeInSeconds - estimatedTimeInMinutes * 60
+    ).toFixed(0);
+
+    return intl.formatMessage(
+      {
+        defaultMessage: '{minutesCount} minutes {secondsCount} seconds',
+        description: 'useReadingTime: minutes + seconds count',
+        id: 'OevMeU',
+      },
+      { minutesCount: estimatedTimeInMinutes, secondsCount: remainingSeconds }
+    );
+  }
+};
+
+export default useReadingTime;
-- 
cgit v1.2.3


From dab72bb270ee2ee47a0b472d5e9e240cba7cbf0f Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 13 May 2022 15:39:55 +0200
Subject: chore: handle blog pagination

---
 .../atoms/loaders/progress-bar.module.scss         |   2 +-
 .../organisms/layout/posts-list.stories.tsx        |  44 ++++++++
 .../organisms/layout/posts-list.test.tsx           |  15 +++
 src/components/organisms/layout/posts-list.tsx     |  73 ++++++++++---
 .../organisms/layout/summary.module.scss           |  34 ++++--
 src/components/organisms/layout/summary.tsx        |  11 +-
 src/pages/blog/index.tsx                           | 110 +++++++++++++++----
 src/services/graphql/articles.ts                   |  66 ++++++++----
 src/utils/helpers/rss.ts                           |  13 ++-
 src/utils/hooks/use-pagination.tsx                 | 116 +++++++++++++++++++++
 10 files changed, 415 insertions(+), 69 deletions(-)
 create mode 100644 src/utils/hooks/use-pagination.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/atoms/loaders/progress-bar.module.scss b/src/components/atoms/loaders/progress-bar.module.scss
index 166b7c4..878010a 100644
--- a/src/components/atoms/loaders/progress-bar.module.scss
+++ b/src/components/atoms/loaders/progress-bar.module.scss
@@ -1,7 +1,6 @@
 @use "@styles/abstracts/functions" as fun;
 
 .progress {
-  width: max-content;
   margin: var(--spacing-sm) auto var(--spacing-md);
   text-align: center;
 
@@ -15,6 +14,7 @@
     width: clamp(25ch, 20vw, 30ch);
     max-width: 100%;
     height: fun.convert-px(13);
+    margin: auto;
     appearance: none;
     background: var(--color-bg-tertiary);
     border: fun.convert-px(1) solid var(--color-primary-darker);
diff --git a/src/components/organisms/layout/posts-list.stories.tsx b/src/components/organisms/layout/posts-list.stories.tsx
index de0478f..77318f4 100644
--- a/src/components/organisms/layout/posts-list.stories.tsx
+++ b/src/components/organisms/layout/posts-list.stories.tsx
@@ -9,6 +9,9 @@ export default {
   component: PostsList,
   args: {
     byYear: false,
+    isLoading: false,
+    showLoadMoreBtn: false,
+    titleLevel: 2,
   },
   argTypes: {
     byYear: {
@@ -25,6 +28,33 @@ export default {
         required: false,
       },
     },
+    isLoading: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the data is loading.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
+    loadMore: {
+      control: {
+        type: null,
+      },
+      description: 'A function to load more posts on button click.',
+      table: {
+        category: 'Events',
+      },
+      type: {
+        name: 'function',
+        required: false,
+      },
+    },
     posts: {
       description: 'The posts data.',
       type: {
@@ -33,6 +63,20 @@ export default {
         value: {},
       },
     },
+    showLoadMoreBtn: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if the load more button should be visible.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
     titleLevel: {
       control: {
         type: 'number',
diff --git a/src/components/organisms/layout/posts-list.test.tsx b/src/components/organisms/layout/posts-list.test.tsx
index 9b226ac..7429cbd 100644
--- a/src/components/organisms/layout/posts-list.test.tsx
+++ b/src/components/organisms/layout/posts-list.test.tsx
@@ -71,4 +71,19 @@ describe('PostsList', () => {
     render(<PostsList posts={posts} total={posts.length} />);
     expect(screen.getAllByRole('article')).toHaveLength(posts.length);
   });
+
+  it('renders the number of loaded posts', () => {
+    render(<PostsList posts={posts} total={posts.length} />);
+    const info = `${posts.length} loaded articles out of a total of ${posts.length}`;
+    expect(screen.getByText(info)).toBeInTheDocument();
+  });
+
+  it('renders a load more button', () => {
+    render(
+      <PostsList posts={posts} total={posts.length} showLoadMoreBtn={true} />
+    );
+    expect(
+      screen.getByRole('button', { name: /Load more/i })
+    ).toBeInTheDocument();
+  });
 });
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index daf4491..4d77d20 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -1,10 +1,11 @@
+import Button from '@components/atoms/buttons/button';
 import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
-import { FC } from 'react';
+import ProgressBar from '@components/atoms/loaders/progress-bar';
+import Spinner from '@components/atoms/loaders/spinner';
+import { FC, Fragment, useRef } from 'react';
 import { useIntl } from 'react-intl';
-import Summary, { type SummaryProps } from './summary';
 import styles from './posts-list.module.scss';
-import ProgressBar from '@components/atoms/loaders/progress-bar';
-import Button from '@components/atoms/buttons/button';
+import Summary, { type SummaryProps } from './summary';
 
 export type Post = SummaryProps & {
   /**
@@ -22,10 +23,22 @@ export type PostsListProps = {
    * True to display the posts by year. Default: false.
    */
   byYear?: boolean;
+  /**
+   * Determine if the data is loading.
+   */
+  isLoading?: boolean;
+  /**
+   * Load more button handler.
+   */
+  loadMore?: () => void;
   /**
    * The posts data.
    */
   posts: Post[];
+  /**
+   * Determine if the load more button should be visible.
+   */
+  showLoadMoreBtn?: boolean;
   /**
    * The posts heading level (hn).
    */
@@ -62,29 +75,42 @@ const sortPostsByYear = (data: Post[]): YearCollection => {
  */
 const PostsList: FC<PostsListProps> = ({
   byYear = false,
+  isLoading = false,
+  loadMore,
   posts,
+  showLoadMoreBtn = false,
   titleLevel,
   total,
 }) => {
   const intl = useIntl();
+  const lastPostRef = useRef<HTMLSpanElement>(null);
 
   /**
    * Retrieve the list of posts.
    *
-   * @param {Posts[]} data - A collection fo posts.
+   * @param {Posts[]} allPosts - A collection fo posts.
    * @param {HeadingLevel} [headingLevel] - The posts heading level (hn).
    * @returns {JSX.Element} The list of posts.
    */
   const getList = (
-    data: Post[],
+    allPosts: Post[],
     headingLevel: HeadingLevel = 2
   ): JSX.Element => {
+    const lastPostId = allPosts[allPosts.length - 1].id;
+
     return (
       <ol className={styles.list}>
-        {data.map(({ id, ...post }) => (
-          <li key={id} className={styles.item}>
-            <Summary {...post} titleLevel={headingLevel} />
-          </li>
+        {allPosts.map(({ id, ...post }) => (
+          <Fragment key={id}>
+            <li className={styles.item}>
+              <Summary {...post} titleLevel={headingLevel} />
+            </li>
+            {id === lastPostId && (
+              <li>
+                <span ref={lastPostRef} tabIndex={-1} />
+              </li>
+            )}
+          </Fragment>
         ))}
       </ol>
     );
@@ -93,7 +119,7 @@ const PostsList: FC<PostsListProps> = ({
   /**
    * Retrieve the list of posts.
    *
-   * @returns {JSX.Element | JSX.Element[]} - The posts list.
+   * @returns {JSX.Element | JSX.Element[]} The posts list.
    */
   const getPosts = (): JSX.Element | JSX.Element[] => {
     if (!byYear) return getList(posts);
@@ -123,12 +149,23 @@ const PostsList: FC<PostsListProps> = ({
     { articlesCount: posts.length, total: total }
   );
 
-  const loadMore = intl.formatMessage({
+  const loadMoreBody = intl.formatMessage({
     defaultMessage: 'Load more articles?',
     id: 'uaqd5F',
     description: 'PostsList: load more button',
   });
 
+  /**
+   * Load more posts handler.
+   */
+  const loadMorePosts = () => {
+    if (lastPostRef.current) {
+      lastPostRef.current.focus();
+    }
+
+    loadMore && loadMore();
+  };
+
   return posts.length === 0 ? (
     <p>
       {intl.formatMessage({
@@ -140,13 +177,23 @@ const PostsList: FC<PostsListProps> = ({
   ) : (
     <>
       {getPosts()}
+      {isLoading && <Spinner />}
       <ProgressBar
         min={1}
         max={total}
         current={posts.length}
         info={progressInfo}
       />
-      <Button className={styles.btn}>{loadMore}</Button>
+      {showLoadMoreBtn && (
+        <Button
+          kind="tertiary"
+          onClick={loadMorePosts}
+          disabled={isLoading}
+          className={styles.btn}
+        >
+          {loadMoreBody}
+        </Button>
+      )}
     </>
   );
 };
diff --git a/src/components/organisms/layout/summary.module.scss b/src/components/organisms/layout/summary.module.scss
index 6d19853..5f22fbb 100644
--- a/src/components/organisms/layout/summary.module.scss
+++ b/src/components/organisms/layout/summary.module.scss
@@ -2,6 +2,10 @@
 @use "@styles/abstracts/mixins" as mix;
 
 .wrapper {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  column-gap: var(--spacing-md);
+  row-gap: var(--spacing-sm);
   padding: var(--spacing-2xs) 0 var(--spacing-lg);
 
   @include mix.media("screen") {
@@ -18,19 +22,26 @@
     }
 
     @include mix.dimensions("sm") {
-      display: grid;
       grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
       grid-template-rows: repeat(3, max-content);
-      column-gap: var(--spacing-md);
+    }
+  }
+
+  &:hover {
+    .icon {
+      transform: scaleX(1.4);
+      transform-origin: left;
     }
   }
 }
 
 .cover {
+  display: inline-flex;
+  flex-flow: column nowrap;
+  justify-content: center;
   width: auto;
-  max-height: fun.convert-px(100);
+  height: fun.convert-px(100);
   max-width: 100%;
-  margin-bottom: var(--spacing-sm);
   border: fun.convert-px(1) solid var(--color-border);
 
   @include mix.media("screen") {
@@ -70,7 +81,9 @@
 }
 
 .title {
+  margin: 0;
   background: none;
+  color: inherit;
   text-shadow: none;
 }
 
@@ -79,18 +92,17 @@
   flex-flow: row nowrap;
   column-gap: var(--spacing-xs);
   width: max-content;
-  margin: var(--spacing-sm) 0;
+  margin: var(--spacing-sm) 0 0;
 }
 
 .meta {
-  display: grid;
-  grid-template-columns: repeat(
-    auto-fit,
-    min(100vw, calc(50% - var(--spacing-lg)))
-  );
-  margin-top: var(--spacing-lg);
+  flex-flow: row wrap;
   font-size: var(--font-size-sm);
 
+  &__item {
+    flex: 1 0 min(calc(100vw - 2 * var(--spacing-md)), 14ch);
+  }
+
   @include mix.media("screen") {
     @include mix.dimensions("sm") {
       display: flex;
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index 1c4a38b..078f9ee 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -141,12 +141,19 @@ const Summary: FC<SummaryProps> = ({
         <ButtonLink target={url} className={styles['read-more']}>
           <>
             {readMore}
-            <Arrow direction="right" />
+            <Arrow direction="right" className={styles.icon} />
           </>
         </ButtonLink>
       </div>
       <footer className={styles.footer}>
-        <Meta data={getMeta(meta)} layout="column" className={styles.meta} />
+        <Meta
+          data={getMeta(meta)}
+          layout="column"
+          itemsLayout="stacked"
+          withSeparator={false}
+          className={styles.meta}
+          groupClassName={styles.meta__item}
+        />
       </footer>
     </article>
   );
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index dc72388..1e7581c 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,11 +1,17 @@
-import ProgressBar from '@components/atoms/loaders/progress-bar';
-import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
-import PostsList, { Post } from '@components/organisms/layout/posts-list';
+import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import PostsList, { type Post } from '@components/organisms/layout/posts-list';
 import PageLayout from '@components/templates/page/page-layout';
-import { getArticles, getTotalArticles } from '@services/graphql/articles';
-import { Article, Meta } from '@ts/types/app';
+import { type EdgesResponse } from '@services/graphql/api';
+import {
+  getArticleFromRawData,
+  getArticles,
+  getTotalArticles,
+} from '@services/graphql/articles';
+import { type Article, type Meta } from '@ts/types/app';
+import { type RawArticle } from '@ts/types/raw-data';
 import { settings } from '@utils/config';
-import { loadTranslation, Messages } from '@utils/helpers/i18n';
+import { loadTranslation, type Messages } from '@utils/helpers/i18n';
+import usePagination from '@utils/hooks/use-pagination';
 import useSettings from '@utils/hooks/use-settings';
 import { GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
@@ -15,15 +21,15 @@ import { useIntl } from 'react-intl';
 import { Blog, Graph, WebPage } from 'schema-dts';
 
 type BlogPageProps = {
-  posts: Article[];
-  totalPosts: number;
+  articles: EdgesResponse<RawArticle>;
+  totalArticles: number;
   translation: Messages;
 };
 
 /**
  * Blog index page.
  */
-const BlogPage: NextPage<BlogPageProps> = ({ posts, totalPosts }) => {
+const BlogPage: NextPage<BlogPageProps> = ({ articles, totalArticles }) => {
   const intl = useIntl();
   const title = intl.formatMessage({
     defaultMessage: 'Blog',
@@ -40,7 +46,7 @@ const BlogPage: NextPage<BlogPageProps> = ({ posts, totalPosts }) => {
     { id: 'blog', name: title, url: '/blog' },
   ];
 
-  const { website } = useSettings();
+  const { blog, website } = useSettings();
   const { asPath } = useRouter();
   const pageTitle = intl.formatMessage(
     {
@@ -98,11 +104,17 @@ const BlogPage: NextPage<BlogPageProps> = ({ posts, totalPosts }) => {
       id: 'OF5cPz',
       description: 'BlogPage: posts count meta',
     },
-    { postsCount: totalPosts }
+    { postsCount: totalArticles }
   );
 
-  const getPostMeta = (data: Meta<'article'>): Post['meta'] => {
-    const { commentsCount, dates, thematics, wordsCount } = data;
+  /**
+   * 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,
@@ -114,7 +126,13 @@ const BlogPage: NextPage<BlogPageProps> = ({ posts, totalPosts }) => {
     };
   };
 
-  const getPosts = (): Post[] => {
+  /**
+   * 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,
@@ -126,6 +144,45 @@ const BlogPage: NextPage<BlogPageProps> = ({ posts, totalPosts }) => {
     });
   };
 
+  /**
+   * 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,
+    isLoadingInitialData,
+    isLoadingMore,
+    hasNextPage,
+    setSize,
+  } = usePagination<RawArticle>({
+    fallbackData: [articles],
+    fetcher: getArticles,
+    perPage: blog.postsPerPage,
+  });
+
+  /**
+   * Load more posts handler.
+   */
+  const loadMore = () => {
+    setSize((prevSize) => prevSize + 1);
+  };
+
   return (
     <>
       <Head>
@@ -146,21 +203,36 @@ const BlogPage: NextPage<BlogPageProps> = ({ posts, totalPosts }) => {
         breadcrumb={breadcrumb}
         headerMeta={{ total: postsCount }}
       >
-        <PostsList posts={getPosts()} byYear={true} total={totalPosts} />
+        {data && (
+          <PostsList
+            byYear={true}
+            isLoading={isLoadingMore || isLoadingInitialData}
+            loadMore={loadMore}
+            posts={getPostsList(data)}
+            showLoadMoreBtn={hasNextPage}
+            total={totalArticles}
+          />
+        )}
+        {error &&
+          intl.formatMessage({
+            defaultMessage: 'Failed to load.',
+            description: 'BlogPage: failed to load text',
+            id: 'C/XGkH',
+          })}
       </PageLayout>
     </>
   );
 };
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => {
-  const posts = await getArticles({ first: settings.postsPerPage });
-  const totalPosts = await getTotalArticles();
+  const articles = await getArticles({ first: settings.postsPerPage });
+  const totalArticles = await getTotalArticles();
   const translation = await loadTranslation(locale);
 
   return {
     props: {
-      posts: JSON.parse(JSON.stringify(posts.articles)),
-      totalPosts,
+      articles: JSON.parse(JSON.stringify(articles)),
+      totalArticles,
       translation,
     },
   };
diff --git a/src/services/graphql/articles.ts b/src/services/graphql/articles.ts
index 7aff3e0..1eb112e 100644
--- a/src/services/graphql/articles.ts
+++ b/src/services/graphql/articles.ts
@@ -1,17 +1,18 @@
-import { type Article, type ArticleCard } from '@ts/types/app';
+import { Slug, type Article, type ArticleCard } from '@ts/types/app';
 import {
   type RawArticle,
   type RawArticlePreview,
   type TotalItems,
 } from '@ts/types/raw-data';
 import { getAuthorFromRawData } from '@utils/helpers/author';
-import { getDates } from '@utils/helpers/dates';
 import { getImageFromRawData } from '@utils/helpers/images';
 import { getPageLinkFromRawData } from '@utils/helpers/pages';
-import { EdgesVars, fetchAPI, getAPIUrl, PageInfo } from './api';
+import { EdgesResponse, EdgesVars, fetchAPI, getAPIUrl, PageInfo } from './api';
 import {
+  articleBySlugQuery,
   articlesCardQuery,
   articlesQuery,
+  articlesSlugQuery,
   totalArticlesQuery,
 } from './articles.query';
 
@@ -66,10 +67,7 @@ export const getArticleFromRawData = (data: RawArticle): Article => {
       cover: featuredImage?.node
         ? getImageFromRawData(featuredImage.node)
         : undefined,
-      dates: {
-        publication: date,
-        update: modified,
-      },
+      dates: { publication: date, update: modified },
       readingTime: info.readingTime,
       seo: {
         description: seo?.metaDesc || '',
@@ -91,25 +89,19 @@ export const getArticleFromRawData = (data: RawArticle): Article => {
 /**
  * Retrieve the given number of articles from API.
  *
- * @param {EdgesVars} obj - An object.
- * @param {number} obj.first - The number of articles.
- * @returns {Promise<GetArticlesReturn>} - The articles data.
+ * @param {EdgesVars} props - An object of GraphQL variables.
+ * @returns {Promise<EdgesResponse<RawArticle>>} The articles data.
  */
-export const getArticles = async ({
-  first,
-}: EdgesVars): Promise<GetArticlesReturn> => {
+export const getArticles = async (
+  props: EdgesVars
+): Promise<EdgesResponse<RawArticle>> => {
   const response = await fetchAPI<RawArticle, typeof articlesQuery>({
     api: getAPIUrl(),
     query: articlesQuery,
-    variables: { first },
+    variables: { ...props },
   });
 
-  return {
-    articles: response.posts.edges.map((edge) =>
-      getArticleFromRawData(edge.node)
-    ),
-    pageInfo: response.posts.pageInfo,
-  };
+  return response.posts;
 };
 
 /**
@@ -123,7 +115,7 @@ const getArticleCardFromRawData = (data: RawArticlePreview): ArticleCard => {
 
   return {
     cover: featuredImage ? getImageFromRawData(featuredImage.node) : undefined,
-    dates: getDates(date, ''),
+    dates: { publication: date },
     id: databaseId,
     slug,
     title,
@@ -148,3 +140,35 @@ export const getArticlesCard = async ({
 
   return response.posts.nodes.map((node) => getArticleCardFromRawData(node));
 };
+
+/**
+ * Retrieve an Article object by slug.
+ *
+ * @param {string} slug - The article slug.
+ * @returns {Promise<Article>} The requested article.
+ */
+export const getArticleBySlug = async (slug: string): Promise<Article> => {
+  const response = await fetchAPI<RawArticle, typeof articleBySlugQuery>({
+    api: getAPIUrl(),
+    query: articleBySlugQuery,
+    variables: { slug },
+  });
+
+  return getArticleFromRawData(response.post);
+};
+
+/**
+ * Retrieve all the articles slugs.
+ *
+ * @returns {Promise<string[]>} - An array of articles slugs.
+ */
+export const getAllArticlesSlugs = async (): Promise<string[]> => {
+  const totalArticles = await getTotalArticles();
+  const response = await fetchAPI<Slug, typeof articlesSlugQuery>({
+    api: getAPIUrl(),
+    query: articlesSlugQuery,
+    variables: { first: totalArticles },
+  });
+
+  return response.posts.edges.map((edge) => edge.node.slug);
+};
diff --git a/src/utils/helpers/rss.ts b/src/utils/helpers/rss.ts
index 95d3b7b..8ee774c 100644
--- a/src/utils/helpers/rss.ts
+++ b/src/utils/helpers/rss.ts
@@ -1,4 +1,8 @@
-import { getArticles, getTotalArticles } from '@services/graphql/articles';
+import {
+  getArticleFromRawData,
+  getArticles,
+  getTotalArticles,
+} from '@services/graphql/articles';
 import { Article } from '@ts/types/app';
 import { settings } from '@utils/config';
 import { Feed } from 'feed';
@@ -10,7 +14,12 @@ import { Feed } from 'feed';
  */
 const getAllArticles = async (): Promise<Article[]> => {
   const totalArticles = await getTotalArticles();
-  const { articles } = await getArticles({ first: totalArticles });
+  const rawArticles = await getArticles({ first: totalArticles });
+  const articles: Article[] = [];
+
+  rawArticles.edges.forEach((edge) =>
+    articles.push(getArticleFromRawData(edge.node))
+  );
 
   return articles;
 };
diff --git a/src/utils/hooks/use-pagination.tsx b/src/utils/hooks/use-pagination.tsx
new file mode 100644
index 0000000..1e24b75
--- /dev/null
+++ b/src/utils/hooks/use-pagination.tsx
@@ -0,0 +1,116 @@
+import { type EdgesResponse, type EdgesVars } from '@services/graphql/api';
+import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
+
+export type UsePaginationProps<T> = {
+  /**
+   * The initial data.
+   */
+  fallbackData: EdgesResponse<T>[];
+  /**
+   * A function to fetch more data.
+   */
+  fetcher: (props: EdgesVars) => Promise<EdgesResponse<T>>;
+  /**
+   * The number of results per page.
+   */
+  perPage: number;
+  /**
+   * An optional search string.
+   */
+  search?: string;
+};
+
+export type UsePaginationReturn<T> = {
+  /**
+   * The data from the API.
+   */
+  data?: EdgesResponse<T>[];
+  /**
+   * An error thrown by fetcher.
+   */
+  error: any;
+  /**
+   * Determine if there's more data to fetch.
+   */
+  hasNextPage?: boolean;
+  /**
+   * Determine if the initial data is loading.
+   */
+  isLoadingInitialData: boolean;
+  /**
+   * Determine if more data is currently loading.
+   */
+  isLoadingMore?: boolean;
+  /**
+   * Determine if the data is refreshing.
+   */
+  isRefreshing?: boolean;
+  /**
+   * Determine if there's a request or revalidation loading.
+   */
+  isValidating: boolean;
+  /**
+   * Set the number of pages that need to be fetched.
+   */
+  setSize: (
+    size: number | ((_size: number) => number)
+  ) => Promise<EdgesResponse<T>[] | undefined>;
+};
+
+/**
+ * Handle data fetching with pagination.
+ *
+ * This hook is a wrapper of `useSWRInfinite` hook.
+ *
+ * @param {UsePaginationProps} props - The pagination configuration.
+ * @returns {UsePaginationReturn} An object with pagination data and helpers.
+ */
+const usePagination = <T extends object>({
+  fallbackData,
+  fetcher,
+  perPage,
+  search,
+}: UsePaginationProps<T>): UsePaginationReturn<T> => {
+  const getKey: SWRInfiniteKeyLoader = (
+    pageIndex: number,
+    previousData: EdgesResponse<T>
+  ): EdgesVars | null => {
+    // Reached the end.
+    if (previousData && !previousData.edges.length) return null;
+
+    // Fetch data using this parameters.
+    return pageIndex === 0
+      ? { first: perPage, search }
+      : {
+          first: perPage,
+          after: previousData.pageInfo.endCursor,
+          search,
+        };
+  };
+
+  const { data, error, isValidating, size, setSize } = useSWRInfinite(
+    getKey,
+    fetcher,
+    { fallbackData }
+  );
+
+  const isLoadingInitialData = !data && !error;
+  const isLoadingMore =
+    isLoadingInitialData ||
+    (size > 0 && data && typeof data[size - 1] === 'undefined');
+  const isRefreshing = isValidating && data && data.length === size;
+  const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage;
+
+  return {
+    data,
+    error,
+    hasNextPage,
+    isLoadingInitialData,
+    isLoadingMore,
+    isRefreshing,
+    isValidating,
+    setSize,
+  };
+};
+
+export default usePagination;
-- 
cgit v1.2.3


From 235fe67d770f83131c9ec10b99012319440db690 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 15 May 2022 16:36:58 +0200
Subject: chore: add Search page

---
 .../organisms/forms/search-form.stories.tsx        |   9 +-
 .../organisms/forms/search-form.test.tsx           |   4 +-
 src/components/organisms/forms/search-form.tsx     |  14 +-
 src/components/organisms/layout/header.stories.tsx |   9 +-
 src/components/organisms/layout/header.test.tsx    |  12 +-
 src/components/organisms/layout/header.tsx         |  21 +-
 .../organisms/modals/search-modal.stories.tsx      |  11 +-
 .../organisms/modals/search-modal.test.tsx         |   2 +-
 src/components/organisms/modals/search-modal.tsx   |   8 +-
 .../organisms/toolbar/search.stories.tsx           |  10 +-
 src/components/organisms/toolbar/search.test.tsx   |   6 +-
 src/components/organisms/toolbar/search.tsx        |  12 +-
 .../organisms/toolbar/toolbar.stories.tsx          |  11 +-
 src/components/organisms/toolbar/toolbar.test.tsx  |   2 +-
 src/components/organisms/toolbar/toolbar.tsx       |   7 +-
 src/components/templates/layout/layout.tsx         |   3 +-
 src/pages/blog/index.tsx                           |   4 +-
 src/pages/recherche/index.tsx                      | 324 +++++++++++++++++++++
 src/services/graphql/api.ts                        |  15 +-
 src/services/graphql/articles.query.ts             |   4 +-
 src/services/graphql/articles.ts                   |   3 +-
 src/services/graphql/contact.ts                    |   4 +-
 src/utils/hooks/use-data-from-api.tsx              |  23 ++
 src/utils/hooks/use-pagination.tsx                 |   3 +-
 24 files changed, 436 insertions(+), 85 deletions(-)
 create mode 100644 src/pages/recherche/index.tsx
 create mode 100644 src/utils/hooks/use-data-from-api.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/organisms/forms/search-form.stories.tsx b/src/components/organisms/forms/search-form.stories.tsx
index 7f4c7c0..6ea6122 100644
--- a/src/components/organisms/forms/search-form.stories.tsx
+++ b/src/components/organisms/forms/search-form.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SearchForm from './search-form';
 
 /**
@@ -10,6 +9,7 @@ export default {
   component: SearchForm,
   args: {
     hideLabel: false,
+    searchPage: '#',
   },
   argTypes: {
     className: {
@@ -40,13 +40,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SearchForm>;
 
 const Template: ComponentStory<typeof SearchForm> = (args) => (
diff --git a/src/components/organisms/forms/search-form.test.tsx b/src/components/organisms/forms/search-form.test.tsx
index 4e3d285..59a2f68 100644
--- a/src/components/organisms/forms/search-form.test.tsx
+++ b/src/components/organisms/forms/search-form.test.tsx
@@ -3,14 +3,14 @@ import SearchForm from './search-form';
 
 describe('SearchForm', () => {
   it('renders a search input', () => {
-    render(<SearchForm />);
+    render(<SearchForm searchPage="#" />);
     expect(
       screen.getByRole('searchbox', { name: 'Search for:' })
     ).toBeInTheDocument();
   });
 
   it('renders a submit button', () => {
-    render(<SearchForm />);
+    render(<SearchForm searchPage="#" />);
     expect(screen.getByRole('button', { name: 'Search' })).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx
index 18b7c08..56d3895 100644
--- a/src/components/organisms/forms/search-form.tsx
+++ b/src/components/organisms/forms/search-form.tsx
@@ -4,18 +4,24 @@ import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
 import LabelledField, {
   type LabelledFieldProps,
 } from '@components/molecules/forms/labelled-field';
+import { useRouter } from 'next/router';
 import { FC, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './search-form.module.scss';
 
-export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'>;
+export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & {
+  /**
+   * The search page url.
+   */
+  searchPage: string;
+};
 
 /**
  * SearchForm component
  *
  * Render a search form.
  */
-const SearchForm: FC<SearchFormProps> = ({ hideLabel }) => {
+const SearchForm: FC<SearchFormProps> = ({ hideLabel, searchPage }) => {
   const intl = useIntl();
   const fieldLabel = intl.formatMessage({
     defaultMessage: 'Search for:',
@@ -28,10 +34,12 @@ const SearchForm: FC<SearchFormProps> = ({ hideLabel }) => {
     id: 'WMqQrv',
   });
 
+  const router = useRouter();
   const [value, setValue] = useState<string>('');
 
   const submitHandler = () => {
-    return;
+    router.push({ pathname: searchPage, query: { s: value } });
+    setValue('');
   };
 
   return (
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx
index c58c344..98d6377 100644
--- a/src/components/organisms/layout/header.stories.tsx
+++ b/src/components/organisms/layout/header.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import HeaderComponent from './header';
 
 /**
@@ -10,6 +9,7 @@ export default {
   component: HeaderComponent,
   args: {
     isHome: false,
+    searchPage: '#',
     withLink: false,
   },
   argTypes: {
@@ -95,13 +95,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/header.test.tsx
index 05baaec..a9896f8 100644
--- a/src/components/organisms/layout/header.test.tsx
+++ b/src/components/organisms/layout/header.test.tsx
@@ -14,14 +14,22 @@ const title = 'Assumenda quis quod';
 
 describe('Header', () => {
   it('renders the website title', () => {
-    render(<Header title={title} photo={photo} nav={nav} isHome={true} />);
+    render(
+      <Header
+        searchPage="#"
+        title={title}
+        photo={photo}
+        nav={nav}
+        isHome={true}
+      />
+    );
     expect(
       screen.getByRole('heading', { level: 1, name: title })
     ).toBeInTheDocument();
   });
 
   it('renders the main nav', () => {
-    render(<Header title={title} photo={photo} nav={nav} />);
+    render(<Header searchPage="#" title={title} photo={photo} nav={nav} />);
     expect(screen.getByRole('navigation')).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx
index f6ebc9c..18ebb31 100644
--- a/src/components/organisms/layout/header.tsx
+++ b/src/components/organisms/layout/header.tsx
@@ -5,28 +5,25 @@ import { FC } from 'react';
 import Toolbar, { type ToolbarProps } from '../toolbar/toolbar';
 import styles from './header.module.scss';
 
-export type HeaderProps = BrandingProps & {
-  /**
-   * Set additional classnames to the header element.
-   */
-  className?: string;
-  /**
-   * The main nav items.
-   */
-  nav: ToolbarProps['nav'];
-};
+export type HeaderProps = BrandingProps &
+  Pick<ToolbarProps, 'nav' | 'searchPage'> & {
+    /**
+     * Set additional classnames to the header element.
+     */
+    className?: string;
+  };
 
 /**
  * Header component
  *
  * Render the website header.
  */
-const Header: FC<HeaderProps> = ({ className, nav, ...props }) => {
+const Header: FC<HeaderProps> = ({ className, nav, searchPage, ...props }) => {
   return (
     <header className={`${styles.wrapper} ${className}`}>
       <div className={styles.body}>
         <Branding {...props} />
-        <Toolbar nav={nav} className={styles.toolbar} />
+        <Toolbar nav={nav} searchPage={searchPage} className={styles.toolbar} />
       </div>
     </header>
   );
diff --git a/src/components/organisms/modals/search-modal.stories.tsx b/src/components/organisms/modals/search-modal.stories.tsx
index 3ad6abd..f40696c 100644
--- a/src/components/organisms/modals/search-modal.stories.tsx
+++ b/src/components/organisms/modals/search-modal.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SearchModal from './search-modal';
 
 /**
@@ -8,6 +7,9 @@ import SearchModal from './search-modal';
 export default {
   title: 'Organisms/Modals',
   component: SearchModal,
+  args: {
+    searchPage: '#',
+  },
   argTypes: {
     className: {
       control: {
@@ -23,13 +25,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SearchModal>;
 
 const Template: ComponentStory<typeof SearchModal> = (args) => (
diff --git a/src/components/organisms/modals/search-modal.test.tsx b/src/components/organisms/modals/search-modal.test.tsx
index 249c523..7ba08c0 100644
--- a/src/components/organisms/modals/search-modal.test.tsx
+++ b/src/components/organisms/modals/search-modal.test.tsx
@@ -3,7 +3,7 @@ import SearchModal from './search-modal';
 
 describe('SearchModal', () => {
   it('renders a search modal', () => {
-    render(<SearchModal />);
+    render(<SearchModal searchPage="#" />);
     expect(screen.getByText('Search')).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
index 0e0ceed..866bc25 100644
--- a/src/components/organisms/modals/search-modal.tsx
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -1,10 +1,10 @@
 import Modal, { type ModalProps } from '@components/molecules/modals/modal';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import SearchForm from '../forms/search-form';
+import SearchForm, { SearchFormProps } from '../forms/search-form';
 import styles from './search-modal.module.scss';
 
-export type SearchModalProps = {
+export type SearchModalProps = Pick<SearchFormProps, 'searchPage'> & {
   /**
    * Set additional classnames to modal wrapper.
    */
@@ -16,7 +16,7 @@ export type SearchModalProps = {
  *
  * Render a search form modal.
  */
-const SearchModal: FC<SearchModalProps> = ({ className }) => {
+const SearchModal: FC<SearchModalProps> = ({ className, searchPage }) => {
   const intl = useIntl();
   const modalTitle = intl.formatMessage({
     defaultMessage: 'Search',
@@ -26,7 +26,7 @@ const SearchModal: FC<SearchModalProps> = ({ className }) => {
 
   return (
     <Modal title={modalTitle} className={`${styles.wrapper} ${className}`}>
-      <SearchForm hideLabel={true} />
+      <SearchForm hideLabel={true} searchPage={searchPage} />
     </Modal>
   );
 };
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
index 0421c8c..c6063a0 100644
--- a/src/components/organisms/toolbar/search.stories.tsx
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -9,6 +9,9 @@ import Search from './search';
 export default {
   title: 'Organisms/Toolbar/Search',
   component: Search,
+  args: {
+    searchPage: '#',
+  },
   argTypes: {
     className: {
       control: {
@@ -44,13 +47,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof Search>;
 
 const Template: ComponentStory<typeof Search> = ({
diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx
index 0ce09d8..a18b679 100644
--- a/src/components/organisms/toolbar/search.test.tsx
+++ b/src/components/organisms/toolbar/search.test.tsx
@@ -3,17 +3,17 @@ import Search from './search';
 
 describe('Search', () => {
   it('renders a button to open search modal', () => {
-    render(<Search isActive={false} setIsActive={() => null} />);
+    render(<Search searchPage="#" isActive={false} setIsActive={() => null} />);
     expect(screen.getByRole('checkbox')).toHaveAccessibleName('Open search');
   });
 
   it('renders a button to close search modal', () => {
-    render(<Search isActive={true} setIsActive={() => null} />);
+    render(<Search searchPage="#" isActive={true} setIsActive={() => null} />);
     expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close search');
   });
 
   it('renders a search form', () => {
-    render(<Search isActive={true} setIsActive={() => null} />);
+    render(<Search searchPage="#" isActive={true} setIsActive={() => null} />);
     expect(screen.getByRole('searchbox')).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index 72cd576..a1471ef 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -16,13 +16,22 @@ export type SearchProps = {
    * The button state.
    */
   isActive: CheckboxProps['value'];
+  /**
+   * A callback function to execute search.
+   */
+  searchPage: SearchModalProps['searchPage'];
   /**
    * A callback function to handle button state.
    */
   setIsActive: CheckboxProps['setValue'];
 };
 
-const Search: FC<SearchProps> = ({ className = '', isActive, setIsActive }) => {
+const Search: FC<SearchProps> = ({
+  className = '',
+  isActive,
+  searchPage,
+  setIsActive,
+}) => {
   const intl = useIntl();
   const label = isActive
     ? intl.formatMessage({
@@ -53,6 +62,7 @@ const Search: FC<SearchProps> = ({ className = '', isActive, setIsActive }) => {
         <MagnifyingGlass />
       </Label>
       <SearchModal
+        searchPage={searchPage}
         className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
       />
     </div>
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
index 4f9a3de..477cb55 100644
--- a/src/components/organisms/toolbar/toolbar.stories.tsx
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import ToolbarComponent from './toolbar';
 
 /**
@@ -8,6 +7,9 @@ import ToolbarComponent from './toolbar';
 export default {
   title: 'Organisms/Toolbar',
   component: ToolbarComponent,
+  args: {
+    searchPage: '#',
+  },
   argTypes: {
     className: {
       control: {
@@ -31,13 +33,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx
index 4bfe8a8..05e84ff 100644
--- a/src/components/organisms/toolbar/toolbar.test.tsx
+++ b/src/components/organisms/toolbar/toolbar.test.tsx
@@ -10,7 +10,7 @@ const nav = [
 
 describe('Toolbar', () => {
   it('renders a navigation menu', () => {
-    render(<Toolbar nav={nav} />);
+    render(<Toolbar nav={nav} searchPage="#" />);
     expect(screen.getByRole('navigation')).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index f1ce530..6593055 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -1,10 +1,10 @@
 import { FC, useState } from 'react';
 import MainNav, { type MainNavProps } from '../toolbar/main-nav';
-import Search from '../toolbar/search';
+import Search, { type SearchProps } from '../toolbar/search';
 import Settings from '../toolbar/settings';
 import styles from './toolbar.module.scss';
 
-export type ToolbarProps = {
+export type ToolbarProps = Pick<SearchProps, 'searchPage'> & {
   /**
    * Set additional classnames to the toolbar wrapper.
    */
@@ -20,7 +20,7 @@ export type ToolbarProps = {
  *
  * Render the website toolbar.
  */
-const Toolbar: FC<ToolbarProps> = ({ className = '', nav }) => {
+const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => {
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
   const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
@@ -34,6 +34,7 @@ const Toolbar: FC<ToolbarProps> = ({ className = '', nav }) => {
         className={styles.modal}
       />
       <Search
+        searchPage={searchPage}
         isActive={isSearchOpened}
         setIsActive={setIsSearchOpened}
         className={`${styles.modal} ${styles['modal--search']}`}
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index e1be1af..bfb918b 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -171,9 +171,10 @@ const Layout: FC<LayoutProps> = ({ children, isHome, ...props }) => {
         baseline={baseline}
         photo={picture}
         nav={mainNav}
+        searchPage="/recherche"
         isHome={isHome}
-        className={styles.header}
         withLink={true}
+        className={styles.header}
       />
       <Main id="main" className={styles.main}>
         <article {...props}>{children}</article>
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 3acf6a9..38fabd5 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,9 +1,7 @@
 import Notice from '@components/atoms/layout/notice';
 import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
 import PostsList, { type Post } from '@components/organisms/layout/posts-list';
-import LinksListWidget, {
-  LinksListItems,
-} from '@components/organisms/widgets/links-list-widget';
+import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import PageLayout from '@components/templates/page/page-layout';
 import { type EdgesResponse } from '@services/graphql/api';
 import {
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
new file mode 100644
index 0000000..bf14861
--- /dev/null
+++ b/src/pages/recherche/index.tsx
@@ -0,0 +1,324 @@
+import Notice from '@components/atoms/layout/notice';
+import Spinner from '@components/atoms/loaders/spinner';
+import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import PostsList, { type Post } from '@components/organisms/layout/posts-list';
+import LinksListWidget from '@components/organisms/widgets/links-list-widget';
+import PageLayout from '@components/templates/page/page-layout';
+import { type EdgesResponse } from '@services/graphql/api';
+import {
+  getArticleFromRawData,
+  getArticles,
+  getTotalArticles,
+} from '@services/graphql/articles';
+import {
+  getThematicsPreview,
+  getTotalThematics,
+} from '@services/graphql/thematics';
+import { getTopicsPreview, getTotalTopics } from '@services/graphql/topics';
+import { type Article, type Meta } from '@ts/types/app';
+import {
+  RawThematicPreview,
+  RawTopicPreview,
+  type RawArticle,
+} from '@ts/types/raw-data';
+import { loadTranslation, type Messages } from '@utils/helpers/i18n';
+import {
+  getLinksListItems,
+  getPageLinkFromRawData,
+} from '@utils/helpers/pages';
+import useDataFromAPI from '@utils/hooks/use-data-from-api';
+import usePagination from '@utils/hooks/use-pagination';
+import useSettings from '@utils/hooks/use-settings';
+import { GetStaticProps, NextPage } from 'next';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import { useIntl } from 'react-intl';
+import { Blog, Graph, WebPage } from 'schema-dts';
+
+type SearchPageProps = {
+  thematicsList: RawThematicPreview[];
+  topicsList: RawTopicPreview[];
+  translation: Messages;
+};
+
+/**
+ * Search page.
+ */
+const SearchPage: NextPage<SearchPageProps> = ({
+  thematicsList,
+  topicsList,
+}) => {
+  const intl = useIntl();
+  const { asPath, query } = useRouter();
+  const title = query.s
+    ? intl.formatMessage(
+        {
+          defaultMessage: 'Search results for {query}',
+          description: 'SearchPage: SEO - Page title',
+          id: 'ZNBhDP',
+        },
+        { query: query.s as string }
+      )
+    : intl.formatMessage({
+        defaultMessage: 'Search',
+        description: 'SearchPage: SEO - Page title',
+        id: 'WDwNDl',
+      });
+  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: 'search', name: title, url: '/recherche' },
+  ];
+
+  const { blog, website } = useSettings();
+  const pageTitle = `${title} - ${website.name}`;
+  const pageDescription = query.s
+    ? intl.formatMessage(
+        {
+          defaultMessage:
+            'Discover search results for {query} on {websiteName}.',
+          description: 'SearchPage: SEO - Meta description',
+          id: 'pg26sn',
+        },
+        { query: query.s as string, websiteName: website.name }
+      )
+    : intl.formatMessage(
+        {
+          defaultMessage: 'Search for a post on {websiteName}.',
+          description: 'SearchPage: SEO - Meta description',
+          id: 'npisb3',
+        },
+        { websiteName: website.name }
+      );
+  const pageUrl = `${website.url}${asPath}`;
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: pageTitle,
+    description: pageDescription,
+    inLanguage: website.locales.default,
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${website.url}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const blogSchema: Blog = {
+    '@id': `${website.url}/#blog`,
+    '@type': 'Blog',
+    author: { '@id': `${website.url}/#branding` },
+    creator: { '@id': `${website.url}/#branding` },
+    editor: { '@id': `${website.url}/#branding` },
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@graph': [webpageSchema, blogSchema],
+  };
+
+  const {
+    data,
+    error,
+    isLoadingInitialData,
+    isLoadingMore,
+    hasNextPage,
+    setSize,
+  } = usePagination<RawArticle>({
+    fallbackData: [],
+    fetcher: getArticles,
+    perPage: blog.postsPerPage,
+    search: query.s as string,
+  });
+
+  const totalArticles = useDataFromAPI<number>(() =>
+    getTotalArticles(query.s as string)
+  );
+
+  const postsCount = intl.formatMessage(
+    {
+      defaultMessage:
+        '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+      id: 'LtsVOx',
+      description: 'SearchPage: posts count meta',
+    },
+    { postsCount: totalArticles || 0 }
+  );
+
+  /**
+   * 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.
+   */
+  const loadMore = () => {
+    setSize((prevSize) => prevSize + 1);
+  };
+
+  const thematicsListTitle = intl.formatMessage({
+    defaultMessage: 'Thematics',
+    description: 'SearchPage: thematics list widget title',
+    id: 'Dq6+WH',
+  });
+
+  const topicsListTitle = intl.formatMessage({
+    defaultMessage: 'Topics',
+    description: 'SearchPage: topics list widget title',
+    id: 'N804XO',
+  });
+
+  return (
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+        <meta name="description" content={pageDescription} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={pageDescription} />
+      </Head>
+      <Script
+        id="schema-blog"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <PageLayout
+        title={title}
+        breadcrumb={breadcrumb}
+        headerMeta={{ total: postsCount }}
+        widgets={[
+          <LinksListWidget
+            key="thematics-list"
+            items={getLinksListItems(
+              thematicsList.map(getPageLinkFromRawData),
+              'thematic'
+            )}
+            title={thematicsListTitle}
+            level={2}
+          />,
+          <LinksListWidget
+            key="topics-list"
+            items={getLinksListItems(
+              topicsList.map(getPageLinkFromRawData),
+              'topic'
+            )}
+            title={topicsListTitle}
+            level={2}
+          />,
+        ]}
+      >
+        {data && data.length > 0 ? (
+          <PostsList
+            byYear={true}
+            isLoading={isLoadingMore || isLoadingInitialData}
+            loadMore={loadMore}
+            posts={getPostsList(data)}
+            showLoadMoreBtn={hasNextPage}
+            total={totalArticles || 0}
+          />
+        ) : (
+          <Spinner />
+        )}
+        {error && (
+          <Notice
+            kind="error"
+            message={intl.formatMessage({
+              defaultMessage: 'Failed to load.',
+              description: 'SearchPage: failed to load text',
+              id: 'fOe8rH',
+            })}
+          />
+        )}
+      </PageLayout>
+    </>
+  );
+};
+
+export const getStaticProps: GetStaticProps<SearchPageProps> = async ({
+  locale,
+}) => {
+  const totalThematics = await getTotalThematics();
+  const thematics = await getThematicsPreview({ first: totalThematics });
+  const totalTopics = await getTotalTopics();
+  const topics = await getTopicsPreview({ first: totalTopics });
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      thematicsList: thematics.edges.map((edge) => edge.node),
+      topicsList: topics.edges.map((edge) => edge.node),
+      translation,
+    },
+  };
+};
+
+export default SearchPage;
diff --git a/src/services/graphql/api.ts b/src/services/graphql/api.ts
index 5bed9f9..171ab23 100644
--- a/src/services/graphql/api.ts
+++ b/src/services/graphql/api.ts
@@ -48,7 +48,7 @@ export type ArticlesResponse<T> = {
 };
 
 export type CommentsResponse<T> = {
-  comments: T[];
+  comments: T;
 };
 
 export type SendMailResponse<T> = {
@@ -147,7 +147,14 @@ export type ByContentIdVar = {
   contentId: number;
 };
 
-export type sendMailVars = {
+export type SearchVar = {
+  /**
+   * A search term.
+   */
+  search?: string;
+};
+
+export type SendMailVars = {
   body: string;
   clientMutationId: string;
   replyTo: string;
@@ -160,14 +167,14 @@ export type VariablesMap = {
   [articlesQuery]: EdgesVars;
   [articlesSlugQuery]: EdgesVars;
   [commentsQuery]: ByContentIdVar;
-  [sendMailMutation]: sendMailVars;
+  [sendMailMutation]: SendMailVars;
   [thematicBySlugQuery]: BySlugVar;
   [thematicsListQuery]: EdgesVars;
   [thematicsSlugQuery]: EdgesVars;
   [topicBySlugQuery]: BySlugVar;
   [topicsListQuery]: EdgesVars;
   [topicsSlugQuery]: EdgesVars;
-  [totalArticlesQuery]: null;
+  [totalArticlesQuery]: SearchVar;
   [totalThematicsQuery]: null;
   [totalTopicsQuery]: null;
 };
diff --git a/src/services/graphql/articles.query.ts b/src/services/graphql/articles.query.ts
index e62835d..d65bc9e 100644
--- a/src/services/graphql/articles.query.ts
+++ b/src/services/graphql/articles.query.ts
@@ -166,8 +166,8 @@ export const articlesSlugQuery = `query ArticlesSlug($first: Int = 10, $after: S
 /**
  * Query the total number of articles.
  */
-export const totalArticlesQuery = `query PostsTotal {
-  posts {
+export const totalArticlesQuery = `query PostsTotal($search: String = "") {
+  posts(where: {search: $search}) {
     pageInfo {
       total
     }
diff --git a/src/services/graphql/articles.ts b/src/services/graphql/articles.ts
index 1eb112e..41052c4 100644
--- a/src/services/graphql/articles.ts
+++ b/src/services/graphql/articles.ts
@@ -21,10 +21,11 @@ import {
  *
  * @returns {Promise<number>} - The articles total number.
  */
-export const getTotalArticles = async (): Promise<number> => {
+export const getTotalArticles = async (search?: string): Promise<number> => {
   const response = await fetchAPI<TotalItems, typeof totalArticlesQuery>({
     api: getAPIUrl(),
     query: totalArticlesQuery,
+    variables: { search },
   });
 
   return response.posts.pageInfo.total;
diff --git a/src/services/graphql/contact.ts b/src/services/graphql/contact.ts
index fca718f..00c6ca2 100644
--- a/src/services/graphql/contact.ts
+++ b/src/services/graphql/contact.ts
@@ -1,4 +1,4 @@
-import { fetchAPI, getAPIUrl, sendMailVars } from './api';
+import { fetchAPI, getAPIUrl, SendMailVars } from './api';
 import { sendMailMutation } from './contact.mutation';
 
 export type SentEmail = {
@@ -15,7 +15,7 @@ export type SentEmail = {
  * @param {sendMailVars} data - The mail data.
  * @returns {Promise<SentEmail>} The mutation response.
  */
-export const sendMail = async (data: sendMailVars): Promise<SentEmail> => {
+export const sendMail = async (data: SendMailVars): Promise<SentEmail> => {
   const response = await fetchAPI<SentEmail, typeof sendMailMutation>({
     api: getAPIUrl(),
     query: sendMailMutation,
diff --git a/src/utils/hooks/use-data-from-api.tsx b/src/utils/hooks/use-data-from-api.tsx
new file mode 100644
index 0000000..7082941
--- /dev/null
+++ b/src/utils/hooks/use-data-from-api.tsx
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Fetch data from an API.
+ *
+ * This hook is a wrapper to `setState` + `useEffect`.
+ *
+ * @param fetcher - A function to fetch data from API.
+ * @returns {T | undefined} The requested data.
+ */
+const useDataFromAPI = <T extends unknown>(
+  fetcher: () => Promise<T>
+): T | undefined => {
+  const [data, setData] = useState<T>();
+
+  useEffect(() => {
+    fetcher().then((apiData) => setData(apiData));
+  }, [fetcher]);
+
+  return data;
+};
+
+export default useDataFromAPI;
diff --git a/src/utils/hooks/use-pagination.tsx b/src/utils/hooks/use-pagination.tsx
index 1e24b75..a80a539 100644
--- a/src/utils/hooks/use-pagination.tsx
+++ b/src/utils/hooks/use-pagination.tsx
@@ -99,7 +99,8 @@ const usePagination = <T extends object>({
     isLoadingInitialData ||
     (size > 0 && data && typeof data[size - 1] === 'undefined');
   const isRefreshing = isValidating && data && data.length === size;
-  const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage;
+  const hasNextPage =
+    data && data.length > 0 && data[data.length - 1].pageInfo.hasNextPage;
 
   return {
     data,
-- 
cgit v1.2.3


From 2155550fa36a3bc3c8f66e0926530123b4018cd4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 16 May 2022 12:46:38 +0200
Subject: refactor: use custom hook for breadcrumb items and schema

---
 src/components/templates/layout/layout.stories.tsx |  54 ++++++++---
 src/components/templates/layout/layout.test.tsx    |  12 ++-
 src/components/templates/layout/layout.tsx         |  26 ++++-
 .../templates/page/page-layout.stories.tsx         |  12 +++
 src/components/templates/page/page-layout.test.tsx |  41 ++++++--
 src/components/templates/page/page-layout.tsx      |  11 ++-
 .../sectioned/sectioned-layout.stories.tsx         |  24 +++--
 .../templates/sectioned/sectioned-layout.test.tsx  |   9 +-
 .../templates/sectioned/sectioned-layout.tsx       |   8 +-
 src/pages/404.tsx                                  |  16 ++--
 src/pages/article/[slug].tsx                       |  24 ++---
 src/pages/blog/index.tsx                           |  16 ++--
 src/pages/contact.tsx                              |  22 ++---
 src/pages/cv.tsx                                   |  22 ++---
 src/pages/index.tsx                                |   9 +-
 src/pages/mentions-legales.tsx                     |  22 ++---
 src/pages/projets/[slug].tsx                       |  27 ++----
 src/pages/projets/index.tsx                        |  22 ++---
 src/pages/recherche/index.tsx                      |  22 ++---
 src/pages/sujet/[slug].tsx                         |  22 ++---
 src/pages/thematique/[slug].tsx                    |  22 ++---
 src/utils/hooks/use-breadcrumb.tsx                 | 106 +++++++++++++++++++++
 22 files changed, 343 insertions(+), 206 deletions(-)
 create mode 100644 src/utils/hooks/use-breadcrumb.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/templates/layout/layout.stories.tsx b/src/components/templates/layout/layout.stories.tsx
index 2415412..105e808 100644
--- a/src/components/templates/layout/layout.stories.tsx
+++ b/src/components/templates/layout/layout.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import LayoutComponent from './layout';
 
 /**
@@ -8,6 +7,10 @@ import LayoutComponent from './layout';
 export default {
   title: 'Templates/LayoutBase',
   component: LayoutComponent,
+  args: {
+    breadcrumbSchema: [],
+    isHome: false,
+  },
   argTypes: {
     children: {
       control: {
@@ -19,6 +22,31 @@ export default {
         required: true,
       },
     },
+    breadcrumbSchema: {
+      control: {
+        type: 'null',
+      },
+      description: 'The JSON schema for breadcrumb items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+    isHome: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Determine if it is the homepage.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: false },
+      },
+      type: {
+        name: 'boolean',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
@@ -35,19 +63,17 @@ export default {
   },
   decorators: [
     (Story) => (
-      <IntlProvider locale="en">
-        <div
-          id="__next"
-          style={{
-            flex: 1,
-            display: 'flex',
-            flexFlow: 'column nowrap',
-            minHeight: '100vh',
-          }}
-        >
-          <Story />
-        </div>
-      </IntlProvider>
+      <div
+        id="__next"
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexFlow: 'column nowrap',
+          minHeight: '100vh',
+        }}
+      >
+        <Story />
+      </div>
     ),
   ],
   parameters: {
diff --git a/src/components/templates/layout/layout.test.tsx b/src/components/templates/layout/layout.test.tsx
index 914e1cd..94145ec 100644
--- a/src/components/templates/layout/layout.test.tsx
+++ b/src/components/templates/layout/layout.test.tsx
@@ -1,34 +1,36 @@
 import { render, screen } from '@test-utils';
+import { BreadcrumbList } from 'schema-dts';
 import Layout from './layout';
 
 const body =
   'Sit dolorem eveniet. Sit sit odio nemo vitae corrupti modi sint est rerum. Pariatur quidem maiores distinctio. Quia et illum aspernatur est cum.';
+const breadcrumbSchema: BreadcrumbList['itemListElement'][] = [];
 
 describe('Layout', () => {
   it('renders the website header', () => {
-    render(<Layout>{body}</Layout>);
+    render(<Layout breadcrumbSchema={breadcrumbSchema}>{body}</Layout>);
     expect(screen.getByRole('banner')).toBeInTheDocument();
   });
 
   it('renders the website main content', () => {
-    render(<Layout>{body}</Layout>);
+    render(<Layout breadcrumbSchema={breadcrumbSchema}>{body}</Layout>);
     expect(screen.getByRole('main')).toBeInTheDocument();
   });
 
   it('renders the website footer', () => {
-    render(<Layout>{body}</Layout>);
+    render(<Layout breadcrumbSchema={breadcrumbSchema}>{body}</Layout>);
     expect(screen.getByRole('contentinfo')).toBeInTheDocument();
   });
 
   it('renders a skip to content link', () => {
-    render(<Layout>{body}</Layout>);
+    render(<Layout breadcrumbSchema={breadcrumbSchema}>{body}</Layout>);
     expect(
       screen.getByRole('link', { name: 'Skip to content' })
     ).toBeInTheDocument();
   });
 
   it('renders an article', () => {
-    render(<Layout>{body}</Layout>);
+    render(<Layout breadcrumbSchema={breadcrumbSchema}>{body}</Layout>);
     expect(screen.getByRole('article')).toHaveTextContent(body);
   });
 });
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index bfb918b..9e9282b 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -13,7 +13,13 @@ import useSettings from '@utils/hooks/use-settings';
 import Script from 'next/script';
 import { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
-import { Person, SearchAction, WebSite, WithContext } from 'schema-dts';
+import {
+  BreadcrumbList,
+  Person,
+  SearchAction,
+  WebSite,
+  WithContext,
+} from 'schema-dts';
 import styles from './layout.module.scss';
 
 export type QueryAction = SearchAction & {
@@ -21,6 +27,10 @@ export type QueryAction = SearchAction & {
 };
 
 export type LayoutProps = Pick<HeaderProps, 'isHome'> & {
+  /**
+   * The breadcrumb JSON schema.
+   */
+  breadcrumbSchema: BreadcrumbList['itemListElement'][];
   /**
    * The layout main content.
    */
@@ -36,7 +46,12 @@ export type LayoutProps = Pick<HeaderProps, 'isHome'> & {
  *
  * Render the base layout used by all pages.
  */
-const Layout: FC<LayoutProps> = ({ children, isHome, ...props }) => {
+const Layout: FC<LayoutProps> = ({
+  breadcrumbSchema,
+  children,
+  isHome,
+  ...props
+}) => {
   const intl = useIntl();
   const { website } = useSettings();
   const { baseline, copyright, locales, name, picture, url } = website;
@@ -153,12 +168,17 @@ const Layout: FC<LayoutProps> = ({ children, isHome, ...props }) => {
         id="schema-layout"
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      ></Script>
+      />
       <Script
         id="schema-branding"
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(brandingSchema) }}
       />
+      <Script
+        id="schema-breadcrumb"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
       <noscript>
         <div className={styles['noscript-spacing']}></div>
       </noscript>
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 8e518aa..002b951 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -16,6 +16,7 @@ export default {
   component: PageLayoutComponent,
   args: {
     allowComments: false,
+    breadcrumbSchema: [],
   },
   argTypes: {
     allowComments: {
@@ -40,6 +41,17 @@ export default {
         value: {},
       },
     },
+    breadcrumbSchema: {
+      control: {
+        type: null,
+      },
+      description: 'The JSON schema for breadcrumb items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
     children: {
       control: {
         type: 'text',
diff --git a/src/components/templates/page/page-layout.test.tsx b/src/components/templates/page/page-layout.test.tsx
index b8fff6a..b3aea8b 100644
--- a/src/components/templates/page/page-layout.test.tsx
+++ b/src/components/templates/page/page-layout.test.tsx
@@ -1,4 +1,5 @@
 import { render, screen } from '@test-utils';
+import { BreadcrumbList } from 'schema-dts';
 import PageLayout from './page-layout';
 
 const title = 'Incidunt ad earum';
@@ -6,13 +7,18 @@ const breadcrumb = [
   { id: 'home', url: '#', name: 'Home' },
   { id: 'page', url: '#', name: title },
 ];
+const breadcrumbSchema: BreadcrumbList['itemListElement'][] = [];
 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}>
+      <PageLayout
+        breadcrumb={breadcrumb}
+        breadcrumbSchema={breadcrumbSchema}
+        title={title}
+      >
         {children}
       </PageLayout>
     );
@@ -23,7 +29,11 @@ describe('PageLayout', () => {
 
   it('renders the page content', () => {
     render(
-      <PageLayout breadcrumb={breadcrumb} title={title}>
+      <PageLayout
+        breadcrumb={breadcrumb}
+        breadcrumbSchema={breadcrumbSchema}
+        title={title}
+      >
         {children}
       </PageLayout>
     );
@@ -32,7 +42,11 @@ describe('PageLayout', () => {
 
   it('renders the breadcrumb', () => {
     render(
-      <PageLayout breadcrumb={breadcrumb} title={title}>
+      <PageLayout
+        breadcrumb={breadcrumb}
+        breadcrumbSchema={breadcrumbSchema}
+        title={title}
+      >
         {children}
       </PageLayout>
     );
@@ -43,7 +57,12 @@ describe('PageLayout', () => {
 
   it('renders the table of contents', () => {
     render(
-      <PageLayout breadcrumb={breadcrumb} title={title} withToC={true}>
+      <PageLayout
+        breadcrumb={breadcrumb}
+        breadcrumbSchema={breadcrumbSchema}
+        title={title}
+        withToC={true}
+      >
         {children}
       </PageLayout>
     );
@@ -54,7 +73,12 @@ describe('PageLayout', () => {
 
   it('renders the comment form', () => {
     render(
-      <PageLayout breadcrumb={breadcrumb} title={title} allowComments={true}>
+      <PageLayout
+        breadcrumb={breadcrumb}
+        breadcrumbSchema={breadcrumbSchema}
+        title={title}
+        allowComments={true}
+      >
         {children}
       </PageLayout>
     );
@@ -79,7 +103,12 @@ describe('PageLayout', () => {
       },
     ];
     render(
-      <PageLayout breadcrumb={breadcrumb} title={title} comments={comments}>
+      <PageLayout
+        breadcrumb={breadcrumb}
+        breadcrumbSchema={breadcrumbSchema}
+        title={title}
+        comments={comments}
+      >
         {children}
       </PageLayout>
     );
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index 4e4ff00..bc90f4c 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -25,7 +25,10 @@ import { useIntl } from 'react-intl';
 import Layout, { type LayoutProps } from '../layout/layout';
 import styles from './page-layout.module.scss';
 
-export type PageLayoutProps = {
+export type PageLayoutProps = Pick<
+  LayoutProps,
+  'breadcrumbSchema' | 'isHome'
+> & {
   /**
    * True if the page accepts new comments. Default: false.
    */
@@ -58,10 +61,6 @@ export type PageLayoutProps = {
    * The page introduction.
    */
   intro?: PageHeaderProps['intro'];
-  /**
-   * True if it is homepage. Default: false.
-   */
-  isHome?: LayoutProps['isHome'];
   /**
    * The page title.
    */
@@ -85,6 +84,7 @@ const PageLayout: FC<PageLayoutProps> = ({
   children,
   allowComments = false,
   breadcrumb,
+  breadcrumbSchema,
   comments,
   footerMeta,
   headerMeta,
@@ -170,6 +170,7 @@ const PageLayout: FC<PageLayoutProps> = ({
 
   return (
     <Layout
+      breadcrumbSchema={breadcrumbSchema}
       isHome={isHome}
       className={`${styles.article} ${styles[articleModifier]}`}
     >
diff --git a/src/components/templates/sectioned/sectioned-layout.stories.tsx b/src/components/templates/sectioned/sectioned-layout.stories.tsx
index 9ff3b75..ce31a83 100644
--- a/src/components/templates/sectioned/sectioned-layout.stories.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SectionedLayoutComponent from './sectioned-layout';
 
 /**
@@ -8,7 +7,21 @@ import SectionedLayoutComponent from './sectioned-layout';
 export default {
   title: 'Templates/Sectioned',
   component: SectionedLayoutComponent,
+  args: {
+    breadcrumbSchema: [],
+  },
   argTypes: {
+    breadcrumbSchema: {
+      control: {
+        type: null,
+      },
+      description: 'The JSON schema for breadcrumb items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
     sections: {
       description: 'The different sections.',
       type: {
@@ -18,15 +31,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <div id="__next">
-          <Story />
-        </div>
-      </IntlProvider>
-    ),
-  ],
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/src/components/templates/sectioned/sectioned-layout.test.tsx b/src/components/templates/sectioned/sectioned-layout.test.tsx
index 334d1cc..9b8bab5 100644
--- a/src/components/templates/sectioned/sectioned-layout.test.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.test.tsx
@@ -1,6 +1,8 @@
 import { render, screen } from '@test-utils';
+import { BreadcrumbList } from 'schema-dts';
 import SectionedLayout from './sectioned-layout';
 
+const breadcrumbSchema: BreadcrumbList['itemListElement'][] = [];
 const sections = [
   {
     title: 'Section 1',
@@ -26,7 +28,12 @@ const sections = [
 
 describe('SectionedLayout', () => {
   it('renders the correct number of section', () => {
-    render(<SectionedLayout sections={sections} />);
+    render(
+      <SectionedLayout
+        breadcrumbSchema={breadcrumbSchema}
+        sections={sections}
+      />
+    );
     expect(screen.getAllByRole('heading', { name: /^Section/ })).toHaveLength(
       sections.length
     );
diff --git a/src/components/templates/sectioned/sectioned-layout.tsx b/src/components/templates/sectioned/sectioned-layout.tsx
index 36ca039..58d5ad0 100644
--- a/src/components/templates/sectioned/sectioned-layout.tsx
+++ b/src/components/templates/sectioned/sectioned-layout.tsx
@@ -3,11 +3,11 @@ import Section, {
   type SectionVariant,
 } from '@components/atoms/layout/section';
 import { FC } from 'react';
-import Layout from '../layout/layout';
+import Layout, { type LayoutProps } from '../layout/layout';
 
 export type Section = Pick<SectionProps, 'content' | 'title'>;
 
-export type SectionedLayoutProps = {
+export type SectionedLayoutProps = Pick<LayoutProps, 'breadcrumbSchema'> & {
   /**
    * An array of objects describing each section.
    */
@@ -19,7 +19,7 @@ export type SectionedLayoutProps = {
  *
  * Render a sectioned layout.
  */
-const SectionedLayout: FC<SectionedLayoutProps> = ({ sections }) => {
+const SectionedLayout: FC<SectionedLayoutProps> = ({ sections, ...props }) => {
   const getSections = (items: SectionProps[]) => {
     return items.map((section, index) => {
       const variant: SectionVariant = index % 2 ? 'light' : 'dark';
@@ -37,7 +37,7 @@ const SectionedLayout: FC<SectionedLayoutProps> = ({ sections }) => {
     });
   };
 
-  return <Layout>{getSections(sections)}</Layout>;
+  return <Layout {...props}>{getSections(sections)}</Layout>;
 };
 
 export default SectionedLayout;
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
index 7459c80..4f6e22d 100644
--- a/src/pages/404.tsx
+++ b/src/pages/404.tsx
@@ -1,5 +1,4 @@
 import Link from '@components/atoms/links/link';
-import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import PageLayout from '@components/templates/page/page-layout';
 import {
@@ -16,6 +15,7 @@ import {
   getLinksListItems,
   getPageLinkFromRawData,
 } from '@utils/helpers/pages';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
 import { GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
@@ -53,15 +53,10 @@ const Error404Page: NextPage<Error404PageProps> = ({
       link: (chunks: ReactNode) => <Link href="/contact">{chunks}</Link>,
     }
   );
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: `/404`,
   });
-  const breadcrumb: BreadcrumbItem[] = [
-    { id: 'home', name: homeLabel, url: '/' },
-    { id: 'error-404', name: title, url: '/404' },
-  ];
   const pageTitle = intl.formatMessage(
     {
       defaultMessage: 'Error 404: Page not found - {websiteName}',
@@ -95,7 +90,8 @@ const Error404Page: NextPage<Error404PageProps> = ({
       </Head>
       <PageLayout
         title={title}
-        breadcrumb={breadcrumb}
+        breadcrumb={breadcrumbItems}
+        breadcrumbSchema={breadcrumbSchema}
         widgets={[
           <LinksListWidget
             key="thematics-list"
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 6a47c16..5eeabd9 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -1,6 +1,5 @@
 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,
@@ -12,13 +11,13 @@ import {
 import { getPostComments } from '@services/graphql/comments';
 import { type Article, type Comment } from '@ts/types/app';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 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';
 
@@ -37,22 +36,10 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
   const { data } = useSWR(() => id, getPostComments, {
     fallbackData: comments,
   });
-  const intl = useIntl();
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: `/article/${slug}`,
   });
-  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,
@@ -186,7 +173,8 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
       />
       <PageLayout
         allowComments={true}
-        breadcrumb={breadcrumb}
+        breadcrumb={breadcrumbItems}
+        breadcrumbSchema={breadcrumbSchema}
         comments={data && getCommentsList(data)}
         footerMeta={footerMeta}
         headerMeta={headerMeta}
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 38fabd5..a5ef045 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -1,5 +1,4 @@
 import Notice from '@components/atoms/layout/notice';
-import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
 import PostsList, { type Post } from '@components/organisms/layout/posts-list';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import PageLayout from '@components/templates/page/page-layout';
@@ -26,6 +25,7 @@ import {
   getLinksListItems,
   getPageLinkFromRawData,
 } from '@utils/helpers/pages';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import usePagination from '@utils/hooks/use-pagination';
 import useSettings from '@utils/hooks/use-settings';
 import { GetStaticProps, NextPage } from 'next';
@@ -58,15 +58,10 @@ const BlogPage: NextPage<BlogPageProps> = ({
     description: 'BlogPage: page title',
     id: '7TbbIk',
   });
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: '/blog',
   });
-  const breadcrumb: BreadcrumbItem[] = [
-    { id: 'home', name: homeLabel, url: '/' },
-    { id: 'blog', name: title, url: '/blog' },
-  ];
 
   const { blog, website } = useSettings();
   const { asPath } = useRouter();
@@ -234,7 +229,8 @@ const BlogPage: NextPage<BlogPageProps> = ({
       />
       <PageLayout
         title={title}
-        breadcrumb={breadcrumb}
+        breadcrumb={breadcrumbItems}
+        breadcrumbSchema={breadcrumbSchema}
         headerMeta={{ total: postsCount }}
         widgets={[
           <LinksListWidget
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
index fcfbe1d..617117b 100644
--- a/src/pages/contact.tsx
+++ b/src/pages/contact.tsx
@@ -1,7 +1,6 @@
-import Notice, { NoticeKind } from '@components/atoms/layout/notice';
-import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import Notice, { type NoticeKind } from '@components/atoms/layout/notice';
 import ContactForm, {
-  ContactFormProps,
+  type ContactFormProps,
 } from '@components/organisms/forms/contact-form';
 import SocialMedia from '@components/organisms/widgets/social-media';
 import PageLayout from '@components/templates/page/page-layout';
@@ -17,19 +16,15 @@ import Script from 'next/script';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 import { ContactPage as ContactPageSchema, Graph, WebPage } from 'schema-dts';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 
 const ContactPage: NextPage = () => {
   const { dates, intro, seo, title } = meta;
   const intl = useIntl();
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: `/contact`,
   });
-  const breadcrumb: BreadcrumbItem[] = [
-    { id: 'home', name: homeLabel, url: '/' },
-    { id: 'contact', name: title, url: '/contact' },
-  ];
 
   const socialMediaTitle = intl.formatMessage({
     defaultMessage: 'Find me elsewhere',
@@ -148,9 +143,10 @@ const ContactPage: NextPage = () => {
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
       <PageLayout
-        title="Contact"
+        breadcrumb={breadcrumbItems}
+        breadcrumbSchema={breadcrumbSchema}
         intro={intro}
-        breadcrumb={breadcrumb}
+        title="Contact"
         widgets={widgets}
       >
         <ContactForm
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 0e4765e..b3dec10 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -1,5 +1,4 @@
 import Link from '@components/atoms/links/link';
-import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
 import ImageWidget from '@components/organisms/widgets/image-widget';
 import SocialMedia from '@components/organisms/widgets/social-media';
 import PageLayout, {
@@ -8,6 +7,7 @@ import PageLayout, {
 import CVContent, { data, meta } from '@content/pages/cv.mdx';
 import styles from '@styles/pages/cv.module.scss';
 import { loadTranslation } from '@utils/helpers/i18n';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
 import { GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
@@ -24,15 +24,10 @@ const CVPage: NextPage = () => {
   const intl = useIntl();
   const { file, image } = data;
   const { dates, intro, seo, title } = meta;
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: `/cv`,
   });
-  const breadcrumb: BreadcrumbItem[] = [
-    { id: 'home', name: homeLabel, url: '/' },
-    { id: 'cv', name: title, url: '/cv' },
-  ];
 
   const imageWidgetTitle = intl.formatMessage({
     defaultMessage: 'Others formats',
@@ -148,12 +143,13 @@ const CVPage: NextPage = () => {
 
   return (
     <PageLayout
-      title={title}
-      intro={intro}
+      breadcrumb={breadcrumbItems}
+      breadcrumbSchema={breadcrumbSchema}
       headerMeta={headerMeta}
-      breadcrumb={breadcrumb}
-      withToC={true}
+      intro={intro}
+      title={title}
       widgets={widgets}
+      withToC={true}
     >
       <Head>
         <title>{`${seo.title} - ${website.name}`}</title>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bc9b572..1143a33 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -19,6 +19,7 @@ import { getArticlesCard } from '@services/graphql/articles';
 import styles from '@styles/pages/home.module.scss';
 import { ArticleCard } from '@ts/types/app';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
 import { NestedMDXComponents } from 'mdx/types';
 import { GetStaticProps, NextPage } from 'next';
@@ -38,6 +39,10 @@ type HomeProps = {
  */
 const HomePage: NextPage<HomeProps> = ({ recentPosts }) => {
   const intl = useIntl();
+  const { schema: breadcrumbSchema } = useBreadcrumb({
+    title: '',
+    url: `/`,
+  });
 
   /**
    * Retrieve a list of coding links.
@@ -322,7 +327,7 @@ const HomePage: NextPage<HomeProps> = ({ recentPosts }) => {
   };
 
   return (
-    <Layout isHome={true}>
+    <Layout breadcrumbSchema={breadcrumbSchema} isHome={true}>
       <Head>
         <title>{pageTitle}</title>
         <meta name="description" content={pageDescription} />
@@ -340,7 +345,7 @@ const HomePage: NextPage<HomeProps> = ({ recentPosts }) => {
   );
 };
 
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
+export const getStaticProps: GetStaticProps<HomeProps> = async ({ locale }) => {
   const translation = await loadTranslation(locale);
   const recentPosts = await getArticlesCard({ first: 3 });
 
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index 9235e69..41bc218 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -1,35 +1,28 @@
 import Link from '@components/atoms/links/link';
 import ResponsiveImage from '@components/molecules/images/responsive-image';
-import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
 import PageLayout, {
   type PageLayoutProps,
 } from '@components/templates/page/page-layout';
 import LegalNoticeContent, { meta } from '@content/pages/legal-notice.mdx';
 import { loadTranslation } from '@utils/helpers/i18n';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
 import { NestedMDXComponents } from 'mdx/types';
 import { GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import { useIntl } from 'react-intl';
 import { Article, Graph, WebPage } from 'schema-dts';
 
 /**
  * Legal Notice page.
  */
 const LegalNoticePage: NextPage = () => {
-  const intl = useIntl();
   const { dates, intro, seo, title } = meta;
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: `/mentions-legales`,
   });
-  const breadcrumb: BreadcrumbItem[] = [
-    { id: 'home', name: homeLabel, url: '/' },
-    { id: 'legal-notice', name: title, url: '/mentions-legales' },
-  ];
 
   const headerMeta: PageLayoutProps['headerMeta'] = {
     publication: {
@@ -93,10 +86,11 @@ const LegalNoticePage: NextPage = () => {
 
   return (
     <PageLayout
-      title={title}
-      intro={intro}
+      breadcrumb={breadcrumbItems}
+      breadcrumbSchema={breadcrumbSchema}
       headerMeta={headerMeta}
-      breadcrumb={breadcrumb}
+      intro={intro}
+      title={title}
       withToC={true}
     >
       <Head>
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 711a5cd..1a90e0f 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -3,7 +3,6 @@ import SocialLink, { 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 { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
 import Gallery from '@components/organisms/images/gallery';
 import Overview, { OverviewMeta } from '@components/organisms/layout/overview';
 import Sharing from '@components/organisms/widgets/sharing';
@@ -14,6 +13,7 @@ import { ProjectPreview, Repos } from '@ts/types/app';
 import { loadTranslation, 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 useSettings from '@utils/hooks/use-settings';
 import { MDXComponents, NestedMDXComponents } from 'mdx/types';
@@ -37,21 +37,10 @@ const ProjectPage: NextPage<ProjectPageProps> = ({ project }) => {
   const { id, intro, meta, title } = project;
   const { cover, dates, license, repos, seo, technologies } = meta;
   const intl = useIntl();
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: `/projets/${id}`,
   });
-  const projectsLabel = intl.formatMessage({
-    defaultMessage: 'Projects',
-    description: 'Breadcrumb: projects label',
-    id: '28GZdv',
-  });
-  const breadcrumb: BreadcrumbItem[] = [
-    { id: 'home', name: homeLabel, url: '/' },
-    { id: 'projects', name: projectsLabel, url: '/projets' },
-    { id: 'project', name: title, url: `/projets/${id}` },
-  ];
 
   const ProjectContent: ComponentType<MDXComponents> =
     require(`../../content/projects/${id}.mdx`).default;
@@ -192,7 +181,8 @@ const ProjectPage: NextPage<ProjectPageProps> = ({ project }) => {
       <PageLayout
         title={title}
         intro={intro}
-        breadcrumb={breadcrumb}
+        breadcrumb={breadcrumbItems}
+        breadcrumbSchema={breadcrumbSchema}
         headerMeta={headerMeta}
         withToC={true}
         widgets={[
@@ -217,7 +207,10 @@ const ProjectPage: NextPage<ProjectPageProps> = ({ project }) => {
   );
 };
 
-export const getStaticProps: GetStaticProps = async ({ locale, params }) => {
+export const getStaticProps: GetStaticProps<ProjectPageProps> = async ({
+  locale,
+  params,
+}) => {
   const translation = await loadTranslation(locale);
   const { slug } = params!;
   const project = await getProjectData(slug as string);
diff --git a/src/pages/projets/index.tsx b/src/pages/projets/index.tsx
index a6858c8..4a58269 100644
--- a/src/pages/projets/index.tsx
+++ b/src/pages/projets/index.tsx
@@ -1,5 +1,4 @@
 import Link from '@components/atoms/links/link';
-import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
 import CardsList, {
   CardsListItem,
 } from '@components/organisms/layout/cards-list';
@@ -9,13 +8,13 @@ import styles from '@styles/pages/projects.module.scss';
 import { ProjectCard } from '@ts/types/app';
 import { loadTranslation, 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';
 import { NestedMDXComponents } from 'mdx/types';
 import { GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import { useIntl } from 'react-intl';
 import { Article, Graph, WebPage } from 'schema-dts';
 
 type ProjectsPageProps = {
@@ -27,17 +26,11 @@ type ProjectsPageProps = {
  * Projects page.
  */
 const ProjectsPage: NextPage<ProjectsPageProps> = ({ projects }) => {
-  const intl = useIntl();
   const { dates, seo, title } = meta;
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: `/projets`,
   });
-  const breadcrumb: BreadcrumbItem[] = [
-    { id: 'home', name: homeLabel, url: '/' },
-    { id: 'projects', name: title, url: '/projets' },
-  ];
 
   const items: CardsListItem[] = projects.map(
     ({ id, meta: projectMeta, slug, title: projectTitle }) => {
@@ -120,7 +113,8 @@ const ProjectsPage: NextPage<ProjectsPageProps> = ({ projects }) => {
       <PageLayout
         title={title}
         intro={<PageContent components={components} />}
-        breadcrumb={breadcrumb}
+        breadcrumb={breadcrumbItems}
+        breadcrumbSchema={breadcrumbSchema}
       >
         <CardsList items={items} titleLevel={2} className={styles.list} />
       </PageLayout>
@@ -128,7 +122,9 @@ const ProjectsPage: NextPage<ProjectsPageProps> = ({ projects }) => {
   );
 };
 
-export const getStaticProps: GetStaticProps = async ({ locale }) => {
+export const getStaticProps: GetStaticProps<ProjectsPageProps> = async ({
+  locale,
+}) => {
   const projects = await getProjectsCard();
   const translation = await loadTranslation(locale);
 
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index bf14861..0a7dc60 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -1,6 +1,5 @@
 import Notice from '@components/atoms/layout/notice';
 import Spinner from '@components/atoms/loaders/spinner';
-import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
 import PostsList, { type Post } from '@components/organisms/layout/posts-list';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import PageLayout from '@components/templates/page/page-layout';
@@ -26,6 +25,7 @@ import {
   getLinksListItems,
   getPageLinkFromRawData,
 } from '@utils/helpers/pages';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useDataFromAPI from '@utils/hooks/use-data-from-api';
 import usePagination from '@utils/hooks/use-pagination';
 import useSettings from '@utils/hooks/use-settings';
@@ -65,21 +65,10 @@ const SearchPage: NextPage<SearchPageProps> = ({
         description: 'SearchPage: SEO - Page title',
         id: 'WDwNDl',
       });
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: `/recherche`,
   });
-  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: 'search', name: title, url: '/recherche' },
-  ];
 
   const { blog, website } = useSettings();
   const pageTitle = `${title} - ${website.name}`;
@@ -253,7 +242,8 @@ const SearchPage: NextPage<SearchPageProps> = ({
       />
       <PageLayout
         title={title}
-        breadcrumb={breadcrumb}
+        breadcrumb={breadcrumbItems}
+        breadcrumbSchema={breadcrumbSchema}
         headerMeta={{ total: postsCount }}
         widgets={[
           <LinksListWidget
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 22fb531..447d969 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -1,5 +1,4 @@
 import Heading from '@components/atoms/headings/heading';
-import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
 import PostsList, { type Post } from '@components/organisms/layout/posts-list';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import PageLayout, {
@@ -18,6 +17,7 @@ import {
   getPageLinkFromRawData,
   getPostMeta,
 } from '@utils/helpers/pages';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
 import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
@@ -37,21 +37,10 @@ const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
   const { content, intro, meta, slug, title } = currentTopic;
   const { articles, dates, seo, thematics } = meta;
   const intl = useIntl();
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: `/sujet/${slug}`,
   });
-  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: 'topic', name: title, url: `/sujet/${slug}` },
-  ];
 
   const headerMeta: PageLayoutProps['headerMeta'] = {
     publication: { date: dates.publication },
@@ -149,7 +138,8 @@ const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
       <PageLayout
-        breadcrumb={breadcrumb}
+        breadcrumb={breadcrumbItems}
+        breadcrumbSchema={breadcrumbSchema}
         title={title}
         intro={intro}
         headerMeta={headerMeta}
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index dd7e80d..13ef0da 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -1,5 +1,4 @@
 import Heading from '@components/atoms/headings/heading';
-import { type BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
 import PostsList, { type Post } from '@components/organisms/layout/posts-list';
 import LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import PageLayout, {
@@ -18,6 +17,7 @@ import {
   getPageLinkFromRawData,
   getPostMeta,
 } from '@utils/helpers/pages';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
 import { GetStaticPaths, GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
@@ -40,21 +40,10 @@ const ThematicPage: NextPage<ThematicPageProps> = ({
   const { content, intro, meta, slug, title } = currentThematic;
   const { articles, dates, seo, topics } = meta;
   const intl = useIntl();
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title,
+    url: `/thematique/${slug}`,
   });
-  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: 'thematic', name: title, url: `/thematique/${slug}` },
-  ];
 
   const headerMeta: PageLayoutProps['headerMeta'] = {
     publication: { date: dates.publication },
@@ -152,7 +141,8 @@ const ThematicPage: NextPage<ThematicPageProps> = ({
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
       <PageLayout
-        breadcrumb={breadcrumb}
+        breadcrumb={breadcrumbItems}
+        breadcrumbSchema={breadcrumbSchema}
         title={title}
         intro={intro}
         headerMeta={headerMeta}
diff --git a/src/utils/hooks/use-breadcrumb.tsx b/src/utils/hooks/use-breadcrumb.tsx
new file mode 100644
index 0000000..087d400
--- /dev/null
+++ b/src/utils/hooks/use-breadcrumb.tsx
@@ -0,0 +1,106 @@
+import { BreadcrumbItem } from '@components/molecules/nav/breadcrumb';
+import { slugify } from '@utils/helpers/strings';
+import { useIntl } from 'react-intl';
+import { BreadcrumbList } from 'schema-dts';
+import useSettings from './use-settings';
+
+export type useBreadcrumbProps = {
+  /**
+   * The current page title.
+   */
+  title: string;
+  /**
+   * The current page url.
+   */
+  url: string;
+};
+
+export type useBreadcrumbReturn = {
+  /**
+   * The breadcrumb items.
+   */
+  items: BreadcrumbItem[];
+  /**
+   * The breadcrumb JSON schema.
+   */
+  schema: BreadcrumbList['itemListElement'][];
+};
+
+/**
+ * Retrieve the breadcrumb items.
+ *
+ * @param {useBreadcrumbProps} props - An object (the current page title & url).
+ * @returns {useBreadcrumbReturn} The breadcrumb items and its JSON schema.
+ */
+const useBreadcrumb = ({
+  title,
+  url,
+}: useBreadcrumbProps): useBreadcrumbReturn => {
+  const intl = useIntl();
+  const { website } = useSettings();
+  const isArticle = url.startsWith('/article/');
+  const isHome = url === '/';
+  const isProject = url.startsWith('/projets/');
+  const isSearch = url.startsWith('/recherche');
+  const isThematic = url.startsWith('/thematique/');
+  const isTopic = url.startsWith('/sujet/');
+
+  const homeLabel = intl.formatMessage({
+    defaultMessage: 'Home',
+    description: 'Breadcrumb: home label',
+    id: 'j5k9Fe',
+  });
+  const items: BreadcrumbItem[] = [{ id: 'home', name: homeLabel, url: '/' }];
+  const schema: BreadcrumbList['itemListElement'][] = [
+    {
+      '@type': 'ListItem',
+      position: 1,
+      name: homeLabel,
+      item: website.url,
+    },
+  ];
+
+  if (isHome) return { items, schema };
+
+  if (isArticle || isSearch || isThematic || isTopic) {
+    const blogLabel = intl.formatMessage({
+      defaultMessage: 'Blog',
+      description: 'Breadcrumb: blog label',
+      id: 'Es52wh',
+    });
+    items.push({ id: 'blog', name: blogLabel, url: '/blog' });
+    schema.push({
+      '@type': 'ListItem',
+      position: 2,
+      name: blogLabel,
+      item: `${website.url}/blog`,
+    });
+  }
+
+  if (isProject) {
+    const projectsLabel = intl.formatMessage({
+      defaultMessage: 'Projects',
+      description: 'Breadcrumb: projects label',
+      id: '28GZdv',
+    });
+    items.push({ id: 'blog', name: projectsLabel, url: '/projets' });
+    schema.push({
+      '@type': 'ListItem',
+      position: 2,
+      name: projectsLabel,
+      item: `${website.url}/projets`,
+    });
+  }
+
+  items.push({ id: slugify(title), name: title, url });
+  schema.push({
+    '@type': 'ListItem',
+    position: schema.length + 1,
+    name: title,
+    item: `${website.url}${url}`,
+  });
+
+  return { items, schema };
+};
+
+export default useBreadcrumb;
-- 
cgit v1.2.3


From c77c58e18143233be042c4980a6ed08ae9beac52 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 16 May 2022 19:40:23 +0200
Subject: chore: adjust and complete missing styles

* add logo to topics pages and links
* add Prism styles to articles
* and a few other adjustements
---
 src/components/atoms/forms/form.tsx                |   3 +-
 src/components/atoms/links/link.module.scss        |  23 --
 .../atoms/lists/description-list-item.module.scss  |   2 +
 src/components/molecules/layout/meta.tsx           |  59 ++--
 src/components/molecules/layout/page-footer.tsx    |   4 +-
 .../molecules/layout/page-header.module.scss       |   6 +
 src/components/molecules/layout/page-header.tsx    |  11 +-
 src/components/organisms/forms/comment-form.tsx    |  12 +-
 .../organisms/widgets/sharing.stories.tsx          |  21 +-
 src/components/organisms/widgets/sharing.tsx       |   7 +-
 .../templates/page/page-layout.module.scss         |   6 +
 .../templates/page/page-layout.stories.tsx         |   2 +-
 src/components/templates/page/page-layout.tsx      |  17 +-
 src/pages/article/[slug].tsx                       |  43 ++-
 src/pages/blog/index.tsx                           |  12 +-
 src/pages/cv.tsx                                   |  19 +-
 src/pages/recherche/index.tsx                      |  12 +-
 src/pages/sujet/[slug].tsx                         |  35 ++-
 src/services/graphql/articles.query.ts             |  11 +
 src/services/graphql/topics.query.ts               |  11 +
 src/styles/base/_typography.scss                   |  24 +-
 src/styles/components/_wp-blocks.scss              | 166 ------------
 src/styles/globals.scss                            |  10 +-
 src/styles/pages/article.module.scss               |  36 +++
 src/styles/pages/partials/_article-headings.scss   |  57 ++++
 src/styles/pages/partials/_article-links.scss      | 104 +++++++
 src/styles/pages/partials/_article-lists.scss      |  65 +++++
 src/styles/pages/partials/_article-media.scss      |  11 +
 src/styles/pages/partials/_article-prism.scss      | 301 +++++++++++++++++++++
 src/styles/pages/partials/_article-wp-blocks.scss  | 168 ++++++++++++
 src/styles/pages/topic.module.scss                 |   6 +
 src/ts/types/app.ts                                |   1 +
 src/ts/types/raw-data.ts                           |   7 +-
 src/utils/helpers/pages.ts                         |   5 +-
 src/utils/hooks/use-add-prism-class-attr.tsx       |  60 ++++
 35 files changed, 1036 insertions(+), 301 deletions(-)
 delete mode 100644 src/styles/components/_wp-blocks.scss
 create mode 100644 src/styles/pages/article.module.scss
 create mode 100644 src/styles/pages/partials/_article-headings.scss
 create mode 100644 src/styles/pages/partials/_article-links.scss
 create mode 100644 src/styles/pages/partials/_article-lists.scss
 create mode 100644 src/styles/pages/partials/_article-media.scss
 create mode 100644 src/styles/pages/partials/_article-prism.scss
 create mode 100644 src/styles/pages/partials/_article-wp-blocks.scss
 create mode 100644 src/styles/pages/topic.module.scss
 create mode 100644 src/utils/hooks/use-add-prism-class-attr.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/atoms/forms/form.tsx b/src/components/atoms/forms/form.tsx
index ef8dce4..b819aea 100644
--- a/src/components/atoms/forms/form.tsx
+++ b/src/components/atoms/forms/form.tsx
@@ -35,7 +35,6 @@ export type FormProps = {
  */
 const Form: FC<FormProps> = ({
   children,
-  className = '',
   grouped = true,
   onSubmit,
   ...props
@@ -68,7 +67,7 @@ const Form: FC<FormProps> = ({
   };
 
   return (
-    <form onSubmit={handleSubmit} className={className} {...props}>
+    <form onSubmit={handleSubmit} {...props}>
       {getFormItems()}
     </form>
   );
diff --git a/src/components/atoms/links/link.module.scss b/src/components/atoms/links/link.module.scss
index 5c97bd2..1b89727 100644
--- a/src/components/atoms/links/link.module.scss
+++ b/src/components/atoms/links/link.module.scss
@@ -2,29 +2,6 @@
 @use "@styles/abstracts/variables" as var;
 
 .link {
-  background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
-    0 0 / 100% 201% no-repeat;
-  color: var(--color-primary);
-  text-decoration-thickness: 0.15em;
-  text-underline-offset: 20%;
-  transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s;
-
-  &:hover {
-    color: var(--color-primary-light);
-    text-decoration-thickness: 0.25em;
-  }
-
-  &:focus {
-    background-position: 0 100%;
-    color: var(--color-fg-inverted);
-  }
-
-  &:active {
-    background-position: 0 0;
-    color: var(--color-primary-dark);
-    text-decoration-thickness: 18%;
-  }
-
   &[hreflang] {
     &::after {
       display: inline-block;
diff --git a/src/components/atoms/lists/description-list-item.module.scss b/src/components/atoms/lists/description-list-item.module.scss
index 60cad57..aba90ce 100644
--- a/src/components/atoms/lists/description-list-item.module.scss
+++ b/src/components/atoms/lists/description-list-item.module.scss
@@ -27,6 +27,8 @@
   }
 
   &--inline-values {
+    row-gap: var(--spacing-2xs);
+
     .term {
       flex: 1 1 100%;
     }
diff --git a/src/components/molecules/layout/meta.tsx b/src/components/molecules/layout/meta.tsx
index 1f6219a..74bd4ff 100644
--- a/src/components/molecules/layout/meta.tsx
+++ b/src/components/molecules/layout/meta.tsx
@@ -92,13 +92,17 @@ export type MetaData = {
    */
   topics?: string[] | JSX.Element[];
   /**
-   * A total.
+   * A total number of posts.
    */
-  total?: string;
+  total?: number;
   /**
    * The update date.
    */
   update?: MetaDate;
+  /**
+   * An url.
+   */
+  website?: string;
 };
 
 export type MetaKey = keyof MetaData;
@@ -145,80 +149,86 @@ const Meta: FC<MetaProps> = ({
       case 'author':
         return intl.formatMessage({
           defaultMessage: 'Written by:',
-          id: 'OI0N37',
           description: 'Meta: author label',
+          id: 'OI0N37',
         });
       case 'comments':
         return intl.formatMessage({
           defaultMessage: 'Comments:',
-          id: 'jTVIh8',
           description: 'Meta: comments label',
+          id: 'jTVIh8',
         });
       case 'creation':
         return intl.formatMessage({
           defaultMessage: 'Created on:',
-          id: 'b4fdYE',
           description: 'Meta: creation date label',
+          id: 'b4fdYE',
         });
       case 'license':
         return intl.formatMessage({
           defaultMessage: 'License:',
-          id: 'AuGklx',
           description: 'Meta: license label',
+          id: 'AuGklx',
         });
       case 'popularity':
         return intl.formatMessage({
           defaultMessage: 'Popularity:',
-          id: 'pWTj2W',
           description: 'Meta: popularity label',
+          id: 'pWTj2W',
         });
       case 'publication':
         return intl.formatMessage({
           defaultMessage: 'Published on:',
-          id: 'QGi5uD',
           description: 'Meta: publication date label',
+          id: 'QGi5uD',
         });
       case 'readingTime':
         return intl.formatMessage({
           defaultMessage: 'Reading time:',
-          id: 'EbFvsM',
           description: 'Meta: reading time label',
+          id: 'EbFvsM',
         });
       case 'repositories':
         return intl.formatMessage({
           defaultMessage: 'Repositories:',
-          id: 'DssFG1',
           description: 'Meta: repositories label',
+          id: 'DssFG1',
         });
       case 'technologies':
         return intl.formatMessage({
           defaultMessage: 'Technologies:',
-          id: 'ADQmDF',
           description: 'Meta: technologies label',
+          id: 'ADQmDF',
         });
       case 'thematics':
         return intl.formatMessage({
           defaultMessage: 'Thematics:',
-          id: 'bz53Us',
           description: 'Meta: thematics label',
+          id: 'bz53Us',
         });
       case 'topics':
         return intl.formatMessage({
           defaultMessage: 'Topics:',
-          id: 'gJNaBD',
           description: 'Meta: topics label',
+          id: 'gJNaBD',
         });
       case 'total':
         return intl.formatMessage({
           defaultMessage: 'Total:',
-          id: '92zgdp',
           description: 'Meta: total label',
+          id: '92zgdp',
         });
       case 'update':
         return intl.formatMessage({
           defaultMessage: 'Updated on:',
-          id: 'tLC7bh',
           description: 'Meta: update date label',
+          id: 'tLC7bh',
+        });
+      case 'website':
+        return intl.formatMessage({
+          defaultMessage: 'Official website:',
+          description: 'Meta: official website label',
+          id: 'GRyyfy',
         });
       default:
         return '';
@@ -279,8 +289,8 @@ const Meta: FC<MetaProps> = ({
       {
         defaultMessage:
           '{commentsCount, plural, =0 {No comments} one {# comment} other {# comments}}<a11y> about {title}</a11y>',
-        id: '02rgLO',
         description: 'Meta: comments count',
+        id: '02rgLO',
       },
       {
         a11y: (chunks: ReactNode) => (
@@ -316,6 +326,23 @@ const Meta: FC<MetaProps> = ({
       case 'publication':
       case 'update':
         return getDate(value as MetaDate);
+      case 'total':
+        return intl.formatMessage(
+          {
+            defaultMessage:
+              '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
+            description: 'BlogPage: posts count meta',
+            id: 'OF5cPz',
+          },
+          { postsCount: value as number }
+        );
+      case 'website':
+        const url = value as string;
+        return (
+          <Link href={url} external={true}>
+            {url}
+          </Link>
+        );
       default:
         return value as string | ReactNode | ReactNode[];
     }
diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx
index e998b1e..97e449f 100644
--- a/src/components/molecules/layout/page-footer.tsx
+++ b/src/components/molecules/layout/page-footer.tsx
@@ -19,7 +19,9 @@ export type PageFooterProps = {
  */
 const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => {
   return (
-    <footer {...props}>{meta && <Meta data={meta} layout="column" />}</footer>
+    <footer {...props}>
+      {meta && <Meta data={meta} withSeparator={false} />}
+    </footer>
   );
 };
 
diff --git a/src/components/molecules/layout/page-header.module.scss b/src/components/molecules/layout/page-header.module.scss
index 4c7df5f..232023a 100644
--- a/src/components/molecules/layout/page-header.module.scss
+++ b/src/components/molecules/layout/page-header.module.scss
@@ -56,3 +56,9 @@
 .meta {
   font-size: var(--font-size-sm);
 }
+
+.intro {
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index 9abe9af..6759c7f 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -1,5 +1,5 @@
 import Heading from '@components/atoms/headings/heading';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import Meta, { type MetaData } from './meta';
 import styles from './page-header.module.scss';
 
@@ -19,7 +19,7 @@ export type PageHeaderProps = {
   /**
    * The page title.
    */
-  title: string;
+  title: ReactNode;
 };
 
 /**
@@ -35,9 +35,12 @@ const PageHeader: FC<PageHeaderProps> = ({
 }) => {
   const getIntro = () => {
     return typeof intro === 'string' ? (
-      <div dangerouslySetInnerHTML={{ __html: intro }} />
+      <div
+        className={styles.intro}
+        dangerouslySetInnerHTML={{ __html: intro }}
+      />
     ) : (
-      <div>{intro}</div>
+      <div className={styles.intro}>{intro}</div>
     );
   };
 
diff --git a/src/components/organisms/forms/comment-form.tsx b/src/components/organisms/forms/comment-form.tsx
index 9e0abdf..5ff4ea4 100644
--- a/src/components/organisms/forms/comment-form.tsx
+++ b/src/components/organisms/forms/comment-form.tsx
@@ -1,5 +1,5 @@
 import Button from '@components/atoms/buttons/button';
-import Form from '@components/atoms/forms/form';
+import Form, { type FormProps } from '@components/atoms/forms/form';
 import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
 import Spinner from '@components/atoms/loaders/spinner';
 import LabelledField from '@components/molecules/forms/labelled-field';
@@ -15,11 +15,7 @@ export type CommentFormData = {
   website?: string;
 };
 
-export type CommentFormProps = {
-  /**
-   * Set additional classnames to the form wrapper.
-   */
-  className?: string;
+export type CommentFormProps = Pick<FormProps, 'className'> & {
   /**
    * Pass a component to print a success/error message.
    */
@@ -44,12 +40,12 @@ export type CommentFormProps = {
 };
 
 const CommentForm: FC<CommentFormProps> = ({
-  className = '',
   Notice,
   parentId,
   saveComment,
   title,
   titleLevel = 2,
+  ...props
 }) => {
   const intl = useIntl();
   const [name, setName] = useState<string>('');
@@ -116,9 +112,9 @@ const CommentForm: FC<CommentFormProps> = ({
   return (
     <Form
       onSubmit={submitHandler}
-      className={className}
       aria-label={formAriaLabel}
       aria-labelledby={formLabelledBy}
+      {...props}
     >
       {title && (
         <Heading id={formId} level={titleLevel}>
diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx
index 47213b6..59b86d3 100644
--- a/src/components/organisms/widgets/sharing.stories.tsx
+++ b/src/components/organisms/widgets/sharing.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SharingWidget from './sharing';
 
 /**
@@ -9,6 +8,19 @@ export default {
   title: 'Organisms/Widgets',
   component: SharingWidget,
   argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the sharing links list.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     data: {
       description: 'The page data.',
       type: {
@@ -58,13 +70,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SharingWidget>;
 
 const Template: ComponentStory<typeof SharingWidget> = (args) => (
diff --git a/src/components/organisms/widgets/sharing.tsx b/src/components/organisms/widgets/sharing.tsx
index 85dadb0..c63f5db 100644
--- a/src/components/organisms/widgets/sharing.tsx
+++ b/src/components/organisms/widgets/sharing.tsx
@@ -22,6 +22,10 @@ export type SharingData = {
 };
 
 export type SharingProps = {
+  /**
+   * Set additional classnames to the sharing links list.
+   */
+  className?: string;
   /**
    * The page data to share.
    */
@@ -46,6 +50,7 @@ export type SharingProps = {
  * Render a list of sharing links inside a widget.
  */
 const Sharing: FC<SharingProps> = ({
+  className = '',
   data,
   media,
   expanded = true,
@@ -201,7 +206,7 @@ const Sharing: FC<SharingProps> = ({
 
   return (
     <Widget expanded={expanded} level={level} title={widgetTitle} {...props}>
-      <ul className={styles.list}>{getItems()}</ul>
+      <ul className={`${styles.list} ${className}`}>{getItems()}</ul>
     </Widget>
   );
 };
diff --git a/src/components/templates/page/page-layout.module.scss b/src/components/templates/page/page-layout.module.scss
index 7602492..83e5a80 100644
--- a/src/components/templates/page/page-layout.module.scss
+++ b/src/components/templates/page/page-layout.module.scss
@@ -72,6 +72,7 @@
 
 .footer {
   grid-column: 2;
+  margin: var(--spacing-sm) 0 var(--spacing-2xs);
 }
 
 .comments {
@@ -87,4 +88,9 @@
     grid-column: 2;
     margin: var(--spacing-md) 0 0;
   }
+
+  &__form {
+    max-width: 40ch;
+    margin: auto;
+  }
 }
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
index 002b951..8af5f98 100644
--- a/src/components/templates/page/page-layout.stories.tsx
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -473,7 +473,7 @@ export const Blog = Template.bind({});
 Blog.args = {
   breadcrumb: postsListBreadcrumb,
   title: 'Blog',
-  headerMeta: { total: `${posts.length} posts` },
+  headerMeta: { total: posts.length },
   children: (
     <>
       <PostsList posts={posts} byYear={true} total={posts.length} />
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index bc90f4c..f3f3ea8 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -20,7 +20,7 @@ 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, useState } from 'react';
+import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import Layout, { type LayoutProps } from '../layout/layout';
 import styles from './page-layout.module.scss';
@@ -33,6 +33,11 @@ export type PageLayoutProps = Pick<
    * True if the page accepts new comments. Default: false.
    */
   allowComments?: boolean;
+  bodyAttributes?: HTMLAttributes<HTMLDivElement>;
+  /**
+   * Set additional classnames to the body wrapper.
+   */
+  bodyClassName?: string;
   /**
    * The breadcrumb items.
    */
@@ -83,6 +88,8 @@ export type PageLayoutProps = Pick<
 const PageLayout: FC<PageLayoutProps> = ({
   children,
   allowComments = false,
+  bodyAttributes,
+  bodyClassName = '',
   breadcrumb,
   breadcrumbSchema,
   comments,
@@ -91,8 +98,8 @@ const PageLayout: FC<PageLayoutProps> = ({
   id,
   intro,
   isHome = false,
-  widgets,
   title,
+  widgets,
   withToC = false,
 }) => {
   const intl = useIntl();
@@ -202,11 +209,12 @@ const PageLayout: FC<PageLayoutProps> = ({
       {typeof children === 'string' ? (
         <div
           ref={bodyRef}
-          className={styles.body}
+          className={`${styles.body} ${bodyClassName}`}
           dangerouslySetInnerHTML={{ __html: children }}
+          {...bodyAttributes}
         />
       ) : (
-        <div ref={bodyRef} className={styles.body}>
+        <div ref={bodyRef} className={`${styles.body} ${bodyClassName}`}>
           {children}
         </div>
       )}
@@ -245,6 +253,7 @@ const PageLayout: FC<PageLayoutProps> = ({
           {allowComments && (
             <section className={styles.comments__section}>
               <CommentForm
+                className={styles.comments__form}
                 saveComment={saveComment}
                 title={commentFormTitle}
                 Notice={
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 5eeabd9..995e3a9 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -1,5 +1,6 @@
 import ButtonLink from '@components/atoms/buttons/button-link';
 import Link from '@components/atoms/links/link';
+import ResponsiveImage from '@components/molecules/images/responsive-image';
 import Sharing from '@components/organisms/widgets/sharing';
 import PageLayout, {
   type PageLayoutProps,
@@ -9,15 +10,20 @@ import {
   getArticleBySlug,
 } from '@services/graphql/articles';
 import { getPostComments } from '@services/graphql/comments';
+import styles from '@styles/pages/article.module.scss';
 import { type Article, type Comment } from '@ts/types/app';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
+import useAddPrismClassAttr from '@utils/hooks/use-add-prism-class-attr';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
+import usePrismPlugins, { PrismPlugin } from '@utils/hooks/use-prism-plugins';
 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 { HTMLAttributes } from 'react';
+import { useIntl } from 'react-intl';
 import { Blog, BlogPosting, Graph, WebPage } from 'schema-dts';
 import useSWR from 'swr';
 
@@ -54,16 +60,31 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
       )),
   };
 
+  const intl = useIntl();
+  const footerMetaLabel = intl.formatMessage({
+    defaultMessage: 'Read more articles about:',
+    description: 'ArticlePage: footer topics list label',
+    id: '50xc4o',
+  });
+
   const footerMeta: PageLayoutProps['footerMeta'] = {
-    topics:
-      topics &&
-      topics.map((topic) => {
+    custom: topics && {
+      label: footerMetaLabel,
+      value: topics.map((topic) => {
         return (
-          <ButtonLink key={topic.id} target={`/sujet/${topic.slug}`}>
+          <ButtonLink
+            key={topic.id}
+            target={`/sujet/${topic.slug}`}
+            className={styles.btn}
+          >
+            {topic.logo && (
+              <ResponsiveImage className={styles.btn__icon} {...topic.logo} />
+            )}{' '}
             {topic.name}
           </ButtonLink>
         );
       }),
+    },
   };
 
   const { website } = useSettings();
@@ -156,6 +177,15 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
     });
   };
 
+  const prismPlugins: PrismPlugin[] = ['command-line', 'line-numbers'];
+  const { pluginsAttribute, pluginsClassName } = usePrismPlugins(prismPlugins);
+  useAddPrismClassAttr({
+    attributes: {
+      'data-filter-output': '#output#"',
+    },
+    classNames: pluginsClassName,
+  });
+
   return (
     <>
       <Head>
@@ -173,6 +203,10 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
       />
       <PageLayout
         allowComments={true}
+        bodyAttributes={{
+          ...(pluginsAttribute as HTMLAttributes<HTMLDivElement>),
+        }}
+        bodyClassName={styles.body}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
         comments={data && getCommentsList(data)}
@@ -185,6 +219,7 @@ const ArticlePage: NextPage<ArticlePageProps> = ({ comments, post }) => {
         widgets={[
           <Sharing
             key="sharing-widget"
+            className={styles.widget}
             data={{ excerpt: intro, title, url: pageUrl }}
             media={[
               'diaspora',
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index a5ef045..b6ce221 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -114,16 +114,6 @@ const BlogPage: NextPage<BlogPageProps> = ({
     '@graph': [webpageSchema, blogSchema],
   };
 
-  const postsCount = intl.formatMessage(
-    {
-      defaultMessage:
-        '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-      id: 'OF5cPz',
-      description: 'BlogPage: posts count meta',
-    },
-    { postsCount: totalArticles }
-  );
-
   /**
    * Retrieve the formatted meta.
    *
@@ -231,7 +221,7 @@ const BlogPage: NextPage<BlogPageProps> = ({
         title={title}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={{ total: postsCount }}
+        headerMeta={{ total: totalArticles }}
         widgets={[
           <LinksListWidget
             key="thematics-list"
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index b3dec10..7936c84 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -1,4 +1,6 @@
+import Heading from '@components/atoms/headings/heading';
 import Link from '@components/atoms/links/link';
+import List from '@components/atoms/lists/list';
 import ImageWidget from '@components/organisms/widgets/image-widget';
 import SocialMedia from '@components/organisms/widgets/social-media';
 import PageLayout, {
@@ -9,11 +11,12 @@ import styles from '@styles/pages/cv.module.scss';
 import { loadTranslation } from '@utils/helpers/i18n';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
 import useSettings from '@utils/hooks/use-settings';
+import { NestedMDXComponents } from 'mdx/types';
 import { GetStaticProps, NextPage } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 import Script from 'next/script';
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import { AboutPage, Graph, WebPage } from 'schema-dts';
 
@@ -141,6 +144,18 @@ const CVPage: NextPage = () => {
     '@graph': [webpageSchema, cvSchema],
   };
 
+  const components: NestedMDXComponents = {
+    a: (props) => <Link external={true} {...props} />,
+    h1: (props) => <Heading level={1} {...props} />,
+    h2: (props) => <Heading level={2} {...props} />,
+    h3: (props) => <Heading level={3} {...props} />,
+    h4: (props) => <Heading level={4} {...props} />,
+    h5: (props) => <Heading level={5} {...props} />,
+    h6: (props) => <Heading level={6} {...props} />,
+    Link: (props) => <Link {...props} />,
+    List: (props) => <List {...props} />,
+  };
+
   return (
     <PageLayout
       breadcrumb={breadcrumbItems}
@@ -166,7 +181,7 @@ const CVPage: NextPage = () => {
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <CVContent />
+      <CVContent components={components} />
     </PageLayout>
   );
 };
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 0a7dc60..d88a293 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -140,16 +140,6 @@ const SearchPage: NextPage<SearchPageProps> = ({
     getTotalArticles(query.s as string)
   );
 
-  const postsCount = intl.formatMessage(
-    {
-      defaultMessage:
-        '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}',
-      id: 'LtsVOx',
-      description: 'SearchPage: posts count meta',
-    },
-    { postsCount: totalArticles || 0 }
-  );
-
   /**
    * Retrieve the formatted meta.
    *
@@ -244,7 +234,7 @@ const SearchPage: NextPage<SearchPageProps> = ({
         title={title}
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        headerMeta={{ total: postsCount }}
+        headerMeta={{ total: totalArticles }}
         widgets={[
           <LinksListWidget
             key="thematics-list"
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 447d969..348fe05 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -1,4 +1,5 @@
 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 LinksListWidget from '@components/organisms/widgets/links-list-widget';
 import PageLayout, {
@@ -10,6 +11,7 @@ import {
   getTopicsPreview,
   getTotalTopics,
 } from '@services/graphql/topics';
+import styles from '@styles/pages/topic.module.scss';
 import { type Article, type PageLink, type Topic } from '@ts/types/app';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
 import {
@@ -35,7 +37,14 @@ export type TopicPageProps = {
 
 const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
   const { content, intro, meta, slug, title } = currentTopic;
-  const { articles, dates, seo, thematics } = meta;
+  const {
+    articles,
+    cover,
+    dates,
+    seo,
+    thematics,
+    website: officialWebsite,
+  } = meta;
   const intl = useIntl();
   const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
     title,
@@ -45,6 +54,8 @@ const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
   const headerMeta: PageLayoutProps['headerMeta'] = {
     publication: { date: dates.publication },
     update: dates.update ? { date: dates.update } : undefined,
+    website: officialWebsite,
+    total: articles ? articles.length : undefined,
   };
 
   const { website } = useSettings();
@@ -98,10 +109,10 @@ const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
         ...remainingData
       } = article;
 
-      const { cover, ...remainingMeta } = articleMeta;
+      const { cover: articleCover, ...remainingMeta } = articleMeta;
 
       return {
-        cover,
+        cover: articleCover,
         excerpt: articleIntro,
         meta: getPostMeta(remainingMeta),
         url: `/article/${articleSlug}`,
@@ -122,6 +133,15 @@ const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
     id: '/sRqPT',
   });
 
+  const getPageHeading = () => {
+    return (
+      <>
+        {cover && <ResponsiveImage className={styles.logo} {...cover} />}
+        {title}
+      </>
+    );
+  };
+
   return (
     <>
       <Head>
@@ -140,7 +160,7 @@ const TopicPage: NextPage<TopicPageProps> = ({ currentTopic, topics }) => {
       <PageLayout
         breadcrumb={breadcrumbItems}
         breadcrumbSchema={breadcrumbSchema}
-        title={title}
+        title={getPageHeading()}
         intro={intro}
         headerMeta={headerMeta}
         widgets={
@@ -206,14 +226,15 @@ export const getStaticProps: GetStaticProps<TopicPageProps> = async ({
   const allTopics = allTopicsEdges.edges.map((edge) =>
     getPageLinkFromRawData(edge.node)
   );
+  const topicsLinks = allTopics.filter(
+    (topic) => topic.slug !== (params!.slug as TopicParams['slug'])
+  );
   const translation = await loadTranslation(locale);
 
   return {
     props: {
       currentTopic: JSON.parse(JSON.stringify(currentTopic)),
-      topics: allTopics.filter(
-        (topic) => topic.slug !== (params!.slug as TopicParams['slug'])
-      ),
+      topics: JSON.parse(JSON.stringify(topicsLinks)),
       translation,
     },
   };
diff --git a/src/services/graphql/articles.query.ts b/src/services/graphql/articles.query.ts
index d65bc9e..e02ca8e 100644
--- a/src/services/graphql/articles.query.ts
+++ b/src/services/graphql/articles.query.ts
@@ -14,6 +14,17 @@ export const articleBySlugQuery = `query PostBy($slug: ID!) {
       postsInTopic {
         ... on Topic {
           databaseId
+          featuredImage {
+            node {
+              altText
+              mediaDetails {
+                height
+                width
+              }
+              sourceUrl
+              title
+            }
+          }
           slug
           title
         }
diff --git a/src/services/graphql/topics.query.ts b/src/services/graphql/topics.query.ts
index 19be5d7..4574256 100644
--- a/src/services/graphql/topics.query.ts
+++ b/src/services/graphql/topics.query.ts
@@ -94,6 +94,17 @@ export const topicsListQuery = `query TopicsList($after: String = "", $first: In
       cursor
       node {
         databaseId
+        featuredImage {
+          node {
+            altText
+            mediaDetails {
+              height
+              width
+            }
+            sourceUrl
+            title
+          }
+        }
         slug
         title
       }
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 7b7a695..2c3c8cc 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -120,21 +120,15 @@ dl {
   & & {
     margin: var(--spacing-2xs) 0 0;
   }
-}
-
-dt {
-  flex: 0 0 max-content;
-  font-weight: 600;
-}
 
-dd {
-  flex: 0 0 auto;
-  margin: 0;
+  ::marker {
+    color: var(--color-primary-dark);
+  }
 }
 
 a {
   background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
-    0 0 / 100% 200% no-repeat;
+    0 0 / 100% 201% no-repeat;
   color: var(--color-primary);
   text-decoration-thickness: 0.15em;
   text-underline-offset: 20%;
@@ -199,13 +193,3 @@ pre {
   word-break: normal;
   word-wrap: normal;
 }
-
-figure {
-  margin: var(--spacing-md) 0;
-}
-
-figcaption {
-  margin-top: var(--spacing-xs);
-  font-size: var(--font-size-sm);
-  text-align: center;
-}
diff --git a/src/styles/components/_wp-blocks.scss b/src/styles/components/_wp-blocks.scss
deleted file mode 100644
index efd6db5..0000000
--- a/src/styles/components/_wp-blocks.scss
+++ /dev/null
@@ -1,166 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-@use "@styles/abstracts/placeholders";
-
-.wp-block-quote {
-  margin: var(--spacing-sm) 0;
-  padding: var(--spacing-sm);
-  position: relative;
-  border: fun.convert-px(1) solid var(--color-primary-lighter);
-  border-left: fun.convert-px(5) solid var(--color-primary-lighter);
-  box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-    fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-      var(--color-shadow-light),
-    fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-      var(--color-shadow-light);
-  font-style: italic;
-
-  > *:last-child {
-    margin: 0;
-  }
-
-  cite {
-    font-size: var(--font-size-sm);
-    font-style: normal;
-    font-weight: 600;
-  }
-}
-
-.wp-block-code,
-.wp-block-preformatted {
-  margin: 0 auto var(--spacing-md);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  background: var(--color-bg-secondary);
-  border: fun.convert-px(1) solid var(--color-border-light);
-  color: var(--color-fg);
-}
-
-.wp-block-columns {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--spacing-md);
-  margin: var(--spacing-md) 0;
-
-  @include mix.media("screen") {
-    @include mix.dimensions("sm") {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-
-  &.are-vertically-aligned-center {
-    align-items: center;
-  }
-}
-
-.wp-block-column {
-  > *:first-child {
-    margin-top: 0;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.wp-block-gallery {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--spacing-sm);
-
-  .blocks-gallery-grid {
-    @extend %reset-list;
-
-    grid-column: 1 / -1;
-    grid-row: 1 / -1;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    gap: var(--spacing-sm);
-  }
-
-  .blocks-gallery-item {
-    figure {
-      margin: 0;
-    }
-
-    a {
-      display: block;
-      box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-        fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-          var(--color-shadow-light),
-        fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-          var(--color-shadow-light);
-
-      &:hover,
-      &:focus {
-        transform: scale(1.05);
-        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-          fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0
-            var(--color-shadow-light),
-          fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0
-            var(--color-shadow-light);
-      }
-
-      &:focus {
-        outline: solid var(--color-primary-light);
-      }
-
-      &:active {
-        transform: scale(0.95);
-        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-          fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-            var(--color-shadow-light),
-          0 0 0 0 var(--color-shadow-light);
-        outline: none;
-      }
-    }
-  }
-
-  &.aligncenter {
-    .blocks-gallery-grid {
-      align-items: center;
-    }
-  }
-
-  @for $i from 0 to 6 {
-    &.columns-#{$i} {
-      @include mix.media("screen") {
-        @include mix.dimensions("xs") {
-          grid-template-columns: repeat(2, minmax(0, 1fr));
-
-          .blocks-gallery-grid {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-          }
-        }
-
-        @include mix.dimensions("sm") {
-          grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
-
-          .blocks-gallery-grid {
-            grid-template-columns: repeat(3, minmax(0, 1fr));
-          }
-        }
-      }
-    }
-  }
-}
-
-.wp-block-image {
-  img {
-    display: block;
-    margin: auto;
-    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-        var(--color-shadow-light);
-    text-align: center;
-  }
-}
-
-.wp-block-video {
-  box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
-    fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
-      var(--color-shadow-light),
-    fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
-      var(--color-shadow-light);
-}
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index f9a1281..8ece909 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -6,7 +6,6 @@
  * Import each files separately to define vendors styles order.
  */
 @use "modern-normalize";
-@use "vendors/prism";
 
 /**
  * 2.0. Base
@@ -22,14 +21,7 @@
 @use "base/typography";
 
 /**
- * 3.0. Components
- *
- * Define styles for external components (like WordPress blocks).
- */
-@use "components/wp-blocks";
-
-/**
- * 4.0. Themes
+ * 3.0. Themes
  *
  * Define themes specific styles.
  */
diff --git a/src/styles/pages/article.module.scss b/src/styles/pages/article.module.scss
new file mode 100644
index 0000000..a42c633
--- /dev/null
+++ b/src/styles/pages/article.module.scss
@@ -0,0 +1,36 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/variables" as var;
+@use "partials/article-links";
+@use "partials/article-lists";
+@use "partials/article-media";
+@use "partials/article-prism";
+@use "partials/article-wp-blocks";
+
+.btn {
+  margin-right: var(--spacing-2xs);
+  padding: var(--spacing-2xs) var(--spacing-xs);
+
+  &__icon {
+    max-width: fun.convert-px(22);
+    margin-right: var(--spacing-2xs);
+  }
+}
+
+.body {
+  :global {
+    @include article-links.styles;
+    @include article-lists.styles;
+    @include article-media.styles;
+    @include article-prism.styles;
+    @include article-wp-blocks.styles;
+  }
+}
+
+.widget {
+  @include mix.media("screen") {
+    @include mix.dimensions("md") {
+      width: min-content;
+    }
+  }
+}
diff --git a/src/styles/pages/partials/_article-headings.scss b/src/styles/pages/partials/_article-headings.scss
new file mode 100644
index 0000000..c0c3519
--- /dev/null
+++ b/src/styles/pages/partials/_article-headings.scss
@@ -0,0 +1,57 @@
+@use "@styles/abstracts/functions" as fun;
+
+@mixin styles {
+  h1 {
+    font-size: var(--font-size-3xl);
+    font-weight: 500;
+  }
+
+  h2 {
+    padding-bottom: fun.convert-px(3);
+    background: linear-gradient(
+        to top,
+        var(--color-primary-dark) 0.3rem,
+        transparent 0.3rem
+      )
+      0 0 / 3rem 100% no-repeat;
+    font-size: var(--font-size-2xl);
+    font-weight: 500;
+    text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);
+  }
+
+  h3 {
+    font-size: var(--font-size-xl);
+    font-weight: 500;
+  }
+
+  h4 {
+    font-size: var(--font-size-lg);
+    font-weight: 500;
+  }
+
+  h5 {
+    font-size: var(--font-size-md);
+    font-weight: 600;
+  }
+
+  h6 {
+    font-size: var(--font-size-md);
+    font-weight: 500;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--color-primary-dark);
+    font-family: var(--font-family-secondary);
+    letter-spacing: 0.01ex;
+    margin: 0 0 var(--spacing-sm);
+
+    & + & {
+      margin-top: var(--spacing-md);
+    }
+  }
+}
diff --git a/src/styles/pages/partials/_article-links.scss b/src/styles/pages/partials/_article-links.scss
new file mode 100644
index 0000000..df86dcf
--- /dev/null
+++ b/src/styles/pages/partials/_article-links.scss
@@ -0,0 +1,104 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/variables" as var;
+
+@mixin styles {
+  a {
+    &[hreflang] {
+      &::after {
+        display: inline-block;
+
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]";
+        font-size: var(--font-size-sm);
+      }
+    }
+  }
+
+  a.download {
+    &::after {
+      display: inline-block;
+
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'));
+    }
+
+    &:focus:not(:active)::after {
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_white}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'));
+    }
+
+    &[hreflang] {
+      &::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'));
+      }
+    }
+  }
+
+  a.external {
+    &::after {
+      display: inline-block;
+
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+    }
+
+    &:focus:not(:active)::after {
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+    }
+
+    &[hreflang] {
+      &::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+
+      &:focus:not(:active)::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+    }
+  }
+
+  a.external.download {
+    &::after {
+      /* Prettier is removing spacing between content parts. */
+
+      /* prettier-ignore */
+      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+    }
+
+    &[hreflang] {
+      &::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+
+      &:focus:not(:active)::after {
+        /* Prettier is removing spacing between content parts. */
+
+        /* prettier-ignore */
+        content: "\0000a0[" attr(hreflang) "]\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>')) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
+      }
+    }
+  }
+}
diff --git a/src/styles/pages/partials/_article-lists.scss b/src/styles/pages/partials/_article-lists.scss
new file mode 100644
index 0000000..c0084b0
--- /dev/null
+++ b/src/styles/pages/partials/_article-lists.scss
@@ -0,0 +1,65 @@
+@mixin styles {
+  ol {
+    padding: 0;
+    list-style-type: none;
+    counter-reset: li;
+
+    > li {
+      display: table;
+      counter-increment: li;
+
+      &::before {
+        content: counters(li, ".") ". ";
+        display: table-cell;
+        padding-right: var(--spacing-2xs);
+        color: var(--color-secondary);
+      }
+    }
+
+    li ol > li::before {
+      content: counters(li, ".") ". ";
+    }
+  }
+
+  ul,
+  ol {
+    li:not(:last-child) {
+      margin-bottom: var(--spacing-2xs);
+    }
+
+    ::marker {
+      color: var(--color-primary-dark);
+    }
+  }
+
+  ul {
+    padding-left: var(--spacing-sm);
+  }
+
+  dl {
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--spacing-2xs);
+    width: fit-content;
+  }
+
+  ul,
+  ol,
+  dl {
+    margin: var(--spacing-sm) 0;
+
+    & & {
+      margin: var(--spacing-2xs) 0 0;
+    }
+  }
+
+  dt {
+    color: var(--color-fg-light);
+    font-weight: 600;
+  }
+
+  dd {
+    margin: 0;
+    word-break: break-all;
+  }
+}
diff --git a/src/styles/pages/partials/_article-media.scss b/src/styles/pages/partials/_article-media.scss
new file mode 100644
index 0000000..8359881
--- /dev/null
+++ b/src/styles/pages/partials/_article-media.scss
@@ -0,0 +1,11 @@
+@mixin styles {
+  figure {
+    margin: var(--spacing-md) 0;
+  }
+
+  figcaption {
+    margin-top: var(--spacing-xs);
+    font-size: var(--font-size-sm);
+    text-align: center;
+  }
+}
diff --git a/src/styles/pages/partials/_article-prism.scss b/src/styles/pages/partials/_article-prism.scss
new file mode 100644
index 0000000..025e0c0
--- /dev/null
+++ b/src/styles/pages/partials/_article-prism.scss
@@ -0,0 +1,301 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+@mixin styles {
+  .code-toolbar {
+    --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)});
+    --toolbar-height: #{fun.convert-px(90)};
+
+    position: relative;
+    margin-top: calc(var(--toolbar-height) + var(--spacing-md));
+
+    @include mix.media("screen") {
+      @include mix.dimensions("2xs") {
+        --toolbar-height: #{fun.convert-px(60)};
+      }
+    }
+
+    .toolbar {
+      display: grid;
+      grid-template-columns: max-content minmax(0, 1fr);
+      justify-items: end;
+      width: 100%;
+      height: var(--toolbar-height);
+      position: absolute;
+      top: calc(var(--toolbar-height) * -1);
+      left: 0;
+      right: 0;
+      background: var(--color-bg-tertiary);
+      border: fun.convert-px(1) solid var(--color-border);
+
+      @include mix.media("screen") {
+        @include mix.dimensions("2xs") {
+          display: flex;
+          flex-flow: row wrap;
+        }
+      }
+    }
+
+    .toolbar-item {
+      display: flex;
+      align-items: center;
+    }
+
+    .toolbar-item:nth-child(1) {
+      grid-column: 1;
+      grid-row: 1 / 3;
+      margin-right: auto;
+      padding: 0 var(--spacing-sm);
+      background: var(--color-bg-code);
+      border-right: fun.convert-px(1) solid var(--color-border);
+      color: var(--color-primary-darker);
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+    }
+
+    .toolbar-item:nth-child(2) {
+      grid-column: 2;
+      grid-row: 1;
+      margin: 0 var(--spacing-2xs);
+    }
+
+    .toolbar-item:nth-child(3) {
+      grid-column: 2;
+      grid-row: 2;
+      margin: 0 var(--spacing-2xs);
+    }
+  }
+
+  pre[class*="language-"] {
+    max-height: max(30vw, fun.convert-px(300));
+    margin: var(--spacing-md) 0;
+    padding: 0;
+    position: relative;
+    background: var(--color-bg-secondary);
+    color: var(--color-fg);
+    border: fun.convert-px(1) solid var(--color-border);
+
+    > code {
+      display: block;
+      padding: var(--spacing-xs) 0 var(--spacing-xs)
+        calc(var(--gutter-size) + var(--spacing-xs));
+    }
+
+    .line-numbers-rows,
+    .command-line-prompt {
+      width: var(--gutter-size);
+      min-height: 100%;
+      padding: var(--spacing-xs) var(--spacing-2xs);
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      user-select: none;
+      background: var(--color-bg);
+      border-right: fun.convert-px(1) solid var(--color-border);
+    }
+
+    .token {
+      &.comment,
+      &.doc-comment {
+        color: var(--color-fg-light);
+      }
+
+      &.punctuation {
+        color: var(--color-fg);
+      }
+
+      &.attr-name,
+      &.hexcode,
+      &.inserted,
+      &.string {
+        color: var(--color-token-green);
+      }
+
+      &.class,
+      &.coord,
+      &.id,
+      &.function {
+        color: var(--color-token-purple);
+      }
+
+      &.builtin,
+      &.builtin.class-name,
+      &.property-access,
+      &.regex,
+      &.scope {
+        color: var(--color-token-magenta);
+      }
+
+      &.class-name,
+      &.constant,
+      &.global,
+      &.interpolation,
+      &.key,
+      &.package,
+      &.this,
+      &.title,
+      &.variable {
+        color: var(--color-token-blue);
+      }
+
+      &.combinator,
+      &.keyword,
+      &.operator,
+      &.pseudo-class,
+      &.pseudo-element,
+      &.rule,
+      &.selector,
+      &.unit {
+        color: var(--color-token-orange);
+      }
+
+      &.attr-value,
+      &.boolean,
+      &.number {
+        color: var(--color-token-yellow);
+      }
+
+      &.delimiter,
+      &.doctype,
+      &.parameter,
+      &.parent,
+      &.property,
+      &.shebang,
+      &.tag {
+        color: var(--color-token-cyan);
+      }
+
+      &.deleted {
+        color: var(--color-token-red);
+      }
+
+      &.punctuation.brace-hover,
+      &.punctuation.brace-selected {
+        background: var(--color-bg);
+        outline: solid fun.convert-px(1) var(--color-primary-light);
+      }
+    }
+
+    span.inline-color-wrapper {
+      background: url(fun.encode-svg(
+        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>'
+      ));
+
+      /* Prevent glitches where 1px from the repeating pattern could be seen. */
+      background-position: center;
+      background-size: 110%;
+
+      display: inline-block;
+      height: 1.1ch;
+      width: 1.1ch;
+      margin: 0 0.5ch 0 0;
+      border: fun.convert-px(1) solid var(--color-bg);
+      outline: fun.convert-px(1) solid var(--color-border-dark);
+      overflow: hidden;
+    }
+
+    span.inline-color {
+      display: block;
+
+      /* To prevent visual glitches again */
+      height: 120%;
+      width: 120%;
+    }
+  }
+
+  pre.line-numbers {
+    counter-reset: lineNumber;
+
+    .line-numbers-rows {
+      > span {
+        counter-increment: lineNumber;
+
+        &::before {
+          display: block;
+          padding: 0 var(--spacing-xs);
+          content: counter(lineNumber);
+          color: var(--color-primary-darker);
+          text-align: right;
+          line-height: var(--line-height);
+        }
+      }
+    }
+  }
+
+  pre.command-line {
+    --gutter-size: clamp(#{fun.convert-px(195)}, 48vw, #{fun.convert-px(235)});
+
+    ~ .toolbar {
+      --gutter-size: clamp(
+        #{fun.convert-px(195)},
+        48vw,
+        #{fun.convert-px(235)}
+      );
+    }
+
+    .command-line-prompt {
+      > span {
+        &::before {
+          display: block;
+          content: "";
+        }
+
+        &[data-user]::before {
+          content: "[" attr(data-user) "@" attr(data-host) "] $";
+        }
+
+        &[data-user="root"]::before {
+          content: "[" attr(data-user) "@" attr(data-host) "] #";
+        }
+
+        &[data-prompt]::before {
+          content: attr(data-prompt);
+        }
+      }
+    }
+  }
+
+  .copy-to-clipboard-button,
+  .prism-color-scheme-button {
+    display: block;
+    padding: fun.convert-px(3) var(--spacing-xs);
+    background: var(--color-bg);
+    border: 0.4ex solid var(--color-primary);
+    border-radius: fun.convert-px(30);
+    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+        var(--color-shadow),
+      fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+        var(--color-shadow),
+      fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+        var(--color-shadow);
+    color: var(--color-primary);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    transition: all 0.35s ease-in-out 0s;
+
+    &:hover,
+    &:focus {
+      transform: translateX(#{fun.convert-px(-2)})
+        translateY(#{fun.convert-px(-2)});
+      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+          var(--color-shadow-light),
+        fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+          var(--color-shadow-light),
+        fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+          var(--color-shadow-light),
+        fun.convert-px(4) fun.convert-px(7) fun.convert-px(8) fun.convert-px(-3)
+          var(--color-shadow-light);
+    }
+
+    &:focus {
+      text-decoration: underline var(--color-primary) fun.convert-px(3);
+    }
+
+    &:active {
+      text-decoration: none;
+      transform: translateY(#{fun.convert-px(2)});
+      box-shadow: 0 0 0 0 var(--color-shadow);
+    }
+  }
+}
diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss
new file mode 100644
index 0000000..d4fed5a
--- /dev/null
+++ b/src/styles/pages/partials/_article-wp-blocks.scss
@@ -0,0 +1,168 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+@mixin styles {
+  .wp-block-quote {
+    margin: var(--spacing-sm) 0;
+    padding: var(--spacing-sm);
+    position: relative;
+    border: fun.convert-px(1) solid var(--color-primary-lighter);
+    border-left: fun.convert-px(5) solid var(--color-primary-lighter);
+    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+        var(--color-shadow-light),
+      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+        var(--color-shadow-light);
+    font-style: italic;
+
+    > *:last-child {
+      margin: 0;
+    }
+
+    cite {
+      font-size: var(--font-size-sm);
+      font-style: normal;
+      font-weight: 600;
+    }
+  }
+
+  .wp-block-code,
+  .wp-block-preformatted {
+    margin: 0 auto var(--spacing-md);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    background: var(--color-bg-secondary);
+    border: fun.convert-px(1) solid var(--color-border-light);
+    color: var(--color-fg);
+  }
+
+  .wp-block-columns {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-md);
+    margin: var(--spacing-md) 0;
+
+    @include mix.media("screen") {
+      @include mix.dimensions("sm") {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+    }
+
+    &.are-vertically-aligned-center {
+      align-items: center;
+    }
+  }
+
+  .wp-block-column {
+    > *:first-child {
+      margin-top: 0;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .wp-block-gallery {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-sm);
+
+    .blocks-gallery-grid {
+      @extend %reset-list;
+
+      grid-column: 1 / -1;
+      grid-row: 1 / -1;
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--spacing-sm);
+    }
+
+    .blocks-gallery-item {
+      figure {
+        margin: 0;
+      }
+
+      a {
+        display: block;
+        box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+          fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+            var(--color-shadow-light),
+          fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+            var(--color-shadow-light);
+
+        &:hover,
+        &:focus {
+          transform: scale(1.05);
+          box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+            fun.convert-px(3) fun.convert-px(3) fun.convert-px(2) 0
+              var(--color-shadow-light),
+            fun.convert-px(5) fun.convert-px(5) fun.convert-px(8) 0
+              var(--color-shadow-light);
+        }
+
+        &:focus {
+          outline: solid var(--color-primary-light);
+        }
+
+        &:active {
+          transform: scale(0.95);
+          box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+            fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+              var(--color-shadow-light),
+            0 0 0 0 var(--color-shadow-light);
+          outline: none;
+        }
+      }
+    }
+
+    &.aligncenter {
+      .blocks-gallery-grid {
+        align-items: center;
+      }
+    }
+
+    @for $i from 0 to 6 {
+      &.columns-#{$i} {
+        @include mix.media("screen") {
+          @include mix.dimensions("xs") {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+
+            .blocks-gallery-grid {
+              grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+          }
+
+          @include mix.dimensions("sm") {
+            grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+
+            .blocks-gallery-grid {
+              grid-template-columns: repeat(3, minmax(0, 1fr));
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .wp-block-image {
+    img {
+      display: block;
+      margin: auto;
+      box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+        fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+          var(--color-shadow-light),
+        fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+          var(--color-shadow-light);
+      text-align: center;
+    }
+  }
+
+  .wp-block-video {
+    box-shadow: 0 0 fun.convert-px(1) 0 var(--color-shadow),
+      fun.convert-px(2) fun.convert-px(2) fun.convert-px(2) 0
+        var(--color-shadow-light),
+      fun.convert-px(3) fun.convert-px(3) fun.convert-px(6) 0
+        var(--color-shadow-light);
+  }
+}
diff --git a/src/styles/pages/topic.module.scss b/src/styles/pages/topic.module.scss
new file mode 100644
index 0000000..badb694
--- /dev/null
+++ b/src/styles/pages/topic.module.scss
@@ -0,0 +1,6 @@
+@use "@styles/abstracts/functions" as fun;
+
+.logo {
+  max-width: fun.convert-px(50);
+  margin-right: var(--spacing-xs);
+}
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index f354118..a3b9889 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -81,6 +81,7 @@ export type Page<T extends PageKind> = {
 
 export type PageLink = {
   id: number;
+  logo?: Image;
   name: string;
   slug: string;
 };
diff --git a/src/ts/types/raw-data.ts b/src/ts/types/raw-data.ts
index 7e12e7f..ba6d596 100644
--- a/src/ts/types/raw-data.ts
+++ b/src/ts/types/raw-data.ts
@@ -89,14 +89,17 @@ export type RawThematic = RawPage & {
 
 export type RawThematicPreview = Pick<
   RawThematic,
-  'databaseId' | 'slug' | 'title'
+  'databaseId' | 'featuredImage' | 'slug' | 'title'
 >;
 
 export type RawTopic = RawPage & {
   acfTopics: ACFTopics;
 };
 
-export type RawTopicPreview = Pick<RawTopic, 'databaseId' | 'slug' | 'title'>;
+export type RawTopicPreview = Pick<
+  RawTopic,
+  'databaseId' | 'featuredImage' | 'slug' | 'title'
+>;
 
 export type TotalItems = {
   pageInfo: Pick<PageInfo, 'total'>;
diff --git a/src/utils/helpers/pages.ts b/src/utils/helpers/pages.ts
index 93582f0..62337db 100644
--- a/src/utils/helpers/pages.ts
+++ b/src/utils/helpers/pages.ts
@@ -5,12 +5,14 @@ import {
   type RawThematicPreview,
   type RawTopicPreview,
 } from '@ts/types/raw-data';
+import { getImageFromRawData } from './images';
 
 /**
  * Convert raw data to a Link object.
  *
  * @param data - An object.
  * @param {number} data.databaseId - The data id.
+ * @param {number} [data.logo] - The data logo.
  * @param {string} data.slug - The data slug.
  * @param {string} data.title - The data name.
  * @returns {PageLink} The link data (id, slug and title).
@@ -18,10 +20,11 @@ import {
 export const getPageLinkFromRawData = (
   data: RawThematicPreview | RawTopicPreview
 ): PageLink => {
-  const { databaseId, slug, title } = data;
+  const { databaseId, featuredImage, slug, title } = data;
 
   return {
     id: databaseId,
+    logo: featuredImage ? getImageFromRawData(featuredImage?.node) : undefined,
     name: title,
     slug,
   };
diff --git a/src/utils/hooks/use-add-prism-class-attr.tsx b/src/utils/hooks/use-add-prism-class-attr.tsx
new file mode 100644
index 0000000..7d33cc2
--- /dev/null
+++ b/src/utils/hooks/use-add-prism-class-attr.tsx
@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type AttributesMap = {
+  [key: string]: string;
+};
+
+export type useAddPrismClassAttrProps = {
+  attributes?: AttributesMap;
+  classNames?: string;
+};
+
+/**
+ * Add classnames and/or attributes to pre elements.
+ *
+ * @param props - An object of attributes and classnames.
+ */
+const useAddPrismClassAttr = ({
+  attributes,
+  classNames,
+}: useAddPrismClassAttrProps) => {
+  const [elements, setElements] = useState<HTMLPreElement[]>([]);
+
+  useEffect(() => {
+    const targetElements = document.querySelectorAll('pre');
+    setElements(Array.from(targetElements));
+  }, []);
+
+  const setClassNameAndAttributes = useCallback(
+    (array: HTMLElement[]) => {
+      array.forEach((el) => {
+        if (classNames) {
+          const classNamesArray = classNames.split(' ');
+          const isCommandLine = el.classList.contains('command-line');
+          const removedClassName = isCommandLine
+            ? 'line-numbers'
+            : 'command-line';
+          const filteredClassNames = classNamesArray.filter(
+            (className) => className !== removedClassName
+          );
+          filteredClassNames.forEach((className) =>
+            el.classList.add(className)
+          );
+        }
+
+        if (attributes) {
+          for (const [key, value] of Object.entries(attributes)) {
+            el.setAttribute(key, value);
+          }
+        }
+      });
+    },
+    [attributes, classNames]
+  );
+
+  useEffect(() => {
+    if (elements.length > 0) setClassNameAndAttributes(elements);
+  }, [elements, setClassNameAndAttributes]);
+};
+
+export default useAddPrismClassAttr;
-- 
cgit v1.2.3


From 9a186b357b32325cf77fdce39a6c6c9aff76d8a5 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 17 May 2022 18:31:21 +0200
Subject: chore: listen scroll to hide/show back to top button

---
 .../molecules/buttons/back-to-top.module.scss       |  4 ++--
 src/components/organisms/layout/footer.stories.tsx  | 21 +++++++++++++--------
 src/components/organisms/layout/footer.tsx          | 21 ++++++++++++++++++---
 src/components/templates/layout/layout.module.scss  | 14 ++++++++++++++
 src/components/templates/layout/layout.tsx          | 19 +++++++++++++++++--
 src/utils/hooks/use-scroll-position.tsx             | 15 +++++++++++++++
 6 files changed, 79 insertions(+), 15 deletions(-)
 create mode 100644 src/utils/hooks/use-scroll-position.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/molecules/buttons/back-to-top.module.scss b/src/components/molecules/buttons/back-to-top.module.scss
index 9721bff..77ee97b 100644
--- a/src/components/molecules/buttons/back-to-top.module.scss
+++ b/src/components/molecules/buttons/back-to-top.module.scss
@@ -2,8 +2,8 @@
 
 .wrapper {
   .link {
-    width: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)});
-    height: clamp(#{fun.convert-px(44)}, 6vw, #{fun.convert-px(55)});
+    width: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)});
+    height: clamp(#{fun.convert-px(48)}, 8vw, #{fun.convert-px(55)});
 
     svg {
       width: 100%;
diff --git a/src/components/organisms/layout/footer.stories.tsx b/src/components/organisms/layout/footer.stories.tsx
index 06819da..bd5a744 100644
--- a/src/components/organisms/layout/footer.stories.tsx
+++ b/src/components/organisms/layout/footer.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import FooterComponent from './footer';
 
 /**
@@ -9,6 +8,19 @@ export default {
   title: 'Organisms/Layout',
   component: FooterComponent,
   argTypes: {
+    backToTopClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the back to top button.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
     className: {
       control: {
         type: 'text',
@@ -53,13 +65,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof FooterComponent>;
 
 const Template: ComponentStory<typeof FooterComponent> = (args) => (
diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx
index 1426e96..c60afec 100644
--- a/src/components/organisms/layout/footer.tsx
+++ b/src/components/organisms/layout/footer.tsx
@@ -1,13 +1,19 @@
 import Copyright, {
   type CopyrightProps,
 } from '@components/atoms/layout/copyright';
-import BackToTop from '@components/molecules/buttons/back-to-top';
+import BackToTop, {
+  type BackToTopProps,
+} from '@components/molecules/buttons/back-to-top';
 import Nav, { type NavItem } from '@components/molecules/nav/nav';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './footer.module.scss';
 
 export type FooterProps = {
+  /**
+   * Set additional classnames to the back to top button.
+   */
+  backToTopClassName?: BackToTopProps['className'];
   /**
    * Set additional classnames to the footer element.
    */
@@ -31,7 +37,13 @@ export type FooterProps = {
  *
  * Renders a footer with copyright and nav;
  */
-const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => {
+const Footer: FC<FooterProps> = ({
+  backToTopClassName,
+  className = '',
+  copyright,
+  navItems,
+  topId,
+}) => {
   const intl = useIntl();
   const ariaLabel = intl.formatMessage({
     defaultMessage: 'Footer',
@@ -54,7 +66,10 @@ const Footer: FC<FooterProps> = ({ className, copyright, navItems, topId }) => {
           className={styles.nav}
         />
       )}
-      <BackToTop target={topId} className={styles['back-to-top']} />
+      <BackToTop
+        target={topId}
+        className={`${styles['back-to-top']} ${backToTopClassName}`}
+      />
     </footer>
   );
 };
diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss
index 806d2d7..09904dc 100644
--- a/src/components/templates/layout/layout.module.scss
+++ b/src/components/templates/layout/layout.module.scss
@@ -13,6 +13,20 @@
   border-top: fun.convert-px(3) solid var(--color-border-light);
 }
 
+.back-to-top {
+  &--hidden {
+    opacity: 0;
+    transform: translateY(calc(var(--button-size) + var(--spacing-md)));
+    visibility: hidden;
+  }
+
+  &--visible {
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+  }
+}
+
 .noscript-spacing {
   width: 100%;
   height: fun.convert-px(75);
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index 9e9282b..3eb02ee 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -7,11 +7,12 @@ import Home from '@components/atoms/icons/home';
 import PostsStack from '@components/atoms/icons/posts-stack';
 import Main from '@components/atoms/layout/main';
 import NoScript from '@components/atoms/layout/no-script';
-import Footer, { FooterProps } from '@components/organisms/layout/footer';
+import Footer, { type FooterProps } from '@components/organisms/layout/footer';
 import Header, { type HeaderProps } from '@components/organisms/layout/header';
+import useScrollPosition from '@utils/hooks/use-scroll-position';
 import useSettings from '@utils/hooks/use-settings';
 import Script from 'next/script';
-import { FC, ReactNode } from 'react';
+import { FC, ReactNode, useState } from 'react';
 import { useIntl } from 'react-intl';
 import {
   BreadcrumbList,
@@ -162,6 +163,19 @@ const Layout: FC<LayoutProps> = ({
     subjectOf: { '@id': `${url}` },
   };
 
+  const [backToTopClassName, setBackToTopClassName] = useState<string>(
+    styles['back-to-top--hidden']
+  );
+  const updateBackToTopClassName = () => {
+    setBackToTopClassName(
+      window.scrollY > 300
+        ? styles['back-to-top--visible']
+        : styles['back-to-top--hidden']
+    );
+  };
+
+  useScrollPosition(updateBackToTopClassName);
+
   return (
     <>
       <Script
@@ -203,6 +217,7 @@ const Layout: FC<LayoutProps> = ({
         copyright={copyrightData}
         navItems={footerNav}
         topId="top"
+        backToTopClassName={backToTopClassName}
         className={styles.footer}
       />
       <noscript>
diff --git a/src/utils/hooks/use-scroll-position.tsx b/src/utils/hooks/use-scroll-position.tsx
new file mode 100644
index 0000000..47cfdd0
--- /dev/null
+++ b/src/utils/hooks/use-scroll-position.tsx
@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+
+/**
+ * Execute the given function based on scroll position.
+ *
+ * @param scrollHandler - A callback function.
+ */
+const useScrollPosition = (scrollHandler: () => void) => {
+  useEffect(() => {
+    window.addEventListener('scroll', scrollHandler);
+    return () => window.removeEventListener('scroll', scrollHandler);
+  }, [scrollHandler]);
+};
+
+export default useScrollPosition;
-- 
cgit v1.2.3


From 54883bb5c36cf21462a421605a709fdd6f04b150 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 18 May 2022 11:44:37 +0200
Subject: chore: add branding animation

---
 src/components/molecules/images/flipping-logo.tsx  |  20 ++--
 .../molecules/layout/branding.module.scss          | 125 +++++++++++++++------
 src/components/molecules/layout/branding.tsx       |  26 ++++-
 .../organisms/toolbar/toolbar-items.module.scss    |   1 +
 .../organisms/toolbar/toolbar.module.scss          |  16 ++-
 src/utils/hooks/use-styles.tsx                     |  29 +++++
 6 files changed, 171 insertions(+), 46 deletions(-)
 create mode 100644 src/utils/hooks/use-styles.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx
index 47e54ab..1099d53 100644
--- a/src/components/molecules/images/flipping-logo.tsx
+++ b/src/components/molecules/images/flipping-logo.tsx
@@ -1,6 +1,6 @@
 import Logo, { type LogoProps } from '@components/atoms/images/logo';
 import Image, { type ImageProps } from 'next/image';
-import { FC } from 'react';
+import { ForwardedRef, forwardRef, ForwardRefRenderFunction } from 'react';
 import styles from './flipping-logo.module.scss';
 
 export type FlippingLogoProps = {
@@ -27,15 +27,15 @@ export type FlippingLogoProps = {
  *
  * Render a logo and a photo with a flipping effect.
  */
-const FlippingLogo: FC<FlippingLogoProps> = ({
-  className = '',
-  altText,
-  logoTitle,
-  photo,
-  ...props
-}) => {
+const FlippingLogo: ForwardRefRenderFunction<
+  HTMLDivElement,
+  FlippingLogoProps
+> = (
+  { className = '', altText, logoTitle, photo, ...props },
+  ref: ForwardedRef<HTMLDivElement>
+) => {
   return (
-    <div className={`${styles.logo} ${className}`}>
+    <div className={`${styles.logo} ${className}`} ref={ref}>
       <div className={styles.logo__front}>
         <Image
           src={photo}
@@ -52,4 +52,4 @@ const FlippingLogo: FC<FlippingLogoProps> = ({
   );
 };
 
-export default FlippingLogo;
+export default forwardRef(FlippingLogo);
diff --git a/src/components/molecules/layout/branding.module.scss b/src/components/molecules/layout/branding.module.scss
index aa18002..6121fa1 100644
--- a/src/components/molecules/layout/branding.module.scss
+++ b/src/components/molecules/layout/branding.module.scss
@@ -1,48 +1,105 @@
 @use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+
+@mixin typing-animation {
+  --typing-animation: none;
+
+  width: fit-content;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "|";
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background: var(--color-bg);
+    color: var(--color-primary-darker);
+    font-weight: 400;
+    text-align: left;
+    visibility: hidden;
+    transform: translateX(100%);
+    transform-origin: right;
+    animation: var(--typing-animation);
+
+    :global {
+      animation: var(--typing-animation);
+    }
+  }
+}
 
 .wrapper {
+  --logo-size: #{clamp(fun.convert-px(90), 12vw, fun.convert-px(100))};
+
   display: grid;
-  grid-template-columns:
-    var(--logo-size, fun.convert-px(100))
-    minmax(0, 1fr);
-  grid-template-rows: 1fr min-content;
-  align-items: center;
-  column-gap: var(--spacing-sm);
-}
+  grid-template-columns: minmax(0, 1fr);
+  justify-items: center;
+  width: 100%;
 
-.logo {
-  grid-row: span 2;
-}
+  @include mix.media("screen") {
+    @include mix.dimensions("2xs") {
+      grid-template-columns:
+        var(--logo-size, fun.convert-px(100))
+        minmax(0, 1fr);
+      grid-template-rows: 1fr min-content;
+      align-items: center;
+      justify-items: left;
+      column-gap: var(--spacing-sm);
+      width: unset;
+    }
+  }
 
-.title {
-  font-size: var(--font-size-2xl);
-}
+  .logo {
+    grid-row: span 2;
+    margin-bottom: var(--spacing-sm);
 
-.baseline {
-  color: var(--color-fg-light);
-}
+    @include mix.media("screen") {
+      @include mix.dimensions("2xs") {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .title {
+    font-size: clamp(var(--font-size-xl), 8vw, var(--font-size-2xl));
+    text-align: center;
 
-.link {
-  background: linear-gradient(
-      to top,
-      var(--color-primary-light) fun.convert-px(5),
-      transparent fun.convert-px(5)
-    )
-    left / 0 100% no-repeat;
-  text-decoration: none;
-  transition: all 0.6s ease-out 0s;
-
-  &:hover,
-  &:focus {
-    background-size: 100% 100%;
+    @include typing-animation;
   }
 
-  &:focus {
-    color: var(--color-primary-light);
+  .baseline {
+    color: var(--color-fg-light);
+    font-size: var(--font-size-lg);
+    text-align: center;
+
+    @include typing-animation;
   }
 
-  &:active {
-    background-size: 0 100%;
-    color: var(--color-primary-dark);
+  .link {
+    background: linear-gradient(
+        to top,
+        var(--color-primary-light) fun.convert-px(5),
+        transparent fun.convert-px(5)
+      )
+      left / 0 100% no-repeat;
+    text-decoration: none;
+    transition: all 0.6s ease-out 0s;
+
+    &:hover,
+    &:focus {
+      background-size: 100% 100%;
+    }
+
+    &:focus {
+      color: var(--color-primary-light);
+    }
+
+    &:active {
+      background-size: 0 100%;
+      color: var(--color-primary-dark);
+    }
   }
 }
diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx
index 423c54f..9a82a74 100644
--- a/src/components/molecules/layout/branding.tsx
+++ b/src/components/molecules/layout/branding.tsx
@@ -1,6 +1,7 @@
 import Heading from '@components/atoms/headings/heading';
+import useStyles from '@utils/hooks/use-styles';
 import Link from 'next/link';
-import { FC } from 'react';
+import { FC, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import FlippingLogo, { type FlippingLogoProps } from '../images/flipping-logo';
 import styles from './branding.module.scss';
@@ -37,6 +38,9 @@ const Branding: FC<BrandingProps> = ({
   withLink = false,
   ...props
 }) => {
+  const baselineRef = useRef<HTMLParagraphElement>(null);
+  const logoRef = useRef<HTMLDivElement>(null);
+  const titleRef = useRef<HTMLHeadingElement | HTMLParagraphElement>(null);
   const intl = useIntl();
   const altText = intl.formatMessage(
     {
@@ -55,6 +59,23 @@ const Branding: FC<BrandingProps> = ({
     { website: title }
   );
 
+  useStyles({
+    property: '--typing-animation',
+    styles: 'blink 0.7s ease-in-out 0s 2, typing 4.3s linear 0s 1',
+    target: titleRef,
+  });
+  useStyles({
+    property: '--typing-animation',
+    styles:
+      'hide-text 4.25s linear 0s 1, blink 0.8s ease-in-out 4.25s 2, typing 3.8s linear 4.25s 1',
+    target: baselineRef,
+  });
+  useStyles({
+    property: 'animation',
+    styles: 'flip-logo 9s ease-in 0s 1',
+    target: logoRef,
+  });
+
   return (
     <div className={styles.wrapper}>
       <FlippingLogo
@@ -62,6 +83,7 @@ const Branding: FC<BrandingProps> = ({
         altText={altText}
         logoTitle={logoTitle}
         photo={photo}
+        ref={logoRef}
         {...props}
       />
       <Heading
@@ -69,6 +91,7 @@ const Branding: FC<BrandingProps> = ({
         level={1}
         withMargin={false}
         className={styles.title}
+        ref={titleRef}
       >
         {withLink ? (
           <Link href="/">
@@ -84,6 +107,7 @@ const Branding: FC<BrandingProps> = ({
           level={4}
           withMargin={false}
           className={styles.baseline}
+          ref={baselineRef}
         >
           {baseline}
         </Heading>
diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss
index fd526d6..c970b71 100644
--- a/src/components/organisms/toolbar/toolbar-items.module.scss
+++ b/src/components/organisms/toolbar/toolbar-items.module.scss
@@ -26,6 +26,7 @@
 
   @include mix.media("screen") {
     @include mix.dimensions(null, "sm") {
+      position: fixed;
       left: 0;
       right: 0;
     }
diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss
index cda9b37..4bcabcb 100644
--- a/src/components/organisms/toolbar/toolbar.module.scss
+++ b/src/components/organisms/toolbar/toolbar.module.scss
@@ -23,6 +23,18 @@
   box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
     var(--color-shadow-dark);
 
+  :global {
+    animation: slide-in-from-bottom 0.8s ease-in-out 0s 1;
+  }
+
+  @include mix.media("screen") {
+    @include mix.dimensions("sm") {
+      :global {
+        animation: slide-in-from-top 1s ease-in-out 0s 1;
+      }
+    }
+  }
+
   .modal {
     &--search,
     &--settings {
@@ -52,8 +64,10 @@
       }
 
       .tooltip {
+        padding: calc(var(--title-height) / 2 + var(--spacing-2xs))
+          var(--spacing-2xs) var(--spacing-2xs);
         top: unset;
-        bottom: calc(100% + var(--spacing-xs));
+        bottom: calc(100% + var(--spacing-2xs));
         transform-origin: bottom right;
       }
     }
diff --git a/src/utils/hooks/use-styles.tsx b/src/utils/hooks/use-styles.tsx
new file mode 100644
index 0000000..d47e9fb
--- /dev/null
+++ b/src/utils/hooks/use-styles.tsx
@@ -0,0 +1,29 @@
+import { RefObject, useEffect } from 'react';
+
+export type UseStylesProps = {
+  /**
+   * A property name or a CSS variable.
+   */
+  property: string;
+  /**
+   * The styles.
+   */
+  styles: string;
+  /**
+   * A targeted element reference.
+   */
+  target: RefObject<HTMLElement>;
+};
+
+/**
+ * Add styles to an element using a React reference.
+ *
+ * @param {UseStylesProps} props - An object with property, styles and target.
+ */
+const useStyles = ({ property, styles, target }: UseStylesProps) => {
+  useEffect(() => {
+    if (target.current) target.current.style.setProperty(property, styles);
+  }, [property, styles, target]);
+};
+
+export default useStyles;
-- 
cgit v1.2.3


From b214baab3e17d92f784b4f782863deafc5558ee4 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 18 May 2022 14:27:11 +0200
Subject: chore: close toolbar modals on click/focus outside

---
 .../molecules/forms/select-with-tooltip.tsx        | 10 ++++-
 src/components/molecules/modals/tooltip.tsx        | 16 ++++----
 .../organisms/forms/settings-form.module.scss      | 11 +++++
 .../organisms/forms/settings-form.stories.tsx      | 47 ++++++++++++++++++++++
 .../organisms/forms/settings-form.test.tsx         | 39 ++++++++++++++++++
 src/components/organisms/forms/settings-form.tsx   | 36 +++++++++++++++++
 src/components/organisms/modals/search-modal.tsx   | 13 +++++-
 .../organisms/modals/settings-modal.module.scss    | 14 +------
 .../organisms/modals/settings-modal.stories.tsx    |  8 ----
 .../organisms/modals/settings-modal.test.tsx       | 27 +------------
 src/components/organisms/modals/settings-modal.tsx | 42 +++++++------------
 src/components/organisms/toolbar/main-nav.tsx      | 16 ++++----
 .../organisms/toolbar/search.stories.tsx           |  1 -
 src/components/organisms/toolbar/search.test.tsx   |  5 ---
 src/components/organisms/toolbar/search.tsx        | 16 ++++----
 .../organisms/toolbar/settings.stories.tsx         |  8 ----
 src/components/organisms/toolbar/settings.tsx      | 16 ++++----
 src/components/organisms/toolbar/toolbar.tsx       | 18 ++++++++-
 src/utils/hooks/use-click-outside.tsx              | 43 ++++++++++++++++++++
 19 files changed, 258 insertions(+), 128 deletions(-)
 create mode 100644 src/components/organisms/forms/settings-form.module.scss
 create mode 100644 src/components/organisms/forms/settings-form.stories.tsx
 create mode 100644 src/components/organisms/forms/settings-form.test.tsx
 create mode 100644 src/components/organisms/forms/settings-form.tsx
 create mode 100644 src/utils/hooks/use-click-outside.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx
index cf7b041..f576a15 100644
--- a/src/components/molecules/forms/select-with-tooltip.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.tsx
@@ -1,4 +1,5 @@
-import { FC, useState } from 'react';
+import useClickOutside from '@utils/hooks/use-click-outside';
+import { FC, useRef, useState } from 'react';
 import HelpButton from '../buttons/help-button';
 import Tooltip, { type TooltipProps } from '../modals/tooltip';
 import LabelledSelect, { type LabelledSelectProps } from './labelled-select';
@@ -28,11 +29,17 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
   ...props
 }) => {
   const [isTooltipOpened, setIsTooltipOpened] = useState<boolean>(false);
+  const tooltipRef = useRef<HTMLDivElement>(null);
   const buttonModifier = isTooltipOpened ? styles['btn--activated'] : '';
   const tooltipModifier = isTooltipOpened
     ? styles['tooltip--visible']
     : styles['tooltip--hidden'];
 
+  useClickOutside(
+    tooltipRef,
+    () => isTooltipOpened && setIsTooltipOpened(false)
+  );
+
   return (
     <div className={styles.wrapper}>
       <LabelledSelect
@@ -50,6 +57,7 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
         content={content}
         icon="?"
         className={`${styles.tooltip} ${tooltipModifier} ${tooltipClassName}`}
+        ref={tooltipRef}
       />
     </div>
   );
diff --git a/src/components/molecules/modals/tooltip.tsx b/src/components/molecules/modals/tooltip.tsx
index 80721f3..efb3009 100644
--- a/src/components/molecules/modals/tooltip.tsx
+++ b/src/components/molecules/modals/tooltip.tsx
@@ -1,5 +1,5 @@
 import List, { type ListItem } from '@components/atoms/lists/list';
-import { FC, ReactNode } from 'react';
+import { forwardRef, ForwardRefRenderFunction, ReactNode } from 'react';
 import styles from './tooltip.module.scss';
 
 export type TooltipProps = {
@@ -26,12 +26,10 @@ export type TooltipProps = {
  *
  * Render a tooltip modal.
  */
-const Tooltip: FC<TooltipProps> = ({
-  className = '',
-  content,
-  icon,
-  title,
-}) => {
+const Tooltip: ForwardRefRenderFunction<HTMLDivElement, TooltipProps> = (
+  { className = '', content, icon, title },
+  ref
+) => {
   /**
    * Format an array of strings to an array of object with id and value.
    *
@@ -45,7 +43,7 @@ const Tooltip: FC<TooltipProps> = ({
   };
 
   return (
-    <div className={`${styles.wrapper} ${className}`}>
+    <div className={`${styles.wrapper} ${className}`} ref={ref}>
       <div className={styles.title}>
         <span className={styles.icon}>{icon}</span>
         {title}
@@ -59,4 +57,4 @@ const Tooltip: FC<TooltipProps> = ({
   );
 };
 
-export default Tooltip;
+export default forwardRef(Tooltip);
diff --git a/src/components/organisms/forms/settings-form.module.scss b/src/components/organisms/forms/settings-form.module.scss
new file mode 100644
index 0000000..a6a2077
--- /dev/null
+++ b/src/components/organisms/forms/settings-form.module.scss
@@ -0,0 +1,11 @@
+@use "@styles/abstracts/mixins" as mix;
+
+.label {
+  margin-right: auto;
+
+  @include mix.media("screen") {
+    @include mix.dimensions(null, "2xs", "height") {
+      font-size: var(--font-size-sm);
+    }
+  }
+}
diff --git a/src/components/organisms/forms/settings-form.stories.tsx b/src/components/organisms/forms/settings-form.stories.tsx
new file mode 100644
index 0000000..46305e7
--- /dev/null
+++ b/src/components/organisms/forms/settings-form.stories.tsx
@@ -0,0 +1,47 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import SettingsForm from './settings-form';
+
+/**
+ * SettingsModal - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Forms',
+  component: SettingsForm,
+  argTypes: {
+    className: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the modal wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+    tooltipClassName: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set additional classnames to the tooltip wrapper.',
+      table: {
+        category: 'Styles',
+      },
+      type: {
+        name: 'string',
+        required: false,
+      },
+    },
+  },
+} as ComponentMeta<typeof SettingsForm>;
+
+const Template: ComponentStory<typeof SettingsForm> = (args) => (
+  <SettingsForm {...args} />
+);
+
+/**
+ * Form Stories - Settings
+ */
+export const Settings = Template.bind({});
diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx
new file mode 100644
index 0000000..beb65ec
--- /dev/null
+++ b/src/components/organisms/forms/settings-form.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from '@test-utils';
+import SettingsForm from './settings-form';
+
+describe('SettingsForm', () => {
+  it('renders a form', () => {
+    render(<SettingsForm />);
+    expect(
+      screen.getByRole('form', { name: /^Settings form/i })
+    ).toBeInTheDocument();
+  });
+
+  it('renders a theme toggle setting', () => {
+    render(<SettingsForm />);
+    expect(
+      screen.getByRole('checkbox', { name: /^Theme:/i })
+    ).toBeInTheDocument();
+  });
+
+  it('renders a code blocks toggle setting', () => {
+    render(<SettingsForm />);
+    expect(
+      screen.getByRole('checkbox', { name: /^Code blocks:/i })
+    ).toBeInTheDocument();
+  });
+
+  it('renders a motion setting', () => {
+    render(<SettingsForm />);
+    expect(
+      screen.getByRole('checkbox', { name: /^Animations:/i })
+    ).toBeInTheDocument();
+  });
+
+  it('renders a Ackee setting', () => {
+    render(<SettingsForm />);
+    expect(
+      screen.getByRole('combobox', { name: /^Tracking:/i })
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx
new file mode 100644
index 0000000..0a34601
--- /dev/null
+++ b/src/components/organisms/forms/settings-form.tsx
@@ -0,0 +1,36 @@
+import Form from '@components/atoms/forms/form';
+import AckeeSelect, {
+  type AckeeSelectProps,
+} from '@components/molecules/forms/ackee-select';
+import MotionToggle from '@components/molecules/forms/motion-toggle';
+import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle';
+import ThemeToggle from '@components/molecules/forms/theme-toggle';
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './settings-form.module.scss';
+
+export type SettingsFormProps = Pick<AckeeSelectProps, 'tooltipClassName'>;
+
+const SettingsForm: FC<SettingsFormProps> = ({ tooltipClassName }) => {
+  const intl = useIntl();
+  const ariaLabel = intl.formatMessage({
+    defaultMessage: 'Settings form',
+    id: 'gX+YVy',
+    description: 'SettingsForm: an accessible form name',
+  });
+
+  return (
+    <Form aria-label={ariaLabel} onSubmit={() => null}>
+      <ThemeToggle labelClassName={styles.label} value={false} />
+      <PrismThemeToggle labelClassName={styles.label} value={false} />
+      <MotionToggle labelClassName={styles.label} value={false} />
+      <AckeeSelect
+        initialValue="full"
+        labelClassName={styles.label}
+        tooltipClassName={tooltipClassName}
+      />
+    </Form>
+  );
+};
+
+export default SettingsForm;
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
index 866bc25..e92bf1b 100644
--- a/src/components/organisms/modals/search-modal.tsx
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -1,9 +1,18 @@
+import Spinner from '@components/atoms/loaders/spinner';
 import Modal, { type ModalProps } from '@components/molecules/modals/modal';
+import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
-import SearchForm, { SearchFormProps } from '../forms/search-form';
+import { type SearchFormProps } from '../forms/search-form';
 import styles from './search-modal.module.scss';
 
+const DynamicSearchForm = dynamic(
+  () => import('@components/organisms/forms/search-form'),
+  {
+    loading: () => <Spinner />,
+  }
+);
+
 export type SearchModalProps = Pick<SearchFormProps, 'searchPage'> & {
   /**
    * Set additional classnames to modal wrapper.
@@ -26,7 +35,7 @@ const SearchModal: FC<SearchModalProps> = ({ className, searchPage }) => {
 
   return (
     <Modal title={modalTitle} className={`${styles.wrapper} ${className}`}>
-      <SearchForm hideLabel={true} searchPage={searchPage} />
+      <DynamicSearchForm hideLabel={true} searchPage={searchPage} />
     </Modal>
   );
 };
diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss
index ebae3da..a6a2077 100644
--- a/src/components/organisms/modals/settings-modal.module.scss
+++ b/src/components/organisms/modals/settings-modal.module.scss
@@ -1,21 +1,11 @@
 @use "@styles/abstracts/mixins" as mix;
 
-.wrapper {
-  .label {
-    margin-right: auto;
-  }
+.label {
+  margin-right: auto;
 
   @include mix.media("screen") {
     @include mix.dimensions(null, "2xs", "height") {
       font-size: var(--font-size-sm);
-
-      .heading {
-        font-size: var(--font-size-lg);
-      }
-
-      .label {
-        font-size: var(--font-size-sm);
-      }
     }
   }
 }
diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx
index 0abe004..0fe8c18 100644
--- a/src/components/organisms/modals/settings-modal.stories.tsx
+++ b/src/components/organisms/modals/settings-modal.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import SettingsModal from './settings-modal';
 
 /**
@@ -36,13 +35,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof SettingsModal>;
 
 const Template: ComponentStory<typeof SettingsModal> = (args) => (
diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx
index 6291e54..acbf7d1 100644
--- a/src/components/organisms/modals/settings-modal.test.tsx
+++ b/src/components/organisms/modals/settings-modal.test.tsx
@@ -2,31 +2,8 @@ import { render, screen } from '@test-utils';
 import SettingsModal from './settings-modal';
 
 describe('SettingsModal', () => {
-  it('renders a theme toggle setting', () => {
+  it('renders a fake heading', () => {
     render(<SettingsModal />);
-    expect(
-      screen.getByRole('checkbox', { name: /^Theme:/i })
-    ).toBeInTheDocument();
-  });
-
-  it('renders a code blocks toggle setting', () => {
-    render(<SettingsModal />);
-    expect(
-      screen.getByRole('checkbox', { name: /^Code blocks:/i })
-    ).toBeInTheDocument();
-  });
-
-  it('renders a motion setting', () => {
-    render(<SettingsModal />);
-    expect(
-      screen.getByRole('checkbox', { name: /^Animations:/i })
-    ).toBeInTheDocument();
-  });
-
-  it('renders a Ackee setting', () => {
-    render(<SettingsModal />);
-    expect(
-      screen.getByRole('combobox', { name: /^Tracking:/i })
-    ).toBeInTheDocument();
+    expect(screen.getByText(/Settings/i)).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index 20d2605..e724076 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -1,25 +1,20 @@
-import Form from '@components/atoms/forms/form';
-import AckeeSelect, {
-  type AckeeSelectProps,
-} from '@components/molecules/forms/ackee-select';
-import MotionToggle from '@components/molecules/forms/motion-toggle';
-import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle';
-import ThemeToggle from '@components/molecules/forms/theme-toggle';
+import Spinner from '@components/atoms/loaders/spinner';
 import Modal, { type ModalProps } from '@components/molecules/modals/modal';
+import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
+import { type SettingsFormProps } from '../forms/settings-form';
 import styles from './settings-modal.module.scss';
 
-export type SettingsModalProps = {
-  /**
-   * Set additional classnames to the modal wrapper.
-   */
-  className?: ModalProps['className'];
-  /**
-   * Set additional classnames to the tooltip wrapper.
-   */
-  tooltipClassName?: AckeeSelectProps['tooltipClassName'];
-};
+const DynamicSettingsForm = dynamic(
+  () => import('@components/organisms/forms/settings-form'),
+  {
+    loading: () => <Spinner />,
+  }
+);
+
+export type SettingsModalProps = Pick<ModalProps, 'className'> &
+  Pick<SettingsFormProps, 'tooltipClassName'>;
 
 /**
  * SettingsModal component
@@ -28,7 +23,7 @@ export type SettingsModalProps = {
  */
 const SettingsModal: FC<SettingsModalProps> = ({
   className = '',
-  tooltipClassName = '',
+  ...props
 }) => {
   const intl = useIntl();
   const title = intl.formatMessage({
@@ -44,16 +39,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
       className={`${styles.wrapper} ${className}`}
       headingClassName={styles.heading}
     >
-      <Form onSubmit={() => null}>
-        <ThemeToggle labelClassName={styles.label} value={false} />
-        <PrismThemeToggle labelClassName={styles.label} value={false} />
-        <MotionToggle labelClassName={styles.label} value={false} />
-        <AckeeSelect
-          initialValue="full"
-          labelClassName={styles.label}
-          tooltipClassName={tooltipClassName}
-        />
-      </Form>
+      <DynamicSettingsForm {...props} />
     </Modal>
   );
 };
diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx
index 35e3fd6..d205112 100644
--- a/src/components/organisms/toolbar/main-nav.tsx
+++ b/src/components/organisms/toolbar/main-nav.tsx
@@ -5,7 +5,7 @@ import Nav, {
   type NavProps,
   type NavItem,
 } from '@components/molecules/nav/nav';
-import { FC } from 'react';
+import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import mainNavStyles from './main-nav.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
@@ -34,12 +34,10 @@ export type MainNavProps = {
  *
  * Render the main navigation.
  */
-const MainNav: FC<MainNavProps> = ({
-  className = '',
-  isActive,
-  items,
-  setIsActive,
-}) => {
+const MainNav: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = (
+  { className = '', isActive, items, setIsActive },
+  ref
+) => {
   const intl = useIntl();
   const label = isActive
     ? intl.formatMessage({
@@ -54,7 +52,7 @@ const MainNav: FC<MainNavProps> = ({
       });
 
   return (
-    <div className={`${sharedStyles.item} ${mainNavStyles.item}`}>
+    <div className={`${sharedStyles.item} ${mainNavStyles.item}`} ref={ref}>
       <Checkbox
         id="main-nav-button"
         name="main-nav-button"
@@ -79,4 +77,4 @@ const MainNav: FC<MainNavProps> = ({
   );
 };
 
-export default MainNav;
+export default forwardRef(MainNav);
diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx
index c6063a0..6aaffde 100644
--- a/src/components/organisms/toolbar/search.stories.tsx
+++ b/src/components/organisms/toolbar/search.stories.tsx
@@ -1,6 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import { IntlProvider } from 'react-intl';
 import Search from './search';
 
 /**
diff --git a/src/components/organisms/toolbar/search.test.tsx b/src/components/organisms/toolbar/search.test.tsx
index a18b679..7c77eac 100644
--- a/src/components/organisms/toolbar/search.test.tsx
+++ b/src/components/organisms/toolbar/search.test.tsx
@@ -11,9 +11,4 @@ describe('Search', () => {
     render(<Search searchPage="#" isActive={true} setIsActive={() => null} />);
     expect(screen.getByRole('checkbox')).toHaveAccessibleName('Close search');
   });
-
-  it('renders a search form', () => {
-    render(<Search searchPage="#" isActive={true} setIsActive={() => null} />);
-    expect(screen.getByRole('searchbox')).toBeInTheDocument();
-  });
 });
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index a1471ef..5695348 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,7 +1,7 @@
 import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
 import Label from '@components/atoms/forms/label';
 import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
-import { FC } from 'react';
+import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import SearchModal, { type SearchModalProps } from '../modals/search-modal';
 import searchStyles from './search.module.scss';
@@ -26,12 +26,10 @@ export type SearchProps = {
   setIsActive: CheckboxProps['setValue'];
 };
 
-const Search: FC<SearchProps> = ({
-  className = '',
-  isActive,
-  searchPage,
-  setIsActive,
-}) => {
+const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
+  { className = '', isActive, searchPage, setIsActive },
+  ref
+) => {
   const intl = useIntl();
   const label = isActive
     ? intl.formatMessage({
@@ -46,7 +44,7 @@ const Search: FC<SearchProps> = ({
       });
 
   return (
-    <div className={`${sharedStyles.item} ${searchStyles.item}`}>
+    <div className={`${sharedStyles.item} ${searchStyles.item}`} ref={ref}>
       <Checkbox
         id="search-button"
         name="search-button"
@@ -69,4 +67,4 @@ const Search: FC<SearchProps> = ({
   );
 };
 
-export default Search;
+export default forwardRef(Search);
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index 1ec0897..aab4b9e 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -1,6 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useState } from 'react';
-import { IntlProvider } from 'react-intl';
 import Settings from './settings';
 
 /**
@@ -57,13 +56,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof Settings>;
 
 const Template: ComponentStory<typeof Settings> = ({
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 3b10226..43d3190 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,7 +1,7 @@
 import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
 import Label from '@components/atoms/forms/label';
 import Cog from '@components/atoms/icons/cog';
-import { FC } from 'react';
+import { FC, forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import SettingsModal, {
   type SettingsModalProps,
@@ -28,12 +28,10 @@ export type SettingsProps = {
   tooltipClassName?: SettingsModalProps['tooltipClassName'];
 };
 
-const Settings: FC<SettingsProps> = ({
-  className = '',
-  isActive,
-  setIsActive,
-  tooltipClassName = '',
-}) => {
+const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
+  { className = '', isActive, setIsActive, tooltipClassName = '' },
+  ref
+) => {
   const intl = useIntl();
   const label = isActive
     ? intl.formatMessage({
@@ -48,7 +46,7 @@ const Settings: FC<SettingsProps> = ({
       });
 
   return (
-    <div className={`${sharedStyles.item} ${settingsStyles.item}`}>
+    <div className={`${sharedStyles.item} ${settingsStyles.item}`} ref={ref}>
       <Checkbox
         id="settings-button"
         name="settings-button"
@@ -71,4 +69,4 @@ const Settings: FC<SettingsProps> = ({
   );
 };
 
-export default Settings;
+export default forwardRef(Settings);
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index 6593055..e4188fe 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -1,4 +1,5 @@
-import { FC, useState } from 'react';
+import useClickOutside from '@utils/hooks/use-click-outside';
+import { FC, useRef, useState } from 'react';
 import MainNav, { type MainNavProps } from '../toolbar/main-nav';
 import Search, { type SearchProps } from '../toolbar/search';
 import Settings from '../toolbar/settings';
@@ -22,8 +23,18 @@ export type ToolbarProps = Pick<SearchProps, 'searchPage'> & {
  */
 const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => {
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
-  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
+  const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
+  const mainNavRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLDivElement>(null);
+  const settingsRef = useRef<HTMLDivElement>(null);
+
+  useClickOutside(mainNavRef, () => isNavOpened && setIsNavOpened(false));
+  useClickOutside(searchRef, () => isSearchOpened && setIsSearchOpened(false));
+  useClickOutside(
+    settingsRef,
+    () => isSettingsOpened && setIsSettingsOpened(false)
+  );
 
   return (
     <div className={`${styles.wrapper} ${className}`}>
@@ -32,18 +43,21 @@ const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => {
         isActive={isNavOpened}
         setIsActive={setIsNavOpened}
         className={styles.modal}
+        ref={mainNavRef}
       />
       <Search
         searchPage={searchPage}
         isActive={isSearchOpened}
         setIsActive={setIsSearchOpened}
         className={`${styles.modal} ${styles['modal--search']}`}
+        ref={searchRef}
       />
       <Settings
         isActive={isSettingsOpened}
         setIsActive={setIsSettingsOpened}
         className={`${styles.modal} ${styles['modal--settings']}`}
         tooltipClassName={styles.tooltip}
+        ref={settingsRef}
       />
     </div>
   );
diff --git a/src/utils/hooks/use-click-outside.tsx b/src/utils/hooks/use-click-outside.tsx
new file mode 100644
index 0000000..066c1c2
--- /dev/null
+++ b/src/utils/hooks/use-click-outside.tsx
@@ -0,0 +1,43 @@
+import { RefObject, useCallback, useEffect } from 'react';
+
+/**
+ * Listen for click/focus outside an element and execute the given callback.
+ *
+ * @param el - A React reference to an element.
+ * @param callback - A callback function to execute on click outside.
+ */
+const useClickOutside = (el: RefObject<HTMLElement>, callback: () => void) => {
+  /**
+   * Check if an event target is outside an element.
+   *
+   * @param {RefObject<HTMLElement>} ref - A React reference object.
+   * @param {EventTarget} target - An event target.
+   * @returns {boolean} True if the event target is outside the ref object.
+   */
+  const isTargetOutside = (
+    ref: RefObject<HTMLElement>,
+    target: EventTarget
+  ): boolean => {
+    if (!ref.current) return false;
+    return !ref.current.contains(target as Node);
+  };
+
+  const handleEvent = useCallback(
+    (e: MouseEvent | FocusEvent) => {
+      if (e.target && isTargetOutside(el, e.target)) callback();
+    },
+    [el, callback]
+  );
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleEvent);
+    document.addEventListener('focusin', handleEvent);
+
+    return () => {
+      document.removeEventListener('mousedown', handleEvent);
+      document.removeEventListener('focusin', handleEvent);
+    };
+  }, [handleEvent]);
+};
+
+export default useClickOutside;
-- 
cgit v1.2.3


From 584bd42f871d2e1618ca414749f09c38f0143a44 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 18 May 2022 22:40:59 +0200
Subject: chore: handle settings change

---
 .../molecules/forms/ackee-select.stories.tsx       | 18 +++++-----
 .../molecules/forms/ackee-select.test.tsx          |  4 +--
 src/components/molecules/forms/ackee-select.tsx    | 26 +++++++++++----
 .../molecules/forms/motion-toggle.stories.tsx      | 18 +++++-----
 .../molecules/forms/motion-toggle.test.tsx         |  2 +-
 src/components/molecules/forms/motion-toggle.tsx   | 34 +++++++++++++++----
 .../molecules/forms/prism-theme-toggle.stories.tsx | 21 ------------
 .../molecules/forms/prism-theme-toggle.test.tsx    |  2 +-
 .../molecules/forms/prism-theme-toggle.tsx         | 34 ++++++++++++++-----
 .../molecules/forms/theme-toggle.stories.tsx       | 21 ------------
 .../molecules/forms/theme-toggle.test.tsx          |  2 +-
 src/components/molecules/forms/theme-toggle.tsx    | 20 +++++++++---
 .../organisms/forms/settings-form.test.tsx         | 38 +++++++++++++++++++---
 src/components/organisms/forms/settings-form.tsx   | 32 ++++++++++++++----
 src/components/organisms/layout/header.stories.tsx | 22 +++++++++++++
 src/components/organisms/layout/header.test.tsx    | 19 ++++++++---
 src/components/organisms/layout/header.tsx         | 22 +++++++++++--
 src/components/organisms/modals/search-modal.tsx   |  1 +
 .../organisms/modals/settings-modal.test.tsx       |  7 +++-
 src/components/organisms/modals/settings-modal.tsx |  6 +++-
 .../organisms/toolbar/settings.stories.tsx         | 24 ++++++++++++++
 src/components/organisms/toolbar/settings.test.tsx | 18 ++++++++--
 src/components/organisms/toolbar/settings.tsx      | 22 +++++++++----
 .../organisms/toolbar/toolbar-items.module.scss    |  2 +-
 .../organisms/toolbar/toolbar.stories.tsx          | 22 +++++++++++++
 src/components/organisms/toolbar/toolbar.test.tsx  |  9 ++++-
 src/components/organisms/toolbar/toolbar.tsx       | 37 +++++++++++++--------
 src/components/templates/layout/layout.tsx         | 10 +++---
 src/components/templates/page/page-layout.tsx      |  3 ++
 src/services/local-storage/index.ts                |  6 ++--
 src/utils/hooks/use-attributes.tsx                 | 33 +++++++++++++++++++
 src/utils/hooks/use-code-blocks-theme.tsx          | 22 +++++++++++++
 src/utils/hooks/use-local-storage.tsx              | 35 ++++++++++++++++++++
 src/utils/hooks/use-query-selector-all.tsx         | 16 +++++++++
 src/utils/hooks/use-update-ackee-options.tsx       | 19 +++++++++++
 src/utils/providers/prism-theme.tsx                |  2 +-
 36 files changed, 487 insertions(+), 142 deletions(-)
 create mode 100644 src/utils/hooks/use-attributes.tsx
 create mode 100644 src/utils/hooks/use-code-blocks-theme.tsx
 create mode 100644 src/utils/hooks/use-local-storage.tsx
 create mode 100644 src/utils/hooks/use-query-selector-all.tsx
 create mode 100644 src/utils/hooks/use-update-ackee-options.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx
index 4e6adf1..6b42b71 100644
--- a/src/components/molecules/forms/ackee-select.stories.tsx
+++ b/src/components/molecules/forms/ackee-select.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import AckeeSelect from './ackee-select';
 
 /**
@@ -33,6 +32,16 @@ export default {
         required: false,
       },
     },
+    storageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Ackee settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     tooltipClassName: {
       control: {
         type: 'text',
@@ -47,13 +56,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof AckeeSelect>;
 
 const Template: ComponentStory<typeof AckeeSelect> = (args) => (
diff --git a/src/components/molecules/forms/ackee-select.test.tsx b/src/components/molecules/forms/ackee-select.test.tsx
index ec27922..0089c06 100644
--- a/src/components/molecules/forms/ackee-select.test.tsx
+++ b/src/components/molecules/forms/ackee-select.test.tsx
@@ -4,13 +4,13 @@ import AckeeSelect from './ackee-select';
 
 describe('Select', () => {
   it('should correctly set default option', () => {
-    render(<AckeeSelect initialValue="full" />);
+    render(<AckeeSelect storageKey="ackee-tracking" initialValue="full" />);
     expect(screen.getByRole('combobox')).toHaveValue('full');
     expect(screen.queryByRole('combobox')).not.toHaveValue('partial');
   });
 
   it('should correctly change value when user choose another option', async () => {
-    render(<AckeeSelect initialValue="full" />);
+    render(<AckeeSelect storageKey="ackee-tracking" initialValue="full" />);
 
     await act(async () => {
       await user.selectOptions(
diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx
index 101e5b5..34850fb 100644
--- a/src/components/molecules/forms/ackee-select.tsx
+++ b/src/components/molecules/forms/ackee-select.tsx
@@ -1,12 +1,14 @@
-import { SelectOptions } from '@components/atoms/forms/select';
-import { Dispatch, FC, SetStateAction, useState } from 'react';
+import { type SelectOptions } from '@components/atoms/forms/select';
+import useLocalStorage from '@utils/hooks/use-local-storage';
+import useUpdateAckeeOptions, {
+  type AckeeOptions,
+} from '@utils/hooks/use-update-ackee-options';
+import { Dispatch, FC, SetStateAction } from 'react';
 import { useIntl } from 'react-intl';
 import SelectWithTooltip, {
   type SelectWithTooltipProps,
 } from './select-with-tooltip';
 
-export type AckeeOptions = 'full' | 'partial';
-
 export type AckeeSelectProps = Pick<
   SelectWithTooltipProps,
   'labelClassName' | 'tooltipClassName'
@@ -15,6 +17,10 @@ export type AckeeSelectProps = Pick<
    * A default value for Ackee settings.
    */
   initialValue: AckeeOptions;
+  /**
+   * The local storage key to save preference.
+   */
+  storageKey: string;
 };
 
 /**
@@ -22,9 +28,17 @@ export type AckeeSelectProps = Pick<
  *
  * Render a select to set Ackee settings.
  */
-const AckeeSelect: FC<AckeeSelectProps> = ({ initialValue, ...props }) => {
+const AckeeSelect: FC<AckeeSelectProps> = ({
+  initialValue,
+  storageKey,
+  ...props
+}) => {
   const intl = useIntl();
-  const [value, setValue] = useState<AckeeOptions>(initialValue);
+  const { value, setValue } = useLocalStorage<AckeeOptions>(
+    storageKey,
+    initialValue
+  );
+  useUpdateAckeeOptions(value);
 
   const ackeeLabel = intl.formatMessage({
     defaultMessage: 'Tracking:',
diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx
index dcfc68d..60430d5 100644
--- a/src/components/molecules/forms/motion-toggle.stories.tsx
+++ b/src/components/molecules/forms/motion-toggle.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import MotionToggleComponent from './motion-toggle';
 
 /**
@@ -22,6 +21,16 @@ export default {
         required: false,
       },
     },
+    storageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     value: {
       control: {
         type: null,
@@ -33,13 +42,6 @@ export default {
       },
     },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof MotionToggleComponent>;
 
 const Template: ComponentStory<typeof MotionToggleComponent> = (args) => (
diff --git a/src/components/molecules/forms/motion-toggle.test.tsx b/src/components/molecules/forms/motion-toggle.test.tsx
index 77bc17c..4fd6b31 100644
--- a/src/components/molecules/forms/motion-toggle.test.tsx
+++ b/src/components/molecules/forms/motion-toggle.test.tsx
@@ -3,7 +3,7 @@ import MotionToggle from './motion-toggle';
 
 describe('MotionToggle', () => {
   it('renders a checked toggle (deactivate animations choice)', () => {
-    render(<MotionToggle value={true} />);
+    render(<MotionToggle storageKey="reduced-motion" value={true} />);
     expect(
       screen.getByRole('checkbox', {
         name: `Animations: On Off`,
diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index 24b54ae..e3bb11a 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -2,19 +2,41 @@ import Toggle, {
   type ToggleChoices,
   type ToggleProps,
 } from '@components/molecules/forms/toggle';
-import { FC, useState } from 'react';
+import useAttributes from '@utils/hooks/use-attributes';
+import useLocalStorage from '@utils/hooks/use-local-storage';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 
-export type MotionToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>;
+export type MotionToggleProps = Pick<
+  ToggleProps,
+  'labelClassName' | 'value'
+> & {
+  /**
+   * The local storage key to save preference.
+   */
+  storageKey: string;
+};
 
 /**
  * MotionToggle component
  *
  * Render a Toggle component to set reduce motion.
  */
-const MotionToggle: FC<MotionToggleProps> = ({ value, ...props }) => {
+const MotionToggle: FC<MotionToggleProps> = ({
+  storageKey,
+  value,
+  ...props
+}) => {
   const intl = useIntl();
-  const [isDeactivated, setIsDeactivated] = useState<boolean>(value);
+  const { value: isReduced, setValue: setIsReduced } = useLocalStorage<boolean>(
+    storageKey,
+    value
+  );
+  useAttributes({
+    attribute: 'reducedMotion',
+    value: `${isReduced}`,
+  });
+
   const reduceMotionLabel = intl.formatMessage({
     defaultMessage: 'Animations:',
     description: 'MotionToggle: reduce motion label',
@@ -42,8 +64,8 @@ const MotionToggle: FC<MotionToggleProps> = ({ value, ...props }) => {
       label={reduceMotionLabel}
       labelSize="medium"
       choices={reduceMotionChoices}
-      value={isDeactivated}
-      setValue={setIsDeactivated}
+      value={isReduced}
+      setValue={setIsReduced}
       {...props}
     />
   );
diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
index 513ebfc..ef4ed6e 100644
--- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import PrismThemeToggle from './prism-theme-toggle';
 
 /**
@@ -22,24 +21,7 @@ export default {
         required: false,
       },
     },
-    value: {
-      control: {
-        type: null,
-      },
-      description: 'The prism theme value.',
-      type: {
-        name: 'boolean',
-        required: true,
-      },
-    },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof PrismThemeToggle>;
 
 const Template: ComponentStory<typeof PrismThemeToggle> = (args) => (
@@ -50,6 +32,3 @@ const Template: ComponentStory<typeof PrismThemeToggle> = (args) => (
  * Toggle Stories - Prism theme
  */
 export const PrismTheme = Template.bind({});
-PrismTheme.args = {
-  value: false,
-};
diff --git a/src/components/molecules/forms/prism-theme-toggle.test.tsx b/src/components/molecules/forms/prism-theme-toggle.test.tsx
index 0dceb92..d831b82 100644
--- a/src/components/molecules/forms/prism-theme-toggle.test.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.test.tsx
@@ -3,7 +3,7 @@ import PrismThemeToggle from './prism-theme-toggle';
 
 describe('PrismThemeToggle', () => {
   it('renders a checked toggle (dark theme choice)', () => {
-    render(<PrismThemeToggle value={true} />);
+    render(<PrismThemeToggle />);
     expect(
       screen.getByRole('checkbox', {
         name: `Code blocks: Light theme Dark theme`,
diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
index 0b9c447..3320722 100644
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -4,22 +4,38 @@ import Toggle, {
   type ToggleChoices,
   type ToggleProps,
 } from '@components/molecules/forms/toggle';
-import { FC, useState } from 'react';
+import { usePrismTheme } from '@utils/providers/prism-theme';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 
-export type PrismThemeToggleProps = Pick<
-  ToggleProps,
-  'labelClassName' | 'value'
->;
+export type PrismThemeToggleProps = Pick<ToggleProps, 'labelClassName'>;
 
 /**
  * PrismThemeToggle component
  *
  * Render a Toggle component to set code blocks theme.
  */
-const PrismThemeToggle: FC<PrismThemeToggleProps> = ({ value, ...props }) => {
+const PrismThemeToggle: FC<PrismThemeToggleProps> = ({ ...props }) => {
   const intl = useIntl();
-  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value);
+  const { theme, setTheme, resolvedTheme } = usePrismTheme();
+
+  /**
+   * Check if the resolved or chosen theme is dark theme.
+   *
+   * @returns {boolean} True if it is dark theme.
+   */
+  const isDarkTheme = (): boolean => {
+    if (theme === 'system') return resolvedTheme === 'dark';
+    return theme === 'dark';
+  };
+
+  /**
+   * Update the theme.
+   */
+  const updateTheme = () => {
+    setTheme(isDarkTheme() ? 'light' : 'dark');
+  };
+
   const themeLabel = intl.formatMessage({
     defaultMessage: 'Code blocks:',
     description: 'PrismThemeToggle: theme label',
@@ -47,8 +63,8 @@ const PrismThemeToggle: FC<PrismThemeToggleProps> = ({ value, ...props }) => {
       label={themeLabel}
       labelSize="medium"
       choices={themeChoices}
-      value={isDarkTheme}
-      setValue={setIsDarkTheme}
+      value={isDarkTheme()}
+      setValue={updateTheme}
       {...props}
     />
   );
diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx
index 05d94b9..5ebf5a2 100644
--- a/src/components/molecules/forms/theme-toggle.stories.tsx
+++ b/src/components/molecules/forms/theme-toggle.stories.tsx
@@ -1,5 +1,4 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IntlProvider } from 'react-intl';
 import ThemeToggle from './theme-toggle';
 
 /**
@@ -22,24 +21,7 @@ export default {
         required: false,
       },
     },
-    value: {
-      control: {
-        type: null,
-      },
-      description: 'The theme value.',
-      type: {
-        name: 'boolean',
-        required: true,
-      },
-    },
   },
-  decorators: [
-    (Story) => (
-      <IntlProvider locale="en">
-        <Story />
-      </IntlProvider>
-    ),
-  ],
 } as ComponentMeta<typeof ThemeToggle>;
 
 const Template: ComponentStory<typeof ThemeToggle> = (args) => (
@@ -50,6 +32,3 @@ const Template: ComponentStory<typeof ThemeToggle> = (args) => (
  * Toggle Stories - Theme
  */
 export const Theme = Template.bind({});
-Theme.args = {
-  value: false,
-};
diff --git a/src/components/molecules/forms/theme-toggle.test.tsx b/src/components/molecules/forms/theme-toggle.test.tsx
index 5cd3209..89b4f6f 100644
--- a/src/components/molecules/forms/theme-toggle.test.tsx
+++ b/src/components/molecules/forms/theme-toggle.test.tsx
@@ -3,7 +3,7 @@ import ThemeToggle from './theme-toggle';
 
 describe('ThemeToggle', () => {
   it('renders a checked toggle (dark theme choice)', () => {
-    render(<ThemeToggle value={true} />);
+    render(<ThemeToggle />);
     expect(
       screen.getByRole('checkbox', {
         name: `Theme: Light theme Dark theme`,
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index 10c6c47..61ee4c6 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -4,19 +4,29 @@ import Toggle, {
   type ToggleChoices,
   type ToggleProps,
 } from '@components/molecules/forms/toggle';
-import { FC, useState } from 'react';
+import { useTheme } from 'next-themes';
+import { FC } from 'react';
 import { useIntl } from 'react-intl';
 
-export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName' | 'value'>;
+export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName'>;
 
 /**
  * ThemeToggle component
  *
  * Render a Toggle component to set theme.
  */
-const ThemeToggle: FC<ThemeToggleProps> = ({ value, ...props }) => {
+const ThemeToggle: FC<ThemeToggleProps> = ({ ...props }) => {
   const intl = useIntl();
-  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(value);
+  const { resolvedTheme, setTheme } = useTheme();
+  const isDarkTheme = resolvedTheme === 'dark';
+
+  /**
+   * Update the theme.
+   */
+  const updateTheme = () => {
+    setTheme(isDarkTheme ? 'light' : 'dark');
+  };
+
   const themeLabel = intl.formatMessage({
     defaultMessage: 'Theme:',
     description: 'ThemeToggle: theme label',
@@ -45,7 +55,7 @@ const ThemeToggle: FC<ThemeToggleProps> = ({ value, ...props }) => {
       labelSize="medium"
       choices={themeChoices}
       value={isDarkTheme}
-      setValue={setIsDarkTheme}
+      setValue={updateTheme}
       {...props}
     />
   );
diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx
index beb65ec..43d546e 100644
--- a/src/components/organisms/forms/settings-form.test.tsx
+++ b/src/components/organisms/forms/settings-form.test.tsx
@@ -1,37 +1,65 @@
 import { render, screen } from '@test-utils';
 import SettingsForm from './settings-form';
 
+const ackeeStorageKey = 'ackee-tracking';
+const motionStorageKey = 'reduce-motion';
+
 describe('SettingsForm', () => {
   it('renders a form', () => {
-    render(<SettingsForm />);
+    render(
+      <SettingsForm
+        ackeeStorageKey={ackeeStorageKey}
+        motionStorageKey={motionStorageKey}
+      />
+    );
     expect(
       screen.getByRole('form', { name: /^Settings form/i })
     ).toBeInTheDocument();
   });
 
   it('renders a theme toggle setting', () => {
-    render(<SettingsForm />);
+    render(
+      <SettingsForm
+        ackeeStorageKey={ackeeStorageKey}
+        motionStorageKey={motionStorageKey}
+      />
+    );
     expect(
       screen.getByRole('checkbox', { name: /^Theme:/i })
     ).toBeInTheDocument();
   });
 
   it('renders a code blocks toggle setting', () => {
-    render(<SettingsForm />);
+    render(
+      <SettingsForm
+        ackeeStorageKey={ackeeStorageKey}
+        motionStorageKey={motionStorageKey}
+      />
+    );
     expect(
       screen.getByRole('checkbox', { name: /^Code blocks:/i })
     ).toBeInTheDocument();
   });
 
   it('renders a motion setting', () => {
-    render(<SettingsForm />);
+    render(
+      <SettingsForm
+        ackeeStorageKey={ackeeStorageKey}
+        motionStorageKey={motionStorageKey}
+      />
+    );
     expect(
       screen.getByRole('checkbox', { name: /^Animations:/i })
     ).toBeInTheDocument();
   });
 
   it('renders a Ackee setting', () => {
-    render(<SettingsForm />);
+    render(
+      <SettingsForm
+        ackeeStorageKey={ackeeStorageKey}
+        motionStorageKey={motionStorageKey}
+      />
+    );
     expect(
       screen.getByRole('combobox', { name: /^Tracking:/i })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx
index 0a34601..c897fa5 100644
--- a/src/components/organisms/forms/settings-form.tsx
+++ b/src/components/organisms/forms/settings-form.tsx
@@ -2,16 +2,31 @@ import Form from '@components/atoms/forms/form';
 import AckeeSelect, {
   type AckeeSelectProps,
 } from '@components/molecules/forms/ackee-select';
-import MotionToggle from '@components/molecules/forms/motion-toggle';
+import MotionToggle, {
+  MotionToggleProps,
+} from '@components/molecules/forms/motion-toggle';
 import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle';
 import ThemeToggle from '@components/molecules/forms/theme-toggle';
 import { FC } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './settings-form.module.scss';
 
-export type SettingsFormProps = Pick<AckeeSelectProps, 'tooltipClassName'>;
+export type SettingsFormProps = Pick<AckeeSelectProps, 'tooltipClassName'> & {
+  /**
+   * The local storage key for Ackee settings.
+   */
+  ackeeStorageKey: AckeeSelectProps['storageKey'];
+  /**
+   * The local storage key for Reduce motion settings.
+   */
+  motionStorageKey: MotionToggleProps['storageKey'];
+};
 
-const SettingsForm: FC<SettingsFormProps> = ({ tooltipClassName }) => {
+const SettingsForm: FC<SettingsFormProps> = ({
+  ackeeStorageKey,
+  motionStorageKey,
+  tooltipClassName,
+}) => {
   const intl = useIntl();
   const ariaLabel = intl.formatMessage({
     defaultMessage: 'Settings form',
@@ -21,13 +36,18 @@ const SettingsForm: FC<SettingsFormProps> = ({ tooltipClassName }) => {
 
   return (
     <Form aria-label={ariaLabel} onSubmit={() => null}>
-      <ThemeToggle labelClassName={styles.label} value={false} />
-      <PrismThemeToggle labelClassName={styles.label} value={false} />
-      <MotionToggle labelClassName={styles.label} value={false} />
+      <ThemeToggle labelClassName={styles.label} />
+      <PrismThemeToggle labelClassName={styles.label} />
+      <MotionToggle
+        labelClassName={styles.label}
+        storageKey={motionStorageKey}
+        value={false}
+      />
       <AckeeSelect
         initialValue="full"
         labelClassName={styles.label}
         tooltipClassName={tooltipClassName}
+        storageKey={ackeeStorageKey}
       />
     </Form>
   );
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx
index 98d6377..3ceb337 100644
--- a/src/components/organisms/layout/header.stories.tsx
+++ b/src/components/organisms/layout/header.stories.tsx
@@ -8,11 +8,23 @@ export default {
   title: 'Organisms/Layout',
   component: HeaderComponent,
   args: {
+    ackeeStorageKey: 'ackee-tracking',
     isHome: false,
+    motionStorageKey: 'reduced-motion',
     searchPage: '#',
     withLink: false,
   },
   argTypes: {
+    ackeeStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Ackee settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     baseline: {
       control: {
         type: 'text',
@@ -52,6 +64,16 @@ export default {
         required: false,
       },
     },
+    motionStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Reduced motion settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     nav: {
       description: 'The main navigation items.',
       type: {
diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/header.test.tsx
index a9896f8..414d96f 100644
--- a/src/components/organisms/layout/header.test.tsx
+++ b/src/components/organisms/layout/header.test.tsx
@@ -16,11 +16,13 @@ describe('Header', () => {
   it('renders the website title', () => {
     render(
       <Header
+        ackeeStorageKey="ackee-tracking"
+        isHome={true}
+        motionStorageKey="reduced-motion"
+        nav={nav}
+        photo={photo}
         searchPage="#"
         title={title}
-        photo={photo}
-        nav={nav}
-        isHome={true}
       />
     );
     expect(
@@ -29,7 +31,16 @@ describe('Header', () => {
   });
 
   it('renders the main nav', () => {
-    render(<Header searchPage="#" title={title} photo={photo} nav={nav} />);
+    render(
+      <Header
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        nav={nav}
+        photo={photo}
+        searchPage="#"
+        title={title}
+      />
+    );
     expect(screen.getByRole('navigation')).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx
index 18ebb31..f6212c3 100644
--- a/src/components/organisms/layout/header.tsx
+++ b/src/components/organisms/layout/header.tsx
@@ -6,7 +6,10 @@ import Toolbar, { type ToolbarProps } from '../toolbar/toolbar';
 import styles from './header.module.scss';
 
 export type HeaderProps = BrandingProps &
-  Pick<ToolbarProps, 'nav' | 'searchPage'> & {
+  Pick<
+    ToolbarProps,
+    'ackeeStorageKey' | 'motionStorageKey' | 'nav' | 'searchPage'
+  > & {
     /**
      * Set additional classnames to the header element.
      */
@@ -18,12 +21,25 @@ export type HeaderProps = BrandingProps &
  *
  * Render the website header.
  */
-const Header: FC<HeaderProps> = ({ className, nav, searchPage, ...props }) => {
+const Header: FC<HeaderProps> = ({
+  ackeeStorageKey,
+  className,
+  motionStorageKey,
+  nav,
+  searchPage,
+  ...props
+}) => {
   return (
     <header className={`${styles.wrapper} ${className}`}>
       <div className={styles.body}>
         <Branding {...props} />
-        <Toolbar nav={nav} searchPage={searchPage} className={styles.toolbar} />
+        <Toolbar
+          ackeeStorageKey={ackeeStorageKey}
+          className={styles.toolbar}
+          motionStorageKey={motionStorageKey}
+          nav={nav}
+          searchPage={searchPage}
+        />
       </div>
     </header>
   );
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
index e92bf1b..c731048 100644
--- a/src/components/organisms/modals/search-modal.tsx
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -10,6 +10,7 @@ const DynamicSearchForm = dynamic(
   () => import('@components/organisms/forms/search-form'),
   {
     loading: () => <Spinner />,
+    ssr: false,
   }
 );
 
diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx
index acbf7d1..d6ed989 100644
--- a/src/components/organisms/modals/settings-modal.test.tsx
+++ b/src/components/organisms/modals/settings-modal.test.tsx
@@ -3,7 +3,12 @@ import SettingsModal from './settings-modal';
 
 describe('SettingsModal', () => {
   it('renders a fake heading', () => {
-    render(<SettingsModal />);
+    render(
+      <SettingsModal
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduce-motion"
+      />
+    );
     expect(screen.getByText(/Settings/i)).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index e724076..5d14836 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -10,11 +10,15 @@ const DynamicSettingsForm = dynamic(
   () => import('@components/organisms/forms/settings-form'),
   {
     loading: () => <Spinner />,
+    ssr: false,
   }
 );
 
 export type SettingsModalProps = Pick<ModalProps, 'className'> &
-  Pick<SettingsFormProps, 'tooltipClassName'>;
+  Pick<
+    SettingsFormProps,
+    'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName'
+  >;
 
 /**
  * SettingsModal component
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index aab4b9e..9d04932 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -8,7 +8,21 @@ import Settings from './settings';
 export default {
   title: 'Organisms/Toolbar/Settings',
   component: Settings,
+  args: {
+    ackeeStorageKey: 'ackee-tracking',
+    motionStorageKey: 'reduced-motion',
+  },
   argTypes: {
+    ackeeStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Ackee settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     className: {
       control: {
         type: 'text',
@@ -32,6 +46,16 @@ export default {
         required: true,
       },
     },
+    motionStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Reduced motion settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     setIsActive: {
       control: {
         type: null,
diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx
index 96a32c9..7ccb234 100644
--- a/src/components/organisms/toolbar/settings.test.tsx
+++ b/src/components/organisms/toolbar/settings.test.tsx
@@ -3,14 +3,28 @@ import Settings from './settings';
 
 describe('Settings', () => {
   it('renders a button to open settings modal', () => {
-    render(<Settings isActive={false} setIsActive={() => null} />);
+    render(
+      <Settings
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        isActive={false}
+        setIsActive={() => null}
+      />
+    );
     expect(
       screen.getByRole('checkbox', { name: 'Open settings' })
     ).toBeInTheDocument();
   });
 
   it('renders a button to close settings modal', () => {
-    render(<Settings isActive={true} setIsActive={() => null} />);
+    render(
+      <Settings
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        isActive={true}
+        setIsActive={() => null}
+      />
+    );
     expect(
       screen.getByRole('checkbox', { name: 'Close settings' })
     ).toBeInTheDocument();
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 43d3190..9985ba0 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,7 +1,7 @@
 import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
 import Label from '@components/atoms/forms/label';
 import Cog from '@components/atoms/icons/cog';
-import { FC, forwardRef, ForwardRefRenderFunction } from 'react';
+import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import SettingsModal, {
   type SettingsModalProps,
@@ -9,7 +9,10 @@ import SettingsModal, {
 import settingsStyles from './settings.module.scss';
 import sharedStyles from './toolbar-items.module.scss';
 
-export type SettingsProps = {
+export type SettingsProps = Pick<
+  SettingsModalProps,
+  'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName'
+> & {
   /**
    * Set additional classnames to the modal wrapper.
    */
@@ -22,14 +25,17 @@ export type SettingsProps = {
    * A callback function to handle button state.
    */
   setIsActive: CheckboxProps['setValue'];
-  /**
-   * Set additional classnames to the tooltip wrapper.
-   */
-  tooltipClassName?: SettingsModalProps['tooltipClassName'];
 };
 
 const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
-  { className = '', isActive, setIsActive, tooltipClassName = '' },
+  {
+    ackeeStorageKey,
+    className = '',
+    isActive,
+    motionStorageKey,
+    setIsActive,
+    tooltipClassName = '',
+  },
   ref
 ) => {
   const intl = useIntl();
@@ -62,7 +68,9 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
         <Cog />
       </Label>
       <SettingsModal
+        ackeeStorageKey={ackeeStorageKey}
         className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`}
+        motionStorageKey={motionStorageKey}
         tooltipClassName={tooltipClassName}
       />
     </div>
diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss
index c970b71..20abe01 100644
--- a/src/components/organisms/toolbar/toolbar-items.module.scss
+++ b/src/components/organisms/toolbar/toolbar-items.module.scss
@@ -22,7 +22,7 @@
 .modal {
   position: absolute;
   top: var(--toolbar-size, calc(var(--btn-size) + var(--spacing-2xs)));
-  transition: all 0.8s ease-in-out 0s;
+  transition: all 0.8s ease-in-out 0s, background 0s;
 
   @include mix.media("screen") {
     @include mix.dimensions(null, "sm") {
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
index 477cb55..1f07e79 100644
--- a/src/components/organisms/toolbar/toolbar.stories.tsx
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -8,9 +8,21 @@ export default {
   title: 'Organisms/Toolbar',
   component: ToolbarComponent,
   args: {
+    ackeeStorageKey: 'ackee-tracking',
+    motionStorageKey: 'reduced-motion',
     searchPage: '#',
   },
   argTypes: {
+    ackeeStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Ackee settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     className: {
       control: {
         type: 'text',
@@ -24,6 +36,16 @@ export default {
         required: false,
       },
     },
+    motionStorageKey: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set Reduced motion settings local storage key.',
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
     nav: {
       description: 'The main nav items.',
       type: {
diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx
index 05e84ff..72965e8 100644
--- a/src/components/organisms/toolbar/toolbar.test.tsx
+++ b/src/components/organisms/toolbar/toolbar.test.tsx
@@ -10,7 +10,14 @@ const nav = [
 
 describe('Toolbar', () => {
   it('renders a navigation menu', () => {
-    render(<Toolbar nav={nav} searchPage="#" />);
+    render(
+      <Toolbar
+        ackeeStorageKey="ackee-tracking"
+        motionStorageKey="reduced-motion"
+        nav={nav}
+        searchPage="#"
+      />
+    );
     expect(screen.getByRole('navigation')).toBeInTheDocument();
   });
 });
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index e4188fe..e196c09 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -2,26 +2,33 @@ import useClickOutside from '@utils/hooks/use-click-outside';
 import { FC, useRef, useState } from 'react';
 import MainNav, { type MainNavProps } from '../toolbar/main-nav';
 import Search, { type SearchProps } from '../toolbar/search';
-import Settings from '../toolbar/settings';
+import Settings, { SettingsProps } from '../toolbar/settings';
 import styles from './toolbar.module.scss';
 
-export type ToolbarProps = Pick<SearchProps, 'searchPage'> & {
-  /**
-   * Set additional classnames to the toolbar wrapper.
-   */
-  className?: string;
-  /**
-   * The main nav items.
-   */
-  nav: MainNavProps['items'];
-};
+export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
+  Pick<SettingsProps, 'ackeeStorageKey' | 'motionStorageKey'> & {
+    /**
+     * Set additional classnames to the toolbar wrapper.
+     */
+    className?: string;
+    /**
+     * The main nav items.
+     */
+    nav: MainNavProps['items'];
+  };
 
 /**
  * Toolbar component
  *
  * Render the website toolbar.
  */
-const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => {
+const Toolbar: FC<ToolbarProps> = ({
+  ackeeStorageKey,
+  className = '',
+  motionStorageKey,
+  nav,
+  searchPage,
+}) => {
   const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
   const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
   const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
@@ -53,11 +60,13 @@ const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => {
         ref={searchRef}
       />
       <Settings
+        ackeeStorageKey={ackeeStorageKey}
+        className={`${styles.modal} ${styles['modal--settings']}`}
         isActive={isSettingsOpened}
+        motionStorageKey={motionStorageKey}
+        ref={settingsRef}
         setIsActive={setIsSettingsOpened}
-        className={`${styles.modal} ${styles['modal--settings']}`}
         tooltipClassName={styles.tooltip}
-        ref={settingsRef}
       />
     </div>
   );
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index 559eaed..8f0d4e7 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -193,14 +193,16 @@ const Layout: FC<LayoutProps> = ({
         {skipToContent}
       </ButtonLink>
       <Header
-        title={name}
+        ackeeStorageKey="ackee-tracking"
         baseline={baseline}
-        photo={picture}
+        className={styles.header}
+        isHome={isHome}
+        motionStorageKey="reduced-motion"
         nav={mainNav}
+        photo={picture}
         searchPage="/recherche"
-        isHome={isHome}
+        title={name}
         withLink={true}
-        className={styles.header}
       />
       <Main id="main" className={styles.main}>
         <article
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index d171944..54b8d6e 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -20,6 +20,7 @@ import CommentsList, {
 import TableOfContents from '@components/organisms/widgets/table-of-contents';
 import { type SendCommentVars } from '@services/graphql/api';
 import { sendComment } from '@services/graphql/comments';
+import useCodeBlocksTheme from '@utils/hooks/use-code-blocks-theme';
 import useIsMounted from '@utils/hooks/use-is-mounted';
 import Script from 'next/script';
 import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
@@ -183,6 +184,8 @@ const PageLayout: FC<PageLayoutProps> = ({
     return Object.values(meta).every((value) => value === null);
   };
 
+  useCodeBlocksTheme(bodyRef);
+
   return (
     <>
       <Script
diff --git a/src/services/local-storage/index.ts b/src/services/local-storage/index.ts
index 8ed9ebf..65235a7 100644
--- a/src/services/local-storage/index.ts
+++ b/src/services/local-storage/index.ts
@@ -1,15 +1,15 @@
 export const LocalStorage = {
-  get(key: string): string | null | undefined {
+  get<T>(key: string): T | undefined {
     try {
       const serialItem = localStorage.getItem(key);
       if (!serialItem) return undefined;
-      return JSON.parse(serialItem);
+      return JSON.parse(serialItem) as T;
     } catch (e) {
       console.log(e);
       return undefined;
     }
   },
-  set(key: string, value: string) {
+  set<T>(key: string, value: T) {
     try {
       const serialItem = JSON.stringify(value);
       localStorage.setItem(key, serialItem);
diff --git a/src/utils/hooks/use-attributes.tsx b/src/utils/hooks/use-attributes.tsx
new file mode 100644
index 0000000..97a7b43
--- /dev/null
+++ b/src/utils/hooks/use-attributes.tsx
@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+export type useAttributesProps = {
+  /**
+   * An HTML element.
+   */
+  element?: HTMLElement;
+  /**
+   * The attribute name.
+   */
+  attribute: string;
+  /**
+   * The attribute value.
+   */
+  value: string;
+};
+
+/**
+ * Set HTML attributes to the given element or to the HTML document.
+ *
+ * @param props - An object with element, attribute name and value.
+ */
+const useAttributes = ({ element, attribute, value }: useAttributesProps) => {
+  useEffect(() => {
+    if (element) {
+      element.dataset[attribute] = value;
+    } else {
+      document.documentElement.dataset[attribute] = value;
+    }
+  }, [attribute, element, value]);
+};
+
+export default useAttributes;
diff --git a/src/utils/hooks/use-code-blocks-theme.tsx b/src/utils/hooks/use-code-blocks-theme.tsx
new file mode 100644
index 0000000..beb7b29
--- /dev/null
+++ b/src/utils/hooks/use-code-blocks-theme.tsx
@@ -0,0 +1,22 @@
+import { usePrismTheme } from '@utils/providers/prism-theme';
+import { useRouter } from 'next/router';
+import { RefObject, useEffect, useState } from 'react';
+import useIsMounted from './use-is-mounted';
+
+const useCodeBlocksTheme = (el: RefObject<HTMLDivElement>) => {
+  const [preElements, setPreElements] = useState<NodeListOf<HTMLPreElement>>();
+  const isMounted = useIsMounted(el);
+  const { setCodeBlocks } = usePrismTheme();
+  const { asPath } = useRouter();
+
+  useEffect(() => {
+    const result = document.querySelectorAll<HTMLPreElement>('pre');
+    setPreElements(result);
+  }, [asPath]);
+
+  useEffect(() => {
+    isMounted && preElements && setCodeBlocks(preElements);
+  }, [isMounted, preElements, setCodeBlocks]);
+};
+
+export default useCodeBlocksTheme;
diff --git a/src/utils/hooks/use-local-storage.tsx b/src/utils/hooks/use-local-storage.tsx
new file mode 100644
index 0000000..da0292b
--- /dev/null
+++ b/src/utils/hooks/use-local-storage.tsx
@@ -0,0 +1,35 @@
+import { LocalStorage } from '@services/local-storage';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+export type UseLocalStorageReturn<T> = {
+  value: T;
+  setValue: Dispatch<SetStateAction<T>>;
+};
+
+/**
+ * Use the local storage.
+ *
+ * @param {string} key - The storage local key.
+ * @param {T} [fallbackValue] - A fallback value if local storage is empty.
+ * @returns {UseLocalStorageReturn<T>} An object with value and setValue.
+ */
+const useLocalStorage = <T extends unknown>(
+  key: string,
+  fallbackValue: T
+): UseLocalStorageReturn<T> => {
+  const getInitialValue = () => {
+    if (typeof window === 'undefined') return fallbackValue;
+    const storedValue = LocalStorage.get<T>(key);
+    return storedValue || fallbackValue;
+  };
+
+  const [value, setValue] = useState<T>(getInitialValue);
+
+  useEffect(() => {
+    LocalStorage.set(key, value);
+  }, [key, value]);
+
+  return { value, setValue };
+};
+
+export default useLocalStorage;
diff --git a/src/utils/hooks/use-query-selector-all.tsx b/src/utils/hooks/use-query-selector-all.tsx
new file mode 100644
index 0000000..dbeec90
--- /dev/null
+++ b/src/utils/hooks/use-query-selector-all.tsx
@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+
+const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
+  query: string
+) => {
+  const [elements, setElements] =
+    useState<NodeListOf<HTMLElementTagNameMap[T]>>();
+
+  useEffect(() => {
+    setElements(document.querySelectorAll(query));
+  }, [query]);
+
+  return elements;
+};
+
+export default useQuerySelectorAll;
diff --git a/src/utils/hooks/use-update-ackee-options.tsx b/src/utils/hooks/use-update-ackee-options.tsx
new file mode 100644
index 0000000..7c1d98a
--- /dev/null
+++ b/src/utils/hooks/use-update-ackee-options.tsx
@@ -0,0 +1,19 @@
+import { useAckeeTracker } from '@utils/providers/ackee';
+import { useEffect } from 'react';
+
+export type AckeeOptions = 'full' | 'partial';
+
+/**
+ * Update Ackee settings with the given choice.
+ *
+ * @param {AckeeOptions} value - Either `full` or `partial`.
+ */
+const useUpdateAckeeOptions = (value: AckeeOptions) => {
+  const { setDetailed } = useAckeeTracker();
+
+  useEffect(() => {
+    setDetailed(value === 'full');
+  }, [value, setDetailed]);
+};
+
+export default useUpdateAckeeOptions;
diff --git a/src/utils/providers/prism-theme.tsx b/src/utils/providers/prism-theme.tsx
index 62bcf56..23a2a36 100644
--- a/src/utils/providers/prism-theme.tsx
+++ b/src/utils/providers/prism-theme.tsx
@@ -55,7 +55,7 @@ const isValidTheme = (theme: string): boolean => {
 
 const getTheme = (key: string): PrismTheme | undefined => {
   if (typeof window === 'undefined') return undefined;
-  const storageValue = LocalStorage.get(key);
+  const storageValue = LocalStorage.get<string>(key);
 
   return storageValue && isValidTheme(storageValue)
     ? (storageValue as PrismTheme)
-- 
cgit v1.2.3


From bbd63400f94b43fde04449e0c71d14763d893e6a Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 19 May 2022 19:46:24 +0200
Subject: refactor: rewrite Prism hooks and providers

It avoid some hydratation errors on project pages (not in article
however) and the hooks are now reusable.
---
 src/components/molecules/forms/motion-toggle.tsx |   3 +-
 src/components/molecules/layout/code.tsx         |  25 +---
 src/components/templates/page/page-layout.tsx    |   5 +-
 src/pages/article/[slug].tsx                     |  54 +++++--
 src/styles/pages/partials/_article-prism.scss    |   2 +-
 src/utils/helpers/strings.ts                     |  10 ++
 src/utils/hooks/use-add-classname.tsx            |  34 +++++
 src/utils/hooks/use-add-prism-class-attr.tsx     |  60 --------
 src/utils/hooks/use-attributes.tsx               |  35 ++++-
 src/utils/hooks/use-code-blocks-theme.tsx        |  22 ---
 src/utils/hooks/use-prism-plugins.tsx            | 115 --------------
 src/utils/hooks/use-prism.tsx                    | 182 +++++++++++++++++++++++
 src/utils/hooks/use-query-selector-all.tsx       |  12 +-
 src/utils/providers/prism-theme.tsx              |  78 ++++------
 14 files changed, 346 insertions(+), 291 deletions(-)
 create mode 100644 src/utils/hooks/use-add-classname.tsx
 delete mode 100644 src/utils/hooks/use-add-prism-class-attr.tsx
 delete mode 100644 src/utils/hooks/use-code-blocks-theme.tsx
 delete mode 100644 src/utils/hooks/use-prism-plugins.tsx
 create mode 100644 src/utils/hooks/use-prism.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx
index e3bb11a..cbe38fe 100644
--- a/src/components/molecules/forms/motion-toggle.tsx
+++ b/src/components/molecules/forms/motion-toggle.tsx
@@ -33,7 +33,8 @@ const MotionToggle: FC<MotionToggleProps> = ({
     value
   );
   useAttributes({
-    attribute: 'reducedMotion',
+    element: document.documentElement || undefined,
+    attribute: 'reduced-motion',
     value: `${isReduced}`,
   });
 
diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx
index 2959ae5..f5b60b9 100644
--- a/src/components/molecules/layout/code.tsx
+++ b/src/components/molecules/layout/code.tsx
@@ -1,7 +1,5 @@
-import usePrismPlugins, {
-  type PrismPlugin,
-} from '@utils/hooks/use-prism-plugins';
-import { FC } from 'react';
+import usePrism, { OptionalPrismPlugin } from '@utils/hooks/use-prism';
+import { FC, useRef } from 'react';
 import styles from './code.module.scss';
 
 export type PrismLanguage =
@@ -35,15 +33,6 @@ export type PrismLanguage =
   | 'twig'
   | 'yaml';
 
-export type OptionalPrismPlugin = Extract<
-  PrismPlugin,
-  | 'command-line'
-  | 'diff-highlight'
-  | 'inline-color'
-  | 'line-highlight'
-  | 'line-numbers'
->;
-
 export type CodeProps = {
   /**
    * The code to highlight.
@@ -79,17 +68,19 @@ const Code: FC<CodeProps> = ({
   plugins = [],
   outputPattern = '#output#',
 }) => {
-  const { pluginsAttribute, pluginsClassName } = usePrismPlugins(plugins);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const { attributes, className } = usePrism({ language, plugins });
 
   const outputAttribute = filterOutput
     ? { 'data-filter-output': outputPattern }
     : {};
 
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} ref={wrapperRef}>
       <pre
-        className={`language-${language} ${pluginsClassName}`}
-        {...pluginsAttribute}
+        className={className}
+        tabIndex={0}
+        {...attributes}
         {...outputAttribute}
       >
         <code className={`language-${language}`}>{children}</code>
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index 54b8d6e..8ff44d5 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -20,7 +20,6 @@ import CommentsList, {
 import TableOfContents from '@components/organisms/widgets/table-of-contents';
 import { type SendCommentVars } from '@services/graphql/api';
 import { sendComment } from '@services/graphql/comments';
-import useCodeBlocksTheme from '@utils/hooks/use-code-blocks-theme';
 import useIsMounted from '@utils/hooks/use-is-mounted';
 import Script from 'next/script';
 import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
@@ -181,11 +180,9 @@ const PageLayout: FC<PageLayoutProps> = ({
    * @param {MetaData} meta - The metadata.
    */
   const hasMeta = (meta: MetaData) => {
-    return Object.values(meta).every((value) => value === null);
+    return Object.values(meta).every((value) => value);
   };
 
-  useCodeBlocksTheme(bodyRef);
-
   return (
     <>
       <Script
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index a3df43b..7abbabc 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -18,11 +18,11 @@ import {
   type NextPageWithLayout,
 } from '@ts/types/app';
 import { loadTranslation, type Messages } from '@utils/helpers/i18n';
-import useAddPrismClassAttr from '@utils/hooks/use-add-prism-class-attr';
+import useAddClassName from '@utils/hooks/use-add-classname';
+import useAttributes from '@utils/hooks/use-attributes';
 import useBreadcrumb from '@utils/hooks/use-breadcrumb';
-import usePrismPlugins, {
-  type PrismPlugin,
-} from '@utils/hooks/use-prism-plugins';
+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';
@@ -199,14 +199,40 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
     });
   };
 
-  const prismPlugins: PrismPlugin[] = ['command-line', 'line-numbers'];
-  const { pluginsAttribute, pluginsClassName } = usePrismPlugins(prismPlugins);
-  useAddPrismClassAttr({
-    attributes: {
-      'data-filter-output': '#output#"',
-    },
-    classNames: pluginsClassName,
-  });
+  const prismPlugins: OptionalPrismPlugin[] = ['command-line', 'line-numbers'];
+  const { attributes, className } = usePrism({ plugins: prismPlugins });
+  const lineNumbersClassName = className
+    .replace('command-line', '')
+    .replace(/\s\s+/g, ' ');
+  const commandLineClassName = className
+    .replace('line-numbers', '')
+    .replace(/\s\s+/g, ' ');
+
+  /**
+   * Replace a string with Prism classnames and attributes.
+   *
+   * @param {string} str - The found string.
+   * @returns {string} The classes and attributes.
+   */
+  const prismClassNameReplacer = (str: string): string => {
+    const wpBlockClassName = 'wp-block-code';
+    const languageArray = str.match(/language-[^\s|"]+/);
+    const languageClassName = languageArray ? `${languageArray[0]}` : '';
+
+    if (
+      str.includes('command-line') ||
+      (!str.includes('command-line') && str.includes('language-bash'))
+    ) {
+      return `class="${wpBlockClassName} ${commandLineClassName}${languageClassName}" tabindex="0" data-filter-output="#output#`;
+    }
+
+    return `class="${wpBlockClassName} ${lineNumbersClassName}${languageClassName}" tabindex="0`;
+  };
+
+  const contentWithPrismClasses = content.replaceAll(
+    /class="wp-block-code[^"]+/gm,
+    prismClassNameReplacer
+  );
 
   return (
     <>
@@ -226,7 +252,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
       <PageLayout
         allowComments={true}
         bodyAttributes={{
-          ...(pluginsAttribute as HTMLAttributes<HTMLDivElement>),
+          ...(attributes as HTMLAttributes<HTMLDivElement>),
         }}
         bodyClassName={styles.body}
         breadcrumb={breadcrumbItems}
@@ -254,7 +280,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
           />,
         ]}
       >
-        {content}
+        {contentWithPrismClasses}
       </PageLayout>
     </>
   );
diff --git a/src/styles/pages/partials/_article-prism.scss b/src/styles/pages/partials/_article-prism.scss
index 025e0c0..5412bbd 100644
--- a/src/styles/pages/partials/_article-prism.scss
+++ b/src/styles/pages/partials/_article-prism.scss
@@ -238,7 +238,7 @@
       > span {
         &::before {
           display: block;
-          content: "";
+          content: " ";
         }
 
         &[data-user]::before {
diff --git a/src/utils/helpers/strings.ts b/src/utils/helpers/strings.ts
index 5d90161..1af0ca2 100644
--- a/src/utils/helpers/strings.ts
+++ b/src/utils/helpers/strings.ts
@@ -27,3 +27,13 @@ export const slugify = (text: string): string => {
 export const capitalize = (text: string): string => {
   return text.replace(/^\w/, (firstLetter) => firstLetter.toUpperCase());
 };
+
+/**
+ * Convert a text from kebab case (foo-bar) to camel case (fooBar).
+ *
+ * @param {string} text - A text to transform.
+ * @returns {string} The text in camel case.
+ */
+export const fromKebabCaseToCamelCase = (text: string): string => {
+  return text.replace(/-./g, (x) => x[1].toUpperCase());
+};
diff --git a/src/utils/hooks/use-add-classname.tsx b/src/utils/hooks/use-add-classname.tsx
new file mode 100644
index 0000000..0584084
--- /dev/null
+++ b/src/utils/hooks/use-add-classname.tsx
@@ -0,0 +1,34 @@
+import { useCallback, useEffect } from 'react';
+
+export type UseAddClassNameProps = {
+  className: string;
+  element?: HTMLElement;
+  elements?: NodeListOf<HTMLElement> | HTMLElement[];
+};
+
+/**
+ * Add className to the given element(s).
+ *
+ * @param {UseAddClassNameProps} props - An object with classnames and one or more elements.
+ */
+const useAddClassName = ({
+  className,
+  element,
+  elements,
+}: UseAddClassNameProps) => {
+  const classNames = className.split(' ').filter((string) => string !== '');
+
+  const setClassName = useCallback(
+    (el: HTMLElement) => {
+      el.classList.add(...classNames);
+    },
+    [classNames]
+  );
+
+  useEffect(() => {
+    if (element) setClassName(element);
+    if (elements && elements.length > 0) elements.forEach(setClassName);
+  }, [element, elements, setClassName]);
+};
+
+export default useAddClassName;
diff --git a/src/utils/hooks/use-add-prism-class-attr.tsx b/src/utils/hooks/use-add-prism-class-attr.tsx
deleted file mode 100644
index 7d33cc2..0000000
--- a/src/utils/hooks/use-add-prism-class-attr.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-
-export type AttributesMap = {
-  [key: string]: string;
-};
-
-export type useAddPrismClassAttrProps = {
-  attributes?: AttributesMap;
-  classNames?: string;
-};
-
-/**
- * Add classnames and/or attributes to pre elements.
- *
- * @param props - An object of attributes and classnames.
- */
-const useAddPrismClassAttr = ({
-  attributes,
-  classNames,
-}: useAddPrismClassAttrProps) => {
-  const [elements, setElements] = useState<HTMLPreElement[]>([]);
-
-  useEffect(() => {
-    const targetElements = document.querySelectorAll('pre');
-    setElements(Array.from(targetElements));
-  }, []);
-
-  const setClassNameAndAttributes = useCallback(
-    (array: HTMLElement[]) => {
-      array.forEach((el) => {
-        if (classNames) {
-          const classNamesArray = classNames.split(' ');
-          const isCommandLine = el.classList.contains('command-line');
-          const removedClassName = isCommandLine
-            ? 'line-numbers'
-            : 'command-line';
-          const filteredClassNames = classNamesArray.filter(
-            (className) => className !== removedClassName
-          );
-          filteredClassNames.forEach((className) =>
-            el.classList.add(className)
-          );
-        }
-
-        if (attributes) {
-          for (const [key, value] of Object.entries(attributes)) {
-            el.setAttribute(key, value);
-          }
-        }
-      });
-    },
-    [attributes, classNames]
-  );
-
-  useEffect(() => {
-    if (elements.length > 0) setClassNameAndAttributes(elements);
-  }, [elements, setClassNameAndAttributes]);
-};
-
-export default useAddPrismClassAttr;
diff --git a/src/utils/hooks/use-attributes.tsx b/src/utils/hooks/use-attributes.tsx
index 97a7b43..6d18048 100644
--- a/src/utils/hooks/use-attributes.tsx
+++ b/src/utils/hooks/use-attributes.tsx
@@ -1,10 +1,15 @@
-import { useEffect } from 'react';
+import { fromKebabCaseToCamelCase } from '@utils/helpers/strings';
+import { useCallback, useEffect } from 'react';
 
 export type useAttributesProps = {
   /**
    * An HTML element.
    */
   element?: HTMLElement;
+  /**
+   * A node list of HTML Element.
+   */
+  elements?: NodeListOf<HTMLElement> | HTMLElement[];
   /**
    * The attribute name.
    */
@@ -20,14 +25,28 @@ export type useAttributesProps = {
  *
  * @param props - An object with element, attribute name and value.
  */
-const useAttributes = ({ element, attribute, value }: useAttributesProps) => {
+const useAttributes = ({
+  element,
+  elements,
+  attribute,
+  value,
+}: useAttributesProps) => {
+  const setAttribute = useCallback(
+    (el: HTMLElement) => {
+      if (attribute.startsWith('data')) {
+        el.setAttribute(attribute, value);
+      } else {
+        const camelCaseAttribute = fromKebabCaseToCamelCase(attribute);
+        el.dataset[camelCaseAttribute] = value;
+      }
+    },
+    [attribute, value]
+  );
+
   useEffect(() => {
-    if (element) {
-      element.dataset[attribute] = value;
-    } else {
-      document.documentElement.dataset[attribute] = value;
-    }
-  }, [attribute, element, value]);
+    if (element) setAttribute(element);
+    if (elements && elements.length > 0) elements.forEach(setAttribute);
+  }, [element, elements, setAttribute]);
 };
 
 export default useAttributes;
diff --git a/src/utils/hooks/use-code-blocks-theme.tsx b/src/utils/hooks/use-code-blocks-theme.tsx
deleted file mode 100644
index beb7b29..0000000
--- a/src/utils/hooks/use-code-blocks-theme.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { usePrismTheme } from '@utils/providers/prism-theme';
-import { useRouter } from 'next/router';
-import { RefObject, useEffect, useState } from 'react';
-import useIsMounted from './use-is-mounted';
-
-const useCodeBlocksTheme = (el: RefObject<HTMLDivElement>) => {
-  const [preElements, setPreElements] = useState<NodeListOf<HTMLPreElement>>();
-  const isMounted = useIsMounted(el);
-  const { setCodeBlocks } = usePrismTheme();
-  const { asPath } = useRouter();
-
-  useEffect(() => {
-    const result = document.querySelectorAll<HTMLPreElement>('pre');
-    setPreElements(result);
-  }, [asPath]);
-
-  useEffect(() => {
-    isMounted && preElements && setCodeBlocks(preElements);
-  }, [isMounted, preElements, setCodeBlocks]);
-};
-
-export default useCodeBlocksTheme;
diff --git a/src/utils/hooks/use-prism-plugins.tsx b/src/utils/hooks/use-prism-plugins.tsx
deleted file mode 100644
index c4959ac..0000000
--- a/src/utils/hooks/use-prism-plugins.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import Prism from 'prismjs';
-import { useEffect, useMemo } from 'react';
-import { useIntl } from 'react-intl';
-
-export type PrismPlugin =
-  | 'autoloader'
-  | 'color-scheme'
-  | 'command-line'
-  | 'copy-to-clipboard'
-  | 'diff-highlight'
-  | 'inline-color'
-  | 'line-highlight'
-  | 'line-numbers'
-  | 'match-braces'
-  | 'normalize-whitespace'
-  | 'show-language'
-  | 'toolbar';
-
-/**
- * Import and configure all given Prism plugins.
- *
- * @param {PrismPlugin[]} prismPlugins - The Prism plugins to activate.
- */
-const loadPrismPlugins = async (prismPlugins: PrismPlugin[]) => {
-  for (const plugin of prismPlugins) {
-    try {
-      if (plugin === 'color-scheme') {
-        await import(`@utils/plugins/prism-${plugin}`);
-      } else {
-        await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`);
-      }
-
-      if (plugin === 'autoloader') {
-        Prism.plugins.autoloader.languages_path = '/prism/';
-      }
-    } catch (error) {
-      console.error(
-        'usePrismPlugins: an error occurred while loading Prism plugins.'
-      );
-      console.error(error);
-    }
-  }
-};
-
-/**
- * Load both the given Prism plugins and the default plugins.
- *
- * @param {PrismPlugin[]} plugins - The Prism plugins to activate.
- */
-const usePrismPlugins = (plugins: PrismPlugin[]) => {
-  const intl = useIntl();
-
-  const copyText = intl.formatMessage({
-    defaultMessage: 'Copy',
-    description: 'usePrismPlugins: copy button text (not clicked)',
-    id: 'FIE/eC',
-  });
-  const copiedText = intl.formatMessage({
-    defaultMessage: 'Copied!',
-    description: 'usePrismPlugins: copy button text (clicked)',
-    id: 'MzLdEl',
-  });
-  const errorText = intl.formatMessage({
-    defaultMessage: 'Use Ctrl+c to copy',
-    description: 'usePrismPlugins: copy button error text',
-    id: '0XePFn',
-  });
-  const darkTheme = intl.formatMessage({
-    defaultMessage: 'Dark Theme 🌙',
-    description: 'usePrismPlugins: toggle dark theme button text',
-    id: 'jo9vr5',
-  });
-  const lightTheme = intl.formatMessage({
-    defaultMessage: 'Light Theme 🌞',
-    description: 'usePrismPlugins: toggle light theme button text',
-    id: '6EUEtH',
-  });
-
-  const attributes = {
-    'data-prismjs-copy': copyText,
-    'data-prismjs-copy-success': copiedText,
-    'data-prismjs-copy-error': errorText,
-    'data-prismjs-color-scheme-dark': darkTheme,
-    'data-prismjs-color-scheme-light': lightTheme,
-  };
-
-  const defaultPlugins: PrismPlugin[] = useMemo(
-    () => [
-      'toolbar',
-      'autoloader',
-      'show-language',
-      'copy-to-clipboard',
-      'color-scheme',
-      'match-braces',
-      'normalize-whitespace',
-    ],
-    []
-  );
-
-  useEffect(() => {
-    loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
-      Prism.highlightAll();
-    });
-  }, [defaultPlugins, plugins]);
-
-  const defaultPluginsClasses = 'match-braces';
-  const pluginsClasses = plugins.join(' ');
-
-  return {
-    pluginsAttribute: attributes,
-    pluginsClassName: `${defaultPluginsClasses} ${pluginsClasses}`,
-  };
-};
-
-export default usePrismPlugins;
diff --git a/src/utils/hooks/use-prism.tsx b/src/utils/hooks/use-prism.tsx
new file mode 100644
index 0000000..ef1a4c8
--- /dev/null
+++ b/src/utils/hooks/use-prism.tsx
@@ -0,0 +1,182 @@
+import Prism from 'prismjs';
+import { useEffect, useMemo } from 'react';
+import { useIntl } from 'react-intl';
+
+const PRISM_PLUGINS = [
+  'autoloader',
+  'color-scheme',
+  'command-line',
+  'copy-to-clipboard',
+  'diff-highlight',
+  'inline-color',
+  'line-highlight',
+  'line-numbers',
+  'match-braces',
+  'normalize-whitespace',
+  'show-language',
+  'toolbar',
+] as const;
+
+export type PrismPlugin = typeof PRISM_PLUGINS[number];
+
+export type DefaultPrismPlugin = Extract<
+  PrismPlugin,
+  | 'autoloader'
+  | 'color-scheme'
+  | 'copy-to-clipboard'
+  | 'match-braces'
+  | 'normalize-whitespace'
+  | 'show-language'
+  | 'toolbar'
+>;
+
+export type OptionalPrismPlugin = Exclude<PrismPlugin, DefaultPrismPlugin>;
+
+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 PrismAttributes = {
+  'data-prismjs-copy': string;
+  'data-prismjs-copy-success': string;
+  'data-prismjs-copy-error': string;
+  'data-prismjs-color-scheme-dark': string;
+  'data-prismjs-color-scheme-light': string;
+};
+
+export type UsePrismProps = {
+  language?: PrismLanguage;
+  plugins: OptionalPrismPlugin[];
+};
+
+export type UsePrismReturn = {
+  attributes: PrismAttributes;
+  className: string;
+};
+
+/**
+ * Import and configure all given Prism plugins.
+ *
+ * @param {PrismPlugin[]} plugins - The Prism plugins to activate.
+ */
+const loadPrismPlugins = async (plugins: PrismPlugin[]) => {
+  for (const plugin of plugins) {
+    try {
+      if (plugin === 'color-scheme') {
+        await import(`@utils/plugins/prism-${plugin}`);
+      } else {
+        await import(`prismjs/plugins/${plugin}/prism-${plugin}.min.js`);
+      }
+
+      if (plugin === 'autoloader') {
+        Prism.plugins.autoloader.languages_path = '/prism/';
+      }
+    } catch (error) {
+      console.error('usePrism: an error occurred while loading Prism plugins.');
+      console.error(error);
+    }
+  }
+};
+
+/**
+ * Use Prism and its plugins.
+ *
+ * @param {UsePrismProps} props - An object of options.
+ * @returns {UsePrismReturn} An object of data.
+ */
+const usePrism = ({ language, plugins }: UsePrismProps): UsePrismReturn => {
+  /**
+   * The order matter. Toolbar must be loaded before some other plugins.
+   */
+  const defaultPlugins: DefaultPrismPlugin[] = useMemo(
+    () => [
+      'toolbar',
+      'autoloader',
+      'show-language',
+      'copy-to-clipboard',
+      'color-scheme',
+      'match-braces',
+      'normalize-whitespace',
+    ],
+    []
+  );
+
+  useEffect(() => {
+    loadPrismPlugins([...defaultPlugins, ...plugins]).then(() => {
+      Prism.highlightAll();
+    });
+  }, [defaultPlugins, plugins]);
+
+  const defaultClassName = 'match-braces';
+  const languageClassName = language ? `language-${language}` : '';
+  const pluginsClassName = plugins.join(' ');
+  const className = `${defaultClassName} ${pluginsClassName} ${languageClassName}`;
+
+  const intl = useIntl();
+  const copyText = intl.formatMessage({
+    defaultMessage: 'Copy',
+    description: 'usePrism: copy button text (not clicked)',
+    id: '6GySNl',
+  });
+  const copiedText = intl.formatMessage({
+    defaultMessage: 'Copied!',
+    description: 'usePrism: copy button text (clicked)',
+    id: 'nsw6Th',
+  });
+  const errorText = intl.formatMessage({
+    defaultMessage: 'Use Ctrl+c to copy',
+    description: 'usePrism: copy button error text',
+    id: 'lKhTGM',
+  });
+  const darkTheme = intl.formatMessage({
+    defaultMessage: 'Dark Theme 🌙',
+    description: 'usePrism: toggle dark theme button text',
+    id: 'QLisK6',
+  });
+  const lightTheme = intl.formatMessage({
+    defaultMessage: 'Light Theme 🌞',
+    description: 'usePrism: toggle light theme button text',
+    id: 'hHVgW3',
+  });
+  const attributes = {
+    'data-prismjs-copy': copyText,
+    'data-prismjs-copy-success': copiedText,
+    'data-prismjs-copy-error': errorText,
+    'data-prismjs-color-scheme-dark': darkTheme,
+    'data-prismjs-color-scheme-light': lightTheme,
+  };
+
+  return {
+    attributes,
+    className,
+  };
+};
+
+export default usePrism;
diff --git a/src/utils/hooks/use-query-selector-all.tsx b/src/utils/hooks/use-query-selector-all.tsx
index dbeec90..6ac8a08 100644
--- a/src/utils/hooks/use-query-selector-all.tsx
+++ b/src/utils/hooks/use-query-selector-all.tsx
@@ -1,14 +1,22 @@
+import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
+/**
+ * Use `document.querySelectorAll`.
+ *
+ * @param {string} query - A query.
+ * @returns {NodeListOf<HTMLElementTagNameMap[T]|undefined>} - The node list.
+ */
 const useQuerySelectorAll = <T extends keyof HTMLElementTagNameMap>(
   query: string
-) => {
+): NodeListOf<HTMLElementTagNameMap[T]> | undefined => {
   const [elements, setElements] =
     useState<NodeListOf<HTMLElementTagNameMap[T]>>();
+  const { asPath } = useRouter();
 
   useEffect(() => {
     setElements(document.querySelectorAll(query));
-  }, [query]);
+  }, [asPath, query]);
 
   return elements;
 };
diff --git a/src/utils/providers/prism-theme.tsx b/src/utils/providers/prism-theme.tsx
index 23a2a36..dd8feb7 100644
--- a/src/utils/providers/prism-theme.tsx
+++ b/src/utils/providers/prism-theme.tsx
@@ -1,4 +1,6 @@
-import { LocalStorage } from '@services/local-storage';
+import useAttributes from '@utils/hooks/use-attributes';
+import useLocalStorage from '@utils/hooks/use-local-storage';
+import useQuerySelectorAll from '@utils/hooks/use-query-selector-all';
 import {
   createContext,
   FC,
@@ -10,7 +12,7 @@ import {
 } from 'react';
 
 export type PrismTheme = 'dark' | 'light' | 'system';
-export type ResolvedPrismTheme = 'dark' | 'light';
+export type ResolvedPrismTheme = Exclude<PrismTheme, 'system'>;
 
 export type UsePrismThemeProps = {
   themes: PrismTheme[];
@@ -18,7 +20,6 @@ export type UsePrismThemeProps = {
   setTheme: (theme: PrismTheme) => void;
   resolvedTheme?: ResolvedPrismTheme;
   codeBlocks?: NodeListOf<HTMLPreElement>;
-  setCodeBlocks: (codeBlocks: NodeListOf<HTMLPreElement>) => void;
 };
 
 export type PrismThemeProviderProps = {
@@ -33,14 +34,16 @@ export const PrismThemeContext = createContext<UsePrismThemeProps>({
   setTheme: (_) => {
     // This is intentional.
   },
-  setCodeBlocks: (_) => {
-    // This is intentional.
-  },
 });
 
 export const usePrismTheme = () => useContext(PrismThemeContext);
 
-const prefersDarkScheme = () => {
+/**
+ * Check if user prefers dark color scheme.
+ *
+ * @returns {boolean|undefined} True if `prefers-color-scheme` is set to `dark`.
+ */
+const prefersDarkScheme = (): boolean | undefined => {
   if (typeof window === 'undefined') return;
 
   return (
@@ -49,40 +52,35 @@ const prefersDarkScheme = () => {
   );
 };
 
+/**
+ * Check if a given string is a Prism theme name.
+ *
+ * @param {string} theme - A string.
+ * @returns {boolean} True if the given string match a Prism theme name.
+ */
 const isValidTheme = (theme: string): boolean => {
   return theme === 'dark' || theme === 'light' || theme === 'system';
 };
 
-const getTheme = (key: string): PrismTheme | undefined => {
-  if (typeof window === 'undefined') return undefined;
-  const storageValue = LocalStorage.get<string>(key);
-
-  return storageValue && isValidTheme(storageValue)
-    ? (storageValue as PrismTheme)
-    : undefined;
-};
-
 export const PrismThemeProvider: FC<PrismThemeProviderProps> = ({
   attribute = 'data-prismjs-color-scheme-current',
   storageKey = 'prismjs-color-scheme',
   themes = ['dark', 'light', 'system'],
   children,
 }) => {
+  /**
+   * Retrieve the theme to use depending on `prefers-color-scheme`.
+   */
   const getThemeFromSystem = useCallback(() => {
     return prefersDarkScheme() ? 'dark' : 'light';
   }, []);
 
-  const [prismTheme, setPrismTheme] = useState<PrismTheme>(
-    getTheme(storageKey) || 'system'
-  );
-
-  const updateTheme = (theme: PrismTheme) => {
-    setPrismTheme(theme);
-  };
+  const { value: prismTheme, setValue: setPrismTheme } =
+    useLocalStorage<PrismTheme>(storageKey, 'system');
 
   useEffect(() => {
-    LocalStorage.set(storageKey, prismTheme);
-  }, [prismTheme, storageKey]);
+    if (!isValidTheme(prismTheme)) setPrismTheme('system');
+  }, [prismTheme, setPrismTheme]);
 
   const [resolvedTheme, setResolvedTheme] = useState<ResolvedPrismTheme>();
 
@@ -109,22 +107,12 @@ export const PrismThemeProvider: FC<PrismThemeProviderProps> = ({
         .removeEventListener('change', updateResolvedTheme);
   }, [updateResolvedTheme]);
 
-  const [preTags, setPreTags] = useState<NodeListOf<HTMLPreElement>>();
-
-  const updatePreTags = useCallback((tags: NodeListOf<HTMLPreElement>) => {
-    setPreTags(tags);
-  }, []);
-
-  const updatePreTagsAttribute = useCallback(() => {
-    preTags?.forEach((pre) => {
-      pre.setAttribute(attribute, prismTheme);
-    });
-  }, [attribute, preTags, prismTheme]);
-
-  useEffect(() => {
-    updatePreTagsAttribute();
-  }, [updatePreTagsAttribute, prismTheme]);
+  const preTags = useQuerySelectorAll<'pre'>('pre');
+  useAttributes({ elements: preTags, attribute, value: prismTheme });
 
+  /**
+   * Listen for changes on pre attributes and update theme.
+   */
   const listenAttributeChange = useCallback(
     (pre: HTMLPreElement) => {
       var observer = new MutationObserver(function (mutations) {
@@ -139,15 +127,12 @@ export const PrismThemeProvider: FC<PrismThemeProviderProps> = ({
         attributeFilter: [attribute],
       });
     },
-    [attribute]
+    [attribute, setPrismTheme]
   );
 
   useEffect(() => {
     if (!preTags) return;
-
-    preTags.forEach((pre) => {
-      listenAttributeChange(pre);
-    });
+    preTags.forEach(listenAttributeChange);
   }, [preTags, listenAttributeChange]);
 
   return (
@@ -155,9 +140,8 @@ export const PrismThemeProvider: FC<PrismThemeProviderProps> = ({
       value={{
         themes,
         theme: prismTheme,
-        setTheme: updateTheme,
+        setTheme: setPrismTheme,
         codeBlocks: preTags,
-        setCodeBlocks: updatePreTags,
         resolvedTheme,
       }}
     >
-- 
cgit v1.2.3


From f4c7ab4e306d2f04324853e67032d370abd65d0c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 20 May 2022 15:37:08 +0200
Subject: chore: handle blog pagination when JS is disabled

---
 .../molecules/nav/pagination.module.scss           |   2 +-
 src/components/molecules/nav/pagination.tsx        |  10 +-
 src/components/organisms/layout/posts-list.tsx     |  95 +++++--
 src/pages/blog/index.tsx                           |   1 +
 src/pages/blog/page/[number].tsx                   | 311 +++++++++++++++++++++
 src/pages/recherche/index.tsx                      |   1 +
 src/pages/sujet/[slug].tsx                         |   1 +
 src/pages/thematique/[slug].tsx                    |   1 +
 src/services/graphql/api.ts                        |   9 +
 src/services/graphql/articles.query.ts             |  12 +
 src/services/graphql/articles.ts                   |  28 +-
 src/utils/hooks/use-breadcrumb.tsx                 |   3 +-
 src/utils/hooks/use-redirection.tsx                |  33 +++
 13 files changed, 472 insertions(+), 35 deletions(-)
 create mode 100644 src/pages/blog/page/[number].tsx
 create mode 100644 src/utils/hooks/use-redirection.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/molecules/nav/pagination.module.scss b/src/components/molecules/nav/pagination.module.scss
index a8cef47..56c5bfc 100644
--- a/src/components/molecules/nav/pagination.module.scss
+++ b/src/components/molecules/nav/pagination.module.scss
@@ -13,7 +13,7 @@
 
     &--pages {
       column-gap: var(--spacing-2xs);
-      margin-top: var(--spacing-sm);
+      margin-bottom: var(--spacing-sm);
     }
   }
 
diff --git a/src/components/molecules/nav/pagination.tsx b/src/components/molecules/nav/pagination.tsx
index 38f6841..934b50a 100644
--- a/src/components/molecules/nav/pagination.tsx
+++ b/src/components/molecules/nav/pagination.tsx
@@ -44,12 +44,12 @@ const Pagination: FC<PaginationProps> = ({
   className = '',
   current,
   perPage,
-  siblings = 1,
+  siblings = 2,
   total,
   ...props
 }) => {
   const intl = useIntl();
-  const totalPages = Math.ceil(total / perPage);
+  const totalPages = Math.round(total / perPage);
   const hasPreviousPage = current > 1;
   const previousPageName = intl.formatMessage(
     {
@@ -205,14 +205,14 @@ const Pagination: FC<PaginationProps> = ({
 
   return (
     <nav className={`${styles.wrapper} ${className}`} {...props}>
+      <ul className={`${styles.list} ${styles['list--pages']}`}>
+        {getPages(current, totalPages)}
+      </ul>
       <ul className={styles.list}>
         {hasPreviousPage &&
           getItem('previous', previousPageName, previousPageUrl)}
         {hasNextPage && getItem('next', nextPageName, nextPageUrl)}
       </ul>
-      <ul className={`${styles.list} ${styles['list--pages']}`}>
-        {getPages(current, totalPages)}
-      </ul>
     </nav>
   );
 };
diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 9dfe254..50192dd 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -2,6 +2,11 @@ import Button from '@components/atoms/buttons/button';
 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,
+} from '@components/molecules/nav/pagination';
+import useIsMounted from '@utils/hooks/use-is-mounted';
+import useSettings from '@utils/hooks/use-settings';
 import { FC, Fragment, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './posts-list.module.scss';
@@ -18,7 +23,7 @@ export type YearCollection = {
   [key: string]: Post[];
 };
 
-export type PostsListProps = {
+export type PostsListProps = Pick<PaginationProps, 'baseUrl' | 'siblings'> & {
   /**
    * True to display the posts by year. Default: false.
    */
@@ -31,6 +36,10 @@ export type PostsListProps = {
    * Load more button handler.
    */
   loadMore?: () => void;
+  /**
+   * The current page number. Default: 1.
+   */
+  pageNumber?: number;
   /**
    * The posts data.
    */
@@ -74,16 +83,22 @@ const sortPostsByYear = (data: Post[]): YearCollection => {
  * Render a list of post summaries.
  */
 const PostsList: FC<PostsListProps> = ({
+  baseUrl,
   byYear = false,
   isLoading = false,
   loadMore,
+  pageNumber = 1,
   posts,
   showLoadMoreBtn = false,
+  siblings,
   titleLevel,
   total,
 }) => {
   const intl = useIntl();
+  const listRef = useRef<HTMLOListElement>(null);
   const lastPostRef = useRef<HTMLSpanElement>(null);
+  const isMounted = useIsMounted(listRef);
+  const { blog } = useSettings();
 
   /**
    * Retrieve the list of posts.
@@ -99,7 +114,7 @@ const PostsList: FC<PostsListProps> = ({
     const lastPostId = allPosts[allPosts.length - 1].id;
 
     return (
-      <ol className={styles.list}>
+      <ol className={styles.list} ref={listRef}>
         {allPosts.map(({ id, ...post }) => (
           <Fragment key={id}>
             <li className={styles.item}>
@@ -168,34 +183,60 @@ const PostsList: FC<PostsListProps> = ({
     loadMore && loadMore();
   };
 
-  return posts.length === 0 ? (
-    <p>
-      {intl.formatMessage({
-        defaultMessage: 'No results found.',
-        description: 'PostsList: no results',
-        id: 'vK7Sxv',
-      })}
-    </p>
-  ) : (
+  const getProgressBar = () => {
+    return (
+      <>
+        <ProgressBar
+          min={1}
+          max={total}
+          current={posts.length}
+          info={progressInfo}
+        />
+        {showLoadMoreBtn && (
+          <Button
+            kind="tertiary"
+            onClick={loadMorePosts}
+            disabled={isLoading}
+            className={styles.btn}
+          >
+            {loadMoreBody}
+          </Button>
+        )}
+      </>
+    );
+  };
+
+  const getPagination = () => {
+    return posts.length <= blog.postsPerPage ? (
+      <Pagination
+        baseUrl={baseUrl}
+        current={pageNumber}
+        perPage={blog.postsPerPage}
+        siblings={siblings}
+        total={total}
+      />
+    ) : (
+      <></>
+    );
+  };
+
+  if (posts.length === 0) {
+    return (
+      <p>
+        {intl.formatMessage({
+          defaultMessage: 'No results found.',
+          description: 'PostsList: no results',
+          id: 'vK7Sxv',
+        })}
+      </p>
+    );
+  }
+
+  return (
     <>
       {getPosts()}
       {isLoading && <Spinner />}
-      <ProgressBar
-        min={1}
-        max={total}
-        current={posts.length}
-        info={progressInfo}
-      />
-      {showLoadMoreBtn && (
-        <Button
-          kind="tertiary"
-          onClick={loadMorePosts}
-          disabled={isLoading}
-          className={styles.btn}
-        >
-          {loadMoreBody}
-        </Button>
-      )}
+      {isMounted ? getProgressBar() : getPagination()}
     </>
   );
 };
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index 2676305..90f56be 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -250,6 +250,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
       >
         {data && (
           <PostsList
+            baseUrl="/blog/page/"
             byYear={true}
             isLoading={isLoadingMore || isLoadingInitialData}
             loadMore={loadMore}
diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
new file mode 100644
index 0000000..e8c93f7
--- /dev/null
+++ b/src/pages/blog/page/[number].tsx
@@ -0,0 +1,311 @@
+import PostsList, { type Post } 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,
+} from '@services/graphql/articles';
+import {
+  getThematicsPreview,
+  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 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,
+} from '@utils/helpers/pages';
+import useBreadcrumb from '@utils/hooks/use-breadcrumb';
+import useRedirection from '@utils/hooks/use-redirection';
+import useSettings from '@utils/hooks/use-settings';
+import { GetStaticPaths, GetStaticProps } 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, Graph, WebPage } from 'schema-dts';
+
+type BlogPageProps = {
+  articles: EdgesResponse<RawArticle>;
+  pageNumber: number;
+  thematicsList: RawThematicPreview[];
+  topicsList: RawTopicPreview[];
+  totalArticles: number;
+  translation: Messages;
+};
+
+/**
+ * Blog index page.
+ */
+const BlogPage: NextPageWithLayout<BlogPageProps> = ({
+  articles,
+  pageNumber,
+  thematicsList,
+  topicsList,
+  totalArticles,
+}) => {
+  useRedirection({
+    query: { param: 'number', value: '1' },
+    redirectTo: '/blog',
+  });
+
+  const intl = useIntl();
+  const title = intl.formatMessage({
+    defaultMessage: 'Blog',
+    description: 'BlogPage: page title',
+    id: '7TbbIk',
+  });
+  const pageNumberTitle = intl.formatMessage(
+    {
+      defaultMessage: 'Page {number}',
+      id: 'zbzlb1',
+      description: 'BlogPage: page number',
+    },
+    {
+      number: pageNumber,
+    }
+  );
+  const pageTitleWithPageNumber = `${title} - ${pageNumberTitle}`;
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
+    title: pageNumberTitle,
+    url: `/blog/page/${pageNumber}`,
+  });
+
+  const { website } = useSettings();
+  const { asPath } = useRouter();
+  const pageTitle = `${pageTitleWithPageNumber} - ${website.name}`;
+  const pageDescription = intl.formatMessage(
+    {
+      defaultMessage:
+        "Discover {websiteName}'s writings. He talks about web development, Linux and open source mostly.",
+      description: 'BlogPage: SEO - Meta description',
+      id: '18h/t0',
+    },
+    { websiteName: website.name }
+  );
+  const pageUrl = `${website.url}${asPath}`;
+
+  const webpageSchema: WebPage = {
+    '@id': `${pageUrl}`,
+    '@type': 'WebPage',
+    breadcrumb: { '@id': `${website.url}/#breadcrumb` },
+    name: pageTitle,
+    description: pageDescription,
+    inLanguage: website.locales.default,
+    reviewedBy: { '@id': `${website.url}/#branding` },
+    url: `${website.url}`,
+    isPartOf: {
+      '@id': `${website.url}`,
+    },
+  };
+
+  const blogSchema: Blog = {
+    '@id': `${website.url}/#blog`,
+    '@type': 'Blog',
+    author: { '@id': `${website.url}/#branding` },
+    creator: { '@id': `${website.url}/#branding` },
+    editor: { '@id': `${website.url}/#branding` },
+    inLanguage: website.locales.default,
+    license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
+    mainEntityOfPage: { '@id': `${pageUrl}` },
+  };
+
+  const schemaJsonLd: Graph = {
+    '@context': 'https://schema.org',
+    '@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',
+    id: 'HriY57',
+  });
+
+  const topicsListTitle = intl.formatMessage({
+    defaultMessage: 'Topics',
+    description: 'BlogPage: topics list widget title',
+    id: '2D9tB5',
+  });
+
+  return (
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+        <meta name="description" content={pageDescription} />
+        <meta property="og:url" content={`${pageUrl}`} />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content={pageTitleWithPageNumber} />
+        <meta property="og:description" content={pageDescription} />
+      </Head>
+      <Script
+        id="schema-blog"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
+      />
+      <PageLayout
+        title={pageTitleWithPageNumber}
+        breadcrumb={breadcrumbItems}
+        breadcrumbSchema={breadcrumbSchema}
+        headerMeta={{ total: totalArticles }}
+        widgets={[
+          <LinksListWidget
+            key="thematics-list"
+            items={getLinksListItems(
+              thematicsList.map(getPageLinkFromRawData),
+              'thematic'
+            )}
+            title={thematicsListTitle}
+            level={2}
+          />,
+          <LinksListWidget
+            key="topics-list"
+            items={getLinksListItems(
+              topicsList.map(getPageLinkFromRawData),
+              'topic'
+            )}
+            title={topicsListTitle}
+            level={2}
+          />,
+        ]}
+      >
+        <PostsList
+          baseUrl="/blog/page/"
+          byYear={true}
+          pageNumber={pageNumber}
+          posts={getPostsList([articles])}
+          total={totalArticles}
+        />
+      </PageLayout>
+    </>
+  );
+};
+
+BlogPage.getLayout = (page) =>
+  getLayout(page, { useGrid: true, withExtraPadding: true });
+
+interface BlogPageParams extends ParsedUrlQuery {
+  number: string;
+}
+
+export const getStaticProps: GetStaticProps<BlogPageProps> = async ({
+  locale,
+  params,
+}) => {
+  const pageNumber = Number(params!.number as BlogPageParams['number']);
+  const queriedPostsNumber = settings.postsPerPage * pageNumber;
+  const lastCursor = await getArticlesEndCursor({
+    first: queriedPostsNumber,
+  });
+  const articles = await getArticles({
+    first: settings.postsPerPage,
+    after: lastCursor,
+  });
+  const totalArticles = await getTotalArticles();
+  const totalThematics = await getTotalThematics();
+  const thematics = await getThematicsPreview({ first: totalThematics });
+  const totalTopics = await getTotalTopics();
+  const topics = await getTopicsPreview({ first: totalTopics });
+  const translation = await loadTranslation(locale);
+
+  return {
+    props: {
+      articles: JSON.parse(JSON.stringify(articles)),
+      pageNumber,
+      thematicsList: thematics.edges.map((edge) => edge.node),
+      topicsList: topics.edges.map((edge) => edge.node),
+      totalArticles,
+      translation,
+    },
+  };
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const totalArticles = await getTotalArticles();
+  const totalPages = Math.ceil(totalArticles / settings.postsPerPage);
+  const pagesArray = Array.from(
+    { length: totalPages },
+    (_, index) => index + 1
+  );
+  const paths = pagesArray.map((number) => {
+    return { params: { number: `${number}` } };
+  });
+
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export default BlogPage;
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 09091c8..8895015 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -263,6 +263,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
       >
         {data && data.length > 0 ? (
           <PostsList
+            baseUrl="/recherche/page/"
             byYear={true}
             isLoading={isLoadingMore || isLoadingInitialData}
             loadMore={loadMore}
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index 6277293..271f4ec 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -205,6 +205,7 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
               )}
             </Heading>
             <PostsList
+              baseUrl="/sujet/page/"
               posts={getPosts(articles)}
               total={articles.length}
               titleLevel={3}
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index fbe50fc..ce4eccf 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -186,6 +186,7 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
               )}
             </Heading>
             <PostsList
+              baseUrl="/thematique/page/"
               posts={getPosts(articles)}
               total={articles.length}
               titleLevel={3}
diff --git a/src/services/graphql/api.ts b/src/services/graphql/api.ts
index 9f68ddc..009aea4 100644
--- a/src/services/graphql/api.ts
+++ b/src/services/graphql/api.ts
@@ -2,6 +2,7 @@ import { settings } from '@utils/config';
 import {
   articleBySlugQuery,
   articlesCardQuery,
+  articlesEndCursor,
   articlesQuery,
   articlesSlugQuery,
   totalArticlesQuery,
@@ -28,6 +29,7 @@ export type Queries =
   | typeof articlesQuery
   | typeof articleBySlugQuery
   | typeof articlesCardQuery
+  | typeof articlesEndCursor
   | typeof articlesSlugQuery
   | typeof commentsQuery
   | typeof thematicBySlugQuery
@@ -100,9 +102,15 @@ export type NodesResponse<T> = {
   nodes: T[];
 };
 
+export type EndCursor = Pick<
+  EdgesResponse<Pick<PageInfo, 'endCursor'>>,
+  'pageInfo'
+>;
+
 export type ResponseMap<T> = {
   [articleBySlugQuery]: ArticleResponse<T>;
   [articlesCardQuery]: ArticlesResponse<NodesResponse<T>>;
+  [articlesEndCursor]: ArticlesResponse<EndCursor>;
   [articlesQuery]: ArticlesResponse<EdgesResponse<T>>;
   [articlesSlugQuery]: ArticlesResponse<EdgesResponse<T>>;
   [commentsQuery]: CommentsResponse<NodesResponse<T>>;
@@ -213,6 +221,7 @@ export type SendMailVars = {
 export type VariablesMap = {
   [articleBySlugQuery]: BySlugVar;
   [articlesCardQuery]: EdgesVars;
+  [articlesEndCursor]: EdgesVars;
   [articlesQuery]: EdgesVars;
   [articlesSlugQuery]: EdgesVars;
   [commentsQuery]: ByContentIdVar;
diff --git a/src/services/graphql/articles.query.ts b/src/services/graphql/articles.query.ts
index e02ca8e..7bd0901 100644
--- a/src/services/graphql/articles.query.ts
+++ b/src/services/graphql/articles.query.ts
@@ -184,3 +184,15 @@ export const totalArticlesQuery = `query PostsTotal($search: String = "") {
     }
   }
 }`;
+
+/**
+ * Query the end cursor based on the queried posts number.
+ */
+export const articlesEndCursor = `query EndCursorAfter($first: Int) {
+  posts(first: $first) {
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
+  }
+}`;
diff --git a/src/services/graphql/articles.ts b/src/services/graphql/articles.ts
index 41052c4..f130872 100644
--- a/src/services/graphql/articles.ts
+++ b/src/services/graphql/articles.ts
@@ -7,10 +7,18 @@ import {
 import { getAuthorFromRawData } from '@utils/helpers/author';
 import { getImageFromRawData } from '@utils/helpers/images';
 import { getPageLinkFromRawData } from '@utils/helpers/pages';
-import { EdgesResponse, EdgesVars, fetchAPI, getAPIUrl, PageInfo } from './api';
+import {
+  EdgesResponse,
+  EdgesVars,
+  EndCursor,
+  fetchAPI,
+  getAPIUrl,
+  PageInfo,
+} from './api';
 import {
   articleBySlugQuery,
   articlesCardQuery,
+  articlesEndCursor,
   articlesQuery,
   articlesSlugQuery,
   totalArticlesQuery,
@@ -173,3 +181,21 @@ export const getAllArticlesSlugs = async (): Promise<string[]> => {
 
   return response.posts.edges.map((edge) => edge.node.slug);
 };
+
+/**
+ * Retrieve the last cursor.
+ *
+ * @param {EdgesVars} props - An object of GraphQL variables.
+ * @returns {Promise<string>} - The end cursor.
+ */
+export const getArticlesEndCursor = async (
+  props: EdgesVars
+): Promise<string> => {
+  const response = await fetchAPI<EndCursor, typeof articlesEndCursor>({
+    api: getAPIUrl(),
+    query: articlesEndCursor,
+    variables: { ...props },
+  });
+
+  return response.posts.pageInfo.endCursor;
+};
diff --git a/src/utils/hooks/use-breadcrumb.tsx b/src/utils/hooks/use-breadcrumb.tsx
index 087d400..130ebf1 100644
--- a/src/utils/hooks/use-breadcrumb.tsx
+++ b/src/utils/hooks/use-breadcrumb.tsx
@@ -40,6 +40,7 @@ const useBreadcrumb = ({
   const { website } = useSettings();
   const isArticle = url.startsWith('/article/');
   const isHome = url === '/';
+  const isPageNumber = url.includes('/page/');
   const isProject = url.startsWith('/projets/');
   const isSearch = url.startsWith('/recherche');
   const isThematic = url.startsWith('/thematique/');
@@ -62,7 +63,7 @@ const useBreadcrumb = ({
 
   if (isHome) return { items, schema };
 
-  if (isArticle || isSearch || isThematic || isTopic) {
+  if (isArticle || isPageNumber || isSearch || isThematic || isTopic) {
     const blogLabel = intl.formatMessage({
       defaultMessage: 'Blog',
       description: 'Breadcrumb: blog label',
diff --git a/src/utils/hooks/use-redirection.tsx b/src/utils/hooks/use-redirection.tsx
new file mode 100644
index 0000000..9eb26c2
--- /dev/null
+++ b/src/utils/hooks/use-redirection.tsx
@@ -0,0 +1,33 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+export type RouterQuery = {
+  param: string;
+  value: string;
+};
+
+export type UseRedirectionProps = {
+  /**
+   * The router query.
+   */
+  query: RouterQuery;
+  /**
+   * The redirection url.
+   */
+  redirectTo: string;
+};
+
+/**
+ * Redirect to another url when router query match the given parameters.
+ *
+ * @param {UseRedirectionProps} props - The redirection parameters.
+ */
+const useRedirection = ({ query, redirectTo }: UseRedirectionProps) => {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.query[query.param] === query.value) router.push(redirectTo);
+  }, [query, redirectTo, router]);
+};
+
+export default useRedirection;
-- 
cgit v1.2.3


From ef2407832202e5451751e26459e6bdcdbd152122 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 21 May 2022 16:04:06 +0200
Subject: fix: close Ackee tooltip on button click

The tooltip was closing and reopening on click because of a conflict
between the button event and the hook useClickOutside. By checking that
the event target is not the button, the tooltip is now closing as
expected.
---
 src/components/atoms/buttons/button.tsx            | 35 ++++++++++++++--------
 src/components/molecules/buttons/help-button.tsx   | 12 +++++---
 .../molecules/forms/select-with-tooltip.tsx        | 11 +++++--
 src/utils/hooks/use-click-outside.tsx              |  7 +++--
 4 files changed, 44 insertions(+), 21 deletions(-)

(limited to 'src/utils/hooks')

diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index a6eef8b..9776687 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -1,4 +1,9 @@
-import { FC, MouseEventHandler, ReactNode } from 'react';
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  MouseEventHandler,
+  ReactNode,
+} from 'react';
 import styles from './buttons.module.scss';
 
 export type ButtonProps = {
@@ -41,23 +46,27 @@ export type ButtonProps = {
  *
  * Use a button as call to action.
  */
-const Button: FC<ButtonProps> = ({
-  className = '',
-  children,
-  disabled = false,
-  kind = 'secondary',
-  shape = 'rectangle',
-  type = 'button',
-  ...props
-}) => {
+const Button: ForwardRefRenderFunction<HTMLButtonElement, ButtonProps> = (
+  {
+    className = '',
+    children,
+    disabled = false,
+    kind = 'secondary',
+    shape = 'rectangle',
+    type = 'button',
+    ...props
+  },
+  ref
+) => {
   const kindClass = styles[`btn--${kind}`];
   const shapeClass = styles[`btn--${shape}`];
 
   return (
     <button
-      type={type}
-      disabled={disabled}
       className={`${styles.btn} ${kindClass} ${shapeClass} ${className}`}
+      disabled={disabled}
+      ref={ref}
+      type={type}
       {...props}
     >
       {children}
@@ -65,4 +74,4 @@ const Button: FC<ButtonProps> = ({
   );
 };
 
-export default Button;
+export default forwardRef(Button);
diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index f19322f..e351453 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -1,5 +1,5 @@
 import Button, { type ButtonProps } from '@components/atoms/buttons/button';
-import { FC } from 'react';
+import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './help-button.module.scss';
 
@@ -15,7 +15,10 @@ export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & {
  *
  * Render a button with an interrogation mark icon.
  */
-const HelpButton: FC<HelpButtonProps> = ({ className = '', onClick }) => {
+const HelpButton: ForwardRefRenderFunction<
+  HTMLButtonElement,
+  HelpButtonProps
+> = ({ className = '', onClick }, ref) => {
   const intl = useIntl();
   const text = intl.formatMessage({
     defaultMessage: 'Help',
@@ -25,9 +28,10 @@ const HelpButton: FC<HelpButtonProps> = ({ className = '', onClick }) => {
 
   return (
     <Button
-      shape="circle"
       className={`${styles.btn} ${className}`}
       onClick={onClick}
+      ref={ref}
+      shape="circle"
     >
       <span className="screen-reader-text">{text}</span>
       <span className={styles.icon}>?</span>
@@ -35,4 +39,4 @@ const HelpButton: FC<HelpButtonProps> = ({ className = '', onClick }) => {
   );
 };
 
-export default HelpButton;
+export default forwardRef(HelpButton);
diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx
index f576a15..29e2563 100644
--- a/src/components/molecules/forms/select-with-tooltip.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.tsx
@@ -29,15 +29,21 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
   ...props
 }) => {
   const [isTooltipOpened, setIsTooltipOpened] = useState<boolean>(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
   const buttonModifier = isTooltipOpened ? styles['btn--activated'] : '';
   const tooltipModifier = isTooltipOpened
     ? styles['tooltip--visible']
     : styles['tooltip--hidden'];
 
+  const closeTooltip = (target: EventTarget) => {
+    if (buttonRef.current && !buttonRef.current.contains(target as Node))
+      setIsTooltipOpened(false);
+  };
+
   useClickOutside(
     tooltipRef,
-    () => isTooltipOpened && setIsTooltipOpened(false)
+    (target) => isTooltipOpened && closeTooltip(target)
   );
 
   return (
@@ -49,8 +55,9 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
         {...props}
       />
       <HelpButton
-        onClick={() => setIsTooltipOpened(!isTooltipOpened)}
         className={`${styles.btn} ${buttonModifier}`}
+        onClick={() => setIsTooltipOpened(!isTooltipOpened)}
+        ref={buttonRef}
       />
       <Tooltip
         title={title}
diff --git a/src/utils/hooks/use-click-outside.tsx b/src/utils/hooks/use-click-outside.tsx
index 066c1c2..cead98b 100644
--- a/src/utils/hooks/use-click-outside.tsx
+++ b/src/utils/hooks/use-click-outside.tsx
@@ -6,7 +6,10 @@ import { RefObject, useCallback, useEffect } from 'react';
  * @param el - A React reference to an element.
  * @param callback - A callback function to execute on click outside.
  */
-const useClickOutside = (el: RefObject<HTMLElement>, callback: () => void) => {
+const useClickOutside = (
+  el: RefObject<HTMLElement>,
+  callback: (target: EventTarget) => void
+) => {
   /**
    * Check if an event target is outside an element.
    *
@@ -24,7 +27,7 @@ const useClickOutside = (el: RefObject<HTMLElement>, callback: () => void) => {
 
   const handleEvent = useCallback(
     (e: MouseEvent | FocusEvent) => {
-      if (e.target && isTargetOutside(el, e.target)) callback();
+      if (e.target && isTargetOutside(el, e.target)) callback(e.target);
     },
     [el, callback]
   );
-- 
cgit v1.2.3


From 691646c97b09f9150ac823670d6c661358c81c1c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 24 May 2022 17:54:23 +0200
Subject: chore: give autofocus to the toolbar search form

---
 src/components/atoms/forms/field.tsx              | 24 ++++++++------
 src/components/molecules/forms/labelled-field.tsx | 21 ++++++------
 src/components/organisms/forms/search-form.tsx    | 24 ++++++++------
 src/components/organisms/modals/search-modal.tsx  | 25 ++++++---------
 src/components/organisms/toolbar/search.tsx       | 13 ++++++--
 src/utils/hooks/use-input-autofocus.tsx           | 39 +++++++++++++++++++++++
 6 files changed, 98 insertions(+), 48 deletions(-)
 create mode 100644 src/utils/hooks/use-input-autofocus.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/atoms/forms/field.tsx b/src/components/atoms/forms/field.tsx
index e45a8a7..377e1b0 100644
--- a/src/components/atoms/forms/field.tsx
+++ b/src/components/atoms/forms/field.tsx
@@ -1,4 +1,9 @@
-import { ChangeEvent, FC, SetStateAction } from 'react';
+import {
+  ChangeEvent,
+  forwardRef,
+  ForwardRefRenderFunction,
+  SetStateAction,
+} from 'react';
 import styles from './forms.module.scss';
 
 export type FieldType =
@@ -72,12 +77,10 @@ export type FieldProps = {
  *
  * Render either an input or a textarea.
  */
-const Field: FC<FieldProps> = ({
-  className = '',
-  setValue,
-  type,
-  ...props
-}) => {
+const Field: ForwardRefRenderFunction<HTMLInputElement, FieldProps> = (
+  { className = '', setValue, type, ...props },
+  ref
+) => {
   /**
    * Update select value when an option is selected.
    * @param e - The option change event.
@@ -96,12 +99,13 @@ const Field: FC<FieldProps> = ({
     />
   ) : (
     <input
-      type={type}
-      onChange={updateValue}
       className={`${styles.field} ${className}`}
+      onChange={updateValue}
+      ref={ref}
+      type={type}
       {...props}
     />
   );
 };
 
-export default Field;
+export default forwardRef(Field);
diff --git a/src/components/molecules/forms/labelled-field.tsx b/src/components/molecules/forms/labelled-field.tsx
index ecc9255..6a00a3e 100644
--- a/src/components/molecules/forms/labelled-field.tsx
+++ b/src/components/molecules/forms/labelled-field.tsx
@@ -1,6 +1,6 @@
 import Field, { type FieldProps } from '@components/atoms/forms/field';
 import Label from '@components/atoms/forms/label';
-import { FC } from 'react';
+import { forwardRef, ForwardRefRenderFunction } from 'react';
 import styles from './labelled-field.module.scss';
 
 export type LabelledFieldProps = FieldProps & {
@@ -23,14 +23,13 @@ export type LabelledFieldProps = FieldProps & {
  *
  * Render a field tied to a label.
  */
-const LabelledField: FC<LabelledFieldProps> = ({
-  hideLabel = false,
-  id,
-  label,
-  labelPosition = 'top',
-  required,
-  ...props
-}) => {
+const LabelledField: ForwardRefRenderFunction<
+  HTMLInputElement,
+  LabelledFieldProps
+> = (
+  { hideLabel = false, id, label, labelPosition = 'top', required, ...props },
+  ref
+) => {
   const positionModifier = `label--${labelPosition}`;
   const visibilityClass = hideLabel ? 'screen-reader-text' : '';
 
@@ -43,9 +42,9 @@ const LabelledField: FC<LabelledFieldProps> = ({
       >
         {label}
       </Label>
-      <Field id={id} required={required} {...props} />
+      <Field id={id} ref={ref} required={required} {...props} />
     </>
   );
 };
 
-export default LabelledField;
+export default forwardRef(LabelledField);
diff --git a/src/components/organisms/forms/search-form.tsx b/src/components/organisms/forms/search-form.tsx
index 56d3895..1b5f662 100644
--- a/src/components/organisms/forms/search-form.tsx
+++ b/src/components/organisms/forms/search-form.tsx
@@ -5,7 +5,7 @@ import LabelledField, {
   type LabelledFieldProps,
 } from '@components/molecules/forms/labelled-field';
 import { useRouter } from 'next/router';
-import { FC, useState } from 'react';
+import { forwardRef, ForwardRefRenderFunction, useId, useState } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './search-form.module.scss';
 
@@ -21,7 +21,10 @@ export type SearchFormProps = Pick<LabelledFieldProps, 'hideLabel'> & {
  *
  * Render a search form.
  */
-const SearchForm: FC<SearchFormProps> = ({ hideLabel, searchPage }) => {
+const SearchForm: ForwardRefRenderFunction<
+  HTMLInputElement,
+  SearchFormProps
+> = ({ hideLabel, searchPage }, ref) => {
   const intl = useIntl();
   const fieldLabel = intl.formatMessage({
     defaultMessage: 'Search for:',
@@ -42,17 +45,20 @@ const SearchForm: FC<SearchFormProps> = ({ hideLabel, searchPage }) => {
     setValue('');
   };
 
+  const id = useId();
+
   return (
     <Form grouped={false} onSubmit={submitHandler} className={styles.wrapper}>
       <LabelledField
-        type="search"
-        id="search-form"
-        name="search-form"
+        className={styles.field}
+        hideLabel={hideLabel}
+        id={`search-form-${id}`}
         label={fieldLabel}
-        value={value}
+        name="search-form"
+        ref={ref}
         setValue={setValue}
-        hideLabel={hideLabel}
-        className={styles.field}
+        type="search"
+        value={value}
       />
       <Button
         type="submit"
@@ -67,4 +73,4 @@ const SearchForm: FC<SearchFormProps> = ({ hideLabel, searchPage }) => {
   );
 };
 
-export default SearchForm;
+export default forwardRef(SearchForm);
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
index c731048..ed6084a 100644
--- a/src/components/organisms/modals/search-modal.tsx
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -1,20 +1,10 @@
-import Spinner from '@components/atoms/loaders/spinner';
 import Modal, { type ModalProps } from '@components/molecules/modals/modal';
-import dynamic from 'next/dynamic';
-import { FC } from 'react';
+import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
-import { type SearchFormProps } from '../forms/search-form';
+import SearchForm, { type SearchFormProps } from '../forms/search-form';
 import styles from './search-modal.module.scss';
 
-const DynamicSearchForm = dynamic(
-  () => import('@components/organisms/forms/search-form'),
-  {
-    loading: () => <Spinner />,
-    ssr: false,
-  }
-);
-
-export type SearchModalProps = Pick<SearchFormProps, 'searchPage'> & {
+export type SearchModalProps = SearchFormProps & {
   /**
    * Set additional classnames to modal wrapper.
    */
@@ -26,7 +16,10 @@ export type SearchModalProps = Pick<SearchFormProps, 'searchPage'> & {
  *
  * Render a search form modal.
  */
-const SearchModal: FC<SearchModalProps> = ({ className, searchPage }) => {
+const SearchModal: ForwardRefRenderFunction<
+  HTMLInputElement,
+  SearchModalProps
+> = ({ className, searchPage }, ref) => {
   const intl = useIntl();
   const modalTitle = intl.formatMessage({
     defaultMessage: 'Search',
@@ -36,9 +29,9 @@ const SearchModal: FC<SearchModalProps> = ({ className, searchPage }) => {
 
   return (
     <Modal title={modalTitle} className={`${styles.wrapper} ${className}`}>
-      <DynamicSearchForm hideLabel={true} searchPage={searchPage} />
+      <SearchForm hideLabel={true} ref={ref} searchPage={searchPage} />
     </Modal>
   );
 };
 
-export default SearchModal;
+export default forwardRef(SearchModal);
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx
index dc71c49..6a8af26 100644
--- a/src/components/organisms/toolbar/search.tsx
+++ b/src/components/organisms/toolbar/search.tsx
@@ -1,7 +1,8 @@
 import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
 import MagnifyingGlass from '@components/atoms/icons/magnifying-glass';
 import FlippingLabel from '@components/molecules/forms/flipping-label';
-import { forwardRef, ForwardRefRenderFunction } from 'react';
+import useInputAutofocus from '@utils/hooks/use-input-autofocus';
+import { forwardRef, ForwardRefRenderFunction, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import SearchModal, { type SearchModalProps } from '../modals/search-modal';
 import searchStyles from './search.module.scss';
@@ -43,6 +44,13 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
         description: 'Search: Open label',
       });
 
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  useInputAutofocus({
+    condition: isActive,
+    delay: 360,
+    ref: searchInputRef,
+  });
+
   return (
     <div className={`${sharedStyles.item} ${searchStyles.item}`} ref={ref}>
       <Checkbox
@@ -61,8 +69,9 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = (
         <MagnifyingGlass />
       </FlippingLabel>
       <SearchModal
-        searchPage={searchPage}
         className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`}
+        ref={searchInputRef}
+        searchPage={searchPage}
       />
     </div>
   );
diff --git a/src/utils/hooks/use-input-autofocus.tsx b/src/utils/hooks/use-input-autofocus.tsx
new file mode 100644
index 0000000..c7700e9
--- /dev/null
+++ b/src/utils/hooks/use-input-autofocus.tsx
@@ -0,0 +1,39 @@
+import { RefObject, useEffect } from 'react';
+
+export type UseInputAutofocusProps = {
+  /**
+   * The focus condition. True give focus to the input.
+   */
+  condition: boolean;
+  /**
+   * An optional delay. Default: 0.
+   */
+  delay?: number;
+  /**
+   * A reference to the input element.
+   */
+  ref: RefObject<HTMLInputElement>;
+};
+
+/**
+ * Set focus on an input with an optional delay.
+ */
+const useInputAutofocus = ({
+  condition,
+  delay = 0,
+  ref,
+}: UseInputAutofocusProps) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (ref.current && condition) {
+        ref.current.focus();
+      }
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [condition, delay, ref]);
+};
+
+export default useInputAutofocus;
-- 
cgit v1.2.3


From d916fba0a54ca2ee89f1de1a4dcc0ee71a3a24c5 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 24 May 2022 19:00:40 +0200
Subject: chore: close search form when launching search

---
 src/components/organisms/toolbar/toolbar.tsx |  2 ++
 src/utils/hooks/use-route-change.tsx         | 12 ++++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 src/utils/hooks/use-route-change.tsx

(limited to 'src/utils/hooks')

diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index e196c09..ee61a7b 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -1,4 +1,5 @@
 import useClickOutside from '@utils/hooks/use-click-outside';
+import useRouteChange from '@utils/hooks/use-route-change';
 import { FC, useRef, useState } from 'react';
 import MainNav, { type MainNavProps } from '../toolbar/main-nav';
 import Search, { type SearchProps } from '../toolbar/search';
@@ -42,6 +43,7 @@ const Toolbar: FC<ToolbarProps> = ({
     settingsRef,
     () => isSettingsOpened && setIsSettingsOpened(false)
   );
+  useRouteChange(() => setIsSearchOpened(false));
 
   return (
     <div className={`${styles.wrapper} ${className}`}>
diff --git a/src/utils/hooks/use-route-change.tsx b/src/utils/hooks/use-route-change.tsx
new file mode 100644
index 0000000..82e01a1
--- /dev/null
+++ b/src/utils/hooks/use-route-change.tsx
@@ -0,0 +1,12 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+const useRouteChange = (callback: () => void) => {
+  const { events } = useRouter();
+
+  useEffect(() => {
+    events.on('routeChangeStart', callback);
+  }, [events, callback]);
+};
+
+export default useRouteChange;
-- 
cgit v1.2.3