admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 35 Wiki Activity

Mkdocs search fixers

Browse Source
This commit is contained in:
bunker-admin
2026-03-09 16:05:25 -06:00
parent e2a1ac0113
commit 533783bcae
125 changed files with 18507 additions and 11039 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
mkdocs/site/test/index.html
View File

@@ -220,6 +220,12 @@
<a href="#" data-path="/pages" class="cm-header-nav__link" data-nav-id="pages"><span class="material-icons-outlined">description</span><span class="cm-header-nav__label">Pages</span></a>
<a href="/" class="cm-header-nav__link" data-nav-id="landing"><span class="material-icons-outlined">language</span><span class="cm-header-nav__label">Website</span></a>
<a href="/docs/" class="cm-header-nav__link" data-nav-id="docs"><span class="material-icons-outlined">menu_book</span><span class="cm-header-nav__label">Docs</span></a>
<label for="__search" class="cm-header-nav__utility" title="Search">
<span class="material-icons-outlined">search</span>
</label>
<button class="cm-header-nav__utility" id="cm-palette-toggle" title="Toggle dark mode" type="button">
<span class="material-icons-outlined">dark_mode</span>
</button>
<a href="#" data-path="/login" class="cm-header-nav__link" id="cm-signin-link">
<span class="material-icons-outlined">login</span>
<span class="cm-header-nav__label">Sign In</span>
@@ -283,6 +289,20 @@
<a href="#" data-path="/pages" class="cm-header-nav__mobile-link" data-nav-id="pages"><span class="material-icons-outlined">description</span><span>Pages</span></a>
<a href="/" class="cm-header-nav__mobile-link" data-nav-id="landing"><span class="material-icons-outlined">language</span><span>Website</span></a>
<a href="/docs/" class="cm-header-nav__mobile-link" data-nav-id="docs"><span class="material-icons-outlined">menu_book</span><span>Docs</span></a>
<div class="cm-header-nav__mobile-divider"></div>
<label for="__search" class="cm-header-nav__mobile-link" style="cursor:pointer">
<span class="material-icons-outlined">search</span>
<span>Search</span>
</label>
<button class="cm-header-nav__mobile-link cm-header-nav__utility-btn" id="cm-mobile-palette-toggle" type="button">
<span class="material-icons-outlined">dark_mode</span>
<span>Dark Mode</span>
</button>
<button class="cm-header-nav__mobile-link cm-header-nav__utility-btn" id="cm-docs-sidebar-toggle" type="button">
<span class="material-icons-outlined">menu_book</span>
<span>Docs Navigation</span>
</button>
<div class="cm-header-nav__mobile-divider"></div>
<a href="#" data-path="/login" class="cm-header-nav__mobile-link" id="cm-mobile-signin-link">
<span class="material-icons-outlined">login</span>
<span>Sign In</span>
@@ -386,6 +406,96 @@
}
});
document.body.appendChild(iframe);
// Palette toggle (dark/light mode)
function togglePalette() {
var inputs = document.querySelectorAll('.cm-palette-container input[name="__palette"]');
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].checked) { inputs[i].click(); break; }
}
setTimeout(updatePaletteIcon, 50);
}
function updatePaletteIcon() {
var scheme = document.body.getAttribute('data-md-color-scheme') || 'default';
var isDark = scheme === 'slate';
var icon = isDark ? 'light_mode' : 'dark_mode';
document.querySelectorAll('#cm-palette-toggle .material-icons-outlined, #cm-mobile-palette-toggle .material-icons-outlined').forEach(function(el) {
el.textContent = icon;
});
var ml = document.querySelector('#cm-mobile-palette-toggle span:not(.material-icons-outlined)');
if (ml) ml.textContent = isDark ? 'Light Mode' : 'Dark Mode';
}
var ptBtn = document.getElementById('cm-palette-toggle');
var ptBtnM = document.getElementById('cm-mobile-palette-toggle');
if (ptBtn) ptBtn.addEventListener('click', togglePalette);
if (ptBtnM) ptBtnM.addEventListener('click', function() { togglePalette(); closeDrawer(); });
// Docs sidebar toggle (opens Material's docs navigation drawer)
var docsSidebarBtn = document.getElementById('cm-docs-sidebar-toggle');
if (docsSidebarBtn) {
docsSidebarBtn.addEventListener('click', function() {
closeDrawer();
var dt = document.getElementById('__drawer');
if (dt) { dt.checked = !dt.checked; dt.dispatchEvent(new Event('change')); }
});
}
// Close custom drawer when search label is clicked on mobile + auto-focus input
document.querySelectorAll('label[for="__search"]').forEach(function(el) {
el.addEventListener('click', function() {
closeDrawer();
setTimeout(function() {
var input = document.querySelector('.md-search__input');
if (input) input.focus();
}, 150);
});
});
// Search activation: mirror checkbox state as a body class for CSS targeting.
// On desktop, Material's search input is always visible (overflow from collapsed
// header). Typing directly into it triggers the search worker but never checks
// the __search checkbox, so the results panel stays hidden. We fix this by
// checking the checkbox on input focus/input events.
var searchToggle = document.getElementById('__search');
if (searchToggle) {
function syncSearchClass() {
document.body.classList.toggle('cm-search-active', searchToggle.checked);
}
searchToggle.addEventListener('change', syncSearchClass);
syncSearchClass();
// Activate search when the Material input is focused or typed into directly.
// Uses event delegation because the search input is rendered after this
// script (announce block runs before header block).
document.addEventListener('focusin', function(e) {
if (e.target && e.target.classList && e.target.classList.contains('md-search__input')) {
if (!searchToggle.checked) {
searchToggle.checked = true;
searchToggle.dispatchEvent(new Event('change'));
}
}
});
document.addEventListener('input', function(e) {
if (e.target && e.target.classList && e.target.classList.contains('md-search__input')) {
if (!searchToggle.checked) {
searchToggle.checked = true;
searchToggle.dispatchEvent(new Event('change'));
}
}
});
// Click-outside to dismiss search
document.addEventListener('click', function(e) {
if (!searchToggle.checked) return;
var panel = document.querySelector('.md-search__inner');
if (panel && panel.contains(e.target)) return;
if (e.target.closest && e.target.closest('label[for="__search"]')) return;
searchToggle.checked = false;
syncSearchClass();
});
// Also sync on Escape key (Material toggles checkbox via JS)
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') setTimeout(syncSearchClass, 50);
});
}
// Init palette icon + observe changes
setTimeout(updatePaletteIcon, 100);
new MutationObserver(function() { updatePaletteIcon(); })
.observe(document.body, { attributes: true, attributeFilter: ['data-md-color-scheme'] });
})();
</script>
<style>
@@ -628,6 +738,108 @@
.cm-header-nav__hamburger { display: block; }
.cm-header-nav__dropdown-menu { display: none !important; }
}
/* Hidden Material header — stays at 0 height normally */
.md-header--cm-hidden {
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
overflow: visible !important;
background: transparent !important;
box-shadow: none !important;
}
/* === DESKTOP SEARCH (>= 60em / 960px) === */
@media screen and (min-width: 60em) {
/* When search is active, make the search panel a fixed dropdown below custom header */
body.cm-search-active .md-header--cm-hidden .md-search__inner {
position: fixed !important;
top: 56px !important;
right: 16px !important;
left: auto !important;
width: min(34rem, calc(100vw - 32px)) !important;
background: var(--md-default-bg-color) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important;
z-index: 300 !important;
}
/* Dark overlay behind search panel */
body.cm-search-active .md-header--cm-hidden .md-search__overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0,0,0,0.54) !important;
opacity: 1 !important;
z-index: 299 !important;
border-radius: 0 !important;
transform: none !important;
}
}
/* === MOBILE SEARCH (< 60em / 960px) === */
@media screen and (max-width: 59.984375em) {
/* Full-screen search takeover on mobile */
body.cm-search-active .md-header--cm-hidden .md-search__inner {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
opacity: 1 !important;
overflow: visible !important;
transform: none !important;
z-index: 300 !important;
background: var(--md-default-bg-color) !important;
}
}
/* Force search results to show when active (both breakpoints) */
body.cm-search-active .md-header--cm-hidden .md-search__output {
opacity: 1 !important;
}
body.cm-search-active .md-header--cm-hidden .md-search__scrollwrap {
max-height: 75vh !important;
}
.cm-palette-container {
height: 0 !important;
overflow: hidden !important;
}
/* Hide Material tabs — custom header covers navigation */
.md-tabs { display: none !important; }
/* Utility icon styling */
.cm-header-nav__utility {
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
padding: 4px;
display: inline-flex;
align-items: center;
transition: color 0.2s;
}
.cm-header-nav__utility:hover { color: #fff; }
.cm-header-nav__utility .material-icons-outlined { font-size: 20px; }
.cm-header-nav__utility-btn {
background: none;
border: none;
color: rgba(255,255,255,0.85);
cursor: pointer;
font-size: 15px;
font-family: inherit;
width: 100%;
text-align: left;
}
.cm-header-nav__mobile-divider {
height: 1px;
background: rgba(255,255,255,0.1);
margin: 8px 24px;
}
</style>
</div>
@@ -639,37 +851,8 @@
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href=".." title="Changemaker Lite" class="md-header__button md-logo" aria-label="Changemaker Lite" data-md-component="logo">
<img src="../assets/logo.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Changemaker Lite
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Test
</span>
</div>
</div>
</div>
<header class="md-header md-header--cm-hidden" data-md-component="header">
<div class="cm-palette-container">
<form class="md-header__option" data-md-component="palette">
@@ -697,18 +880,9 @@
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
</div>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
@@ -747,106 +921,12 @@
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://gitea.bnkops.com/admin/changemaker.lite" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
changemaker.lite
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href=".." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item">
<a href="../docs/" class="md-tabs__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.5c-1.35-.85-3.8-1.5-5.5-1.5-1.65 0-3.35.3-4.75 1.05-.1.05-.15.05-.25.05-.25 0-.5-.25-.5-.5V6c.6-.45 1.25-.75 2-1 1.11-.35 2.33-.5 3.5-.5 1.95 0 4.05.4 5.5 1.5 1.45-1.1 3.55-1.5 5.5-1.5 1.17 0 2.39.15 3.5.5.75.25 1.4.55 2 1v14.6c0 .25-.25.5-.5.5-.1 0-.15 0-.25-.05-1.4-.75-3.1-1.05-4.75-1.05-1.7 0-4.15.65-5.5 1.5M12 8v11.5c1.35-.85 3.8-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5V7c-1.1-.35-2.3-.5-3.5-.5-1.7 0-4.15.65-5.5 1.5m1 3.5c1.11-.68 2.6-1 4.5-1 .91 0 1.76.09 2.5.28V9.23c-.87-.15-1.71-.23-2.5-.23q-2.655 0-4.5.84zm4.5.17c-1.71 0-3.21.26-4.5.79v1.69c1.11-.65 2.6-.99 4.5-.99 1.04 0 1.88.08 2.5.24v-1.5c-.87-.16-1.71-.23-2.5-.23m2.5 2.9c-.87-.16-1.71-.24-2.5-.24-1.83 0-3.33.27-4.5.8v1.69c1.11-.66 2.6-.99 4.5-.99 1.04 0 1.88.08 2.5.24z"/></svg>
Docs
</a>
</li>
<li class="md-tabs__item">
<a href="../blog/" class="md-tabs__link">
Blog
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
@@ -1111,6 +1191,7 @@
<h1 id="test">Test<a class="headerlink" href="#test" title="Permanent link">&para;</a></h1>
<p>Testing page. </p>
<p><a href="test-page/">test-page</a>]]</p>
<div class="photo-block" data-photo-id="1" data-size="large" data-caption="" data-link-to-gallery="true" data-alignment="center">Loading...</div>
<div style="text-align: center; padding: 40px 20px; background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 12px; margin: 16px 0;">