Additional tweaks

eslint.config.js

@@ -22,5 +22,22 @@ export default [
 			'prefer-const': 'warn'
 		}
 	},
+	{
+		files: ['static/**/*.js'],
+		languageOptions: {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			globals: {
+				window: 'readonly',
+				document: 'readonly',
+				localStorage: 'readonly'
+			}
+		},
+		rules: {
+			'no-unused-vars': 'off',
+			'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_', caughtErrorsIgnorePattern: '^_' }],
+			'prefer-const': 'warn'
+		}
+	},
 	prettierConfig
 ];

package.json

@@ -25,27 +25,27 @@
 		"docker:push": "docker push git.mifi.dev/mifi-holdings/armandine:latest"
 	},
 	"devDependencies": {
+		"@eslint/js": "^10.0.1",
 		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"beasties": "^0.4.1",
-		"serve": "^14.2.5",
-		"@eslint/js": "^10.0.1",
 		"eslint": "^10.0.0",
 		"eslint-config-prettier": "^10.1.8",
-		"typescript-eslint": "^8.0.0",
 		"postcss": "^8.4.49",
 		"postcss-load-config": "^6.0.0",
 		"postcss-nesting": "^14.0.0",
 		"postcss-preset-env": "^11.1.3",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.2.0",
+		"serve": "^14.2.5",
 		"stylelint": "^17.3.0",
 		"stylelint-config-standard": "^40.0.0",
 		"svelte": "^5.0.0",
-		"terser": "^5.0.0",
 		"svelte-check": "^4.0.0",
+		"terser": "^5.0.0",
 		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.0.0",
 		"vite": "^7.3.1",
 		"yaml-lint": "^1.7.0"
 	}

src/lib/components/Lightbox.svelte

@@ -5,12 +5,7 @@
      */
 </script>
 
-<dialog
+<dialog class="lightbox" aria-hidden="true" aria-describedby="lb-caption" inert>
-    class="lightbox"
-    aria-hidden="true"
-    aria-describedby="lb-caption"
-    inert
->
     <header>
         <button type="button" class="lb-close" aria-label="Close"
             >&times;</button

static/assets/js/script.js

@@ -21,7 +21,9 @@ if (themeToggle) {
         root.setAttribute('data-theme', next);
         try {
             localStorage.setItem('theme', next);
-        } catch (_) {}
+        } catch {
+            /* localStorage unavailable (e.g. private browsing) */
+        }
     });
 }
 
@@ -37,18 +39,36 @@ function openLightbox(name, type, caption) {
     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>`;
+        const video = document.createElement('video');
+        video.src = `/assets/media/videos/${name}.mp4`;
+        video.controls = true;
+        video.autoplay = true;
+        const track = document.createElement('track');
+        track.kind = 'captions';
+        track.src = `/assets/media/videos/${name}-captions.vtt`;
+        track.default = true;
+        video.appendChild(track);
+        lbContent.replaceChildren(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>
+        const picture = document.createElement('picture');
-            <source media="(min-width:1024px)" srcset="${srcset('desktop')}">
+        const s1 = document.createElement('source');
-            <source media="(min-width:768px)" srcset="${srcset('tablet')}">
+        s1.media = '(min-width:1024px)';
-            <source media="(min-width:0px)" srcset="${srcset('mobile')}">
+        s1.srcset = srcset('desktop');
-            <img src="/assets/media/thumbnail/${name}.webp" alt="">
+        const s2 = document.createElement('source');
-        </picture>`;
+        s2.media = '(min-width:768px)';
+        s2.srcset = srcset('tablet');
+        const s3 = document.createElement('source');
+        s3.media = '(min-width:0px)';
+        s3.srcset = srcset('mobile');
+        const img = document.createElement('img');
+        img.src = `/assets/media/thumbnail/${name}.webp`;
+        img.alt = '';
+        picture.append(s1, s2, s3, img);
+        lbContent.replaceChildren(picture);
     }
     lbCaption.textContent = caption || '';
     dialog.removeAttribute('inert');
@@ -63,7 +83,7 @@ function closeLightbox() {
     }
     lightboxOpener = null;
     document.body.style.overflow = '';
-    if (lbContent) lbContent.innerHTML = '';
+    if (lbContent) lbContent.replaceChildren();
     if (lbCaption) lbCaption.textContent = '';
     dialog.setAttribute('aria-hidden', 'true');
     dialog.setAttribute('inert', '');