From 8292b8752625671fbb3fd1f3c58c0308bd83be5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcus=20Bl=C3=A4ttermann?= Date: Tue, 24 Jan 2023 21:52:15 +0100 Subject: [PATCH] Extract `MarkdownToReact` component into own file --- website/src/components/embed.js | 2 +- website/src/components/markdownToReact.js | 32 ++++++++++++++++++++++ website/src/components/util.js | 33 +---------------------- website/src/templates/models.js | 10 ++----- website/src/templates/universe.js | 3 ++- 5 files changed, 38 insertions(+), 42 deletions(-) create mode 100644 website/src/components/markdownToReact.js diff --git a/website/src/components/embed.js b/website/src/components/embed.js index 1dfc3cefb..04e0fd6cd 100644 --- a/website/src/components/embed.js +++ b/website/src/components/embed.js @@ -6,7 +6,7 @@ import ImageNext from 'next/image' import Link from './link' import Button from './button' import { InlineCode } from './inlineCode' -import { MarkdownToReact } from './util' +import MarkdownToReact from './markdownToReact' import classes from '../styles/embed.module.sass' diff --git a/website/src/components/markdownToReact.js b/website/src/components/markdownToReact.js new file mode 100644 index 000000000..054cd4db4 --- /dev/null +++ b/website/src/components/markdownToReact.js @@ -0,0 +1,32 @@ +import React, { useEffect, useState } from 'react' +import { serialize } from 'next-mdx-remote/serialize' +import { MDXRemote } from 'next-mdx-remote' +import remarkPlugins from '../../plugins/index.mjs' + +/** + * Convert raw Markdown to React + * @param {String} markdown - The Markdown markup to convert. + * @param {Object} [remarkReactComponents] - Optional React components to use + * for HTML elements. + * @returns {Node} - The converted React elements. + */ +export default function MarkdownToReact({ markdown }) { + const [mdx, setMdx] = useState(null) + + useEffect(() => { + const getMdx = async () => { + setMdx( + await serialize(markdown, { + parseFrontmatter: false, + mdxOptions: { + remarkPlugins, + }, + }) + ) + } + + getMdx() + }, [markdown]) + + return mdx ? : <> +} diff --git a/website/src/components/util.js b/website/src/components/util.js index 17f33f86d..e5a22a83f 100644 --- a/website/src/components/util.js +++ b/website/src/components/util.js @@ -1,10 +1,7 @@ -import React, { Fragment, useEffect, useState } from 'react' +import React, { Fragment } from 'react' import { Parser as HtmlToReactParser } from 'html-to-react' import siteMetadata from '../../meta/site.json' import { domain } from '../../meta/dynamicMeta.mjs' -import remarkPlugins from '../../plugins/index.mjs' -import { serialize } from 'next-mdx-remote/serialize' -import { MDXRemote } from 'next-mdx-remote' const htmlToReactParser = new HtmlToReactParser() @@ -79,34 +76,6 @@ export function htmlToReact(html) { return htmlToReactParser.parse(html) } -/** - * Convert raw Markdown to React - * @param {String} markdown - The Markdown markup to convert. - * @param {Object} [remarkReactComponents] - Optional React components to use - * for HTML elements. - * @returns {Node} - The converted React elements. - */ -export function MarkdownToReact({ markdown }) { - const [mdx, setMdx] = useState(null) - - useEffect(() => { - const getMdx = async () => { - setMdx( - await serialize(markdown, { - parseFrontmatter: false, - mdxOptions: { - remarkPlugins, - }, - }) - ) - } - - getMdx() - }, [markdown]) - - return mdx ? : <> -} - /** * Join an array of nodes with a given string delimiter, like Array.join for React * @param {Array} arr - The elements to join. diff --git a/website/src/templates/models.js b/website/src/templates/models.js index 3d486b971..32a93a755 100644 --- a/website/src/templates/models.js +++ b/website/src/templates/models.js @@ -14,14 +14,8 @@ import Icon from '../components/icon' import Link, { OptionalLink } from '../components/link' import Infobox from '../components/infobox' import Accordion from '../components/accordion' -import { - isString, - isEmptyObj, - join, - arrayToObj, - abbrNum, - MarkdownToReact, -} from '../components/util' +import { isString, isEmptyObj, join, arrayToObj, abbrNum } from '../components/util' +import MarkdownToReact from '../components/markdownToReact' import siteMetadata from '../../meta/site.json' import languages from '../../meta/languages.json' diff --git a/website/src/templates/universe.js b/website/src/templates/universe.js index c5dd71ef2..cddfa62c6 100644 --- a/website/src/templates/universe.js +++ b/website/src/templates/universe.js @@ -17,7 +17,8 @@ import Main from '../components/main' import Footer from '../components/footer' import { H3, H5, Label, InlineList } from '../components/typography' import { YouTube, SoundCloud, Iframe } from '../components/embed' -import { github, MarkdownToReact } from '../components/util' +import { github } from '../components/util' +import MarkdownToReact from '../components/markdownToReact' import { nightly, legacy } from '../../meta/dynamicMeta.mjs' import universe from '../../meta/universe.json'