summaryrefslogtreecommitdiffstats
path: root/src/components/templates/page/page-layout.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-05-17 22:48:41 +0200
committerArmand Philippot <git@armandphilippot.com>2022-05-17 22:48:41 +0200
commit271ef6debaca7ed9a01829dcef3a37e90a2dff05 (patch)
treeaa1513b40e7020a44cfcaaedc3a33d39ecfb8af7 /src/components/templates/page/page-layout.tsx
parent4e53a8654441481029746ff4e35a4a19c8d83709 (diff)
chore: use persistent layout
It prevents to rerender the common components between pages (header, footer...).
Diffstat (limited to 'src/components/templates/page/page-layout.tsx')
-rw-r--r--src/components/templates/page/page-layout.tsx35
1 files changed, 17 insertions, 18 deletions
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
index 2ff2084..d171944 100644
--- a/src/components/templates/page/page-layout.tsx
+++ b/src/components/templates/page/page-layout.tsx
@@ -21,19 +21,20 @@ import TableOfContents from '@components/organisms/widgets/table-of-contents';
import { type SendCommentVars } from '@services/graphql/api';
import { sendComment } from '@services/graphql/comments';
import useIsMounted from '@utils/hooks/use-is-mounted';
+import Script from 'next/script';
import { FC, HTMLAttributes, ReactNode, useRef, useState } from 'react';
import { useIntl } from 'react-intl';
-import Layout, { type LayoutProps } from '../layout/layout';
+import { BreadcrumbList } from 'schema-dts';
import styles from './page-layout.module.scss';
-export type PageLayoutProps = Pick<
- LayoutProps,
- 'breadcrumbSchema' | 'isHome'
-> & {
+export type PageLayoutProps = {
/**
* True if the page accepts new comments. Default: false.
*/
allowComments?: boolean;
+ /**
+ * Set attributes to the page body.
+ */
bodyAttributes?: HTMLAttributes<HTMLDivElement>;
/**
* Set additional classnames to the body wrapper.
@@ -44,6 +45,10 @@ export type PageLayoutProps = Pick<
*/
breadcrumb: BreadcrumbItem[];
/**
+ * The breadcrumb JSON schema.
+ */
+ breadcrumbSchema: BreadcrumbList['itemListElement'][];
+ /**
* The main content of the page.
*/
children: ReactNode;
@@ -98,7 +103,6 @@ const PageLayout: FC<PageLayoutProps> = ({
headerMeta,
id,
intro,
- isHome = false,
title,
widgets,
withToC = false,
@@ -117,13 +121,7 @@ const PageLayout: FC<PageLayoutProps> = ({
const bodyRef = useRef<HTMLDivElement>(null);
const isMounted = useIsMounted(bodyRef);
-
const hasComments = Array.isArray(comments) && comments.length > 0;
- const articleModifier =
- hasComments || allowComments
- ? 'article--has-comments'
- : 'article--no-comments';
-
const [status, setStatus] = useState<NoticeKind>('info');
const [statusMessage, setStatusMessage] = useState<string>('');
const isReplyRef = useRef<boolean>(false);
@@ -186,11 +184,12 @@ const PageLayout: FC<PageLayoutProps> = ({
};
return (
- <Layout
- breadcrumbSchema={breadcrumbSchema}
- isHome={isHome}
- className={`${styles.article} ${styles[articleModifier]}`}
- >
+ <>
+ <Script
+ id="schema-breadcrumb"
+ type="application/ld+json"
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+ />
<Breadcrumb
items={breadcrumb}
className={styles.breadcrumb}
@@ -291,7 +290,7 @@ const PageLayout: FC<PageLayoutProps> = ({
</section>
</div>
)}
- </Layout>
+ </>
);
};