This commit is contained in:
interlope committed 2026-07-12 15:40:39 +02:00
commit bacda9011c
8 files changed
+300 -13

No files matched your search

+6 -2
View File
@@ -3,7 +3,7 @@
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.22+-informational) ![License](https://img.shields.io/badge/license-MIT-green) ![Version](https://img.shields.io/badge/version-1.6.0-blue)
![Bludit](https://img.shields.io/badge/Bludit-3.22+-informational) ![License](https://img.shields.io/badge/license-MIT-green) ![Version](https://img.shields.io/badge/version-1.7.0-blue)
## Features
@@ -16,6 +16,8 @@ A clean, minimal theme for [Bludit](https://www.bludit.com) inspired by the
- **Keyboard shortcuts** — `/` (search), `g h` (go home), `t` (back to top), `Esc` (close overlay).
- **Randomized navigation** — the Navigation/Pages plugin list is shuffled on every load.
- **Reading time & dates** shown on the post list and single posts.
- **Post-list excerpts & thumbnails** — the page description renders as a 2-line excerpt with the cover image as a right-side thumbnail; tags are capped at 5 with a `+N` badge.
- **Older / newer post navigation** — chronological links under every article, above the related 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 with a dark overlay and zoom hint.
@@ -24,9 +26,11 @@ A clean, minimal theme for [Bludit](https://www.bludit.com) inspired by the
- **Code block header bar** — language label + copy-to-clipboard button on every code block.
- **Callout/admonition boxes** — `> [!NOTE]`, `> [!TIP]`, `> [!WARNING]`, `> [!DANGER]`, `> [!IMPORTANT]`.
- **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.
- **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.
- **PWA** — web app manifest included.
- **CLS-free images** — `width`/`height` are injected server-side into local-upload images (plus lazy-loading and async decode).
- **View transitions** — smooth cross-document fade on supporting browsers; respects `prefers-reduced-motion`.
- Fully responsive; no jQuery, no Bootstrap JS, no webfont requests.
## Installation
+164 -1
View File
@@ -244,6 +244,24 @@
--social-icon-filter: brightness(0) invert(1);
}
/* ========================================
VIEW TRANSITIONS (cross-document)
Smooth fade between page navigations on supporting browsers
(Chrome/Edge 126+); silently ignored elsewhere. Disabled for
users who prefer reduced motion.
======================================== */
@view-transition {
navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
/* ========================================
BASE
======================================== */
@@ -355,13 +373,45 @@ h2.title {
margin-bottom: var(--space-md);
}
/* Justify body paragraphs; hyphenate so the inter-word gaps stay tidy */
/* Justified body text on wide screens, where long lines keep the word gaps
tidy — helped by auto-hyphenation. Below 576px the lines are too short for
justification (rivers of whitespace), so mobile falls back to left-aligned. */
.content p {
text-align: justify;
text-align-last: left; /* never stretch a paragraph's final line */
hyphens: auto;
-webkit-hyphens: auto;
}
@media (max-width: 575.98px) {
.content p {
text-align: left;
hyphens: none;
-webkit-hyphens: none;
}
}
/* In-content links: underlined so they're distinguishable from body text.
The palette is monochrome (accent ≈ text colour), so colour alone can't
signal a link — the underline does. Heading anchors and image links opt out. */
.content a:not(.heading-anchor) {
text-decoration: underline;
text-decoration-color: var(--text-muted);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.content a:not(.heading-anchor):hover {
color: var(--text-primary);
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
}
/* Links that wrap an image (lightbox) shouldn't draw an underline stub */
.content a:has(> img) {
text-decoration: none;
}
.content img {
border-radius: var(--radius-md);
margin: var(--space-md) 0;
@@ -847,10 +897,67 @@ img.nav-svg-icon {
margin-right: 0.25rem;
}
/* Excerpt: 1-2 lines of the page description, clamped so long ones can't
push the list around */
.post-list-excerpt {
margin: 0.6rem 0 0;
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-list-item .post-taxonomy {
margin-top: var(--space-sm);
}
/* Cover thumbnail: text left, image right (Blowfish-style) */
.post-list-row {
display: flex;
gap: var(--space-md);
align-items: flex-start;
}
.post-list-main {
flex: 1 1 auto;
min-width: 0; /* allow long titles/URLs to wrap instead of pushing the thumb */
}
.post-list-thumb {
flex: 0 0 auto;
display: block;
}
.post-list-thumb img {
width: 168px;
height: 112px;
object-fit: cover;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
background: var(--bg-subtle);
transition: transform 0.2s ease;
}
.post-list-thumb:hover img {
transform: scale(1.03);
}
@media (max-width: 575.98px) {
.post-list-thumb img {
width: 96px;
height: 72px;
}
}
/* "+N" overflow badge — muted, links to the post (where all tags are shown) */
.taxonomy-badge-more {
color: var(--text-muted);
border-style: dashed;
}
/* ========================================
POST CARDS (single page / post)
======================================== */
@@ -2043,6 +2150,62 @@ button:focus:not(:focus-visible) {
/* Separate the comments widget from the share row so it doesn't feel cramped. */
.utterances { margin-top: var(--space-xl) !important; }
/* ========================================
PREV / NEXT POST NAVIGATION
======================================== */
.post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
margin: var(--space-lg) 0 0;
}
.post-nav-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
background: var(--bg-surface);
transition: border-color 0.2s ease, background 0.2s ease;
}
.post-nav-item:hover {
background: var(--bg-hover);
border-color: var(--text-muted);
}
.post-nav-newer { text-align: right; align-items: flex-end; }
.post-nav-label {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: var(--text-muted);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.post-nav-title {
color: var(--text-primary);
font-weight: 600;
font-size: 0.95rem;
line-height: 1.35;
}
.post-nav-empty {
border: none;
background: transparent;
pointer-events: none;
}
@media (max-width: 575.98px) {
.post-nav { grid-template-columns: 1fr; }
.post-nav-empty { display: none; }
}
/* ========================================
RELATED POSTS
======================================== */
+4
View File
@@ -29,6 +29,10 @@
"Back to home": "Back to home",
"Previous": "Previous",
"Next": "Next",
"Older post": "Older post",
"Newer post": "Newer post",
"Post navigation": "Post navigation",
"All tags": "All tags",
"Updated": "Updated",
"Copy": "Copy",
"Copied": "Copied",
+3 -3
View File
@@ -2,9 +2,9 @@
"author": "spleenftw",
"email": "",
"website": "https://github.com/Spleenftw/bludit-blowfish",
"version": "1.6.0",
"releaseDate": "2026-06-03",
"version": "1.7.0",
"releaseDate": "2026-07-10",
"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."
"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."
}
+17 -2
View File
@@ -261,5 +261,20 @@
?>
<link rel="stylesheet" type="text/css" href="<?php echo $styleHref; ?>">
<!-- Load Bludit Plugins: Site head -->
<?php Theme::plugins('siteHead'); ?>
<!-- Load Bludit Plugins: Site head.
The theme already emits a complete, coherent set of Open Graph / Twitter
Card / canonical tags above. Bludit's Open Graph & Twitter Cards plugins
emit their own (conflicting) set — e.g. a post image as og:image on the
homepage and multiple og:locale values — so their duplicates are stripped
here. Best fixed at the source by deactivating those plugins in the admin;
this filter just makes the markup correct either way. -->
<?php
ob_start();
Theme::plugins('siteHead');
$bdPluginHead = ob_get_clean();
// <meta property="og:…"> / <meta name="twitter:…"> / <meta property="article:…">
$bdPluginHead = preg_replace('/<meta\b[^>]*\b(?:property|name)=["\'](?:og:|twitter:|article:)[^"\']*["\'][^>]*>\s*/i', '', $bdPluginHead);
// duplicate <link rel="canonical">
$bdPluginHead = preg_replace('/<link\b[^>]*\brel=["\']canonical["\'][^>]*>\s*/i', '', $bdPluginHead);
echo $bdPluginHead;
?>
+37 -4
View File
@@ -52,11 +52,16 @@
<!-- Post list (titles only) -->
<div class="post-list">
<?php foreach ($content as $page) : ?>
<article class="post-list-item">
<?php $bdCover = $page->coverImage(); ?>
<article class="post-list-item<?php echo $bdCover ? ' has-thumb' : ''; ?>">
<!-- Load Bludit Plugins: Page Begin -->
<?php Theme::plugins('pageBegin'); ?>
<div class="post-list-row">
<div class="post-list-main">
<div class="post-list-head">
<a href="<?php echo $page->permalink(); ?>">
<h2 class="post-list-title"><?php echo blowfish_text($page->title()); ?></h2>
@@ -69,8 +74,18 @@
</div>
</div>
<!-- Tags and Category -->
<?php $tagsList = $page->tags(true); $categoryKey = $page->categoryKey(); ?>
<!-- Excerpt (the page description, set in the admin's SEO tab) -->
<?php $bdExcerpt = blowfish_plain($page->description()); ?>
<?php if ($bdExcerpt !== '') : ?>
<p class="post-list-excerpt"><?php echo htmlspecialchars($bdExcerpt, ENT_QUOTES, 'UTF-8'); ?></p>
<?php endif ?>
<!-- Tags and Category — capped so the list stays scannable -->
<?php
$tagsList = $page->tags(true);
$categoryKey = $page->categoryKey();
$bdMaxTags = 5; // tags shown per post on the list; the rest collapse into "+N"
?>
<?php if (!empty($tagsList) || $categoryKey) : ?>
<div class="post-taxonomy">
<?php if ($categoryKey) : ?>
@@ -78,12 +93,30 @@
<?php echo blowfish_icon('folder'); ?><?php echo blowfish_text($page->category()); ?>
</a>
<?php endif ?>
<?php $bdTagCount = 0; $bdTagOverflow = 0; ?>
<?php foreach ($tagsList as $tagKey => $tagName) : ?>
<a class="taxonomy-badge" href="<?php echo DOMAIN_TAGS . $tagKey; ?>"><?php echo blowfish_icon('tag'); ?><?php echo blowfish_text($tagName); ?></a>
<?php if ($bdTagCount < $bdMaxTags) : $bdTagCount++; ?>
<a class="taxonomy-badge" href="<?php echo DOMAIN_TAGS . $tagKey; ?>"><?php echo blowfish_icon('tag'); ?><?php echo blowfish_text($tagName); ?></a>
<?php else : $bdTagOverflow++; ?>
<?php endif ?>
<?php endforeach ?>
<?php if ($bdTagOverflow > 0) : ?>
<a class="taxonomy-badge taxonomy-badge-more" href="<?php echo $page->permalink(); ?>" title="<?php echo $L->get('All tags'); ?>">+<?php echo $bdTagOverflow; ?></a>
<?php endif ?>
</div>
<?php endif ?>
</div><!-- /.post-list-main -->
<!-- Cover thumbnail -->
<?php if ($bdCover) : ?>
<a class="post-list-thumb" href="<?php echo $page->permalink(); ?>" tabindex="-1" aria-hidden="true">
<img src="<?php echo htmlspecialchars($bdCover, ENT_QUOTES, 'UTF-8'); ?>" alt="" loading="lazy" decoding="async" />
</a>
<?php endif ?>
</div><!-- /.post-list-row -->
<!-- Load Bludit Plugins: Page End -->
<?php Theme::plugins('pageEnd'); ?>
+22
View File
@@ -55,6 +55,28 @@ if (!function_exists('blowfish_icon')) {
return DOMAIN_THEME . $rel . ($v ? '?v=' . $v : '');
}
// Inject width/height attributes into local-upload <img> tags that lack
// them, so the browser reserves the box before the image loads (no CLS).
// Only touches images served from this site's uploads folder; remote
// images and tags that already declare a width are left alone.
function blowfish_img_dimensions($html) {
if (!defined('DOMAIN_UPLOADS') || !defined('PATH_UPLOADS')) { return $html; }
return preg_replace_callback('/<img\b[^>]*>/i', function ($m) {
$tag = $m[0];
if (preg_match('/\b(?:width|height)\s*=/i', $tag)) { return $tag; }
if (!preg_match('/\bsrc=["\']([^"\']+)["\']/i', $tag, $src)) { return $tag; }
$url = html_entity_decode($src[1], ENT_QUOTES, 'UTF-8');
if (strpos($url, DOMAIN_UPLOADS) !== 0) { return $tag; }
$rel = rawurldecode(substr($url, strlen(DOMAIN_UPLOADS)));
if ($rel === '' || strpos($rel, '..') !== false) { return $tag; }
$file = PATH_UPLOADS . $rel;
if (!is_file($file)) { return $tag; }
$size = @getimagesize($file);
if (!$size || empty($size[0]) || empty($size[1])) { return $tag; }
return preg_replace('/<img\b/i', '<img width="' . (int) $size[0] . '" height="' . (int) $size[1] . '"', $tag, 1);
}, $html);
}
// Map a theme key to its toggle icon name.
function blowfish_theme_icon($theme) {
$map = array(
+47 -1
View File
@@ -102,11 +102,15 @@
// Lazy-load + async-decode in-content images that don't already
// set a loading attribute. Operates on the rendered HTML, so
// carousel/tabs fences (still raw text inside <pre>) are untouched.
echo preg_replace(
$bdContent = preg_replace(
'/<img(?![^>]*\bloading=)/i',
'<img loading="lazy" decoding="async"',
$page->content()
);
// Add width/height to local-upload images so the layout doesn't
// shift as they load (CLS). CSS `img { height: auto }` keeps the
// aspect ratio responsive.
echo blowfish_img_dimensions($bdContent);
?>
</div>
@@ -144,6 +148,48 @@
</article>
<?php
// ---- Previous / next post navigation ----
// Chronological neighbours (Bludit's list is newest-first). Guarded like
// the related-posts block so an API difference degrades to nothing.
if (!$page->isStatic() && !$url->notFound()) {
$bdOlder = null; $bdNewer = null;
try {
global $pages;
if (isset($pages) && method_exists($pages, 'getList')) {
$bdNavKeys = array();
foreach ($pages->getList(1, 10000, true) as $bdNk) {
$bdNp = new Page($bdNk);
if (!$bdNp->isStatic()) { $bdNavKeys[] = $bdNp; }
}
foreach ($bdNavKeys as $bdNi => $bdNp) {
if ($bdNp->key() === $page->key()) {
if ($bdNi > 0) { $bdNewer = $bdNavKeys[$bdNi - 1]; }
if ($bdNi < count($bdNavKeys) - 1) { $bdOlder = $bdNavKeys[$bdNi + 1]; }
break;
}
}
}
} catch (\Throwable $e) { $bdOlder = null; $bdNewer = null; }
?>
<?php if ($bdOlder || $bdNewer) : ?>
<nav class="post-nav" aria-label="<?php echo $L->get('Post navigation'); ?>">
<?php if ($bdOlder) : ?>
<a class="post-nav-item post-nav-older" href="<?php echo $bdOlder->permalink(); ?>" rel="prev">
<span class="post-nav-label"><?php echo blowfish_icon('chevron-left'); ?><?php echo $L->get('Older post'); ?></span>
<span class="post-nav-title"><?php echo blowfish_text($bdOlder->title()); ?></span>
</a>
<?php else : ?><span class="post-nav-item post-nav-empty" aria-hidden="true"></span><?php endif ?>
<?php if ($bdNewer) : ?>
<a class="post-nav-item post-nav-newer" href="<?php echo $bdNewer->permalink(); ?>" rel="next">
<span class="post-nav-label"><?php echo $L->get('Newer post'); ?><?php echo blowfish_icon('chevron-right'); ?></span>
<span class="post-nav-title"><?php echo blowfish_text($bdNewer->title()); ?></span>
</a>
<?php else : ?><span class="post-nav-item post-nav-empty" aria-hidden="true"></span><?php endif ?>
</nav>
<?php endif ?>
<?php } ?>
<?php
// ---- Related posts ----
// Best-effort via Bludit's Pages API; wrapped so any API difference degrades