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'