42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
/*
|
|
* This is used to wrap a Table of Contents (toc) as returned
|
|
* from the mdxLoader method (see shared/mdx/loader.js)
|
|
* It is NOT for wrapping plain markdown/mdx
|
|
*/
|
|
import { useState, useEffect, Fragment } from 'react'
|
|
|
|
// See: https://mdxjs.com/guides/mdx-on-demand/
|
|
import { run } from '@mdx-js/mdx'
|
|
import * as runtime from 'react/jsx-runtime'
|
|
|
|
const TocWrapper = ({ toc }) => {
|
|
const [mdxModule, setMdxModule] = useState()
|
|
|
|
useEffect(() => {
|
|
// This is a workaround to keep prettier and eslint
|
|
// from fighting over syntax
|
|
async function prettierEslintPeaceDeal() {
|
|
setMdxModule(await run(toc, runtime))
|
|
}
|
|
prettierEslintPeaceDeal()
|
|
}, [toc])
|
|
|
|
// React component for MDX content
|
|
const MdxContent = mdxModule ? mdxModule.default : Fragment
|
|
// Don't render an empty toc
|
|
const children = typeof MdxContent === 'function' ? MdxContent().props.children : false
|
|
|
|
return children ? (
|
|
<div
|
|
className={`
|
|
mdx mdx-toc text-base-content text-base
|
|
sticky top-16 max-h-screen overflow-y-auto
|
|
border-2 bg-base-200 bg-opacity-30 p-4 rounded-lg border-base-200
|
|
`}
|
|
>
|
|
{mdxModule && <MdxContent components={{}} />}
|
|
</div>
|
|
) : null
|
|
}
|
|
|
|
export default TocWrapper
|