diff --git a/site/components/MDX.js b/site/components/MDX.js index 650c15f..b3ae1b0 100644 --- a/site/components/MDX.js +++ b/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; @@ -97,23 +83,23 @@ export default function MdxPage({ body, frontMatter }) { on {date}

)} - {description &&

{description}

} - {youtubeId && } + {description &&

{description}

} + {youtubeId && } {podcast && (
@@ -121,34 +107,34 @@ export default function MdxPage({ body, frontMatter }) {
- + {editUrl && ( - + )}
diff --git a/site/components/MdxContent.js b/site/components/MdxContent.js index 35c51cf..db8569f 100644 --- a/site/components/MdxContent.js +++ b/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 + return ; }; // prevent rerendering of the component if it's props don't change