https://github.com/gethinode/mod-mermaid
A Hugo module to add diagrams and charts powered by Mermaid to your Hinode site
https://github.com/gethinode/mod-mermaid
Last synced: about 2 months ago
JSON representation
A Hugo module to add diagrams and charts powered by Mermaid to your Hinode site
- Host: GitHub
- URL: https://github.com/gethinode/mod-mermaid
- Owner: gethinode
- License: mit
- Created: 2024-05-22T08:07:53.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-01-01T06:44:45.000Z (4 months ago)
- Last Synced: 2025-01-01T09:10:51.003Z (4 months ago)
- Language: SCSS
- Homepage:
- Size: 5.82 MB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hinode Module - Mermaid
A Hugo module to add diagrams and charts powered by Mermaid to your Hinode site
## About
Hinode is a clean blog theme for [Hugo][hugo], an open-source static site generator. Hinode is available as a [template][repository_template], and a [main theme][repository]. This repository maintains a Hugo module to add [Mermaid][mermaid] to a Hinode site. Visit the Hinode documentation site for [installation instructions][hinode_docs].
## Usage
The module is "optional" per default. In this case the module must be enabled in the frontmatter of the pages that use mermaid by adding: `modules: ["mermaid"]`
Mermaid can be used in fenced codeblocks:
```mermaid
YOUR DIAGRAMS
```
or as shortcode:
{{< mermaid >}}
YOUR DIAGRAM
{{< /mermaid >}}
The module supports dark mode and allows creation of a custom mermaid theme by overriding and setting the theme variables in `assets/scss/mermaid.scss`. Checkout the [mermaid docs](https://mermaid.js.org/config/theming.html) for custom styling. All theme variables can be used, but in kebab case and with prefix as shown in the example below. Also bootstrap theme variables can be referenced.
```scss
// assets/scss/mermaid.scss
[data-mermaid-theme="light"] {
// The Mermaid Theme (only 'base' does support custom theming)
--mermaid-theme: 'base';
// General Theme Variables
--mermaid-dark-mode: false;
--mermaid-background: var(--bs-body-bg);
--mermaid-font-family: var(--bs-font-sans-serif);
//...
}
[data-mermaid-theme="dark"] {
// The Mermaid Theme (only 'base' does support custom theming)
--mermaid-theme: 'base';
// General Theme Variables
--mermaid-dark-mode: true;
--mermaid-background: var(--bs-body-bg);
--mermaid-font-family: var(--bs-font-sans-serif);
//...
}
```
## Contributing
This module uses [semantic-release][semantic-release] to automate the release of new versions. The package uses `husky` and `commitlint` to ensure commit messages adhere to the [Conventional Commits][conventionalcommits] specification. You can run `npx git-cz` from the terminal to help prepare the commit message.
[hugo]: https://gohugo.io
[hinode_docs]: https://gethinode.com
[mermaid]: https://mermaid.js.org
[repository]: https://github.com/gethinode/hinode.git
[repository_template]: https://github.com/gethinode/template.git
[conventionalcommits]: https://www.conventionalcommits.org
[husky]: https://typicode.github.io/husky/
[semantic-release]: https://semantic-release.gitbook.io/