VSinerva/freesewing
1
0
Fork 0
Code Activity

wip(fs.dev): Work on mdx components

Browse source
This commit is contained in:
Joost De Cock 2021-12-19 19:08:54 +01:00
parent 1b888f02f1
commit 18566b5d37
10 changed files with 78 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

42
packages/freesewing.shared/components/wrappers/mdx.js
View file

@ -10,27 +10,9 @@ import { run } from '@mdx-js/mdx'
import * as runtime from 'react/jsx-runtime.js'
// Components that are available in all MDX
import { list as designs } from '@freesewing/pattern-info'
import Popout from '../popout'
import Highlight from '../mdx/highlight'
import YouTube from '../mdx/youtube'
//import * as dfltComponents from 'shared/components/elements/in-mdx'
import customComponents from 'shared/components/mdx'
const DesignIterator = props => {
const Component = props.component
return designs.map(design => <Component design={design} />)
}
const Figure = props => (
<figure>
<img src={props?.src} alt={props?.alt || ''} title={props?.title || ''} className="shadow-md"/>
<figcaption className="text-center italic">{props.title || 'FIXME: No title property set on this image'}</figcaption>
</figure>
)
const Example = props => <p>FIXME: Example still todo</p>
const MdxWrapper = ({mdx, components={}}) => {
const MdxWrapper = ({mdx, app, components={}}) => {
const [mdxModule, setMdxModule] = useState()
@ -40,31 +22,13 @@ const MdxWrapper = ({mdx, components={}}) => {
})()
}, [mdx])
const dfltComponents = {
Example,
Fixme: props => <Popout {...props} t={t} lang={lang} fixme />,
Note: props => <Popout {...props} t={t} lang={lang} note />,
Tip: props => <Popout {...props} t={t} lang={lang} tip />,
Related: props => <Popout {...props} t={t} lang={lang} related />,
Link: props => <Popout {...props} t={t} lang={lang} link />,
Warning: props => <Popout {...props} t={t} lang={lang} warning />,
YouTube,
// Tailwind typography plugin overrides
h5: props => <h5 className="font-bold my-2">{props.children}</h5>,
h6: props => <h6 className="font-bold my-2 text-sm">{props.children}</h6>,
pre: props => <Highlight {...props} />,
//code: props => <Highlight {...props} tag='code'/>,
DesignIterator,
}
/*
* We use some default components that are available
* everywhere in MDX, but we also accept passing in
* extra components via props
*/
const allComponents = {
...dfltComponents,
...customComponents,
...components
}