68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
// __SDEFILE__ - This file is a dependency for the stand-alone environment
|
|
// Dependencies
|
|
import { compileMdx } from 'shared/mdx/browser-compile.mjs'
|
|
import * as runtime from 'react/jsx-runtime'
|
|
import { run } from '@mdx-js/mdx'
|
|
// Hooks
|
|
import { useState, useEffect } from 'react'
|
|
// Components
|
|
import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
|
|
import { Loading } from 'shared/components/spinner.mjs'
|
|
|
|
const ghPrefix = 'https://raw.githubusercontent.com/freesewing/freesewing/develop/markdown'
|
|
const fromGithub = true
|
|
|
|
const titles = {
|
|
1: ({ title }) => <h1>{title}</h1>,
|
|
2: ({ title }) => <h2>{title}</h2>,
|
|
3: ({ title }) => <h3>{title}</h3>,
|
|
4: ({ title }) => <h4>{title}</h4>,
|
|
5: ({ title }) => <h5>{title}</h5>,
|
|
6: ({ title }) => <h6>{title}</h6>,
|
|
}
|
|
|
|
export const DynamicMdx = ({ site = 'org', slug, language, title = 1 }) => {
|
|
const [mdx, setMdx] = useState(false)
|
|
const [frontmatter, setFrontmatter] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const loadMdx = async () => {
|
|
const response = await fetch(`${ghPrefix}/${site}/${slug}/${language}.md`)
|
|
const md = await response.text()
|
|
const mdx = await compileMdx({ site, slug, language, md, fromGithub })
|
|
const { frontmatter: fm } = await run(mdx, runtime)
|
|
setMdx(mdx)
|
|
setFrontmatter(fm)
|
|
}
|
|
if (!mdx) loadMdx()
|
|
}, [site, slug, language])
|
|
|
|
const Title = title && frontmatter?.title && titles[Number(title)] ? titles[title] : () => null
|
|
|
|
return mdx ? (
|
|
<>
|
|
<Title title={frontmatter?.title} />
|
|
<MdxWrapper {...{ mdx, site, slug }} />
|
|
</>
|
|
) : (
|
|
<Loading />
|
|
)
|
|
}
|
|
|
|
export const Mdx = ({ md }) => {
|
|
const [mdx, setMdx] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const loadMdx = async () => {
|
|
try {
|
|
const mdx = await compileMdx({ md })
|
|
setMdx(mdx)
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
loadMdx()
|
|
}, [md])
|
|
|
|
return mdx ? <MdxWrapper mdx={mdx} /> : <Loading />
|
|
}
|