Revert to static JS site (Svelte built, but no CSR); Optimize images

2026-02-16 00:54:08 -03:00
parent 6734dfa51e
commit af70682fa8
117 changed files with 686 additions and 109 deletions
--- a/static/assets/js/script.js
+++ b/static/assets/js/script.js
@@ -11,3 +11,108 @@ if (saved) {
        root.setAttribute('data-theme', 'light');
    }
 }
+
+// Theme toggle
+const themeToggle = document.getElementById('theme-toggle');
+if (themeToggle) {
+    themeToggle.addEventListener('click', () => {
+        const current = root.getAttribute('data-theme') || 'light';
+        const next = current === 'light' ? 'dark' : 'light';
+        root.setAttribute('data-theme', next);
+        try {
+            localStorage.setItem('theme', next);
+        } catch (_) {}
+    });
+}
+
+// Lightbox (structure from Lightbox.svelte; we fill content and handle open/close)
+const dialog = document.querySelector('dialog.lightbox');
+const lbContent = dialog?.querySelector('.lb-content');
+const lbCaption = dialog?.querySelector('#lb-caption, .lb-caption');
+
+function openLightbox(name, type, caption) {
+    if (!dialog || !lbContent || !lbCaption) return;
+    document.body.style.overflow = 'hidden';
+
+    if (type === 'video') {
+        lbContent.innerHTML = `<video src="/assets/media/videos/${name}.mp4" controls autoplay><track kind="captions" src="/assets/media/videos/${name}-captions.vtt" default></video>`;
+    } else {
+        const srcset = (bp) =>
+            type === 'image'
+                ? `/assets/media/${bp}/${name}@1x.webp 1x, /assets/media/${bp}/${name}.webp 2x`
+                : `/assets/media/${bp}/${name}_still@1x.webp 1x, /assets/media/${bp}/${name}_still.webp 2x`;
+        lbContent.innerHTML = `<picture>
+            <source media="(min-width:1024px)" srcset="${srcset('desktop')}">
+            <source media="(min-width:768px)" srcset="${srcset('tablet')}">
+            <source media="(min-width:0px)" srcset="${srcset('mobile')}">
+            <img src="/assets/media/thumbnail/${name}.webp" alt="">
+        </picture>`;
+    }
+    lbCaption.textContent = caption || '';
+    dialog.setAttribute('aria-hidden', 'false');
+    dialog.showModal();
+}
+
+function closeLightbox() {
+    if (!dialog) return;
+    document.body.style.overflow = '';
+    if (lbContent) lbContent.innerHTML = '';
+    if (lbCaption) lbCaption.textContent = '';
+    dialog.setAttribute('aria-hidden', 'true');
+    dialog.close();
+}
+
+if (dialog) {
+    // Add event handlers
+    dialog.querySelector('.lb-close').addEventListener('click', closeLightbox);
+    dialog.querySelector('.lb-close').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            closeLightbox();
+        }
+    });
+    dialog.addEventListener('close', closeLightbox);
+    dialog.addEventListener('cancel', closeLightbox);
+    dialog.addEventListener('click', () => {
+        if (e.target === dialog) dialog.close();
+    });
+}
+
+// Gallery items
+document.querySelectorAll('.gallery-item[data-name]').forEach((el) => {
+    el.addEventListener('click', () => {
+        const name = el.getAttribute('data-name');
+        const type = el.getAttribute('data-type') || 'image';
+        const caption = el.getAttribute('data-caption') || '';
+        if (name) openLightbox(name, type, caption);
+    });
+    el.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            const name = el.getAttribute('data-name');
+            const type = el.getAttribute('data-type') || 'image';
+            const caption = el.getAttribute('data-caption') || '';
+            if (name) openLightbox(name, type, caption);
+        }
+    });
+});
+
+// Show video button (open lightbox with tour)
+const showVideoBtn = document.getElementById('show_video');
+if (showVideoBtn) {
+    const openTour = () => {
+        const name = showVideoBtn.getAttribute('data-name') || 'tour';
+        const type = showVideoBtn.getAttribute('data-type') || 'video';
+        const caption =
+            showVideoBtn.getAttribute('data-caption') ||
+            "Take the scenic route—explore your the home's highlights with a virtual walkthrough.";
+        openLightbox(name, type, caption);
+    };
+    showVideoBtn.addEventListener('click', openTour);
+    showVideoBtn.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            openTour();
+        }
+    });
+}