joystick icon indicating copy to clipboard operation
joystick copied to clipboard

Add markdown() render method

Open rglover opened this issue 1 year ago • 0 comments

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.

rglover avatar Dec 23 '24 22:12 rglover