Fix markdown rendering inside components

website/src/components/embed.js

@@ -5,7 +5,7 @@ import classNames from 'classnames'
 import Link from './link'
 import Button from './button'
 import { InlineCode } from './code'
-import { markdownToReact } from './util'
+import { MarkdownToReact } from './util'
 
 import classes from '../styles/embed.module.sass'
 
@@ -98,7 +98,7 @@ const Image = ({ src, alt, title, ...props }) => {
             </Link>
             {title && (
                 <figcaption className="gatsby-resp-image-figcaption">
-                    {markdownToReact(title, markdownComponents)}
+                    <MarkdownToReact markdown={title} />
                 </figcaption>
             )}
         </figure>

website/src/components/util.js

@@ -1,9 +1,10 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useEffect, useState } from 'react'
 import { Parser as HtmlToReactParser } from 'html-to-react'
-import remark from 'remark'
-import remark2react from 'remark-react'
 import siteMetadata from '../../meta/site.json'
 import { domain } from '../../meta/dynamicMeta'
+import remarkPlugins from '../../plugins/index.mjs'
+import { serialize } from 'next-mdx-remote/serialize'
+import { MDXRemote } from 'next-mdx-remote'
 
 const htmlToReactParser = new HtmlToReactParser()
 
@@ -85,8 +86,25 @@ export function htmlToReact(html) {
  *  for HTML elements.
  * @returns {Node} - The converted React elements.
  */
-export function markdownToReact(markdown, remarkReactComponents = {}) {
-    return remark().use(remark2react, { remarkReactComponents }).processSync(markdown).contents
+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} /> : <></>
 }
 
 /**

website/src/templates/models.js

@@ -13,7 +13,14 @@ 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,
+    MarkdownToReact,
+} from '../components/util'
 
 import siteMetadata from '../../meta/site.json'
 import languages from '../../meta/languages.json'
@@ -295,7 +302,7 @@ const Model = ({
                     python -m spacy download {name}
                 </CodeBlock>
             </Aside>
-            {meta.description && markdownToReact(meta.description, MARKDOWN_COMPONENTS)}
+            {meta.description && <MarkdownToReact markdown={meta.description} />}
             {isError && error}
             <Table>
                 <tbody>
@@ -317,7 +324,7 @@ const Model = ({
                     )}
                 </tbody>
             </Table>
-            {meta.notes && markdownToReact(meta.notes, MARKDOWN_COMPONENTS)}
+            {meta.notes && <MarkdownToReact markdown={meta.notes} />}
             {hasInteractiveCode && (
                 <CodeBlock title="Try out the model" lang="python" executable={true}>
                     {[

website/src/templates/universe.js

@@ -16,7 +16,7 @@ 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, MarkdownToReact } from '../components/util'
 
 import { nightly, legacy } from '../../meta/dynamicMeta'
 import universe from '../../meta/universe.json'
@@ -258,7 +258,11 @@ const Project = ({ data, components }) => (
                 />
             )}
 
-            {data.description && <section>{markdownToReact(data.description, components)}</section>}
+            {data.description && (
+                <section>
+                    <MarkdownToReact markdown={data.description} />
+                </section>
+            )}
 
             {data.code_example && (
                 <CodeBlock title="Example" lang={data.code_language || 'python'}>