added online state to services overview

src/_data/services.json

@@ -4,74 +4,106 @@
     "name": "Searx",
     "icon": "fas fa-search",
     "url": "https://searx.sp-codes.de",
+    "status": "https://searx.sp-codes.de",
     "summary": {
       "de": "Eine privatsphären-respektierende, hackbare Metasuchmaschine.",
       "en": "A privacy-respecting, hackable metasearch engine."
     }
   },
-  {
-    "id": "invidious",
-    "name": "Invidious",
-    "icon": "fab fa-youtube",
-    "url": "https://invidious.sp-codes.de",
-    "summary": {
-      "de": "Ein alternatives YouTube-Frontend.",
-      "en": "An alternative YouTube-Frontend."
-    }
-  },
-  {
-    "id": "connectivitycheck",
-    "name": "Captive Portal Check",
-    "icon": "fas fa-wifi",
-    "summary": {
-      "de": "Eine datenschutzfreundliches Tool, um Anmeldeseiten in WLAN-Netzwerken zu erkennen.",
-      "en": "A privacy friendly Service to detect captive portals in WIFI networks."
-    }
-  },
   {
     "id": "matrix",
     "name": "Matrix",
     "icon": "fas fa-comments",
     "url": "https://chat.sp-codes.de",
+    "status": "https://matrix.sp-codes.de/_matrix/static/",
     "summary": {
       "de": "Ein offenes Netzwerk für sichere, dezentralisierte Kommunikation.",
       "en": "An open network for secure, decentralized communication."
     }
   },
-  {
-    "id": "gitea",
-    "name": "Gitea",
-    "icon": "fas fa-code",
-    "url": "https://git.sp-codes.de",
-    "summary": {
-      "de": "Eine leichtgewichtige Code-Hosting-Plattform für git.",
-      "en": "A lightweight code hosting platform for git."
-    }
-  },
-  {
-    "id": "firefox-sync",
-    "name": "Firefox Sync",
-    "icon": "fab fa-firefox-browser",
-    "summary": {
-      "de": "Ein Service um Firefox Einstellungen, Lesezeichen, offene Tabs und vieles mehr über verschiedene Geräte zu synchronisieren.",
-      "en": "A service to sync Firefox settings, bookmarks, open tabs and much more between multiple devices."
-    }
-  },
   {
     "id": "jitsi",
     "name": "Jitsi Meet",
     "icon": "fas fa-users",
     "url": "https://jitsi.sp-codes.de",
+    "status": "https://jitsi.sp-codes.de",
     "summary": {
       "de": "Eine sichere, einfache und skalierbare Plattform für Videokonferenzen.",
       "en": "A secure, simple and scalable platform for video conferencing."
     }
   },
+  {
+    "id": "gitea",
+    "name": "Gitea",
+    "icon": "fas fa-code",
+    "url": "https://git.sp-codes.de",
+    "status": "https://git.sp-codes.de",
+    "summary": {
+      "de": "Eine leichtgewichtige Code-Hosting-Plattform für git.",
+      "en": "A lightweight code hosting platform for git."
+    }
+  },
+  {
+    "id": "connectivitycheck",
+    "name": "Captive Portal Check",
+    "icon": "fas fa-wifi",
+    "status": "https://connectivitycheck.sp-codes.de/generate204",
+    "summary": {
+      "de": "Eine datenschutzfreundliches Tool, um Anmeldeseiten in WLAN-Netzwerken zu erkennen.",
+      "en": "A privacy friendly Service to detect captive portals in WIFI networks."
+    }
+  },
+  {
+    "id": "invidious",
+    "name": "Invidious",
+    "icon": "fab fa-youtube",
+    "url": "https://invidious.sp-codes.de",
+    "status": "https://invidious.sp-codes.de",
+    "summary": {
+      "de": "Ein alternatives YouTube-Frontend.",
+      "en": "An alternative YouTube-Frontend."
+    }
+  },
+  {
+    "id": "nitter",
+    "name": "Nitter",
+    "icon": "fab fa-twitter",
+    "url": "https://nitter.sp-codes.de",
+    "status": "https://nitter.sp-codes.de",
+    "beta": true,
+    "summary": {
+      "de": "Ein alternatives Twitter-Frontend.",
+      "en": "An alternative Twitter-Frontend."
+    }
+  },
+  {
+    "id": "yotter",
+    "name": "Yotter",
+    "icon": "fas fa-desktop",
+    "url": "https://yotter.sp-codes.de",
+    "status": "https://yotter.sp-codes.de",
+    "beta": true,
+    "summary": {
+      "de": "Ein alternatives Twitter- und YouTube-Frontend.",
+      "en": "An alternative Twitter- and YouTube-Frontend."
+    }
+  },
+  {
+    "id": "firefox-sync",
+    "name": "Firefox Sync",
+    "icon": "fab fa-firefox-browser",
+    "status": "https://sync.firefox.sp-codes.de/token/",
+    "summary": {
+      "de": "Ein Service um Firefox Einstellungen, Lesezeichen, offene Tabs und vieles mehr über verschiedene Geräte zu synchronisieren.",
+      "en": "A service to sync Firefox settings, bookmarks, open tabs and much more between multiple devices."
+    }
+  },
   {
     "id": "shields",
     "name": "Shields",
     "icon": "fas fa-tags",
     "url": "https://shields.sp-codes.de",
+    "status": "https://shields.sp-codes.de",
     "beta": true,
     "summary": {
       "de": "Prägnante, konsistente und lesbare Badges im SVG- und Rasterformat.",

src/_data/strings.json

@@ -14,5 +14,21 @@
   "stats": {
     "de": "Statistiken",
     "en": "Stats"
+  },
+  "state": {
+    "de": "Status",
+    "en": "State"
+  },
+  "operational": {
+    "de": "Online",
+    "en": "Online"
+  },
+  "outage": {
+    "de": "Fehler",
+    "en": "Error"
+  },
+  "maintenance": {
+    "de": "Wartung",
+    "en": "Maintenance"
   }
 }

src/_includes/services-extended.html

@@ -1,14 +1,21 @@
 {%- for service in services %}
 <div class="col-12 col-md-6 col-lg-4 p-3">
     <div class="service">
-        <a class="link" {% if service.beta != true %} href="/{{locale}}/services/{{service.id}}" {% endif %}></a>
+        <a class="link" {% if service.beta !=true %} href="/{{locale}}/services/{{service.id}}" {% endif %}></a>
         {% if service.beta == true %}
-          <div class="beta">TEST-PHASE</div>
+        <div class="beta">TEST-PHASE</div>
         {% endif %}
         <div class="inner">
             <i class="{{service.icon}} fa-4x"></i>
-            <h2 class="mt-2">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
+            <h2 class="mt-2 mb-1">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
                     class="fas fa-external-link-alt"></i></a>{% endif %}</h2>
+            {% if service.status %}
+            <div class="mb-2">
+                <a href="https://status.sp-codes.de" target="_blank">
+                    <img src="https://shields.sp-codes.de/endpoint?label={{strings.state[locale]}}&url=https%3A%2F%2Fstatus.sp-codes.de%2Fapi%2Fbadge%3Fservice%3D{{service.status}}%26operational%3D{{strings.operational[locale]}}%26outage%3D{{strings.outage[locale]}}%26maintenance%3D{{strings.maintenance[locale]}}">
+                </a>
+            </div>
+            {% endif %}
             <div>{{service.summary[locale]}}</div>
         </div>
     </div>