Support for mermaid

[peters-r]

Hi,

first of all, it really is a great theme, thank you for providing this awesome theme!!

Sometimes I struggle a bit to understand the builtin magic.
I wanted to add mermaid support to my blog. What I did was copying the whole baseof.html file from the template to my hugo project and then I added the mermaid module as a script at the bottom of the page:

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
</script>

And while this worked, it felt like the wrong way of doing it.
Another way is to put the script import into a partial, but also I have no Idea how to get my own partial into the footer without adding and overriding the original files from the theme.

Can you give me a hint what’s the right way of doing it? I read the docs, but I don’t understand this part and also I am not familiar with writing modules and somehow I hope I could avoid it.

Thank you and best regards,
Richard

[markdumay]

Glad you like the theme! I can imagine the theme's logic can be a bit challenging at first. But you're right, there's a more elegant way to integrate these kind of scripts. I'm not sure you're going to like it, because it does use Hugo's module system... ;-)

Hinode uses modules for the following reasons:

• It provides a way to include them on only those pages that need it, reducing the overhead (and thus improving the site's performance)
• It enables automated dependency upgrades, such as offered by GitHub's Dependabot
• It makes the codebase a bit more manageable

I prepared a guide how to develop a Hugo module compatible with Hinode. It explains how to ingest JavaScript files and stylesheets into the build pipeline. The files are bundled into Hinode's core assets and minified to improve the site's performance. Hinode will also take care of (lazy) loading the files when applicable.

I'd be willing to include support for Mermaid diagrams as part of the Hinode ecosystem. Perhaps we could jointly develop such an open-source module?

[markdumay]

I've created #948.

[peters-r]

I would recommend keeping the fallback, but marking it as deprecated in the docs and to remove it in future major releases, if breaking changes will start to accumulate over time, so a new release could remove the fallbacks later

[peters-r]

@markdumay sorry I was a bit busy recently, but finally I made a PR:

gethinode/mod-mermaid#3

[markdumay]

Awesome work @peters-r! I've verified the code and merged it with the main module. Would you care to submit a PR against the Hinode core repo, so you would be mentioned as contributor?

Are there any missing features or items to work on? I checked the code examples and dark/light mode and didn't see any issues.

A final thought, would it make sense to strip the example site of mod-mermaid to the bare minimum? In theory, we now have a cyclic dependency between the mod-mermaid and hinode modules.

[peters-r]

Hi @markdumay,

Would you care to submit a PR against the Hinode core repo, so you would be mentioned as contributor?

Yes thank you that would be awesome!

A final thought, would it make sense to strip the example site of mod-mermaid to the bare minimum?

Yes I will try, but I need to see how it looks like and if the plugin makes sense without the hinode core theme.

I will update within the upcoming week :-)

[peters-r]

BTW, sorry for adding an off-topic question...
It seems if I directly add markdown content to the _index.md (the front page) for an introduction text, then it does not seem to fill the whole width and is not centered (unlike the sections). I used sections instead, but they are not shown if there is no content besindes the index.md, so I currently don't have a good solution for a simple introduction text that aligns well with the layout.