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.
This commit is contained in:
interlope committed
1 parent
57bb59e768
commit
29a28ce6d7
12 files changed
+1350
-73
No files matched your search
+10
-2
@@ -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
|
||||
|
||||
+7
-7
@@ -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; ?>
|
||||
|
||||
@@ -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';
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -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>
|
||||
|
||||
+4
-4
@@ -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 ?>
|
||||
|
||||
Reference in new issue
Block a user