40 lines
1005 B
JavaScript
40 lines
1005 B
JavaScript
import React from "react";
|
|
import Head from "next/head";
|
|
import dynamic from "next/dynamic";
|
|
import { useMDXComponent } from "next-contentlayer/hooks";
|
|
|
|
import { Heading } from "./Heading";
|
|
import useHeadingsObserver from "../hooks/useHeadingsObserver";
|
|
|
|
const Anchor = dynamic(
|
|
() => import("./Anchor").then((module) => module.Anchor)
|
|
// {
|
|
// ssr: false,
|
|
// }
|
|
);
|
|
|
|
const Paragraph = dynamic(() =>
|
|
import("./Paragraph").then((module) => module.Paragraph)
|
|
);
|
|
|
|
const MdxContent = ({ body }) => {
|
|
const observer = useHeadingsObserver();
|
|
|
|
const customComponents = {
|
|
Head,
|
|
p: Paragraph,
|
|
a: Anchor,
|
|
h1: Heading({ level: 1, observer }),
|
|
h2: Heading({ level: 2, observer }),
|
|
h3: Heading({ level: 3, 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} />;
|
|
};
|
|
|
|
export default MdxContent;
|