typstify-generator 0.1.8

//! Static asset generation for CSS and JavaScript.
//!
//! Generates external CSS and JS files that can be cached by browsers,
//! improving page load performance significantly.

use std::{fs, path::Path};

use thiserror::Error;

/// Static asset generation errors.
#[derive(Debug, Error)]
pub enum StaticAssetError {
    /// IO error.
    #[error("IO error: {0}")]
    Io(#[from] std::io::Error),
}

/// Result type for static asset operations.
pub type Result<T> = std::result::Result<T, StaticAssetError>;

/// Generate static CSS and JS files in the output directory.
///
/// These files are referenced by the HTML templates and cached by browsers.
pub fn generate_static_assets(output_dir: &Path) -> Result<()> {
    // Create assets directory
    let assets_dir = output_dir.join("assets");
    fs::create_dir_all(&assets_dir)?;

    // Write CSS file
    fs::write(assets_dir.join("style.css"), DEFAULT_CSS)?;

    // Write JS file
    fs::write(assets_dir.join("main.js"), DEFAULT_JS)?;

    Ok(())
}

pub const DEFAULT_CSS: &str = r#"
:root {
    --color-primary: #d4760a;
    --color-primary-deep: #a85c08;
    --color-accent: #1e5a8a;
    --color-bg: #ffffff;
    --color-surface: #f6f5f2;
    --color-ink: #1a1a1e;
    --color-muted: #6b6b73;
    --color-border: #e2e1dd;
    --color-primary-bg: #fdf3ea;
    --color-header-bg: #ffffff;
    --color-success: #2d8a4e;
    --color-error: #c4382a;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Inter", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color-scheme: light;
}

[data-theme="dark"] {
    --color-bg: #131316;
    --color-surface: #1e1e23;
    --color-ink: #e8e7e3;
    --color-muted: #b0b0b8;
    --color-border: #2c2c32;
    --color-primary-bg: #2a1f14;
    --color-header-bg: #131316;
    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-ink);
    background-color: var(--color-bg);
    min-height: 100vh;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-deep);
}

.container {
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

@media (min-width: 48rem) {
    .container {
        max-width: 48rem;
        padding: 0 2rem;
    }
}

header {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: var(--color-header-bg);
    border-bottom: 1px solid var(--color-border);
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.site-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-ink);
    white-space: nowrap;
}

.site-title:hover {
    color: var(--color-primary);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex-wrap: wrap;
}

.nav-links > a {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-muted);
    border-radius: 0.375rem;
}

.nav-links > a:hover {
    color: var(--color-ink);
    background-color: var(--color-surface);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
}

.lang-switcher {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.lang-switcher > .lang-code {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background-color: var(--color-bg);
    min-width: 2.125rem;
    height: 2rem;
}

.lang-switcher:hover > .lang-code,
.lang-switcher.open > .lang-code {
    color: var(--color-ink);
    border-color: var(--color-primary);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 7.5rem;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0.25rem;
    display: none;
    z-index: 50;
}

.lang-switcher.open .lang-dropdown {
    display: block;
}

.lang-option {
    display: block;
    padding: 0.4375rem 0.625rem;
    font-size: 0.875rem;
    color: var(--color-ink);
    border-radius: 0.375rem;
}

.lang-option:hover {
    background-color: var(--color-surface);
}

.lang-option.active {
    color: var(--color-primary);
    font-weight: 600;
    background-color: var(--color-primary-bg);
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--color-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    cursor: pointer;
}

.theme-toggle:hover {
    color: var(--color-ink);
    border-color: var(--color-primary);
}

.theme-toggle svg {
    width: 1rem;
    height: 1rem;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

main {
    padding: 2rem 0 3rem;
    min-height: calc(100vh - 12rem);
}

article h1 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

article.page h1,
section > h1 {
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.3;
}

article.post header {
    position: static;
    background: none;
    border: none;
    backdrop-filter: none;
    padding: 0;
    margin-bottom: 2rem;
}

article.post header h1 {
    margin-bottom: 0.5rem;
}

article.post header time {
    display: block;
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-bottom: 0.75rem;
}

article .content,
section .content {
    font-size: 1rem;
    line-height: 1.75;
}

article .content > *:last-child,
section .content > *:last-child {
    margin-bottom: 0;
}

footer {
    border-top: 1px solid var(--color-border);
    padding: 2rem 0;
    color: var(--color-muted);
    font-size: 0.875rem;
    text-align: center;
}

footer a {
    color: var(--color-muted);
}

footer a:hover {
    color: var(--color-primary);
}

.post-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-item {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-border);
}

.post-item:last-child {
    border-bottom: none;
}

.post-item-header {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.post-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-ink);
}

.post-title:hover {
    color: var(--color-primary);
}

.post-item time {
    font-size: 0.8125rem;
    color: var(--color-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.post-description {
    color: var(--color-muted);
    font-size: 0.9375rem;
    margin: 0;
    line-height: 1.6;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.tags a {
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    background-color: var(--color-surface);
    color: var(--color-muted);
    border-radius: 9999px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.tags a:hover {
    color: var(--color-primary);
    background-color: var(--color-primary-bg);
}

.taxonomy-index h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background-color: var(--color-surface);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-ink);
}

.tag-item:hover {
    color: var(--color-primary);
}

.tag-name { font-weight: 500; }

.tag-count {
    font-size: 0.75rem;
    color: var(--color-muted);
    background-color: var(--color-bg);
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
}

.categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categories-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9375rem;
}

.categories-list li:last-child { border-bottom: none; }

.categories-list .count {
    color: var(--color-muted);
    font-size: 0.875rem;
}

.archives h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.archive-year h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

.archive-year:first-child h2 { margin-top: 0; }

.archive-year ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.archive-year li {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    gap: 0.75rem;
    font-size: 0.9375rem;
}

.archive-date {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--color-muted);
    min-width: 3.5rem;
    flex-shrink: 0;
}

.archive-year li a {
    color: var(--color-ink);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archive-year li a:hover { color: var(--color-primary); }

.section-description {
    color: var(--color-muted);
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.shorts-section .short-list {
    display: flex;
    flex-direction: column;
}

.short-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.short-item:last-child { border-bottom: none; }

.short-date {
    font-size: 0.8125rem;
    color: var(--color-muted);
    font-family: var(--font-mono);
    display: block;
    margin-bottom: 0.75rem;
}

.short-content {
    font-size: 0.9375rem;
    line-height: 1.7;
}

.short-content > *:last-child { margin-bottom: 0; }

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-muted);
}

.pagination a {
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    font-weight: 500;
    color: var(--color-ink);
}

.pagination a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.search-wrapper {
    position: relative;
    width: 12rem;
}

.search-input {
    width: 100%;
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background-color: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-sans);
}

.search-input::placeholder { color: var(--color-muted); }

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-bg);
}

.search-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.25rem;
    color: var(--color-muted);
    cursor: pointer;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-btn:hover { color: var(--color-ink); }

.search-btn svg {
    width: 1rem;
    height: 1rem;
    pointer-events: none;
}

.search-results {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 24rem;
    overflow-y: auto;
    z-index: 50;
    display: none;
}

.search-results.visible { display: block; }

.search-result-item {
    display: block;
    padding: 0.75rem 0.875rem;
    font-size: 0.875rem;
    color: var(--color-ink);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}

.search-result-item:last-child { border-bottom: none; }

.search-result-item:hover,
.search-result-item[data-active="true"] {
    background-color: var(--color-surface);
}

.search-result-item-title {
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1.4;
}

.search-result-item-summary {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.search-result-tag {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    background-color: var(--color-surface);
    color: var(--color-muted);
    border-radius: 9999px;
}

.search-loading,
.search-empty,
.search-error {
    padding: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-muted);
}

.search-error { color: var(--color-error); }

.prose { max-width: none; }

.prose h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.3; }
.prose h2 { font-size: 1.5rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; line-height: 1.35; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; line-height: 1.4; }
.prose p { margin-bottom: 1rem; line-height: 1.75; }

.prose code {
    background-color: var(--color-surface);
    padding: 0.125rem 0.375rem;
    font-family: var(--font-mono);
    font-size: 0.875em;
    border-radius: 0.25rem;
}

.prose pre {
    background-color: #1a1a1e;
    color: #e8e7e3;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

.prose pre code { background-color: transparent; padding: 0; font-size: inherit; }

.prose a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover { text-decoration: none; }

.prose ul { list-style-type: disc; list-style-position: inside; margin-bottom: 1rem; padding-left: 0.5rem; }
.prose ol { list-style-type: decimal; list-style-position: inside; margin-bottom: 1rem; padding-left: 0.5rem; }
.prose li { margin-bottom: 0.25rem; }

.prose blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--color-muted);
    font-style: italic;
}

.prose img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem 0; }

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.prose th, .prose td {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.prose th { background-color: var(--color-surface); font-weight: 600; }
.prose hr { border: none; border-top: 1px solid var(--color-border); margin: 2rem 0; }

.tweet-timeline { max-width: 42rem; margin-left: auto; margin-right: auto; }
.tweet-list { border-top: 1px solid var(--color-border); }

.tweet-card {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tweet-card:hover { background-color: var(--color-surface); }
.tweet-single { cursor: default; padding: 1.5rem; }
.tweet-single:hover { background-color: transparent; }
.tweet-avatar { flex-shrink: 0; }

.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--color-primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
}

.tweet-main { flex: 1; min-width: 0; }
.tweet-header { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; margin-bottom: 0.25rem; }
.tweet-author { font-weight: 600; color: var(--color-ink); }
.tweet-author:hover { text-decoration: underline; }
.tweet-time { font-size: 0.875rem; color: var(--color-muted); }
.tweet-content { color: var(--color-ink); line-height: 1.5; font-size: 0.9375rem; }
.tweet-content p { margin-bottom: 0.5rem; }
.tweet-content p:last-child { margin-bottom: 0; }
.date-separator { margin: 1.5rem 0; border-top: 1px solid var(--color-border); }

.archive-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
    color: white;
}

.badge-post { background-color: var(--color-success); }
.badge-short { background-color: var(--color-accent); }

@media (max-width: 48rem) {
    .search-wrapper { width: 100%; }
    .nav-links { width: 100%; justify-content: center; }
    nav { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .nav-actions { width: 100%; justify-content: center; margin-left: 0; margin-top: 0.5rem; }
    .nav-links > a { padding: 0.35rem 0.5rem; font-size: 0.8125rem; }
    main { padding-top: 1.5rem; padding-bottom: 2rem; }
    .post-item-header { flex-direction: column; gap: 0.25rem; }
    .archive-year li { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
"#;

pub const DEFAULT_JS: &str = r#"
(function() {
    'use strict';

    function initThemeToggle() {
        var toggle = document.querySelector('.theme-toggle');
        if (!toggle) return;
        var html = document.documentElement;

        toggle.addEventListener('click', function() {
            var current = html.getAttribute('data-theme');
            if (current !== 'dark' && current !== 'light') {
                current = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
            }
            var next = current === 'dark' ? 'light' : 'dark';
            html.setAttribute('data-theme', next);
            try { localStorage.setItem('theme', next); } catch (e) {}
        });

        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
            try {
                if (!localStorage.getItem('theme')) {
                    html.setAttribute('data-theme', e.matches ? 'dark' : 'light');
                }
            } catch (e) {}
        });
    }

    function initLangSwitcher() {
        var switcher = document.querySelector('.lang-switcher');
        if (!switcher) return;

        switcher.addEventListener('click', function(e) {
            e.stopPropagation();
            var isOpen = switcher.classList.contains('open');
            document.querySelectorAll('.lang-switcher.open').forEach(function(el) {
                el.classList.remove('open');
            });
            if (!isOpen) {
                switcher.classList.add('open');
            }
        });

        switcher.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                switcher.click();
            } else if (e.key === 'Escape') {
                switcher.classList.remove('open');
            }
        });

        document.addEventListener('click', function() {
            switcher.classList.remove('open');
        });
    }

    function initSearch() {
        var input = document.getElementById('searchInput');
        var results = document.getElementById('searchResults');
        var wrapper = document.getElementById('searchWrapper');
        var searchBtn = wrapper ? wrapper.querySelector('.search-btn') : null;
        if (!input || !results || !wrapper) return;

        if (searchBtn) {
            searchBtn.addEventListener('click', function() {
                input.focus();
            });
        }

        var searchIndex = null;
        var debounceTimer = null;
        var activeIndex = -1;
        var currentMatches = [];

        function getBasePath() {
            var path = window.location.pathname;
            var segments = path.split('/').filter(Boolean);
            if (segments.length > 0 && segments[0].length === 2) {
                return '/' + segments[0];
            }
            return '';
        }

        function escapeHtml(text) {
            var div = document.createElement('div');
            div.appendChild(document.createTextNode(text));
            return div.innerHTML;
        }

        function loadSearchIndex() {
            if (searchIndex) return Promise.resolve(searchIndex);
            var basePath = getBasePath();
            var indexPath = basePath + '/search-index.json';
            return fetch(indexPath)
                .then(function(res) {
                    if (!res.ok) throw new Error('not found');
                    return res.json();
                })
                .then(function(data) {
                    searchIndex = data;
                    return data;
                })
                .catch(function() {
                    return null;
                });
        }

        function showResults(items) {
            currentMatches = items;
            activeIndex = -1;
            if (!items || items.length === 0) {
                results.innerHTML = '<div class="search-empty">No results found</div>';
            } else {
                results.innerHTML = items.map(function(doc, idx) {
                    var tagsHtml = '';
                    if (doc.tags && doc.tags.length > 0) {
                        tagsHtml = '<div class="search-result-item-tags">' +
                            doc.tags.map(function(t) {
                                return '<span class="search-result-tag">' + escapeHtml(t) + '</span>';
                            }).join('') + '</div>';
                    }
                    return '<a href="' + escapeHtml(doc.url) + '" class="search-result-item" data-index="' + idx + '">' +
                        '<div class="search-result-item-title">' + escapeHtml(doc.title) + '</div>' +
                        (doc.description ? '<div class="search-result-item-summary">' + escapeHtml(doc.description) + '</div>' : '') +
                        tagsHtml + '</a>';
                }).join('');
            }
            results.classList.add('visible');
        }

        function hideResults() {
            results.classList.remove('visible');
            currentMatches = [];
            activeIndex = -1;
        }

        function updateActive() {
            var items = results.querySelectorAll('.search-result-item');
            items.forEach(function(el, idx) {
                el.setAttribute('data-active', idx === activeIndex ? 'true' : 'false');
            });
        }

        function performSearch(query) {
            loadSearchIndex().then(function(index) {
                if (!index || !index.documents) {
                    results.innerHTML = '<div class="search-error">Search index not available</div>';
                    results.classList.add('visible');
                    return;
                }
                var q = query.toLowerCase();
                var matches = index.documents.filter(function(doc) {
                    var title = (doc.title || '').toLowerCase();
                    var desc = (doc.description || '').toLowerCase();
                    var tags = (doc.tags || []).join(' ').toLowerCase();
                    if (title.indexOf(q) !== -1) return true;
                    if (desc.indexOf(q) !== -1) return true;
                    if (tags.indexOf(q) !== -1) return true;
                    return false;
                }).slice(0, 8);
                showResults(matches);
            });
        }

        input.addEventListener('focus', function() {
            loadSearchIndex();
            if (input.value.trim()) {
                performSearch(input.value.trim());
            }
        });

        input.addEventListener('input', function() {
            clearTimeout(debounceTimer);
            var query = input.value.trim();
            if (query.length === 0) {
                hideResults();
                return;
            }
            debounceTimer = setTimeout(function() {
                performSearch(query);
            }, 200);
        });

        input.addEventListener('keydown', function(e) {
            var items = results.querySelectorAll('.search-result-item');
            if (e.key === 'ArrowDown') {
                e.preventDefault();
                if (items.length === 0) return;
                activeIndex = activeIndex < items.length - 1 ? activeIndex + 1 : 0;
                updateActive();
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                if (items.length === 0) return;
                activeIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
                updateActive();
            } else if (e.key === 'Enter') {
                e.preventDefault();
                if (activeIndex >= 0 && currentMatches[activeIndex]) {
                    window.location.href = currentMatches[activeIndex].url;
                }
            } else if (e.key === 'Escape') {
                hideResults();
                input.blur();
            }
        });

        document.addEventListener('click', function(e) {
            if (!wrapper.contains(e.target)) {
                hideResults();
            }
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function() {
            initThemeToggle();
            initLangSwitcher();
            initSearch();
        });
    } else {
        initThemeToggle();
        initLangSwitcher();
        initSearch();
    }
})();
"#;

#[cfg(test)]
mod tests {
    use tempfile::TempDir;

    use super::*;

    #[test]
    fn test_generate_static_assets() {
        let temp_dir = TempDir::new().unwrap();
        let output_dir = temp_dir.path();

        generate_static_assets(output_dir).unwrap();

        // Check CSS file exists
        let css_path = output_dir.join("assets/style.css");
        assert!(css_path.exists());
        let css_content = std::fs::read_to_string(&css_path).unwrap();
        assert!(css_content.contains(":root"));
        assert!(css_content.contains("--color-primary"));

        // Check JS file exists
        let js_path = output_dir.join("assets/main.js");
        assert!(js_path.exists());
        let js_content = std::fs::read_to_string(&js_path).unwrap();
        assert!(js_content.contains("theme-toggle"));
        assert!(js_content.contains("searchIndex"));
    }
}