From 70b4f633a6fbedb58c8b9134ac64ede854d489de Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 20 Nov 2023 12:27:46 +0100
Subject: 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`
---
 src/components/templates/page/page.tsx | 56 ++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/templates/page/page.tsx

(limited to 'src/components/templates/page/page.tsx')

diff --git a/src/components/templates/page/page.tsx b/src/components/templates/page/page.tsx
new file mode 100644
index 0000000..f5f3ea5
--- /dev/null
+++ b/src/components/templates/page/page.tsx
@@ -0,0 +1,56 @@
+import {
+  type ForwardRefRenderFunction,
+  forwardRef,
+  type HTMLAttributes,
+} from 'react';
+import { useIntl } from 'react-intl';
+import { Article } from '../../atoms';
+import { Breadcrumbs, type BreadcrumbsItem } from '../../organisms/nav';
+import styles from './page.module.scss';
+
+export type PageProps = HTMLAttributes<HTMLDivElement> & {
+  /**
+   * The breadcrumbs items.
+   */
+  breadcrumbs?: BreadcrumbsItem[];
+  /**
+   * Add an extra padding to the body when there are no footer/comments.
+   *
+   * Note: this should be refactored when `:has()` pseudo-class will have a
+   * better support.
+   *
+   * @default false
+   */
+  isBodyLastChild?: boolean;
+};
+
+const PageWithRef: ForwardRefRenderFunction<HTMLDivElement, PageProps> = (
+  { breadcrumbs, children, className = '', isBodyLastChild = false, ...props },
+  ref
+) => {
+  const wrapperClass = `${styles.wrapper} ${className}`;
+  const pageClass = `${styles.page} ${
+    styles[isBodyLastChild ? 'page--body-last' : '']
+  }`;
+  const intl = useIntl();
+  const breadcrumbsLabel = intl.formatMessage({
+    defaultMessage: 'Breadcrumbs',
+    description: 'Page: an accessible name for the breadcrumb nav.',
+    id: '/TTRRX',
+  });
+
+  return (
+    <div {...props} className={wrapperClass} ref={ref}>
+      {breadcrumbs ? (
+        <Breadcrumbs
+          aria-label={breadcrumbsLabel}
+          className={styles.breadcrumbs}
+          items={breadcrumbs}
+        />
+      ) : null}
+      <Article className={pageClass}>{children}</Article>
+    </div>
+  );
+};
+
+export const Page = forwardRef(PageWithRef);
-- 
cgit v1.2.3