Update draft

nikoshell · nikoshell · commit 33ed3038b164 · 2025-05-19T22:49:49.000+02:00
diff --git a/public/sw.js b/public/sw.js
@@ -1,4 +1,4 @@
-const cacheName = "cache2";
+const cacheName = "cache7";
 
 self.addEventListener("install", (event) => {
   self.skipWaiting();
@@ -9,6 +9,8 @@ self.addEventListener("install", (event) => {
         "/",
         "favicon.ico",
         "index.html",
+        "schedule/talks/index.html",
+        "schedule/speakers/index.html",
         "main.js",
         "manifest.json",
         "style.css",
diff --git a/src/components/Offline.astro b/src/components/Offline.astro
@@ -0,0 +1,53 @@
+---
+
+---
+<div id="offline-icon" class="offline-icon">
+  <i class="fas plug-circle-xmark"></i> Offline
+</div>
+<script is:inline>
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const offlineIcon = document.getElementById('offline-icon');
+
+    function updateOnlineStatus() {
+      console.log('offline');
+      offlineIcon.classList.toggle('show', !navigator.onLine);
+    }
+
+    window.addEventListener('online', updateOnlineStatus);
+    window.addEventListener('offline', updateOnlineStatus);
+
+    // Initial check
+    updateOnlineStatus();
+  }
+  );
+</script>
+
+<style>
+.offline-icon {
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 9999;
+  background: #ffe0e0;
+  color: #a00;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid #a00;
+  font-family: sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.offline-icon.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -2,7 +2,7 @@
 import BaseHead from "@components/BaseHead.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
-
+import Offline from "@components/Offline.astro";
 
 import "@src/styles/global.css";
 import "@src/styles/search.css";
@@ -33,21 +33,21 @@ const externalDomain = new URL(Astro.site || "").hostname;
     <meta name="theme-color" content="#6200ee" />
     <link rel="apple-touch-icon" href="/icons/icon-192x192.png" />
     </Fragment>
-
+  </head>
   <body>
       <header>
         <Header />
       </header>
 
       <main class="main pt-28" role="main">
+      <Offline />
         <slot />
       </main>
 
       <footer>
         <Footer />
       </footer>
 
-
   </body>
 </html>
 
