1
0
Fork 0
Browse Source

feat: add new partial for main

This also involves turning Markdown in Nunjucks into HTML.
Therefore, I have a md helper-module, which will also be used by
Eleventy to define a custom Markdown parser.

In Storybook, I am only able to manipulate HTML for now.
I would ideally like to be able to drop Markdown with Frontmatter there
and have it just works.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
main
André Jaenisch 1 year ago
parent
commit
4c3178b516
Signed by: ryuno-ki
GPG Key ID: 5A668E771F1ED854
  1. 6
      md.js
  2. 3
      partials/main.njk
  3. 47
      stories/organisms/main.stories.mdx

6
md.js

@ -0,0 +1,6 @@
const MarkdownIt = require('markdown-it')
const md = new MarkdownIt()
module.exports = md

3
partials/main.njk

@ -0,0 +1,3 @@
<main>
{{ content | safe }}
</main>

47
stories/organisms/main.stories.mdx

@ -0,0 +1,47 @@
import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
import md from '../../md';
import template from '../../partials/main.njk';
export const Template = (args = {}) => template.render(args)
<Meta
title='Organisms/Main'
argTypes={{
content: {
control: {
type: 'text',
},
description: 'This is the markdown to display.',
name: 'Main',
},
}}
/>
# Main
This is the main partial to render the content. Similar to what you would see
in a screen reader.
<Canvas>
<Story
name='Main'
args={{
content: md.render('# I am markdown'),
}}
parameters={{
controls: {
expanded: true,
hideNoControlsWarning: true,
},
docs: {
source: {
code: Template(),
},
},
}}
>
{Template.bind({})}
</Story>
</Canvas>
Loading…
Cancel
Save