Fix markdown rendering inside components

website/src/components/layout/models.js

@@ -13,7 +13,7 @@ import Icon from '../icon'
 import Link, { OptionalLink } from '../link'
 import Infobox from '../infobox'
 import Accordion from '../accordion'
-import { join, arrayToObj, abbrNum, markdownToReact, isString, isEmptyObj } from '../util'
+import { join, arrayToObj, abbrNum, MarkdownToReact, isString, isEmptyObj } from '../util'
 
 import siteMetadata from '../../../meta/site.json'
 import languages from '../../../meta/languages.json'
@@ -295,7 +295,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 +317,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/components/layout/universe.js

@@ -16,7 +16,7 @@ import Main from '../main'
 import Footer from '../footer'
 import { H3, H5, Label, InlineList } from '../typography'
 import { YouTube, SoundCloud, Iframe } from '../embed'
-import { github, markdownToReact } from '../util'
+import { github, MarkdownToReact } from '../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'}>

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 = {}) {
+export function MarkdownToReact({ markdown }) {
-    return remark().use(remark2react, { remarkReactComponents }).processSync(markdown).contents
+    const [mdx, setMdx] = useState(null)
+
+    useEffect(() => {
+        const getMdx = async () => {
+            setMdx(
+                await serialize(markdown, {
+                    parseFrontmatter: false,
+                    mdxOptions: {
+                        remarkPlugins,
+                    },
+                })
+            )
+        }
+
+        getMdx()
+    }, [markdown])
+
+    return mdx ? <MDXRemote {...mdx} /> : <></>
 }
 
 /**