jeffemmett
/
web3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
olayway 2022-06-06 18:19:29 +02:00
parent e0a316e5ec
commit 706c7b0d02
2 changed files with 51 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
site/components/MDX.js
View File

@ -1,27 +1,13 @@
import { NextSeo } from 'next-seo' import { NextSeo } from "next-seo";
import LiteYouTubeEmbed from "react-lite-youtube-embed"; import LiteYouTubeEmbed from "react-lite-youtube-embed";
import { YOUTUBE_REGEX } from "../lib/constants"; import { YOUTUBE_REGEX } from "../lib/constants";
import siteConfig from "../config/siteConfig"; import siteConfig from "../config/siteConfig";
import MdxContent from './MdxContent' 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))
export default function MdxPage({ body, frontMatter }) { 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; let youtubeThumnbnail;
@ -121,7 +107,7 @@ export default function MdxPage({ body, frontMatter }) {
</div> </div>
</header> </header>
<main className="my-6"> <main className="my-6">
<MdxContent body={body} observer={observer}/> <MdxContent body={body} />
{editUrl && ( {editUrl && (
<div className="mt-12 mb-6"> <div className="mt-12 mb-6">
<a <a

21
site/components/MdxContent.js
View File

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