Extract MarkdownToReact component into own file

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'
 

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 ? <MDXRemote {...mdx} /> : <></>
+}

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 ? <MDXRemote {...mdx} /> : <></>
-}
-
 /**
  * Join an array of nodes with a given string delimiter, like Array.join for React
  * @param {Array} arr - The elements to join.

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'

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'