docs: v1.8.0 — mermaid, collapsible callouts, issue #1 fixes

README.md

@@ -3,7 +3,7 @@
 A clean, minimal theme for [Bludit](https://www.bludit.com) inspired by the
 [Blowfish](https://blowfish.page/) Hugo theme.
 
-![Bludit](https://img.shields.io/badge/Bludit-3.22+-informational) ![License](https://img.shields.io/badge/license-MIT-green) ![Version](https://img.shields.io/badge/version-1.7.0-blue)
+![Bludit](https://img.shields.io/badge/Bludit-3.22+-informational) ![License](https://img.shields.io/badge/license-MIT-green) ![Version](https://img.shields.io/badge/version-1.8.0-blue)
 
 ## Features
 
@@ -24,7 +24,8 @@ A clean, minimal theme for [Bludit](https://www.bludit.com) inspired by the
 - **Image carousel** — ` ```carousel ` fenced block, one image per line (markdown syntax or bare URL with optional `| caption`).
 - **Tabbed code blocks** — ` ```tabs ` fenced block with `[Tab Name]` or `@tab Name` headers.
 - **Code block header bar** — language label + copy-to-clipboard button on every code block.
-- **Callout/admonition boxes** — `> [!NOTE]`, `> [!TIP]`, `> [!WARNING]`, `> [!DANGER]`, `> [!IMPORTANT]`.
+- **Callout/admonition boxes** — `> [!NOTE]`, `> [!TIP]`, `> [!WARNING]`, `> [!DANGER]`, `> [!IMPORTANT]`; optionally collapsible with a custom title.
+- **Mermaid diagrams** — ` ```mermaid ` fenced block. The library is self-hosted and loaded only on pages that contain a diagram; colours follow the active theme and re-render when it changes.
 - **Series navigation** — posts tagged `series-*` display an ordered series box.
 - **SEO** — Open Graph, Twitter Card, JSON-LD (WebSite, Article, BreadcrumbList, sameAs), canonical URL, theme-color meta, cover-image preload. Duplicate OG/Twitter/canonical tags emitted by Bludit plugins are stripped automatically.
 - **Accessibility** — skip link, ARIA labels, `:focus-visible`, heading anchor links, print stylesheet.
@@ -55,9 +56,12 @@ bludit-blowfish/
 ├── metadata.json      Theme metadata
 ├── manifest.webmanifest
 ├── css/
-│   └── style.css      All styles (CSS custom properties, 5 themes)
+│   ├── style.css      All styles (CSS custom properties, 5 themes)
+│   └── hljs/          Syntax-highlighting palettes, one per theme
 ├── js/
-│   └── blowfish.js    Deferred JS bundle (ToC, lightbox, carousel, search, …)
+│   ├── blowfish.js    Deferred JS bundle (ToC, lightbox, carousel, search, …)
+│   ├── highlight.min.js  Self-hosted highlight.js
+│   └── mermaid.min.js    Self-hosted mermaid, loaded only on pages with a diagram
 ├── php/
 │   ├── head.php       <head>, fonts, favicon, anti-FOUC theme script
 │   ├── navbar.php     Navbar, social icons, theme-picker dropdown
@@ -128,6 +132,47 @@ Supports swipe on touch devices.
 
 Supported types: `NOTE`, `TIP`, `WARNING`, `DANGER`, `IMPORTANT`.
 
+Text after the marker replaces the default title, and a `+` or `-` makes the box
+collapsible — `+` starts open, `-` starts closed:
+
+```markdown
+> [!TIP] A custom title, always open
+> Body text.
+
+> [!WARNING]+ Starts expanded
+> The reader can fold this away.
+
+> [!NOTE]- Starts collapsed
+> Hidden until the reader expands it.
+```
+
+Collapsible callouts are built on `<details>`/`<summary>`, so keyboard and
+screen-reader behaviour comes from the browser. Titles may contain formatting.
+
+> **Note on existing content:** a single-line `> [!NOTE] Some text` now renders
+> "Some text" as the *title* rather than the body. Put the marker on its own
+> line to keep the default label.
+
+## Mermaid diagrams
+
+Use a ` ```mermaid ` fenced block:
+
+````
+```mermaid
+graph LR
+  A[Proxmox node] --> B{linstor}
+  B --> C[(Ceph pool)]
+```
+````
+
+Diagram colours are mapped from the active theme's CSS custom properties and
+re-rendered when the swatch picker changes, so diagrams follow the site theme.
+
+`mermaid.min.js` is self-hosted and fetched **only** on pages that actually
+contain a diagram — other pages load nothing. It is a large file (~3.5 MB), so
+serving the theme with gzip or brotli compression is recommended. A diagram that
+fails to parse falls back to showing its source rather than an empty gap.
+
 ## License
 
 [MIT](LICENSE)

metadata.json

@@ -2,9 +2,9 @@
   "author": "spleenftw",
   "email": "",
   "website": "https://github.com/Spleenftw/bludit-blowfish",
-  "version": "1.7.0",
+  "version": "1.8.0",
-  "releaseDate": "2026-07-10",
+  "releaseDate": "2026-08-27",
   "license": "MIT",
   "compatible": "3.22.0",
-  "notes": "A Bludit theme inspired by the Blowfish Hugo theme. Five-theme swatch picker (Light/Dark/Nord/Dracula/Catppuccin), sticky ToC sidebar on articles, image lightbox with zoom, image carousel (```carousel fence), tabbed code blocks (```tabs fence), smart sidebar per page type, and clean responsive typography. v1.3.0: SEO (Open Graph, Twitter Card, JSON-LD, theme-color, cover preload), per-theme syntax highlighting (self-hosted highlight.js), copy-to-clipboard on code blocks, numbered pagination, inline-SVG icons (dropped the Bootstrap Icons webfont), removed jQuery/Bootstrap JS, deferred cached JS bundle, reading progress bar, back-to-top, randomised sidebar selection, lazy-loaded images, accessibility (skip link, ARIA, :focus-visible) and a print stylesheet. v1.4.0: canonical URL, WebSite + BreadcrumbList + author sameAs JSON-LD, og:image:alt / twitter:site+creator, cover-image aspect-ratio (CLS), heading anchor links, prev/next article nav, related posts, share buttons (X/LinkedIn/copy-link), mailto social icon, PWA web app manifest, 'updated on' date, and outbound-link hardening (noopener noreferrer). v1.5.0: callout/admonition boxes (> [!NOTE]/[!TIP]/[!WARNING]/...), code-block header bar with language label + copy button, visual breadcrumbs, custom 404 page, image figure/figcaption from the markdown title, a mobile table-of-contents drawer, and third-party resource hints. v1.6.0: self-hosted Inter (no Google Fonts), client-side search overlay (\"/\" key + navbar button), keyboard shortcuts (/ , g h, t, Esc), a tabbed-code copy button, series navigation (series-* tag), and content typography (keycaps, task-list checkboxes, <mark>, external-link icon, footnote/definition-list styling). the navbar search icon only appears once the on-page search box scrolls out of view, and code blocks use a header bar (language + copy) with tighter line-height. v1.7.0: readability pass - underlined in-content links, justified paragraphs with auto-hyphenation (left-aligned on mobile), post-list excerpts from the page description with a 5-tag cap (+N badge), older/newer post navigation under articles, de-duplication of Open Graph / Twitter Card / canonical tags emitted by plugins, cover thumbnails on the post list, server-side width/height injection on content images (CLS), and cross-document view transitions."
+  "notes": "A Bludit theme inspired by the Blowfish Hugo theme. Five-theme swatch picker (Light/Dark/Nord/Dracula/Catppuccin), sticky ToC sidebar on articles, image lightbox with zoom, image carousel (```carousel fence), tabbed code blocks (```tabs fence), smart sidebar per page type, and clean responsive typography. v1.3.0: SEO (Open Graph, Twitter Card, JSON-LD, theme-color, cover preload), per-theme syntax highlighting (self-hosted highlight.js), copy-to-clipboard on code blocks, numbered pagination, inline-SVG icons (dropped the Bootstrap Icons webfont), removed jQuery/Bootstrap JS, deferred cached JS bundle, reading progress bar, back-to-top, randomised sidebar selection, lazy-loaded images, accessibility (skip link, ARIA, :focus-visible) and a print stylesheet. v1.4.0: canonical URL, WebSite + BreadcrumbList + author sameAs JSON-LD, og:image:alt / twitter:site+creator, cover-image aspect-ratio (CLS), heading anchor links, prev/next article nav, related posts, share buttons (X/LinkedIn/copy-link), mailto social icon, PWA web app manifest, 'updated on' date, and outbound-link hardening (noopener noreferrer). v1.5.0: callout/admonition boxes (> [!NOTE]/[!TIP]/[!WARNING]/...), code-block header bar with language label + copy button, visual breadcrumbs, custom 404 page, image figure/figcaption from the markdown title, a mobile table-of-contents drawer, and third-party resource hints. v1.6.0: self-hosted Inter (no Google Fonts), client-side search overlay (\"/\" key + navbar button), keyboard shortcuts (/ , g h, t, Esc), a tabbed-code copy button, series navigation (series-* tag), and content typography (keycaps, task-list checkboxes, <mark>, external-link icon, footnote/definition-list styling). the navbar search icon only appears once the on-page search box scrolls out of view, and code blocks use a header bar (language + copy) with tighter line-height. v1.7.0: readability pass - underlined in-content links, justified paragraphs with auto-hyphenation (left-aligned on mobile), post-list excerpts from the page description with a 5-tag cap (+N badge), older/newer post navigation under articles, de-duplication of Open Graph / Twitter Card / canonical tags emitted by plugins, cover thumbnails on the post list, server-side width/height injection on content images (CLS), and cross-document view transitions. v1.8.0: mermaid diagrams (```mermaid fence) rendered from self-hosted mermaid.js, fetched only on pages that contain a diagram and re-rendered in the theme's own colours when the swatch changes; collapsible callouts with custom titles (> [!TIP]+ Title opens, - starts closed) built on details/summary; a theme credit in the footer; related posts no longer repeat the older/newer navigation above them. Fixes: the catppuccin syntax palette ships no hljs base block, so code blocks changed height when switching to or from it (overflow-x is now set by the theme, not the palette); the mobile ToC drawer never highlighted the current heading and its link colours disagreed with the sidebar; the reading progress bar was invisible in Light, where --accent and --chrome-bg are the same value (new --progress-accent token); the collapsed navbar could only be closed with the hamburger (now also outside click and Escape); and highlighted code blocks took their base colour from the palette rather than --code-text, so inline and block code disagreed in four of the five themes."
 }