From d592085dc0fec023dd9f3437d4c756d402ed8c8f Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 18 Dec 2023 11:56:59 +0100 Subject: fix(pages): use dynamic imports for the table of contents The ToCWidget relies on Javascript to display the headings. If JS is disabled in the browser, the widget is empty. For a better UX, we should use dynamic imports. Now, the ToC is only displayed when JS is enabled. --- src/pages/article/[slug].tsx | 14 +++++++++++--- src/pages/cv.tsx | 11 +++++++++-- src/pages/mentions-legales.tsx | 14 +++++++++----- src/pages/projets/[slug].tsx | 10 ++++++++-- src/pages/sujet/[slug].tsx | 11 +++++++++-- src/pages/thematique/[slug].tsx | 11 +++++++++-- 6 files changed, 55 insertions(+), 16 deletions(-) (limited to 'src/pages') diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx index ecff692..9c7a156 100644 --- a/src/pages/article/[slug].tsx +++ b/src/pages/article/[slug].tsx @@ -1,6 +1,7 @@ /* eslint-disable max-statements */ import type { ParsedUrlQuery } from 'querystring'; import type { GetStaticPaths, GetStaticProps } from 'next'; +import dynamic from 'next/dynamic'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { type FC, useCallback } from 'react'; @@ -16,7 +17,6 @@ import { PageFooter, PageComments, PageSidebar, - TocWidget, LoadingPage, LoadingPageComments, } from '../../components'; @@ -52,6 +52,13 @@ import { usePrism, } from '../../utils/hooks'; +const Toc = dynamic( + async () => import('../../components').then((mod) => mod.TocWidget), + { + ssr: false, + } +); + type ArticlePageProps = { data: { comments: WPComment[]; @@ -228,7 +235,7 @@ const Article: FC> = ({ data }) => { }} /> - {messages.tocTitle}} tree={tree} /> @@ -291,7 +298,8 @@ export const getStaticProps: GetStaticProps = async ({ locale, params, }) => { - const post = await fetchPost((params as PostParams).slug); + const { slug } = params as PostParams; + const post = await fetchPost(slug); const comments = await fetchCommentsList({ first: post.commentCount ?? 1, where: { contentId: post.databaseId }, diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx index 92c3e9e..f0e1e8b 100644 --- a/src/pages/cv.tsx +++ b/src/pages/cv.tsx @@ -1,4 +1,5 @@ import type { GetStaticProps } from 'next'; +import dynamic from 'next/dynamic'; import Head from 'next/head'; import NextImage from 'next/image'; import React, { type ReactNode } from 'react'; @@ -12,7 +13,6 @@ import { Page, PageHeader, PageSidebar, - TocWidget, PageBody, } from '../components'; import { mdxComponents } from '../components/mdx'; @@ -24,6 +24,13 @@ import { getAboutPageGraph, getSchemaFrom } from '../utils/helpers'; import { loadTranslation } from '../utils/helpers/server'; import { useBreadcrumbs, useHeadingsTree } from '../utils/hooks'; +const Toc = dynamic( + async () => import('../components').then((mod) => mod.TocWidget), + { + ssr: false, + } +); + const DownloadLink = (chunks: ReactNode) => ( {chunks} @@ -133,7 +140,7 @@ const CVPage: NextPageWithLayout = () => { }} /> - {messages.toc.title}} tree={tree} /> diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx index 13fd919..f112742 100644 --- a/src/pages/mentions-legales.tsx +++ b/src/pages/mentions-legales.tsx @@ -1,4 +1,5 @@ import type { GetStaticProps } from 'next'; +import dynamic from 'next/dynamic'; import Head from 'next/head'; import { useIntl } from 'react-intl'; import { @@ -6,7 +7,6 @@ import { Page, PageHeader, PageSidebar, - TocWidget, Heading, PageBody, } from '../components'; @@ -19,6 +19,13 @@ import { getSchemaFrom, getWebPageGraph } from '../utils/helpers'; import { loadTranslation } from '../utils/helpers/server'; import { useBreadcrumbs, useHeadingsTree } from '../utils/hooks'; +const Toc = dynamic( + async () => import('../components').then((mod) => mod.TocWidget), + { + ssr: false, + } +); + /** * Legal Notice page. */ @@ -76,10 +83,7 @@ const LegalNoticePage: NextPageWithLayout = () => { }} /> - {tocTitle}} - tree={tree} - /> + {tocTitle}} tree={tree} /> diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx index 1f9723a..958f61f 100644 --- a/src/pages/projets/[slug].tsx +++ b/src/pages/projets/[slug].tsx @@ -19,7 +19,6 @@ import { SocialLink, Spinner, Time, - TocWidget, getLayout, type ProjectOverviewProps, } from '../../components'; @@ -51,6 +50,13 @@ import { useHeadingsTree, } from '../../utils/hooks'; +const Toc = dynamic( + async () => import('../../components').then((mod) => mod.TocWidget), + { + ssr: false, + } +); + const getGithubRepoInputFrom = (namespace: string) => { const parts = namespace.split('/'); @@ -257,7 +263,7 @@ const ProjectPage: NextPageWithLayout = ({ data }) => { }} /> - {messages.widgets.tocTitle}} tree={tree} /> diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx index af78185..8f46677 100644 --- a/src/pages/sujet/[slug].tsx +++ b/src/pages/sujet/[slug].tsx @@ -1,6 +1,7 @@ /* eslint-disable max-statements */ import type { ParsedUrlQuery } from 'querystring'; import type { GetStaticPaths, GetStaticProps } from 'next'; +import dynamic from 'next/dynamic'; import Head from 'next/head'; import NextImage from 'next/image'; import { useRouter } from 'next/router'; @@ -15,7 +16,6 @@ import { PageSidebar, PageBody, LoadingPage, - TocWidget, Spinner, } from '../../components'; import { @@ -49,6 +49,13 @@ import { useTopicsList, } from '../../utils/hooks'; +const Toc = dynamic( + async () => import('../../components').then((mod) => mod.TocWidget), + { + ssr: false, + } +); + export type TopicPageProps = { data: { currentTopic: WPTopic; @@ -169,7 +176,7 @@ const TopicPage: NextPageWithLayout = ({ data }) => { }} /> - {messages.widgets.tocTitle}} tree={[ ...tree, diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx index 56b956f..ef21fb4 100644 --- a/src/pages/thematique/[slug].tsx +++ b/src/pages/thematique/[slug].tsx @@ -1,6 +1,7 @@ /* eslint-disable max-statements */ import type { ParsedUrlQuery } from 'querystring'; import type { GetStaticPaths, GetStaticProps } from 'next'; +import dynamic from 'next/dynamic'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useIntl } from 'react-intl'; @@ -14,7 +15,6 @@ import { PageSidebar, PageBody, LoadingPage, - TocWidget, Spinner, } from '../../components'; import { @@ -48,6 +48,13 @@ import { useThematicsList, } from '../../utils/hooks'; +const Toc = dynamic( + async () => import('../../components').then((mod) => mod.TocWidget), + { + ssr: false, + } +); + export type ThematicPageProps = { data: { currentThematic: WPThematic; @@ -152,7 +159,7 @@ const ThematicPage: NextPageWithLayout = ({ data }) => { }} /> - {messages.widgets.tocTitle}} tree={[ ...tree, -- cgit v1.2.3