From 57bb59e7685be6cd6ea3b7fc00dc7d8ae60f6691 Mon Sep 17 00:00:00 2001
From: interlope <spleenftw@gmail.com>
Date: Mon, 1 Jun 2026 23:48:36 +0200
Subject: [PATCH] feat: enhance performance and accessibility with non-blocking
 font loading, lazy-loading images, and mobile navbar toggle

---
 .htaccess     | 38 ++++++++++++++++++++++
 css/style.css | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++
 index.php     | 11 ++++---
 js/blowdit.js | 72 +++++++++++++++++++++++++++++++++++++++++
 php/head.php  |  6 ++--
 php/page.php  | 13 ++++++--
 6 files changed, 220 insertions(+), 9 deletions(-)
 create mode 100644 .htaccess

diff --git a/.htaccess b/.htaccess
new file mode 100644
index 0000000..cfff0b3
--- /dev/null
+++ b/.htaccess
@@ -0,0 +1,38 @@
+# ============================================================
+# BLOWDIT — static asset delivery (Apache)
+# Scoped to the theme directory: only affects files served from
+# this folder (css/js/img/fonts). Bludit's routing lives in the
+# site-root .htaccess and is untouched.
+# No-op on nginx / PHP's built-in server.
+# ============================================================
+
+# ---- Compression ----
+<IfModule mod_brotli.c>
+	AddOutputFilterByType BROTLI_COMPRESS text/css application/javascript application/json image/svg+xml application/xml
+</IfModule>
+<IfModule mod_deflate.c>
+	AddOutputFilterByType DEFLATE text/css application/javascript application/json image/svg+xml application/xml text/plain
+</IfModule>
+
+# ---- Far-future caching ----
+# Safe because every asset is requested with a ?v=<mtime> query string
+# (see head.php / index.php), so a changed file gets a fresh URL.
+<IfModule mod_expires.c>
+	ExpiresActive On
+	ExpiresByType text/css                 "access plus 1 year"
+	ExpiresByType application/javascript   "access plus 1 year"
+	ExpiresByType image/png                "access plus 1 year"
+	ExpiresByType image/jpeg               "access plus 1 year"
+	ExpiresByType image/gif                "access plus 1 year"
+	ExpiresByType image/webp               "access plus 1 year"
+	ExpiresByType image/svg+xml            "access plus 1 year"
+	ExpiresByType image/x-icon             "access plus 1 year"
+	ExpiresByType font/woff                "access plus 1 year"
+	ExpiresByType font/woff2               "access plus 1 year"
+</IfModule>
+
+<IfModule mod_headers.c>
+	<FilesMatch "\.(css|js|png|jpe?g|gif|webp|svg|ico|woff2?)$">
+		Header set Cache-Control "public, max-age=31536000, immutable"
+	</FilesMatch>
+</IfModule>
diff --git a/css/style.css b/css/style.css
index 3dbaeab..bea9b8e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1726,6 +1726,95 @@ footer.footer-modern a:hover {
 	.back-to-top.is-visible { transform: none; }
 }
 
+/* ========================================
+   SYNTAX HIGHLIGHTING (highlight.js)
+   Use only the theme's token colours; keep the code block's own
+   background/padding (set on pre / --code-bg) rather than hljs's.
+   ======================================== */
+pre code.hljs {
+	padding: 0 !important;
+	background: transparent !important;
+}
+
+/* ========================================
+   KEYBOARD FOCUS — visible ring for keyboard users only
+   ======================================== */
+a:focus-visible,
+button:focus-visible,
+.swatch:focus-visible,
+.tab-btn:focus-visible,
+.carousel-arrow:focus-visible,
+.carousel-dot:focus-visible,
+.lightbox-arrow:focus-visible,
+.code-copy:focus-visible,
+.back-to-top:focus-visible {
+	outline: 2px solid var(--accent);
+	outline-offset: 2px;
+	border-radius: 2px;
+}
+
+/* Don't show the ring for mouse clicks */
+a:focus:not(:focus-visible),
+button:focus:not(:focus-visible) {
+	outline: none;
+}
+
+/* ========================================
+   PRINT — clean, ink-friendly article output
+   ======================================== */
+@media print {
+	.navbar-modern,
+	.footer,
+	.sidebar-container,
+	.toc-sidebar,
+	.skip-link,
+	.reading-progress,
+	.back-to-top,
+	.code-copy,
+	.code-copy-toast,
+	.theme-picker-wrap {
+		display: none !important;
+	}
+
+	html, body {
+		background: #ffffff !important;
+		color: #000000 !important;
+	}
+
+	/* Use the full page width once the chrome is gone */
+	.container,
+	.container-wide {
+		max-width: 100% !important;
+		width: 100% !important;
+	}
+
+	.card-modern {
+		box-shadow: none !important;
+		border: none !important;
+	}
+
+	a {
+		color: #000000 !important;
+		text-decoration: underline;
+	}
+
+	/* Keep code blocks readable on paper */
+	pre, code {
+		background: #f5f5f5 !important;
+		color: #000000 !important;
+		border-color: #cccccc !important;
+	}
+
+	pre {
+		white-space: pre-wrap;
+		word-wrap: break-word;
+	}
+
+	/* Avoid awkward page breaks */
+	h1, h2, h3, h4 { page-break-after: avoid; }
+	pre, blockquote, table, figure, img { page-break-inside: avoid; }
+}
+
 /* ========================================
    RESPONSIVE
    ======================================== */
diff --git a/index.php b/index.php
index 894a723..6b4032d 100644
--- a/index.php
+++ b/index.php
@@ -153,11 +153,12 @@
 
 	<!-- Javascript -->
 	<?php
-		// Include Jquery file from Bludit Core
-		echo Theme::jquery();
-
-		// Include javascript Bootstrap file from Bludit Core
-		echo Theme::jsBootstrap();
+		// jQuery and Bootstrap's JS bundle are intentionally NOT loaded: every
+		// interactive piece in this theme is vanilla JS (theme picker, tabs,
+		// carousel, lightbox), and the only Bootstrap-JS feature used — the
+		// mobile navbar collapse — is reimplemented in blowdit.js. This drops
+		// ~115 KB. Re-add Theme::jquery() / Theme::jsBootstrap() here if you
+		// install a plugin that depends on them.
 	?>
 
 	<!-- Theme behaviour: deferred, cached external bundle.
diff --git a/js/blowdit.js b/js/blowdit.js
index b499a4d..883500b 100644
--- a/js/blowdit.js
+++ b/js/blowdit.js
@@ -25,6 +25,33 @@
 		imageViewer: I18N.imageViewer || 'Image viewer'
 	};
 
+	/* --------------------------------------------------------
+	   Mobile navbar toggle (replaces Bootstrap's collapse JS)
+	   Toggles the .show class that Bootstrap's CSS already styles.
+	   -------------------------------------------------------- */
+	(function () {
+		var toggler = document.querySelector('.navbar-toggler');
+		var target  = document.getElementById('navbarResponsive');
+		if (!toggler || !target) return;
+
+		function setOpen(open) {
+			target.classList.toggle('show', open);
+			toggler.classList.toggle('collapsed', !open);
+			toggler.setAttribute('aria-expanded', open ? 'true' : 'false');
+		}
+
+		toggler.addEventListener('click', function () {
+			setOpen(!target.classList.contains('show'));
+		});
+
+		// Collapse the menu after tapping a link (mobile)
+		Array.prototype.forEach.call(target.querySelectorAll('.nav-link'), function (link) {
+			link.addEventListener('click', function () {
+				if (target.classList.contains('show')) setOpen(false);
+			});
+		});
+	})();
+
 	/* --------------------------------------------------------
 	   Theme picker
 	   -------------------------------------------------------- */
@@ -619,6 +646,51 @@
 		Array.prototype.forEach.call(pres, enhance);
 	})();
 
+	/* --------------------------------------------------------
+	   Syntax highlighting (highlight.js, from CDN)
+	   Loaded ONLY when the page actually contains code. Just the token
+	   colours are used — backgrounds/padding stay on the theme's --code-bg
+	   (see style.css). The colour theme swaps with data-theme.
+	   -------------------------------------------------------- */
+	(function () {
+		var codes = document.querySelectorAll('.content pre code, .tab-panel pre code');
+		if (!codes.length) return;
+
+		var BASE = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/';
+
+		function makeThemeLink(name) {
+			var l = document.createElement('link');
+			l.rel = 'stylesheet';
+			l.href = BASE + 'styles/' + name + '.min.css';
+			l.crossOrigin = 'anonymous';
+			document.head.appendChild(l);
+			return l;
+		}
+		var lightCss = makeThemeLink('github');
+		var darkCss  = makeThemeLink('github-dark');
+
+		function syncTheme() {
+			var isLight = (document.documentElement.getAttribute('data-theme') === 'light');
+			lightCss.disabled = !isLight;
+			darkCss.disabled  = isLight;
+		}
+		syncTheme();
+		new MutationObserver(syncTheme).observe(document.documentElement, {
+			attributes: true, attributeFilter: ['data-theme']
+		});
+
+		var s = document.createElement('script');
+		s.src = BASE + 'highlight.min.js';
+		s.crossOrigin = 'anonymous';
+		s.onload = function () {
+			if (!window.hljs) return;
+			Array.prototype.forEach.call(codes, function (code) {
+				try { window.hljs.highlightElement(code); } catch (e) {}
+			});
+		};
+		document.head.appendChild(s);
+	})();
+
 	/* --------------------------------------------------------
 	   Reading progress bar — tracks scroll position over the page.
 	   Only shown when there's article content to read.
diff --git a/php/head.php b/php/head.php
index 8fa3cc4..c6214fa 100644
--- a/php/head.php
+++ b/php/head.php
@@ -160,10 +160,12 @@
 <!-- Include Favicon -->
 <?php echo Theme::favicon('img/favicon.png'); ?>
 
-<!-- Inter typeface (Blowfish-like typography) -->
+<!-- Inter typeface (Blowfish-like typography) — loaded non-render-blocking:
+     fetched as print media, then flipped to all once it arrives. -->
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" media="print" onload="this.media='all'">
+<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"></noscript>
 
 <!-- Include Bootstrap CSS file bootstrap.css -->
 <?php echo Theme::cssBootstrap(); ?>
diff --git a/php/page.php b/php/page.php
index 6affc7f..f668efb 100644
--- a/php/page.php
+++ b/php/page.php
@@ -7,7 +7,7 @@
 	<!-- Cover image -->
 	<?php if ($page->coverImage()): ?>
 	<div class="cover-image-wrapper">
-		<img class="card-img-top" alt="<?php echo htmlspecialchars($page->title()); ?>" src="<?php echo $page->coverImage(); ?>"/>
+		<img class="card-img-top" alt="<?php echo htmlspecialchars($page->title(), ENT_QUOTES, 'UTF-8'); ?>" src="<?php echo $page->coverImage(); ?>" fetchpriority="high" decoding="async"/>
 	</div>
 	<?php endif ?>
 
@@ -25,7 +25,16 @@
 
 		<!-- Full content -->
 		<div class="content">
-			<?php echo $page->content(); ?>
+			<?php
+				// 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(
+					'/<img(?![^>]*\bloading=)/i',
+					'<img loading="lazy" decoding="async"',
+					$page->content()
+				);
+			?>
 		</div>
 
 		<!-- Tags and Category -->