Add inline SVG icons for UI and theme picker

This commit introduces a new PHP file `icons.php` that defines a set of inline SVG icons to replace the Bootstrap Icons webfont. The icons include common UI elements such as calendar, clock, folder, and tag, as well as theme picker icons like sun, moon, snow, droplet, cup, and half. The SVGs are designed to scale with existing font-size rules and are accessible via the `blowdit_icon` function. Additionally, a mapping function `blowdit_theme_icon` is provided to associate theme keys with their corresponding icon names.

.htaccess

@@ -1,38 +0,0 @@
-# ============================================================
-# 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>

css/hljs/github-dark.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}

css/hljs/github.min.css

@@ -0,0 +1,10 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}

css/style.css

@@ -502,7 +502,8 @@ blockquote {
 	color: var(--chrome-text-hover) !important;
 }
 
-.navbar .nav-link .bi {
+.navbar .nav-link .bi,
+.navbar .nav-link .bd-icon {
 	font-size: 1.15rem;
 	margin-right: 0;
 	vertical-align: -0.05em;
@@ -543,7 +544,8 @@ img.nav-svg-icon {
 	color: #ffffff !important;
 }
 
-.theme-toggle .bi {
+.theme-toggle .bi,
+.theme-toggle .bd-icon {
 	font-size: 1.1rem;
 	margin-right: 0;
 }
@@ -797,7 +799,8 @@ img.nav-svg-icon {
 	white-space: nowrap;
 }
 
-.post-list-meta .bi {
+.post-list-meta .bi,
+.post-list-meta .bd-icon {
 	margin-right: 0.25rem;
 }
 
@@ -865,7 +868,8 @@ img.nav-svg-icon {
 	align-items: center;
 }
 
-.metadata i {
+.metadata i,
+.metadata .bd-icon {
 	color: var(--text-muted);
 	margin-right: 0.35rem;
 }
@@ -896,12 +900,14 @@ img.nav-svg-icon {
 	text-decoration: none;
 }
 
-.btn-primary-gradient .bi {
+.btn-primary-gradient .bi,
+.btn-primary-gradient .bd-icon {
 	margin-right: 0;
 	transition: transform 0.2s ease;
 }
 
-.btn-primary-gradient:hover .bi {
+.btn-primary-gradient:hover .bi,
+.btn-primary-gradient:hover .bd-icon {
 	transform: translateX(3px);
 }
 
@@ -928,7 +934,8 @@ img.nav-svg-icon {
 	transition: all 0.2s ease;
 }
 
-.taxonomy-badge .bi {
+.taxonomy-badge .bi,
+.taxonomy-badge .bd-icon {
 	margin-right: 0.35rem;
 	font-size: 0.85em;
 }
@@ -1207,10 +1214,18 @@ footer.footer-modern a:hover {
 /* ========================================
    ICON SPACING
    ======================================== */
-.bi {
+.bi,
+.bd-icon {
 	margin-right: 0.4rem;
 }
 
+/* Inline SVG icons: sized to 1em via their width/height attrs, aligned like
+   the old icon font, and never shrink inside flex rows. */
+.bd-icon {
+	vertical-align: -0.125em;
+	flex: 0 0 auto;
+}
+
 /* ========================================
    TABBED CODE BLOCKS  (```tabs fences)
    ======================================== */

index.php

@@ -1,4 +1,8 @@
 <?php
+	// Inline-SVG icon helper (replaces the Bootstrap Icons webfont). Included
+	// first so blowdit_icon() is available to head.php and every body template.
+	include(THEME_DIR_PHP.'icons.php');
+
 	// Read the theme from a cookie so the root element can be rendered
 	// pre-coloured. This paints the page in the theme colour from the first
 	// byte of every response, eliminating the white flash between navigations.
@@ -165,6 +169,9 @@
 	     The anti-flash theme bootstrap stays inline in head.php — it must
 	     run before the first paint and so cannot be deferred. -->
 	<script>
+		// Theme directory URL, so the deferred bundle can load self-hosted assets
+		// (highlight.js + its theme CSS) relative to the theme.
+		window.BLOWDIT_THEME_URL = <?php echo json_encode(DOMAIN_THEME); ?>;
 		// Localised UI strings for the deferred bundle. $L->get() falls back to
 		// the key itself when a translation is missing, so this is safe in any language.
 		window.BLOWDIT_I18N = {

js/blowdit.js

@@ -58,22 +58,27 @@
 	(function () {
 		var STORAGE_KEY = 'blowdit-theme';
 		var THEMES = ['light', 'dark', 'nord', 'dracula', 'catppuccin'];
+		// Inline-SVG icons — mirror of php/icons.php (keep the two in sync).
+		function svg(inner) {
+			return '<svg class="bd-icon" viewBox="0 0 24 24" width="1em" height="1em" ' +
+				'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" ' +
+				'stroke-linejoin="round" aria-hidden="true">' + inner + '</svg>';
+		}
 		var ICONS = {
-			light:      'bi-brightness-high',
-			dark:       'bi-moon-stars',
-			nord:       'bi-snow',
-			dracula:    'bi-droplet',
-			catppuccin: 'bi-cup'
+			light:      svg('<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>'),
+			dark:       svg('<path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/>'),
+			nord:       svg('<path d="M12 2v20M2 12h20M5 5l14 14M19 5 5 19"/>'),
+			dracula:    svg('<path d="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z"/>'),
+			catppuccin: svg('<path d="M4 8h13v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z"/><path d="M17 9h2.5a2.5 2.5 0 0 1 0 5H17"/><path d="M7 2v2M11 2v2M15 2v2"/>')
 		};
+		var ICON_FALLBACK = svg('<circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor" stroke="none"/>');
 		var root   = document.documentElement;
 		var btn    = document.getElementById('theme-toggle');
 		var picker = document.getElementById('theme-picker');
 
 		function syncIcon(theme) {
 			if (!btn) return;
-			var icon = btn.querySelector('i');
-			if (!icon) return;
-			icon.className = 'bi ' + (ICONS[theme] || 'bi-circle-half');
+			btn.innerHTML = ICONS[theme] || ICON_FALLBACK;
 		}
 
 		function syncSwatches(theme) {
@@ -656,13 +661,13 @@
 		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/';
+		// Self-hosted under the theme directory (no third-party request).
+		var BASE = window.BLOWDIT_THEME_URL || '';
 
 		function makeThemeLink(name) {
 			var l = document.createElement('link');
 			l.rel = 'stylesheet';
-			l.href = BASE + 'styles/' + name + '.min.css';
-			l.crossOrigin = 'anonymous';
+			l.href = BASE + 'css/hljs/' + name + '.min.css';
 			document.head.appendChild(l);
 			return l;
 		}
@@ -680,8 +685,7 @@
 		});
 
 		var s = document.createElement('script');
-		s.src = BASE + 'highlight.min.js';
-		s.crossOrigin = 'anonymous';
+		s.src = BASE + 'js/highlight.min.js';
 		s.onload = function () {
 			if (!window.hljs) return;
 			Array.prototype.forEach.call(codes, function (code) {

php/head.php

@@ -16,6 +16,11 @@
 ?>
 <meta name="theme-color" content="<?php echo $blowditChrome; ?>">
 
+<?php if (!empty($blowditIsArticle) && $page->coverImage()): ?>
+<!-- Preload the article cover image (typically the LCP element) -->
+<link rel="preload" as="image" href="<?php echo htmlspecialchars($page->coverImage(true), ENT_QUOTES, 'UTF-8'); ?>" fetchpriority="high">
+<?php endif ?>
+
 <!-- Set the colour theme as early as possible to avoid a white flash.
      Sets data-theme AND paints the html background/color-scheme inline, so the
      very first frame (before style.css loads) already uses the theme colour. -->
@@ -157,6 +162,9 @@
 	}
 ?>
 
+<!-- RSS feed auto-discovery (RSS plugin serves /rss.xml) -->
+<link rel="alternate" type="application/rss+xml" title="<?php echo htmlspecialchars($site->title(), ENT_QUOTES, 'UTF-8'); ?>" href="<?php echo rtrim(Theme::siteUrl(), '/') . '/rss.xml'; ?>">
+
 <!-- Include Favicon -->
 <?php echo Theme::favicon('img/favicon.png'); ?>
 
@@ -170,8 +178,8 @@
 <!-- Include Bootstrap CSS file bootstrap.css -->
 <?php echo Theme::cssBootstrap(); ?>
 
-<!-- Include CSS Bootstrap ICONS file from Bludit Core -->
-<?php echo Theme::cssBootstrapIcons(); ?>
+<!-- Bootstrap Icons webfont removed: the few icons used are inline SVGs
+     (see php/icons.php + blowdit.js), saving ~120 KB font + ~80 KB CSS. -->
 
 <!-- Include CSS Styles from this theme (cache-busted by file mtime) -->
 <?php

php/home.php

@@ -54,9 +54,9 @@
           <h2 class="post-list-title"><?php echo htmlspecialchars($page->title(), ENT_QUOTES, 'UTF-8'); ?></h2>
         </a>
         <div class="post-list-meta">
-          <span><i class="bi bi-calendar3"></i><?php echo $page->date(); ?></span>
+          <span><?php echo blowdit_icon('calendar'); ?><?php echo $page->date(); ?></span>
           <?php if (!$page->isStatic()) : ?>
-          <span><i class="bi bi-clock-history"></i><?php echo $page->readingTime(); ?></span>
+          <span><?php echo blowdit_icon('clock'); ?><?php echo $page->readingTime(); ?></span>
           <?php endif ?>
         </div>
       </div>
@@ -67,11 +67,11 @@
         <div class="post-taxonomy">
           <?php if ($categoryKey) : ?>
             <a class="taxonomy-badge" href="<?php echo $page->categoryPermalink(); ?>">
-              <i class="bi bi-folder2"></i><?php echo htmlspecialchars($page->category(), ENT_QUOTES, 'UTF-8'); ?>
+              <?php echo blowdit_icon('folder'); ?><?php echo htmlspecialchars($page->category(), ENT_QUOTES, 'UTF-8'); ?>
             </a>
           <?php endif ?>
           <?php foreach ($tagsList as $tagKey => $tagName) : ?>
-            <a class="taxonomy-badge" href="<?php echo DOMAIN_TAGS . $tagKey; ?>"><i class="bi bi-tag"></i><?php echo htmlspecialchars($tagName, ENT_QUOTES, 'UTF-8'); ?></a>
+            <a class="taxonomy-badge" href="<?php echo DOMAIN_TAGS . $tagKey; ?>"><?php echo blowdit_icon('tag'); ?><?php echo htmlspecialchars($tagName, ENT_QUOTES, 'UTF-8'); ?></a>
           <?php endforeach ?>
         </div>
       <?php endif ?>
@@ -92,7 +92,7 @@
       <?php if (Paginator::showPrev()) : ?>
         <li class="page-item mr-2">
           <a class="page-link" href="<?php echo Paginator::previousPageUrl() ?>" tabindex="-1">
-            <i class="bi bi-chevron-left"></i> <?php echo $L->get('Previous'); ?>
+            <?php echo blowdit_icon('chevron-left'); ?> <?php echo $L->get('Previous'); ?>
           </a>
         </li>
       <?php endif; ?>
@@ -100,7 +100,7 @@
       <!-- Home button -->
       <li class="page-item mx-2 <?php if (Paginator::currentPage() == 1) echo 'disabled' ?>">
         <a class="page-link" href="<?php echo Theme::siteUrl() ?>">
-          <i class="bi bi-house-door"></i> Home
+          <?php echo blowdit_icon('house'); ?> Home
         </a>
       </li>
 
@@ -108,7 +108,7 @@
       <?php if (Paginator::showNext()) : ?>
         <li class="page-item ml-2">
           <a class="page-link" href="<?php echo Paginator::nextPageUrl() ?>">
-            <?php echo $L->get('Next'); ?> <i class="bi bi-chevron-right"></i>
+            <?php echo $L->get('Next'); ?> <?php echo blowdit_icon('chevron-right'); ?>
           </a>
         </li>
       <?php endif; ?>

php/icons.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Inline SVG icons — replaces the Bootstrap Icons webfont (~120 KB font +
+ * ~80 KB CSS) that was loaded just to render a handful of glyphs.
+ *
+ * Returns a 24×24, currentColor, stroke-based <svg> sized to 1em so existing
+ * font-size rules (.navbar .nav-link .bd-icon, .metadata .bd-icon, …) scale it.
+ *
+ * Theme-picker icons (sun/moon/snow/droplet/cup/half) are duplicated in
+ * blowdit.js so the toggle can swap them client-side; keep the two in sync.
+ */
+if (!function_exists('blowdit_icon')) {
+	function blowdit_icon($name) {
+		static $paths = array(
+			// --- UI ---
+			'calendar'      => '<rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/>',
+			'clock'         => '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
+			'folder'        => '<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+			'tag'           => '<path d="M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L3 13V3h10l7.59 7.59a2 2 0 0 1 0 2.82z"/><circle cx="7.5" cy="7.5" r="1.2"/>',
+			'chevron-left'  => '<path d="M15 18l-6-6 6-6"/>',
+			'chevron-right' => '<path d="M9 18l6-6-6-6"/>',
+			'house'         => '<path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V21h14V9.5"/>',
+			// --- Theme picker (mirror in blowdit.js) ---
+			'sun'           => '<circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/>',
+			'moon'          => '<path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/>',
+			'snow'          => '<path d="M12 2v20M2 12h20M5 5l14 14M19 5 5 19"/>',
+			'droplet'       => '<path d="M12 3s6 6.5 6 11a6 6 0 0 1-12 0c0-4.5 6-11 6-11z"/>',
+			'cup'           => '<path d="M4 8h13v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z"/><path d="M17 9h2.5a2.5 2.5 0 0 1 0 5H17"/><path d="M7 2v2M11 2v2M15 2v2"/>',
+			'half'          => '<circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 1 0 18z" fill="currentColor" stroke="none"/>',
+		);
+		if (!isset($paths[$name])) { return ''; }
+		return '<svg class="bd-icon" viewBox="0 0 24 24" width="1em" height="1em" '
+			. 'fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" '
+			. 'stroke-linejoin="round" aria-hidden="true">' . $paths[$name] . '</svg>';
+	}
+
+	// Map a theme key to its toggle icon name.
+	function blowdit_theme_icon($theme) {
+		$map = array(
+			'light'      => 'sun',
+			'dark'       => 'moon',
+			'nord'       => 'snow',
+			'dracula'    => 'droplet',
+			'catppuccin' => 'cup',
+		);
+		return isset($map[$theme]) ? $map[$theme] : 'half';
+	}
+}

php/navbar.php

@@ -36,7 +36,7 @@
 				<!-- Theme picker -->
 				<li class="nav-item ml-md-2 mt-2 mt-md-0 theme-picker-wrap">
 					<button type="button" id="theme-toggle" class="theme-toggle" aria-label="<?php echo $L->get('Toggle theme') ?>" title="<?php echo $L->get('Toggle theme') ?>" aria-haspopup="true" aria-expanded="false">
-						<i class="bi bi-moon-stars" aria-hidden="true"></i>
+						<?php echo blowdit_icon(blowdit_theme_icon($blowditTheme)); ?>
 					</button>
 					<div id="theme-picker" class="theme-picker" role="menu">
 						<button class="swatch" data-pick="light"      title="Light"      style="--sb:#ffffff;--sa:#1f1f1f"><span class="swatch-dot"></span><span class="swatch-label">Light</span></button>

php/page.php

@@ -18,8 +18,8 @@
 		<?php if (!$page->isStatic() && !$url->notFound()): ?>
 		<!-- Creation date, reading time and author -->
 		<div class="metadata mb-4">
-			<span><i class="bi bi-calendar3"></i><?php echo $page->date(); ?></span>
-			<span><i class="bi bi-clock-history"></i><?php echo $L->get('Reading time') . ': ' . $page->readingTime() ?></span>
+			<span><?php echo blowdit_icon('calendar'); ?><?php echo $page->date(); ?></span>
+			<span><?php echo blowdit_icon('clock'); ?><?php echo $L->get('Reading time') . ': ' . $page->readingTime() ?></span>
 		</div>
 		<?php endif ?>
 
@@ -43,11 +43,11 @@
 		<div class="post-taxonomy mt-4">
 			<?php if ($categoryKey) : ?>
 				<a class="taxonomy-badge" href="<?php echo $page->categoryPermalink(); ?>">
-					<i class="bi bi-folder2"></i><?php echo htmlspecialchars($page->category(), ENT_QUOTES, 'UTF-8'); ?>
+					<?php echo blowdit_icon('folder'); ?><?php echo htmlspecialchars($page->category(), ENT_QUOTES, 'UTF-8'); ?>
 				</a>
 			<?php endif ?>
 			<?php foreach ($tagsList as $tagKey => $tagName) : ?>
-				<a class="taxonomy-badge" href="<?php echo DOMAIN_TAGS . $tagKey; ?>"><i class="bi bi-tag"></i><?php echo htmlspecialchars($tagName, ENT_QUOTES, 'UTF-8'); ?></a>
+				<a class="taxonomy-badge" href="<?php echo DOMAIN_TAGS . $tagKey; ?>"><?php echo blowdit_icon('tag'); ?><?php echo htmlspecialchars($tagName, ENT_QUOTES, 'UTF-8'); ?></a>
 			<?php endforeach ?>
 		</div>
 		<?php endif ?>