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

92
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;
@ -97,23 +83,23 @@ export default function MdxPage({ body, frontMatter }) {
on {date} on {date}
</p> </p>
)} )}
{description && <p className="">{description}</p>} {description && <p className="">{description}</p>}
{youtubeId && <LiteYouTubeEmbed id={youtubeId} />} {youtubeId && <LiteYouTubeEmbed id={youtubeId} />}
{podcast && ( {podcast && (
<div className="pt-4"> <div className="pt-4">
<ul className="list-disc"> <ul className="list-disc">
<li> <li>
<a <a
className="flex items-center" className="flex items-center"
target="_blank" target="_blank"
rel="noopener" rel="noopener"
href={podcast} href={podcast}
> >
<div className="w-4 mr-2"> <div className="w-4 mr-2">
<PodcastIcon /> <PodcastIcon />
</div> </div>
<p className="m-0">Listen to this podcast</p> <p className="m-0">Listen to this podcast</p>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
@ -121,34 +107,34 @@ 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
className="flex no-underline font-semibold text-yellow-li" className="flex no-underline font-semibold text-yellow-li"
href={editUrl} href={editUrl}
target="_blank" target="_blank"
> >
Edit this page Edit this page
<span className="mx-1"> <span className="mx-1">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6" className="h-6 w-6"
fill="none" fill="none"
viewBox="0 0 24 24" viewBox="0 0 24 24"
stroke="currentColor" stroke="currentColor"
strokeWidth="2" strokeWidth="2"
> >
<path <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/> />
</svg> </svg>
</span> </span>
</a> </a>
</div> </div>
)} )}
</main> </main>
</article> </article>
</div> </div>

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