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, 53 insertions, 0 deletions

diff --git a/src/components/templates/page/page-footer.test.tsx b/src/components/templates/page/page-footer.test.tsx
new file mode 100644
index 0000000..4af0e82
--- /dev/null
+++ b/src/components/templates/page/page-footer.test.tsx
@@ -0,0 +1,53 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen as rtlScreen } from '../../../../tests/utils';
+import type { PageLink } from '../../../types';
+import { PageFooter } from './page-footer';
+
+describe('PageFooter', () => {
+  it('renders a list of links', () => {
+    const links = [
+      { id: 1, name: 'Topic 1', url: '/topic1' },
+      { id: 2, name: 'Topic 2', url: '/topic2' },
+      { id: 3, name: 'Topic 3', url: '/topic3' },
+    ] satisfies PageLink[];
+
+    render(<PageFooter readMoreAbout={links} />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent(
+      'Read more posts about:'
+    );
+    expect(rtlScreen.getAllByRole('link')).toHaveLength(links.length);
+  });
+
+  it('can renders a list of links with logo', () => {
+    const links = [
+      {
+        id: 1,
+        logo: {
+          alt: 'a logo',
+          height: 480,
+          width: 640,
+          src: 'https://picsum.photos/640/480',
+        },
+        name: 'Topic 1',
+        url: '/topic1',
+      },
+      { id: 2, name: 'Topic 2', url: '/topic2' },
+      { id: 3, name: 'Topic 3', url: '/topic3' },
+    ] satisfies PageLink[];
+
+    render(<PageFooter readMoreAbout={links} />);
+
+    expect(rtlScreen.getByRole('term')).toHaveTextContent(
+      'Read more posts about:'
+    );
+    expect(rtlScreen.getAllByRole('link')).toHaveLength(links.length);
+    expect(rtlScreen.getByRole('img')).toHaveAccessibleName(links[0].logo?.alt);
+  });
+
+  it('does not render a list when the prop length is 0', () => {
+    const { container } = render(<PageFooter readMoreAbout={[]} />);
+
+    expect(container.firstChild).toBeEmptyDOMElement();
+  });
+});