60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
|
import dynamic from 'next/dynamic'
|
||
|
|
import { MDXProvider } from '@mdx-js/react'
|
||
|
|
import { useState } from 'react'
|
||
|
|
import { Spinner } from 'shared/components/spinner.mjs'
|
||
|
|
import { PageLink } from 'shared/components/page-link.mjs'
|
||
|
|
import { useTranslation } from 'next-i18next'
|
||
|
|
import { MdxComponents } from 'shared/components/mdx/index.mjs'
|
||
|
|
|
||
|
|
export const components = MdxComponents
|
||
|
|
|
||
|
|
console.log('these are the', components)
|
||
|
|
|
||
|
|
export const ns = ['modal']
|
||
|
|
|
||
|
|
export const MdxWrapper = ({ title = false, path, language, children }) => {
|
||
|
|
const { t } = useTranslation(ns)
|
||
|
|
const slug = `${language === 'en' ? '' : '/' + language}/docs/${path}`
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{title ? <h1>{title}</h1> : null}
|
||
|
|
<div className="text-primary mdx text-base-content text-base">
|
||
|
|
<MDXProvider components={components}>{children}</MDXProvider>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className={`flex flex-row gap-1 text-sm opacity-70 justify-end items-center
|
||
|
|
border border-solid border-neutral border-b-0 border-r-0 border-l-0 pt-1 mt-2`}
|
||
|
|
>
|
||
|
|
<span>{t('modal:source')}:</span>
|
||
|
|
<PageLink txt={slug} href={slug} />
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export const DynamicMdx = ({ path = false, language = 'en' }) => {
|
||
|
|
// Extract frontmatter from mdx
|
||
|
|
const [frontmatter, setFrontmatter] = useState({})
|
||
|
|
|
||
|
|
// Dynamic import of the MDX content
|
||
|
|
const mdx = dynamic(
|
||
|
|
() =>
|
||
|
|
import(`markdown/docs/${path}/${language}.md`).then((mod) => {
|
||
|
|
setFrontmatter(mod.frontmatter)
|
||
|
|
return mod
|
||
|
|
}),
|
||
|
|
{ ssr: false }
|
||
|
|
)
|
||
|
|
|
||
|
|
const MDX = mdx ? mdx : <Spinner className="w16 h-16 animate-spin text-primary" />
|
||
|
|
|
||
|
|
console.log({ components })
|
||
|
|
return (
|
||
|
|
<MdxWrapper {...{ path, language, ...frontmatter }}>
|
||
|
|
<MDX components={components} />
|
||
|
|
<pre>{JSON.stringify(Object.keys(components), null, 2)}</pre>
|
||
|
|
</MdxWrapper>
|
||
|
|
)
|
||
|
|
}
|