Update README and metadata for version 1.2.0: enhance features list and update release date
This commit is contained in:
interlope committed
1 parent
4225373757
commit
4a5655d4dd
2 files changed
+79
-30
No files matched your search
@@ -3,19 +3,24 @@
|
|||||||
A clean, minimal theme for [Bludit](https://www.bludit.com) inspired by the
|
A clean, minimal theme for [Bludit](https://www.bludit.com) inspired by the
|
||||||
[Blowfish](https://blowfish.page/) Hugo theme.
|
[Blowfish](https://blowfish.page/) Hugo theme.
|
||||||
|
|
||||||
 
|
  
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- 🎨 **Five color themes** — the navbar button cycles **Light → Dark → Nord → Dracula → Catppuccin**, remembering the visitor's choice (falls back to the OS preference).
|
- 🎨 **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 typography (Inter).
|
- 🧱 **Monochrome base design** — restrained grayscale palette with crisp Inter typography.
|
||||||
- 👤 **Profile hero** — circular avatar, site title, slogan and social links on the homepage.
|
- 👤 **Profile hero** — circular avatar, site title, slogan and social links on the homepage front page.
|
||||||
- 📚 **Right sidebar** — drop any Bludit sidebar plugin into it (categories, tags, search…).
|
- 📖 **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.
|
- 🔀 **Randomized navigation** — the Navigation/Pages plugin list is shuffled on each load.
|
||||||
- ⏱️ **Reading time & dates** shown on the post list and single posts.
|
- ⏱️ **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.
|
- 🏷️ **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 `<pre>` blocks with a custom slim style that respects the active theme.
|
||||||
|
- 📱 Fully responsive; no flash of the wrong theme on load.
|
||||||
|
|
||||||
## Installation
|
## 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**.
|
2. In the Bludit admin panel go to **Settings → Themes** and activate **Blowdit**.
|
||||||
|
|
||||||
3. Add your assets to `blowdit/img/`:
|
3. Add your assets to `blowdit/img/`:
|
||||||
- Your avatar as `spleenftw.jpeg` — used for the homepage profile hero **and** the favicon.
|
- Your avatar as `spleenftw.jpeg` — used in the homepage hero and the article sidebar compact card.
|
||||||
To use a different filename, change it in [php/head.php](php/head.php) (favicon) and
|
To change the filename, update `php/sidebar.php` and `php/home.php`.
|
||||||
[php/home.php](php/home.php) (`$profileImage`).
|
|
||||||
|
|
||||||
## Layout
|
## Layout
|
||||||
|
|
||||||
```
|
```
|
||||||
blowdit/
|
blowdit/
|
||||||
├── index.php Main template
|
├── index.php Main template (layout, all inline JS)
|
||||||
├── metadata.json Theme metadata
|
├── metadata.json Theme metadata
|
||||||
├── css/
|
├── css/
|
||||||
│ └── style.css Light & dark styles (CSS custom properties)
|
│ └── style.css All styles (CSS custom properties, 5 themes)
|
||||||
├── php/
|
├── php/
|
||||||
│ ├── head.php <head>, fonts, favicon, anti-FOUC theme script
|
│ ├── head.php <head>, 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
|
│ ├── home.php Profile hero + post listing
|
||||||
│ ├── page.php Single page / post
|
│ ├── 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
|
│ └── footer.php Footer
|
||||||
├── img/ Social SVG icons + avatar (spleenftw.jpeg)
|
├── img/ Social SVG icons + avatar
|
||||||
└── languages/ Translations
|
└── languages/ Translations (10 languages)
|
||||||
```
|
```
|
||||||
|
|
||||||
## Themes
|
## Themes
|
||||||
|
|
||||||
Each theme is just a set of CSS custom properties. Light lives in `:root`; the
|
Each theme is a set of CSS custom properties. Light lives in `:root`; the others
|
||||||
others override it under `[data-theme="dark"]`, `[data-theme="nord"]`,
|
override it under `[data-theme="dark"]`, `[data-theme="nord"]`,
|
||||||
`[data-theme="dracula"]` and `[data-theme="catppuccin"]`. The attribute is set on `<html>` before paint (in
|
`[data-theme="dracula"]` and `[data-theme="catppuccin"]`.
|
||||||
`php/head.php`) to avoid a flash, and the navbar button cycles through them,
|
|
||||||
persisting the choice to `localStorage`.
|
|
||||||
|
|
||||||
To tweak a palette or add your own theme, edit/duplicate the variable blocks at
|
The attribute is set on `<html>` before the first paint (in `php/head.php`) to
|
||||||
the top of [css/style.css](css/style.css) and add the theme name to the
|
avoid a flash. The navbar swatch picker updates it at runtime and persists the
|
||||||
`THEMES` array in the toggle script in [index.php](index.php).
|
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
|
||||||
|
|
||||||
|
|
||||||
|
```
|
||||||
|
````
|
||||||
|
|
||||||
|
Use `![]()` (empty alt) to show no caption. Supports swipe on touch devices.
|
||||||
|
|
||||||
## Randomized navigation
|
## Randomized navigation
|
||||||
|
|
||||||
If the **Navigation** (or **Pages**) plugin is in the sidebar, its list is
|
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
|
shuffled on every page load. The plugin output is wrapped in `.js-random-nav`;
|
||||||
plugin's output is wrapped in `.js-random-nav`; if your plugin uses a different
|
adjust the detection in `index.php` if your plugin uses a different class.
|
||||||
CSS class, adjust the detection in `index.php` accordingly.
|
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
|
|||||||
+3
-3
@@ -2,9 +2,9 @@
|
|||||||
"author": "spleenftw",
|
"author": "spleenftw",
|
||||||
"email": "",
|
"email": "",
|
||||||
"website": "https://github.com/Spleenftw/blowdit",
|
"website": "https://github.com/Spleenftw/blowdit",
|
||||||
"version": "1.0.0",
|
"version": "1.2.0",
|
||||||
"releaseDate": "2026-05-29",
|
"releaseDate": "2026-05-30",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"compatible": "3.9",
|
"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."
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user