* fix: improve Mermaid diagram implementation (#1213)
This commit addresses multiple issues with Mermaid diagram rendering
and adds significant improvements to the user experience.
- Fix `<br/>` tags rendering as literal text instead of line breaks
- Fix flash of raw mermaid code before diagram renders
- Fix Gantt chart rendering issues in dark mode
- Fix diagrams briefly showing during theme switch re-render
- Fix expand modal showing diagram left-aligned before centering
- Add fullscreen expand modal with pan/zoom functionality
- Add toolbar with zoom controls (zoom in/out, reset, fit to screen)
- Add keyboard support (Escape to close modal)
- Add per-diagram transparent background via `%%transparent%%` directive
- Add comprehensive configuration options:
- `look`: classic or handDrawn (sketch style)
- `lightTheme`/`darkTheme`: theme selection per mode
- `lightThemeVariables`/`darkThemeVariables`: custom theme colors
- `securityLevel`, `htmlLabels`, `maxTextSize`, `maxEdges`
- `fontSize`, `fontFamily`, `curve`, `logLevel`
- Switch from ESM to UMD bundle for faster initial load (~1s vs 2s+)
- Lazy-load panzoom library only when expand modal is opened
- Pre-render alternate theme during idle time for instant theme switching
- Cache rendered diagrams to avoid re-rendering on theme toggle
- Move all inline CSS to article.scss using SCSS nesting
- Extract helper functions for better maintainability
- Use data attributes and event delegation for cleaner handlers
- Reduce mermaid.html from 411 to 177 lines (57% reduction)
- Add comprehensive mermaid-diagrams example post with all diagram types
- Document all configuration options in hugo.yaml
* refactor: extract mermaid inline JS to TypeScript module
Move ~155 lines of inline JavaScript from mermaid.html partial into
assets/ts/mermaid.ts. The partial shrinks from 179 to 36 lines and now
only contains modal HTML markup and Hugo Pipes build/import logic.
- Deduplicate initWithTheme() and renderOffscreen() helpers
- Enable minification via Hugo Pipes js.Build in production
- Remove user-configurable mermaid version from params.toml
---------
Co-authored-by: delize <4028612+delize@users.noreply.github.com>
* refactor: rename `home.rss.xml` to `rss.xml`
* refactor: update RSS template to the latest one given by Hugo.
Output pages with the same logic as in normal site by using `helper/pages`
* fix: add SVG check in helper/image before accessing .Width and .Height
* refactor: drop image resizing logic in render-image, and use helper/image to process image
* fix: render-image $permalink not correct
* refactor: migrate page visibility control from `Params.hidden` to the new `build.list` parameter.
* refactor: centralize page filtering logic into a new `helper/pages.html` partial
* feat: introduce `SortBy` parameter to enable sorting pages by last modified date
* refactor: extract page sorting logic into a new `pages-sort.html` partial
* refactor: centralize pagination logic into a new helper partial used for page titles and index display
* fix: list.html does not exclude hidden pages
* refactor: Simplify title generation logic
* chore: add +x to run.sh
* feat: dynamically generate background color for category links using hash
* feat: allow category styles to be overridden by term parameters
* refactor: remove default tag background and color variables
* Add support for Mermaid diagrams in markdown content
This commit introduces native Mermaid diagram rendering to the theme.
Following Hugo’s official documentation, a new custom code block renderer
(`render-codeblock-mermaid.html`) was added under `layouts/_default/` to
detect Mermaid code blocks and inject the necessary script flag into the
page context.
Additionally, the `baseof.html` template now conditionally includes the
Mermaid JS module from the CDN when a page contains a Mermaid diagram:
{{ if .Store.Get "hasMermaid" }}
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true, theme: 'neutral' });
</script>
{{ end }}
This enables rendering of fenced code blocks using the `mermaid` language
in markdown files without requiring any external preprocessing.
* Create article/components/mermaid and fix script version
---------
Co-authored-by: Jimmy <jimmy@cai.im>
* Minor improvements to pagination functions
* Update pagination styles with enhanced UI/UX design
- Implemented full-width layout with flexible page numbers
- Added fixed-width arrow buttons for consistent navigation
- Enhanced hover and active states for better user interaction
- Improved responsive design with proper flex layout
- Added comprehensive styling for disabled and ellipsis states
* Simplify pagination logic and use SVG files to avoid repeated definition
* Remove change to jsconfig.json
* Remove comments and classes
---------
Co-authored-by: delize <4028612+delize@users.noreply.github.com>
Co-authored-by: Jimmy <jimmy@cai.im>
* fix: adjust cusdis scrollbar styling and background for stack theme
* feat: dynamically set cusdis background color
---------
Co-authored-by: Jimmy <jimmy@cai.im>
* fix(disqusjs): refactor local DisqusJS loading check for improved readability
* fix(gitalk): refactor local Gitalk loading check for improved readability
* fix: resolve issue with comments not displaying due to KaTeX and Waline render order
* Fix the problem that comment data couldn't be pulled successfully and raise Error "Cannot read property ‘insertBefore’ of null""
