diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-11-20 12:27:46 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-20 19:32:09 +0100 |
| commit | 70b4f633a6fbedb58c8b9134ac64ede854d489de (patch) | |
| tree | c757bb12ad9a588e23b25cdb8b46710ac14dbcb1 /src/pages/blog | |
| parent | 9a481f066e1427d53a06cf7aeec525a745abf03f (diff) | |
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`
Diffstat (limited to 'src/pages/blog')
| -rw-r--r-- | src/pages/blog/index.tsx | 102 | ||||
| -rw-r--r-- | src/pages/blog/page/[number].tsx | 105 |
2 files changed, 83 insertions, 124 deletions
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index 6ed6eda..0de5523 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -10,13 +10,14 @@ import { Heading, LinksWidget, Notice, - PageLayout, PostsList, Pagination, type RenderPaginationLink, type RenderPaginationItemAriaLabel, - MetaList, - MetaItem, + Page, + PageHeader, + PageBody, + PageSidebar, } from '../../components'; import { getArticles, @@ -191,7 +192,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ }); return ( - <> + <Page breadcrumbs={breadcrumbItems} isBodyLastChild> <Head> <title>{page.title}</title> {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */} @@ -209,60 +210,14 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ // eslint-disable-next-line react/no-danger -- Necessary for schema dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} /> - <PageLayout - title={title} - breadcrumb={breadcrumbItems} - breadcrumbSchema={breadcrumbSchema} - headerMeta={ - <MetaList> - <MetaItem - isInline - label={intl.formatMessage({ - defaultMessage: 'Total:', - description: 'Page: total label', - id: 'kNBXyK', - })} - value={intl.formatMessage( - { - defaultMessage: - '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', - description: 'Page: posts count meta', - id: 'RvGb2c', - }, - { postsCount: totalArticles } - )} - /> - </MetaList> - } - widgets={[ - <LinksWidget - heading={ - <Heading isFake level={3}> - {thematicsListTitle} - </Heading> - } - items={getLinksItemData( - thematicsList.map((thematic) => - getPageLinkFromRawData(thematic, 'thematic') - ) - )} - // eslint-disable-next-line react/jsx-no-literals -- Key allowed - key="thematics-list" - />, - <LinksWidget - heading={ - <Heading isFake level={3}> - {topicsListTitle} - </Heading> - } - items={getLinksItemData( - topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic')) - )} - // eslint-disable-next-line react/jsx-no-literals -- Key allowed - key="topics-list" - />, - ]} - > + <Script + dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} + // eslint-disable-next-line react/jsx-no-literals -- Id allowed + id="schema-breadcrumb" + type="application/ld+json" + /> + <PageHeader heading={title} meta={{ total: totalArticles }} /> + <PageBody className={styles.body}> {posts ? ( <PostsList className={styles.list} @@ -297,13 +252,36 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ })} </Notice> ) : null} - </PageLayout> - </> + </PageBody> + <PageSidebar> + <LinksWidget + heading={ + <Heading isFake level={3}> + {thematicsListTitle} + </Heading> + } + items={getLinksItemData( + thematicsList.map((thematic) => + getPageLinkFromRawData(thematic, 'thematic') + ) + )} + /> + <LinksWidget + heading={ + <Heading isFake level={3}> + {topicsListTitle} + </Heading> + } + items={getLinksItemData( + topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic')) + )} + /> + </PageSidebar> + </Page> ); }; -BlogPage.getLayout = (page) => - getLayout(page, { useGrid: true, withExtraPadding: true }); +BlogPage.getLayout = (page) => getLayout(page); export const getStaticProps: GetStaticProps<BlogPageProps> = async ({ locale, diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx index 27d1816..b254603 100644 --- a/src/pages/blog/page/[number].tsx +++ b/src/pages/blog/page/[number].tsx @@ -10,13 +10,14 @@ import { getLayout, Heading, LinksWidget, - PageLayout, PostsList, Pagination, type RenderPaginationLink, type RenderPaginationItemAriaLabel, - MetaList, - MetaItem, + Page, + PageHeader, + PageBody, + PageSidebar, } from '../../../components'; import { getArticles, @@ -195,7 +196,7 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ }); return ( - <> + <Page breadcrumbs={breadcrumbItems} isBodyLastChild> <Head> <title>{page.title}</title> {/*eslint-disable-next-line react/jsx-no-literals -- Name allowed */} @@ -213,60 +214,17 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ // eslint-disable-next-line react/no-danger -- Necessary for schema dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }} /> - <PageLayout - title={pageTitleWithPageNumber} - breadcrumb={breadcrumbItems} - breadcrumbSchema={breadcrumbSchema} - headerMeta={ - <MetaList> - <MetaItem - isInline - label={intl.formatMessage({ - defaultMessage: 'Total:', - description: 'Page: total label', - id: 'kNBXyK', - })} - value={intl.formatMessage( - { - defaultMessage: - '{postsCount, plural, =0 {No articles} one {# article} other {# articles}}', - description: 'Page: posts count meta', - id: 'RvGb2c', - }, - { postsCount: totalArticles } - )} - /> - </MetaList> - } - widgets={[ - <LinksWidget - heading={ - <Heading isFake level={3}> - {thematicsListTitle} - </Heading> - } - items={getLinksItemData( - thematicsList.map((thematic) => - getPageLinkFromRawData(thematic, 'thematic') - ) - )} - // eslint-disable-next-line react/jsx-no-literals -- Key allowed - key="thematics-list" - />, - <LinksWidget - heading={ - <Heading isFake level={3}> - {topicsListTitle} - </Heading> - } - items={getLinksItemData( - topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic')) - )} - // eslint-disable-next-line react/jsx-no-literals -- Key allowed - key="topics-list" - />, - ]} - > + <Script + dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }} + // eslint-disable-next-line react/jsx-no-literals -- Id allowed + id="schema-breadcrumb" + type="application/ld+json" + /> + <PageHeader + heading={pageTitleWithPageNumber} + meta={{ total: totalArticles }} + /> + <PageBody> <PostsList posts={posts ?? []} sortByYear /> <Pagination aria-label={paginationAriaLabel} @@ -276,13 +234,36 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ renderLink={renderPaginationLink} total={totalArticles} /> - </PageLayout> - </> + </PageBody> + <PageSidebar> + <LinksWidget + heading={ + <Heading isFake level={3}> + {thematicsListTitle} + </Heading> + } + items={getLinksItemData( + thematicsList.map((thematic) => + getPageLinkFromRawData(thematic, 'thematic') + ) + )} + /> + <LinksWidget + heading={ + <Heading isFake level={3}> + {topicsListTitle} + </Heading> + } + items={getLinksItemData( + topicsList.map((topic) => getPageLinkFromRawData(topic, 'topic')) + )} + /> + </PageSidebar> + </Page> ); }; -BlogPage.getLayout = (page) => - getLayout(page, { useGrid: true, withExtraPadding: true }); +BlogPage.getLayout = (page) => getLayout(page); type BlogPageParams = { number: string; |