refactor(components): replace PageLayout template with Page

* split pages in smaller components (it is both easier to maintain and
more readable, we avoid the use of fragments in pages directory)
* extract breadcrumbs from article tag (the navigation is not related
to the page contents)
* remove useReadingTime hook
* remove layout options except `isHome`

10 files changed, 2 insertions, 391 deletions

diff --git a/src/components/molecules/collapsible/collapsible.module.scss b/src/components/molecules/collapsible/collapsible.module.scss
index 3c5a97c..2ee9aea 100644
--- a/src/components/molecules/collapsible/collapsible.module.scss
+++ b/src/components/molecules/collapsible/collapsible.module.scss
@@ -88,12 +88,12 @@
         max-height 1.2s ease-in-out;
 
       &--has-padding {
-        margin: var(--spacing-2xs) 0;
+        margin-top: var(--spacing-2xs);
         padding-block: var(--spacing-2xs);
       }
 
       &--no-padding {
-        margin: var(--spacing-xs) 0;
+        margin-top: var(--spacing-xs);
       }
     }
   }
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
index 04c669f..0619de8 100644
--- a/src/components/molecules/index.ts
+++ b/src/components/molecules/index.ts
@@ -8,7 +8,6 @@ export * from './copyright';
 export * from './forms';
 export * from './grid';
 export * from './images';
-export * from './layout';
 export * from './meta-list';
 export * from './modals';
 export * from './nav';
diff --git a/src/components/molecules/layout/index.ts b/src/components/molecules/layout/index.ts
deleted file mode 100644
index f204f56..0000000
--- a/src/components/molecules/layout/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './page-footer';
-export * from './page-header';
diff --git a/src/components/molecules/layout/page-footer.stories.tsx b/src/components/molecules/layout/page-footer.stories.tsx
deleted file mode 100644
index 994e888..0000000
--- a/src/components/molecules/layout/page-footer.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Link } from '../../atoms';
-import { MetaItem, MetaList } from '../meta-list';
-import { PageFooter as PageFooterComponent } from './page-footer';
-
-/**
- * Page Footer - Storybook Meta
- */
-export default {
-  title: 'Molecules/Layout',
-  component: PageFooterComponent,
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the footer element.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    meta: {
-      description: 'The page meta.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'object',
-        required: false,
-        value: {},
-      },
-    },
-  },
-} as ComponentMeta<typeof PageFooterComponent>;
-
-const Template: ComponentStory<typeof PageFooterComponent> = (args) => (
-  <PageFooterComponent {...args} />
-);
-
-/**
- * Page Footer Stories - With meta
- */
-export const PageFooter = Template.bind({});
-PageFooter.args = {
-  children: (
-    <MetaList>
-      <MetaItem
-        label="More posts about:"
-        value={<Link href="#topic1">Topic name</Link>}
-      />
-    </MetaList>
-  ),
-};
diff --git a/src/components/molecules/layout/page-footer.test.tsx b/src/components/molecules/layout/page-footer.test.tsx
deleted file mode 100644
index dbd20f5..0000000
--- a/src/components/molecules/layout/page-footer.test.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen as rtlScreen } from '../../../../tests/utils';
-import { PageFooter } from './page-footer';
-
-describe('PageFooter', () => {
-  it('renders a footer element', () => {
-    render(<PageFooter />);
-    expect(rtlScreen.getByRole('contentinfo')).toBeInTheDocument();
-  });
-});
diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx
deleted file mode 100644
index e0ce2ef..0000000
--- a/src/components/molecules/layout/page-footer.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import { Footer, type FooterProps } from '../../atoms';
-
-export type PageFooterProps = Omit<FooterProps, 'children'> & {
-  /**
-   * The footer contents.
-   */
-  children?: ReactNode;
-};
-
-/**
- * PageFooter component
- *
- * Render a footer to display page meta.
- */
-export const PageFooter: FC<PageFooterProps> = ({ children, ...props }) => (
-  <Footer {...props}>{children}</Footer>
-);
diff --git a/src/components/molecules/layout/page-header.module.scss b/src/components/molecules/layout/page-header.module.scss
deleted file mode 100644
index 1a90fe5..0000000
--- a/src/components/molecules/layout/page-header.module.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-@use "../../../styles/abstracts/functions" as fun;
-@use "../../../styles/abstracts/placeholders";
-
-.wrapper {
-  @extend %grid;
-
-  &::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;
-  display: flex;
-  flex-flow: column wrap;
-  row-gap: var(--spacing-sm);
-}
-
-.title {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  position: relative;
-
-  &::before,
-  &::after {
-    content: "";
-    width: 100%;
-    height: fun.convert-px(4);
-    background: radial-gradient(
-      ellipse at center,
-      var(--color-primary-light),
-      var(--color-primary-dark)
-    );
-  }
-}
-
-.meta {
-  font-size: var(--font-size-sm);
-}
-
-.intro {
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}
diff --git a/src/components/molecules/layout/page-header.stories.tsx b/src/components/molecules/layout/page-header.stories.tsx
deleted file mode 100644
index 97eae5a..0000000
--- a/src/components/molecules/layout/page-header.stories.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { MetaItem, MetaList } from '../meta-list';
-import { PageHeader } from './page-header';
-
-/**
- * Page Header - Storybook Meta
- */
-export default {
-  title: 'Molecules/Layout/PageHeader',
-  component: PageHeader,
-  argTypes: {
-    className: {
-      control: {
-        type: 'text',
-      },
-      description: 'Set additional classnames to the header element.',
-      table: {
-        category: 'Styles',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    intro: {
-      control: {
-        type: 'text',
-      },
-      description: 'The page introduction.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    meta: {
-      description: 'The page metadata.',
-      table: {
-        category: 'Options',
-      },
-      type: {
-        name: 'object',
-        required: false,
-        value: {},
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'The page title.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof PageHeader>;
-
-const Template: ComponentStory<typeof PageHeader> = (args) => (
-  <PageHeader {...args} />
-);
-
-/**
- * Page Header Stories - Default
- */
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Excepturi nesciunt illum',
-};
-
-/**
- * Page Header Stories - With introduction
- */
-export const WithIntro = Template.bind({});
-WithIntro.args = {
-  intro:
-    'Minima dolor nihil. Velit atque odit totam enim. Quisquam reprehenderit ut et inventore et nihil libero exercitationem. Cumque similique magni placeat et. Et sed est cumque labore. Et quia similique.',
-  title: 'Excepturi nesciunt illum',
-};
-
-/**
- * Page Header Stories - With meta
- */
-export const WithMeta = Template.bind({});
-WithMeta.args = {
-  meta: (
-    <MetaList>
-      <MetaItem isInline label="Published on:" value="2022-04-09" />
-      <MetaItem
-        isInline
-        label="Thematics:"
-        value={[
-          {
-            id: 'cat-1',
-            value: (
-              <a key="category1" href="#cat1">
-                Category 1
-              </a>
-            ),
-          },
-          {
-            id: 'cat-2',
-            value: (
-              <a key="category2" href="#cat2">
-                Category 2
-              </a>
-            ),
-          },
-        ]}
-      />
-    </MetaList>
-  ),
-  title: 'Excepturi nesciunt illum',
-};
-
-/**
- * Page Header Stories - With introduction and meta
- */
-export const WithIntroAndMeta = Template.bind({});
-WithIntroAndMeta.args = {
-  intro:
-    'Minima dolor nihil. Velit atque odit totam enim. Quisquam reprehenderit ut et inventore et nihil libero exercitationem. Cumque similique magni placeat et. Et sed est cumque labore. Et quia similique.',
-  meta: (
-    <MetaList>
-      <MetaItem isInline label="Published on:" value="2022-04-09" />
-      <MetaItem
-        isInline
-        label="Thematics:"
-        value={[
-          {
-            id: 'cat-1',
-            value: (
-              <a key="category1" href="#cat1">
-                Category 1
-              </a>
-            ),
-          },
-          {
-            id: 'cat-2',
-            value: (
-              <a key="category2" href="#cat2">
-                Category 2
-              </a>
-            ),
-          },
-        ]}
-      />
-    </MetaList>
-  ),
-  title: 'Excepturi nesciunt illum',
-};
diff --git a/src/components/molecules/layout/page-header.test.tsx b/src/components/molecules/layout/page-header.test.tsx
deleted file mode 100644
index 82aa7e1..0000000
--- a/src/components/molecules/layout/page-header.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { describe, expect, it } from '@jest/globals';
-import { render, screen as rtlScreen } from '../../../../tests/utils';
-import { PageHeader } from './page-header';
-
-const title = 'Non nemo amet';
-const intro =
-  'Suscipit omnis minima doloribus commodi. Laudantium similique ut enim voluptatem soluta maxime autem et.';
-
-describe('PageHeader', () => {
-  it('renders a title', () => {
-    render(<PageHeader title={title} intro={intro} />);
-    expect(rtlScreen.getByRole('heading', { level: 1 })).toHaveTextContent(
-      title
-    );
-  });
-
-  it('renders an introduction', () => {
-    render(<PageHeader title={title} intro={intro} />);
-    expect(rtlScreen.getByText(intro)).toBeInTheDocument();
-  });
-});
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
deleted file mode 100644
index e70d66c..0000000
--- a/src/components/molecules/layout/page-header.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { FC, ReactNode } from 'react';
-import { Header, Heading } from '../../atoms';
-import styles from './page-header.module.scss';
-
-export type PageHeaderProps = {
-  /**
-   * Set additional classnames to the header element.
-   */
-  className?: string;
-  /**
-   * The page introduction.
-   */
-  intro?: string | ReactNode;
-  /**
-   * The page metadata.
-   */
-  meta?: ReactNode;
-  /**
-   * The page title.
-   */
-  title: ReactNode;
-};
-
-/**
- * PageHeader component
- *
- * Render a header element with page title, meta and intro.
- */
-export const PageHeader: FC<PageHeaderProps> = ({
-  className = '',
-  intro,
-  meta,
-  title,
-}) => {
-  const headerClass = `${styles.wrapper} ${className}`;
-
-  const getIntro = () => {
-    if (typeof intro === 'string')
-      return (
-        <div
-          className={styles.intro}
-          /* eslint-disable-next-line react/no-danger -- Not safe but intro can
-           * contains links or formatting so we need it. */
-          dangerouslySetInnerHTML={{ __html: intro }}
-        />
-      );
-
-    return <div className={styles.intro}>{intro}</div>;
-  };
-
-  return (
-    <Header className={headerClass}>
-      <div className={styles.body}>
-        <Heading className={styles.title} level={1}>
-          {title}
-        </Heading>
-        {meta}
-        {intro ? getIntro() : null}
-      </div>
-    </Header>
-  );
-};