Flashing fix

diff --git a/site/_includes/layouts/base.njk b/site/_includes/layouts/base.njk
index ab794505efa309d43cea0a56884bfd1e217c4cdf..91137a3972b51424f21e76c0558c618f2ba560b5 100644 (file)
--- a/site/_includes/layouts/base.njk
+++ b/site/_includes/layouts/base.njk
@@ -9,11 +9,16 @@
 
   <!-- Brand theme color (green) -->
   <meta name="theme-color" content="#10a37f">
-  <!-- Theme color per mode -->
-  <!--
-  <meta name="theme-color" content="#1a1b1e" media="(prefers-color-scheme: dark)">
-  <meta name="theme-color" content="#f7f7f8" media="(prefers-color-scheme: light)">
-  -->
+
+  <script>
+    // If we’ve recently confirmed LAN, mark it before render
+    (function () {
+      if (document.cookie.includes('lan=1')) {
+        document.documentElement.classList.add('lan-yes');
+      }
+    })();
+  </script>
+
   <!-- LOAD YOUR CSS -->
   <link rel="stylesheet" href="/assets/styles.css?v=4">
 

diff --git a/site/assets/styles.css b/site/assets/styles.css
index d9e2485e7de28553554908cb70c91bbbc60b981a..3b449269d5734fe861c9ecba1badf369d63920ce 100644 (file)
--- a/site/assets/styles.css
+++ b/site/assets/styles.css
@@ -197,6 +197,13 @@ header{
 .card.is-lan {
   display: none;
 }
+
+/* If we know we’re on LAN, show them from first paint */
+.lan-yes .card.is-lan 
+{ 
+  display: flex; 
+}
+
 /* =================
    Footer
    ================= */

diff --git a/site/index.njk b/site/index.njk
index c011595d34c517518a6c435d6ca52ba5b5956afc..518fac11a3156948dd99a28b1c7ab1b712dcac6e 100644 (file)
--- a/site/index.njk
+++ b/site/index.njk
@@ -102,14 +102,13 @@ title: zndr.dk — Services
 })();
 </script>
 
-
 <script>
 (function () {
-  const PING_URL = "https://lan.zndr.dk/ping";   // 200 only on LAN
+  const PING_URL = "https://lan.zndr.dk/ping"; // 200 on LAN
   const TIMEOUT_MS = 1500;
 
-  const lanCards = Array.from(document.querySelectorAll('.card[data-lan="true"]'));
-  if (!lanCards.length) { return; }
+  // If no LAN cards, skip
+  if (!document.querySelector('.card.is-lan')) return;
 
   const ctrl = new AbortController();
   const to = setTimeout(() => ctrl.abort(), TIMEOUT_MS);
@@ -117,17 +116,27 @@ title: zndr.dk — Services
   fetch(PING_URL, { signal: ctrl.signal, credentials: "omit", cache: "no-store" })
     .then(res => {
       clearTimeout(to);
+
       if (res.ok) {
-        // Home: ensure LAN-only cards are NOT red
-        lanCards.forEach(card => card.classList.remove('is-lan'));
-        // Re-run current filter so visibility matches the query (if any)
-        const input = document.getElementById('filter');
-        if (input) input.dispatchEvent(new Event('input', { bubbles: true }));
+        // Mark as LAN for this and future loads
+        document.documentElement.classList.add('lan-yes');
+        document.cookie = "lan=1; Max-Age=600; Path=/; SameSite=Lax";
+      } else {
+        document.documentElement.classList.remove('lan-yes');
+        document.cookie = "lan=; Max-Age=0; Path=/; SameSite=Lax";
       }
+
+      // If you have a live filter, re-apply it so visibility matches query
+      const input = document.getElementById('filter');
+      if (input) input.dispatchEvent(new Event('input', { bubbles: true }));
     })
     .catch(() => {
       clearTimeout(to);
+      // Treat as public
+      document.documentElement.classList.remove('lan-yes');
+      document.cookie = "lan=; Max-Age=0; Path=/; SameSite=Lax";
     });
 })();
 </script>
 
+