* refactor: add standardized spacing variables and more style cleanup
* refactor: rename `spacing-xxl` to `spacing-2xl` and introduce `spacing-3xl` for consistent spacing variables.
* refactor: Migrate related content styling to use the `subsection-list` component with updated layout adjustments.
* style: adjust padding values for article list tiles.
* refactor: Introduce shadow variables and dynamic spacing to prevent shadow cutoff in list layouts.
* refactor: relocate dark scheme Mermaid variables within the root scope.
Fix reading time not displaying due to .Site context in dict partial
The details.html partial receives a dict context via:
partial "article/components/details" (dict "Page" $Page "IsList" $IsList)
When the dot context is a dict, .Site resolves to nil, so
.Site.Params.article.readingTime always returns empty/false,
causing the reading time to never display.
Lines 40 and 67 of the same file already correctly use
$Page.Site.Params — this fixes line 31 to be consistent.
Co-authored-by: delize <4028612+delize@users.noreply.github.com>
* 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>
