diff --git a/README.md b/README.md index 93ba9a0..a4ccc26 100644 --- a/README.md +++ b/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 , 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 `
`/``, 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) diff --git a/metadata.json b/metadata.json index 4d834a6..24f7908 100644 --- a/metadata.json +++ b/metadata.json @@ -2,9 +2,9 @@ "author": "spleenftw", "email": "", "website": "https://github.com/Spleenftw/bludit-blowfish", - "version": "1.7.0", - "releaseDate": "2026-07-10", + "version": "1.8.0", + "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, , 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, , 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." }