bc1b55e60a
* 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>
164 lines
4.3 KiB
TOML
164 lines
4.3 KiB
TOML
mainSections = ["post"]
|
|
featuredImageField = "image"
|
|
rssFullContent = true
|
|
|
|
# Accepted values: "default", "lastmod"
|
|
# default = see https://gohugo.io/quick-reference/glossary/#default-sort-order
|
|
# lastmod = sort by last modified date, in descending order
|
|
SortBy = "default"
|
|
|
|
[footer]
|
|
since = 2026
|
|
customText = ""
|
|
|
|
[dateFormat]
|
|
published = ":date_full"
|
|
lastUpdated = ":date_full"
|
|
|
|
[sidebar]
|
|
compact = false
|
|
avatar = ""
|
|
|
|
[article]
|
|
headingAnchor = false
|
|
math = false
|
|
toc = true
|
|
readingTime = true
|
|
|
|
[article.license]
|
|
enabled = false
|
|
default = "Licensed under CC BY-NC-SA 4.0"
|
|
|
|
# Mermaid diagram configuration
|
|
# Diagrams are only loaded when mermaid code blocks are present
|
|
# Theme auto-switches based on site light/dark mode
|
|
[article.mermaid]
|
|
# Visual style: classic or handDrawn (sketch style)
|
|
look = "classic"
|
|
# Theme for light mode: default, neutral, dark, forest, base, null
|
|
lightTheme = "default"
|
|
# Theme for dark mode: default, neutral, dark, forest, base, null
|
|
darkTheme = "dark"
|
|
# Custom theme variables for light mode (only works with lightTheme: base)
|
|
# lightThemeVariables = { primaryColor = "#ff0000" }
|
|
# Custom theme variables for dark mode (only works with darkTheme: base)
|
|
# darkThemeVariables = { primaryColor = "#00ff00" }
|
|
# Security level: strict (default), loose, antiscript, sandbox
|
|
# Set to "loose" to enable HTML labels like <br/>
|
|
securityLevel = "strict"
|
|
# Enable HTML labels in diagrams (requires securityLevel: loose)
|
|
htmlLabels = true
|
|
# Make diagram backgrounds transparent (default: false)
|
|
# Can also be set per-diagram with %%transparent%% directive
|
|
transparentBackground = false
|
|
|
|
[widgets]
|
|
homepage = []
|
|
page = []
|
|
|
|
[opengraph.twitter]
|
|
site = ""
|
|
card = "summary_large_image"
|
|
|
|
[colorScheme]
|
|
toggle = true
|
|
default = "auto"
|
|
|
|
[imageProcessing.cover]
|
|
enabled = true
|
|
|
|
[imageProcessing.content]
|
|
enabled = true
|
|
|
|
[comments]
|
|
enabled = true
|
|
provider = "disqus"
|
|
|
|
[comments.disqusjs]
|
|
shortname = ""
|
|
apiUrl = ""
|
|
apiKey = ""
|
|
admin = ""
|
|
adminLabel = ""
|
|
|
|
[comments.utterances]
|
|
repo = ""
|
|
issueTerm = "pathname"
|
|
label = ""
|
|
|
|
[comments.beaudar]
|
|
repo = ""
|
|
issueTerm = "pathname"
|
|
label = ""
|
|
theme = ""
|
|
|
|
[comments.remark42]
|
|
host = ""
|
|
site = ""
|
|
locale = "en"
|
|
max_shown_comments = 15
|
|
show_email_subscription = true
|
|
|
|
[comments.vssue]
|
|
platform = ""
|
|
owner = ""
|
|
repo = ""
|
|
clientId = ""
|
|
clientSecret = ""
|
|
autoCreateIssue = false
|
|
|
|
# Waline client configuration see: https://waline.js.org/en/reference/component.html
|
|
[comments.waline]
|
|
serverURL = ""
|
|
lang = ""
|
|
pageview = ""
|
|
emoji = [
|
|
"https://unpkg.com/@waline/emojis@1.0.1/weibo"
|
|
]
|
|
requiredMeta = [
|
|
"name",
|
|
"email",
|
|
"url"
|
|
]
|
|
[comments.waline.locale]
|
|
admin = "Admin"
|
|
placeholder = ""
|
|
|
|
[comments.twikoo]
|
|
envId = ""
|
|
region = ""
|
|
path = ""
|
|
lang = ""
|
|
|
|
# See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
|
|
[comments.cactus]
|
|
defaultHomeserverUrl = "https://matrix.cactus.chat:8448"
|
|
serverName = "cactus.chat"
|
|
siteName = "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)
|
|
|
|
[comments.giscus]
|
|
repo = ""
|
|
repoID = ""
|
|
category = ""
|
|
categoryID = ""
|
|
mapping = "title"
|
|
lightTheme = "light"
|
|
darkTheme = "dark_dimmed"
|
|
reactionsEnabled = 1
|
|
emitMetadata = 0
|
|
inputPosition = "top"
|
|
lang = "en"
|
|
strict = 0
|
|
loading = "lazy"
|
|
|
|
[comments.gitalk]
|
|
owner = ""
|
|
admin = ""
|
|
repo = ""
|
|
clientID = ""
|
|
clientSecret = ""
|
|
proxy = ""
|
|
|
|
[comments.cusdis]
|
|
host = "https://cusdis.com"
|
|
id = "" |