Merge pull request 'develop' (#221) from develop into main

Reviewed-on: #221

.eleventy.js

@@ -62,8 +62,15 @@ module.exports = function (eleventyConfig) {
             .length;
     });
 
-    eleventyConfig.addFilter('getServiceById', (services, serviceId) => {
-        return services.find(s => s.id === serviceId);
+    eleventyConfig.addCollection("series", function (collectionApi) {
+        return collectionApi.getAll()
+            .filter(p => p.data?.series)
+            .sort((p0, p1) => p0.data.order - p1.data.order)
+            .reduce((series, post) => {
+                series[post.data.series] = series[post.data.series] ?? [];
+                series[post.data.series].push(post);
+                return series;
+            }, {});
     });
 
     return {

.forgejo/workflows/build-deploy.yml

@@ -3,13 +3,30 @@ name: Build and Deploy Website
 on: [push]
 
 jobs:
+  build-dev:
+    name: Build Dev Website
+    runs-on: docker
+    container:
+      image: node:lts
+    if: github.ref != 'refs/heads/main'
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install Dependencies
+        run: npm install
+      - name: Build Website
+        run: npm run build:dev
+      - uses: actions/upload-artifact@v3
+        with:
+          name: build
+          path: dist/
   build:
     name: Build Website
     runs-on: docker
     container:
       image: node:lts
+    if: github.ref == 'refs/heads/main'
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Install Dependencies
         run: npm install
       - name: Build Website
@@ -23,7 +40,7 @@ jobs:
     runs-on: docker
     container:
       image: node:lts-alpine
-    needs: [build]
+    needs: [build-dev]
     if: github.ref == 'refs/heads/develop'
     steps:
       - uses: actions/download-artifact@v3

README.md

@@ -1,7 +1,5 @@
 # sp-codes.de
 
-[![Build Status](https://ci.sp-codes.de/api/badges/samuel-p/sp-codes.de/status.svg?branch=main)](https://ci.sp-codes.de/samuel-p/sp-codes.de)
-
 Website for [sp-codes.de](https://sp-codes.de)
 
 ## Additional Header Parameters
@@ -9,7 +7,7 @@ Website for [sp-codes.de](https://sp-codes.de)
 The following Parameters are set directly on the Web-Server.
 
 ```
-Content-Security-Policy: default-src 'none'; script-src 'self' https://umami.sp-codes.de; object-src 'none'; style-src 'self'; img-src 'self' https://shields.sp-codes.de; media-src 'none'; frame-src 'none'; font-src 'self'; connect-src 'self' https://umami.sp-codes.de
+Content-Security-Policy: default-src 'none'; script-src 'self' https://umami.sp-codes.de; object-src 'none'; style-src 'self'; img-src 'self' https://status.sp-codes.de https://shields.sp-codes.de; media-src 'none'; frame-src 'none'; font-src 'self'; connect-src 'self' https://umami.sp-codes.de
 Referrer-Policy: strict-origin-when-cross-origin
 Feature-Policy: sync-xhr 'self'
 Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

package.json

@@ -4,9 +4,10 @@
   "description": "website for sp-codes.de",
   "scripts": {
     "minify-css": "uncss -n -H dist/ -o dist/css/main-*.css dist/**/*.html dist/**/**/*.html dist/**/**/**/*.html dist/**/**/**/**/*.html dist/**/**/**/**/**/*.html",
+    "add-index": "cpx dist/de/index.html dist/ && replace-in-file sp-codes.de/de/ sp-codes.de/ dist/index.html",
     "start": "eleventy --serve --watch",
-    "build": "eleventy && npm run move-index && npm run minify-css",
-    "move-index": "cpx dist/de/index.html dist/"
+    "build": "eleventy && npm run minify-css && npm run add-index",
+    "build:dev": "BUILD=dev eleventy && npm run minify-css && npm run add-index"
   },
   "author": "samuel-p",
   "repository": {
@@ -14,7 +15,7 @@
     "url": "https://git.sp-codes.de/samuel-p/sp-codes.de"
   },
   "optionalDependencies": {
-    "browser-sync": "^2.29.3"
+    "browser-sync": "^3.0.2"
   },
   "devDependencies": {
     "@11ty/eleventy": "^2.0.1",
@@ -26,13 +27,14 @@
     "cpx": "^1.5.0",
     "eleventy-plugin-rev": "^2.0.0",
     "eleventy-sass": "^2.2.4",
-    "glob": "^10.3.10",
-    "minify": "^10.5.2",
-    "postcss": "^8.4.32",
-    "sass": "^1.69.5",
+    "glob": "^10.3.12",
+    "minify": "^11.1.1",
+    "postcss": "^8.4.38",
+    "replace-in-file": "^7.1.0",
+    "sass": "^1.72.0",
     "uncss": "^0.17.3"
   },
   "dependencies": {
-    "bootstrap": "^5.3.2"
+    "bootstrap": "^5.3.3"
   }
 }

src/_data/donations.json

@@ -2,12 +2,19 @@
   {
     "year": 2024,
     "donations": [
+      {
+        "date": "26.02.2024",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "ub1x",
+        "first": false
+      },
       {
         "date": "23.01.2024",
         "amount": 25,
         "via": "banktransfer",
         "from": null,
-        "first": false
+        "first": true
       }
     ]
   },
@@ -35,13 +42,6 @@
         "from": "ub1x",
         "first": false
       },
-      {
-        "date": "26.10.2023",
-        "amount": 20,
-        "via": "banktransfer",
-        "from": "ub1x",
-        "first": false
-      },
       {
         "date": "17.07.2023",
         "amount": 20,

src/_data/eleventyComputed.js

@@ -0,0 +1,5 @@
+module.exports = {
+    service: (data) => data.services.find(s => s.id === data.service),
+    title: (data) => data.title || data.service?.name || "",
+    summary: (data) => data.summary || data.service?.summary?.[data.locale] || ""
+}

src/_data/global.dev.json

@@ -0,0 +1,4 @@
+{
+  "title": "DEV sp-codes",
+  "url": "https://dev.sp-codes.de"
+}

src/_data/global.json

@@ -0,0 +1,18 @@
+{
+  "title": "sp-codes",
+  "url": "https://sp-codes.de",
+  "baseUrl": "/",
+  "author": "Samuel Philipp",
+  "languages": [
+    {
+      "label": "English",
+      "code": "en",
+      "icon": "us"
+    },
+    {
+      "label": "Deutsch",
+      "code": "de",
+      "icon": "de"
+    }
+  ]
+}

src/_data/services.json

@@ -8,7 +8,38 @@
     "summary": {
       "de": "Die offene Plattform für sichere und dezentrale Kommunikation.",
       "en": "The open platform for secure and decentralized communication."
-    }
+    },
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit Anfang 2020 betreibe ich einen öffentlichen Matrix-Server: <a href=\"https://matrix.sp-codes.de\">matrix.sp-codes.de</a> und eine öffentliche Element-Web Instanz: <a href=\"https://chat.sp-codes.de\" target=\"_blank\">chat.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://chat.sp-codes.de/#/register\">Jetzt registrieren</a></div>",
+          "en": "<p>Since the beginning of 2020 I run a public Matrix server: <a href=\"https://matrix.sp-codes.de\">matrix.sp-codes.de</a> and a public Element-Web instance: <a href=\"https://chat.sp-codes.de\" target=\"_blank\">chat.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://chat.sp-codes.de/#/register\">Register now</a></div>"
+        }
+      },
+      {
+        "title": {
+          "de": "Einstieg",
+          "en": "Getting started"
+        },
+        "content": {
+          "de": "<p>Hier findest du eine Artikelserie für einen einfachen Einstieg in Matrix:</p><ol><li><a href=\"/de/services/matrix/setup/part-1/\">Werde Teil der Matrix</a></li><li><a href=\"/de/services/matrix/setup/part-2/\">Sichere Chats mit Matrix</a></li></ol>",
+          "en": "<p>Here you will find an article series (German) for an easy start to Matrix:</p><ol><li><a href=\"/de/services/matrix/setup/part-1/\">Werde Teil der Matrix</a></li><li><a href=\"/de/services/matrix/setup/part-2/\">Sichere Chats mit Matrix</a></li></ol>"
+        }
+      },
+      {
+        "ossrox": {
+          "url": "https://ossrox.org/store/matrix"
+        },
+        "content": {
+          "de": "Wenn du einen eigenen Matrix-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
+          "en": "If you want to have your own Matrix server for you, your family or your company, I would be happy to support you with my company Ossrox. Please have a look at our services on our website or send me a message."
+        }
+      }
+    ]
   },
   {
     "id": "jitsi",
@@ -17,9 +48,30 @@
     "url": "https://jitsi.sp-codes.de",
     "status": "2",
     "summary": {
-      "de": "Einfache Videokonferenzen mit Leichtigkeit.",
-      "en": "Easy video conferencing with ease."
-    }
+      "de": "Einfache und sichere Videokonferenzen.",
+      "en": "Easy and secure video conferencing."
+    },
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit Juli 2020 betreibe ich eine eigene Jitsi-Meet Instanz. Du findest sie unter <a href=\"https://jitsi.sp-codes.de\">jitsi.sp-codes.de</a>.</p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://jitsi.sp-codes.de\">Meeting starten</a></div>",
+          "en": "<p>Since July 2020 I run my own Jitsi-Meet instance. You can find it at <a href=\"https://jitsi.sp-codes.de/\">jitsi.sp-codes.de</a>.</p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://jitsi.sp-codes.de\">Start meeting</a></div>"
+        }
+      },
+      {
+        "ossrox": {
+          "url": "https://ossrox.org/store/jitsi"
+        },
+        "content": {
+          "de": "Wenn du einen eigenen Jitsi-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
+          "en": "If you want to have your own Jitsi server for you, your family or your company, I would be happy to support you with my company Ossrox. Please have a look at our services on our website or send me a message."
+        }
+      }
+    ]
   },
   {
     "id": "mastodon",
@@ -30,7 +82,28 @@
     "summary": {
       "de": "Das soziale Netzwerk für dezentrale und sichere Interaktion.",
       "en": "The social network for decentralized and secure interaction."
-    }
+    },
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit Mai 2021 betreibe ich eine öffentliche Mastodon-Instanz: <a href=\"https://social.sp-codes.de\">social.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://social.sp-codes.de/auth/sign_up\">Jetzt registrieren</a></div>",
+          "en": "<p>Since May 2021 I run a public Mastodon instance: <a href=\"https://social.sp-codes.de/\">social.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://social.sp-codes.de/auth/sign_up\">Register now</a></div>"
+        }
+      },
+      {
+        "ossrox": {
+          "url": "https://ossrox.org/store/mastodon"
+        },
+        "content": {
+          "de": "Wenn du einen eigenen Mastodon-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
+          "en": "If you want to have your own mastodon server for you, your family or your company, I would be happy to support you with my company Ossrox. Please have a look at our services on our website or send me a message."
+        }
+      }
+    ]
   },
   {
     "id": "peertube",
@@ -41,7 +114,28 @@
     "summary": {
       "de": "Die freie und dezentrale Plattform für gemeinsames Video-Streaming.",
       "en": "The free and decentralized platform for collaborative video streaming."
-    }
+    },
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit August 2021 betreibe ich eine öffentliche PeerTube-Instanz: <a href=\"https://tube.sp-codes.de\">tube.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://tube.sp-codes.de/signup\">Jetzt registrieren</a></div>",
+          "en": "<p>Since August 2021 I run a public PeerTube instance: <a href=\"https://tube.sp-codes.de/\">tube.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://tube.sp-codes.de/signup\">Register now</a></div>"
+        }
+      },
+      {
+        "ossrox": {
+          "url": "https://ossrox.org/store"
+        },
+        "content": {
+          "de": "Wenn du einen eigenen PeerTube-Server betreiben willst, um deine Plattform für Videos und Live-Streams zu starten, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
+          "en": "If you want to run your own PeerTube server to start your platform for videos and live streams, I would be happy to support you with my company Ossrox. Take a look at our offer on our website or write me a message."
+        }
+      }
+    ]
   },
   {
     "id": "pixelfed",
@@ -64,7 +158,28 @@
     "summary": {
       "de": "Die Plattform für einfaches und sicheres Code-Hosting.",
       "en": "The platform for easy and secure code hosting."
-    }
+    },
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit Ende 2019 betreibe ich eine eigene Forgejo Instanz, in der ich meine Projekte verwalte. Hier geht's lang: <a href=\"https://git.sp-codes.de\">git.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://git.sp-codes.de/user/sign_up\">Jetzt registrieren</a></div>",
+          "en": "<p>Since the end of 2019, I have been running my own Forgejo instance where I manage my projects. This way: <a href=\"https://git.sp-codes.de\">git.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://git.sp-codes.de/user/sign_up\">Register now</a></div>"
+        }
+      },
+      {
+        "ossrox": {
+          "url": "https://ossrox.org/store"
+        },
+        "content": {
+          "de": "Wenn du deine Projekte in einer eigenen Forgejo-, Gitea- oder GitLab-Instanz verwalten willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
+          "en": "If you want to manage your projects in your own Forgejo, Gitea or GitLab instance, I will be happy to support you with my company Ossrox. Take a look at our offer on our website or write me a message."
+        }
+      }
+    ]
   },
   {
     "id": "connectivitycheck",
@@ -74,7 +189,29 @@
     "summary": {
       "de": "Überprüfung der Verfügbarkeit von Internetzugang.",
       "en": "Verification of Internet access availability."
-    }
+    },
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit Mitte 2019 stelle ich einen freien Captive Portal Check zur Verfügung: <a href=\"https://connectivitycheck.sp-codes.de/generate204\">https://connectivitycheck.sp-codes.de/generate204</a></p>",
+          "en": "<p>Since mid 2019 I provide a free Captive Portal Check: <a href=\"https://connectivitycheck.sp-codes.de/generate204\">https://connectivitycheck.sp-codes.de/generate204</a></p>"
+        }
+      },
+      {
+        "title": {
+          "de": "Einrichtung",
+          "en": "Setup"
+        },
+        "content": {
+          "de": "<p>Hier findest du einen Artikel, der dir die Einrichtung auf verschiedenen Geräten erklärt:</p><ul><li><a href=\"/de/services/connectivitycheck/setup/\">Einrichtung Captive Portal Check</a></li></ul>",
+          "en": "<p>Here you will find an article that explains how to set it up on various devices:</p><ul><li><a href=\"/en/services/connectivitycheck/setup/\">Setup Captive Portal Check</a></li></ul>"
+        }
+      }
+    ]
   },
   {
     "id": "ntfy",
@@ -85,7 +222,19 @@
     "summary": {
       "de": "Echtzeitbenachrichtigungen mit UnifiedPush-Unterstützung.",
       "en": "Real-time notifications with UnifiedPush support."
-    }
+    },
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit Mai 2023 stelle ich ntfy zur freien Verfügung: <a href=\"https://ntfy.sp-codes.de\">ntfy.sp-codes.de</a></p><div>Gerne kannst du ntfy als Push-Provider für deine Apps nutzen, wenn du möchtest.</div>",
+          "en": "<p>Since May 2023 I provide ntfy for free: <a href=\"https://ntfy.sp-codes.de\">https://ntfy.sp-codes.de</a> You are welcome to use ntfy as push provider for your apps if you like.</p>"
+        }
+      }
+    ]
   },
   {
     "id": "etherpad",
@@ -96,7 +245,19 @@
     "summary": {
       "de": "Gemeinsame Echtzeit-Textbearbeitung für effektive Zusammenarbeit.",
       "en": "Collaborative real-time text editing for effective collaboration."
-    }
+    },
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit Ende 2020 betreibe ich Etherpad: <a href=\"https://pad.sp-codes.de\">pad.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://pad.sp-codes.de\">Dokument öffnen</a></div>",
+          "en": "<p>I've been running Etherpad since the end of 2020: <a href=\"https://pad.sp-codes.de\">pad.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://pad.sp-codes.de\">Open document</a></div>"
+        }
+      }
+    ]
   },
   {
     "id": "shields",
@@ -107,6 +268,18 @@
     "summary": {
       "de": "Visuelle Badges zur Anzeige von Projektinformationen und Status.",
       "en": "Visual badges for displaying project information and status."
-    }
+    },
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit August 2020 betreibe ich eine öffentliche Shields Instanz. Schau gerne mal rein: <a href=\"https://shields.sp-codes.de\">shields.sp-codes.de</a></p>",
+          "en": "<p>Since August 2020 I have been running a public Shields instance. Feel free to take a look: <a href=\"https://shields.sp-codes.de\">shields.sp-codes.de</a></p>"
+        }
+      }
+    ]
   }
 ]

src/_data/site.js

@@ -1,21 +1,10 @@
-module.exports = {
-    title: "sp-codes",
-    description: "Samuel Philipp - Software Engineer from Magdeburg",
-    url: "https://sp-codes.de",
-    baseUrl: "/",
-    author: "Samuel Philipp",
-    buildTime: new Date(),
-    languages: [
-        {
-            label: "English",
-            code: "en",
-            icon: "us"
-        },
-        {
-            label: "Deutsch",
-            code: "de",
-            icon: "de"
-        }
-    ]
-};
+const fs = require("fs");
+const site = require("./global.json");
 
+site.buildName = process.env.BUILD || 'prod';
+if (fs.existsSync(`${__dirname}/global.${site.buildName}.json`)) {
+    Object.assign(site, require(`./global.${site.buildName}.json`));
+}
+site.buildTime = new Date().toISOString();
+
+module.exports = site;

src/_data/strings.json

@@ -1,90 +0,0 @@
-{
-  "menu": {
-    "de": "Menü",
-    "en": "Menu"
-  },
-  "imprint": {
-    "de": "Impressum",
-    "en": "Imprint"
-  },
-  "privacy": {
-    "de": "Datenschutz",
-    "en": "Privacy"
-  },
-  "code": {
-    "de": "Code",
-    "en": "Code"
-  },
-  "stats": {
-    "de": "Statistiken",
-    "en": "Stats"
-  },
-  "supporters": {
-    "de": "Unterstützer:innen",
-    "en": "Supporters"
-  },
-  "state": {
-    "de": "Status",
-    "en": "State"
-  },
-  "operational": {
-    "de": "Online",
-    "en": "Online"
-  },
-  "outage": {
-    "de": "Ausfall",
-    "en": "Outage"
-  },
-  "maintenance": {
-    "de": "Wartung",
-    "en": "Maintenance"
-  },
-  "date": {
-    "de": "Datum",
-    "en": "Date"
-  },
-  "amount": {
-    "de": "Betrag",
-    "en": "Amount"
-  },
-  "via": {
-    "de": "Via",
-    "en": "Via"
-  },
-  "from": {
-    "de": "Von",
-    "en": "Form"
-  },
-  "banktransfer": {
-    "de": "Überweisung",
-    "en": "Bank transfer"
-  },
-  "total": {
-    "de": "Gesamt",
-    "en": "Total"
-  },
-  "name": {
-    "de": "Name",
-    "en": "Name"
-  },
-  "type": {
-    "de": "Typ",
-    "en": "Type"
-  },
-  "provider": {
-    "de": "Anbieter",
-    "en": "Provider"
-  },
-  "location": {
-    "de": "Standort",
-    "en": "Location"
-  },
-  "month": {
-    "de": "Monat",
-    "en": "Month"
-  },
-  "year": {
-    "de": "Jahr",
-    "en": "Year"
-  }
-}

src/_includes/donations-current.html

@@ -2,21 +2,17 @@
     <table class="table">
         <thead>
         <tr>
-            <th>{{strings.date[locale]}}</th>
-            <th>{{strings.via[locale]}}</th>
-            <th>{{strings.from[locale]}}</th>
-            <th>{{strings.amount[locale]}}</th>
+            <th>{{strings.donations.date}}</th>
+            <th>{{strings.donations.via}}</th>
+            <th>{{strings.donations.from}}</th>
+            <th>{{strings.donations.amount}}</th>
         </tr>
         </thead>
         <tbody>
         {% for donation in donations[0].donations %}
         <tr>
             <td>{{donation.date}}</td>
-            {% if donation.via == 'opencollective' %}
-            <td>Open Collective</td>
-            {% else %}
-            <td>{{strings[donation.via][locale]}}</td>
-            {% endif %}
+            <td>{{strings.donations[donation.via]}}</td>
             {% if donation.from %}
             <td>{{donation.from}}</td>
             {% else %}
@@ -28,7 +24,7 @@
         </tbody>
         <tfoot>
         <tr>
-            <th colspan="3">{{strings.total[locale]}}</th>
+            <th colspan="3">{{strings.donations.total}}</th>
             <th>{{donations[0].donations | sum | amount}} €</th>
         </tr>
         </tfoot>

src/_includes/donations.html

@@ -5,21 +5,17 @@
     <table class="table">
         <thead>
         <tr>
-            <th>{{strings.date[locale]}}</th>
-            <th>{{strings.via[locale]}}</th>
-            <th>{{strings.from[locale]}}</th>
-            <th>{{strings.amount[locale]}}</th>
+            <th>{{strings.donations.date}}</th>
+            <th>{{strings.donations.via}}</th>
+            <th>{{strings.donations.from}}</th>
+            <th>{{strings.donations.amount}}</th>
         </tr>
         </thead>
         <tbody>
         {% for donation in year.donations %}
         <tr>
             <td>{{donation.date}}</td>
-            {% if donation.via == 'opencollective' %}
-            <td>Open Collective</td>
-            {% else %}
-            <td>{{strings[donation.via][locale]}}</td>
-            {% endif %}
+            <td>{{strings.donations[donation.via]}}</td>
             {% if donation.from %}
             <td>{{donation.from}}</td>
             {% else %}
@@ -31,7 +27,7 @@
         </tbody>
         <tfoot>
         <tr>
-            <th colspan="3">{{strings.total[locale]}}</th>
+            <th colspan="3">{{strings.donations.total}}</th>
             <th>{{year.donations | sum | amount}} €</th>
         </tr>
         </tfoot>

src/_includes/expenses-current.html

@@ -2,12 +2,12 @@
     <table class="table">
         <thead>
         <tr>
-            <th>{{strings.name[locale]}}</th>
-            <th>{{strings.type[locale]}}</th>
-            <th>{{strings.provider[locale]}}</th>
-            <th>{{strings.location[locale]}}</th>
-            <th>{{strings.amount[locale]}} / {{strings.month[locale]}}</th>
-            <th>{{strings.amount[locale]}} / {{strings.year[locale]}}</th>
+            <th>{{strings.donations.name}}</th>
+            <th>{{strings.donations.type}}</th>
+            <th>{{strings.donations.provider}}</th>
+            <th>{{strings.donations.location}}</th>
+            <th>{{strings.donations.amount}} / {{strings.donations.month}}</th>
+            <th>{{strings.donations.amount}} / {{strings.donations.year}}</th>
         </tr>
         </thead>
         <tbody>
@@ -28,7 +28,7 @@
         </tbody>
         <tfoot>
         <tr>
-            <th colspan="4">{{strings.total[locale]}}</th>
+            <th colspan="4">{{strings.donations.total}}</th>
             <th>{{expenses | sum | amount}} €</th>
             <th>{{expenses | sum | year | amount}} €</th>
         </tr>

src/_includes/layouts/article.njk

@@ -16,25 +16,22 @@ layout: base.njk
     <div class="col-lg-4 col-12">
         {% if series %}
         <div class="tab-card">
-            <div class="title">Alle Teile dieser Serie</div>
+            <div class="title">{{ strings.article.seriesParts }}</div>
             <div class="card">
-                {%- for post in collections.all %}
-                {% if post.data.series == series %}
+                {%- for post in collections.series[series] %}
                 <div class="p-2">
                     <a href="{{ post.url | url }}"
                        class="list-group-item list-group-item-action{% if post.url == page.url %} fw-bold{% endif %}">
                         {{ post.data.title }}
                     </a>
                 </div>
-                {% endif %}
                 {%- endfor %}
             </div>
         </div>
         {% endif %}
-        {% set service = services | getServiceById(service) %}
         {% if service %}
         <div class="tab-card">
-            <div class="title">Zugehöriger Dienst</div>
+            <div class="title">{{ strings.article.relatedService }}</div>
             <div class="card service">
                 <a class="link" {% if service.beta !=true %} href="/{{locale}}/services/{{service.id}}" {% endif %}></a>
                 {% if service.beta == true %}
@@ -48,8 +45,8 @@ layout: base.njk
                     {% if service.status %}
                     <div class="mb-2">
                         <a href="https://status.sp-codes.de" target="_blank">
-                            <img alt="{{strings.state[locale]}}"
-                                 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]}}">
+                            <img alt="{{strings.state.title}}"
+                                 src="https://status.sp-codes.de/api/badge/1/status?label=Status&upLabel=Online&downLabel=Ausfall&maintenanceLabel=Wartung">
                         </a>
                     </div>
                     {% endif %}
@@ -59,34 +56,22 @@ layout: base.njk
         </div>
         {% endif %}
         <div class="tab-card">
-            <div class="title">Du hast eine Frage dazu?</div>
-            <div class="card">
-                <p>
-                    Komm gerne in der Matrix-Gruppe vorbei und lass uns diskutieren. Ich freue mich auf dein Feedback!
-                </p>
-                <a href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
-            </div>
+            <div class="title">{{ strings.article.questions }}</div>
+            <div class="card">{{ strings.article.questionsContent | safe }}</div>
         </div>
         <div class="tab-card">
-            <div class="title">Über mich</div>
-            <div class="card">
-                <p>
-                    Mein Name ist Samuel Philipp und ich bin ein Software Engineer aus Magdeburg. In meiner Freizeit
-                    hoste ich verschiedene freie <a href="/de/services/">Dienste</a>. Hier schreibe ich Artikel rund um
-                    Sicherheit und Datenschutz.
-                </p>
-                <a href="https://samuel-philipp.de">Mehr erfahren</a>
-            </div>
+            <div class="title">{{ strings.article.aboutMe }}</div>
+            <div class="card">{{ strings.article.aboutMeContent | safe }}</div>
         </div>
         <div class="tab-card">
-            <div class="title">Schreib mir deine Meinung</div>
+            <div class="title">{{ strings.article.yourOpinion }}</div>
             <div class="card">
                 <div class="d-flex justify-content-center flex-wrap my-3 contact-links">
                     <div class="m-2"><a href="mailto:mail@sp-codes.de">
                         <span class="d-none d-md-inline-block i-envelope i-4x i-fw"></span>
                         <span class="d-inline-block d-md-none i-envelope i-2x i-fw"></span>
                     </a></div>
-                    <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+                    <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de">
                         <span class="d-none d-md-inline-block i-matrix i-4x i-fw"></span>
                         <span class="d-inline-block d-md-none i-matrix i-2x i-fw"></span>
                     </a></div>

src/_includes/layouts/base.njk

@@ -1,10 +1,7 @@
----
-title: sp-codes
----
 <!doctype html>
 <html lang="{{ locale }}" prefix="og: http://ogp.me/ns#">
 <head>
-    <title>sp-codes - {{ title }}</title>
+    <title>{{ site.title }} - {{ title }}</title>
     <base href="/">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -16,21 +13,22 @@ title: sp-codes
     <meta name="coverage" content="Worldwide">
     <meta name="distribution" content="Global">
     <meta name="rating" content="general">
-    <meta name="url" content="https://sp-codes.de/">
-    <meta name="subject" content="sp-codes">
-    <meta name="description" content="Samuel Philipp - Software Engineer from Magdeburg">
-    <meta name="author" content="Samuel Philipp">
+    <meta name="url" content="{{ site.url }}{{ page.url }}">
+    <meta name="subject" content="{{ site.title }} - {{ title }}">
+    <meta name="description" content="{{ summary }}">
+    <meta name="author" content="{{ site.author }}">
     <meta property="og:type" content="website">
-    <meta property="og:locale" content="de">
-    <meta property="og:url" content="https://sp-codes.de/">
-    <meta property="og:title" content="sp-codes">
-    <meta property="og:description" content="Samuel Philipp - Software Engineer from Magdeburg">
-    <meta property="og:site_name" content="sp-codes">
-    <meta property="og:image" content="https://sp-codes.de/img/sp-codes.jpg">
+    <meta property="og:locale" content="{{ locale }}">
+    <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+    <meta property="og:title" content="{{ site.title }} - {{ title }}">
+    <meta property="og:description" content="{{ summary }}">
+    <meta property="og:site_name" content="{{ site.title }} - {{ title }}">
+    <meta property="og:image" content="{{ site.url }}/img/og.png">
+    <meta property="og:updated_time" content="{{ site.buildTime }}">
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="sp-codes">
-    <meta name="twitter:description" content="Samuel Philipp - Software Engineer from Magdeburg">
-    <meta name="twitter:image" content="https://sp-codes.de/img/sp-codes.jpg">
+    <meta name="twitter:title" content="{{ site.title }} - {{ title }}">
+    <meta name="twitter:description" content="{{ summary }}">
+    <meta name="twitter:image" content="{{ site.url }}/img/og.png">
     <link rel="shortcut icon" href="favicon.ico">
     <link rel="icon" type="image/png" href="favicon.png">
     <link rel="stylesheet" href="{{ '/css/main.css' | rev }}">
@@ -39,13 +37,13 @@ title: sp-codes
 <body>
 <nav class="nav menu border-bottom">
     <div class="toggle">
-        <label for="menu" class="m-0"><span class="i-bars me-1"></span>{{ strings.menu[locale] }}</label>
+        <label for="menu" class="m-0"><span class="i-bars i-fw me-2"></span>{{ strings.menu.title }}</label>
 
         <div class="flex-grow-1"></div>
 
         {% for language in site.languages %}
-        <div {% if language.code== locale %} class="active" {% endif %}>
-            <a href="{% translatedUrl locale, language.code %}" class="ms-3">
+        <div {% if language.code == locale %} class="active" {% endif %}>
+            <a href="{% translatedUrl locale, language.code %}" class="ms-4">
                 <span class="fi-{{ language.icon }}" title="{{ language.label }}"></span>
             </a>
         </div>
@@ -54,11 +52,14 @@ title: sp-codes
     <input type="checkbox" id="menu"/>
 
     <div class="items">
+        <a class="logo mini me-4" href="/{{locale}}/">
+            <img src="/img/sp-codes.svg" alt="sp-codes">
+        </a>
         {%- for entry in collections.all | eleventyNavigation %}
         {% if not entry.url.startsWith("https") and entry.url.includes(locale) or entry.locale == locale %}
         <div class="item{% if entry.url == page.url %} active{% endif %}">
-            <a href="{{ entry.url | url }}" class="me-3">
-                {% if entry.icon %}<span class="{{ entry.icon }} me-1"></span>{% endif %}{{ entry.title }}
+            <a href="{{ entry.url | url }}" class="me-4">
+                {% if entry.icon %}<span class="{{ entry.icon }} i-fw me-2"></span>{% endif %}{{ entry.title }}
             </a>
         </div>
         {% endif %}
@@ -67,10 +68,10 @@ title: sp-codes
 
     <div class="flex-grow-1"></div>
 
-    <div class="lang-large">
+    <div class="items lang-large">
         {% for language in site.languages %}
-        <div {% if language.code== locale %} class="active" {% endif %}>
-            <a href="{% translatedUrl locale, language.code %}" class="ms-3">
+        <div class="item{% if language.code == locale %} active{% endif %}"">
+            <a href="{% translatedUrl locale, language.code %}" class="ms-4">
                 <span class="fi-{{ language.icon }}" title="{{ language.label }}"></span>
             </a>
         </div>
@@ -82,21 +83,21 @@ title: sp-codes
         {{ content | safe }}
     </div>
 </div>
-<div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
+<div class="nav d-flex justify-content-start flex-wrap px-4 py-3 menu border-top">
     <div class="d-flex justify-content-start flex-wrap">
-        <div class="me-3">Made with <span class="i-heart highlight"></span> in Germany</div>
-        <div class="me-3"><a href="https://samuel-philipp.de"><span class="i-copyright me-1"></span>Samuel Philipp</a></div>
+        <div class="me-4">Made with <span class="i-heart highlight"></span> in Germany</div>
+        <div class="me-4"><a href="https://samuel-philipp.de"><span class="i-copyright me-2"></span>Samuel Philipp</a></div>
     </div>
     <div class="flex-sm-grow-1"></div>
     <div class="d-flex justify-content-sm-start flex-wrap">
-        <div class="me-3"><a href="/{{locale}}/imprint"><span class="i-info-circle me-1"></span>{{strings.imprint[locale]}}</a>
+        <div class="me-4"><a href="/{{locale}}/imprint"><span class="i-info-circle me-2"></span>{{strings.menu.imprint}}</a>
         </div>
-        <div class="me-3"><a href="/{{locale}}/privacy"><span class="i-user-secret me-1"></span>{{strings.privacy[locale]}}</a>
+        <div class="me-4"><a href="/{{locale}}/privacy"><span class="i-user-secret me-2"></span>{{strings.menu.privacy}}</a>
         </div>
-        <div class="me-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span
-                class="i-code me-1"></span>{{strings.code[locale]}}</a></div>
+        <div class="me-4"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span
+                class="i-code me-2"></span>{{strings.menu.code}}</a></div>
         <div><a target="_blank" href="https://umami.sp-codes.de/share/gaJcXEyG/sp-codes.de"><span
-                class="i-chart-line me-1"></span>{{strings.stats[locale]}}</a></div>
+                class="i-chart-line me-2"></span>{{strings.menu.stats}}</a></div>
     </div>
 </div>
 </body>

src/_includes/layouts/home.njk

@@ -1,12 +0,0 @@
----
-layout: base.njk
----
-<div class="row pb-4">
-  <div class="col">
-    <div class="logo">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><linearGradient id="a"><stop offset="0" stop-color="#fea500"></stop><stop offset="1" stop-color="#fea500" stop-opacity="0"></stop></linearGradient></defs><path d="M256 22l202.684 117.02v234.039L256 490.079 53.316 373.058v-234.04z" stroke="#fea500" stroke-width="13.856" stroke-linejoin="round" stroke-linecap="round" class="cEsZQnrx_0"></path><g><path d="M257.82 271.163q0 10.765-5.513 19.08-5.426 8.227-15.841 12.866-10.415 4.55-24.681 4.55-14.266 0-25.382-4.2-11.115-4.289-19.08-11.99l11.116-12.429q6.652 6.127 14.791 9.365 8.227 3.238 18.467 3.238 7.002 0 12.603-2.188 5.69-2.275 9.015-6.651 3.413-4.376 3.413-10.678 0-5.426-2.188-9.102t-7.527-6.564q-5.338-2.889-15.053-5.777-13.391-4.026-21.88-8.752-8.403-4.726-12.779-11.29-4.288-6.652-4.288-15.929 0-9.627 5.338-17.067 5.427-7.439 14.88-11.465 9.451-4.113 21.267-4.113 12.69 0 22.58 3.675 9.978 3.676 17.855 10.853l-10.678 12.078q-6.214-5.426-13.478-8.052-7.265-2.626-15.054-2.626-9.715 0-15.841 4.026-6.04 4.026-6.04 11.553 0 4.814 2.539 8.052 2.625 3.238 8.577 6.04 5.951 2.8 17.154 6.126 11.378 3.413 19.08 7.789 7.702 4.289 12.165 11.553 4.464 7.177 4.464 18.03z" fill="#fea500" stroke-width="0" class="cEsZQnrx_1"></path></g><g><path d="M336.3 261.862q0 20.305-12.691 30.108-12.603 9.714-34.484 9.714H274.51v43.06h-20.305V223.966h33.521q23.28 0 35.884 9.54 12.69 9.453 12.69 28.357zm-21.356.175q0-22.843-25.906-22.843h-14.529v47H289.3q12.253 0 18.905-5.602 6.74-5.602 6.74-18.555z" fill="#fea500" stroke-width="4.366" class="cEsZQnrx_2"></path></g><path d="M53.316 139.02l65.385 37.75L256 97.5V22M256 490.078V414.5l137.23-79.23 65.454 37.789" fill="none" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round" class="cEsZQnrx_3"></path><path d="M256 22v75.5l137.3 79.27 65.384-37.75zM256 490.004V414.5l-137.23-79.23-65.454 37.789z" fill="#fea500" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round" class="cEsZQnrx_4"></path></svg>
-    </div>
-  </div>
-</div>
-
-{{ content | safe }}

src/_includes/layouts/service.njk

@@ -0,0 +1,31 @@
+---
+layout: base.njk
+---
+
+{% if service %}
+    <p class="small"><a href="/{{locale}}/services/">{{ strings.service.overview }}</a></p>
+    <h1 class="clearfix"><i class="{{service.icon}}"></i> {{title}} <a href="https://status.sp-codes.de" class="float-end"><img alt="{{strings.state.title}}" src="https://status.sp-codes.de/api/badge/{{service.status}}/status?label={{strings.state.title}}&upLabel={{strings.state.operational}}&downLabel={{strings.state.outage}}&maintenanceLabel={{strings.state.maintenance}}"></a></h1>
+
+    <div class="row">
+        <div class="col-lg-8 col-12">
+            {{ content | safe }}
+        </div>
+        <div class="col-lg-4 col-12">
+            {% for card in service.cards %}
+            <div class="tab-card{% if card.ossrox %} ossrox{% endif %}">
+                {% if card.ossrox %}
+                <a href="{{ card.ossrox.url }}" class="link"></a>
+                <div class="title"><img class="ossrox" src="/img/ossrox-white.svg" alt="Ossrox"></div>
+                {% else %}
+                <div class="title"><h2 class="text-center fw-bold">{{ card.title[locale] }}</h1></div>
+                {% endif %}
+                <div class="card">
+                    {{ card.content[locale] | safe }}
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+{% else %}
+    Service not found
+{% endif %}

src/_includes/layouts/services.njk

@@ -1,10 +0,0 @@
----
-layout: base.njk
----
-<a class="float-end mt-3" href="https://status.sp-codes.de" target="_blank"><strong><i class="i-heartbeat me-2"></i>Status</strong></a>
-
-{{ content | safe }}
-
-<div class="row justify-content-center">
-  {% include "services-extended.html" %}
-</div>

src/_includes/logo-animated.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><linearGradient id="a"><stop offset="0" stop-color="#fea500"></stop><stop offset="1" stop-color="#fea500" stop-opacity="0"></stop></linearGradient></defs><path d="M256 22l202.684 117.02v234.039L256 490.079 53.316 373.058v-234.04z" stroke="#fea500" stroke-width="13.856" stroke-linejoin="round" stroke-linecap="round" class="cEsZQnrx_0"></path><g><path d="M257.82 271.163q0 10.765-5.513 19.08-5.426 8.227-15.841 12.866-10.415 4.55-24.681 4.55-14.266 0-25.382-4.2-11.115-4.289-19.08-11.99l11.116-12.429q6.652 6.127 14.791 9.365 8.227 3.238 18.467 3.238 7.002 0 12.603-2.188 5.69-2.275 9.015-6.651 3.413-4.376 3.413-10.678 0-5.426-2.188-9.102t-7.527-6.564q-5.338-2.889-15.053-5.777-13.391-4.026-21.88-8.752-8.403-4.726-12.779-11.29-4.288-6.652-4.288-15.929 0-9.627 5.338-17.067 5.427-7.439 14.88-11.465 9.451-4.113 21.267-4.113 12.69 0 22.58 3.675 9.978 3.676 17.855 10.853l-10.678 12.078q-6.214-5.426-13.478-8.052-7.265-2.626-15.054-2.626-9.715 0-15.841 4.026-6.04 4.026-6.04 11.553 0 4.814 2.539 8.052 2.625 3.238 8.577 6.04 5.951 2.8 17.154 6.126 11.378 3.413 19.08 7.789 7.702 4.289 12.165 11.553 4.464 7.177 4.464 18.03z" fill="#fea500" stroke-width="0" class="cEsZQnrx_1"></path></g><g><path d="M336.3 261.862q0 20.305-12.691 30.108-12.603 9.714-34.484 9.714H274.51v43.06h-20.305V223.966h33.521q23.28 0 35.884 9.54 12.69 9.453 12.69 28.357zm-21.356.175q0-22.843-25.906-22.843h-14.529v47H289.3q12.253 0 18.905-5.602 6.74-5.602 6.74-18.555z" fill="#fea500" stroke-width="4.366" class="cEsZQnrx_2"></path></g><path d="M53.316 139.02l65.385 37.75L256 97.5V22M256 490.078V414.5l137.23-79.23 65.454 37.789" fill="none" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round" class="cEsZQnrx_3"></path><path d="M256 22v75.5l137.3 79.27 65.384-37.75zM256 490.004V414.5l-137.23-79.23-65.454 37.789z" fill="#fea500" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round" class="cEsZQnrx_4"></path></svg>

src/_includes/profiles.html

@@ -1,44 +1,26 @@
-<div class="d-flex justify-content-center flex-wrap my-3 contact-links">
-    <div class="m-2"><a href="mailto:mail@sp-codes.de">
-        <span class="d-none d-md-inline-block i-envelope i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-envelope i-2x i-fw"></span>
+<div class="d-flex flex-wrap gap-3 my-3 contact-links justify-content-center justify-content-sm-start">
+    <div><a href="mailto:mail@sp-codes.de">
+        <span class="i-envelope i-2x i-fw"></span>
     </a></div>
-    <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
-        <span class="d-none d-md-inline-block i-matrix i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-matrix i-2x i-fw"></span>
+    <div><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de">
+        <span class="i-matrix i-2x i-fw"></span>
     </a></div>
-    <div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p">
-        <span class="d-none d-md-inline-block i-mastodon i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-mastodon i-2x i-fw"></span>
+    <div><a rel="me" href="https://social.sp-codes.de/@samuel_p">
+        <span class="i-mastodon i-2x i-fw"></span>
     </a></div>
-    <div class="m-2"><a rel="me" href="https://www.xing.com/profile/Samuel_Philipp">
-        <span class="d-none d-md-inline-block i-xing i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-xing i-2x i-fw"></span>
+    <div><a rel="me" href="https://www.xing.com/profile/Samuel_Philipp">
+        <span class="i-xing i-2x i-fw"></span>
     </a></div>
-    <div class="m-2"><a rel="me" href="https://www.linkedin.com/in/samuel-philipp">
-        <span class="d-none d-md-inline-block i-linkedin i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-linkedin i-2x i-fw"></span>
+    <div><a rel="me" href="https://www.linkedin.com/in/samuel-philipp">
+        <span class="i-linkedin i-2x i-fw"></span>
     </a></div>
-    <div class="m-2"><a href="https://git.sp-codes.de/samuel-p">
-        <span class="d-none d-md-inline-block i-git i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-git i-2x i-fw"></span>
+    <div><a href="https://git.sp-codes.de/samuel-p">
+        <span class="i-git i-2x i-fw"></span>
     </a></div>
-    <div class="m-2"><a href="https://github.com/samuel-p">
-        <span class="d-none d-md-inline-block i-github i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-github i-2x i-fw"></span>
+    <div><a href="https://github.com/samuel-p">
+        <span class="i-github i-2x i-fw"></span>
     </a></div>
-    <div class="m-2"><a href="https://stackoverflow.com/users/9662601/samuel-p">
-        <span class="d-none d-md-inline-block i-stackoverflow i-4x i-fw"></span>
-        <span class="d-inline-block d-md-none i-stackoverflow i-2x i-fw"></span>
+    <div><a href="https://stackoverflow.com/users/9662601/samuel-p">
+        <span class="i-stackoverflow i-2x i-fw"></span>
     </a></div>
 </div>
-
-<div class="d-flex justify-content-center mb-3">
-    <div class="lead text-center">
-        {% if locale == 'de' %}
-        <a href="https://samuel-philipp.de">samuel-philipp.de</a>
-        {% elseif locale == 'en' %}
-        <a href="https://samuel-philipp.com">samuel-philipp.com</a>
-        {% endif %}
-    </div>
-</div>

src/_includes/services-simple.html

@@ -1,15 +0,0 @@
-{%- for service in services %}
-<div class="col-12 col-md-6 p-3">
-    <div class="card service flat">
-        <a class="link" href="/{{locale}}/services{% if service.beta != true %}/{{service.id}}{% endif %}"></a>
-        <div class="inner" href="/{{locale}}/services{% if service.beta != true %}/{{service.id}}{% endif %}">
-            {% if service.beta == true %}
-            <div class="beta">TEST-PHASE</div>
-            {% endif %}
-            <i class="{{service.icon}} i-2x i-fw"></i>
-            <h2 class="mt-2">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
-                    class="i-external-link"></i></a>{% endif %}</h2>
-        </div>
-    </div>
-</div>
-{%- endfor %}

src/_includes/services.html

@@ -12,7 +12,7 @@
             {% if service.status %}
             <div class="mb-2">
                 <a href="https://status.sp-codes.de" target="_blank">
-                    <img alt="{{strings.state[locale]}}" src="https://status.sp-codes.de/api/badge/{{service.status}}/status?label={{strings.state[locale]}}&upLabel={{strings.operational[locale]}}&downLabel={{strings.outage[locale]}}&maintenanceLabel={{strings.maintenance[locale]}}">
+                    <img alt="{{strings.state.title}}" src="https://status.sp-codes.de/api/badge/{{service.status}}/status?label={{strings.state.title}}&upLabel={{strings.state.operational}}&downLabel={{strings.state.outage}}&maintenanceLabel={{strings.state.maintenance}}">
                 </a>
             </div>
             {% endif %}

src/de/all-donations.html

@@ -2,6 +2,7 @@
 layout: base.njk
 key: all-donations
 title: Unterstützen
+summary: Unterstütze sp-codes mit einer Spende – hilf mit, die Dienste dauerhaft für die Community bereitstellen zu können.
 ---
 <h1><i class="i-hand-holding-heart"></i> Alle Spenden</h1>
 

src/de/articles.html

@@ -1,34 +0,0 @@
----
-layout: base.njk
-key: articles
-title: Artikel
-eleventyNavigation:
-  key: articles
-  title: Artikel
-  icon: i-book
-  order: 5
----
-
-<h1><i class="i-book"></i> Artikel</h1>
-
-<p class="mb-5">Hier findest du eine Übersicht aller Artikel, die ich auf dieser Webseite veröffentlicht habe.</p>
-
-{% set tags = ['Matrix'] %}
-
-{%- for tag in tags %}
-<h3>Artikel zu {{tag}}:</h3>
-<ul class="mb-5">
-    {%- for post in collections[ tag ] %}
-    <li>
-        <a href="{{ post.url | url }}">
-            {{ post.data.title }}
-        </a>
-    </li>
-    {%- endfor %}
-</ul>
-{%- endfor %}
-
-<p class="mb-5">Gelegentlich kann es sein, dass ich die Zeit finde, einen neuen Artikel zu schreiben. Um keinen zu verpassen, folge
-    mir gerne auf Mastodon. Dort werde ich neue Artikel oder Aktualisierungen bereits veröffentlichter Artikel posten.</p>
-
-{% include "profiles.html" %}

src/de/contact.html

@@ -2,6 +2,7 @@
 layout: base.njk
 key: contact
 title: Kontakt
+summary: Kontaktinformationen zu Admins oder Moderation von sp-codes.
 eleventyNavigation:
   key: contact
   title: Kontakt
@@ -12,32 +13,52 @@ eleventyNavigation:
 <p>Du möchtest mit mir in Kontakt treten, mir einen Fehler mitteilen, hast eine Frage zu einem Dienst oder möchtest
     mich unterstützen? Schick mir gerne deine Nachricht auf einem der folgenden Wege. Ich freue mich von dir zu
     hören.</p>
-<div class="row justify-content-center">
+<div class="row justify-content-center contact-links">
     <div class="col-12 col-md-10 col-lg-8">
         <a class="card mb-3 d-flex align-items-center text-decoration-none" href="mailto:mail@sp-codes.de">
-            <div class="pr-3"><span class="i-envelope text-foreground i-fw i-4x"></span></div>
+            <div class="pr-3"><span class="i-envelope i-fw i-4x"></span></div>
             <div>Schicke mir eine E-Mail an <strong>mail@sp-codes.de</strong></div>
         </a>
         <a class="card mb-3 d-flex align-items-center text-decoration-none"
            href="https://social.sp-codes.de/@samuel_p">
-            <div class="pr-3"><span class="i-mastodon text-foreground i-fw i-4x"></span></div>
+            <div class="pr-3"><span class="i-mastodon i-fw i-4x"></span></div>
             <div>Folge mir auf Mastodon oder schicke mir dort eine Nachricht an
                 <strong>@samuel_p@social.sp-codes.de</strong></div>
         </a>
         <a class="card mb-3 d-flex align-items-center text-decoration-none"
-           href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
-            <div class="pr-3"><span class="i-matrix text-foreground i-fw i-4x"></span></div>
+           href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de">
+            <div class="pr-3"><span class="i-matrix i-fw i-4x"></span></div>
             <div>Schreibe mir auf Matrix an <strong>@samuel-p:matrix.sp-codes.de</strong></div>
         </a>
         <a class="card mb-3 d-flex align-items-center text-decoration-none"
            href="https://blabber.im/i/samuel-p/dismail.de">
-            <div class="pr-3"><span class="i-xmpp text-foreground i-fw i-4x"></span></div>
+            <div class="pr-3"><span class="i-xmpp i-fw i-4x"></span></div>
             <div>Schreibe mir auf XMPP an <strong>samuel-p@dismail.de</strong></div>
         </a>
         <a class="card mb-3 d-flex align-items-center text-decoration-none"
            href="https://threema.id/YSCU6F6U">
-            <div class="pr-3"><span class="i-threema text-foreground i-fw i-4x"></span></div>
+            <div class="pr-3"><span class="i-threema i-fw i-4x"></span></div>
             <div>Schreibe mir auf Threema an die ID <strong>YSCU6F6U</strong></div>
         </a>
     </div>
 </div>
+
+<p>Sollte ich einmal nicht erreichbar sein, melde dich gerne im Matrix-Chat oder nutze die Verteiler-Adressen, die auch
+    an meine Moderatoren weitergeleitet werden.</p>
+<div class="row justify-content-center contact-links">
+    <div class="col-12 col-md-10 col-lg-8">
+        <a class="card mb-3 d-flex align-items-center text-decoration-none"
+           href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">
+            <div class="pr-3"><span class="i-matrix i-fw i-4x"></span></div>
+            <div><strong>#sp-codes:matrix.sp-codes.de</strong></div>
+        </a>
+        <a class="card mb-3 d-flex align-items-center text-decoration-none" href="mailto:help@sp-codes.de">
+            <div class="pr-3"><span class="i-envelope i-fw i-4x"></span></div>
+            <div><strong>help@sp-codes.de</strong></div>
+        </a>
+        <a class="card mb-3 d-flex align-items-center text-decoration-none" href="mailto:abuse@sp-codes.de">
+            <div class="pr-3"><span class="i-envelope i-fw i-4x"></span></div>
+            <div><strong>abuse@sp-codes.de</strong></div>
+        </a>
+    </div>
+</div>

src/de/de.json

@@ -1,3 +1,46 @@
 {
-  "locale": "de"
+  "locale": "de",
+  "strings": {
+    "menu": {
+      "title": "Menü",
+      "imprint": "Impressum",
+      "privacy": "Datenschutz",
+      "code": "Code",
+      "stats": "Statistiken"
+    },
+    "state": {
+      "title": "Status",
+      "operational": "Online",
+      "outage": "Ausfall",
+      "maintenance": "Wartung"
+    },
+    "donations": {
+      "supporters": "Unterstützende",
+      "date": "Datum",
+      "amount": "Betrag",
+      "via": "Via",
+      "from": "Von",
+      "banktransfer": "Überweisung",
+      "opencollective": "Open Collective",
+      "total": "Gesamt",
+      "name": "Name",
+      "type": "Typ",
+      "provider": "Anbieter",
+      "location": "Standort",
+      "month": "Monat",
+      "year": "Jahr"
+    },
+    "service": {
+      "overview": "Zurück zur Übersicht"
+    },
+    "article": {
+      "seriesParts": "Alle Teile dieser Serie",
+      "relatedService": "Zugehöriger Dienst",
+      "questions": "Du hast eine Frage dazu?",
+      "questionsContent": "<p>Komm gerne in der Matrix-Gruppe vorbei und lass uns diskutieren. Ich freue mich auf dein Feedback!</p><a href=\"https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de\">#sp-codes:matrix.sp-codes.de</a>",
+      "aboutMe": "Über mich",
+      "aboutMeContent": "<p>Mein Name ist Samuel Philipp und ich bin ein Software Engineer aus Magdeburg. In meiner Freizeit hoste ich verschiedene freie <a href=\"/de/services/\">Dienste</a>. Hier schreibe ich Artikel rund um Sicherheit und Datenschutz.</p><a href=\"https://samuel-philipp.de\">Mehr erfahren</a>",
+      "yourOpinion": "Schreib mir deine Meinung"
+    }
+  }
 }

src/de/donate.html

@@ -2,6 +2,7 @@
 layout: base.njk
 key: donate
 title: Unterstützen
+summary: Unterstütze sp-codes mit einer Spende – hilf mit, die Dienste dauerhaft für die Community bereitstellen zu können.
 eleventyNavigation:
   key: donate
   title: Unterstützen
@@ -11,25 +12,25 @@ eleventyNavigation:
 <h1><i class="i-hand-holding-heart"></i> Unterstützen</h1>
 
 <p>Alle öffentlichen Dienste sind kostenfrei nutzbar. Wenn du dich trotzdem an den Kosten für die Server-Infrastruktur
-    beteiligen oder mir eine kleine Anerkennung für meinen Blog zukommen lassen willst, kannst du mich über die
+    beteiligen oder mir eine kleine Anerkennung zukommen lassen willst, kannst du mich über die
     folgenden Wege unterstützen<sup>1</sup>:</p>
 
 <div class="row justify-content-center mb-5">
     <div class="col-12 col-md-10 col-lg-8">
         <div class="card mb-3">
             <h2><i class="i-comments i-fw m-2"></i>Empfehlen</h2>
-            <div>Gerne darfst du meine Dienste und meine Blog-Beiträge weiter empfehlen. Ich freue mich sehr, wenn ich
+            <div>Gerne darfst du meine Dienste weiterempfehlen. Ich freue mich sehr, wenn ich
                 euch damit eine Freude machen kann.
             </div>
         </div>
         <div class="card mb-3">
             <h2><i class="i-credit-card i-fw m-2"></i>Banküberweisung</h2>
-            <div>Wenn Du mir etwas überweisen willst, schreib mir einfach eine kurze <a href="/{{locale}}/contact">Nachricht</a>.
+            <div>Wenn du mir etwas überweisen willst, schreib mir einfach eine kurze <a href="/{{locale}}/contact">Nachricht</a>.
                 Ich schicke dir dann schnellstmöglich meine Bankverbindung zu. Ganz besonders freue ich mich auch über
                 einen Dauerauftrag.
                 <div class="mt-3 text-center">
-                    <img alt="Banküberweisung {{ strings.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | banktransfers }}-active">
+                    <img alt="Banküberweisung {{ strings.donations.supporters }}"
+                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters }}-{{ donations | banktransfers }}-active">
                 </div>
             </div>
         </div>
@@ -38,8 +39,8 @@ eleventyNavigation:
             <div>Wer mir etwas Bargeld zukommen lassen möchte, darf das gerne an die Adresse aus dem <a
                     href="/{{locale}}/imprint">Impressum</a> senden.
                 <div class="mt-3 text-center">
-                    <img alt="Bargeld {{ strings.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | cash }}-inactive">
+                    <img alt="Bargeld {{ strings.donations.supporters }}"
+                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters }}-{{ donations | cash }}-inactive">
                 </div>
             </div>
         </div>

src/de/imprint.html

@@ -1,6 +1,7 @@
 ---
 layout: base.njk
 title: Impressum
+summary: Impressum von sp-codes – Informationen zu Rechtsinhaber und Kontaktangaben.
 ---
 <h1><i class="i-info-circle"></i> Impressum</h1>
 <div class="mb-4">
@@ -14,14 +15,14 @@ title: Impressum
     <h2>Kontakt</h2>
     <p>
         <strong>E-Mail-Adresse:</strong> mail@sp-codes.de<br>
-        <strong>Weitere Kontaktmöglichkeiten:</strong>  <a href="/{{locale}}/contact">https://sp-codes.de/{{locale}}/contact</a><br>
+        <strong>Weitere Kontaktmöglichkeiten:</strong>  <a href="/{{locale}}/contact">{{ site.url }}/{{locale}}/contact</a><br>
     </p>
 </div>
 <div class="mb-3 pt-4 border-top">
     <h2>Domains</h2>
     <ul>
         <li><a href="https://samuel-philipp.de">samuel-philipp.de</a></li>
-        <li><a href="https://sp-codes.de">sp-codes.de</a></li>
+        <li><a href="{{ site.url }}">sp-codes.de</a></li>
         <li><a href="https://sp-magic.de">sp-magic.de</a></li>
     </ul>
 </div>

src/de/index.html

@@ -1,56 +1,83 @@
 ---
-layout: home.njk
+layout: base.njk
 key: home
 title: Home
+summary: sp-codes stellt verschiedene Open-Source-Tools zur allgemeinen Verfügung. Alle Dienste sind kostenlos und werbefrei.
 eleventyNavigation:
   key: home
   title: Home
   icon: i-home
 ---
-<div class="row justify-content-center py-4 border-top">
-    <div class="col-lg-8 col-md-10 col-12">
-        <h1 class="heading">Willkommen bei sp&#8209;codes!</h1>
-        <p class="lead text-center mb-2">
-            Schön, dass du hergefunden hast. Mein Name ist Samuel Philipp und ich bin ein Software Engineer aus
-            Magdeburg. Auf dieser Seite findest du Informationen über mich und eine Übersicht über die von mir
-            bereitgestellten Dienste. Schau dich gerne um oder nutze die verschiedenen Tools.
+<div class="row py-lg-5">
+    <div class="col-12 col-lg-4 mb-4 mb-lg-0 fill-col-inner">
+        <div class="logo huge animated">
+            {% include "logo-animated.html" %}
+        </div>
+    </div>
+    <div class="col-12 col-lg-8">
+        <h1>Willkommen bei sp&#8209;codes!</h1>
+        <p class="mb-2">
+            Schön, dass du hergefunden hast. sp-codes stellt verschiedene Open-Source-Tools zur allgemeinen Verfügung.
+            Alle Dienste sind kostenlos und werbefrei. Wenn du zum weiteren Fortbestand des Projekts beitragen willst,
+            freue ich mich über deine Unterstützung! Schau dich gerne um und entdecke das Angebot!
         </p>
-        <p class="lead text-center mb-2">
-            Seit April 2022 biete ich mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> auch professionelles
-            Hosting von Open-Source-Tools für Unternehmen, Privatpersonen und andere Organisationen an. Solltest du
-            daran Interesse haben, schau gerne auf unserer Webseite vorbei oder schreibe mir eine Nachricht.
+        <h5 class="mb-2 fw-bold">Werde Teil unserer tollen Community!</h5>
+        <p class="mb-2">
+            Für alle, die die Dienste nutzen und Interessierte gibt es einen öffentlichen Matrix-Raum als Austauschort
+            für Fragen, Ideen und Probleme: <strong><a
+                href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a></strong>
         </p>
-        <p class="lead text-center mb-2">
+        <p class="mb-2">
+            Um immer auf dem Laufenden zu bleiben, folge sp-codes auf Mastodon: <strong><a rel="me"
+                                                                                           href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
+        </p>
+    </div>
+</div>
+
+<div class="row py-5">
+    <div class="col-12 col-lg-4 mb-4 mb-lg-0 fill-col-inner order-lg-1">
+        <div class="me-profile">
+            <img src="/img/samuel-1024.jpg" alt="Samuel Philipp">
+        </div>
+    </div>
+    <div class="col-12 col-lg-8">
+        <h1>Über mich</h1>
+        <p class="mb-2">
+            Mein Name ist Samuel Philipp, ich bin Full-Stack-Developer und SysAdmin. In meiner Freizeit betreibe ich
+            alle angebotenen Dienste von sp-codes. Wenn du mehr über mich erfahren möchtest, schau gerne auf meiner
+            persönlichen Webseite vorbei:
+            <a href="https://samuel-philipp.de">samuel-philipp.de</a>
+        </p>
+        <p class="mb-2">
+            Du hast einen Fehler gefunden, Verbesserungsvorschläge oder eine andere Frage? Nimm gerne über eine der
+            folgenden Plattformen Kontakt mit mir auf. Ich freue mich auf deine Nachricht!
+        </p>
+        <p class="mb-2">
+            {% include "profiles.html" %}
+        </p>
+        <hr/>
+        <p class="mb-3">
+            Mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> biete ich professionelles Hosting
+            von Open-Source-Tools für Unternehmen, Privatpersonen und andere Organisationen an. Wenn du daran
+            interessiert bist, schau doch gerne auf unserer Webseite vorbei oder schreibe mir eine Nachricht.
+        </p>
+        <p class="text-center">
             <a href="https://ossrox.org" target="_blank">
-                <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
+                <picture>
+                    <source srcset="/img/ossrox.svg" media="(prefers-color-scheme: light)">
+                    <img class="ossrox-logo" src="/img/ossrox-white.svg" alt="Ossrox">
+                </picture>
             </a>
         </p>
     </div>
 </div>
-<div class="row justify-content-center py-4 border-top">
-    <div class="col-lg-8 col-md-10 col-12">
-        <h1 class="heading"><a href="/{{locale}}/services">Dienste</a></h1>
-        <p class="lead text-center mb-2">
-            Für die Nutzer:innen der Dienste und Interessierte gibt es einen öffentlichen Matrix-Raum als
-            Austauschort für Fragen, Ideen und Probleme: <strong><a
-                href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a></strong>
-        </p>
-        <p class="lead text-center mb-2">
-            Folge sp-codes auf Mastodon: <strong><a rel="me"
-                                                    href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
-        </p>
+
+<div class="row justify-content-center py-lg-5">
+    <div class="col">
+        <h1 class="text-center">Tool-Übersicht</h1>
+        <p class="text-center"><a href="/{{locale}}/services">Alle Dienste anzeigen</a></p>
         <div class="row justify-content-center">
-            {% include "services-simple.html" %}
+            {% include "services.html" %}
         </div>
     </div>
 </div>
-<div class="row justify-content-center pt-4 border-top">
-    <div class="col-lg-8 col-md-10 col-12">
-        <h1 class="heading">Profile & Kontakt</h1>
-        <p class="lead text-center mb-2">
-            Du hast einen Fehler gefunden, Verbesserungsvorschläge oder eine andere Frage? Nimm gerne
-            über eine der folgenden Plattformen Kontakt mit mir auf. Ich freue mich auf deine Nachricht!
-        </p>
-    </div>
-</div>
-{% include "profiles.html" %}

src/de/privacy.html

@@ -1,6 +1,7 @@
 ---
 layout: base.njk
 title: Datenschutzerklärung
+summary: Datenschutzerklärung von sp-codes – Informationen zur Datenverarbeitung.
 ---
 <h1><i class="i-user-secret"></i> Datenschutzerklärung</h1>
 <div class="mb-3">
@@ -13,8 +14,8 @@ title: Datenschutzerklärung
     <p>
         <strong>E-Mail-Adresse:</strong> mail@sp-codes.de<br>
         <strong>Kontaktmöglichkeiten:</strong> <a
-            href="/{{locale}}/contact">https://sp-codes.de/{{locale}}/contact</a><br>
-        <strong>Impressum:</strong> <a href="/{{locale}}/imprint">https://sp-codes.de/{{locale}}/imprint</a>
+            href="/{{locale}}/contact">{{ site.url }}/{{locale}}/contact</a><br>
+        <strong>Impressum:</strong> <a href="/{{locale}}/imprint">{{ site.url }}/{{locale}}/imprint</a>
     </p>
 </div>
 <div class="mb-3">

src/de/services.html

@@ -1,30 +1,32 @@
 ---
-layout: services.njk
+layout: base.njk
 key: services
 title: Dienste
+summary: sp-codes stellt verschiedene Open-Source-Tools zur allgemeinen Verfügung. Alle Dienste sind kostenlos und werbefrei.
 eleventyNavigation:
   key: services
   title: Dienste
   icon: i-server
   order: 2
 ---
+<a class="float-end mt-3" href="https://status.sp-codes.de" target="_blank"><strong><i class="i-heartbeat me-2"></i>Status</strong></a>
 <h1><i class="i-server"></i> Dienste</h1>
-<p>In meiner Freizeit stelle ich verschiedene quelloffene Dienste für die freie Nutzung bereit. Hier findest du eine
-    Übersicht der einzelnen Services und jeweils eine kurze Beschreibung. Alle Services werden in Deutschland
-    gehostet. Fühl dich frei, davon Gebrauch zu machen.</p>
+<p>In meiner Freizeit stelle ich eine Vielzahl von Open-Source-Diensten zur Verfügung, die kostenlos und werbe-frei
+    genutzt werden können. Hier findest du einen Überblick über die verschiedenen Services sowie entsprechende
+    Beschreibungen und Anleitungen zur Nutzung. Alle Dienste werden in Deutschland gehostet. Du bist herzlich
+    eingeladen, sie zu nutzen.</p>
 
-<p>Für die Nutzer:innen der Dienste gibt es einen öffentlichen Matrix-Raum als Austauschort für Fragen, Ideen und
-    Probleme. Komm gerne vorbei, wenn du einen der hier aufgelisteten Dienste nutzt oder einfach so mal vorbeischauen
-    willst:</p>
+<p>Da die Dienste privat angeboten werden, kann leider keine dauerhafte Bereitstellung garantiert werden. Sollte ein
+    Dienst eingestellt werden, wird dies für Dienste außerhalb der Test-Phase mindestens drei Monate im Voraus
+    angekündigt.</p>
+
+<p>Für alle, die die Dienste nutzen und Interessierte, gibt es einen öffentlichen Matrix-Raum als Austauschort für
+    Fragen, Ideen und Probleme. Komm gerne vorbei, wenn du einen der hier aufgelisteten Dienste nutzt oder einfach so
+    mal vorbeischauen willst:</p>
 
 <h3 class="text-center"><a href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
 </h3>
 
-<div class="card text-center mb-3">
-    <p>Du willst dein eigenes Open-Source-Projekt umsetzen, um deine digitale Souveränität zurückzuerlangen? Gerne stehe
-        ich dir dafür persönlich mit meiner Firma zur Seite. Schau gerne auf <a href="https://ossrox.org" target="_blank">ossrox.org</a>
-        vorbei oder schreib mir eine Nachricht.</p>
-    <a href="https://ossrox.org" target="_blank">
-        <img src="/img/ossrox.svg" alt="Ossrox" width="250px">
-    </a>
+<div class="row justify-content-center">
+    {% include "services.html" %}
 </div>

src/de/services/connectivitycheck.md

@@ -1,77 +1,11 @@
 ---
-layout: base.njk
-key: connectivitycheck
-title: Captive Portal Check
+layout: service.njk
+service: connectivitycheck
 ---
-# <i class="i-wifi"></i> Captive Portal Check
-
 Ein Captive Portal ist eine Anmeldeseite in öffentlichen WLAN-Netzwerken, um den Internet-Zugriff an die Zustimmung bestimmter Nutzungsregeln zu binden. Wenn du in einem öffentlichen Netzwerk eine Anmeldeseite angezeigt bekommst, nutzt dein Gerät dafür einen Captive Portal Check. Dieser ermöglicht es dem Gerät, herauszufinden, ob du einen direkten Internetzugang hast oder nicht. Unter Android wird hierfür beispielsweise eine Anfrage an einen Google-Server gestellt.
 
-__Seit Mitte 2019 stelle ich einen freien Captive Portal Check zur Verfügung: [https://connectivitycheck.sp-codes.de/generate204](https://connectivitycheck.sp-codes.de/generate204)__ Gerne kannst du ihn nutzen, wenn du möchtest.
-
-## Einrichtung in Android
-
-Um den Captive Portal Check in Android zu ändern, benötigt man eine Terminal-App oder eine Verbindung über ADB zu einem Computer. 
-
-Nun können die folgenden Befehle mit der jeweiligen Methode ausgeführt werden, um `http` zu verwenden:
-
-```
-# settings put global captive_portal_use_https 0
-# settings put global captive_portal_http_url "http://connectivitycheck.sp-codes.de/generate204"
-```
-
-
-Um `https` zu verwenden, müssen die beiden folgenden Befehle genutzt werden:
-
-
-```
-# settings put global captive_portal_use_https 1
-# settings put global captive_portal_https_url "https://connectivitycheck.sp-codes.de/generate204"
-```
-
-Eventuell musst du dein Gerät anschließend neu starten.
-
-Wenn du AFWall+ verwendest, musst du _[1000] Android-System_ und eventuell _[10040] CaptivePortalLogin_ Internetzugriff gewähren.
-
-## Einrichtung in Ubuntu
-
-Unter Ubuntu muss die Datei `/etc/NetworkManager/NetworkManager.conf` geändert werden. Füge die folgenden Zeilen hinzu oder passe sie entsprechend an:
-
-```
-[connectivity]
-uri=https://connectivitycheck.sp-codes.de/generate204
-```
-
-Starte den _network-manager_ neu:
-
-```
-sudo service network-manager restart
-```
-
-## Einrichtung in Fedora
-
-Unter Fedora muss die Datei `/etc/NetworkManager/NetworkManager.conf` geändert werden. Füge die folgenden Zeilen hinzu oder passe sie entsprechend an:
-
-```
-[connectivity]
-uri=https://connectivitycheck.sp-codes.de/generate204
-```
-
-Starte den _NetworkManager_ neu:
-
-```
-sudo service NetworkManager restart 
-```
-
-## Einrichtung in Firefox
-
-Tippe [about:config](about:config) in die Adresszeile von Firefox und suche anschließend nach `captivedetect.canonicalURL` und `network.connectivity-service`. Setze die URL-Werte auf `https://connectivitycheck.sp-codes.de/generate204`, die Domain-Werte auf `connectivitycheck.sp-codes.de`. Das war es schon.
-
 ## Weitere nützliche Links
 
 * [Captive Portal Wikipedia](https://de.wikipedia.org/wiki/Captive_Portal)
 * [Quellcode](https://git.sp-codes.de/samuel-p/connectivity-check)
 * [Docker Image](https://hub.docker.com/r/samuelph/connectivity-check)
-* [Setup on Android](https://android.stackexchange.com/a/186995/288049)
-* [Setup on Ubuntu](https://askubuntu.com/q/1167177/920103)
-* [Captive Portal Kuketz Blog](https://www.kuketz-blog.de/android-captive-portal-check-204-http-antwort-von-captiveportal-kuketz-de/)

src/de/services/connectivitycheck/setup.md

@@ -0,0 +1,77 @@
+---
+layout: article.njk
+service: connectivitycheck
+title: Einrichtung Captive Portal Check
+summary: In diesem Artikel erfährst du wie du einen eigenen Captive Portal Check in verschiedenen Umgebungen einrichten kannst.
+tags:
+  - Tutorial
+  - Captive Portal Check
+---
+
+# Einrichtung Captive Portal Check
+
+In diesem Artikel erfährst du wie du einen eigenen Captive Portal Check in verschiedenen Umgebungen einrichten kannst.
+
+## Android
+
+Um den Captive Portal Check in Android zu ändern, benötigt man eine Terminal-App oder eine Verbindung über ADB zu einem Computer.
+
+Nun können die folgenden Befehle mit der jeweiligen Methode ausgeführt werden, um `http` zu verwenden:
+
+```
+# settings put global captive_portal_use_https 0
+# settings put global captive_portal_http_url "http://connectivitycheck.sp-codes.de/generate204"
+```
+
+
+Um `https` zu verwenden, müssen die beiden folgenden Befehle genutzt werden:
+
+
+```
+# settings put global captive_portal_use_https 1
+# settings put global captive_portal_https_url "https://connectivitycheck.sp-codes.de/generate204"
+```
+
+Eventuell musst du dein Gerät anschließend neu starten.
+
+Wenn du AFWall+ verwendest, musst du _[1000] Android-System_ und eventuell _[10040] CaptivePortalLogin_ Internetzugriff gewähren.
+
+## Ubuntu
+
+Unter Ubuntu muss die Datei `/etc/NetworkManager/NetworkManager.conf` geändert werden. Füge die folgenden Zeilen hinzu oder passe sie entsprechend an:
+
+```
+[connectivity]
+uri=https://connectivitycheck.sp-codes.de/generate204
+```
+
+Starte den _network-manager_ neu:
+
+```
+sudo service network-manager restart
+```
+
+## Fedora
+
+Unter Fedora muss die Datei `/etc/NetworkManager/NetworkManager.conf` geändert werden. Füge die folgenden Zeilen hinzu oder passe sie entsprechend an:
+
+```
+[connectivity]
+uri=https://connectivitycheck.sp-codes.de/generate204
+```
+
+Starte den _NetworkManager_ neu:
+
+```
+sudo service NetworkManager restart 
+```
+
+## Firefox
+
+Tippe [about:config](about:config) in die Adresszeile von Firefox und suche anschließend nach `captivedetect.canonicalURL` und `network.connectivity-service`. Setze die URL-Werte auf `https://connectivitycheck.sp-codes.de/generate204`, die Domain-Werte auf `connectivitycheck.sp-codes.de`. Das war es schon.
+
+## Quellen
+
+* [Setup on Android](https://android.stackexchange.com/a/186995/288049)
+* [Setup on Ubuntu](https://askubuntu.com/q/1167177/920103)
+* [Captive Portal Kuketz Blog](https://www.kuketz-blog.de/android-captive-portal-check-204-http-antwort-von-captiveportal-kuketz-de/)

src/de/services/etherpad.md

@@ -1,15 +1,10 @@
 ---
-layout: base.njk
-key: etherpad
-title: Etherpad
+layout: service.njk
+service: etherpad
 ---
-# <i class="i-pencil-square"></i> Etherpad
-
 Etherpad ist eine webbasierte Kollaborationsplattform, die es Benutzern ermöglicht, Textdokumente in Echtzeit gemeinsam zu bearbeiten. Mehrere Benutzer können zeitgleich auf dasselbe Etherpad-Dokument zugreifen, Änderungen vornehmen und sehen, was Andere schreiben. Etherpad bietet eine einfache und effektive Möglichkeit für Teamarbeit, Brainstorming, gemeinsames Schreiben und vieles mehr, ohne dass dabei Versionskonflikte auftreten.
 
-Etherpad ist auch in Jitsi Meet eingebungen. So können während einem Meeting gemeinsame Notizen festgehalten werden.
-
-__Seit Ende 2020 betreibe ich Etherpad: [https://pad.sp-codes.de](https://pad.sp-codes.de)__ Gerne kannst du Etherpad auch für deine Notizen verwenden.
+Etherpad ist auch in Jitsi Meet eingebunden. So können während einem Meeting gemeinsame Notizen festgehalten werden.
 
 ## Weitere nützliche Links
 

src/de/services/forgejo.md

@@ -1,24 +1,16 @@
 ---
-layout: base.njk
-key: forgejo
-title: Forgejo
+layout: service.njk
+service: forgejo
 ---
-# <i class="i-git"></i> Forgejo
-
-Forgejo ist eine einfache Code-Hosting-Plattform wie GitHub oder GitLab. Sie ist opensource und wird kontinuierlich weiterentwickelt. __Seit Ende 2019 betreibe ich eine eigene Forgejo Instanz, in der ich meine Projekte verwalte.__ So zum Beispiel auch diese Webseite. Schau dir gerne mal den Quelltext an und lass mir Feedback da.
-
-Zusätzlich zu Forgejo betreibe ich noch Woodpecker, eine Plattform, die Forgejo um viele Continuous Integration Funktionen erweitert und beispielsweise automatisierte Builds und Deploys ermöglicht.
+Forgejo ist eine einfache Code-Hosting-Plattform wie GitHub oder GitLab. Sie ist opensource und wird kontinuierlich weiterentwickelt. Ich nutze Forgejo selber sehr gerne, um meine eigenen Projekte verwalte. So zum Beispiel auch diese Webseite. Schau dir gerne mal den Quelltext an und lass mir Feedback da: [git.sp-codes.de/samuel-p/sp-codes.de](https://git.sp-codes.de/samuel-p/sp-codes.de)
 
 Schau gerne mal vorbei und melde dich an, falls du Lust hast, ein Projekt zu entwickeln. Die Registrierung ist seit März 2020 geöffnet.
 
-__Zu Forgejo geht's hier lang: [git.sp-codes.de](https://git.sp-codes.de)__
-
-__Wenn du bei Woodpecker vorbeischauen willst, geht das hier: [ci.sp-codes.de](https://ci.sp-codes.de)__
+## Server-Details
 
+Neben Forgejo betreibe ich auch Forgejo Actions, ein Addon, das die Platform um zahlreiche Continuous Integration Funktionen erweitert. Dadurch ist es möglich, Builds automatisiert zu erstellen und bereitzustellen. Forgejo Actions ermöglicht zudem automatisierte Tests durchzuführen. So können kontinuierlich Änderungen in Echtzeit überwacht und Fehler frühzeitig erkannt werden.
 
 ## Weitere nützliche Links
 
 * [Forgejo Webseite](https://forgejo.org/)
 * [Quellcode von Forgejo](https://codeberg.org/forgejo/forgejo)
-* [Woodpecker Webseite](https://woodpecker-ci.org/)
-* [Quellcode von Woodpecker](https://github.com/woodpecker-ci/woodpecker)

src/de/services/jitsi.md

@@ -1,26 +1,20 @@
 ---
-layout: base.njk
-key: jitsi
-title: Jitsi Meet
+layout: service.njk
+service: jitsi
 ---
-# <i class="i-users"></i> Jitsi Meet
+Jitsi-Meet ist eine Plattform für Videokonferenzen. Ohne Anmeldung können vollständig verschlüsselte Video-Chats gestartet werden. Zusätzlich bietet Jitsi-Meet die Möglichkeit den Bildschirm für die andere Teilnehmende freizugeben, neue Personen einfach per Link einzuladen und Nachrichten im integrierten Chat zu verschicken.
 
-Jitsi-Meet ist eine Plattform für Videokonferenzen. Ohne Anmeldung können vollständig verschlüsselte Video-Chats gestartet werden. Zusätzlich bietet Jitsi-Meet die Möglichkeit den Bildschirm für die anderen Teilnehmer:innen freizugeben, neue Benutzer:innen einfach per Link einzuladen und Nachrichten im integrierten Chat zu verschicken.
+Nutze die Instanz gerne mit anderen Leuten. Sollte es hier einmal nicht ganz rund laufen probiere gerne den _Jitsi Random Redirect_ aus. Dieser leitet dich auf eine zufällige Jitsi Instanz weiter: [jitsi.random-redirect.de](https://jitsi.random-redirect.de/)
 
-__Seit Juli 2020 betreibe ich eine eigene Jitsi-Meet Instanz. Du findest sie unter [jitsi.sp-codes.de](https://jitsi.sp-codes.de/).__
+## Server-Details
 
-Gerne darfst du die Instanz mit anderen Leuten nutzen.
+Jitsi bietet nicht nur die üblichen Funktionen anderer Videokonferenz-Tools wie die Änderung des Kamerahintergrunds, Rauschunterdrückung und Reaktionen, sondern auch einige zusätzliche Features.
 
-Wenn du einen eigenen Jitsi-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.
-
-<div class="text-center mb-3">
-    <a href="https://ossrox.org/store/jitsi" target="_blank">
-        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
-    </a>
-</div>
+Mit der bereitgestellten Jitsi-Meet Instanz können Meetings direkt auf Streaming-Plattformen wie YouTube oder PeerTube live übertragen werden. Darüber hinaus besteht die Möglichkeit, Web-Meetings lokal aufzuzeichnen. Während einer Konferenz kann man auch externe Videos gemeinsam anschauen. Dank der direkten Integration von Etherpad können während Meetings gemeinsame Notizen erstellt werden.
 
 ## Weitere nützliche Links
 
 * [Jitsi Webseite](https://jitsi.org/)
 * [Quellcode von Jitsi](https://github.com/jitsi/jitsi-meet)
 * [Liste öffentlicher Instanzen](https://github.com/jitsi/jitsi-meet/wiki/Jitsi-Meet-Instances)
+* [Jitsi Random Redirect](https://jitsi.random-redirect.de/)

src/de/services/mastodon.md

@@ -1,30 +1,16 @@
 ---
-layout: base.njk
-key: mastodon
-title: Mastodon
+layout: service.njk
+service: mastodon
 ---
-# <i class="i-mastodon"></i> Mastodon
-
 Mastodon ist ein verteilter Mikroblogging-Dienst, ähnlich wie Twitter. Allerdings basiert der Dienst nicht auf einer zentralen Plattform, sondern besteht aus vielen verschiedenen, dezentralen Instanzen, die von Privatpersonen, Vereinen oder sonstigen Stellen eigenverantwortlich betrieben werden. Dadurch machen sich die Nutzer:innen nicht von einem einzigen Anbieter abhängig, sondern können frei entscheiden, mit wem sie welche Informationen teilen.
 
-Da Mastodon auf offenen Web-Protokollen und freier, quelloffener Software basiert, kann auch mit anderen Diensten, wie Pleroma, PeerTube, Pixelfed, Friendica oder Hubzilla kommuniziert werden. Nutzer:innen können Text-, Bild-, Videonachrichten oder Umfragen also dienst- und serverübergreifend teilen.
+Da Mastodon auf offenen Web-Protokollen und freier, quelloffener Software basiert, kann auch mit anderen Diensten, wie Pleroma, PeerTube, Pixelfed, Friendica oder Hubzilla kommuniziert werden. Nutzende können Text-, Bild-, Videonachrichten oder Umfragen also dienst- und serverübergreifend teilen.
 
-__Seit Mai 2021 betreibe ich eine öffentliche Mastodon-Instanz: [social.sp-codes.de](https://social.sp-codes.de/)__
+Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf deine Nachricht an [@samuel_p@social.sp-codes.de](https://social.sp-codes.de/@samuel_p).
 
-Die Serverregeln und weitere Informationen kannst du gerne [hier](https://social.sp-codes.de/about/more) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf
-deine Nachricht an [@samuel_p@matrix.sp-codes.de](https://social.sp-codes.de/@samuel_p).
+## Server-Details
 
-<div class="text-center mb-3">
-<a class="card d-inline-block font-weight-bold" target="_blank" href="https://social.sp-codes.de/about">Jetzt registrieren</a>
-</div>
-
-Wenn du einen eigenen Mastodon-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.
-
-<div class="text-center mb-3">
-    <a href="https://ossrox.org/store/mastodon" target="_blank">
-        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
-    </a>
-</div>
+Die sp-codes Serverregeln und weitere Informationen kannst du gerne [hier](https://social.sp-codes.de/about) nachlesen. Dort findest du außerdem eine Übersicht, aller gemuteten und geblockten Server.
 
 ## Interessante Accounts
 

src/de/services/matrix.md

@@ -1,54 +1,22 @@
 ---
-layout: base.njk
-key: matrix
-title: Matrix
+layout: service.njk
+service: matrix
 ---
+[Matrix](https://matrix.org) ist eine moderne, quelloffene Software für dezentrale Kommunikation (wie E-Mail). Matrix bietet von Haus aus Sprach- und Videoanrufe, inklusive Ende-zu-Ende-Verschlüsselung und vieles mehr. Das Entscheidende ist, dass es nicht den einen Matrix-Server gibt, den alle Nutzende verwenden müssen, wie das beispielsweise bei WhatsApp, Telegram und vielen anderen verbreiteten Messengern der Fall ist.
 
-# <i class="i-comments"></i> Matrix
+Da Matrix dezentral funktioniert, können sich alle einen öffentlichen Server aussuchen oder ihren eigenen erstellen und trotzdem mit allen Personen kommunizieren, nicht nur mit denen, die den eigenen Server nutzen. Die verschickten Nachrichten werden so nur auf den beteiligten Servern gespeichert. Auch die Anrufe laufen nur über die beteiligten Server.
 
-[Matrix](https://matrix.org) ist eine moderne, quelloffene Software für dezentrale Kommunikation (wie E-Mail). Matrix
-bietet von Haus aus Sprach- und Videoanrufe, inklusive Ende-zu-Ende-Verschlüsselung und vieles mehr. Das Entscheidende
-ist, dass es nicht den einen Matrix-Server gibt, den alle Nutzer:innen verwenden müssen, wie das beispielsweise bei
-WhatsApp, Telegram und vielen anderen verbreiteten Messengern der Fall ist.
+Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf deine Nachricht an <a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de" target="_blank">@samuel-p:matrix.sp-codes.de</a>.
 
-Da Matrix dezentral funktioniert, können sich die Nutzer:innen einen öffentlichen Server aussuchen oder ihren eigenen
-erstellen und trotzdem mit allen Matrix-Nutzern:innen kommunizieren, nicht nur mit denen des eigenen Servers. Die
-verschickten Nachrichten werden so nur auf den beteiligten Servern gespeichert. Auch die Anrufe laufen nur über die
-beteiligten Server.
+## Server-Details
 
-__Seit Anfang 2020 betreibe ich einen öffentlichen Matrix-Server: [matrix.sp-codes.de](https://matrix.sp-codes.de/) und eine öffentliche Element-Web Instanz: [chat.sp-codes.de](https://chat.sp-codes.de/)__
+Die sp-codes Serverregeln kannst du gerne [hier](https://matrix.sp-codes.de/_matrix/consent) nachlesen.
 
-Die Serverregeln kannst du gerne [hier](https://matrix.sp-codes.de/_matrix/consent) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf
-deine Nachricht an [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de).
+**Das Limit für Datei-Uploads liegt bei 100 MB**. Für größere Dateien nutze bitte einen File-Sharing Dienst.
 
-<div class="text-center mb-3">
-<a class="card d-inline-block font-weight-bold" target="_blank" href="https://chat.sp-codes.de/#/register">Jetzt registrieren</a>
-</div>
+Um die Performance des Servers dauerhaft aufrechterhalten zu können und Speicherplatz einzusparen, werden alte Nachrichten und Dateien automatisch gelöscht. **Nachrichten werden standardmäßig nach einem Jahr gelöscht.** In den Raumeinstellungen kannst du, je nach App, auch einen kürzeren Zeitraum einstellen. **Hochgeladene Dateien werden ein Jahr nach dem letzten Zugriff vom Server gelöscht.**
 
-Wenn du einen eigenen Matrix-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.
-
-<div class="text-center mb-3">
-    <a href="https://ossrox.org/store/matrix" target="_blank">
-        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
-    </a>
-</div>
-
-## Einstieg
-
-Auf meinem Blog findest du eine Artikelserie für einen einfachen Einstieg in Matrix:
-
-<div class="row justify-content-center">
-<div class="col-12 col-md-10 col-lg-8">
-<div class="card-list">
-<div class="card">
-<a href="/de/services/matrix/setup/part-1/">Teil 1: Werde Teil der Matrix</a>
-</div>
-<div class="card">
-<a href="/de/services/matrix/setup/part-2/">Teil 2: Sichere Chats mit Matrix</a>
-</div>
-</div>
-</div>
-</div>
+Der Matrix-Server unterstützt Sliding-Sync, ein Beta-Feature von Matrix, das die Synchronisation zwischen Client und Server erheblich verbessert. Clients wie Element X nutzen bereits diese Funktion.
 
 ## Warum Matrix?
 
@@ -73,9 +41,8 @@ Hier möchte ich ein paar Gründe nennen, warum ich Matrix nutze und vielen ande
 * [Verschiedene Apps](https://matrix.org/clients)
 * [Liste öffentlicher Räume](https://view.matrix.org/)
 * Listen mit öffentlichen Matrix-Servern
-    * [hello-matrix.net](https://www.hello-matrix.net/public_servers.php)
-    * [anchel.nl](https://publiclist.anchel.nl/)
-    * [the-federation.info](https://the-federation.info/protocol/matrix)
-    * [FossMessenger](https://fediverse.blog/~/FossMessenger/matrix-server)
+  * [joinmatrix.org](https://joinmatrix.org/servers)
+  * [hello-matrix.net](https://www.hello-matrix.net/public_servers.php)
+  * [the-federation.info](https://the-federation.info/protocol/matrix)
 * [Matrix FAQ](https://matrix.org/faq/)
 * [Account umziehen](https://ems.element.io/tools/matrix-migration)

src/de/services/matrix/setup/part-1.md

@@ -1,8 +1,10 @@
 ---
 layout: article.njk
-title: Werde Teil der Matrix - Matrix Teil 1
 service: matrix
+title: Werde Teil der Matrix - Matrix Teil 1
+summary: Erfahre Schritt für Schritt, wie du deinen eigenen Matrix Account einrichten kannst.
 series: matrix-setup
+order: 1
 tags:
   - Tutorial
   - Matrix
@@ -42,7 +44,7 @@ auch.) Die Matrix-ID sieht also folgendermaßen aus:
 
 In diesem Beitrag werde ich [matrix.sp-codes.de](https://matrix.sp-codes.de) als Home-Server verwenden. Gerne kannst du
 dich auch dort registrieren. Da ich selber diesen Server nutze, ist meine Matrix-ID also
-diese: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de)
+diese: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de)
 
 ## App wählen
 
@@ -124,7 +126,7 @@ das kann je nach Server-Auslastung ein bisschen dauern.
 
 Nachdem du nun deinen Account erstellt hast, ist es an der Zeit, mit deinen Liebsten Kontakt aufzunehmen. Frage sie
 hierfür beispielsweise nach ihrer Matrix-ID. Gerne kannst du auch mir eine Nachricht zukommen
-lassen: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de)
+lassen: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de)
 
 Um einen neuen Chat zu starten, tippe auf den grünen Button unten rechts und anschließend auf „Mit matrix-ID
 hinzufügen“. Nun gibst du die Matrix-ID deines:deiner Chatpartner:in ein, wählst den ersten Treffer aus der Liste aus

src/de/services/matrix/setup/part-2.md

@@ -1,8 +1,10 @@
 ---
 layout: article.njk
-title: Sichere Chats mit Matrix – Matrix Teil 2
 service: matrix
+title: Sichere Chats mit Matrix – Matrix Teil 2
+summary: Erfahre, was es mit Ende-zu-Ende-Verschlüsselung und der Verifizierung von Kontakten auf sich hat.
 series: matrix-setup
+order: 2
 tags:
   - Tutorial
   - Matrix

src/de/services/ntfy.md

@@ -1,16 +1,11 @@
 ---
-layout: base.njk
-key: ntfy
-title: ntfy
+layout: service.njk
+service: ntfy
 ---
-# <i class="i-cloud-download"></i> ntfy
-
 ntfy ist ein vielseitiges Tool zur Benachrichtigung über verschiedene Ereignisse. Es unterstützt auch UnifiedPush, ein offenes Protokoll für Echtzeitbenachrichtigungen.
 
 Um ntfy als zentrale App für Benachrichtigungen nutzen zu können, muss zunächst die App auf dem Handy installiert werden. Anschließend können Apps die UnifiedPush unterstützen, z.B. Element, Fluffychat oder Tusky ntfy als Push-Provider nutzen. Dadurch müssen nicht alle Apps eine Verbindung zum Server offen halten und sind dadurch auch energieeffizienter. Damit du meinen Server nutzen kannst, musst du diesen zunächst in den Einstellungen hinterlegen.
 
-__Seit Mai 2023 stelle ich ntfy zur freien Verfügung: [https://ntfy.sp-codes.de](https://ntfy.sp-codes.de)__ Gerne kannst du ntfy als Push-Provider für deine Apps nutzen, wenn du möchtest.
-
 ## Weitere nützliche Links
 
 * [ntfy Webseite](https://ntfy.sh)

src/de/services/peertube.md

@@ -1,21 +1,18 @@
 ---
-layout: base.njk
-key: mastodon
-title: Mastodon
+layout: service.njk
+service: peertube
 ---
-# <i class="i-peertube"></i> PeerTube
+PeerTube ist ein Netzwerk aus mehreren föderierten, interoperablen Video-Hosting-Anbietern, vergleichbar mit YouTube. Allerdings basiert der Dienst nicht auf einer zentralen Plattform, sondern besteht aus vielen verschiedenen, dezentralen Instanzen, die von Privatpersonen, Vereinen oder sonstigen Stellen eigenverantwortlich betrieben werden. Dadurch machen sich die Nutzenden nicht von einem einzigen Anbieter abhängig, sondern können frei entscheiden, mit wem sie welche Informationen teilen.
 
-PeerTube ist ein Netzwerk aus mehreren föderierten, interoperablen Video-Hosting-Anbietern, vergleichbar mit YouTube. Allerdings basiert der Dienst nicht auf einer zentralen Plattform, sondern besteht aus vielen verschiedenen, dezentralen Instanzen, die von Privatpersonen, Vereinen oder sonstigen Stellen eigenverantwortlich betrieben werden. Dadurch machen sich die Nutzer:innen nicht von einem einzigen Anbieter abhängig, sondern können frei entscheiden, mit wem sie welche Informationen teilen.
+Da PeerTube auf offenen Web-Protokollen und freier, quelloffener Software basiert, kann auch mit anderen Diensten, wie Mastodon, Pleroma, Pixelfed, Friendica oder Hubzilla kommuniziert werden. Nutzende können Accounts also dienst- und serverübergreifend folgen und Videos teilen.
 
-Da PeerTube auf offenen Web-Protokollen und freier, quelloffener Software basiert, kann auch mit anderen Diensten, wie Mastodon, Pleroma, Pixelfed, Friendica oder Hubzilla kommuniziert werden. Nutzer:innen können Accounts also dienst- und serverübergreifend folgen und Videos teilen.
+Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus.
 
-__Seit August 2021 betreibe ich eine öffentliche PeerTube-Instanz: [tube.sp-codes.de](https://tube.sp-codes.de/)__
+## Server-Details
 
-Die Serverregeln und weitere Informationen kannst du gerne [hier](https://tube.sp-codes.de/about/instance) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus.
+Die Serverregeln und weitere Informationen kannst du gerne [hier](https://tube.sp-codes.de/about/instance) nachlesen.
 
-<div class="text-center mb-3">
-<a class="card d-inline-block font-weight-bold" target="_blank" href="https://tube.sp-codes.de/signup">Jetzt registrieren</a>
-</div>
+Mit der bereitgestellten PeerTube Instanz können auch Livestreams durchgeführt werden. Jeder Account erhält 20 GB Speicherplatz und ist täglich auf eine Upload-Beschränkung von 2 GB begrenzt. Die ersten hochgeladenen Videos werden manuell freigeschaltet, um die Einhaltung der Serverregeln sicherzustellen.
 
 ## Interessante Kanäle
 

src/de/services/shields.md

@@ -1,15 +1,10 @@
 ---
-layout: base.njk
-key: shields
-title: Shields
+layout: service.njk
+service: shields
 ---
-# <i class="i-tags"></i> Shields
-
 Shields ist ein Service für prägnante, konsistente und lesbare Badges im SVG- und Rasterformat. Über eine URL können sie sehr einfach in Readmes oder jede andere Webseite eingebunden werden. Außerdem werden Integrationen zu verschiedenen Diensten oder Netzwerken bereitgestellt.
 
-__Seit August 2020 betreibe ich eine öffentliche Shields Instanz.__ Schau gerne mal vorbei und nutze die Bagdes in deinen eigenen Projekten. Es kann sein, das nicht alle Integrationen aktiviert sind.
-
-__Hier gehts zu Shields: [shields.sp-codes.de](https://shields.sp-codes.de)__
+Schau gerne mal vorbei und nutze die Bagdes in deinen eigenen Projekten. Es kann sein, das nicht alle Integrationen aktiviert sind. Wenn du Probleme hast, melde dich gerne.
 
 ## Weitere nützliche Links
 

src/en/all-donations.html

@@ -1,7 +1,8 @@
 ---
 layout: base.njk
 key: all-donations
-title: Unterstützen
+title: Donate
+summary: Support sp-codes with a donation - help us to provide the services for the community in the long term.
 ---
 <h1><i class="i-hand-holding-heart"></i> All Donations</h1>
 

src/en/contact.html

@@ -2,6 +2,7 @@
 layout: base.njk
 key: contact
 title: Contact
+summary: Contact information for admins or moderation of sp-codes.
 eleventyNavigation:
   key: contact
   title: Contact
@@ -11,7 +12,7 @@ eleventyNavigation:
 <h1><i class="i-commenting"></i> Contact Information</h1>
 <p>You want to contact me, report a problem, have a question about a service or would like to support me? Please
     send me your message in any of the following ways. I am looking forward to receive your message.</p>
-<div class="row justify-content-center">
+<div class="row justify-content-center contact-links">
     <div class="col-12 col-md-10 col-lg-8">
         <a class="card mb-3 d-flex align-items-center text-decoration-none" href="mailto:mail@sp-codes.de">
             <div class="pr-3"><span class="i-envelope text-foreground i-fw i-4x"></span></div>
@@ -23,7 +24,7 @@ eleventyNavigation:
             <div>Follow me on Mastodon or send me a message to <strong>@samuel_p@social.sp-codes.de</strong></div>
         </a>
         <a class="card mb-3 d-flex align-items-center text-decoration-none"
-           href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+           href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de">
             <div class="pr-3"><span class="i-matrix text-foreground i-fw i-4x"></span></div>
             <div>Write me on Matrix to <strong>@samuel-p:matrix.sp-codes.de</strong></div>
         </a>
@@ -39,3 +40,23 @@ eleventyNavigation:
         </a>
     </div>
 </div>
+
+<p>If I am not available, please contact me in the matrix chat or use the mailing list addresses that are also forwarded
+    to my moderators.</p>
+<div class="row justify-content-center contact-links">
+    <div class="col-12 col-md-10 col-lg-8">
+        <a class="card mb-3 d-flex align-items-center text-decoration-none"
+           href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">
+            <div class="pr-3"><span class="i-matrix i-fw i-4x"></span></div>
+            <div><strong>#sp-codes:matrix.sp-codes.de</strong></div>
+        </a>
+        <a class="card mb-3 d-flex align-items-center text-decoration-none" href="mailto:help@sp-codes.de">
+            <div class="pr-3"><span class="i-envelope i-fw i-4x"></span></div>
+            <div><strong>help@sp-codes.de</strong></div>
+        </a>
+        <a class="card mb-3 d-flex align-items-center text-decoration-none" href="mailto:abuse@sp-codes.de">
+            <div class="pr-3"><span class="i-envelope i-fw i-4x"></span></div>
+            <div><strong>abuse@sp-codes.de</strong></div>
+        </a>
+    </div>
+</div>

src/en/donate.html

@@ -2,6 +2,7 @@
 layout: base.njk
 key: donate
 title: Donate
+summary: Support sp-codes with a donation - help us to provide the services for the community in the long term.
 eleventyNavigation:
   key: donate
   title: Donate
@@ -11,14 +12,13 @@ eleventyNavigation:
 <h1><i class="i-hand-holding-heart"></i> Donate</h1>
 
 <p>All public services can be used for free. If you still want to contribute to the costs for server infrastructure or
-    send me a small donation for my blog, you can support me in the following ways<sup>1</sup>:</p>
+    send me a small donation, you can support me in the following ways<sup>1</sup>:</p>
 
 <div class="row justify-content-center">
     <div class="col-12 col-md-10 col-lg-8">
         <div class="card mb-3">
             <h2><i class="i-comments m-2"></i>Recommend</h2>
-            <div>You are welcome to recommend my services and my blog posts. I am very glad if I can make you happy with
-                it.
+            <div>You are welcome to recommend my services. I am very glad if I can make you happy with it.
             </div>
         </div>
         <div class="card mb-3">
@@ -26,8 +26,8 @@ eleventyNavigation:
             <div>If you want to transfer some money to me, just write me a short <a href="/en/contact">message</a>. I
                 will then send you my bank details as soon as possible. I am especially happy about a standing order.
                 <div class="mt-3 text-center">
-                    <img alt="Bank transfer {{ strings.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | banktransfers }}-active">
+                    <img alt="Bank transfer {{ strings.donations.supporters }}"
+                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters }}-{{ donations | banktransfers }}-active">
                 </div>
             </div>
         </div>
@@ -36,26 +36,14 @@ eleventyNavigation:
             <div>If you want to send me some cash, feel free to send it to the address provided in the <a
                     href="/en/imprint">imprint</a>.
                 <div class="mt-3 text-center">
-                    <img alt="Cash {{ strings.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | cash }}-inactive">
+                    <img alt="Cash {{ strings.donations.supporters }}"
+                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters }}-{{ donations | cash }}-inactive">
                 </div>
             </div>
         </div>
-        <div class="card mb-3">
-            <h2><i class="i-network-wired i-fw m-2"></i>netcup</h2>
-            <div>Some of my services are hosted at netcup. If you want to run your own server or website at <a
-                    href="https://www.netcup.de/" target="_blank">netcup</a>, you can use the following link (on the
-                picture). This way I get a small commission on your order. If you are a new customer, you will receive a
-                5€ voucher for your order.
-            </div>
-            <div class="mt-3 text-center">
-                <a href="https://www.netcup.de/bestellen/gutschein_einloesen.php?gutschein=36nc16071208640"
-                   target="_blank">Use voucher</a>
-            </div>
-        </div>
         <div class="card mb-3">
             <h2><i class="i-network-wired i-fw m-2"></i>Hetzner</h2>
-            <div>I also host some of my services at <a href="https://www.hetzner.com/" target="_blank">Hetzner</a>. If
+            <div>Almost all my services are hosted at <a href="https://www.hetzner.com/" target="_blank">Hetzner</a>. If
                 you want to run your own server in the Hetzner cloud, you
                 are welcome to use the following link. This way I get a small commission for your order. If you are a
                 new customer, you will get 20 € starting balance with your order.
@@ -65,6 +53,18 @@ eleventyNavigation:
                    target="_blank">Use voucher</a>
             </div>
         </div>
+        <div class="card mb-3">
+            <h2><i class="i-network-wired i-fw m-2"></i>netcup</h2>
+            <div>I also use <a href="https://www.netcup.de/" target="_blank">netcup</a> occasionally for smaller
+                projects. If you want to run your own server or website at netcup, you can use the following link. This
+                way I get a small commission on your order. If you are a new customer, you will receive a 5€ voucher for
+                your order.
+            </div>
+            <div class="mt-3 text-center">
+                <a href="https://www.netcup.de/bestellen/gutschein_einloesen.php?gutschein=36nc16071208640"
+                   target="_blank">Use voucher</a>
+            </div>
+        </div>
     </div>
 </div>
 

src/en/en.json

@@ -1,3 +1,47 @@
 {
-  "locale": "en"
+  "locale": "en",
+  "strings": {
+    "locale": "en",
+    "menu": {
+      "title": "Menu",
+      "imprint": "Imprint",
+      "privacy": "Privacy",
+      "code": "Code",
+      "stats": "Stats"
+    },
+    "state": {
+      "title": "State",
+      "operational": "Online",
+      "outage": "Outage",
+      "maintenance": "Maintenance"
+    },
+    "donations": {
+      "supporters": "Supporters",
+      "date": "Date",
+      "amount": "Amount",
+      "via": "Via",
+      "from": "Form",
+      "banktransfer": "Bank transfer",
+      "opencollective": "Open Collective",
+      "total": "Total",
+      "name": "Name",
+      "type": "Type",
+      "provider": "Provider",
+      "location": "Location",
+      "month": "Month",
+      "year": "Year"
+    },
+    "service": {
+      "overview": "Back to overview"
+    },
+    "article": {
+      "seriesParts": "All parts of this series",
+      "relatedService": "Related Service",
+      "questions": "Do you have a question?",
+      "questionsContent": "<p>Join the Matrix group and let's discuss. I look forward to your feedback!</p><a href=\"https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de\">#sp-codes:matrix.sp-codes.de</a>",
+      "aboutMe": "About me",
+      "aboutMeContent": "<p>My name is Samuel Philipp and I am a software engineer from Magdeburg, Germany. In my spare time, I host various free <a href=\"/en/services/\">services</a>. Here I write articles about security and privacy.</p><a href=\"https://samuel-philipp.com\">Read more</a>",
+      "yourOpinion": "Send me your opinion"
+    }
+  }
 }

src/en/imprint.html

@@ -1,6 +1,7 @@
 ---
 layout: base.njk
-title: sp-codes
+title: Imprint
+summary: Imprint of sp-codes - Information on legal owner and contact details.
 ---
 <h1><i class="i-info-circle"></i> Imprint</h1>
 <div class="mb-4">
@@ -14,14 +15,14 @@ title: sp-codes
     <h2>Contact</h2>
     <p>
         <strong>E-Mail-Address:</strong> mail@sp-codes.de<br>
-        <strong>More contact options:</strong>  <a href="/{{locale}}/contact">https://sp-codes.de/{{locale}}/contact</a><br>
+        <strong>More contact options:</strong>  <a href="/{{locale}}/contact">{{ site.url }}/{{locale}}/contact</a><br>
     </p>
 </div>
 <div class="mb-3 pt-4 border-top">
     <h2>Domains</h2>
     <ul>
         <li><a href="https://samuel-philipp.de">samuel-philipp.de</a></li>
-        <li><a href="https://sp-codes.de">sp-codes.de</a></li>
+        <li><a href="{{ site.url }}">sp-codes.de</a></li>
         <li><a href="https://sp-magic.de">sp-magic.de</a></li>
     </ul>
 </div>

src/en/index.html

@@ -1,57 +1,82 @@
 ---
-layout: home.njk
+layout: base.njk
 key: home
 title: Home
+summary: sp-codes provides various open source tools for general use. All services are for free and without advertising.
 eleventyNavigation:
   key: home
   title: Home
   icon: i-home
 ---
-<div class="row justify-content-center py-4 border-top">
-    <div class="col-lg-8 col-md-10 col-12">
-        <h1 class="heading">Welcome to sp&#8209;codes!</h1>
-        <p class="lead text-center mb-2">
-            Glad you found your way here. My name is Samuel Philipp, and I am a software engineer from Magdeburg.
-            On this site you will find information about me and an overview of the services I provide. Feel free
-            to look around or use the various services.
-        </p>
-        <p class="lead text-center mb-2">
-            Since April 2022 I also offer professional hosting of open source tools for companies, private persons and
-            other organizations with my company <a href="https://ossrox.org" target="_blank">Ossrox</a>. If you are
-            interested, feel free to visit our website or send me a message.
-        </p>
-        <p class="lead text-center mb-2">
-            <a href="https://ossrox.org" target="_blank">
-                <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
-            </a>
-        </p>
-    </div>
-</div>
-<div class="row justify-content-center py-4 border-top">
-    <div class="col-lg-8 col-md-10 col-12">
-        <h1 class="heading"><a href="/{{locale}}/services">Services</a></h1>
-        <p class="lead text-center mb-2">
-            For users of the services and anyone interested, there is a public matrix room as a place to share
-            questions, ideas and problems: <strong><a
-                href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a></strong>
-        </p>
-        <p class="lead text-center mb-2">
-            Follow sp-codes on Mastodon: <strong><a rel="me"
-                                                    href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
-        </p>
-        <div class="row justify-content-center">
-            {% include "services-simple.html" %}
+<div class="row py-lg-5">
+    <div class="col-12 col-lg-4 mb-4 mb-lg-0 fill-col-inner">
+        <div class="logo huge animated">
+            {% include "logo-animated.html" %}
         </div>
     </div>
-</div>
-<div class="row justify-content-center pt-4 border-top">
-    <div class="col-lg-8 col-md-10 col-12">
-        <h1 class="heading">Profiles & Contact</h1>
-        <p class="lead text-center mb-2">
-            You have found a mistake, suggestions or any other question? Feel free to contact me via one of the
-            following platforms. I look forward to your message!
+    <div class="col-12 col-lg-8">
+        <h1>Welcome to sp&#8209;codes!</h1>
+        <p class="mb-2">
+            Nice that you found your way here. sp-codes provides various open source tools for general use. All services
+            are for free and without advertising. If you would like to contribute to the future of the project, I would
+            be happy to get your support! Feel free to look around and discover the offered tools!
+        </p>
+        <h5 class="mb-2 fw-bold">Become part of our great community!</h5>
+        <p class="mb-2">
+            For anyone who uses the services and all interested visitors, there is a public matrix room as a space for
+            asking questions, sharing ideas and discussing problems: <strong><a
+                href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a></strong>
+        </p>
+        <p class="mb-2">
+            To stay up to date, follow sp-codes on Mastodon: <strong><a rel="me"
+                                                                        href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
         </p>
     </div>
 </div>
 
-{% include "profiles.html" %}
+<div class="row py-5">
+    <div class="col-12 col-lg-4 mb-4 mb-lg-0 fill-col-inner order-lg-1">
+        <div class="me-profile">
+            <img src="/img/samuel-1024.jpg" alt="Samuel Philipp">
+        </div>
+    </div>
+    <div class="col-12 col-lg-8">
+        <h1>About me</h1>
+        <p class="mb-2">
+            My name is Samuel Philipp, I am a full-stack developer and SysAdmin. In my spare time I run all services
+            offered by sp-codes. If you want to learn more about me, have a look at my personal website:
+            <a href="https://samuel-philipp.com">samuel-philipp.com</a>
+        </p>
+        <p class="mb-2">
+            Have you found a mistake, have suggestions for improvement or another question? Feel free to contact me via
+            one of the following platforms. I look forward to your message!
+        </p>
+        <p class="mb-2">
+            {% include "profiles.html" %}
+        </p>
+        <hr/>
+        <p class="mb-3">
+            With my company <a href="https://ossrox.org" target="_blank">Ossrox</a> I offer professional hosting of open
+            source tools for companies, individuals and other organizations. If you are interested, please have a look
+            at our website or write me a message.
+        </p>
+        <p class="text-center">
+            <a href="https://ossrox.org" target="_blank">
+                <picture>
+                    <source srcset="/img/ossrox.svg" media="(prefers-color-scheme: light)">
+                    <img class="ossrox-logo" src="/img/ossrox-white.svg" alt="Ossrox">
+                </picture>
+            </a>
+        </p>
+    </div>
+</div>
+
+<div class="row justify-content-center py-lg-5">
+    <div class="col">
+        <h1 class="text-center">Tool Overview</h1>
+        <p class="text-center"><a href="/{{locale}}/services">View all services</a></p>
+        <div class="row justify-content-center">
+            {% include "services.html" %}
+        </div>
+    </div>
+</div>

src/en/privacy.html

@@ -1,6 +1,7 @@
 ---
 layout: base.njk
 title: Privacy
+summary: Privacy policy of sp-codes - Information on data processing.
 ---
 <h1><i class="i-user-secret"></i> Privacy</h1>
 <p>Sorry, this document is only available in German so far. Read it <a href="/de/privacy">here</a>.</p>

src/en/services.html

@@ -1,28 +1,31 @@
 ---
-layout: services.njk
+layout: base.njk
 key: services
 title: Services
+summary: sp-codes provides various open source tools for general use. All services are for free and without advertising.
 eleventyNavigation:
   key: services
   title: Services
   icon: i-server
   order: 2
 ---
+<a class="float-end mt-3" href="https://status.sp-codes.de" target="_blank"><strong><i class="i-heartbeat me-2"></i>Status</strong></a>
 <h1><i class="i-server"></i> Services</h1>
-<p>In my spare time I provide various open source services for free. Here you can find an overview of the individual
-    services and a short description for each of them. All services are hosted in Germany. Feel free to use it.</p>
+<p>In my spare time, I provide various open source services that can be used for free and without advertising. Here you
+    will find an overview of the different services as well as descriptions and instructions on how to use them. All
+    services are hosted in Germany. You are welcome to use them.</p>
 
-<p>For the users of the services there is a public matrix room as a place to share questions, ideas and problems. Feel
-    free to join us if you use one of the services listed here or just want to drop by:</p>
+<p>As the services are offered privately, unfortunately no permanent availability can be guaranteed. If a service is
+    discontinued, this will be announced at least three months in advance for services that are not in the test
+    stage.</p>
+
+<p>For anyone who uses the services and all interested visitors, there is a public matrix room as a space for asking
+    questions, sharing ideas and discussing problems. Feel free to stop by if you use one of the services listed here or
+    just want to chat:</p>
 
 <h3 class="text-center"><a href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
 </h3>
 
-<div class="card text-center mb-3">
-    <p>You want to realize your own open source project to regain your digital sovereignty? I would be happy to support
-        you personally with my company. Feel free to visit <a href="https://ossrox.org" target="_blank">ossrox.org</a>
-        or send me a message.</p>
-    <a href="https://ossrox.org" target="_blank">
-        <img src="/img/ossrox.svg" alt="Ossrox" width="250px">
-    </a>
+<div class="row justify-content-center">
+    {% include "services.html" %}
 </div>

src/en/services/connectivitycheck.md

@@ -1,75 +1,12 @@
 ---
-layout: base.njk
-key: connectivitycheck
+layout: service.njk
+service: connectivitycheck
 title: Captive Portal Check
 ---
-# <i class="i-wifi"></i> Captive Portal Check
-
 A captive portal is a login page in public WLAN networks to restrict Internet access to the approval of certain terms of use. When you see a login page on a public network, your device uses a captive portal check. This allows the device to find out whether you have direct Internet access or not. In Android, for example, your device sends a request to a Google server.
 
-Since mid 2019 I provide a free Captive Portal Check: [https://connectivitycheck.sp-codes.de/generate204](https://connectivitycheck.sp-codes.de/generate204) You are welcome to use it.
-
-## Setup in Android
-
-To change the Captive Portal Check in Android, you need a terminal app or a connection via ADB to a computer.
-
-To use `http` you can run the following commands with the respective method:
-
-```
-# settings put global captive_portal_use_https 0
-# settings put global captive_portal_http_url "http://connectivitycheck.sp-codes.de/generate204"
-```
-
-To use `https` you can use the following two commands:
-
-```
-# settings put global captive_portal_use_https 1
-# settings put global captive_portal_https_url "https://connectivitycheck.sp-codes.de/generate204"
-```
-
-Maybe you have to reboot your phone after updating the settings.
-
-If you are using AFWall+ you need to give access to _[1000] Android-System_ and in some cases _[10040] CaptivePortalLogin_ to make it work.
-
-## Setup in Ubuntu
-
-In Ubuntu, the file `/etc/NetworkManager/NetworkManager.conf` must be changed. Add or change the following lines:
-
-```
-[connectivity]
-uri=https://connectivitycheck.sp-codes.de/generate204
-```
-
-Restart the network-manager:
-
-```
-sudo service network-manager restart
-```
-
-## Setup in Fedora
-
-In Fedora, the file `/etc/NetworkManager/NetworkManager.conf` must be changed. Add or change the following lines:
-
-```
-[connectivity]
-uri=https://connectivitycheck.sp-codes.de/generate204
-```
-
-Restart the _NetworkManager_:
-
-```
-sudo service NetworkManager restart
-```
-
-## Setup in Firefox
-
-Type [about:config](about:config) in the Firefox address bar and search for `captivedetect.canonicalURL` and `network.connectivity-service`. Set the URL values to `https://connectivitycheck.sp-codes.de/generate204`, the domain values to `connectivitycheck.sp-codes.de`. That's it.
-
 ## More useful links
 
 * [Captive Portal Wikipedia](https://en.wikipedia.org/wiki/Captive_portal)
 * [Source code](https://git.sp-codes.de/samuel-p/connectivity-check)
 * [Docker Image](https://hub.docker.com/r/samuelph/connectivity-check)
-* [Setup on Android](https://android.stackexchange.com/a/186995/288049)
-* [Setup on Ubuntu](https://askubuntu.com/q/1167177/920103)
-* [Captive Portal Kuketz Blog](https://www.kuketz-blog.de/android-captive-portal-check-204-http-antwort-von-captiveportal-kuketz-de/)

src/en/services/connectivitycheck/setup.md

@@ -0,0 +1,75 @@
+---
+layout: article.njk
+service: connectivitycheck
+title: Setup Captive Portal Check
+summary: In this article, you will learn how to set up your own captive portal check on different devices.
+tags:
+  - Tutorial
+  - Captive Portal Check
+---
+
+# Setup Captive Portal Check
+
+In this article, you will learn how to set up your own captive portal check on different devices.
+
+## Android
+
+To change the Captive Portal Check in Android, you need a terminal app or a connection via ADB to a computer.
+
+To use `http` you can run the following commands with the respective method:
+
+```
+# settings put global captive_portal_use_https 0
+# settings put global captive_portal_http_url "http://connectivitycheck.sp-codes.de/generate204"
+```
+
+To use `https` you can use the following two commands:
+
+```
+# settings put global captive_portal_use_https 1
+# settings put global captive_portal_https_url "https://connectivitycheck.sp-codes.de/generate204"
+```
+
+Maybe you have to reboot your phone after updating the settings.
+
+If you are using AFWall+ you need to give access to _[1000] Android-System_ and in some cases _[10040] CaptivePortalLogin_ to make it work.
+
+## Ubuntu
+
+In Ubuntu, the file `/etc/NetworkManager/NetworkManager.conf` must be changed. Add or change the following lines:
+
+```
+[connectivity]
+uri=https://connectivitycheck.sp-codes.de/generate204
+```
+
+Restart the network-manager:
+
+```
+sudo service network-manager restart
+```
+
+## Fedora
+
+In Fedora, the file `/etc/NetworkManager/NetworkManager.conf` must be changed. Add or change the following lines:
+
+```
+[connectivity]
+uri=https://connectivitycheck.sp-codes.de/generate204
+```
+
+Restart the _NetworkManager_:
+
+```
+sudo service NetworkManager restart
+```
+
+## Firefox
+
+Type [about:config](about:config) in the Firefox address bar and search for `captivedetect.canonicalURL` and `network.connectivity-service`. Set the URL values to `https://connectivitycheck.sp-codes.de/generate204`, the domain values to `connectivitycheck.sp-codes.de`. That's it.
+
+## Sources
+
+* [Setup on Android](https://android.stackexchange.com/a/186995/288049)
+* [Setup on Ubuntu](https://askubuntu.com/q/1167177/920103)
+* [Captive Portal Kuketz Blog](https://www.kuketz-blog.de/android-captive-portal-check-204-http-antwort-von-captiveportal-kuketz-de/)

src/en/services/etherpad.md

@@ -1,17 +1,13 @@
 ---
-layout: base.njk
-key: etherpad
+layout: service.njk
+service: etherpad
 title: Etherpad
 ---
-# <i class="i-pencil-square"></i> Etherpad
-
 Etherpad is a web-based collaboration platform that allows users to edit text documents together in real time. Multiple users can simultaneously access the same Etherpad document, make changes, and see what others are writing. Etherpad provides a simple and effective way for teamwork, brainstorming, collaborative writing, and more, without version conflicts.
 
 Etherpad is also embedded in Jitsi Meet. This allows for shared notes to be captured during a meeting.
 
-__I've been running Etherpad since the end of 2020: [https://pad.sp-codes.de](https://pad.sp-codes.de)__ Feel free to use Etherpad for your notes as well.
-
 ## More useful links
 
-* [Etherpad Webseite](https://etherpad.org)
-* [Quellcode von Etherpad](https://github.com/ether/etherpad-lite)
+* [Etherpad Website](https://etherpad.org)
+* [Quell code of Etherpad](https://github.com/ether/etherpad-lite)

src/en/services/forgejo.md

@@ -1,19 +1,15 @@
 ---
-layout: base.njk
-key: forgejo
+layout: service.njk
+service: forgejo
 title: Forgejo
 ---
-# <i class="i-git"></i> Forgejo
-
-Forgejo is a simple code hosting platform like GitHub or GitLab. It is open source and under continuous development. __Since the end of 2019 I have my own Forgejo instance, to manage my projects.__ For example this website. Feel free to have a look at the source code and leave some feedback.
-
-In addition to Forgejo, I also run Woodpecker, a platform that extends Forgejo with many continuous integration features, such as automated builds and deploys.
+Forgejo is a simple code hosting platform like GitHub or GitLab. It is open source and under continuous development. I like to use Forgejo myself to manage my own projects. For example, this website. Take a look at the source code and leave me some feedback: [git.sp-codes.de/samuel-p/sp-codes.de](https://git.sp-codes.de/samuel-p/sp-codes.de)
 
 Feel free to visit and sign up if you're interested in developing a project. The registration is open since March 2020.
 
-__To get to Forgejo click here: [git.sp-codes.de](https://git.sp-codes.de)__
+## Server details
 
-__If you want to check out Woodpecker, click here:  [ci.sp-codes.de](https://ci.sp-codes.de)__
+In addition to Forgejo, I also run Forgejo Actions, an add-on that extends the platform with numerous continuous integration functions. This makes it possible to create and deploy builds automatically. Forgejo Actions also enables automated tests. This allows changes to be continuously monitored in real time and errors to be detected at an early stage.
 
 ## More useful links
 

src/en/services/jitsi.md

@@ -1,26 +1,21 @@
 ---
-layout: base.njk
-key: jitsi
+layout: service.njk
+service: jitsi
 title: Jitsi Meet
 ---
-# <i class="i-users"></i> Jitsi Meet
-
 Jitsi-Meet is a platform for video conferences. You can start fully encrypted video chats without registration. Additionally, Jitsi-Meet offers the possibility to share the screen with other participants, invite new users with a simple link and send messages in the integrated chat.
 
-__Since July 2020 I run my own Jitsi-Meet instance. You can find it at [jitsi.sp-codes.de](https://jitsi.sp-codes.de/).__
+Enjoy using the instance with other people. If things don't run smoothly here, try the Jitsi Random Redirect. This will redirect you to a random Jitsi instance: [jitsi.random-redirect.de](https://jitsi.random-redirect.de)
 
-You are welcome to use the instance with other people.
+## Server details
 
-If you want to have your own Jitsi server for you, your family or your company, I would be happy to support you with my company <a href="https://ossrox.org" target="_blank">Ossrox</a>. Please have a look at our services on our website or send me a message.
+Jitsi does not only offer the usual functions of other video conferencing tools such as changing the camera background, noise suppression and reactions, but also some additional features.
 
-<div class="text-center mb-3">
-    <a href="https://ossrox.org/store/jitsi" target="_blank">
-        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
-    </a>
-</div>
+With the Jitsi-Meet instance provided, meetings can be streamed live directly on platforms such as YouTube or PeerTube. It is also possible to record web meetings locally. External videos can also be viewed together during a conference. Thanks to the direct integration of Etherpad, shared notes can be created during meetings.
 
 ## More useful links
 
 * [Jitsi Website](https://jitsi.org/)
 * [Source code of Jitsi](https://github.com/jitsi/jitsi-meet)
 * [List of public Instances](https://github.com/jitsi/jitsi-meet/wiki/Jitsi-Meet-Instances)
+* [Jitsi Random Redirect](https://jitsi.random-redirect.de/)

src/en/services/mastodon.md

@@ -1,29 +1,17 @@
 ---
-layout: base.njk
-key: mastodon
+layout: service.njk
+service: mastodon
 title: Mastodon
 ---
-# <i class="i-mastodon"></i> Mastodon
-
 Mastodon is a federated microblogging service, similar to Twitter. However, the service is not based on a central platform, but consists of many, decentralized instances that are run independently by private individuals, associations or other organizations. This means that users are not locked into a single provider, but are free to decide with whom they share what information.
 
 Since Mastodon is based on open web protocols and free, open source software, it is also possible to communicate with other services such as Pleroma, PeerTube, Pixelfed, Friendica or Hubzilla. Users can share text, image, video messages or polls across services and servers.
 
-__Since May 2021 I run a public Mastodon instance: [social.sp-codes.de](https://social.sp-codes.de/)__
+Feel free to register on my server or pick one from the lists linked below. I'm looking forward to your message to [@samuel_p@social.sp-codes.de](https://social.sp-codes.de/@samuel_p).
 
-Feel free to read the server rules and more information [here](https://social.sp-codes.de/about/more) (German). Feel free to register on my server or pick one from the lists linked below. I'm looking forward to your message to [@samuel_p@matrix.sp-codes.de](https://social.sp-codes.de/@samuel_p).
+## Server details
 
-<div class="text-center mb-3">
-<a class="card d-inline-block font-weight-bold" target="_blank" href="https://social.sp-codes.de/about">Register now</a>
-</div>
-
-If you want to have your own mastodon server for you, your family or your company, I would be happy to support you with my company <a href="https://ossrox.org" target="_blank">Ossrox</a>. Please have a look at our services on our website or send me a message.
-
-<div class="text-center mb-3">
-    <a href="https://ossrox.org/store/mastodon" target="_blank">
-        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
-    </a>
-</div>
+Feel free to read the server rules and more information [here](https://social.sp-codes.de/about/more) (German). There you will also find an overview of all muted and blocked servers.
 
 ## Interesting Accounts
 

src/en/services/matrix.md

@@ -1,44 +1,23 @@
 ---
-layout: base.njk
-key: matrix
+layout: service.njk
+service: matrix
 title: Matrix
 ---
-# <i class="i-comments"></i> Matrix
-
-Matrix is a modern, open source software for decentralized communication (like e-mail). Matrix offers end-to-end encryption, voice and video calls and much more. However, the most important thing is that there is not one Matrix server that all users have to use, like WhatsApp, Telegram and many other popular messengers.
+[Matrix](https://matrix.org) is a modern, open source software for decentralized communication (like e-mail). Matrix offers end-to-end encryption, voice and video calls and much more. However, the most important thing is that there is not one Matrix server that all users have to use, like WhatsApp, Telegram and many other popular messengers.
 
 Users can choose a public server or create their own and still communicate with all Matrix users, not just those on their own server. The messages are only stored on the participating servers. Calls also go only through the participating servers.
 
-__Since the beginning of 2020 I run a public Matrix server: [matrix.sp-codes.de](https://matrix.sp-codes.de/) And a public Element-Web instance: [chat.sp-codes.de](https://chat.sp-codes.de/)__
+Feel free to register on my server or choose one from the lists linked below. I look forward to your message to [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de).
 
-You can read the server rules [here](https://matrix.sp-codes.de/_matrix/consent) (German). Feel free to create an account on my server or choose one from the lists linked below. I look forward to hear from you [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de).
+## Server details
 
-<div class="text-center mb-3">
-<a class="card d-inline-block font-weight-bold" target="_blank" href="https://chat.sp-codes.de/#/register">Register now</a>
-</div>
+You can read the server rules [here](https://matrix.sp-codes.de/_matrix/consent) (German).
 
-If you want to have your own matrix server for you, your family or your company, I would be happy to support you with my company <a href="https://ossrox.org" target="_blank">Ossrox</a>. Please have a look at our services on our website or send me a message.
+**The limit for file uploads is 100 MB.** For larger files, please use a file sharing service.
 
-<div class="text-center mb-3">
-    <a href="https://ossrox.org/store/matrix" target="_blank">
-        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
-    </a>
-</div>
+Old messages and files are automatically deleted in order to maintain the performance of the server and save disk space. **Messages are deleted after one year by default.** Depending on the app, you can also set a shorter period in the room settings. **Uploaded files are deleted from the server one year after the last access.**
 
-Here you will find an article series (German) for an easy start to Matrix: 
-
-<div class="row justify-content-center">
-<div class="col-12 col-md-10 col-lg-8">
-<div class="card-list">
-<div class="card">
-<a href="/de/services/matrix/setup/part-1/">Part 1: Werde Teil der Matrix</a>
-</div>
-<div class="card">
-<a href="/de/services/matrix/setup/part-2/">Part 2: Sichere Chats mit Matrix</a>
-</div>
-</div>
-</div>
-</div>
+The Matrix server supports sliding sync, a beta feature of Matrix that significantly improves synchronization between client and server. Clients such as Element X already use this function.
 
 ## Why Matrix?
 
@@ -59,9 +38,8 @@ Here I want to give some reasons why I use Matrix and prefer it over many other
 * [Various Apps](https://matrix.org/clients)
 * [List of public rooms](https://view.matrix.org/)
 * Lists with public Matrix servers
+  * [joinmatrix.org](https://joinmatrix.org/servers)
   * [hello-matrix.net](https://www.hello-matrix.net/public_servers.php)
-  * [anchel.nl](https://publiclist.anchel.nl/)
   * [the-federation.info](https://the-federation.info/protocol/matrix)
-  * [FossMessenger](https://fediverse.blog/~/FossMessenger/matrix-server)
 * [Matrix FAQ](https://matrix.org/faq/)
 * [Migrate Account](https://ems.element.io/tools/matrix-migration)

src/en/services/ntfy.md

@@ -1,17 +1,13 @@
 ---
-layout: base.njk
-key: ntfy
+layout: service.njk
+service: ntfy
 title: ntfy
 ---
-# <i class="i-cloud-download"></i> ntfy
-
 ntfy is a versatile tool for notification about various events. It also supports UnifiedPush, an open protocol for real-time notifications.
 
 To use ntfy as a central app for notifications, the app must first be installed on the phone. Then, apps that support UnifiedPush, such as Element, Fluffychat or Tusky can use ntfy as a push provider. This way, not all apps need to keep a connection open to the server and are more energy efficient as a result. In order for you to use my server, you must first set it up in the settings.
 
-__Since May 2023 I provide ntfy for free: [https://ntfy.sp-codes.de](https://ntfy.sp-codes.de)__ You are welcome to use ntfy as push provider for your apps if you like.
-
 ## More useful links
 
 * [ntfy Website](https://ntfy.sh)
-* [Sourcecode of ntfy](https://github.com/binwiederhier/ntfy)
+* [Source code of ntfy](https://github.com/binwiederhier/ntfy)

src/en/services/peertube.md

@@ -1,21 +1,19 @@
 ---
-layout: base.njk
-key: mastodon
-title: Mastodon
+layout: service.njk
+service: peertube
+title: PeerTube
 ---
-# <i class="i-peertube"></i> PeerTube
-
 PeerTube is a network of several federated, interoperable video hosting providers, comparable to YouTube. However, the service is not based on a central platform, but consists of many, decentralized instances that are run independently by private individuals, associations or other organizations. This means that users are not locked into a single provider, but are free to decide with whom they share what information.
 
 Since PeerTube is based on open web protocols and free, open source software, it is also possible to communicate with other services such as Mastodon, Pleroma, Pixelfed, Friendica or Hubzilla. Users can share text, image, video messages or polls across services and servers.
 
-__Since August 2021 I run a public PeerTube instance: [tube.sp-codes.de](https://tube.sp-codes.de/)__
+Feel free to register on my server or pick one from the lists linked below.
 
-Feel free to read the server rules and more information [here](https://tube.sp-codes.de/about/instance) (German). Feel free to register on my server or pick one from the lists linked below.
+## Server details
 
-<div class="text-center mb-3">
-<a class="card d-inline-block font-weight-bold" target="_blank" href="https://tube.sp-codes.de/signup">Register now</a>
-</div>
+You can read the server rules and more information [here](https://tube.sp-codes.de/about/instance) (German).
+
+The PeerTube instance provided can also be used for live streams. Each account receives 20 GB of storage space and is limited to a daily upload limit of 2 GB. The first uploaded videos are activated manually to ensure compliance with the server rules.
 
 ## Interesting Channels
 

src/en/services/shields.md

@@ -1,15 +1,11 @@
 ---
-layout: base.njk
-key: shields
+layout: service.njk
+service: shields
 title: Shields
 ---
-# <i class="i-tags"></i> Shields
-
 Shields is a service for concise, consistent and legible badges in SVG and raster format. Via a URL they can be easily embedded in readmes or any other website. In addition, integrations to various services or networks are provided.
 
-__Since August 2020 I run a public Shields instance.__ Feel free to visit it and use the bagdes in your own projects. It is possible that not all integrations are activated.
-
-__Here is the link to Shields: [shields.sp-codes.de](https://shields.sp-codes.de)__
+Take a look and use the bagdes in your own projects. It is possible that not all integrations are activated. If you have any problems, feel free to contact me.
 
 ## More useful links
 

src/img/ossrox-white.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1053.0649"
+   height="192"
+   viewBox="0 0 278.62343 50.800001"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
+   sodipodi:docname="ossrox-white.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.60399831"
+     inkscape:cx="629.14083"
+     inkscape:cy="182.11971"
+     inkscape:window-width="1920"
+     inkscape:window-height="1043"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="text1640"
+     units="px" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       aria-label="Ossrox"
+       id="text1640"
+       style="font-size:10.5833px;line-height:1.25;font-family:Orbitron;-inkscape-font-specification:'Orbitron, Normal';stroke-width:0.264583">
+      <path
+         d="m 8.4666724,50.800034 q -2.3283349,0 -4.3038918,-1.12889 Q 2.2577793,48.542254 1.1288896,46.637253 0,44.661696 0,42.333361 V 8.4666718 Q 0,6.1383369 1.1288896,4.2333356 2.2577793,2.2577787 4.1627806,1.128889 6.1383375,-6.1035156e-7 8.4666724,-6.1035156e-7 H 42.333362 q 2.328335,0 4.233336,1.12888961035156 1.975557,1.1288897 3.104447,3.1044466 1.128889,1.9050013 1.128889,4.2333362 V 42.333361 q 0,2.328335 -1.128889,4.303892 -1.12889,1.905001 -3.104447,3.033891 -1.905001,1.12889 -4.233336,1.12889 z m 0,-5.715004 H 42.333362 q 1.128889,0 1.905001,-0.776112 0.846667,-0.846667 0.846667,-1.975557 V 8.4666718 q 0,-1.1288897 -0.846667,-1.9050013 Q 43.462251,5.7150032 42.333362,5.7150032 H 8.4666724 q -1.1288897,0 -1.9755569,0.8466673 Q 5.7150038,7.3377821 5.7150038,8.4666718 V 42.333361 q 0,1.12889 0.7761117,1.975557 0.8466672,0.776112 1.9755569,0.776112 z"
+         style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
+         id="path25504" />
+      <path
+         d="m 66.53387,50.800034 q -2.328335,0 -4.303892,-1.12889 -1.905001,-1.199445 -3.104447,-3.104447 -1.128889,-1.975556 -1.128889,-4.303891 v -0.564445 h 5.785559 v 0.564445 q 0,1.128889 0.776112,1.975556 0.846667,0.776112 1.975557,0.776112 h 24.553349 q 1.12889,0 1.905002,-0.776112 0.846667,-0.846667 0.846667,-1.975556 v -6.279449 q 0,-1.12889 -0.846667,-1.905001 -0.776112,-0.846668 -1.905002,-0.846668 H 66.53387 q -2.328335,0 -4.303892,-1.128889 -1.905001,-1.199445 -3.104447,-3.104447 -1.128889,-1.975557 -1.128889,-4.303892 v -6.279448 q 0,-2.328335 1.128889,-4.233336 1.199446,-1.975557 3.104447,-3.104447 1.975557,-1.1994452 4.303892,-1.1994452 h 24.553349 q 2.398891,0 4.303892,1.1994452 1.975557,1.12889 3.104447,3.104447 1.199445,1.905001 1.199445,4.233336 v 0.564445 h -5.856115 v -0.564445 q 0,-1.12889 -0.846667,-1.905002 -0.776112,-0.846667 -1.905002,-0.846667 H 66.53387 q -1.12889,0 -1.975557,0.846667 -0.776112,0.776112 -0.776112,1.905002 v 6.279448 q 0,1.12889 0.776112,1.975557 0.846667,0.776112 1.975557,0.776112 h 24.553349 q 2.398891,0 4.303892,1.199445 1.975557,1.12889 3.104447,3.104447 1.199445,1.905001 1.199445,4.233336 v 6.279449 q 0,2.328335 -1.199445,4.303891 -1.12889,1.905002 -3.104447,3.104447 -1.905001,1.12889 -4.303892,1.12889 H 66.53387 Z"
+         style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
+         id="path25506" />
+      <path
+         d="m 114.93494,50.800034 q -2.32834,0 -4.30389,-1.12889 -1.905,-1.199445 -3.10445,-3.104447 -1.12889,-1.975556 -1.12889,-4.303891 v -0.564445 h 5.78556 v 0.564445 q 0,1.128889 0.77611,1.975556 0.84667,0.776112 1.97556,0.776112 h 24.55335 q 1.12889,0 1.905,-0.776112 0.84667,-0.846667 0.84667,-1.975556 v -6.279449 q 0,-1.12889 -0.84667,-1.905001 -0.77611,-0.846668 -1.905,-0.846668 h -24.55335 q -2.32834,0 -4.30389,-1.128889 -1.905,-1.199445 -3.10445,-3.104447 -1.12889,-1.975557 -1.12889,-4.303892 v -6.279448 q 0,-2.328335 1.12889,-4.233336 1.19945,-1.975557 3.10445,-3.104447 1.97555,-1.1994452 4.30389,-1.1994452 h 24.55335 q 2.39889,0 4.30389,1.1994452 1.97556,1.12889 3.10445,3.104447 1.19944,1.905001 1.19944,4.233336 v 0.564445 h -5.85611 v -0.564445 q 0,-1.12889 -0.84667,-1.905002 -0.77611,-0.846667 -1.905,-0.846667 h -24.55335 q -1.12889,0 -1.97556,0.846667 -0.77611,0.776112 -0.77611,1.905002 v 6.279448 q 0,1.12889 0.77611,1.975557 0.84667,0.776112 1.97556,0.776112 h 24.55335 q 2.39889,0 4.30389,1.199445 1.97556,1.12889 3.10445,3.104447 1.19944,1.905001 1.19944,4.233336 v 6.279449 q 0,2.328335 -1.19944,4.303891 -1.12889,1.905002 -3.10445,3.104447 -1.905,1.12889 -4.30389,1.12889 h -24.55335 z"
+         style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
+         id="path25508" />
+      <path
+         d="m 155.081,50.800034 v 0 -32.385022 q 0,-2.328335 1.12889,-4.233336 1.19944,-1.975557 3.10444,-3.104447 1.97556,-1.1994452 4.30389,-1.1994452 h 23.00113 v 5.7855592 h -23.00113 q -1.12889,0 -1.97555,0.846667 -0.77611,0.776112 -0.77611,1.905002 v 32.385022 z"
+         style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
+         id="path25510" />
+      <path
+         d="m 199.31921,50.800034 q -2.32833,0 -4.30389,-1.12889 -1.905,-1.199445 -3.10444,-3.104447 -1.12889,-1.975556 -1.12889,-4.303891 V 18.415012 q 0,-2.328335 1.12889,-4.233336 1.19944,-1.975557 3.10444,-3.104447 1.97556,-1.1994452 4.30389,-1.1994452 h 24.55335 q 2.39889,0 4.3039,1.1994452 1.97555,1.12889 3.10444,3.104447 1.19945,1.905001 1.19945,4.233336 v 23.847794 q 0,2.328335 -1.19945,4.303891 -1.12889,1.905002 -3.10444,3.104447 -1.90501,1.12889 -4.3039,1.12889 h -24.55335 z m 0,-5.78556 h 24.55335 q 1.12889,0 1.905,-0.776112 0.84667,-0.846667 0.84667,-1.975556 V 18.415012 q 0,-1.12889 -0.84667,-1.905002 -0.77611,-0.846667 -1.905,-0.846667 h -24.55335 q -1.12889,0 -1.97555,0.846667 -0.77612,0.776112 -0.77612,1.905002 v 23.847794 q 0,1.128889 0.77612,1.975556 0.84666,0.776112 1.97555,0.776112 z"
+         style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
+         id="path25512" />
+      <path
+         d="m 236.78408,50.800034 v 0 -0.07056 L 253.85854,29.986131 236.78408,9.9483394 v -0.070556 h 7.62001 L 257.66854,25.400016 271.00355,9.8777838 h 7.54945 v 0.070556 l -17.07446,20.0377916 17.14501,20.743347 v 0.07056 h -7.62 l -13.33501,-16.3689 -13.26445,16.3689 z"
+         style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
+         id="path25514" />
+    </g>
+  </g>
+</svg>

src/scss/main.scss

@@ -1,5 +1,4 @@
 $primary: #fea500;
-$primary_dark: #e5a52e;
 
 @import "logo";
 
@@ -12,6 +11,8 @@ $flag-icon-path: '../img';
 @import "bootstrap/scss/bootstrap-grid";
 @import "bootstrap/scss/bootstrap-reboot";
 @import "bootstrap/scss/bootstrap-utilities";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/buttons";
 @import "bootstrap/scss/badge";
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
@@ -24,6 +25,7 @@ html, body {
 }
 
 body {
+  background-color: #222;
   background-image: url("../img/bg.jpg");
   color: #fff;
   min-height: 100vh;
@@ -34,25 +36,28 @@ ul {
   list-style: disclosure-closed;
 }
 
+p {
+  text-align: justify;
+}
+
 .content {
   flex: 1;
-  padding: 2%;
+  padding: 1.5rem 0;
+}
+
+@include media-breakpoint-up(lg) {
+  .content {
+    padding: 3rem 0;
+  }
 }
 
 .highlight {
   color: $primary;
 }
 
-.text-foreground {
-  color: #fff;
-}
-
-a {
-  color: $primary;
-
-  &:hover {
-    color: $primary_dark;
-  }
+.fill-col-inner {
+  display: flex;
+  align-items: center;
 }
 
 .logo {
@@ -60,21 +65,67 @@ a {
   margin: 0 auto;
   max-width: 128px;
   max-height: 128px;
-  transition: transform .5s ease-in-out;
 
-  &:hover {
-    transform: rotate(360deg);
+  &.huge {
+    width: 256px;
+    height: 256px;
+    max-width: 256px;
+    max-height: 256px;
+  }
+
+  &.mini {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .logo {
+    max-width: 64px;
+    max-height: 64px;
+
+    &.huge {
+      width: 128px;
+      height: 128px;
+      max-width: 128px;
+      max-height: 128px;
+    }
+  }
+}
+
+.me-profile {
+  display: block;
+  height: 256px;
+  width: 256px;
+  margin: 0 auto;
+  border-radius: 50%;
+  overflow: hidden;
+  border: 2px solid #fff;
+
+  img {
+    position: relative;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .me-profile {
+    height: 128px;
+    width: 128px;
   }
 }
 
 .nav {
   display: flex;
+  background-color: #111;
   justify-content: start;
   flex-wrap: wrap;
-  padding: .5rem;
+  padding: 1rem 1.5rem;
 
   .toggle {
-    padding: .5rem;
+    padding: 1rem 1.5rem;
     display: none;
   }
 
@@ -84,14 +135,23 @@ a {
 
   .items {
     display: flex;
-  }
+    align-items: center;
 
-  .lang-large {
-    display: flex;
+    .item {
+      display: flex;
+    }
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-up(md) {
+  .nav {
+    .i-fw {
+      width: unset;
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
   .nav {
     display: block;
     padding: 0;
@@ -105,6 +165,10 @@ a {
       }
     }
 
+    .logo {
+      display: none;
+    }
+
     .items {
       display: none;
 
@@ -113,7 +177,7 @@ a {
 
         a {
           display: block;
-          padding: 0.5rem;
+          padding: .75rem 1.5rem;
         }
       }
     }
@@ -123,7 +187,7 @@ a {
     }
 
     .lang-large {
-      display: none;
+      display: none !important;
     }
   }
 }
@@ -143,22 +207,6 @@ a {
   }
 }
 
-.border-top {
-  border-top: 1px solid #fff;
-}
-
-.border-bottom {
-  border-bottom: 1px solid #fff;
-}
-
-.heading {
-  text-align: center;
-
-  a {
-    color: #fff;
-  }
-}
-
 .flex-grow {
   flex: 1;
 }
@@ -192,11 +240,6 @@ a {
     top: 0;
     bottom: 0;
     right: 0;
-    color: $primary !important;
-
-    &[href]:hover {
-      color: $primary_dark !important;
-    }
   }
 
   .beta {
@@ -209,7 +252,7 @@ a {
     padding: .5rem 1rem;
     border-radius: 10px;
     transform: rotate(20deg);
-    box-shadow: -1px 8px 5px rgba(0, 0, 0, .7);
+    box-shadow: -1px 3px 5px rgba(255, 255, 255, .3);
   }
 
   .inner {
@@ -264,13 +307,6 @@ pre {
   }
 }
 
-@media (max-width: 767.98px) {
-  .logo {
-    max-width: 96px;
-    max-height: 96px;
-  }
-}
-
 .table-container {
   overflow-y: auto;
 }
@@ -290,15 +326,6 @@ table.table {
   }
 }
 
-.ossrox {
-  background-color: #efefef;
-  border: 2px solid #000;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
-  padding: 5px;
-  margin: 5px;
-  max-width: 250px;
-}
-
 .article-content {
   img {
     display: block;
@@ -342,3 +369,106 @@ table.table {
     border-bottom: none;
   }
 }
+
+.side-banner {
+  float: right;
+  width: 30%;
+  margin-left: 1rem;
+  margin-bottom: 1rem;
+}
+
+.ossrox-logo {
+  max-width: 250px;
+}
+
+.tab-card.ossrox {
+  position: relative;
+
+  .link {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .title {
+    background-color: #006269;
+    color: #fff;
+    padding: .75rem;
+    text-align: center;
+  }
+
+  img {
+    max-width: 200px;
+    max-height: 30px;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --bs-border-color: #000;
+  }
+
+  body {
+    background-color: #ddd;
+    background-image: url("../img/bgl.jpg");
+    color: #000;
+  }
+
+  a {
+    color: #555;
+
+    &:hover {
+      color: #333;
+    }
+  }
+
+  .me-profile {
+    border: 2px solid #000;
+  }
+
+  .nav {
+    background-color: #bbb;
+  }
+
+  .menu {
+    a {
+      color: #000;
+    }
+  }
+
+  .card {
+    background-color: #ccc;
+    border: 1px solid #000;
+  }
+
+  .card-list {
+    .card:last-child {
+      border-bottom: 1px solid #000;
+    }
+  }
+
+  .service {
+    .beta {
+      box-shadow: -1px 3px 5px rgba(0, 0, 0, .3);
+    }
+  }
+
+  table.table {
+    background-color: #eee;
+
+    tr:nth-child(2n) {
+      background-color: #0000000b;
+    }
+  }
+
+  .tab-card .title {
+    border: 1px solid #000;
+    border-bottom: none;
+  }
+
+  .contact-links a {
+    color: #000 !important;
+  }
+}