kbenestad/mdcms
1
0
Fork 0
mirror of https://github.com/kbenestad/mdcms.git synced 2026-06-18 15:24:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

v0.4 Phase 2: local SVG icon system, remove Google Material Icons

Browse source 
- Add 17 SVG icons to app/assets/icons/ (Material Icons paths, Apache 2.0)
- Remove Google Material Icons and Symbols CDN link tags
- Add normaliseIconName(), loadIcon(), getIcon(), iconEl() — icon name
  normalisation per spec §2.3, async fetch-and-cache, sync accessor,
  element builder with broken-image fallback for missing icons
- Preload all standard icons (+ categories-selecticon if set) concurrently
  in boot() before UI is built, so all icon references are sync after that
- Replace ICONS object with icon cache system throughout:
  theme toggle → light_mode/dark_mode, search → search, hamburgers → menu,
  section toggles → arrow_right/arrow_drop_down, dropdown carets →
  arrow_drop_down, category selecticon → normalised SVG lookup
- Update .toggle-icon, .category-icon, .nav-caret CSS for SVG layout
- Add .mdcms-icon CSS class (inline-flex, currentColor fill)
- Fix pre-existing ICONS.close bug (was undefined; hamburger now always
  shows menu icon)

https://claude.ai/code/session_015XtsgTMi8UtmgxEgb5Qt2c
This commit is contained in:
Claude 2026-05-16 16:37:51 +00:00
parent 373ec4035e
commit 0386422a99
No known key found for this signature in database
18 changed files with 78 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/icons/arrow_drop_down.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7 10l5 5 5-5z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 113 B

1
app/assets/icons/arrow_right.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 17l5-5-5-5v10z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 117 B

1
app/assets/icons/dangerous.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.73 3H8.27L3 8.27v7.46L8.27 21h7.46L21 15.73V8.27L15.73 3zM12 17.3c-.72 0-1.3-.58-1.3-1.3s.58-1.3 1.3-1.3 1.3.58 1.3 1.3-.58 1.3-1.3 1.3zm1-4.3h-2V7h2v6z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 255 B

1
app/assets/icons/dark_mode.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 266 B

1
app/assets/icons/error.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 274 B

1
app/assets/icons/exclamation.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 195 B

1
app/assets/icons/history.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 323 B

1
app/assets/icons/info.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 195 B

1
app/assets/icons/language.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 888 B

1
app/assets/icons/light_mode.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-12.37-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06c.39-.39.39-1.03 0-1.41s-1.03-.39-1.41 0zM7.05 18.36l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06c.39-.39.39-1.03 0-1.41s-1.03-.39-1.41 0z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 878 B

1
app/assets/icons/menu.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 144 B

1
app/assets/icons/mobile_arrow_down.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 154 B

1
app/assets/icons/report.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14.4 6 14 4H5v17h2v-7h5.6l.4 2h7V6z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 135 B

1
app/assets/icons/search.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 333 B

1
app/assets/icons/success.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 215 B

1
app/assets/icons/text_compare.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6.3 7.8 2.5 12l3.8 4.2.8-.8L4.4 12l2.7-3.2-.8-.8zm11.4 0-.8.8L19.6 12l-2.7 3.2.8.8 3.8-4.2-3.8-4.2zm-3.7-4.6L9.9 20.8l1.4.4 4.1-17.6-1.4-.4z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 240 B

1
app/assets/icons/warning.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 149 B

93
app/index.html
View file

@ -32,8 +32,6 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css" id="hljs-light">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css" id="hljs-dark" disabled>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">
<style>
/* ═══════════════════════════════════════════
@ -282,13 +280,15 @@ body {
}
.nav-section-heading.toggleable:hover { color: var(--font-colour); }
.nav-section-heading .toggle-icon {
font-family: var(--font-code);
font-weight: 700;
font-size: 0.9rem;
width: 0.9em;
display: inline-block;
line-height: 1;
display: inline-flex;
align-items: center;
width: 1em;
height: 1em;
flex-shrink: 0;
opacity: 0.6;
}
.mdcms-icon { display: inline-flex; align-items: center; line-height: 1; }
.mdcms-icon svg { width: 1em; height: 1em; fill: currentColor; display: block; }
.nav-item.depth-1 { padding-left: 2.5rem; }
.nav-item.depth-2 { padding-left: 3.5rem; }
.nav-item.depth-3 { padding-left: 4.5rem; }
@ -544,9 +544,9 @@ body {
.category-bar[dir="rtl"] { justify-content: flex-start; }
.category-icon {
font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
display: inline-flex;
align-items: center;
font-size: 1.1rem;
line-height: 1;
color: var(--font-colour-muted);
}
@ -904,13 +904,34 @@ body {
let loadedFonts = new Set(); // track which font files have been loaded
// ─── Icons ────────────────────────────────────────────────
const ICONS = {
sun: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>',
moon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>',
search: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>',
menu: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>',
close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>'
};
const STANDARD_ICONS = ['dark_mode','light_mode','menu','search','arrow_right','arrow_drop_down','mobile_arrow_down','language','info','warning','error','success','exclamation','dangerous','report','history','text_compare'];
const iconCache = {};
function normaliseIconName(name) {
return String(name).trim().replace(/\.svg$/i, '').toLowerCase().replace(/[\s-]+/g, '_') + '.svg';
}
async function loadIcon(name) {
const filename = normaliseIconName(name);
if (filename in iconCache) return iconCache[filename];
try {
const resp = await fetch('assets/icons/' + filename);
iconCache[filename] = resp.ok ? await resp.text() : null;
} catch (e) { iconCache[filename] = null; }
return iconCache[filename];
}
function getIcon(name) {
return iconCache[normaliseIconName(name)] || null;
}
function iconEl(name, className) {
const svg = getIcon(name);
const span = document.createElement('span');
span.className = 'mdcms-icon' + (className ? ' ' + className : '');
span.innerHTML = svg || '<img src="" alt="" style="width:1em;height:1em;">';
return span;
}
// ─── Helpers ──────────────────────────────────────────────
function el(tag, attrs, children) {
@ -1137,8 +1158,9 @@ body {
const btn = document.querySelector('.theme-toggle');
if (btn) {
const isDark = theme === 'dark';
btn.innerHTML = (isDark ? ICONS.sun : ICONS.moon) +
'<span>' + (isDark ? 'Light mode' : 'Dark mode') + '</span>';
btn.innerHTML = '';
btn.appendChild(iconEl(isDark ? 'light_mode' : 'dark_mode'));
btn.appendChild(el('span', { textContent: isDark ? 'Light mode' : 'Dark mode' }));
}
}
@ -1766,7 +1788,8 @@ function fmtDatetime(dtStr) {
const mobileHeader = el('div', { className: 'mobile-header' });
mobileHeader.style.display = 'none';
const hamburger = el('button', { className: 'hamburger', 'aria-label': 'Open menu', innerHTML: ICONS.menu });
const hamburger = el('button', { className: 'hamburger', 'aria-label': 'Open menu' });
hamburger.appendChild(iconEl('menu'));
const mobileName = el('span', { className: 'sidebar-sitename', textContent: config.sitename || 'MD-CMS' });
mobileHeader.appendChild(hamburger);
if (config.logo) {
@ -1831,12 +1854,12 @@ function fmtDatetime(dtStr) {
hamburger.addEventListener('click', () => {
sidebar.classList.toggle('open');
overlay.classList.toggle('active');
hamburger.innerHTML = sidebar.classList.contains('open') ? ICONS.close : ICONS.menu;
hamburger.innerHTML = ''; hamburger.appendChild(iconEl('menu'));
});
function closeMobileMenu() {
sidebar.classList.remove('open');
overlay.classList.remove('active');
hamburger.innerHTML = ICONS.menu;
hamburger.innerHTML = ''; hamburger.appendChild(iconEl('menu'));
}
window._closeMobileMenu = closeMobileMenu;
}
@ -1857,7 +1880,8 @@ function fmtDatetime(dtStr) {
brand.appendChild(el('span', { className: 'topbar-sitename', textContent: config.sitename || 'MD-CMS' }));
topbar.appendChild(brand);
const hamburger = el('button', { className: 'hamburger', 'aria-label': 'Open menu', innerHTML: ICONS.menu });
const hamburger = el('button', { className: 'hamburger', 'aria-label': 'Open menu' });
hamburger.appendChild(iconEl('menu'));
const navLinksEl = el('div', { className: 'topbar-nav', id: 'navLinks' });
topbar.appendChild(navLinksEl);
@ -1898,12 +1922,12 @@ function fmtDatetime(dtStr) {
hamburger.addEventListener('click', () => {
const panel = document.getElementById('mobileNavPanel');
panel.classList.toggle('open');
hamburger.innerHTML = panel.classList.contains('open') ? ICONS.close : ICONS.menu;
hamburger.innerHTML = ''; hamburger.appendChild(iconEl('menu'));
});
window._closeMobileMenu = function() {
const panel = document.getElementById('mobileNavPanel');
if (panel) panel.classList.remove('open');
hamburger.innerHTML = ICONS.menu;
hamburger.innerHTML = ''; hamburger.appendChild(iconEl('menu'));
};
document.addEventListener('click', () => {
@ -1914,7 +1938,7 @@ function fmtDatetime(dtStr) {
function buildSearchWidget() {
const container = el('div', { className: 'search-container' });
const wrapper = el('div', { className: 'search-wrapper' });
const icon = el('span', { className: 'search-icon', innerHTML: ICONS.search });
const icon = iconEl('search', 'search-icon');
const input = el('input', { className: 'search-box', type: 'text', placeholder: 'Search...' });
const results = el('div', { className: 'search-results' });
wrapper.appendChild(icon);
@ -1945,7 +1969,7 @@ function fmtDatetime(dtStr) {
const bar = el('div', { className: 'category-bar' });
if (config['categories-selecticon']) {
bar.appendChild(el('span', { className: 'category-icon material-icons', textContent: config['categories-selecticon'] }));
bar.appendChild(iconEl(config['categories-selecticon'], 'category-icon'));
}
if (config['categories-selecttext']) {
bar.appendChild(el('span', { className: 'category-label', textContent: config['categories-selecttext'] }));
@ -1955,7 +1979,7 @@ function fmtDatetime(dtStr) {
const trigger = el('button', { className: 'category-trigger', type: 'button' });
const triggerLabel = el('span', { id: 'categoryTriggerLabel' });
trigger.appendChild(triggerLabel);
trigger.appendChild(el('span', { className: 'caret', textContent: '▾' }));
trigger.appendChild(iconEl('arrow_drop_down', 'caret'));
dropdown.appendChild(trigger);
const panel = el('div', { className: 'category-panel' });
@ -2172,8 +2196,9 @@ function fmtDatetime(dtStr) {
if (isHidden) {
const expanded = sectionExpanded(section.code);
heading.innerHTML = `<span class="toggle-icon">${expanded ? '−' : '+'}</span><span></span>`;
heading.querySelector('span:last-child').textContent = name;
heading.innerHTML = '';
heading.appendChild(iconEl(expanded ? 'arrow_drop_down' : 'arrow_right', 'toggle-icon'));
heading.appendChild(el('span', { textContent: name }));
heading.addEventListener('click', () => {
toggleSection(section.code);
renderNav();
@ -2270,7 +2295,7 @@ function fmtDatetime(dtStr) {
const title = pageDisplayTitle(primary);
const trigger = el('a', { className: 'nav-trigger', href: '#' + primary.file, 'data-file': primary.file });
trigger.appendChild(el('span', { textContent: title }));
if (hasChildren) trigger.appendChild(el('span', { className: 'nav-caret', textContent: '▾' }));
if (hasChildren) trigger.appendChild(iconEl('arrow_drop_down', 'nav-caret'));
group.appendChild(trigger);
if (hasChildren) {
@ -2319,7 +2344,7 @@ function fmtDatetime(dtStr) {
} else {
const trigger = el('button', { className: 'nav-trigger', type: 'button' });
trigger.appendChild(el('span', { textContent: name }));
trigger.appendChild(el('span', { className: 'nav-caret', textContent: '▾' }));
trigger.appendChild(iconEl('arrow_drop_down', 'nav-caret'));
trigger.addEventListener('click', e => { e.stopPropagation(); group.classList.toggle('open'); });
group.appendChild(trigger);
@ -2494,6 +2519,10 @@ function fmtDatetime(dtStr) {
loadFonts(themeConfig);
initCategories();
const iconsToPreload = [...STANDARD_ICONS];
if (config['categories-selecticon']) iconsToPreload.push(config['categories-selecticon']);
await Promise.all(iconsToPreload.map(name => loadIcon(name)));
const navMode = config.navigation || 'sidebar';
if (navMode === 'topbar') buildTopbar();
else buildSidebar();