61 lines
2.4 KiB
HTML
61 lines
2.4 KiB
HTML
{{ define "head" }}
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" id="theme-color">
|
|
|
|
<!-- Favicons -->
|
|
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<link rel="shortcut icon" href="/favicon.ico" />
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
|
|
<!-- Resource hints for external domains -->
|
|
<link rel="preconnect" href="https://imgs.blue" crossorigin>
|
|
<link rel="dns-prefetch" href="https://imgs.blue">
|
|
|
|
<!-- Preload critical assets -->
|
|
<link rel="preload" href="/icons.svg" as="image" type="image/svg+xml">
|
|
|
|
<!-- Theme: apply early to prevent flash -->
|
|
<script>
|
|
(function() {
|
|
function getEffectiveTheme(pref) {
|
|
if (pref === 'dark') return 'dark';
|
|
if (pref === 'light') return 'light';
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
function updateThemeColor() {
|
|
var meta = document.getElementById('theme-color');
|
|
if (meta) {
|
|
var bg = getComputedStyle(document.documentElement).getPropertyValue('--color-base-100').trim();
|
|
if (bg) meta.setAttribute('content', bg);
|
|
}
|
|
}
|
|
|
|
var pref = localStorage.getItem('theme') || 'system';
|
|
var effective = getEffectiveTheme(pref);
|
|
document.documentElement.classList.toggle('dark', effective === 'dark');
|
|
document.documentElement.setAttribute('data-theme', effective);
|
|
|
|
// Update theme-color after styles are applied
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', updateThemeColor);
|
|
} else {
|
|
updateThemeColor();
|
|
}
|
|
|
|
// Also update when system preference changes
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateThemeColor);
|
|
})();
|
|
</script>
|
|
|
|
<!-- Tailwind CSS (built via npm run css:build) -->
|
|
<link rel="stylesheet" href="/css/style.css?v={{ assetHash "css/style.css" }}">
|
|
{{ extraCSS }}
|
|
|
|
<!-- Bundled JS: HTMX + Actor Typeahead + App -->
|
|
<script type="module" src="/js/bundle.min.js?v={{ assetHash "js/bundle.min.js" }}"></script>
|
|
{{ end }}
|