docs: v1.8.0 — mermaid, collapsible callouts, issue #1 fixes
This commit is contained in:
interlope committed
1 parent
364a1f4284
commit
dd7dde1073
2 files changed
+52
-7
No files matched your search
@@ -3,7 +3,7 @@
|
||||
A clean, minimal theme for [Bludit](https://www.bludit.com) inspired by the
|
||||
[Blowfish](https://blowfish.page/) Hugo theme.
|
||||
|
||||
  
|
||||
  
|
||||
|
||||
## 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)
|
||||
+3
-3
@@ -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, <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."
|
||||
}
|
||||
Reference in new issue
Block a user