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
|
||||
[Blowfish](https://blowfish.page/) Hugo theme.
|
||||
|
||||
 
|
||||
  
|
||||
|
||||
## 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 `<pre>` 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 <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
|
||||
│ ├── 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 `<html>` 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 `<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
|
||||
|
||||
|
||||
```
|
||||
````
|
||||
|
||||
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
|
||||
|
||||
|
||||
+3
-3
@@ -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."
|
||||
}
|
||||
Reference in new issue
Block a user