summaryrefslogtreecommitdiffstats
path: root/src/components/templates/page
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/templates/page')
-rw-r--r--src/components/templates/page/page-layout.module.scss92
-rw-r--r--src/components/templates/page/page-layout.stories.tsx387
-rw-r--r--src/components/templates/page/page-layout.test.tsx107
-rw-r--r--src/components/templates/page/page-layout.tsx297
4 files changed, 883 insertions, 0 deletions
diff --git a/src/components/templates/page/page-layout.module.scss b/src/components/templates/page/page-layout.module.scss
new file mode 100644
index 0000000..c7674ae
--- /dev/null
+++ b/src/components/templates/page/page-layout.module.scss
@@ -0,0 +1,92 @@
+@use "@styles/abstracts/functions" as fun;
+@use "@styles/abstracts/mixins" as mix;
+@use "@styles/abstracts/placeholders";
+
+.breadcrumb {
+ @extend %grid;
+
+ grid-column: 1 / -1;
+ padding: var(--spacing-md) 0;
+
+ > * {
+ grid-column: 2;
+ }
+
+ &__items {
+ font-size: var(--font-size-sm);
+ }
+}
+
+.header {
+ grid-column: 1 / -1;
+ margin-bottom: var(--spacing-md);
+}
+
+.body {
+ grid-column: 2;
+
+ > * + * {
+ margin-top: var(--spacing-sm);
+ margin-bottom: var(--spacing-sm);
+ }
+}
+
+.sidebar {
+ grid-column: 2;
+
+ &--first {
+ margin-bottom: var(--spacing-xs);
+
+ @include mix.media("screen") {
+ @include mix.dimensions("lg") {
+ grid-column: 1;
+ align-self: stretch;
+ margin: 0 var(--spacing-xs) var(--spacing-md);
+ }
+ }
+ }
+
+ &--last {
+ margin: var(--spacing-lg) 0 0;
+
+ @include mix.media("screen") {
+ @include mix.dimensions("md") {
+ grid-column: 3;
+ align-self: stretch;
+ margin: 0 var(--spacing-xs) var(--spacing-md);
+ }
+ }
+ }
+}
+
+.footer {
+ grid-column: 2;
+ margin: var(--spacing-sm) 0 var(--spacing-2xs);
+}
+
+.comments {
+ @extend %grid;
+
+ grid-column: 1 / -1;
+ margin: var(--spacing-lg) 0 0;
+ padding: 0 0 var(--spacing-lg);
+ background: var(--color-bg-secondary);
+ border-top: fun.convert-px(3) solid var(--color-border-light);
+
+ &__section {
+ grid-column: 2;
+
+ &:first-child {
+ margin: var(--spacing-md) 0 0;
+ }
+ }
+
+ &__no-comments {
+ text-align: center;
+ }
+
+ &__form {
+ max-width: 40ch;
+ margin: auto;
+ }
+}
diff --git a/src/components/templates/page/page-layout.stories.tsx b/src/components/templates/page/page-layout.stories.tsx
new file mode 100644
index 0000000..06c6c24
--- /dev/null
+++ b/src/components/templates/page/page-layout.stories.tsx
@@ -0,0 +1,387 @@
+import ButtonLink from '@components/atoms/buttons/button-link';
+import Heading from '@components/atoms/headings/heading';
+import Link from '@components/atoms/links/link';
+import { comments } from '@components/organisms/layout/comments-list.fixture';
+import PostsList from '@components/organisms/layout/posts-list';
+import { posts } from '@components/organisms/layout/posts-list.fixture';
+import LinksListWidget from '@components/organisms/widgets/links-list-widget';
+import Sharing from '@components/organisms/widgets/sharing';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { LayoutBase } from '../layout/layout.stories';
+import PageLayoutComponent from './page-layout';
+
+/**
+ * PageLayout - Storybook Meta
+ */
+export default {
+ title: 'Templates/Page',
+ component: PageLayoutComponent,
+ args: {
+ allowComments: false,
+ breadcrumbSchema: [],
+ },
+ argTypes: {
+ allowComments: {
+ control: {
+ type: 'boolean',
+ },
+ description: 'Determine if the comment form is displayed.',
+ table: {
+ category: 'Options',
+ defaultValue: { summary: false },
+ },
+ type: {
+ name: 'boolean',
+ required: false,
+ },
+ },
+ bodyAttributes: {
+ description: 'Set additional HTML attributes to the main content body.',
+ table: {
+ category: 'Options',
+ },
+ type: {
+ name: 'object',
+ required: false,
+ value: {},
+ },
+ },
+ bodyClassName: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set additional classnames to the main content body.',
+ table: {
+ category: 'Styles',
+ },
+ type: {
+ name: 'string',
+ required: false,
+ },
+ },
+ breadcrumb: {
+ description: 'The breadcrumb items.',
+ type: {
+ name: 'object',
+ required: true,
+ value: {},
+ },
+ },
+ breadcrumbSchema: {
+ control: {
+ type: null,
+ },
+ description: 'The JSON schema for breadcrumb items.',
+ type: {
+ name: 'object',
+ required: true,
+ value: {},
+ },
+ },
+ children: {
+ control: {
+ type: 'text',
+ },
+ description: 'The page content.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
+ comments: {
+ description: 'The page comments.',
+ table: {
+ category: 'Options',
+ },
+ type: {
+ name: 'object',
+ required: false,
+ value: {},
+ },
+ },
+ footerMeta: {
+ description: 'The metadata to display in the page footer.',
+ table: {
+ category: 'Options',
+ },
+ type: {
+ name: 'object',
+ required: false,
+ value: {},
+ },
+ },
+ headerMeta: {
+ description: 'The metadata to display in the page header.',
+ table: {
+ category: 'Options',
+ },
+ type: {
+ name: 'object',
+ required: false,
+ value: {},
+ },
+ },
+ id: {
+ control: {
+ type: 'number',
+ },
+ description: 'The page id.',
+ type: {
+ name: 'number',
+ required: false,
+ },
+ },
+ intro: {
+ control: {
+ type: 'text',
+ },
+ description: 'The page introduction.',
+ table: {
+ category: 'Options',
+ },
+ type: {
+ name: 'string',
+ required: false,
+ },
+ },
+ title: {
+ control: {
+ type: 'text',
+ },
+ description: 'The page title.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
+ widgets: {
+ control: {
+ type: null,
+ },
+ description: 'An array of widgets to put inside the last sidebar.',
+ type: {
+ name: 'object',
+ required: false,
+ value: {},
+ },
+ },
+ withToC: {
+ control: {
+ type: 'boolean',
+ },
+ description: 'Determine if the Table of Contents should be in the page.',
+ table: {
+ category: 'Options',
+ defaultValue: { summary: false },
+ },
+ type: {
+ name: 'boolean',
+ required: false,
+ },
+ },
+ },
+ decorators: [
+ (Story, context) => (
+ <LayoutBase
+ useGrid={true}
+ withExtraPadding={!context.args.allowComments && !context.args.comments}
+ {...LayoutBase.args}
+ >
+ <Story />
+ </LayoutBase>
+ ),
+ ],
+ parameters: {
+ layout: 'fullscreen',
+ },
+} as ComponentMeta<typeof PageLayoutComponent>;
+
+const Template: ComponentStory<typeof PageLayoutComponent> = (args) => (
+ <PageLayoutComponent {...args} />
+);
+
+const pageTitle = 'Incidunt ad earum';
+const pageIntro =
+ 'Recusandae mollitia enim quo omnis rerum enim corporis ratione quidem. Pariatur omnis quas est ut ut numquam totam. Sunt sapiente nostrum aut sunt provident perspiciatis magni illum. Quidem nihil velit quasi fugit minima sint.';
+const pageBreadcrumb = [
+ { id: 'home', url: '#', name: 'Home' },
+ { id: 'page', url: '#', name: pageTitle },
+];
+
+/**
+ * Page Layout Stories - Single Page
+ */
+export const SinglePage = Template.bind({});
+SinglePage.args = {
+ breadcrumb: pageBreadcrumb,
+ title: pageTitle,
+ intro: pageIntro,
+ children: (
+ <>
+ <Heading level={2}>Impedit commodi rerum</Heading>
+ <p>
+ Omnis vel earum cupiditate delectus reprehenderit perferendis distinctio
+ omnis. Laudantium rem tempore eligendi porro officia est dolorum
+ assumenda. Corrupti tempore quia ab. Quidem est inventore. Autem
+ nesciunt sed rerum praesentium.
+ </p>
+ <p>
+ Illo nostrum inventore tenetur quo repellendus autem nisi nostrum
+ dolore. Et velit assumenda. Veniam harum officia et. Blanditiis et et
+ qui cum. Rerum illum quo doloribus neque non velit. Unde iusto et eaque
+ a ut.
+ </p>
+ <Heading level={2}>Et omnis ducimus</Heading>
+ <p>
+ Dolor quidem quas perferendis in nam molestiae. Accusamus quidem
+ accusantium quaerat est praesentium accusamus ab dolorem. Beatae illum
+ totam et corrupti assumenda corporis aut illo animi.
+ </p>
+ <p>
+ Ad rem soluta. Est tenetur consequatur sequi voluptates autem. Molestiae
+ in neque dignissimos. Dolorum numquam quos quam voluptas atque facilis
+ et. Accusantium fuga architecto excepturi consequatur libero est.
+ </p>
+ </>
+ ),
+ widgets: [
+ <Sharing
+ key="sidebar2-widget1"
+ data={{ excerpt: pageIntro, title: pageTitle, url: '#' }}
+ media={[
+ 'diaspora',
+ 'email',
+ 'facebook',
+ 'journal-du-hacker',
+ 'linkedin',
+ 'twitter',
+ ]}
+ level={2}
+ expanded={true}
+ />,
+ ],
+ withToC: true,
+};
+
+const postBreadcrumb = [
+ { id: 'home', url: '#', name: 'Home' },
+ { id: 'blog', url: '#', name: 'Blog' },
+ { id: 'post', url: '#', name: pageTitle },
+];
+
+/**
+ * Page Layout Stories - Post
+ */
+export const Post = Template.bind({});
+Post.args = {
+ breadcrumb: postBreadcrumb,
+ title: pageTitle,
+ intro: pageIntro,
+ headerMeta: {
+ publication: { date: '2020-03-14' },
+ thematics: [
+ <Link key="cat1" href="#">
+ Cat 1
+ </Link>,
+ <Link key="cat2" href="#">
+ Cat 2
+ </Link>,
+ ],
+ },
+ footerMeta: {
+ custom: {
+ label: 'Read more about:',
+ value: <ButtonLink target="#">Topic 1</ButtonLink>,
+ },
+ },
+ children: (
+ <>
+ <Heading level={2}>Impedit commodi rerum</Heading>
+ <p>
+ Omnis vel earum cupiditate delectus reprehenderit perferendis distinctio
+ omnis. Laudantium rem tempore eligendi porro officia est dolorum
+ assumenda. Corrupti tempore quia ab. Quidem est inventore. Autem
+ nesciunt sed rerum praesentium.
+ </p>
+ <p>
+ Illo nostrum inventore tenetur quo repellendus autem nisi nostrum
+ dolore. Et velit assumenda. Veniam harum officia et. Blanditiis et et
+ qui cum. Rerum illum quo doloribus neque non velit. Unde iusto et eaque
+ a ut.
+ </p>
+ <Heading level={2}>Et omnis ducimus</Heading>
+ <p>
+ Dolor quidem quas perferendis in nam molestiae. Accusamus quidem
+ accusantium quaerat est praesentium accusamus ab dolorem. Beatae illum
+ totam et corrupti assumenda corporis aut illo animi.
+ </p>
+ <p>
+ Ad rem soluta. Est tenetur consequatur sequi voluptates autem. Molestiae
+ in neque dignissimos. Dolorum numquam quos quam voluptas atque facilis
+ et. Accusantium fuga architecto excepturi consequatur libero est.
+ </p>
+ </>
+ ),
+ widgets: [
+ <Sharing
+ key="sidebar2-widget1"
+ data={{ excerpt: pageIntro, title: pageTitle, url: '#' }}
+ media={[
+ 'diaspora',
+ 'email',
+ 'facebook',
+ 'journal-du-hacker',
+ 'linkedin',
+ 'twitter',
+ ]}
+ level={2}
+ expanded={true}
+ />,
+ ],
+ withToC: true,
+ comments: comments,
+ allowComments: true,
+};
+
+const postsListBreadcrumb = [
+ { id: 'home', url: '#', name: 'Home' },
+ { id: 'blog', url: '#', name: 'Blog' },
+];
+
+const blogCategories = [
+ { name: 'Cat 1', url: '#' },
+ {
+ name: 'Cat 2',
+ url: '#',
+ },
+ { name: 'Cat 3', url: '#' },
+ { name: 'Cat 4', url: '#' },
+];
+
+/**
+ * Page Layout Stories - Posts list
+ */
+export const Blog = Template.bind({});
+Blog.args = {
+ breadcrumb: postsListBreadcrumb,
+ title: 'Blog',
+ headerMeta: { total: posts.length },
+ children: (
+ <>
+ <PostsList
+ posts={posts}
+ byYear={true}
+ total={posts.length}
+ searchPage="#"
+ />
+ </>
+ ),
+ widgets: [
+ <LinksListWidget
+ key="sidebar-widget1"
+ items={blogCategories}
+ title="Categories"
+ level={2}
+ />,
+ ],
+};
diff --git a/src/components/templates/page/page-layout.test.tsx b/src/components/templates/page/page-layout.test.tsx
new file mode 100644
index 0000000..f2d07d7
--- /dev/null
+++ b/src/components/templates/page/page-layout.test.tsx
@@ -0,0 +1,107 @@
+import { comments } from '@components/organisms/layout/comments-list.fixture';
+import { render, screen } from '@test-utils';
+import { BreadcrumbList } from 'schema-dts';
+import PageLayout from './page-layout';
+
+const title = 'Incidunt ad earum';
+const breadcrumb = [
+ { id: 'home', url: '#', name: 'Home' },
+ { id: 'page', url: '#', name: title },
+];
+const breadcrumbSchema: BreadcrumbList['itemListElement'][] = [];
+const children =
+ 'Reprehenderit aut quis aperiam magnam quia id. Vero enim animi placeat quia. Laborum sit odio minima. Dolores et debitis eaque iste quidem. Omnis aliquam illum porro ea non. Quaerat totam iste quos ex facilis officia accusantium.';
+
+describe('PageLayout', () => {
+ it('renders the page title', () => {
+ render(
+ <PageLayout
+ breadcrumb={breadcrumb}
+ breadcrumbSchema={breadcrumbSchema}
+ title={title}
+ >
+ {children}
+ </PageLayout>
+ );
+ expect(
+ screen.getByRole('heading', { level: 1, name: title })
+ ).toBeInTheDocument();
+ });
+
+ it('renders the page content', () => {
+ render(
+ <PageLayout
+ breadcrumb={breadcrumb}
+ breadcrumbSchema={breadcrumbSchema}
+ title={title}
+ >
+ {children}
+ </PageLayout>
+ );
+ expect(screen.getByText(children)).toBeInTheDocument();
+ });
+
+ it('renders the breadcrumb', () => {
+ render(
+ <PageLayout
+ breadcrumb={breadcrumb}
+ breadcrumbSchema={breadcrumbSchema}
+ title={title}
+ >
+ {children}
+ </PageLayout>
+ );
+ expect(
+ screen.getByRole('navigation', { name: 'Breadcrumb' })
+ ).toBeInTheDocument();
+ });
+
+ it('renders the table of contents', () => {
+ render(
+ <PageLayout
+ breadcrumb={breadcrumb}
+ breadcrumbSchema={breadcrumbSchema}
+ title={title}
+ withToC={true}
+ >
+ {children}
+ </PageLayout>
+ );
+ expect(
+ screen.getByRole('heading', { level: 2, name: /Table of Contents/i })
+ ).toBeInTheDocument();
+ });
+
+ it('renders the comment form', () => {
+ render(
+ <PageLayout
+ breadcrumb={breadcrumb}
+ breadcrumbSchema={breadcrumbSchema}
+ title={title}
+ allowComments={true}
+ >
+ {children}
+ </PageLayout>
+ );
+ expect(
+ screen.getByRole('form', { name: /Leave a comment/i })
+ ).toBeInTheDocument();
+ });
+
+ it('renders the comments list', () => {
+ render(
+ <PageLayout
+ breadcrumb={breadcrumb}
+ breadcrumbSchema={breadcrumbSchema}
+ title={title}
+ allowComments={true}
+ comments={comments}
+ >
+ {children}
+ </PageLayout>
+ );
+ expect(
+ screen.getByRole('heading', { level: 2, name: /Comments/i })
+ ).toBeInTheDocument();
+ });
+});
diff --git a/src/components/templates/page/page-layout.tsx b/src/components/templates/page/page-layout.tsx
new file mode 100644
index 0000000..f96666e
--- /dev/null
+++ b/src/components/templates/page/page-layout.tsx
@@ -0,0 +1,297 @@
+import Heading from '@components/atoms/headings/heading';
+import Notice, { type NoticeKind } from '@components/atoms/layout/notice';
+import Sidebar from '@components/atoms/layout/sidebar';
+import { MetaData } from '@components/molecules/layout/meta';
+import PageFooter, {
+ type PageFooterProps,
+} from '@components/molecules/layout/page-footer';
+import PageHeader, {
+ type PageHeaderProps,
+} from '@components/molecules/layout/page-header';
+import Breadcrumb, {
+ type BreadcrumbItem,
+} from '@components/molecules/nav/breadcrumb';
+import CommentForm, {
+ type CommentFormProps,
+} from '@components/organisms/forms/comment-form';
+import CommentsList, {
+ type CommentsListProps,
+} from '@components/organisms/layout/comments-list';
+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 { BreadcrumbList } from 'schema-dts';
+import styles from './page-layout.module.scss';
+
+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.
+ */
+ bodyClassName?: string;
+ /**
+ * The breadcrumb items.
+ */
+ breadcrumb: BreadcrumbItem[];
+ /**
+ * The breadcrumb JSON schema.
+ */
+ breadcrumbSchema: BreadcrumbList['itemListElement'][];
+ /**
+ * The main content of the page.
+ */
+ children: ReactNode;
+ /**
+ * The page comments
+ */
+ comments?: CommentsListProps['comments'];
+ /**
+ * The footer metadata.
+ */
+ footerMeta?: PageFooterProps['meta'];
+ /**
+ * The header metadata.
+ */
+ headerMeta?: PageHeaderProps['meta'];
+ /**
+ * The page id.
+ */
+ id?: number;
+ /**
+ * The page introduction.
+ */
+ intro?: PageHeaderProps['intro'];
+ /**
+ * The page title.
+ */
+ title: PageHeaderProps['title'];
+ /**
+ * An array of widgets to put in the last sidebar.
+ */
+ widgets?: ReactNode[];
+ /**
+ * Show the table of contents. Default: false.
+ */
+ withToC?: boolean;
+};
+
+/**
+ * PageLayout component
+ *
+ * Render the pages layout.
+ */
+const PageLayout: FC<PageLayoutProps> = ({
+ children,
+ allowComments = false,
+ bodyAttributes,
+ bodyClassName = '',
+ breadcrumb,
+ breadcrumbSchema,
+ comments,
+ footerMeta,
+ headerMeta,
+ id,
+ intro,
+ title,
+ widgets,
+ withToC = false,
+}) => {
+ const intl = useIntl();
+ const commentsTitle = intl.formatMessage({
+ defaultMessage: 'Comments',
+ description: 'PageLayout: comments title',
+ id: '+dJU3e',
+ });
+ const commentFormTitle = intl.formatMessage({
+ defaultMessage: 'Leave a comment',
+ description: 'PageLayout: comment form title',
+ id: 'kzIYoQ',
+ });
+
+ const bodyRef = useRef<HTMLDivElement>(null);
+ const isMounted = useIsMounted(bodyRef);
+ const hasComments = Array.isArray(comments) && comments.length > 0;
+ const [status, setStatus] = useState<NoticeKind>('info');
+ const [statusMessage, setStatusMessage] = useState<string>('');
+ const isReplyRef = useRef<boolean>(false);
+
+ const saveComment: CommentFormProps['saveComment'] = async (data, reset) => {
+ if (!id) throw new Error('Page id missing. Cannot save comment.');
+
+ const { comment: commentBody, email, name, parentId, website } = data;
+ const commentData: SendCommentVars = {
+ author: name,
+ authorEmail: email,
+ authorUrl: website || '',
+ clientMutationId: 'contact',
+ commentOn: id,
+ content: commentBody,
+ parent: parentId,
+ };
+ const { comment, success } = await sendComment(commentData);
+
+ isReplyRef.current = !!parentId;
+
+ if (success) {
+ setStatus('success');
+ const successPrefix = intl.formatMessage({
+ defaultMessage: 'Thanks, your comment was successfully sent.',
+ description: 'PageLayout: comment form success message',
+ id: 'B290Ph',
+ });
+ const successMessage = comment?.approved
+ ? intl.formatMessage({
+ defaultMessage: 'It has been approved.',
+ id: 'g3+Ahv',
+ description: 'PageLayout: comment approved.',
+ })
+ : intl.formatMessage({
+ defaultMessage: 'It is now awaiting moderation.',
+ id: 'Vmj5cw',
+ description: 'PageLayout: comment awaiting moderation',
+ });
+ setStatusMessage(`${successPrefix} ${successMessage}`);
+ reset();
+ } else {
+ const error = intl.formatMessage({
+ defaultMessage: 'An error occurred:',
+ description: 'PageLayout: comment form error message',
+ id: 'fkcTGp',
+ });
+ setStatus('error');
+ setStatusMessage(error);
+ }
+ };
+
+ /**
+ * Check if meta properties are defined.
+ *
+ * @param {MetaData} meta - The metadata.
+ */
+ const hasMeta = (meta: MetaData) => {
+ return Object.values(meta).every((value) => value);
+ };
+
+ return (
+ <>
+ <Script
+ id="schema-breadcrumb"
+ type="application/ld+json"
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+ />
+ <Breadcrumb
+ items={breadcrumb}
+ className={styles.breadcrumb}
+ itemClassName={styles.breadcrumb__items}
+ />
+ <PageHeader
+ title={title}
+ intro={intro}
+ meta={headerMeta}
+ className={styles.header}
+ />
+ {withToC && (
+ <Sidebar
+ className={`${styles.sidebar} ${styles['sidebar--first']}`}
+ aria-label={intl.formatMessage({
+ defaultMessage: 'Table of contents sidebar',
+ id: 'Q+1GbT',
+ description: 'PageLayout: accessible name for ToC sidebar',
+ })}
+ >
+ {isMounted && bodyRef.current && (
+ <TableOfContents wrapper={bodyRef.current} />
+ )}
+ </Sidebar>
+ )}
+ {typeof children === 'string' ? (
+ <div
+ ref={bodyRef}
+ className={`${styles.body} ${bodyClassName}`}
+ dangerouslySetInnerHTML={{ __html: children }}
+ {...bodyAttributes}
+ />
+ ) : (
+ <div ref={bodyRef} className={`${styles.body} ${bodyClassName}`}>
+ {children}
+ </div>
+ )}
+ {footerMeta && hasMeta(footerMeta) && (
+ <PageFooter meta={footerMeta} className={styles.footer} />
+ )}
+ <Sidebar
+ className={`${styles.sidebar} ${styles['sidebar--last']}`}
+ aria-label={intl.formatMessage({
+ defaultMessage: 'Sidebar',
+ id: 'c556Qo',
+ description: 'PageLayout: accessible name for the sidebar',
+ })}
+ >
+ {widgets}
+ </Sidebar>
+ {allowComments && (
+ <div className={styles.comments} id="comments">
+ <section className={styles.comments__section}>
+ <Heading level={2} alignment="center">
+ {commentsTitle}
+ </Heading>
+ {hasComments ? (
+ <CommentsList
+ comments={comments}
+ depth={2}
+ Notice={
+ isReplyRef.current === true && (
+ <Notice
+ kind={status}
+ message={statusMessage}
+ className={styles.notice}
+ />
+ )
+ }
+ saveComment={saveComment}
+ />
+ ) : (
+ <p className={styles['comments__no-comments']}>
+ {intl.formatMessage({
+ defaultMessage: 'No comments.',
+ id: 'sBwfCy',
+ description: 'PageLayout: no comments text',
+ })}
+ </p>
+ )}
+ </section>
+ <section className={styles.comments__section}>
+ <CommentForm
+ className={styles.comments__form}
+ saveComment={saveComment}
+ title={commentFormTitle}
+ titleAlignment="center"
+ Notice={
+ isReplyRef.current === false && (
+ <Notice
+ kind={status}
+ message={statusMessage}
+ className={styles.notice}
+ />
+ )
+ }
+ />
+ </section>
+ </div>
+ )}
+ </>
+ );
+};
+
+export default PageLayout;
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 08:47:35 +0000