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`

1 files changed, 49 insertions, 0 deletions

diff --git a/src/components/templates/page/page.test.tsx b/src/components/templates/page/page.test.tsx
new file mode 100644
index 0000000..21c5a86
--- /dev/null
+++ b/src/components/templates/page/page.test.tsx
@@ -0,0 +1,49 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import type { BreadcrumbsItem } from '../../organisms';
+import { Page } from './page';
+import { PageBody } from './page-body';
+
+describe('Page', () => {
+  it('renders its children', () => {
+    const body =
+      'Consequatur deleniti eligendi quidem sint et nobis ut qui. Dolores modi eos. Cupiditate aliquid sunt consequatur voluptatem laudantium.';
+
+    render(
+      <Page>
+        <PageBody>{body}</PageBody>
+      </Page>
+    );
+
+    expect(rtlScreen.getByText(body)).toBeInTheDocument();
+  });
+
+  it('can render the breadcrumbs', () => {
+    const body =
+      'Consequatur deleniti eligendi quidem sint et nobis ut qui. Dolores modi eos. Cupiditate aliquid sunt consequatur voluptatem laudantium.';
+    const breadcrumbs = [
+      { id: 'home', name: 'Home', url: '#home' },
+      { id: 'blog', name: 'Blog', url: '#blog' },
+    ] satisfies BreadcrumbsItem[];
+
+    render(
+      <Page breadcrumbs={breadcrumbs}>
+        <PageBody>{body}</PageBody>
+      </Page>
+    );
+
+    expect(rtlScreen.getByRole('navigation')).toHaveAccessibleName(
+      'Breadcrumbs'
+    );
+    expect(rtlScreen.getAllByRole('listitem')).toHaveLength(breadcrumbs.length);
+  });
+
+  it('can have a class modifier based on a prop', () => {
+    const body =
+      'Consequatur deleniti eligendi quidem sint et nobis ut qui. Dolores modi eos. Cupiditate aliquid sunt consequatur voluptatem laudantium.';
+
+    render(<Page isBodyLastChild>{body}</Page>);
+
+    expect(rtlScreen.getByText(body)).toHaveClass('page--body-last');
+  });
+});