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.

1 files changed, 8 insertions, 2 deletions

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<ProjectPageProps> = ({ data }) => {
         }}
       />
       <PageSidebar>
-        <TocWidget
+        <Toc
           heading={<Heading level={2}>{messages.widgets.tocTitle}</Heading>}
           tree={tree}
         />