joystick
joystick copied to clipboard
Add markdown() render method
This came to mind when thinking about writing documentation. I like the idea of MDX, but not having to write everything w/ React components. A possible approach:
import joystick from '@joystick.js/ui-canary';
const Component = joystick.component({
css: {
min: {
width: {
0: `
`,
},
},
},
render: ({ component, state, data, methods, markdown }) => {
return `
${markdown(`
## This is the markdown
# Testing
Testing this would work yes
${component(Alert, {
title: 'This is the alert',
})}
`)}
`;
},
});
export default Component;
Basically, just pass a string of Markdown as a literal, allowing for components to be injected. Only thing I don't love is still having to author everything in-file. Only was I can think to get around this is to figure out a special render pipeline where you can import components into a .md file and then load them via the markdown() method.