* docs: add blockquote with custom alert title
* feat: add alert types to i18n and update blockquote rendering
* fix: wrong translation key
* feat: add alert title translation for all supported languages
Done by AI
* Markdown alerts
* refactor(alert): move alert color to variable.scss and simplify the style
* style: fix indent in render-blockquote
* feat(alert): add customizable alert icons for different alert types
* doc: add example usage of markdown alert
---------
Co-authored-by: Jimmy Cai <jimmy@cai.im>
* 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>
* 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
