Proposal to add MDX support, YouTube Component for embedded iframes, Mermaid diagram rendering, better legibility in dark mode, and centred images by default.

[rossamurphy]

I love this repo! Big fan.
I began using it and felt that a few things were lacking for my particular use case, mainly the ability to embed YouTube iframes, and render mermaid diagrams (in both light and dark mode). In order to add the YouTube component, I added MDX support. In order to add the Mermaid component, I provide a custom (modified) version of this great plugin. I also added some stylistic changes regarding legibility in dark mode.
Thanks for making this repo, and hopefully some of these additions can be helpful, if you agree.
Ross

[rossamurphy]

An example of mermaid charts in light mode:

And in dark mode, a white background is automatically added behind the chart:

(you can also notice how the white text is a lot more legible when in blockquotes on dark background)

You can also now embed iframes directly into MDX.

For example

<comp.YouTube id={`aaSl7ZU3ppM`}/>

will render:

[oscarotero]

Hey @rossamurphy Thanks for your contribution, I'm afraid this won't be merged.
Let me explain why:

• There are too much changes in a single pull request: mermaid diagrams, youtube components, styles... I prefere a PR per feature, because this allows to accept only some changes or create different discussions per feature.
• The idea of simple blog is to provide a minimum baseline for all blogs. Not all users need components for Youtube, support for Mermaid, etc.
• About the change of styles, you can customize the styles with the extra_head property (in fact, there are some users that change the default colors and font for a more customized blog).

About specific changes:

Youtube component

You don't need MDX for that. Lume can combine multiple template languages. For example, you can create a vto component (say _components/youtube.vto) and in your markdown files insert {{ comp.youtube({ id: "video-id" }) }}. Create a _data.yml file to use vto + markdown for the posts/*.md files and that's all.

An even more simple option (and faster!) is using the lite-youtube-embed webcomponent. Just import the js + css (using the extra_head variable) and then you can place this in your markdown files:

<lite-youtube videoid="goiWrNiaT0I"></lite-youtube>

Obviously, if you want to use MDX this is fine too! But due Lume themes are just like plugins, you can enable mdx plugin in the config file independently to the theme:

site.use(simpleBlog());
site.use(mdx());

No need to include mdx plugin in the theme!

Mermaid

I think the same logic for Youtube can be applied for mermaid diagram. If you want to improve the original plugin, I'd recommend to send a PR to it.

TOC + Footer

That's a good change! If you send a new PR only with these changes, I'll be happy to merge it.

Thanks!

[rossamurphy]

hey Oscar,

thanks so much for such detailed feedback!

• I didn't realise that MDX was actually not required for embedded YouTube videos, so I totally agree, no need for it here.
• I appreciate the feedback re PRing the mermaid plugin repo itself, I agree, and plan on doing so.
• Re TOC + Footer, of course, I'll separate that commit into a separate PR, and send your way.

Thanks a lot for reviewing my PR and for giving me constructive feedback,
again, cheers for creating this project!

Ross