[components/MDX][s]: observer moved to MDXContent

site/components/MDX.js

@@ -1,27 +1,13 @@
-import { NextSeo } from 'next-seo'
+import { NextSeo } from "next-seo";
 import LiteYouTubeEmbed from "react-lite-youtube-embed";
 
 import { YOUTUBE_REGEX } from "../lib/constants";
 import siteConfig from "../config/siteConfig";
-import MdxContent from './MdxContent'
-import useHeadingsObserver from '../hooks/useHeadingsObserver'
-// import dynamic from 'next/dynamic'
-
-// import { Paragraph } from "./Paragraph";
-// import { Anchor } from "./Anchor";
-
-// const Anchor = dynamic(() => import('./Anchor').then(module => module.Anchor), {
-//   ssr: false
-// })
-
-// const Paragraph = dynamic(() => import("./Paragraph").then(mod => mod.Paragraph))
+import MdxContent from "./MdxContent";
 
 export default function MdxPage({ body, frontMatter }) {
-  const observer = useHeadingsObserver();
-
-  const {
-    title, description, date, keywords, youtube, podcast, image, _raw
-  } = frontMatter
+  const { title, description, date, keywords, youtube, podcast, image, _raw } =
+    frontMatter;
 
   let youtubeThumnbnail;
 
@@ -121,7 +107,7 @@ export default function MdxPage({ body, frontMatter }) {
             </div>
           </header>
           <main className="my-6">
-            <MdxContent body={body} observer={observer}/>
+            <MdxContent body={body} />
             {editUrl && (
               <div className="mt-12 mb-6">
                 <a

site/components/MdxContent.js

@@ -1,12 +1,15 @@
-import React from 'react'
-import Head from 'next/head'
-import { useMDXComponent } from 'next-contentlayer/hooks';
-import { Paragraph } from './Paragraph'
-import { Anchor } from './Anchor'
-import { Heading } from './Heading'
+import React from "react";
+import Head from "next/head";
+import { useMDXComponent } from "next-contentlayer/hooks";
 
+import useHeadingsObserver from "../hooks/useHeadingsObserver";
+import { Paragraph } from "./Paragraph";
+import { Anchor } from "./Anchor";
+import { Heading } from "./Heading";
+
+const MdxContent = ({ body }) => {
+  const observer = useHeadingsObserver();
 
-const MdxContent = ({ body, observer }) => {
   const customComponents = {
     Head,
     p: Paragraph,
@@ -17,10 +20,10 @@ const MdxContent = ({ body, observer }) => {
     h4: Heading({ level: 4, observer }),
     h5: Heading({ level: 5, observer }),
     h6: Heading({ level: 6, observer }),
-  }
+  };
   const Component = useMDXComponent(body.code);
 
-  return <Component components={ customComponents }/>
+  return <Component components={customComponents} />;
 };
 
 // prevent rerendering of the component if it's props don't change