Blowdit

A clean, minimal theme for Bludit inspired by the Blowfish Hugo theme.

Features

• 🎨 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 (SVG files in img/).
• 🏷️ Tags & categories rendered as pill badges.
• 🖼️ 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 <pre> blocks with a custom slim style that respects the active theme.
• 📱 Fully responsive; no flash of the wrong theme on load.

Installation

1. Download or clone this repository into your Bludit bl-themes directory:

   /usr/share/nginx/html/bl-themes/
   

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 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 (layout, all inline JS)
├── metadata.json      Theme metadata
├── css/
│   └── style.css      All styles (CSS custom properties, 5 themes)
├── php/
│   ├── head.php       <head>, fonts, favicon, anti-FOUC theme script
│   ├── navbar.php     Navbar, social SVG icons, theme-picker dropdown
│   ├── home.php       Profile hero + post listing
│   ├── page.php       Single page / post
│   ├── sidebar.php    Right sidebar plugin container
│   ├── toc.php        Left ToC sidebar (article pages with headings)
│   └── footer.php     Footer
├── img/               Social SVG icons + avatar
└── languages/         Translations (10 languages)

Themes

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"].

The attribute is set on <html> 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. The plugin output is wrapped in .js-random-nav; adjust the detection in index.php if your plugin uses a different class.

License

MIT