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