diff --git a/README.md b/README.md index e578f2e..2faa350 100644 --- a/README.md +++ b/README.md @@ -3,19 +3,24 @@ 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.9+-informational) ![License](https://img.shields.io/badge/license-MIT-green) +![Bludit](https://img.shields.io/badge/Bludit-3.9+-informational) ![License](https://img.shields.io/badge/license-MIT-green) ![Version](https://img.shields.io/badge/version-1.2.0-blue) ## Features -- 🎨 **Five color themes** β€” the navbar button cycles **Light β†’ Dark β†’ Nord β†’ Dracula β†’ Catppuccin**, remembering the visitor's choice (falls back to the OS preference). -- 🧱 **Monochrome base design** β€” restrained grayscale palette with crisp typography (Inter). -- πŸ‘€ **Profile hero** β€” circular avatar, site title, slogan and social links on the homepage. -- πŸ“š **Right sidebar** β€” drop any Bludit sidebar plugin into it (categories, tags, search…). +- 🎨 **Five-theme swatch picker** β€” click the theme button to open a dropdown with coloured swatches for Light, Dark, Nord, Dracula and Catppuccin. Choice persists via `localStorage` + cookie (no flash on next load); falls back to OS preference. +- 🧱 **Monochrome base design** β€” restrained grayscale palette with crisp Inter typography. +- πŸ‘€ **Profile hero** β€” circular avatar, site title, slogan and social links on the homepage front page. +- πŸ“– **Sticky Table of Contents** β€” articles that contain headings (`h2`/`h3`/`h4`) get a left sidebar ToC that sticks while scrolling and highlights the active section. Layout automatically switches to 3-column with a wider container. +- πŸ“š **Smart right sidebar** β€” shows only About / Categories / Hit Counter on the homepage (navigation is redundant there); shows the full plugin set on article pages. - πŸ”€ **Randomized navigation** β€” the Navigation/Pages plugin list is shuffled on each load. - ⏱️ **Reading time & dates** shown on the post list and single posts. -- πŸ”— **Social icons** in the navbar and hero, using SVG files in `img/` (GitHub, Mastodon, Bluesky, LinkedIn, and more). +- πŸ”— **Social icons** in the navbar and hero (SVG files in `img/`). - 🏷️ **Tags & categories** rendered as pill badges. -- πŸ“± Fully responsive, no flash of the wrong theme on load. +- πŸ–ΌοΈ **Image lightbox** β€” clicking any article image opens it full-screen. A dark overlay with a magnifier icon appears on hover to hint at the interaction. Closes on click or Esc. +- 🎠 **Image carousel** β€” use a ` ```carousel ` fenced block, one image per line (markdown image syntax or plain URL). +- πŸ“‘ **Tabbed code blocks** β€” use a ` ```tabs ` fenced block with `[Tab Name]` or `@tab Name` headers to show content from multiple servers/environments side by side. +- πŸ“œ **Code block scrollbar** β€” always-visible horizontal scrollbar on `
` blocks with a custom slim style that respects the active theme.
+- πŸ“± Fully responsive; no flash of the wrong theme on load.
 
 ## Installation
 
@@ -28,47 +33,91 @@ A clean, minimal theme for [Bludit](https://www.bludit.com) inspired by the
 2. In the Bludit admin panel go to **Settings β†’ Themes** and activate **Blowdit**.
 
 3. Add your assets to `blowdit/img/`:
-   - Your avatar as `spleenftw.jpeg` β€” used for the homepage profile hero **and** the favicon.
-     To use a different filename, change it in [php/head.php](php/head.php) (favicon) and
-     [php/home.php](php/home.php) (`$profileImage`).
+   - Your avatar as `spleenftw.jpeg` β€” used in the homepage hero and the article sidebar compact card.
+     To change the filename, update `php/sidebar.php` and `php/home.php`.
 
 ## Layout
 
 ```
 blowdit/
-β”œβ”€β”€ index.php          Main template
+β”œβ”€β”€ index.php          Main template (layout, all inline JS)
 β”œβ”€β”€ metadata.json      Theme metadata
 β”œβ”€β”€ css/
-β”‚   └── style.css      Light & dark styles (CSS custom properties)
+β”‚   └── style.css      All styles (CSS custom properties, 5 themes)
 β”œβ”€β”€ php/
 β”‚   β”œβ”€β”€ head.php       , fonts, favicon, anti-FOUC theme script
-β”‚   β”œβ”€β”€ navbar.php     Navbar, social SVG icons, theme toggle
+β”‚   β”œβ”€β”€ navbar.php     Navbar, social SVG icons, theme-picker dropdown
 β”‚   β”œβ”€β”€ home.php       Profile hero + post listing
 β”‚   β”œβ”€β”€ page.php       Single page / post
-β”‚   β”œβ”€β”€ sidebar.php    Sidebar plugin container
+β”‚   β”œβ”€β”€ sidebar.php    Right sidebar plugin container
+β”‚   β”œβ”€β”€ toc.php        Left ToC sidebar (article pages with headings)
 β”‚   └── footer.php     Footer
-β”œβ”€β”€ img/               Social SVG icons + avatar (spleenftw.jpeg)
-└── languages/         Translations
+β”œβ”€β”€ img/               Social SVG icons + avatar
+└── languages/         Translations (10 languages)
 ```
 
 ## Themes
 
-Each theme is just a set of CSS custom properties. Light lives in `:root`; the
-others override it under `[data-theme="dark"]`, `[data-theme="nord"]`,
-`[data-theme="dracula"]` and `[data-theme="catppuccin"]`. The attribute is set on `` before paint (in
-`php/head.php`) to avoid a flash, and the navbar button cycles through them,
-persisting the choice to `localStorage`.
+Each theme is a set of CSS custom properties. Light lives in `:root`; the others
+override it under `[data-theme="dark"]`, `[data-theme="nord"]`,
+`[data-theme="dracula"]` and `[data-theme="catppuccin"]`.
 
-To tweak a palette or add your own theme, edit/duplicate the variable blocks at
-the top of [css/style.css](css/style.css) and add the theme name to the
-`THEMES` array in the toggle script in [index.php](index.php).
+The attribute is set on `` before the first paint (in `php/head.php`) to
+avoid a flash. The navbar swatch picker updates it at runtime and persists the
+choice to both `localStorage` and a cookie.
+
+To add a new theme, add a variable block in `css/style.css` and add the theme
+name + swatch colours to the picker in `php/navbar.php` and the `THEMES` array
+in `index.php`.
+
+## Table of Contents
+
+When an article's rendered HTML contains any `h2`, `h3` or `h4` headings, the
+layout automatically switches from 2-column to 3-column:
+
+```
+[ Left ToC (col-md-3) ] [ Article (col-md-6) ] [ Right sidebar (col-md-3) ]
+```
+
+The ToC is hidden on mobile. The left column has no `align-self-start` so it
+stretches to the full article height, which is what `position: sticky` needs to
+function. The container switches to `.container-wide` (1400 px max-width) and
+the navbar inner container widens to match via `body.has-toc .navbar .container`.
+
+## Tabbed code blocks
+
+Use a ` ```tabs ` fenced block. Delimit tabs with `[Tab Name]` (brackets) or
+`@tab Tab Name` (@ prefix):
+
+````
+```tabs
+[pgs01]
+root@pgs01:~# psql -c "SELECT …"
+
+[pgs02]
+root@pgs02:~# psql -c "SELECT …"
+```
+````
+
+## Image carousel
+
+Use a ` ```carousel ` fenced block. Each non-empty line is one slide. Accepts
+standard markdown image syntax or a bare URL with an optional `| caption`:
+
+````
+```carousel
+![Front panel](/bl-content/uploads/…/server1.png)
+![Rear view](/bl-content/uploads/…/server2.png)
+```
+````
+
+Use `![]()` (empty alt) to show no caption. Supports swipe on touch devices.
 
 ## Randomized navigation
 
 If the **Navigation** (or **Pages**) plugin is in the sidebar, its list is
-shuffled on every page load by a small script in [index.php](index.php). The
-plugin's output is wrapped in `.js-random-nav`; if your plugin uses a different
-CSS class, adjust the detection in `index.php` accordingly.
+shuffled on every page load. The plugin output is wrapped in `.js-random-nav`;
+adjust the detection in `index.php` if your plugin uses a different class.
 
 ## License
 
diff --git a/metadata.json b/metadata.json
index e62d4ef..6c006c1 100644
--- a/metadata.json
+++ b/metadata.json
@@ -2,9 +2,9 @@
   "author": "spleenftw",
   "email": "",
   "website": "https://github.com/Spleenftw/blowdit",
-  "version": "1.0.0",
-  "releaseDate": "2026-05-29",
+  "version": "1.2.0",
+  "releaseDate": "2026-05-30",
   "license": "MIT",
   "compatible": "3.9",
-  "notes": "A Bludit theme inspired by the Blowfish Hugo theme. Features dark mode, card-based post listing, responsive navigation, and clean typography."
+  "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."
 }