Extract htmlToReact to own file

website/src/components/htmlToReact.js

@@ -0,0 +1,12 @@
+import { Parser as HtmlToReactParser } from 'html-to-react'
+
+const htmlToReactParser = new HtmlToReactParser()
+/**
+ * Convert raw HTML to React elements
+ * @param {string} html - The HTML markup to convert.
+ * @returns {Node} - The converted React elements.
+ */
+
+export default function htmlToReact(html) {
+    return htmlToReactParser.parse(html)
+}

website/src/components/util.js

@@ -1,10 +1,7 @@
 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'
 
-const htmlToReactParser = new HtmlToReactParser()
-
 const isNightly = siteMetadata.nightlyBranches.includes(domain)
 export const DEFAULT_BRANCH = isNightly ? 'develop' : 'master'
 export const repo = siteMetadata.repo
@@ -67,15 +64,6 @@ export function isEmptyObj(obj) {
     return Object.entries(obj).length === 0 && obj.constructor === Object
 }
 
-/**
- * Convert raw HTML to React elements
- * @param {string} html - The HTML markup to convert.
- * @returns {Node} - The converted React elements.
- */
-export function htmlToReact(html) {
-    return htmlToReactParser.parse(html)
-}
-
 /**
  * Join an array of nodes with a given string delimiter, like Array.join for React
  * @param {Array} arr - The elements to join.

website/src/widgets/quickstart-training.js

@@ -5,7 +5,7 @@ import 'prismjs/components/prism-ini.min.js'
 
 import { Quickstart } from '../components/quickstart'
 import generator, { DATA as GENERATOR_DATA } from './quickstart-training-generator'
-import { htmlToReact } from '../components/util'
+import htmlToReact from '../components/htmlToReact'
 import models from '../../meta/languages.json'
 
 const DEFAULT_LANG = 'en'