31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
import { components } from 'shared/components/mdx/index.mjs'
|
|
import { Loading } from 'shared/components/spinner.mjs'
|
|
import { useState, useEffect } from 'react'
|
|
|
|
/**
|
|
* Dynamically load and compile mdx
|
|
* @param {Function} loader an import function to use to load the mdx
|
|
* @param {String} site the site whose component set will be used in rendering the mdx
|
|
* @return {Object} props
|
|
* @return {React.component} props.MDX an component to render the loaded MDX
|
|
* @return {Object} props.frontmatter the frontmatter loaded from the markdown
|
|
*/
|
|
export const useDynamicMdx = (loader, site = 'org') => {
|
|
// State
|
|
const [frontmatter, setFrontmatter] = useState({ title: `freeSewing.${site}` })
|
|
const [MDX, setMDX] = useState(<Loading />)
|
|
|
|
/* Load MDX dynamically */
|
|
useEffect(() => {
|
|
const loadMDX = async () => {
|
|
loader().then((mod) => {
|
|
setFrontmatter(mod.frontmatter)
|
|
const Component = mod.default
|
|
setMDX(<Component components={components(site)} />)
|
|
})
|
|
}
|
|
if (loader) loadMDX()
|
|
}, [loader, site])
|
|
|
|
return { MDX, frontmatter }
|
|
}
|