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`

3 files changed, 10 insertions, 42 deletions

diff --git a/src/components/templates/layout/layout.module.scss b/src/components/templates/layout/layout.module.scss
index 03276bf..69c4ef0 100644
--- a/src/components/templates/layout/layout.module.scss
+++ b/src/components/templates/layout/layout.module.scss
@@ -90,19 +90,6 @@
   flex: 1;
 }
 
-.article {
-  &--grid {
-    @extend %grid;
-
-    grid-auto-flow: column dense;
-    align-items: baseline;
-  }
-
-  &--padding {
-    padding-bottom: var(--spacing-lg);
-  }
-}
-
 .footer {
   display: flex;
   flex-flow: column wrap;
diff --git a/src/components/templates/layout/layout.test.tsx b/src/components/templates/layout/layout.test.tsx
index 6a257f0..d3abe1d 100644
--- a/src/components/templates/layout/layout.test.tsx
+++ b/src/components/templates/layout/layout.test.tsx
@@ -1,5 +1,5 @@
 import { describe, expect, it } from '@jest/globals';
-import { render, screen } from '../../../../tests/utils';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
 import { Layout } from './layout';
 
 const body =
@@ -8,28 +8,28 @@ const body =
 describe('Layout', () => {
   it('renders the website header', () => {
     render(<Layout>{body}</Layout>);
-    expect(screen.getByRole('banner')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('banner')).toBeInTheDocument();
   });
 
   it('renders the website main content', () => {
     render(<Layout>{body}</Layout>);
-    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('main')).toBeInTheDocument();
   });
 
   it('renders the website footer', () => {
     render(<Layout>{body}</Layout>);
-    expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+    expect(rtlScreen.getByRole('contentinfo')).toBeInTheDocument();
   });
 
   it('renders a skip to content link', () => {
     render(<Layout>{body}</Layout>);
     expect(
-      screen.getByRole('link', { name: 'Skip to content' })
+      rtlScreen.getByRole('link', { name: 'Skip to content' })
     ).toBeInTheDocument();
   });
 
-  it('renders an article', () => {
+  it('renders its body', () => {
     render(<Layout>{body}</Layout>);
-    expect(screen.getByRole('article')).toHaveTextContent(body);
+    expect(rtlScreen.getByText(body)).toBeInTheDocument();
   });
 });
diff --git a/src/components/templates/layout/layout.tsx b/src/components/templates/layout/layout.tsx
index 055b1a1..953b0db 100644
--- a/src/components/templates/layout/layout.tsx
+++ b/src/components/templates/layout/layout.tsx
@@ -65,14 +65,6 @@ export type LayoutProps = {
    * @default false
    */
   isHome?: boolean;
-  /**
-   * Determine if article has a comments section.
-   */
-  withExtraPadding?: boolean;
-  /**
-   * Determine if article should use grid. Default: false.
-   */
-  useGrid?: boolean;
 };
 
 /**
@@ -80,17 +72,10 @@ export type LayoutProps = {
  *
  * Render the base layout used by all pages.
  */
-export const Layout: FC<LayoutProps> = ({
-  children,
-  withExtraPadding = false,
-  isHome,
-  useGrid = false,
-}) => {
+export const Layout: FC<LayoutProps> = ({ children, isHome }) => {
   const router = useRouter();
   const intl = useIntl();
   const { baseline, copyright, locales, name, url } = CONFIG;
-  const articleGridClass = useGrid ? 'article--grid' : '';
-  const articleCommentsClass = withExtraPadding ? 'article--padding' : '';
 
   const skipToContent = intl.formatMessage({
     defaultMessage: 'Skip to content',
@@ -455,11 +440,7 @@ export const Layout: FC<LayoutProps> = ({
         </div>
       </Header>
       <Main id="main" className={styles.main}>
-        <article
-          className={`${styles[articleGridClass]} ${styles[articleCommentsClass]}`}
-        >
-          {children}
-        </article>
+        {children}
       </Main>
       <Footer className={styles.footer}>
         <Colophon
@@ -495,5 +476,5 @@ export const Layout: FC<LayoutProps> = ({
  */
 export const getLayout = (
   page: ReactElement,
-  props: NextPageWithLayoutOptions
+  props?: NextPageWithLayoutOptions
 ) => <Layout {...props}>{page}</Layout>;