Implement PWA features: add service worker, manifest, and offline page; enhance footer and header navigation

_config.yml

@@ -44,7 +44,6 @@ footer_links:
   - title: "Impressum"
     url: "https://legal.thephoenixdi.vision"
 
-
 # Exclude from processing.
 # The following items will not be processed, by default.
 # Any item listed under the `exclude:` key here will be automatically added to

_includes/footer.html

@@ -1,11 +1,21 @@
 <footer class="cyber-razor-top bg-black">
-  {% if site.footer_links and site.footer_links.size > 0 %}
-    {% for link in site.footer_links %}
-      <a href="{{ link.url }}" class="cyber-a">{{ link.title }}</a>
+  <ul class="tabs mobile-tabs">
+    <li class="tab col s1 {% if page.url == "/" %}bg-red{% else %}bg-dark{% endif %}"><a href="{{ "/" | relative_url }}" class="cyber-a"><i class="material-icons">home</i></a></li>
+    {% for tab in sorted_pages %}
+      {% if tab.title and tab.permalink and tab.nav != false %}
+        <li class="tab col s1 {% if page.url == tab.url %}bg-red{% else %}bg-dark{% endif %}">
+          <a href="{{ tab.url | relative_url }}" target="_self" class="cyber-a">
+            {% if tab.icon %}
+              <i class="material-icons">{{ tab.icon }}</i>
+            {% else %}
+              {{ tab.title }}
+            {% endif %}
+          </a>
+        </li>
+      {% endif %}
     {% endfor %}
-  {% else %}
-    <span></span> <!-- Erzeugt leeren, aber sichtbaren Footer -->
-  {% endif %}
+  </ul>
+  <span></span>
 </footer>
 <script
 			  src="https://code.jquery.com/jquery-3.7.1.min.js"

_includes/head.html

@@ -2,6 +2,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{{ page.title }} - {{ site.title }}</title>
 
+<link rel="manifest" href="{{ '/assets/manifest.json' | relative_url }}">
+<meta name="theme-color" content="#ff003c">
+
 <!-- Stylesheets -->
 <link rel="stylesheet" href="{{ "/assets/css/normalize.css" | relative_url }}">
 <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">

_includes/header.html

@@ -5,34 +5,15 @@
     <nav class="cyber-razor-bottom bg-black">
       <div class="nav-wrapper">
         <a href="{{ "/" | relative_url }}" class="cyberpunk-font-og f-x2-5">{{ site.title }}</a>
-        <a href="#" data-target="mobile-menu" class="sidenav-trigger"><i class="material-icons">menu</i></a>
-        <ul id="nav-mobile" class="right hide-on-med-and-down">
-          <li><a href="{{ "/" | relative_url }}" class="cyber-a">Home</a></li>
-          {% for page in sorted_pages %}
-            {% if page.title and page.permalink and page.nav != false %}
-              <li><a href="{{ page.url | relative_url }}" class="cyber-a">{{ page.title }}</a></li>
+        <ul id="nav-mobile" class="right hide-on-med-and-down desktop-only">
+          <li><a href="{{ "/" | relative_url }}" class="cyber-a{% if page.url == "/" %} fg-yellow{% endif %}">Home</a></li>
+          {% for tab in sorted_pages %}
+            {% if tab.title and tab.permalink and tab.nav != false %}
+              <li><a href="{{ tab.url | relative_url }}" class="cyber-a{% if page.url == tab.url %} fg-yellow{% endif %}">{{ tab.title }}</a></li>
             {% endif %}
           {% endfor %}
         </ul>
       </div>
-      <ul class="sidenav" id="mobile-menu">
-        <li>
-          <button class="cyber-button bg-red fg-white m-2 vt-bot" data-href="{{ "/" | relative_url }}">
-            Home
-          </button>
-        </li>
-        {% for page in sorted_pages %}
-          {% if page.title and page.permalink and page.nav != false %}
-            <li>
-              <button class="cyber-button bg-red fg-white m-2 vt-bot" data-href="{{ page.url | relative_url }}">
-                {{ page.title }}
-                <span class="glitchtext">$_glitch;</span>
-                <span class="tag"></span>
-              </button>
-            </li>
-          {% endif %}
-        {% endfor %}
-      </ul>
     </nav>
   </div>
 

_layouts/default.html

@@ -9,5 +9,12 @@
     {{ content }}
   </main>
   {% include footer.html %}
+  <script>
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register("{{ /assets/js/service-worker.js | relative_url }}")
+        .then(() => console.log("✅ Service Worker registriert"))
+        .catch(error => console.log("❌ Service Worker Fehler:", error));
+    }
+  </script>
 </body>
 </html>

_pages/characters.md

@@ -2,6 +2,7 @@
 layout: page
 title: Charaktere
 permalink: /characters/
+icon: account_circle
 ---
 
 <div class="row" style="column-gap: 5px;">

_pages/lifepaths.md

@@ -2,6 +2,7 @@
 layout: page
 title: Lebensweg
 permalink: /lifepaths/
+icon: merge
 ---
 
 - [Kulturelle Herkunft](#kulturelle-herkunft)
@@ -14,7 +15,6 @@ permalink: /lifepaths/
 - [Deine Familienkrise](#deine-familienkrise)
 - [Deine Lebensziele](#deine-lebensziele)
 - [Deine Freunde, Deine Feinde, Deine tragische(n) Liebschaft(en), Süße Rache](#deine-freunde-deine-feinde-deine-tragischen-liebschaften-süße-rache)
-{:.cyber-ul style="align-self: start;"}
 
 ## Kulturelle Herkunft
 {:.cyber-h}

_pages/players-guide.md

@@ -2,6 +2,7 @@
 layout: page
 title: Spielerguide
 permalink: /players-guide/
+icon: description
 ---
 
 TBD

_pages/roles.md

@@ -2,6 +2,7 @@
 layout: page
 title: Rollen
 permalink: /roles/
+icon: manage_accounts
 ---
 
 TBD

_sass/_layout.scss

@@ -36,3 +36,19 @@ footer {
 .breadcrumb span {
   color: #888;
 }
+
+.mobile-tabs {
+  display: none;
+}
+
+/* Ab max. 992px (iPad Hochkant und kleiner) ändert sich das Layout */
+@media screen and (max-width: 992px) {
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-tabs {
+    display: block;
+    background-color: transparent;
+  }
+}

assets/js/service-worker.js

@@ -0,0 +1,59 @@
+const CACHE_NAME = "cyberpunk-cache-v1";
+const OFFLINE_URL = "/offline.html"; // Diese Seite wird angezeigt, wenn offline
+
+const urlsToCache = [
+  "/",
+  "/offline.html",
+  /* CSS-Dateien */
+  "/assets/css/main.css",
+  "/assets/css/normalize.css",
+  "/assets/css/cyberpunk.css",
+  /* JS-Dateien */
+  "/assets/js/materialize.min.js",
+  "/assets/js/service-worker.js",
+  /* PWA-Dateien */
+  "/assets/manifest.json",
+  "/assets/img/icon-192.png",
+  "/assets/img/icon-512.png",
+  /* Bilder, Schriften, etc. */
+  "/assets/fonts/BlenderProBook.woff2",
+  "/assets/fonts/Cyberpunk.otf",
+  "/assets/fonts/Oxanium.woff2",
+  "/assets/img/Netrunner.png",
+  "/assets/img/Tech.png",
+];
+
+// Installations-Event: Dateien werden in den Cache geladen
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(urlsToCache);
+    })
+  );
+});
+
+// Fetch-Event: Prüft, ob eine Datei im Cache ist, bevor sie aus dem Netz geladen wird
+self.addEventListener("fetch", (event) => {
+  event.respondWith(
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request).catch(() => {
+        return caches.match(OFFLINE_URL); // Falls offline, lade offline.html
+      });
+    })
+  );
+});
+
+// Aktivierungs-Event: Löscht alten Cache, wenn sich Dateien geändert haben
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cache) => {
+          if (cache !== CACHE_NAME) {
+            return caches.delete(cache);
+          }
+        })
+      );
+    })
+  );
+});

assets/manifest.json.html

@@ -0,0 +1,25 @@
+---
+permalink: /assets/manifest.json
+---
+
+{
+  "name": "{{ site.title }}",
+  "short_name": "CPRED",
+  "start_url": "{{ "/" | relative_url }}",
+  "display": "standalone",
+  "background_color": "#f8ef02",
+  "theme_color": "#ff003c",
+  "icons": [
+    {
+      "src": "{{ "/assets/img/icon-192.png" | relative_url }}",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "{{ "/assets/img/icon-512.png" | relative_url }}",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
+

offline.html

@@ -0,0 +1,12 @@
+---
+title: Currently Offline
+permalink: /offline.html
+layout: page
+---
+
+<div class="container">
+  <h1>404</h1>
+
+  <p><strong>Du bist zur Zeit offline!</strong></p>
+  <p>Sobald du wieder online bist wird diese Seite gecached.</p>
+</div>