* feat: add jump-to-page dialog on pagination ellipsis
- Replace pagination windowing algorithm with a tighter 5-item window
(curr-1 / curr / curr+1, clamped at edges) and hide-on-mobile for
pages more than 1 step away from the current page
- Ellipsis spans now carry the pagination-jump-trigger class and open
a native <dialog> on click instead of being static decorations
- Add <dialog id="pagination-jump-dialog"> with number input, Go button,
and Enter-key hint; data-total / data-first-url / data-format-url
attributes on <nav> give the JS all it needs to build the target URL
- Add assets/ts/pagination.ts: setupPaginationJump() with Fisher-Yates
backdrop-click and ESC handling, animated open/close via .closing class
- Wire setupPaginationJump() into Stack.init() in main.ts
- Extend pagination.scss with .hide-on-mobile, .pagination-jump-trigger
hover style, and the full #pagination-jump-dialog styling + keyframe
scale-up/scale-down animations
- Add [pagination] i18n keys (jumpToPage / jump / pressEnter) to
en / zh / zh-hant-tw / zh-hant-hk / ja
* style: align pagination code with upstream conventions
- pagination.html: collapse multi-line span/class/aria attrs to single
lines; use HTML5 void element syntax; fix hint div indentation
- pagination.scss: 2-space indent → 4-space indent
- pagination.ts: tab indent → 4-space indent; export const arrow fn →
export function declaration
* chore: update layouts/_partials/pagination.html
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* chore: add aria-labelledby attrributes for better accesibility
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* fix: use { once: true } for the listener and guard against re-entry when .closing is already set.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
* style: replace hardcoded values with design tokens and improve dialog UX
- Replace all hardcoded px spacing in .page-link with --spacing-* tokens
- Use @include card-style in #pagination-jump-dialog; override with --shadow-l2
- Replace padding: 24px with var(--card-padding) for responsive dialog padding
- Align header title/subtitle to space-between for cleaner layout
- Replace hardcoded gaps/padding in form with spacing tokens
- Fix input/button border-radius from 8px to 6px (better proportion for 44px height)
- Fix focus ring: use color-mix(accent-color 20%) so it's visible in dark mode
- Add :focus-visible + outline:none to fully suppress native browser outline
- Remove translateY from button hover for more restrained interaction
- Scope transition to specific properties (border-color, box-shadow, background-color)
* chore: add pagination test articles for easier debugging
* style: enhance backdrop animations for pagination jump dialog
* style: replace pagination ellipsis spans with buttons for improved accessibility
* fix: check if browser supports dialog API before continue with pagination jump setup
* fix: retain focus on last active element when closing pagination jump dialog
* fix: style for page-link button (pagination-jump)
* style: adjust width of pagination jump dialog, add container padding
* style: simplify
* refactor: simplify pagination link logic
---------
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Jimmy Cai <jimmy@cai.im>
* 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>
* refactor: migrate i18n files from YAML to TOML format and simplify structure
* refactor: make translation file adjust to gohugoio/locales language code so date translation can work properly
* refactor: use hyphens instead of underscores for i18n, because that's how Hugo pick the translation file
* docs: update comments for i18n language availability and CJK language detection in hugo.toml.
