From d592085dc0fec023dd9f3437d4c756d402ed8c8f Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
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/cv.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

(limited to 'src/pages/cv.tsx')

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) => (
   <Link href={data.file} isDownload>
     {chunks}
@@ -133,7 +140,7 @@ const CVPage: NextPageWithLayout = () => {
         }}
       />
       <PageSidebar>
-        <TocWidget
+        <Toc
           heading={<Heading level={3}>{messages.toc.title}</Heading>}
           tree={tree}
         />
-- 
cgit v1.2.3