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

Reviewed-on: samuel-p/sp-codes.de#249

.drone.yml

@@ -1,48 +0,0 @@
-kind: pipeline
-type: docker
-name: default
-
-platform:
-  os: linux
-  arch: arm
-
-steps:
-  - name: build
-    image: node
-    commands:
-      - npm install
-      - npm run build
-  - name: deploy-develop
-    image: alpine
-    environment:
-      FTP_HOST:
-        from_secret: FTP_HOST
-      FTP_USERNAME:
-        from_secret: FTP_USERNAME
-      FTP_PASSWORD:
-        from_secret: FTP_PASSWORD
-    commands:
-      - which lftp || ( apk --update add lftp )
-      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/ dev.sp-codes.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
-    when:
-      branch:
-        - develop
-      event:
-        - push
-  - name: deploy-master
-    image: alpine
-    environment:
-      FTP_HOST:
-        from_secret: FTP_HOST
-      FTP_USERNAME:
-        from_secret: FTP_USERNAME
-      FTP_PASSWORD:
-        from_secret: FTP_PASSWORD
-    commands:
-      - which lftp || ( apk --update add lftp )
-      - lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R ./dist/ sp-codes.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
-    when:
-      branch:
-        - master
-      event:
-        - push

.eleventy.js

@@ -1,22 +1,91 @@
-const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
+const pluginRev = require("eleventy-plugin-rev");
+const pluginSass = require("eleventy-sass");
+const pluginTinyHtml = require("@sardine/eleventy-plugin-tinyhtml");
+const pluginNavigation = require("@11ty/eleventy-navigation");
 
-module.exports = function(eleventyConfig) {
-    eleventyConfig.addWatchTarget("./src/scss/");
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(pluginRev);
+    eleventyConfig.addPlugin(pluginTinyHtml);
+    eleventyConfig.addPlugin(pluginSass, {
+        sass: {
+            loadPaths: ["node_modules"],
+            style: "compressed",
+            sourceMap: false,
+        },
+        compileOptions: {
+            permalink: function (contents, inputPath) {
+                return (data) => {
+                    return data.page.filePathStem.replace(/^\/scss\//, "/css/") + ".css";
+                };
+            }
+        },
+        rev: true
+    });
+    eleventyConfig.addPlugin(pluginNavigation);
 
-    eleventyConfig.addPlugin(eleventyNavigationPlugin);
     eleventyConfig.setUseGitIgnore(false);
     eleventyConfig.addPassthroughCopy({
         "src/img": "img",
         "src/font": "font",
-        "node_modules/@fortawesome/fontawesome-free/webfonts/": "font",
-        "node_modules/flag-icon-css/flags/4x3/(de|us)*": "flags"
+        "src/favicon.*": "",
+    });
+    eleventyConfig.addShortcode("translatedUrl", function (currentLocale, newLocale) {
+        return this.page.url.replace(new RegExp(`\/${currentLocale}\/`), `/${newLocale}/`);
+    });
+
+    eleventyConfig.addFilter('year', function (value) {
+        return value * 12;
+    });
+
+    eleventyConfig.addFilter("sum", function (value) {
+        return value.map(d => d.amount).reduce((a, b) => a + b, 0);
+    });
+
+    eleventyConfig.addFilter("amount", function (value) {
+        // TODO update language dynamically
+        return value.toLocaleString('de', {minimumFractionDigits: 2});
+    });
+
+    eleventyConfig.addFilter("banktransfers", function (donations) {
+        return donations
+            .flatMap(y => y.donations)
+            .filter(d => d.via === 'banktransfer')
+            .filter(d => d.first)
+            .length;
+    });
+
+    eleventyConfig.addFilter("cash", function (donations) {
+        return donations
+            .flatMap(y => y.donations)
+            .filter(d => d.via === 'cash')
+            .filter(d => d.first)
+            .length;
+    });
+
+    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 {
+        // Pre-process *.md files with: (default: `liquid`)
+        markdownTemplateEngine: "njk",
+        // Pre-process *.html files with: (default: `liquid`)
+        htmlTemplateEngine: "njk",
+        // Opt-out of pre-processing global data JSON files: (default: `liquid`)
+        dataTemplateEngine: false,
+
         dir: {
             input: "src",
             includes: "_includes",
             layouts: "_includes/layouts",
+            data: "_data",
             output: "dist"
         }
     };

.forgejo/workflows/build-deploy.yml

@@ -0,0 +1,71 @@
+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@v4
+      - name: Install Dependencies
+        run: npm install
+      - name: Build Website
+        run: npm run build
+      - uses: actions/upload-artifact@v3
+        with:
+          name: build
+          path: dist/
+  deploy-dev:
+    name: Deploy Dev Website
+    runs-on: docker
+    container:
+      image: node:lts-alpine
+    needs: [build-dev]
+    if: github.ref == 'refs/heads/develop'
+    steps:
+      - uses: actions/download-artifact@v3
+      - name: Install Dependencies
+        run: which lftp || ( apk --update add lftp )
+      - name: Deploy Website
+        run: lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R -e ./build/ dev.sp-codes.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
+        env:
+          FTP_HOST: ${{ secrets.FTP_HOST }}
+          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
+          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
+  deploy:
+    name: Deploy Website
+    runs-on: docker
+    container:
+      image: node:lts-alpine
+    needs: [build]
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - uses: actions/download-artifact@v3
+      - name: Install Dependencies
+        run: which lftp || ( apk --update add lftp )
+      - name: Deploy Website
+        run: lftp -e "set ftp:ssl-force true; set ssl:verify-certificate no; mirror -R -e ./build/ sp-codes.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
+        env:
+          FTP_HOST: ${{ secrets.FTP_HOST }}
+          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
+          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}

README.md

@@ -1,18 +1,13 @@
 # sp-codes.de
 
-[![Build Status](https://ci.sp-codes.de/api/badges/samuel-p/sp-codes.de/status.svg)](https://ci.sp-codes.de/samuel-p/sp-codes.de)
-
-Website for sp-codes.de
-
-[GitHub](https://github.com/samuel-p/sp-codes.de)
-[GitLab](https://gitlab.com/samuel-p/sp-codes.de)
+Website for [sp-codes.de](https://sp-codes.de)
 
 ## Additional Header Parameters
 
 The following Parameters are set directly on the Web-Server.
 
 ```
-Content-Security-Policy: default-src 'none'; script-src 'self' https://plausible.sp-codes.de; object-src 'none'; style-src 'self'; img-src 'self'; media-src 'none'; frame-src 'none'; font-src 'self'; connect-src 'self' https://plausible.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

@@ -3,12 +3,11 @@
   "version": "1.0.0",
   "description": "website for sp-codes.de",
   "scripts": {
-    "compile-sass": "node-sass --output-style compressed --importer=node_modules/node-sass-tilde-importer src/scss/main.scss dist/css/main.css",
-    "watch:eleventy": "eleventy --serve",
-    "watch:sass": "npm run compile-sass -- --watch",
-    "start": "npm-run-all compile-sass --parallel watch:*",
-    "build": "npm run compile-sass && eleventy && npm run move-index",
-    "move-index": "cpx dist/de/index.html dist/"
+    "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 minify-css && npm run add-index",
+    "build:dev": "BUILD=dev eleventy && npm run minify-css && npm run add-index"
   },
   "author": "samuel-p",
   "repository": {
@@ -16,19 +15,26 @@
     "url": "https://git.sp-codes.de/samuel-p/sp-codes.de"
   },
   "optionalDependencies": {
-    "browser-sync": "^2.26.12"
+    "browser-sync": "^3.0.3"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^0.11.0",
-    "@11ty/eleventy-navigation": "^0.1.6",
+    "@11ty/eleventy": "^2.0.1",
+    "@11ty/eleventy-navigation": "^0.3.5",
+    "@node-minify/core": "^8.0.6",
+    "@node-minify/crass": "^8.0.6",
+    "@node-minify/html-minifier": "^8.0.6",
+    "@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
     "cpx": "^1.5.0",
-    "node-sass": "^4.14.1",
-    "node-sass-tilde-importer": "^1.0.2",
-    "npm-run-all": "^4.1.5"
+    "eleventy-plugin-rev": "^2.0.0",
+    "eleventy-sass": "^2.2.6",
+    "glob": "^11.0.0",
+    "minify": "^11.4.1",
+    "postcss": "^8.4.47",
+    "replace-in-file": "^8.2.0",
+    "sass": "^1.80.6",
+    "uncss": "^0.17.3"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.14.0",
-    "bootstrap": "^4.5.2",
-    "flag-icon-css": "^3.5.0"
+    "bootstrap": "^5.3.3"
   }
 }

renovate.json

@@ -5,5 +5,6 @@
   "baseBranches": [
     "develop"
   ],
-  "rangeStrategy": "bump"
+  "rangeStrategy": "bump",
+  "rebaseWhen": "behind-base-branch"
 }

src/_data/donations.json

@@ -0,0 +1,328 @@
+[
+  {
+    "year": 2024,
+    "donations": [
+      {
+        "date": "05.11.2024",
+        "amount": 50,
+        "via": "banktransfer",
+        "from": "bings81",
+        "first": true
+      },
+      {
+        "date": "31.10.2024",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "ub1x",
+        "first": false
+      },
+      {
+        "date": "02.08.2024",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "ub1x",
+        "first": false
+      },
+      {
+        "date": "03.07.2024",
+        "amount": 25,
+        "via": "banktransfer",
+        "from": "Astrid",
+        "first": true
+      },
+      {
+        "date": "26.02.2024",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "ub1x",
+        "first": false
+      },
+      {
+        "date": "23.01.2024",
+        "amount": 25,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      }
+    ]
+  },
+  {
+    "year": 2023,
+    "donations": [
+      {
+        "date": "27.12.2023",
+        "amount": 50,
+        "via": "banktransfer",
+        "from": null,
+        "first": false
+      },
+      {
+        "date": "16.11.2023",
+        "amount": 25,
+        "via": "banktransfer",
+        "from": null,
+        "first": false
+      },
+      {
+        "date": "26.10.2023",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "ub1x",
+        "first": false
+      },
+      {
+        "date": "17.07.2023",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "ub1x",
+        "first": false
+      },
+      {
+        "date": "27.02.2023",
+        "amount": 40,
+        "via": "banktransfer",
+        "from": "xhoff637",
+        "first": true
+      },
+      {
+        "date": "20.02.2023",
+        "amount": 50,
+        "via": "banktransfer",
+        "from": null,
+        "first": false
+      },
+      {
+        "date": "16.01.2023",
+        "amount": 12,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      }
+    ]
+  },
+  {
+    "year": 2022,
+    "donations": [
+      {
+        "date": "15.12.2022",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "ub1x",
+        "first": false
+      },
+      {
+        "date": "16.11.2022",
+        "amount": 25,
+        "via": "banktransfer",
+        "from": null,
+        "first": false
+      },
+      {
+        "date": "02.11.2022",
+        "amount": 30,
+        "via": "banktransfer",
+        "from": null,
+        "first": false
+      },
+      {
+        "date": "11.08.2022",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": "TeomaHK",
+        "first": false
+      },
+      {
+        "date": "11.07.2022",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": "TeomaHK",
+        "first": false
+      },
+      {
+        "date": "03.06.2022",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": "TeomaHK",
+        "first": false
+      },
+      {
+        "date": "11.05.2022",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "ub1x",
+        "first": true
+      },
+      {
+        "date": "03.05.2022",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": "TeomaHK",
+        "first": false
+      },
+      {
+        "date": "04.04.2022",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": "TeomaHK",
+        "first": false
+      },
+      {
+        "date": "15.03.2022",
+        "amount": 1,
+        "via": "banktransfer",
+        "from": "Jonathan Klatt",
+        "first": false
+      },
+      {
+        "date": "10.03.2022",
+        "amount": 1.42,
+        "via": "banktransfer",
+        "from": "Jonathan Klatt",
+        "first": false
+      },
+      {
+        "date": "03.03.2022",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": "TeomaHK",
+        "first": false
+      },
+      {
+        "date": "14.02.2022",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": "TeomaHK",
+        "first": false
+      },
+      {
+        "date": "17.01.2022",
+        "amount": 1,
+        "via": "banktransfer",
+        "from": "Jonathan Klatt",
+        "first": true
+      },
+      {
+        "date": "03.01.2022",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": "TeomaHK",
+        "first": true
+      }
+    ]
+  },
+  {
+    "year": 2021,
+    "donations": [
+      {
+        "date": "30.11.2021",
+        "amount": 5,
+        "via": "banktransfer",
+        "from": "Rumo",
+        "first": false
+      },
+      {
+        "date": "16.11.2021",
+        "amount": 120,
+        "via": "banktransfer",
+        "from": "poetaster",
+        "first": true
+      },
+      {
+        "date": "16.11.2021",
+        "amount": 25,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      },
+      {
+        "date": "20.09.2021",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "Clemi",
+        "first": true
+      },
+      {
+        "date": "26.08.2021",
+        "amount": 18.27,
+        "via": "opencollective",
+        "from": "Skoop",
+        "first": true
+      },
+      {
+        "date": "18.08.2021",
+        "amount": 30,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      },
+      {
+        "date": "02.08.2021",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": null,
+        "first": false
+      },
+      {
+        "date": "01.06.2021",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "Rumo",
+        "first": true
+      },
+      {
+        "date": "26.04.2021",
+        "amount": 8.96,
+        "via": "banktransfer",
+        "from": null,
+        "first": false
+      },
+      {
+        "date": "23.03.2021",
+        "amount": 30,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      },
+      {
+        "date": "19.02.2021",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      },
+      {
+        "date": "02.02.2021",
+        "amount": 9.01,
+        "via": "opencollective",
+        "from": "Dennis H.",
+        "first": true
+      },
+      {
+        "date": "20.01.2021",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      },
+      {
+        "date": "17.01.2021",
+        "amount": 4.41,
+        "via": "opencollective",
+        "from": "Michael Haak",
+        "first": true
+      }
+    ]
+  },
+  {
+    "year": 2020,
+    "donations": [
+      {
+        "date": "04.12.2020",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      }
+    ]
+  }
+]

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/expenses.json

@@ -0,0 +1,33 @@
+[
+  {
+    "name": "Services",
+    "type": "Dedicated Server",
+    "provider": "Hetzner",
+    "location": "Falkenstein",
+    "amount": 75.8
+  },
+  {
+    "name": "Monitoring",
+    "type": "Cloud Server",
+    "provider": "Hetzner",
+    "location": "Nürnberg",
+    "amount": 4.51
+  },
+  {
+    "name": "Backup",
+    "type": "Storage Box",
+    "provider": "Hetzner",
+    "location": "Helsinki",
+    "amount": 12.97
+  },
+  {
+    "name": {
+      "en": "Websites",
+      "de": "Webseiten"
+    },
+    "type": "Webhosting",
+    "provider": "netcup",
+    "location": "Nürnberg",
+    "amount": 2.17
+  }
+]

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

@@ -1,81 +1,285 @@
 [
-  {
-    "id": "searx",
-    "name": "Searx",
-    "icon": "fas fa-search",
-    "url": "https://searx.sp-codes.de",
-    "summary": {
-      "de": "Eine privatsphären-respektierende, hackbare Metasuchmaschine.",
-      "en": "A privacy-respecting, hackable metasearch engine."
-    }
-  },
-  {
-    "id": "invidious",
-    "name": "Invidious",
-    "icon": "fab fa-youtube",
-    "url": "https://invidious.sp-codes.de",
-    "summary": {
-      "de": "Ein alternatives YouTube-Frontend.",
-      "en": "An alternative YouTube-Frontend."
-    }
-  },
-  {
-    "id": "connectivitycheck",
-    "name": "Captive Portal Check",
-    "icon": "fas fa-wifi",
-    "summary": {
-      "de": "Eine datenschutzfreundliches Tool, um Anmeldeseiten in WLAN-Netzwerken zu erkennen.",
-      "en": "A privacy friendly Service to detect captive portals in WIFI networks."
-    }
-  },
   {
     "id": "matrix",
     "name": "Matrix",
-    "icon": "fas fa-comments",
+    "icon": "i-comments",
     "url": "https://chat.sp-codes.de",
+    "status": "1",
     "summary": {
-      "de": "Ein offenes Netzwerk für sichere, dezentralisierte Kommunikation.",
-      "en": "An open network for secure, decentralized communication."
-    }
-  },
-  {
-    "id": "gitea",
-    "name": "Gitea",
-    "icon": "fas fa-code",
-    "url": "https://git.sp-codes.de",
-    "summary": {
-      "de": "Eine leichtgewichtige Code-Hosting-Plattform für git.",
-      "en": "A lightweight code hosting platform for git."
-    }
-  },
-  {
-    "id": "firefox-sync",
-    "name": "Firefox Sync",
-    "icon": "fab fa-firefox-browser",
-    "summary": {
-      "de": "Ein Service um Firefox Einstellungen, Lesezeichen, offene Tabs und vieles mehr über verschiedene Geräte zu synchronisieren.",
-      "en": "A service to sync Firefox settings, bookmarks, open tabs and much more between multiple devices."
-    }
+      "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",
     "name": "Jitsi Meet",
-    "icon": "fas fa-users",
+    "icon": "i-users",
     "url": "https://jitsi.sp-codes.de",
+    "status": "2",
     "summary": {
-      "de": "Eine sichere, einfache und skalierbare Plattform für Videokonferenzen.",
-      "en": "A secure, simple and scalable platform for video conferencing."
+      "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",
+    "name": "Mastodon",
+    "icon": "i-mastodon",
+    "url": "https://social.sp-codes.de",
+    "status": "7",
+    "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",
+    "name": "PeerTube",
+    "icon": "i-peertube",
+    "url": "https://tube.sp-codes.de",
+    "status": "9",
+    "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",
+    "name": "Pixelfed",
+    "icon": "i-pixelfed",
+    "url": "https://pixel.sp-codes.de",
+    "status": "11",
+    "beta": true,
+    "summary": {
+      "de": "Das soziale Netzwerk für den Austausch von Bildern und Fotografie.",
+      "en": "The social network for sharing images and photography."
     }
   },
+  {
+    "id": "forgejo",
+    "name": "Forgejo",
+    "icon": "i-git",
+    "url": "https://git.sp-codes.de",
+    "status": "13",
+    "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",
+    "name": "Captive Portal Check",
+    "icon": "i-wifi",
+    "status": "19",
+    "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",
+    "name": "ntfy",
+    "icon": "i-cloud-download",
+    "url": "https://ntfy.sp-codes.de",
+    "status": "18",
+    "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",
+    "name": "Etherpad",
+    "icon": "i-pencil-square",
+    "url": "https://pad.sp-codes.de",
+    "status": "17",
+    "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",
     "name": "Shields",
-    "icon": "fas fa-tags",
+    "icon": "i-tags",
     "url": "https://shields.sp-codes.de",
-    "beta": true,
+    "status": "20",
     "summary": {
-      "de": "Prägnante, konsistente und lesbare Badges im SVG- und Rasterformat.",
-      "en": "Concise, consistent, and legible badges in SVG and raster format."
-    }
+      "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,18 +0,0 @@
-{
-  "imprint": {
-    "de": "Impressum",
-    "en": "Imprint"
-  },
-  "privacy": {
-    "de": "Datenschutz",
-    "en": "Privacy"
-  },
-  "code": {
-    "de": "Code",
-    "en": "Code"
-  },
-  "stats": {
-    "de": "Statistiken",
-    "en": "Stats"
-  }
-}

src/_includes/donations-current.html

@@ -0,0 +1,32 @@
+<div class="table-container">
+    <table class="table">
+        <thead>
+        <tr>
+            <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>
+            <td>{{strings.donations[donation.via]}}</td>
+            {% if donation.from %}
+            <td>{{donation.from}}</td>
+            {% else %}
+            <td>***</td>
+            {% endif %}
+            <td>{{donation.amount | amount}} €</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+        <tfoot>
+        <tr>
+            <th colspan="3">{{strings.donations.total}}</th>
+            <th>{{donations[0].donations | sum | amount}} €</th>
+        </tr>
+        </tfoot>
+    </table>
+</div>

src/_includes/donations.html

@@ -0,0 +1,36 @@
+{% for year in donations %}
+<h2>{{year.year}}</h2>
+
+<div class="table-container">
+    <table class="table">
+        <thead>
+        <tr>
+            <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>
+            <td>{{strings.donations[donation.via]}}</td>
+            {% if donation.from %}
+            <td>{{donation.from}}</td>
+            {% else %}
+            <td>***</td>
+            {% endif %}
+            <td>{{donation.amount | amount}} €</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+        <tfoot>
+        <tr>
+            <th colspan="3">{{strings.donations.total}}</th>
+            <th>{{year.donations | sum | amount}} €</th>
+        </tr>
+        </tfoot>
+    </table>
+</div>
+{% endfor %}

src/_includes/expenses-current.html

@@ -0,0 +1,37 @@
+<div class="table-container">
+    <table class="table">
+        <thead>
+        <tr>
+            <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>
+        {% for expense in expenses %}
+        <tr>
+            {% if expense.name[locale] %}
+            <td>{{expense.name[locale]}}</td>
+            {% else %}
+            <td>{{expense.name}}</td>
+            {% endif %}
+            <td>{{expense.type}}</td>
+            <td>{{expense.provider}}</td>
+            <td>{{expense.location}}</td>
+            <td>{{expense.amount | amount}} €</td>
+            <td>{{expense.amount | year | amount}} €</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+        <tfoot>
+        <tr>
+            <th colspan="4">{{strings.donations.total}}</th>
+            <th>{{expenses | sum | amount}} €</th>
+            <th>{{expenses | sum | year | amount}} €</th>
+        </tr>
+        </tfoot>
+    </table>
+</div>

src/_includes/layouts/article.njk

@@ -0,0 +1,86 @@
+---
+layout: base.njk
+---
+
+<div class="row">
+    <div class="col-lg-8 col-12 article-content">
+        {% if tags %}
+        <div class="mb-2">
+            {% for tag in tags %}
+            <span class="badge bg-primary text-black">{{tag}}</span>
+            {% endfor %}
+        </div>
+        {% endif %}
+        {{ content | safe }}
+    </div>
+    <div class="col-lg-4 col-12">
+        {% if series %}
+        <div class="tab-card">
+            <div class="title">{{ strings.article.seriesParts }}</div>
+            <div class="card">
+                {%- 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>
+                {%- endfor %}
+            </div>
+        </div>
+        {% endif %}
+        {% if service %}
+        <div class="tab-card">
+            <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 %}
+                <div class="beta">TEST-PHASE</div>
+                {% endif %}
+                <div class="inner">
+                    <i class="{{service.icon}} i-4x i-fw"></i>
+                    <h2 class="mt-2 mb-1">{{service.name}}{% if service.url %} <a href="{{service.url}}"
+                                                                                  target="_blank"><i
+                            class="i-external-link"></i></a>{% endif %}</h2>
+                    {% if service.status %}
+                    <div class="mb-2">
+                        <a href="https://status.sp-codes.de" target="_blank">
+                            <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 %}
+                    <div>{{service.summary[locale]}}</div>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        <div class="tab-card">
+            <div class="title">{{ strings.article.questions }}</div>
+            <div class="card">{{ strings.article.questionsContent | safe }}</div>
+        </div>
+        <div class="tab-card">
+            <div class="title">{{ strings.article.aboutMe }}</div>
+            <div class="card">{{ strings.article.aboutMeContent | safe }}</div>
+        </div>
+        <div class="tab-card">
+            <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?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>
+                    <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>
+                    </a></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</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,68 +13,92 @@ 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.jpg">
+    <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">
-    <link rel="shortcut icon" href="img/samuel.png">
-    <link rel="stylesheet" href="/css/main.css">
-    <script async defer data-domain="sp-codes.de" src="https://plausible.sp-codes.de/js/plausible.js"></script>
+    <meta name="twitter:title" content="{{ site.title }} - {{ title }}">
+    <meta name="twitter:description" content="{{ summary }}">
+    <meta name="twitter:image" content="{{ site.url }}/img/og.jpg">
+    <link rel="shortcut icon" href="favicon.ico">
+    <link rel="icon" type="image/png" href="favicon.png">
+    <link rel="stylesheet" href="{{ '/css/main.css' | rev }}">
+    <script async defer data-website-id="47b8022b-0537-4bb2-baa5-455a87a36ff5" data-domains="sp-codes.de" src="https://umami.sp-codes.de/umami.js"></script>
 </head>
-  <body>
-    <div class="d-flex justify-content-start flex-wrap p-2 menu border-bottom">
-    {%- for entry in collections.all | eleventyNavigation %}
-      {% if not entry.url.startsWith("https") and entry.url.includes(locale) or entry.locale == locale %}
-        <div {% if entry.url == page.url %} class="active"{% endif %}>
-          <a href="{{ entry.url | url }}" class="mr-2">
-            {% if entry.icon %}<span class="fas fa-{{ entry.icon }} mr-2"></span>{% endif %}{{ entry.title }}
-          </a>
+<body>
+<nav class="nav menu border-bottom">
+    <div class="toggle">
+        <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-4">
+                <span class="fi-{{ language.icon }}" title="{{ language.label }}"></span>
+            </a>
         </div>
-      {% endif %}
-    {%- endfor %}
-    <div class="flex-grow-1"></div>
-    {% for language in site.languages %}
-      {% set translatedUrl = "/" + language.code + "/" %}
-      {% for item in collections.all %}
-        {% if item.data.key == key and item.data.locale == language.code and not item.data.hidden %}
-          {% set translatedUrl = item.url %}
-        {% endif %}
-      {% endfor%}
-      <div {% if language.code == locale %} class="active"{% endif %}>
-        <a href="{{ translatedUrl | url }}" class="ml-3">
-          <span class="flag-icon flag-icon-{{ language.icon }}" title="{{ language.label }}"></span>
+        {% endfor %}
+    </div>
+    <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>
-      </div>
-    {% endfor %}
+        {%- 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-4">
+                {% if entry.icon %}<span class="{{ entry.icon }} i-fw me-2"></span>{% endif %}{{ entry.title }}
+            </a>
+        </div>
+        {% endif %}
+        {%- endfor %}
     </div>
-    <div class="content">
-      <div class="container">
+
+    <div class="flex-grow-1"></div>
+
+    <div class="items lang-large">
+        {% for language in site.languages %}
+        <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>
+        {% endfor %}
+    </div>
+</nav>
+<div class="content">
+    <div class="container">
         {{ content | safe }}
-      </div>
     </div>
-    <div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
-        <div class="d-flex justify-content-start flex-wrap">
-            <div class="mr-3">Made with <span class="fas fa-heart highlight"></span> in Germany</div>
-            <div class="mr-3"><span class="far fa-copyright mr-2"></span>Samuel Philipp</div>
-        </div>
-        <div class="flex-sm-grow-1"></div>
-        <div class="d-flex justify-content-sm-start flex-wrap">
-            <div class="mr-3"><a href="/{{locale}}/imprint"><span class="fas fa-info-circle mr-2"></span>{{strings.imprint[locale]}}</a></div>
-            <div class="mr-3"><a href="/{{locale}}/privacy"><span class="fas fa-user-secret mr-2"></span>{{strings.privacy[locale]}}</a></div>
-            <div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span class="fas fa-code mr-2"></span>{{strings.code[locale]}}</a></div>
-            <div><a target="_blank" href="https://plausible.sp-codes.de/sp-codes.de"><span class="fas fa-chart-line mr-2"></span>{{strings.stats[locale]}}</a></div>
-        </div>
+</div>
+<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-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>
-  </body>
+    <div class="flex-sm-grow-1"></div>
+    <div class="d-flex justify-content-sm-start flex-wrap">
+        <div class="me-4"><a href="/{{locale}}/imprint"><span class="i-info-circle me-2"></span>{{strings.menu.imprint}}</a>
+        </div>
+        <div class="me-4"><a href="/{{locale}}/privacy"><span class="i-user-secret me-2"></span>{{strings.menu.privacy}}</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-2"></span>{{strings.menu.stats}}</a></div>
+    </div>
+</div>
+</body>
 </html>

src/_includes/layouts/home.njk

@@ -1,10 +0,0 @@
----
-layout: base.njk
----
-<div class="row py-5">
-  <div class="col">
-    <img class="logo" src="img/samuel.png">
-  </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-right mt-3" href="https://status.sp-codes.de" target="_blank"><i class="fas fa-heartbeat mr-2"></i>Status</a>
-
-{{ content | safe }}
-
-<div class="row justify-content-center">
-  {% include 'services-extended.html' %}
-</div>

src/_includes/licenses.html

@@ -0,0 +1,8 @@
+<ul>
+    <li><a href="https://simpleicons.org/">Simple Icons</a> (<a href="https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md">CC0</a>)</li>
+    <li><a href="https://fontawesome.com/">Font Awesome</a> (<a href="https://github.com/FortAwesome/Font-Awesome/blob/master/LICENSE.txt">CC BY 4.0</a>)</li>
+    <li><a href="https://flagicons.lipis.dev/">flag-icon-css</a> (<a href="https://github.com/lipis/flag-icon-css/blob/master/LICENSE">MIT</a>)</li>
+    <li><a href="https://getbootstrap.com/">Bootstrap</a> (<a href="https://github.com/twbs/bootstrap/blob/main/LICENSE">MIT</a>)</li>
+    <li><a href="https://www.11ty.dev/">11ty</a> (<a href="https://github.com/11ty/eleventy/blob/master/LICENSE">MIT</a>)</li>
+    <li><a href="https://github.com/sass/node-sass">node-sass</a> (<a href="https://github.com/sass/node-sass/blob/master/LICENSE">MIT</a>)</li>
+</ul>

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,22 +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="fas fa-fw fa-4x fa-envelope"></span></a></div>
-    <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
-        <img class="matrix-icon" src="../img/matrix.png" alt=""></a></div>
-    <div class="m-2"><a rel="me" href="https://social.tchncs.de/@samuel_p"><span
-            class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
-    <div class="m-2"><a href="https://stackoverflow.com/users/9662601/samuel-p"><span
-            class="fab fa-fw fa-4x fa-stack-overflow"></span></a></div>
-    <div class="m-2"><a href="https://gitlab.com/samuel-p"><span
-            class="fab fa-fw fa-4x fa-gitlab"></span></a></div>
-    <div class="m-2"><a href="https://github.com/samuel-p"><span
-            class="fab fa-fw fa-4x fa-github"></span></a></div>
-    <div class="m-2"><a href="https://hub.docker.com/u/samuelph"><span
-            class="fab fa-fw fa-4x fa-docker"></span></a></div>
-</div>
-
-<div class="d-flex justify-content-center mb-3">
-    <div class="lead text-center">
-        <a href="https://samuel-philipp.de">samuel-philipp.de</a>
-    </div>
+<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><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><a rel="me" href="https://social.sp-codes.de/@samuel_p">
+        <span class="i-mastodon i-2x i-fw"></span>
+    </a></div>
+    <div><a rel="me" href="https://www.xing.com/profile/Samuel_Philipp">
+        <span class="i-xing i-2x i-fw"></span>
+    </a></div>
+    <div><a rel="me" href="https://www.linkedin.com/in/samuel-philipp">
+        <span class="i-linkedin i-2x i-fw"></span>
+    </a></div>
+    <div><a href="https://git.sp-codes.de/samuel-p">
+        <span class="i-git i-2x i-fw"></span>
+    </a></div>
+    <div><a href="https://github.com/samuel-p">
+        <span class="i-github i-2x i-fw"></span>
+    </a></div>
+    <div><a href="https://stackoverflow.com/users/9662601/samuel-p">
+        <span class="i-stackoverflow i-2x i-fw"></span>
+    </a></div>
 </div>

src/_includes/services-extended.html

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

src/_includes/services-simple.html

@@ -1,13 +0,0 @@
-{%- for service in services %}
-<div class="col-12 col-md-6 p-3">
-    <div class="service flat">
-        <a class="link 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}} fa-fw fa-2x"></i>
-            <h2 class="mt-2">{{service.name}}</h2>
-        </a>
-    </div>
-</div>
-{%- endfor %}

src/_includes/services.html

@@ -0,0 +1,23 @@
+{%- for service in services %}
+<div class="col-12 col-md-6 col-lg-4 p-3">
+    <div class="card service">
+        <a class="link" {% if service.beta !=true %} href="/{{locale}}/services/{{service.id}}" {% endif %}></a>
+        {% if service.beta == true %}
+        <div class="beta">TEST-PHASE</div>
+        {% endif %}
+        <div class="inner">
+            <i class="{{service.icon}} i-4x i-fw"></i>
+            <h2 class="mt-2 mb-1">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
+                    class="i-external-link"></i></a>{% endif %}</h2>
+            {% if service.status %}
+            <div class="mb-2">
+                <a href="https://status.sp-codes.de" target="_blank">
+                    <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 %}
+            <div>{{service.summary[locale]}}</div>
+        </div>
+    </div>
+</div>
+{%- endfor %}

src/de/about.md

@@ -0,0 +1,11 @@
+---
+key: about
+eleventyNavigation:
+  key: about
+  title: Über mich
+  icon: i-user-secret
+  url: https://samuel-philipp.de/
+  locale: de
+  order: 1
+permalink: false
+---

src/de/all-donations.html

@@ -0,0 +1,11 @@
+---
+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>
+
+<p><a href="/{{locale}}/donate/">&#10132; Unterstützen</a></p>
+
+{% include "donations.html" %}

src/de/blog.md

@@ -1,11 +0,0 @@
----
-key: blog
-eleventyNavigation:
-  key: blog
-  title: Blog
-  icon: book
-  url: https://blog.sp-codes.de/
-  locale: de
-  order: 1
-permalink: false
----

src/de/contact.html

@@ -0,0 +1,64 @@
+---
+layout: base.njk
+key: contact
+title: Kontakt
+summary: Kontaktinformationen zu Admins oder Moderation von sp-codes.
+eleventyNavigation:
+  key: contact
+  title: Kontakt
+  icon: i-commenting
+  order: 3
+---
+<h1><i class="i-commenting"></i> Kontaktmöglichkeiten</h1>
+<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 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 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 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?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 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 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

@@ -0,0 +1,85 @@
+---
+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
+  icon: i-hand-holding-heart
+  order: 4
+---
+<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 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 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>.
+                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.donations.supporters }}"
+                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters }}-{{ donations | banktransfers }}-active">
+                </div>
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="i-money-bill i-fw m-2"></i>Bargeld</h2>
+            <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.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>Hetzner</h2>
+            <div>Fast alle meiner Dienste hoste ich bei <a href="https://www.hetzner.com/" target="_blank">Hetzner</a>.
+                Wenn du einen eigenen Server in der Hetzner-Cloud betreiben willst, kannst du gerne den folgenden Link
+                nutzen. Dadurch erhalte ich bei deiner Bestellung eine kleine Provision. Falls du ein Neukunde bist,
+                erhältst du 20 € Startguthaben bei deiner Bestellung.
+            </div>
+            <div class="mt-3 text-center">
+                <a href="https://hetzner.cloud/?ref=5zWtNOF3q8i8"
+                   target="_blank">Gutschein einlösen</a>
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="i-network-wired i-fw m-2"></i>netcup</h2>
+            <div>Auch <a href="https://www.netcup.de/" target="_blank">netcup</a> nutze ich gelegentlich für kleinere
+                Projekte. Wenn du einen eigenen Server oder eine Webseite bei netcup betreiben willst, kannst du gerne
+                den folgenden Link nutzen. Dadurch erhalte ich bei deiner Bestellung eine kleine Provision. Falls du
+                ein Neukunde bist, erhältst du einen 5 € Gutschein für deine Bestellung.
+            </div>
+            <div class="mt-3 text-center">
+                <a href="https://www.netcup.de/bestellen/gutschein_einloesen.php?gutschein=36nc16071208640"
+                   target="_blank">Gutschein einlösen</a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<h2>Aktuelle Ausgaben</h2>
+{% include "expenses-current.html" %}
+
+<h2>Spenden {{donations[0].year}}</h2>
+{% include "donations-current.html" %}
+
+<p><a href="/{{locale}}/all-donations/">&#10132; Alle Spenden</a></p>
+
+<div class="border-top mt-5 pt-2">
+    <p><small><sup>1</sup> Bei den geleisteten Zahlungen handelt sich um Schenkungen im Sinne von § 516 BGB,
+        nicht um steuerlich absetzbare Spenden im Sinne des Steuerrechts.</small></p>
+</div>

src/de/imprint.html

@@ -1,42 +1,33 @@
 ---
 layout: base.njk
 title: Impressum
+summary: Impressum von sp-codes – Informationen zu Rechtsinhaber und Kontaktangaben.
 ---
-<h1>Impressum</h1>
-<div class="mb-3 border-bottom">
+<h1><i class="i-info-circle"></i> Impressum</h1>
+<div class="mb-4">
     <h2>Angaben gemäß § 5 TMG:</h2>
-    <p>Samuel Philipp
+    <p>Samuel Philipp<br/>
         Otto-von-Guericke-Straße 40a<br/>
         39104 Magdeburg<br/>
         Deutschland</p>
-    <h2>Kontaktmöglichkeiten</h2>
-    <p><strong>E-Mail-Adresse</strong>: <a href="mailto:info@sp-codes.de" target="_blank">info@sp-codes.de</a></p>
-    <!--<p><strong>Kontaktformular</strong>: <a href="https://sp-codes.de/contact" target="_blank">https://sp-codes.de/contact</a></p>-->
 </div>
-<div class="mb-3 border-bottom">
-    <h2>Haftungs- und Urheberrechtshinweise</h2>
-    <p><strong>Haftungsausschluss:</strong> Die Inhalte dieses Onlineangebotes wurden sorgfältig und nach unserem
-        aktuellen Kenntnisstand erstellt, dienen jedoch nur der Information und entfalten keine rechtlich bindende
-        Wirkung, sofern es sich nicht um gesetzlich verpflichtende Informationen (z.B. das Impressum, die
-        Datenschutzerklärung, AGB oder Widerrufsbelehrungen für Verbraucher) handelt. Wir behalten uns vor, die
-        Inhalte
-        vollständig oder teilweise zu ändern oder zu löschen, soweit vertragliche Verpflichtungen unberührt bleiben.
-        Alle Angebote sind freibleibend und unverbindlich. </p>
-    <p><strong>Links auf fremde Webseiten:</strong> Inhalte fremder Webseiten, auf die wir direkt oder indirekt
-        verweisen, liegen außerhalb unseres Verantwortungsbereiches und machen wir uns nicht zu Eigen. Für alle
-        Inhalte
-        und insbesondere für Schäden, die aus der Nutzung der in den verlinkten Webseiten aufrufbaren Informationen
-        entstehen, haftet allein der Anbieter der verlinkten Webseiten.</p>
-    <p><strong>Urheberrechte und Markenrechte:</strong> Alle auf dieser Website dargestellten Inhalte, wie Texte,
-        Fotografien, Grafiken, Marken und Warenzeichen sind durch die jeweiligen Schutzrechte (Urheberrechte,
-        Markenrechte) geschützt. Die Verwendung, Vervielfältigung usw. unterliegen unseren Rechten oder den Rechten
-        der
-        jeweiligen Urheber bzw. Rechteverwalter.</p>
-    <p><strong>Hinweise auf Rechtsverstöße:</strong> Sollten Sie innerhalb unseres Internetauftritts Rechtsverstöße
-        bemerken, bitten wir Sie uns auf diese hinzuweisen. Wir werden rechtswidrige Inhalte und Links nach
-        Kenntnisnahme unverzüglich entfernen.</p>
+<div class="mb-3 pt-4 border-top">
+    <h2>Kontakt</h2>
+    <p>
+        <strong>E-Mail-Adresse:</strong> mail@sp-codes.de<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="{{ site.url }}">sp-codes.de</a></li>
+        <li><a href="https://sp-magic.de">sp-magic.de</a></li>
+    </ul>
+</div>
+<div class="mb-3 pt-4 border-top">
+    <h2>Lizenzen</h2>
+    <p>Diese Webseite nutzt die folgenden Bibliotheken mit ihren entsprechenden Lizenzen:</p>
+    {% include "licenses.html" %}
 </div>
-<p><a href="https://datenschutz-generator.de/?l=de"
-      title="Rechtstext von Dr. Schwenke - für weitere Informationen bitte anklicken." target="_blank"
-      rel="noopener noreferrer nofollow">Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas Schwenke</a>
-</p>

src/de/index.html

@@ -1,38 +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: 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, lies meinen <a href="https://blog.sp-codes.de">Blog</a> 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>
+        <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="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 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>
+
+<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.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">
+                <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-Ü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,229 +1,100 @@
 ---
 layout: base.njk
 title: Datenschutzerklärung
+summary: Datenschutzerklärung von sp-codes – Informationen zur Datenverarbeitung.
 ---
-<h1>Datenschutzerklärung</h1>
-<p>Stand: 29. Juni 2020</p>
-<h2>Inhaltsübersicht</h2>
-<ul>
-    <li><a href="/{{locale}}/privacy#m1">Verantwortlicher</a></li>
-    <li><a href="/{{locale}}/privacy#m2">Übersicht der Verarbeitungen</a></li>
-    <li><a href="/{{locale}}/privacy#m3">Maßgebliche Rechtsgrundlagen</a></li>
-    <li><a href="/{{locale}}/privacy#m4">Sicherheitsmaßnahmen</a></li>
-    <li><a href="/{{locale}}/privacy#m5">Bereitstellung des Onlineangebotes und Webhosting</a></li>
-    <li><a href="/{{locale}}/privacy#m6">Löschung von Daten</a></li>
-    <li><a href="/{{locale}}/privacy#m7">Änderung und Aktualisierung der Datenschutzerklärung</a></li>
-    <li><a href="/{{locale}}/privacy#m8">Rechte der betroffenen Personen</a></li>
-</ul>
-<div class="mb-3 border-bottom">
-    <h2 id="m1">Verantwortlicher</h2>
+<h1><i class="i-user-secret"></i> Datenschutzerklärung</h1>
+<div class="mb-3">
+    <h2>Verantwortlicher</h2>
     <p>
         Samuel Philipp<br>
         Otto-von-Guericke-Straße 40a<br>
         39104 Magdeburg, Deutschland<br>
     </p>
     <p>
-        <strong>E-Mail-Adresse:</strong> info@sp-codes.de<br>
-        <strong>Impressum:</strong> <a href="/{{locale}}/imprint"
-                                       target="_blank">http://sp-codes.de/{{locale}}/imprint</a>
+        <strong>E-Mail-Adresse:</strong> mail@sp-codes.de<br>
+        <strong>Kontaktmöglichkeiten:</strong> <a
+            href="/{{locale}}/contact">{{ site.url }}/{{locale}}/contact</a><br>
+        <strong>Impressum:</strong> <a href="/{{locale}}/imprint">{{ site.url }}/{{locale}}/imprint</a>
     </p>
 </div>
-<h2 id="m2">Übersicht der Verarbeitungen</h2>
-<div class="mb-3 border-bottom">
-    <p>Die nachfolgende Übersicht fasst die Arten der verarbeiteten Daten und die Zwecke ihrer Verarbeitung zusammen und
-        verweist auf die betroffenen Personen.</p>
-    <h3>Arten der verarbeiteten Daten</h3>
+<div class="mb-3">
+    <h2>Verarbeitung personenbezogener Daten</h2>
+    <h3>Server-Logs</h3>
+    <p>
+        Diese Webseite wird mit einem Webhosting-Paket von <a href="https://www.netcup.de">netcup</a> betrieben. Im
+        Rahmen der Bereitstellung dieser Webseite werden die folgenden Daten beim Aufruf dieser Webseite gespeichert:
+    </p>
     <ul>
-        <li>Inhaltsdaten (z.B. Texteingaben, Fotografien, Videos).</li>
-        <li>Meta-/Kommunikationsdaten (z.B. Geräte-Informationen, IP-Adressen).</li>
-        <li>Nutzungsdaten (z.B. besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten).</li>
+        <li>IP-Adresse der Anfrage</li>
+        <li>Dauer der Anfrage</li>
+        <li>URL der Anfrage</li>
+        <li>Referrer der Anfrage</li>
+        <li>User-Agent der Anfrage</li>
+        <li>Status der Antwort</li>
+        <li>Volumen der übertragenen Daten</li>
     </ul>
-    <h3>Kategorien betroffener Personen</h3>
+    <p>
+        Diese Informationen werden verwendet um den reibungslosen Betrieb der Webseite und Systemsicherheit und
+        -stabilität zu gewährleisten. Die Server-Logs werden maximal 14 Tage lang gespeichert.
+    </p>
+    <h3>Analysedienste</h3>
+    <p>
+        Wir verwenden die Open-Source-Software <a href="https://umami.is">umami</a>, bereitgestellt
+        von <a href="https://umami.sp-codes.de">umami.sp-codes.de</a>, um Website-Besuche, Seitenaufrufe usw. zu
+        zählen. Auf unseren öffentlichen Dashboards kannst du die gleichen Daten sehen wie wir:
+    </p>
     <ul>
-        <li>Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).</li>
+        <li><a href="https://umami.sp-codes.de/share/kBdKS5vR/samuel-philipp.de">samuel-philipp.de</a></li>
+        <li><a href="https://umami.sp-codes.de/share/gaJcXEyG/sp-codes.de">sp-codes.de</a></li>
+        <li><a href="https://umami.sp-codes.de/share/eEm9eppL/sp-magic.de">sp-magic.de</a></li>
     </ul>
-    <h3 id="m3">Maßgebliche Rechtsgrundlagen</h3>
-    <p>Im Folgenden teilen wir die Rechtsgrundlagen der
-        Datenschutzgrundverordnung (DSGVO), auf deren Basis wir die personenbezogenen Daten verarbeiten, mit. Bitte
-        beachten
-        Sie, dass zusätzlich zu den Regelungen der DSGVO die nationalen Datenschutzvorgaben in Ihrem bzw. unserem Wohn-
-        und
-        Sitzland gelten können. Sollten ferner im Einzelfall speziellere Rechtsgrundlagen maßgeblich sein, teilen wir
-        Ihnen
-        diese in der Datenschutzerklärung mit.</p>
+    <p>
+        Es werden keine Cookies verwendet und keine persönlich identifizierbaren Informationen gespeichert. Weitere
+        Informationen findest du in den <a href="https://umami.is/docs/faq">FAQ von umami</a>.
+    </p>
+</div>
+<div class="mb-3">
+    <h2>Weitergabe von Daten</h2>
+    <p>
+        Wie oben bereits erwähnt, verarbeiten wir alle Daten auf Servern unseres Hosting-Providers <a
+            href="https://www.netcup.de">netcup</a>. Darüber hinaus geben wir deine Daten nicht an Dritte weiter.
+    </p>
+</div>
+<div class="mb-3">
+    <h2>Deine Rechte</h2>
+    <p>
+        Du kannst jederzeit Auskunft darüber erhalten, ob und wenn ja welche Daten wir von dir verarbeiten, sowie eine
+        vollständige Kopie der von dir gespeicherten Daten. Zusätzlich kannst du die Berichtigung, Sperrung oder
+        Löschung deiner Daten verlangen. Außerdem steht dir ein Beschwerderecht bei der zuständigen Aufsichtsbehörde
+        zu und du hast das Recht der Verarbeitung deiner Daten zu widersprechen. Wenn du von deinen Rechten Gebrauch
+        machen willst oder andere Fragen zum Datenschutz hast, schreibe einfach ein E-Mail an die oben angegebene
+        Adresse.
+    </p>
+</div>
+<div class="mb-3">
+    <h2>Sicherheitsmaßnahmen</h2>
+    <p>
+        Zum Schutz der Übertragung nutzt diese Webseite eine SSL-, bzw. TLS-Verschlüsselung. Das erkennst du daran, dass
+        in der Adresszeile deines Browsers <code>https://</code> steht und in den meisten Browsern davor noch ein
+        Schloss
+        zu sehen ist. Des Weiteren verzichten wir sowohl auf Cookies, als auch auf Ressourcen aus Drittquellen und
+        nutzen
+        <code>DNSSEC</code> und HTTP-Security-Header, wie <code>HSTS</code> und <code>Referrer-Policy</code>. Gerne
+        Kannst
+        du dich auch selbst mit einem der folgenden Tools davon überzeugen:
+    </p>
     <ul>
-        <li><strong>Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO)</strong> - Die Verarbeitung ist zur
-            Wahrung
-            der berechtigten Interessen des Verantwortlichen oder eines Dritten erforderlich, sofern nicht die
-            Interessen
-            oder Grundrechte und Grundfreiheiten der betroffenen Person, die den Schutz personenbezogener Daten
-            erfordern,
-            überwiegen.
-        </li>
-    </ul>
-    <p><strong>Nationale Datenschutzregelungen in Deutschland</strong>: Zusätzlich zu den Datenschutzregelungen der
-        Datenschutz-Grundverordnung gelten nationale Regelungen zum Datenschutz in Deutschland. Hierzu gehört
-        insbesondere
-        das Gesetz zum Schutz vor Missbrauch personenbezogener Daten bei der Datenverarbeitung (Bundesdatenschutzgesetz
-        –
-        BDSG). Das BDSG enthält insbesondere Spezialregelungen zum Recht auf Auskunft, zum Recht auf Löschung, zum
-        Widerspruchsrecht, zur Verarbeitung besonderer Kategorien personenbezogener Daten, zur Verarbeitung für andere
-        Zwecke und zur Übermittlung sowie automatisierten Entscheidungsfindung im Einzelfall einschließlich Profiling.
-        Des
-        Weiteren regelt es die Datenverarbeitung für Zwecke des Beschäftigungsverhältnisses (§ 26 BDSG), insbesondere im
-        Hinblick auf die Begründung, Durchführung oder Beendigung von Beschäftigungsverhältnissen sowie die Einwilligung
-        von
-        Beschäftigten. Ferner können Landesdatenschutzgesetze der einzelnen Bundesländer zur Anwendung gelangen.</p>
-</div>
-<div class="mb-3 border-bottom">
-    <h2 id="m4">Sicherheitsmaßnahmen</h2>
-    <p>Wir treffen nach Maßgabe der gesetzlichen Vorgaben unter Berücksichtigung des
-        Stands der Technik, der Implementierungskosten und der Art, des Umfangs, der Umstände und der Zwecke der
-        Verarbeitung sowie der unterschiedlichen Eintrittswahrscheinlichkeiten und des Ausmaßes der Bedrohung der Rechte
-        und
-        Freiheiten natürlicher Personen geeignete technische und organisatorische Maßnahmen, um ein dem Risiko
-        angemessenes
-        Schutzniveau zu gewährleisten.</p>
-    <p>Zu den Maßnahmen gehören insbesondere die Sicherung der Vertraulichkeit, Integrität und Verfügbarkeit von Daten
-        durch
-        Kontrolle des physischen und elektronischen Zugangs zu den Daten als auch des sie betreffenden Zugriffs, der
-        Eingabe, der Weitergabe, der Sicherung der Verfügbarkeit und ihrer Trennung. Des Weiteren haben wir Verfahren
-        eingerichtet, die eine Wahrnehmung von Betroffenenrechten, die Löschung von Daten und Reaktionen auf die
-        Gefährdung
-        der Daten gewährleisten. Ferner berücksichtigen wir den Schutz personenbezogener Daten bereits bei der
-        Entwicklung
-        bzw. Auswahl von Hardware, Software sowie Verfahren entsprechend dem Prinzip des Datenschutzes, durch
-        Technikgestaltung und durch datenschutzfreundliche Voreinstellungen.</p>
-</div>
-<div class="mb-3 border-bottom">
-    <h2 id="m5">Bereitstellung des Onlineangebotes und Webhosting</h2>
-    <p>Um unser Onlineangebot sicher und effizient
-        bereitstellen zu können, nehmen wir die Leistungen von einem oder mehreren Webhosting-Anbietern in Anspruch, von
-        deren Servern (bzw. von ihnen verwalteten Servern) das Onlineangebot abgerufen werden kann. Zu diesen Zwecken
-        können
-        wir Infrastruktur- und Plattformdienstleistungen, Rechenkapazität, Speicherplatz und Datenbankdienste sowie
-        Sicherheitsleistungen und technische Wartungsleistungen in Anspruch nehmen.</p>
-    <p>Zu den im Rahmen der Bereitstellung des Hostingangebotes verarbeiteten Daten können alle die Nutzer unseres
-        Onlineangebotes betreffenden Angaben gehören, die im Rahmen der Nutzung und der Kommunikation anfallen. Hierzu
-        gehören regelmäßig die IP-Adresse, die notwendig ist, um die Inhalte von Onlineangeboten an Browser ausliefern
-        zu
-        können, und alle innerhalb unseres Onlineangebotes oder von Webseiten getätigten Eingaben.</p>
-    <p><strong>E-Mail-Versand und -Hosting</strong>: Die von uns in Anspruch genommenen Webhosting-Leistungen umfassen
-        ebenfalls den Versand, den Empfang sowie die Speicherung von E-Mails. Zu diesen Zwecken werden die Adressen der
-        Empfänger sowie Absender als auch weitere Informationen betreffend den E-Mailversand (z.B. die beteiligten
-        Provider)
-        sowie die Inhalte der jeweiligen E-Mails verarbeitet. Die vorgenannten Daten können ferner zu Zwecken der
-        Erkennung
-        von SPAM verarbeitet werden. Wir bitten darum, zu beachten, dass E-Mails im Internet grundsätzlich nicht
-        verschlüsselt versendet werden. Im Regelfall werden E-Mails zwar auf dem Transportweg verschlüsselt, aber
-        (sofern
-        kein sogenanntes Ende-zu-Ende-Verschlüsselungsverfahren eingesetzt wird) nicht auf den Servern, von denen sie
-        abgesendet und empfangen werden. Wir können daher für den Übertragungsweg der E-Mails zwischen dem Absender und
-        dem
-        Empfang auf unserem Server keine Verantwortung übernehmen.</p>
-    <p><strong>Erhebung von Zugriffsdaten und Logfiles</strong>: Wir selbst (bzw. unser Webhostinganbieter) erheben
-        Daten zu
-        jedem Zugriff auf den Server (sogenannte Serverlogfiles). Zu den Serverlogfiles können die Adresse und Name der
-        abgerufenen Webseiten und Dateien, Datum und Uhrzeit des Abrufs, übertragene Datenmengen, Meldung über
-        erfolgreichen
-        Abruf, Browsertyp nebst Version, das Betriebssystem des Nutzers, Referrer URL (die zuvor besuchte Seite) und im
-        Regelfall IP-Adressen und der anfragende Provider gehören.</p>
-    <p>Die Serverlogfiles können zum einen zu Zwecken der Sicherheit eingesetzt werden, z.B., um eine Überlastung der
-        Server
-        zu vermeiden (insbesondere im Fall von missbräuchlichen Angriffen, sogenannten DDoS-Attacken) und zum anderen,
-        um
-        die Auslastung der Server und ihre Stabilität sicherzustellen.</p>
-    <ul class="m-elements">
-        <li><strong>Verarbeitete Datenarten:</strong> Inhaltsdaten (z.B. Texteingaben, Fotografien, Videos),
-            Nutzungsdaten
-            (z.B. besuchte Webseiten, Interesse an Inhalten, Zugriffszeiten), Meta-/Kommunikationsdaten (z.B.
-            Geräte-Informationen, IP-Adressen).
-        </li>
-        <li><strong>Betroffene Personen:</strong> Nutzer (z.B. Webseitenbesucher, Nutzer von Onlinediensten).</li>
-        <li><strong>Rechtsgrundlagen:</strong> Berechtigte Interessen (Art. 6 Abs. 1 S. 1 lit. f. DSGVO).</li>
+        <li><a href="https://observatory.mozilla.org">Mozilla Observatory</a></li>
+        <li><a href="https://www.ssllabs.com/ssltest/">SSL Server Test</a></li>
+        <li><a href="https://webbkoll.dataskydd.net/de/">Webbkoll</a></li>
     </ul>
 </div>
-<div class="mb-3 border-bottom">
-    <h2 id="m6">Löschung von Daten</h2>
-    <p>Die von uns verarbeiteten Daten werden nach Maßgabe der gesetzlichen
-        Vorgaben gelöscht, sobald deren zur Verarbeitung erlaubten Einwilligungen widerrufen werden oder sonstige
-        Erlaubnisse entfallen (z.B., wenn der Zweck der Verarbeitung dieser Daten entfallen ist oder sie für den Zweck
-        nicht
-        erforderlich sind).</p>
-    <p>Sofern die Daten nicht gelöscht werden, weil sie für andere und gesetzlich zulässige Zwecke erforderlich sind,
-        wird
-        deren Verarbeitung auf diese Zwecke beschränkt. D.h., die Daten werden gesperrt und nicht für andere Zwecke
-        verarbeitet. Das gilt z.B. für Daten, die aus handels- oder steuerrechtlichen Gründen aufbewahrt werden müssen
-        oder
-        deren Speicherung zur Geltendmachung, Ausübung oder Verteidigung von Rechtsansprüchen oder zum Schutz der Rechte
-        einer anderen natürlichen oder juristischen Person erforderlich ist.</p>
-    <p>Weitere Hinweise zu der Löschung von personenbezogenen Daten können ferner im Rahmen der einzelnen
-        Datenschutzhinweise dieser Datenschutzerklärung erfolgen.</p>
+<div class="mb-3">
+    <h2>Änderung dieser Datenschutzerklärung</h2>
+    <p>
+        Durch die Weiterentwicklung dieser Webseite oder aufgrund von gesetzlichen Änderungen kann es sein, dass
+        wir auch diese Datenschutzerklärung anpassen müssen. Die aktuell gültige Datenschutzerklärung kannst du
+        jederzeit hier abrufen und ausdrucken.
+    </p>
 </div>
-<div class="mb-3 border-bottom">
-    <h2 id="m7">Änderung und Aktualisierung der Datenschutzerklärung</h2>
-    <p>Wir bitten Sie, sich regelmäßig über den Inhalt
-        unserer Datenschutzerklärung zu informieren. Wir passen die Datenschutzerklärung an, sobald die Änderungen der
-        von
-        uns durchgeführten Datenverarbeitungen dies erforderlich machen. Wir informieren Sie, sobald durch die
-        Änderungen
-        eine Mitwirkungshandlung Ihrerseits (z.B. Einwilligung) oder eine sonstige individuelle Benachrichtigung
-        erforderlich wird.</p>
-    <p>Sofern wir in dieser Datenschutzerklärung Adressen und Kontaktinformationen von Unternehmen und Organisationen
-        angeben, bitten wir zu beachten, dass die Adressen sich über die Zeit ändern können und bitten die Angaben vor
-        Kontaktaufnahme zu prüfen.</p>
-</div>
-<div class="mb-3 border-bottom">
-    <h2 id="m8">Rechte der betroffenen Personen</h2>
-    <p>Ihnen stehen als Betroffene nach der DSGVO verschiedene Rechte zu,
-        die sich insbesondere aus Art. 15 bis 21 DSGVO ergeben:</p>
-    <ul>
-        <li><strong>Widerspruchsrecht: Sie haben das Recht, aus Gründen, die sich aus Ihrer besonderen Situation
-            ergeben,
-            jederzeit gegen die Verarbeitung der Sie betreffenden personenbezogenen Daten, die aufgrund von Art. 6 Abs.
-            1
-            lit. e oder f DSGVO erfolgt, Widerspruch einzulegen; dies gilt auch für ein auf diese Bestimmungen
-            gestütztes
-            Profiling. Werden die Sie betreffenden personenbezogenen Daten verarbeitet, um Direktwerbung zu betreiben,
-            haben
-            Sie das Recht, jederzeit Widerspruch gegen die Verarbeitung der Sie betreffenden personenbezogenen Daten zum
-            Zwecke derartiger Werbung einzulegen; dies gilt auch für das Profiling, soweit es mit solcher Direktwerbung
-            in
-            Verbindung steht.</strong></li>
-        <li><strong>Widerrufsrecht bei Einwilligungen:</strong> Sie haben das Recht, erteilte Einwilligungen jederzeit
-            zu
-            widerrufen.
-        </li>
-        <li><strong>Auskunftsrecht:</strong> Sie haben das Recht, eine Bestätigung darüber zu verlangen, ob betreffende
-            Daten verarbeitet werden und auf Auskunft über diese Daten sowie auf weitere Informationen und Kopie der
-            Daten
-            entsprechend den gesetzlichen Vorgaben.
-        </li>
-        <li><strong>Recht auf Berichtigung:</strong> Sie haben entsprechend den gesetzlichen Vorgaben das Recht, die
-            Vervollständigung der Sie betreffenden Daten oder die Berichtigung der Sie betreffenden unrichtigen Daten zu
-            verlangen.
-        </li>
-        <li><strong>Recht auf Löschung und Einschränkung der Verarbeitung:</strong> Sie haben nach Maßgabe der
-            gesetzlichen
-            Vorgaben das Recht, zu verlangen, dass Sie betreffende Daten unverzüglich gelöscht werden, bzw. alternativ
-            nach
-            Maßgabe der gesetzlichen Vorgaben eine Einschränkung der Verarbeitung der Daten zu verlangen.
-        </li>
-        <li><strong>Recht auf Datenübertragbarkeit:</strong> Sie haben das Recht, Sie betreffende Daten, die Sie uns
-            bereitgestellt haben, nach Maßgabe der gesetzlichen Vorgaben in einem strukturierten, gängigen und
-            maschinenlesbaren Format zu erhalten oder deren Übermittlung an einen anderen Verantwortlichen zu fordern.
-        </li>
-        <li><strong>Beschwerde bei Aufsichtsbehörde:</strong> Sie haben ferner nach Maßgabe der gesetzlichen Vorgaben
-            das
-            Recht, bei einer Aufsichtsbehörde, insbesondere in dem Mitgliedstaat Ihres gewöhnlichen Aufenthaltsorts,
-            Ihres
-            Arbeitsplatzes oder des Orts des mutmaßlichen Verstoßes Beschwerde einzulegen, wenn Sie der Ansicht sind,
-            dass
-            die Verarbeitung der Sie betreffenden personenbezogenen Daten gegen die DSGVO verstößt.
-        </li>
-    </ul>
-</div>
-<p><a href="https://datenschutz-generator.de/?l=de"
-      title="Rechtstext von Dr. Schwenke - für weitere Informationen bitte anklicken." target="_blank"
-      rel="noopener noreferrer nofollow">Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas Schwenke</a>
-</p>

src/de/services.html

@@ -1,14 +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: server
+  icon: i-server
   order: 2
 ---
-<h1>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>
+<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 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>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="row justify-content-center">
+    {% include "services.html" %}
+</div>

src/de/services/connectivitycheck.md

@@ -1,62 +1,11 @@
 ---
-layout: base.njk
-key: connectivitycheck
-title: Captive Portal Check
+layout: service.njk
+service: connectivitycheck
 ---
-# 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 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

@@ -0,0 +1,12 @@
+---
+layout: service.njk
+service: 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 eingebunden. So können während einem Meeting gemeinsame Notizen festgehalten werden.
+
+## Weitere nützliche Links
+
+* [Etherpad Webseite](https://etherpad.org)
+* [Quellcode von Etherpad](https://github.com/ether/etherpad-lite)

src/de/services/firefox-sync.md

@@ -1,19 +0,0 @@
----
-layout: base.njk
-key: firefox-sync
-title: Firefox Sync
----
-# Firefox Sync
-
-Nutzt du Firefox auf mehreren Geräten zum Surfen? Dann kannst du mit Firefox Sync deine Browserdaten (Lesezeichen, offene Tabs, die Suchhistorie, uvm.) zwischen all deinen Geräten synchronisieren.
-
-Dafür benötigst du zunächst einen Firefox-Account und musst dich auf deinen Geräten damit anmelden. Standardmäßig nutzt du dann automatisch den Sync-Service von Mozilla. Möchtest du einen anderen Server nutzen, kannst du das in den Einstellungen ändern.
-
-__Seit Februar 2020 biete ich einen öffentlichen Service für Firefox-Sync an.__ Gerne kannst du ihn nutzen, um deine Daten zwischen deinen Geräten zu synchronisieren. 
-
-Tippe dafür [about:config](about:config) in die Adresszeile von Firefox und suche anschließend nach `identity.sync.tokenserver.uri` und setze den Wert auf `https://sync.firefox.sp-codes.de/token/1.0/sync/1.5`. Du nutzt nun den eingetragenen Sync-Service.
-
-## Weitere nützliche Links
-
-* [Firefox Sync](https://www.mozilla.org/de/firefox/accounts/)
-* [Quellcode](https://github.com/mozilla-services/syncserver)

src/de/services/forgejo.md

@@ -0,0 +1,16 @@
+---
+layout: service.njk
+service: forgejo
+---
+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.
+
+## 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)

src/de/services/gitea.md

@@ -1,24 +0,0 @@
----
-layout: base.njk
-key: gitea
-title: Gitea
----
-# Gitea
-
-Gitea ist eine einfache Code-Hosting-Plattform wie GitHub oder GitLab. Sie ist opensource und wird kontinuierlich weiterentwickelt. __Seit Ende 2019 betreibe ich eine eigene Gitea 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 Gitea betreibe ich noch Drone, eine Plattform, die Gitea um viele Continuous Integration Funktionen erweitert und beispielsweise automatisierte Builds und Deploys ermöglicht.
-
-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 Gitea geht's hier lang: [git.sp-codes.de](https://git.sp-codes.de)__
-
-__Wenn du bei Drone vorbeischauen willst, geht das hier: [ci.sp-codes.de](https://ci.sp-codes.de)__
-
-
-## Weitere nützliche Links
-
-* [Gitea Webseite](https://gitea.io/en-us/)
-* [Quellcode von Gitea](https://github.com/go-gitea/gitea)
-* [Drone Webseite](https://drone.io/)
-* [Quellcode von Drone](https://github.com/drone/drone)

src/de/services/invidious.md

@@ -1,18 +0,0 @@
----
-layout: base.njk
-key: invidious
-title: Invidious
----
-# Invidious
-
-Invidious ist ein alternatives Frontend für YouTube. 
-Da nur die nötigsten Verbindungen zu YouTube aufgebaut werden und viele sogar vom Server selber übernommen werden, erhöht Invidious die Privatsphäre der Nutzer:innen.
-
-__Seit Dezember 2019 betreibe ich eine öffentliche Invidious Instanz.__ Fühl dich frei, dort ein paar Videos anzuschauen.
-
-__Jetzt das erste Video schauen auf [invidious.sp-codes.de](https://invidious.sp-codes.de).__
-
-## Weitere nützliche Links
-
-* [Liste weiterer öffentlicher Server](https://github.com/omarroth/invidious/wiki/Invidious-Instances)
-* [Quellcode von Invidious](https://github.com/omarroth/invidious)

src/de/services/jitsi.md

@@ -1,18 +1,20 @@
 ---
-layout: base.njk
-key: jitsi
-title: Jitsi Meet
+layout: service.njk
+service: jitsi
 ---
-# 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.
+
+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

@@ -0,0 +1,44 @@
+---
+layout: service.njk
+service: 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. Nutzende können Text-, Bild-, Videonachrichten oder Umfragen also dienst- und serverübergreifend teilen.
+
+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).
+
+## Server-Details
+
+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
+
+* [Bundesbeauftragte für Datenschutz und Informationsfreiheit](https://social.bund.de/@bfdi)
+* [Bundesamt für Sicherheit in der Informationstechnik](https://social.bund.de/@bsi)
+* [Landesregierung Baden-Württemberg](https://mastodon.social/@RegierungBW)
+* [Landtag Rheinland-Pfalz](https://social.bund.de/@ltrlp)
+* [LfDI Baden-Württemberg](https://bawü.social/@lfdi)
+* [Umweltministerium Baden-Württemberg](https://bawü.social/@Umweltministerium)
+* [Verbraucherzentrale Schleswig-Holstein](https://troet.cafe/@verbraucherzentrale_sh)
+* [Digitalcourage e.V.](https://digitalcourage.social/@digitalcourage)
+* [Mobilsicher](https://mastodontech.de/@mobilsicher)
+* [Chaos Computer Club](https://social.bau-ha.us/@CCC)
+* [GLS Bank](https://ruhr.social/@glsbank)
+* [Fairphone](https://social.weho.st/@Fairphone)
+* [WEtell.Mobilfunk](https://chaos.social/@wetell)
+* [Gnu/Linux](https://social.anoxinon.de/@gnulinux)
+* [FragDenStaat](https://chaos.social/@fragdenstaat)
+* [Threema](https://mastodon.social/@threemaapp)
+* [Minetest](https://fosstodon.org/@Minetest)
+* [0 A.D.](https://mastodon.social/@play0ad)
+* [Ulrich Kelber](https://bonn.social/@ulrichkelber)
+* [Inga Klas](https://mastodon.social/@ingaklas)
+* [Mike Kuketz](https://social.tchncs.de/@kuketzblog)
+
+## Weitere nützliche Links
+
+* [Verschiedene Apps](https://joinmastodon.org/apps)
+* Listen mit öffentlichen Mastodon-Instanzen
+    * [joinmastodon.org](https://joinmastodon.org/communities)
+    * [instances.social](https://instances.social/)

src/de/services/matrix.md

@@ -1,25 +1,48 @@
 ---
-layout: base.njk
-key: matrix
-title: Matrix
+layout: service.njk
+service: matrix
 ---
-# 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.
 
-[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.
+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.
 
-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.
+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>.
 
-__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/)__
+## Server-Details
 
-Melde dich gerne auf meinem Server an oder suche dir einen aus der unten verlinkten Liste heraus. Ich freue mich auf deine Nachricht an [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de).
+Die sp-codes Serverregeln kannst du gerne [hier](https://matrix.sp-codes.de/_matrix/consent) nachlesen.
+
+**Das Limit für Datei-Uploads liegt bei 100 MB**. Für größere Dateien nutze bitte einen File-Sharing Dienst.
+
+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.**
+
+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?
+
+Hier möchte ich ein paar Gründe nennen, warum ich Matrix nutze und vielen anderen Messengern vorziehe:
+
+* Da die Server dezentral verteilt sind, bleibt das Netzwerk bestehen, auch wenn ein Server ausfällt.
+* Du kannst dir deinen Server-Anbieter frei aussuchen und bist nicht auf einen zentralen Anbieter angewiesen.
+* Matrix ist ohne Telefonnummer oder E-Mail-Adresse nutzbar.
+* Es gibt Apps für alle Plattformen (Handy, PC, Browser, etc.)
+* Standardmäßig werden die Nachrichten in privaten Chats und Gruppen Ende-zu-Ende verschlüsselt. Dadurch ist es auch für
+  den Server-Anbieter unmöglich, Nachrichten mitzulesen.
+* Das Protokoll (die Art wie Daten übertragen werden) ist frei, dadurch kann jeder die Funktionsweise überprüfen oder
+  neue Apps entwickeln, die dieses Protokoll verwenden.
+* Auch die Verschlüsselungsalgorithmen sind öffentlich zugänglich und überprüfbar. Sie sind nicht patentgeschützt durch
+  eine Firma.
+* Apps und Server sind quelloffen, wodurch die Funktionsweise und die Weiterentwicklung transparent nachvollziehbar
+  sind.
+* Matrix unterstützt Sprach- und Video-Telefonie, sowohl in privaten, als auch in Gruppen-Chats.
 
 ## Weitere nützliche Links
 
 * [Verschiedene Apps](https://matrix.org/clients)
 * [Liste öffentlicher Räume](https://view.matrix.org/)
 * Listen mit öffentlichen Matrix-Servern
+  * [joinmatrix.org](https://joinmatrix.org/servers)
   * [hello-matrix.net](https://www.hello-matrix.net/public_servers.php)
-  * [anchel.nl](https://www.anchel.nl/matrix-publiclist/)
   * [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

@@ -0,0 +1,172 @@
+---
+layout: article.njk
+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
+  - Messenger
+  - Verschlüsselung
+  - Element
+  - FluffyChat
+---
+
+# Werde Teil der Matrix - Matrix Teil 1
+
+[Matrix](https://matrix.org) ist ein dezentraler Messenger. Dezentral bedeutet, es gibt nicht den einen Server, den alle
+verwenden müssen, sondern jede:r kann sich einen eigenen Matrix-Server aussuchen. In etwa so wie bei E-Mail.
+
+In diesem Beitrag möchte ich nun erklären, wie man sich dort anmelden kann und mit welchen Apps man mit seinen Liebsten
+in Kontakt treten kann. In den folgenden Artikeln dieser Serie werde ich auf weitere Themen, wie Ende-zu-Ende
+Verschlüsselung, Kontakt-Verifizierung und das Erstellen von privaten und öffentlichen Gruppen, eingehen.
+
+## Anbieter wählen
+
+Zunächst muss man sich einen Server-Anbieter auswählen, bei dem man sich registrieren möchte. Im Matrix-Netzwerk spricht
+man auch vom Homeserver, also der Server, bei dem man "zu Hause" ist, bzw. sein Konto hat. Hierfür kann man im Internet
+suchen oder eine der folgenden öffentlichen Listen verwenden, um einen Provider zu finden, der den eigenen Vorstellungen
+entspricht:
+
+* [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)
+
+Wichtig hierbei ist auch, dass der Servername immer ein Teil der eigenen Matrix-ID sein wird, also dem Anmeldenamen, mit
+dem man sich anmeldet, oder über den Anderen mit dir in Kontakt treten können. (Also genau wie mit deiner E-Mail-Adresse
+auch.) Die Matrix-ID sieht also folgendermaßen aus:
+
+```
+@[name]:[server]
+```
+
+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?via=matrix.sp-codes.de)
+
+## App wählen
+
+Da Matrix ein quelloffenes Netzwerk ist, kann jede:r dazu beitragen und eigene Apps entwickeln. Dadurch gibt es nicht
+die eine App, die zwingend verwendet werden muss. Ich möchte deshalb hier kurz zwei Apps vorstellen, die meiner Ansicht
+nach gut für den Einstieg geeignet sind:
+
+### [Element](https://element.io/)
+
+Element ist die wohl am weitesten verbreitetste App im Matrix-Netzwerk. Die App ist für Android, iOS, PC und auch als
+Browser-Version verfügbar. Für Android kann Element über
+den [PlayStore](https://play.google.com/store/apps/details?id=im.vector.app) oder
+über [F-Droid](https://f-droid.org/packages/im.vector.app/) installiert werden. Für iOS kann die App über
+den [AppStore](https://apps.apple.com/app/vector/id1083446067) heruntergeladen werden. Um die Desktop-Version zu
+installieren, schau am besten auf der offiziellen [Seite](https://element.io/get-started) nach.
+
+Alle Versionen (Android, iOS, Desktop und Web) sind kostenlos und Open-Source. Das heißt, jede:r kann den Quellcode
+einsehen, Fehler melden und an Verbesserungen mitarbeiten.
+
+Da der Quellcode frei verfügbar ist, können auch andere Apps erstellt werden, die auf Element basieren. Einer davon ist
+SchildiChat.
+
+[SchildiChat](https://f-droid.org/packages/de.spiritcroc.riotx/) ist ein Messenger, der auf Element basiert und ein paar
+kleinere Änderungen mit sich bringt. Darunter eine andere Darstellung der Chatverläufe mit Sprechblasen. SchildiChat ist
+nur für Android verfügbar.
+
+### [FluffyChat](https://fluffychat.im/)
+
+Eine andere, einfach zu bedienende App ist FluffyChat. Auch FluffyChat ist
+für [Android](https://play.google.com/store/apps/details?id=chat.fluffy.fluffychat), [iOS](https://testflight.apple.com/join/hL6Tyyaj),
+Desktop und als [Browser-Anwendung](https://web.fluffychat.im/) verfügbar. Um FluffyChat zu installieren, schau am
+besten direkt auf der Webseite [fluffychat.im](https://fluffychat.im/) vorbei. Wie Element, ist auch FluffyChat
+Open-Source. FluffyChat versucht sich in der Bedienung und im Design an herkömmlichen Messengern zu orientieren.
+
+### Mehr Apps
+
+Es gibt noch einige Apps mehr, die teilweise auch noch in der Entwicklung sind. Eine weitere Auswahl an Apps findest du
+auf der folgenden Seite: [https://matrix.org/clients/](https://matrix.org/clients/)
+
+## Anmelden
+
+Nachdem du dich nun für einen vertrauenswürdigen Anbieter entschieden und eine App installiert hast, die dir zusagt,
+kannst du dir nun einen Account anlegen. Im Folgenden werde ich die App Element unter Android verwenden, das Vorgehen
+wird aber in anderen Apps ähnlich sein.
+
+Nach der Startseite wählst du zunächst „Andere“ und gibst anschließend die Server-Adresse deines Anbieters ein. Nun
+wählst du deinen Anmeldenamen und ein sicheres Passwort, gibst beides in die entsprechenden Felder ein und schon wird
+dein Matrix-Account erstellt. Es kann sein, dass du während des Erstellens deines Accounts ein bisschen warten musst,
+das kann je nach Server-Auslastung ein bisschen dauern.
+
+<div class="row img-gallery">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/1start.png">
+<img src="/img/matrix/setup/part-1/1start.png">
+<small>Zuerst die App starten.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/2anbieter.png">
+<img src="/img/matrix/setup/part-1/2anbieter.png">
+<small>„Andere“ auswählen um einen eigenen Anbieter zu verwenden.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/3server-name.png">
+<img src="/img/matrix/setup/part-1/3server-name.png">
+<small>Die Server-Adresse des Anbieters eingeben und „Registrieren“ oder „Anmelden“ auswählen.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/4anmelden.png">
+<img src="/img/matrix/setup/part-1/4anmelden.png">
+<small>Benutzername und Passwort eingeben.</small>
+</a>
+</div>
+</div>
+
+## Kontakte hinzufügen
+
+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?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
+und tippst anschließend auf „Erstellen“. Jetzt heißt es ein bisschen warten, bis dein:e Chatpartner:in deine Einladung
+angenommen hat.
+
+<div class="row img-gallery">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/6home.png">
+<img src="/img/matrix/setup/part-1/6home.png">
+<small>Einen neuen Chat mit dem grünen Button starten.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/7neu.png">
+<img src="/img/matrix/setup/part-1/7neu.png">
+<small>„Mit Matrix-ID hinzufügen“ auswählen.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/8matrix-id.png">
+<img src="/img/matrix/setup/part-1/8matrix-id.png">
+<small>Matrix-ID eingeben und Chat erstellen.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/9chat.png">
+<img src="/img/matrix/setup/part-1/9chat.png">
+<small>Chatten.</small>
+</a>
+</div>
+</div>
+
+## Wie geht’s weiter?
+
+Im [nächsten Artikel](/de/services/matrix/setup/part-2/) dieser Serie werde ich über
+Ende-zu-Ende-Verschlüsselung und Verifikation der Kontakte schreiben. Bis dahin viel Spaß beim Chatten.
+
+Falls du jetzt schon weiter lesen willst, kann ich dir die folgenden Links empfehlen, allerdings teilweise auf Englisch:
+
+* [https://element.io/help](https://element.io/help)
+* [https://matrix.org/faq/](https://matrix.org/faq/)
+* [https://matrix.org/docs/guides/](https://matrix.org/docs/guides/)

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

@@ -0,0 +1,176 @@
+---
+layout: article.njk
+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
+  - Messenger
+  - Verschlüsselung
+  - Element
+---
+
+# Sichere Chats mit Matrix – Matrix Teil 2
+
+Im [ersten Teil](/de/services/matrix/setup/part-1/) der Matrix-Serie habe ich erklärt, wie du dir einen Matrix-Account anlegen und mit deinen Kontakten einen Chat beginnen kannst. In diesem Teil möchte ich nun darauf aufbauen und erklären, was es mit Ende-zu-Ende-Verschlüsselung und der Verifizierung von Kontakten auf sich hat. Wenn Matrix also neu für dich ist, würde ich dir empfehlen, dir zunächst den [ersten Teil](/de/services/matrix/setup/part-1/) anzuschauen und anschließend hier weiterzulesen.
+
+## Ende-zu-Ende-Verschlüsselung aktivieren
+
+Durch [Ende-zu-Ende-Verschlüsselung](https://de.wikipedia.org/wiki/Ende-zu-Ende-Verschl%C3%BCsselung) wird sichergestellt, dass die Nachrichten, die du schreibst, auf deinem Gerät verschlüsselt und erst auf dem Gerät der Person, die die Nachrichten empfängt, entschlüsselt werden können. Dadurch ist es also selbst für den:die Server-Betreiber:in unmöglich, deine Nachrichten zu lesen. Deshalb ist es empfehlenswert, Ende-zu-Ende-Verschlüsselung zu nutzen.
+
+Je nach App wird die Ende-zu-Ende-Verschlüsselung direkt beim Erstellen eines Chats aktiviert oder es wird dort die Möglichkeit zur Aktivierung gegeben. Wenn die Verschlüsselung nicht beim Erstellen aktiviert wird, sollte sie für private Chats danach aktiviert werden. In Element geht, das wie folgt:
+
+<div class="row img-gallery">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/e2ee1.png">
+<img src="/img/matrix/setup/part-2/e2ee1.png">
+<small>Öffne das Chat-Menü durch Tippen auf den Namen in der oberen Leiste. Anschließend wählst du „Einstellungen“ aus.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/e2ee2.png">
+<img src="/img/matrix/setup/part-2/e2ee2.png">
+<small>In den Raum-Einstellungen wählst du dann „Ende-zu-Ende-Verschlüsselung aktivieren“ aus.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/e2ee3.png">
+<img src="/img/matrix/setup/part-2/e2ee3.png">
+<small>Nun kannst du die Ende-zu-Ende-Verschlüsselung aktivieren.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/e2ee4.png">
+<img src="/img/matrix/setup/part-2/e2ee4.png">
+<small>Ob die Ende-zu-Ende-Verschlüsselung aktiviert ist, kannst du unter „Sicherheit“ sehen.</small>
+</a>
+</div>
+</div>
+
+Wenn du in einem Chat die Ende-zu-Ende-Verschlüsselung aktiviert hast, ist es außerdem ratsam, die Schlüsselsicherung einzurichten. Dafür musst du ein zusätzliches Schlüsselpasswort verwenden. Mit diesem Passwort kannst du verschlüsselte Chats auch auf anderen Geräten wiederherstellen. Element wird dich dazu auffordern, ein Schlüsselpasswort zu setzen, wenn es notwendig ist:
+
+<div class="row img-gallery">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/key1.png">
+<img src="/img/matrix/setup/part-2/key1.png">
+<small>Element zeigt die eine Benachrichtigung zum Setzen eines Schlüsselpassworts an.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/key2.png">
+<img src="/img/matrix/setup/part-2/key2.png">
+<small>Wenn du auf die Benachrichtigung klickst, öffnet sich diese Auswahl.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/key3.png">
+<img src="/img/matrix/setup/part-2/key3.png">
+<small>Wenn du „Benutze einen Sicherheitsschlüssel“ wählst, wird ein zufälliger Schlüssel generiert, den du an einem sicheren Ort aufbewahren solltest.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/key4.png">
+<img src="/img/matrix/setup/part-2/key4.png">
+<small>Wenn du „Benutze Sicherheitsphrase“ wählst, kannst du selber ein Passwort festlegen.</small>
+</a>
+</div>
+</div>
+
+Wenn du diese Benachrichtigung nicht bekommst, kannst du auch in den Einstellungen unter „Sicherheit & Privatsphäre“ > „Wiederherstellung verschlüsselter Nachrichten“ die Schlüsselsicherung einrichten. Außerdem kannst du dort die Schlüsselsicherung zurücksetzen, wenn du dein Schlüsselpasswort vergessen hast.
+
+Um die Schlüsselsicherung in einer neuen Sitzung wiederherzustellen, kannst du entweder die Sitzung von einem anderen Gerät verifizieren (siehe unten Cross Signing) oder du nutzt dein Schlüsselpasswort. Gehe hierfür in die Einstellungen und wähle unter „Sicherheit & Privatsphäre“ die Option „Wiederherstellung verschlüsselter Nachrichten“ und anschließend „Von Sicherung wiederherstellen“. Damit sollten alle Nachrichten in deinen verschlüsselten Chats auch in dieser Sitzung wieder lesbar sein.
+
+## Kontakte verifizieren
+
+Zusätzlich zur Ende-zu-Ende-Verschlüsselung kannst du mithilfe der Kontaktverifizierung sicherstellen, dass du mit der richtigen Person schreibst und du nicht Opfer eines [Man-In-The-Middle-Angriffs](https://de.wikipedia.org/wiki/Man-in-the-Middle-Angriff) wirst.
+
+In Element kann die Kontakt-Verifizierung über einen QR-Code Scan oder über den Vergleich von Emojis oder eines Texts durchgeführt werden. Um einen Kontakt zu verifizieren, wähle den Chat mit der Person aus und tippe anschließend auf den Namen in der Titelzeile. Nun geht es wie folgt weiter:
+
+<div class="row img-gallery">
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren1.png">
+<img src="/img/matrix/setup/part-2/verifizieren1.png">
+<small>Wähle im Chat-Menü „Personen“ aus und anschließend die Person, die du verifizieren willst.</small>
+</a>
+</div>
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren2.png">
+<img src="/img/matrix/setup/part-2/verifizieren2.png">
+<small>In der Kontaktansicht kannst du nun „Verifizieren“ auswählen.</small>
+</a>
+</div>
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren3.png">
+<img src="/img/matrix/setup/part-2/verifizieren3.png">
+<small>Starte die Verifizierung, indem du auf „Verifizierung beginnen“ tippst.</small>
+</a>
+</div>
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren4.png">
+<img src="/img/matrix/setup/part-2/verifizieren4.png">
+<small>Anschließend kannst du direkt den QR-Code deines Kontakts scannen, wenn du die Möglichkeit hast. Wenn nicht, tippe auf „Kann nicht scannen“.</small>
+</a>
+</div>
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren5.png">
+<img src="/img/matrix/setup/part-2/verifizieren5.png">
+<small>Wenn du nicht scannen kannst, kannst du deinen Kontakt mit einer Reihe zufälliger Emojis verifizieren.</small>
+</a>
+</div>
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren6.png">
+<img src="/img/matrix/setup/part-2/verifizieren6.png">
+<small>Nachdem ihr euch erfolgreich verifiziert habt, seht ihr beide dieses grüne Schild.</small>
+</a>
+</div>
+</div>
+
+Die einzelnen Schritte der Verifizierung können eine Weile dauern. Warte deshalb etwas ab, bevor du die Verifizierung abbrichst. Um die Verifizierung eines Kontakts sicher durchzuführen, mache sie entweder wenn ihr euch real trefft oder tauscht die Emojis über einen unabhängigen, vertrauenswürdigen Kanal, z.B. am Telefon aus.
+
+## Cross Signing
+
+Um in Matrix zu chatten, kannst du beliebig viele Apps auf verschiedenen Geräten, dem Handy, am PC, im Browser, etc. nutzen. Damit du aber nicht alle deine Geräte mit allen Geräten deiner Kontakte verifizieren musst, gibt es seit einiger Zeit das sogenannte Cross Signing. Hierfür verifiziert jede:r seine:ihre eigenen Geräte selbst. Die Verifizierung funktioniert wie die der Kontakte. Wenn du dich an einem neuen Gerät anmeldest, bekommst du in Element auf deinen anderen Geräten eine Benachrichtigung. Damit kannst du direkt die Verifizierung initiieren.
+
+Alternativ kannst du auch alle deine Sitzungen in den Einstellungen verifizieren. Gehe hierfür in den Einstellungen auf „Sicherheit & Privatsphäre“ und dann auf „Zeige alle Sitzungen“. Dort siehst du nun, welche Sitzungen bereits verifiziert sind und du kannst die übrigen Sitzungen verifizieren.
+
+<div class="row img-gallery">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/session1.png">
+<img src="/img/matrix/setup/part-2/session1.png">
+<small>Wähle aus der Liste die Sitzung, die du verifizieren willst.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/session2.png">
+<img src="/img/matrix/setup/part-2/session2.png">
+<small>Wähle nun wie du diese Sitzung verifizieren willst, z.B. mithilfe der Emojis.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/session3.png">
+<img src="/img/matrix/setup/part-2/session3.png">
+<small>Wie bei der Verifizierung deiner Kontakte musst du nun die Emojis auf beiden Geräten vergleichen.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/session4.png">
+<img src="/img/matrix/setup/part-2/session4.png">
+<small>Nachdem du dein Gerät erfolgreich verifiziert hast, wird dieses grüne Schild angezeigt.</small>
+</a>
+</div>
+</div>
+
+Es ist wichtig, alle deine Sitzungen zu verifizieren, damit auch für deine Kontakte erkennbar ist, dass die Ende-zu-Ende-Verschlüsselung richtig funktioniert.
+
+Wenn du nicht willst, dass Element automatisch neuen Sitzungen deines Kontakts vertraut, kannst du in den Einstellungen unter „Sicherheit & Privatsphäre“ die Option „Nur zu verifizierten Sitzungen verschlüsseln“ aktivieren. Dann musst du jede Sitzung einzeln verifizieren.
+
+## Fehler beheben
+
+Wenn du Probleme damit haben solltest, dass die Schlüsselsicherung oder das Cross Signing nicht richtig funktioniert, kann es hilfreich sein, das Schlüsselbackup und / oder die Schlüsselsicherung in den Einstellungen zurückzusetzen. Das kannst du in den Einstellungen unter „Sicherheit & Privatsphäre“ erledigen. Nutze die Option „Backup zurücksetzen“ und / oder „Wiederherstellung verschlüsselter Nachrichten“ und dann „Sicherung löschen“. Bei weiteren Problemen schreibe gerne einen Kommentar.
+
+## Wie geht’s weiter?
+
+Ich hoffe, dieser Teil war nicht zu technisch / theoretisch und du konntest die einzelnen Punkte nachvollziehen. Im nächsten Teil dieser Serie werde ich über Gruppen und Kanäle in Matrix berichten und einige interessante davon vorstellen. Wenn du Vorschläge dafür hast, kannst du sie mir gerne zukommen lassen. Bis dahin viel Spaß beim sicheren Chatten mit deinen Freund:innen.

src/de/services/ntfy.md

@@ -0,0 +1,12 @@
+---
+layout: service.njk
+service: 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.
+
+## Weitere nützliche Links
+
+* [ntfy Webseite](https://ntfy.sh)
+* [Quellcode von ntfy](https://github.com/binwiederhier/ntfy)

src/de/services/peertube.md

@@ -0,0 +1,32 @@
+---
+layout: service.njk
+service: 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.
+
+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.
+
+Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus.
+
+## Server-Details
+
+Die Serverregeln und weitere Informationen kannst du gerne [hier](https://tube.sp-codes.de/about/instance) nachlesen.
+
+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
+
+* [GNU/Linux News Show](https://tube.sp-codes.de/c/gnulinuxnewsshow)
+* [BigBrotherAwards](https://digitalcourage.video/c/bba)
+* [mobilsicher](https://peertube.mobilsicher.de/c/mobilsicher)
+* [Drohnenvideos](https://tube.sp-codes.de/c/drohne)
+* [Artem Music](https://tube.anufrij.de/c/artem_music)
+* [Es geht um Deine Daten](https://digitalcourage.video/c/es_geht_um_deine_daten)
+* [Patrick Breyer](https://peertube.european-pirates.eu/c/patrick_breyer_mep_channel)
+
+## Weitere nützliche Links
+
+* [EU Video](https://tube.network.europa.eu)
+* Listen mit öffentlichen PeerTube-Instanzen
+    * [joinpeertube.org](https://joinpeertube.org/instances)
+    * [instances.joinpeertube.org](https://instances.joinpeertube.org/instances)

src/de/services/searx.md

@@ -1,27 +0,0 @@
----
-layout: base.njk
-key: searx
-title: Searx
----
-# Searx
-
-Searx ist eine freie Metasuchmaschine, das heißt sie nutzt für die Suche öffentliche Suchmaschinen, wie Google, DuckDuckGo, StartPage und viele andere. 
-
-Um die Privatsphäre der Benutzer:innen zu schützen, gibt Searx weder die IP-Adresse, noch die Suchhistorie an die Suchmaschinen weiter, von denen die Ergebnisse abgefragt werden. Searx selber speichert ebenfalls keine Suchanfragen oder andere Logs. Zusätzlich stellt Searx eine Vielzahl an Einstellungsmöglichkeiten bereit, beispielsweise können die Sprache und die verwendeten Suchmaschinen für jede Suchanfrage konfiguriert werden.
-
-Außerdem stellt Searx einen Proxy bereit, über den viele Suchergebnisse auch anonym aufgerufen werden können. Klicke dafür nicht auf den Direktlink, sondern auf `proxied` in der unteren rechten Ecke des Suchergebnisses.
-
-__Seit November 2019 betreibe ich eine öffentliche Searx Instanz.__ Schau gerne mal vorbei, um Antworten auf deine Fragen zu erhalten. Bei Fragen oder Problemen schreib mir gerne.
-
-__Hier gehts zu Searx: [searx.sp-codes.de](https://searx.sp-codes.de)__
-
-Tor Hidden Service: [searxbi3f73mmdeb.onion](http://searxbi3f73mmdeb.onion)
-
-## Weitere nützliche Links
-
-* [Searx Webseite](https://asciimoo.github.io/searx/)
-* [Dokumentation](https://asciimoo.github.io/searx/user/index.html)
-* [Standardsuchmaschine in Firefox festlegen](https://support.mozilla.org/de/kb/suchmaschinen-in-firefox-hinzufuegen-oder-entfernen)
-* [Standardsuchmaschine in Chrome festlegen](https://support.google.com/chrome/answer/95426?co=GENIE.Platform%3DDesktop&hl=de)
-* [Liste weiterer öffentlicher Server](https://searx.space/)
-* [Quellcode von Searx](https://github.com/asciimoo/searx)

src/de/services/shields.md

@@ -0,0 +1,12 @@
+---
+layout: service.njk
+service: 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.
+
+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
+
+* [Shields Webseite](https://shields.io/)
+* [Quellcode von Shields](https://github.com/badges/shields)

src/en/about.md

@@ -0,0 +1,11 @@
+---
+key: about
+eleventyNavigation:
+  key: about
+  title: About me
+  icon: i-user-secret
+  url: https://samuel-philipp.com/
+  locale: en
+  order: 1
+permalink: false
+---

src/en/all-donations.html

@@ -0,0 +1,11 @@
+---
+layout: base.njk
+key: all-donations
+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>
+
+<p><a href="/{{locale}}/donate/">&#10132; Donate</a></p>
+
+{% include "donations.html" %}

src/en/blog.md

@@ -1,11 +0,0 @@
----
-key: blog
-eleventyNavigation:
-  key: blog
-  title: Blog
-  icon: book
-  url: https://blog.sp-codes.de/
-  locale: en
-  order: 1
-permalink: false
----

src/en/contact.html

@@ -0,0 +1,62 @@
+---
+layout: base.njk
+key: contact
+title: Contact
+summary: Contact information for admins or moderation of sp-codes.
+eleventyNavigation:
+  key: contact
+  title: Contact
+  icon: i-commenting
+  order: 3
+---
+<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 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>Send me an email to <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>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?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>
+        <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>Write me on XMPP to <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>Write me on Threema to the ID <strong>YSCU6F6U</strong></div>
+        </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

@@ -0,0 +1,82 @@
+---
+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
+  icon: i-hand-holding-heart
+  order: 4
+---
+<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, 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. I am very glad if I can make you happy with it.
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="i-credit-card i-fw m-2"></i>Bank transfer</h2>
+            <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.donations.supporters }}"
+                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters }}-{{ donations | banktransfers }}-active">
+                </div>
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="i-money-bill i-fw m-2"></i>Cash</h2>
+            <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.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>Hetzner</h2>
+            <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.
+            </div>
+            <div class="mt-3 text-center">
+                <a href="https://hetzner.cloud/?ref=5zWtNOF3q8i8"
+                   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>
+
+<h2>Current Expenses</h2>
+{% include "expenses-current.html" %}
+
+<h2>Donations {{donations[0].year}}</h2>
+{% include "donations-current.html" %}
+
+<p><a href="/{{locale}}/all-donations/">&#10132; All Donations</a></p>
+
+<div class="border-top mt-5 pt-2">
+    <p><small><sup>1</sup> The payments made are donations in terms of § 516 BGB, not tax-deductible donations in terms
+        of tax law.</small></p>
+</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,8 +1,33 @@
 ---
 layout: base.njk
-title: sp-codes
+title: Imprint
+summary: Imprint of sp-codes - Information on legal owner and contact details.
 ---
-<div class="legal">
-<h1>Imprint</h1>
-<p>Sorry, this document is only available in German so far. Read it <a href="/de/imprint">here</a>.</p>
+<h1><i class="i-info-circle"></i> Imprint</h1>
+<div class="mb-4">
+    <h2>Information as per § 5 TMG:</h2>
+    <p>Samuel Philipp<br/>
+        Otto-von-Guericke-Straße 40a<br/>
+        39104 Magdeburg<br/>
+        Deutschland</p>
+</div>
+<div class="mb-3 pt-4 border-top">
+    <h2>Contact</h2>
+    <p>
+        <strong>E-Mail-Address:</strong> mail@sp-codes.de<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="{{ site.url }}">sp-codes.de</a></li>
+        <li><a href="https://sp-magic.de">sp-magic.de</a></li>
+    </ul>
+</div>
+<div class="mb-3 pt-4 border-top">
+    <h2>Licenses</h2>
+    <p>This Website uses the following libraries with their respective licenses:</p>
+    {% include "licenses.html" %}
 </div>

src/en/index.html

@@ -1,38 +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: 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, read my <a href="https://blog.sp-codes.de">Blog</a> (in German) or use the various services.
-        </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>
-        <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.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,8 +1,7 @@
 ---
 layout: base.njk
-title: sp-codes
+title: Privacy
+summary: Privacy policy of sp-codes - Information on data processing.
 ---
-<body class="legal">
-<h2>Privacy</h2>
+<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>
-</body>

src/en/services.html

@@ -1,13 +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: server
+  icon: i-server
   order: 2
 ---
-<h1>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>
+<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 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>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="row justify-content-center">
+    {% include "services.html" %}
+</div>

src/en/services/connectivitycheck.md

@@ -1,60 +1,12 @@
 ---
-layout: base.njk
-key: connectivitycheck
+layout: service.njk
+service: connectivitycheck
 title: Captive Portal Check
 ---
-# 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 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

@@ -0,0 +1,13 @@
+---
+layout: service.njk
+service: etherpad
+title: 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.
+
+## More useful links
+
+* [Etherpad Website](https://etherpad.org)
+* [Quell code of Etherpad](https://github.com/ether/etherpad-lite)

src/en/services/firefox-sync.md

@@ -1,19 +0,0 @@
----
-layout: base.njk
-key: firefox-sync
-title: Firefox Sync
----
-# Firefox Sync
-
-Do you use Firefox on more than one device for surfing? Then Firefox Sync lets you synchronize your browser data (bookmarks, open tabs, search history, and more) between all your devices.
-
-To do this, you first need a Firefox account and must log in to your devices. By default, you will then automatically use the Mozilla sync service. If you want to use a different server you can change this in the settings.
-
-__Since February 2020 I offer a public service for Firefox-Sync.__ You can use it to synchronize your data between your devices.
-
-Therefore type [about:config](about:config) in the Firefox address bar, search for `identity.sync.tokenserver.uri` and set the value to `https://sync.firefox.sp-codes.de/token/1.0/sync/1.5`. You are now using the entered sync service.
-
-## More useful links
-
-* [Firefox Sync](https://www.mozilla.org/de/firefox/accounts/)
-* [Source code](https://github.com/mozilla-services/syncserver)

src/en/services/forgejo.md

@@ -0,0 +1,19 @@
+---
+layout: service.njk
+service: forgejo
+title: Forgejo
+---
+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.
+
+## Server details
+
+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
+
+* [Forgejo website](https://forgejo.org/)
+* [Source code of Forgejo](https://codeberg.org/forgejo/forgejo)
+* [Woodpecker Website](https://woodpecker-ci.org/)
+* [Source code of Woodpecker](https://github.com/woodpecker-ci/woodpecker)

src/en/services/gitea.md

@@ -1,23 +0,0 @@
----
-layout: base.njk
-key: gitea
-title: Gitea
----
-# Gitea
-
-Gitea 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 Gitea 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 Gitea, I also run Drone, a platform that extends Gitea with many continuous integration features, such as automated builds and deploys.
-
-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 Gitea click here: [git.sp-codes.de](https://git.sp-codes.de)__
-
-__If you want to check out Drone, click here:  [ci.sp-codes.de](https://ci.sp-codes.de)__
-
-## More useful links
-
-* [Gitea website](https://gitea.io/en-us/)
-* [Source code of Gitea](https://github.com/go-gitea/gitea)
-* [Drone Website](https://drone.io/)
-* [Source code of Drone](https://github.com/drone/drone)

src/en/services/invidious.md

@@ -1,17 +0,0 @@
----
-layout: base.njk
-key: invidious
-title: Invidious
----
-# Invidious
-
-Invidious is an alternative YouTube-Frontend. It establishes only the most necessary connections to YouTube and many of them are even made by the server itself. So Invidious increases the privacy of the users.
-
-__Since December 2019 I run a public Invidious instance.__ Feel free to watch some videos there.
-
-__Watch your first video on [invidious.sp-codes.de](https://invidious.sp-codes.de).__
-
-## More useful links
-
-* [List of other public servers](https://github.com/omarroth/invidious/wiki/Invidious-Instances)
-* [Source code of Invidious](https://github.com/omarroth/invidious)

src/en/services/jitsi.md

@@ -1,18 +1,21 @@
 ---
-layout: base.njk
-key: jitsi
+layout: service.njk
+service: jitsi
 title: Jitsi Meet
 ---
-# 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
+
+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.
+
+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

@@ -0,0 +1,45 @@
+---
+layout: service.njk
+service: mastodon
+title: 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.
+
+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).
+
+## Server details
+
+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
+
+* [Bundesbeauftragte für Datenschutz und Informationsfreiheit](https://social.bund.de/@bfdi)
+* [Bundesamt für Sicherheit in der Informationstechnik](https://social.bund.de/@bsi)
+* [Landesregierung Baden-Württemberg](https://mastodon.social/@RegierungBW)
+* [Landtag Rheinland-Pfalz](https://social.bund.de/@ltrlp)
+* [LfDI Baden-Württemberg](https://bawü.social/@lfdi)
+* [Umweltministerium Baden-Württemberg](https://bawü.social/@Umweltministerium)
+* [Verbraucherzentrale Schleswig-Holstein](https://troet.cafe/@verbraucherzentrale_sh)
+* [Digitalcourage e.V.](https://digitalcourage.social/@digitalcourage)
+* [Mobilsicher](https://mastodontech.de/@mobilsicher)
+* [Chaos Computer Club](https://social.bau-ha.us/@CCC)
+* [GLS Bank](https://ruhr.social/@glsbank)
+* [Fairphone](https://social.weho.st/@Fairphone)
+* [WEtell.Mobilfunk](https://chaos.social/@wetell)
+* [Gnu/Linux](https://social.anoxinon.de/@gnulinux)
+* [FragDenStaat](https://chaos.social/@fragdenstaat)
+* [Threema](https://mastodon.social/@threemaapp)
+* [Minetest](https://fosstodon.org/@Minetest)
+* [0 A.D.](https://mastodon.social/@play0ad)
+* [Ulrich Kelber](https://bonn.social/@ulrichkelber)
+* [Inga Klas](https://mastodon.social/@ingaklas)
+* [Mike Kuketz](https://social.tchncs.de/@kuketzblog)
+
+## More useful links
+
+* [Various Apps](https://joinmastodon.org/apps)
+* Lists with public Mastodon instances
+    * [joinmastodon.org](https://joinmastodon.org/communities)
+    * [instances.social](https://instances.social/)

src/en/services/matrix.md

@@ -1,25 +1,45 @@
 ---
-layout: base.njk
-key: matrix
+layout: service.njk
+service: matrix
 title: Matrix
 ---
-# 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).
 
-Feel free to create an account on my server or choose one from the list 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
+
+You can read the server rules [here](https://matrix.sp-codes.de/_matrix/consent) (German).
+
+**The limit for file uploads is 100 MB.** For larger files, please use a file sharing service.
+
+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.**
+
+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?
+
+Here I want to give some reasons why I use Matrix and prefer it over many other messengers:
+
+* Since the servers are decentralized, the network remains available even if one server fails.
+* You are free to choose your server provider and you are not dependent on a central provider.
+* Matrix can be used without a phone number or email address.
+* There are apps for all platforms (mobile, PC, Browser, etc.)
+* By default, messages in private chats and groups are end-to-end encrypted. This also makes it impossible for the server provider to read messages.
+* The protocol (the way data is transferred) is open, so anyone can check how it works or develop new apps that use this protocol.
+* The encryption algorithms are also publicly available and verifiable. They are not proprietary by any company.
+* Apps and servers are open source, which makes the functionality and further development transparent and traceable.
+* Matrix supports voice and video calls, both in private and group chats.
 
 ## More useful links
 
 * [Various Apps](https://matrix.org/clients)
 * [List of public rooms](https://view.matrix.org/)
-* Lists with public matrix servers
+* 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://www.anchel.nl/matrix-publiclist/)
   * [the-federation.info](https://the-federation.info/protocol/matrix)
 * [Matrix FAQ](https://matrix.org/faq/)
 * [Migrate Account](https://ems.element.io/tools/matrix-migration)

src/en/services/ntfy.md

@@ -0,0 +1,13 @@
+---
+layout: service.njk
+service: ntfy
+title: 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.
+
+## More useful links
+
+* [ntfy Website](https://ntfy.sh)
+* [Source code of ntfy](https://github.com/binwiederhier/ntfy)

src/en/services/peertube.md

@@ -0,0 +1,33 @@
+---
+layout: service.njk
+service: peertube
+title: 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.
+
+Feel free to register on my server or pick one from the lists linked below.
+
+## Server details
+
+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
+
+* [GNU/Linux News Show](https://tube.sp-codes.de/c/gnulinuxnewsshow)
+* [BigBrotherAwards](https://digitalcourage.video/c/bba)
+* [mobilsicher](https://peertube.mobilsicher.de/c/mobilsicher)
+* [Drohnenvideos](https://tube.sp-codes.de/c/drohne)
+* [Artem Music](https://tube.anufrij.de/c/artem_music)
+* [Es geht um Deine Daten](https://digitalcourage.video/c/es_geht_um_deine_daten)
+* [Patrick Breyer](https://peertube.european-pirates.eu/c/patrick_breyer_mep_channel)
+
+## More useful links
+
+* [EU Video](https://tube.network.europa.eu)
+* Lists with public PeerTube instances
+    * [joinpeertube.org](https://joinpeertube.org/instances)
+    * [instances.joinpeertube.org](https://instances.joinpeertube.org/instances)

src/en/services/searx.md

@@ -1,27 +0,0 @@
----
-layout: base.njk
-key: searx
-title: Searx
----
-# Searx
-
-Searx is a free meta search engine, which uses other public search engines like Google, DuckDuckGo, StartPage and many others.
-
-In order to protect the privacy of the users, Searx does not give the IP address, or the search history to the search engines it retrieves the results from. Searx itself also does not store any search queries or other logs. Additional it offers a variety of settings, for example, the language and the search engines can be configured for each search query.
-
-Searx also provides a proxy through which many search results can be accessed anonymously. Instead of clicking on the  direct link, use the `proxied` button in the bottom right corner of the search result.
-
-__Since November 2019 I run a public Searx instance.__ Feel free to check it out and get answers to your questions. If you have any questions or problems, feel free to contact me.
-
-Here is the link to Searx: [searx.sp-codes.de](https://searx.sp-codes.de)
-
-Tor Hidden Service: [searxbi3f73mmdeb.onion](http://searxbi3f73mmdeb.onion)
-
-## More useful links
-
-* [Searx Website](https://asciimoo.github.io/searx/)
-* [Documentation](https://asciimoo.github.io/searx/user/index.html)
-* [Set default search engine in Firefox](https://support.mozilla.org/en-US/kb/add-or-remove-search-engine-firefox)
-* [Set default search engine in Chrome](https://support.google.com/chrome/answer/95426?co=GENIE.Platform%3DDesktop&hl=en)
-* [List of other public servers](https://searx.space/)
-* [Source code of Searx](https://github.com/asciimoo/searx)

src/en/services/shields.md

@@ -0,0 +1,13 @@
+---
+layout: service.njk
+service: shields
+title: 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.
+
+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
+
+* [Shields Website](https://shields.io/)
+* [Source code of Shields](https://github.com/badges/shields)

src/font/icomoon.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="icomoon" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe900;" glyph-name="matrix" d="M26.965 936.533v-977.067h70.315v-23.467h-97.28v1024h97.28v-23.467zM327.467 626.773v-49.365h1.408c13.184 18.901 29.141 33.451 47.659 43.691 18.475 10.453 39.936 15.573 64 15.573 23.040 0 44.075-4.565 63.189-13.397 19.115-8.875 33.493-24.832 43.52-47.275 10.837 15.957 25.6 30.123 44.117 42.325 18.517 12.245 40.533 18.347 65.963 18.347 19.328 0 37.205-2.389 53.76-7.125 16.555-4.693 30.549-12.203 42.368-22.613 11.776-10.453 20.864-23.851 27.563-40.576 6.485-16.725 9.813-36.821 9.813-60.459v-244.395h-100.224v206.976c0 12.203-0.427 23.851-1.365 34.645-0.749 10.384-3.503 19.965-7.876 28.587l0.196-0.427c-4.344 8.093-10.718 14.604-18.454 18.993l-0.234 0.122c-8.277 4.693-19.499 7.083-33.493 7.083-14.165 0-25.6-2.731-34.261-8.064-8.55-5.315-15.469-12.494-20.328-21.002l-0.152-0.289c-4.886-8.571-8.361-18.597-9.808-29.267l-0.048-0.429c-1.565-10.018-2.494-21.619-2.56-33.424v-203.505h-100.267v204.8c0 10.837-0.171 21.461-0.768 32.085-0.381 10.656-2.586 20.69-6.313 29.95l0.211-0.595c-3.602 8.998-9.741 16.347-17.529 21.354l-0.178 0.107c-8.277 5.333-20.309 8.107-36.437 8.107-4.736 0-11.051-1.024-18.731-3.157-7.68-2.176-15.36-6.101-22.613-12.032-7.296-5.888-13.611-14.379-18.731-25.387-5.12-11.051-7.68-25.6-7.68-43.52v-211.883h-100.224v365.44zM997.035-40.533v977.067h-70.315v23.467h97.28v-1024h-97.28v23.467z" />
+<glyph unicode="&#xe901;" glyph-name="server" d="M960 630.857h-896c-35.346 0-64 28.654-64 64v128c0 35.346 28.654 64 64 64h896c35.346 0 64-28.654 64-64v-128c0-35.346-28.654-64-64-64zM864 806.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zM736 806.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zM960 310.857h-896c-35.346 0-64 28.654-64 64v128c0 35.346 28.654 64 64 64h896c35.346 0 64-28.654 64-64v-128c0-35.346-28.654-64-64-64zM864 486.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zM736 486.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zM960-9.143h-896c-35.346 0-64 28.654-64 64v128c0 35.346 28.654 64 64 64h896c35.346 0 64-28.654 64-64v-128c0-35.346-28.654-64-64-64zM864 166.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zM736 166.857c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48z" />
+<glyph unicode="&#xe902;" glyph-name="credit-card" horiz-adv-x="1152" d="M0 86.857c0-53 43-96 96-96h960c53 0 96 43 96 96v352h-1152v-352zM384 222.857c0 13.2 10.8 24 24 24h272c13.2 0 24-10.8 24-24v-80c0-13.2-10.8-24-24-24h-272c-13.2 0-24 10.8-24 24v80zM128 222.857c0 13.2 10.8 24 24 24h144c13.2 0 24-10.8 24-24v-80c0-13.2-10.8-24-24-24h-144c-13.2 0-24 10.8-24 24v80zM1152 790.857v-96h-1152v96c0 53 43 96 96 96h960c53 0 96-43 96-96z" />
+<glyph unicode="&#xe903;" glyph-name="network-wired" horiz-adv-x="1280" d="M1280 432v32c0 17.68-14.32 32-32 32h-560v80h144c35.34 0 64 28.66 64 64v256c0 35.34-28.66 64-64 64h-384c-35.34 0-64-28.66-64-64v-256c0-35.34 28.66-64 64-64h144v-80h-560c-17.68 0-32-14.32-32-32v-32c0-17.68 14.32-32 32-32h208v-80h-112c-35.34 0-64-28.66-64-64v-256c0-35.34 28.66-64 64-64h320c35.34 0 64 28.66 64 64v256c0 35.34-28.66 64-64 64h-112v80h608v-80h-112c-35.34 0-64-28.66-64-64v-256c0-35.34 28.66-64 64-64h320c35.34 0 64 28.66 64 64v256c0 35.34-28.66 64-64 64h-112v80h208c17.68 0 32 14.32 32 32zM512 704v128h256v-128h-256zM384 64h-192v128h192v-128zM1088 64h-192v128h192v-128z" />
+<glyph unicode="&#xe904;" glyph-name="money-bill" horiz-adv-x="1280" d="M1216 832h-1152c-35.34 0-64-28.66-64-64v-640c0-35.34 28.66-64 64-64h1152c35.34 0 64 28.66 64 64v640c0 35.34-28.66 64-64 64zM96 160v128c70.7 0 128-57.3 128-128h-128zM96 608v128h128c0-70.7-57.3-128-128-128zM640 256c-88.38 0-160 85.98-160 192 0 106.040 71.64 192 160 192s160-85.96 160-192c0-106.060-71.66-192-160-192zM1184 160h-128c0 70.7 57.3 128 128 128v-128zM1184 608c-70.7 0-128 57.3-128 128h128v-128z" />
+<glyph unicode="&#xe905;" glyph-name="chart-line" d="M992 192h-864v608c0 17.68-14.32 32-32 32h-64c-17.68 0-32-14.32-32-32v-672c0-35.34 28.66-64 64-64h928c17.68 0 32 14.32 32 32v64c0 17.68-14.32 32-32 32zM928 768h-236.12c-42.76 0-64.18-51.7-33.94-81.94l64.8-64.8-146.74-146.76-146.74 146.74c-25 25-65.52 25-90.5 0l-137.38-137.38c-12.5-12.5-12.5-32.76 0-45.26l45.24-45.24c12.5-12.5 32.76-12.5 45.26 0l92.12 92.14 146.74-146.74c25-25 65.52-25 90.5 0l192 192 64.8-64.8c30.24-30.24 81.94-8.82 81.94 33.94v236.1c0.020 17.68-14.3 32-31.98 32z" />
+<glyph unicode="&#xe906;" glyph-name="info-circle" d="M512 944c-273.914 0-496-222.166-496-496 0-273.994 222.086-496 496-496s496 222.006 496 496c0 273.834-222.086 496-496 496zM512 724c46.392 0 84-37.608 84-84s-37.608-84-84-84-84 37.608-84 84 37.608 84 84 84zM624 216c0-13.254-10.746-24-24-24h-176c-13.254 0-24 10.746-24 24v48c0 13.254 10.746 24 24 24h24v128h-24c-13.254 0-24 10.746-24 24v48c0 13.254 10.746 24 24 24h128c13.254 0 24-10.746 24-24v-200h24c13.254 0 24-10.746 24-24v-48z" />
+<glyph unicode="&#xe907;" glyph-name="code" horiz-adv-x="1280" d="M557.8-63l-122 35.4c-12.8 3.6-20 17-16.4 29.8l273 940.4c3.6 12.8 17 20 29.8 16.4l122-35.4c12.8-3.6 20-17 16.4-29.8l-273-940.4c-3.8-12.8-17-20.2-29.8-16.4zM329.8 161.4l87 92.8c9.2 9.8 8.6 25.4-1.6 34.4l-181.2 159.4 181.2 159.4c10.2 9 11 24.6 1.6 34.4l-87 92.8c-9 9.6-24.2 10.2-34 1l-288.2-270c-10.2-9.4-10.2-25.6 0-35l288.2-270.2c9.8-9.2 25-8.8 34 1zM984.2 160.2l288.2 270.2c10.2 9.4 10.2 25.6 0 35l-288.2 270.4c-9.6 9-24.8 8.6-34-1l-87-92.8c-9.2-9.8-8.6-25.4 1.6-34.4l181.2-159.6-181.2-159.4c-10.2-9-11-24.6-1.6-34.4l87-92.8c9-9.8 24.2-10.2 34-1.2z" />
+<glyph unicode="&#xe908;" glyph-name="xmpp" d="M1023.829 824.405c-14.379-5.589-35.84-13.867-61.952-23.851-49.408-18.901-74.496-28.501-93.568-34.987-19.627-6.656-41.173-13.099-84.309-26.027-29.141-8.704-53.504-15.829-70.784-20.821-0.981-27.989 0-69.675-9.344-116.309-17.28-86.485-45.995-148.096-64.512-184.491-47.872-94.208-103.552-154.155-124.16-175.232-1.792 1.877-3.584 3.755-5.376 5.717-22.613 24.405-76.885 86.485-122.069 181.845-33.707 71.125-47.488 129.408-51.371 146.688-11.392 50.859-13.653 94.549-13.653 131.755 0 2.389-1.152 4.139-3.243 4.779-23.083 7.125-56.491 16.597-92.373 27.307-40.661 12.117-70.187 23.808-109.056 38.4-15.787 5.931-45.099 17.493-70.955 27.477-23.979 9.344-43.477 17.749-45.781 17.749-0.171 0-0.469 0-0.725-0.384-0.341-0.469-0.597-1.323-0.597-2.432 0.299-18.987 2.56-43.563 8.192-75.691 19.669-112.085 86.016-225.963 139.52-295.808 0 0 118.955-161.109 292.096-260.608 2.475-1.408 5.717-3.328 9.685-5.632-0.299-0.256-0.64-0.469-0.896-0.683-54.955-42.112-102.443-63.275-114.517-68.48-28.203-12.245-52.907-19.883-70.997-24.704v-13.013c35.285 4.352 64.811 10.325 87.040 15.573 21.931 5.205 84.864 21.12 162.133 57.216 0.043 0.043 0.171 0.085 0.256 0.128 4.352-2.133 8.832-4.352 13.44-6.528 48.853-23.211 114.261-52.053 194.347-65.536 19.627-3.285 36.352-5.291 48.213-6.229 1.792-0.128 3.371 1.109 3.669 2.901 0.427 2.517 0.64 4.907 0.128 6.955-0.256 1.067-1.024 1.92-2.005 2.347-16.171 6.699-38.443 12.8-63.445 22.997-29.909 12.203-71.723 34.133-116.736 68.096-2.048 1.536-6.101 4.651-11.733 9.173 148.48 84.992 255.659 210.816 255.659 210.816 55.509 65.152 142.123 179.925 173.781 313.429 11.179 47.147 17.237 87.723 16 116.096z" />
+<glyph unicode="&#xe909;" glyph-name="wifi" horiz-adv-x="1280" d="M1269.82 650.24c-354.34 327.74-905.44 327.62-1259.64 0-13.32-12.32-13.58-33.18-0.7-45.96l68.48-67.94c12.28-12.2 32.040-12.46 44.8-0.76 291.84 267.36 742.6 267.42 1034.5 0 12.76-11.7 32.52-11.42 44.8 0.76l68.48 67.94c12.86 12.78 12.6 33.64-0.72 45.96zM640 256c-70.7 0-128-57.3-128-128s57.3-128 128-128 128 57.3 128 128-57.3 128-128 128zM1045.34 423.18c-230.52 203.86-580.42 203.64-810.68 0-13.8-12.2-14.24-33.38-1.14-46.3l68.88-67.98c12-11.84 31.32-12.64 44.1-1.6 167.9 145.14 419.48 144.82 586.98 0 12.78-11.040 32.1-10.26 44.1 1.6l68.88 67.98c13.12 12.92 12.66 34.12-1.12 46.3z" />
+<glyph unicode="&#xe90c;" glyph-name="threema" d="M511.915 85.931c41.402 0 74.965-33.563 74.965-74.965s-33.563-74.965-74.965-74.965v0c-41.402 0-74.965 33.563-74.965 74.965s33.563 74.965 74.965 74.965v0zM241.621 85.931c41.402 0 74.965-33.563 74.965-74.965s-33.563-74.965-74.965-74.965v0c-41.402 0-74.965 33.563-74.965 74.965s33.563 74.965 74.965 74.965v0zM782.251 85.931c41.402 0 74.965-33.563 74.965-74.965s-33.563-74.965-74.965-74.965v0c-41.402 0-74.965 33.563-74.965 74.965s33.563 74.965 74.965 74.965v0zM512 960c243.2 0 440.405-173.483 440.405-387.499s-197.205-387.541-440.405-387.541c-0.419-0.001-0.915-0.002-1.411-0.002-69.213 0-135.064 14.393-194.724 40.35l3.154-1.222-220.629-55.168 47.147 188.587c-46.677 61.525-73.941 135.467-73.941 214.997 0 214.016 197.205 387.499 440.405 387.499zM511.957 779.307c-0.013 0-0.028 0-0.043 0-68.934 0-124.818-55.87-124.843-124.798v-49.922h-4.907c-11.075 0-20.053-8.978-20.053-20.053v0-176.043c0-11.093 8.96-20.096 20.053-20.096h259.669c11.093 0 20.053 8.96 20.053 20.053v176.171c0 11.075-8.978 20.053-20.053 20.053v0h-4.907v49.92c-0.073 68.917-55.958 124.757-124.885 124.757-0.045 0-0.090 0-0.135 0h0.007zM511.957 729.387c41.472 0 75.008-33.536 75.008-74.837v-49.92h-149.931v49.92c0 41.301 33.536 74.837 74.923 74.837z" />
+<glyph unicode="&#xe90d;" glyph-name="stackoverflow" d="M810.069 27.093v273.237h91.051v-364.331h-822.443v364.331h90.88v-273.237zM260.736 118.144h458.197v91.179h-458.197zM271.787 325.163l447.147-93.397 19.243 88.32-447.061 93.312zM329.771 540.885l414.080-193.28 38.528 83.2-414.123 193.28-38.485-82.603zM445.611 745.045l350.592-292.48 57.984 69.12-350.549 292.395-57.6-68.992zM672.043 960l-74.496-55.211 273.28-367.104 74.496 55.211-273.365 367.104z" />
+<glyph unicode="&#xe90e;" glyph-name="search" d="M1010 74.6l-199.4 199.4c-9 9-21.2 14-34 14h-32.6c55.2 70.6 88 159.4 88 256 0 229.8-186.2 416-416 416s-416-186.2-416-416 186.2-416 416-416c96.6 0 185.4 32.8 256 88v-32.6c0-12.8 5-25 14-34l199.4-199.4c18.8-18.8 49.2-18.8 67.8 0l56.6 56.6c18.8 18.8 18.8 49.2 0.2 68zM416 288c-141.4 0-256 114.4-256 256 0 141.4 114.4 256 256 256 141.4 0 256-114.4 256-256 0-141.4-114.4-256-256-256z" />
+<glyph unicode="&#xe90f;" glyph-name="pixelfed" d="M512-73.143c-282.77 0-512 229.23-512 512s229.23 512 512 512c282.77 0 512-229.23 512-512s-229.23-512-512-512zM471.354 327.077h93.924c88.48 0 160.208 69.827 160.208 155.963s-71.728 155.963-160.208 155.963h-135.561c-51.046 0-92.428-40.285-92.428-89.979v-350.208l134.064 128.261z" />
+<glyph unicode="&#xe910;" glyph-name="mastodon" d="M989.568 623.829c0 222.123-145.536 287.232-145.536 287.232-73.387 33.707-199.424 47.872-330.283 48.939h-3.243c-130.901-1.067-256.853-15.232-330.24-48.939 0 0-145.536-65.109-145.536-287.232 0-50.859-0.981-111.701 0.64-176.171 5.291-217.259 39.851-431.317 240.683-484.48 92.587-24.491 172.117-29.653 236.16-26.112 116.139 6.4 181.333 41.472 181.333 41.472l-3.84 84.267c0 0-82.987-26.155-176.171-22.997-92.373 3.157-189.824 9.941-204.757 123.349-1.305 9.295-2.050 20.032-2.050 30.944 0 0.296 0.001 0.592 0.002 0.889v-0.046c0 0 90.667-22.187 205.525-27.435 70.229-3.2 136.107 4.139 203.008 12.075 128.299 15.317 240 94.379 254.037 166.613 22.059 113.707 20.267 277.632 20.267 277.632zM817.877 337.579h-106.539v261.077c0 55.040-23.168 82.944-69.461 82.944-51.2 0-76.885-33.109-76.885-98.645v-142.891h-105.941v142.933c0 65.536-25.685 98.645-76.885 98.645-46.293 0-69.461-27.947-69.461-82.944v-261.077h-106.539v268.928c0 54.997 13.995 98.688 42.112 130.987 29.013 32.341 66.944 48.896 114.091 48.896 54.528 0 95.829-20.949 123.136-62.891l26.496-44.501 26.539 44.501c27.307 41.941 68.608 62.891 123.136 62.891 47.104 0 85.077-16.555 114.091-48.896 28.075-32.299 42.069-75.989 42.069-130.987z" />
+<glyph unicode="&#xe911;" glyph-name="hand-holding-heart" horiz-adv-x="1152" d="M550.6 459c14-14.8 36.8-14.8 51 0l217.8 228.4c63.2 66.4 59.6 176.4-11.2 237.6-61.6 53.4-153.4 43.8-209.8-15.4l-22.4-23.4-22.2 23.2c-56.4 59.4-148.2 69-209.8 15.6-70.6-61.2-74.4-171.2-11.2-237.6l217.8-228.4zM1130.6 303.8c-23.6 21.4-60.4 20-85.2 0l-184.8-147.8c-22.6-18.2-50.8-28-80-28h-236.6c-17.6 0-32 14.4-32 32s14.4 32 32 32h156.6c31.8 0 61.4 21.8 66.6 53.2 6.6 40-24.2 74.8-63.2 74.8h-320c-54 0-106.2-18.6-148.2-52.6l-93-75.4h-110.8c-17.6 0-32-14.4-32-32v-192c0-17.6 14.4-32 32-32h713.6c29 0 57.2 9.8 80 28l302.4 242c30.4 24.2 32.8 70.6 2.6 97.8z" />
+<glyph unicode="&#xe912;" glyph-name="github" d="M512 947.328c-282.88 0-512-229.248-512-512 0-226.261 146.688-418.133 350.080-485.76 25.6-4.821 34.987 11.008 34.987 24.619 0 12.16-0.427 44.373-0.64 87.040-142.421-30.891-172.459 68.693-172.459 68.693-23.296 59.093-56.96 74.88-56.96 74.88-46.379 31.744 3.584 31.104 3.584 31.104 51.413-3.584 78.421-52.736 78.421-52.736 45.653-78.293 119.851-55.68 149.12-42.581 4.608 33.109 17.792 55.68 32.427 68.48-113.707 12.8-233.216 56.832-233.216 253.013 0 55.893 19.84 101.547 52.693 137.387-5.76 12.928-23.040 64.981 4.48 135.509 0 0 42.88 13.739 140.8-52.48 40.96 11.392 84.48 17.024 128 17.28 43.52-0.256 87.040-5.888 128-17.28 97.28 66.219 140.16 52.48 140.16 52.48 27.52-70.528 10.24-122.581 5.12-135.509 32.64-35.84 52.48-81.493 52.48-137.387 0-196.693-119.68-240-233.6-252.587 17.92-15.36 34.56-46.763 34.56-94.72 0-68.523-0.64-123.563-0.64-140.203 0-13.44 8.96-29.44 35.2-24.32 204.843 67.157 351.403 259.157 351.403 485.077 0 282.752-229.248 512-512 512z" />
+<glyph unicode="&#xe913;" glyph-name="pencil-square" horiz-adv-x="878" d="M230.857 317.714l86.857-86.857-29.714-29.714h-32v54.857h-54.857v32zM467.429 540.571c4.571-4 3.429-12-1.714-17.143l-166.286-166.286c-5.143-5.143-13.143-6.286-17.143-1.714-4.571 4-3.429 12 1.714 17.143l166.286 166.286c5.143 5.143 13.143 6.286 17.143 1.714zM310.857 146.286l310.857 310.857-164.571 164.571-310.857-310.857v-164.571h164.571zM658.286 493.714l52.571 52.571c21.143 21.143 21.143 56.571 0 77.714l-86.857 86.857c-21.143 21.143-56.571 21.143-77.714 0l-52.571-52.571zM877.714 713.143v-548.571c0-90.857-73.714-164.571-164.571-164.571h-548.571c-90.857 0-164.571 73.714-164.571 164.571v548.571c0 90.857 73.714 164.571 164.571 164.571h548.571c90.857 0 164.571-73.714 164.571-164.571z" />
+<glyph unicode="&#xe914;" glyph-name="firefox" d="M377.813 647.125c0.341 0 0.171 0 0 0zM259.499 706.261c0.299 0 0.171 0 0 0zM967.339 614.955c-21.333 51.328-64.597 106.795-98.56 124.331 27.648-54.187 43.648-108.544 49.749-149.12l0.085-0.853c-55.552 138.496-149.76 194.347-226.731 315.904-3.84 6.187-7.765 12.331-11.52 18.816-1.559 2.561-3.377 5.886-5.069 9.285l-0.392 0.869c-2.94 5.574-5.439 12.051-7.163 18.837l-0.133 0.619c0 0.002 0 0.004 0 0.006 0 0.662-0.502 1.206-1.147 1.273h-0.005c-0.134 0.040-0.288 0.063-0.448 0.063s-0.314-0.023-0.459-0.066l0.011 0.003-0.256-0.085c-0.147-0.057-0.273-0.129-0.388-0.216l0.004 0.003c0.063 0.113 0.134 0.211 0.215 0.3l-0.001-0.001c-109.227-64-154.539-176.043-166.144-247.339-35.745-2.082-68.93-11.020-98.929-25.513l1.564 0.681c-4.186-2.091-7.011-6.345-7.011-11.258 0-1.565 0.287-3.063 0.81-4.445l-0.029 0.086c1.739-4.867 6.31-8.287 11.679-8.287 1.828 0 3.563 0.396 5.124 1.107l-0.077-0.032c24.762 11.975 53.614 19.905 84.054 22.1l0.767 0.044 2.859 0.213c3.577 0.218 7.837 0.357 12.124 0.384h0.079c0.498 0.004 1.087 0.006 1.676 0.006 24.517 0 48.2-3.572 70.558-10.223l-1.748 0.446 4.011-1.28c5.537-1.658 9.295-2.937 13.011-4.303l-1.704 0.548c4.425-1.607 7.117-2.687 9.786-3.813l-1.637 0.613c2.219-0.853 4.395-1.749 6.571-2.688 4.855-2.129 8.149-3.715 11.4-5.371l-1.374 0.635 4.523-2.304c4.507-2.324 7.633-4.068 10.718-5.877l-1.16 0.629c2.993-1.741 4.956-2.955 6.899-4.198l-0.883 0.529c35.71-22.331 64.697-52.259 85.286-87.673l0.645-1.201c-26.24 18.432-73.216 36.651-118.443 28.757 176.725-88.32 129.28-392.576-115.627-381.099-23.184 0.988-45.019 5.441-65.432 12.855l1.518-0.482c-6.703 2.457-11.478 4.429-16.182 6.531l1.718-0.686c-3.916 1.74-6.634 3.067-9.314 4.457l1.037-0.489c-59.989 31.019-109.525 89.6-115.712 160.768 0 0 22.656 84.523 162.389 84.523 15.104 0 58.283 42.155 59.093 54.357-0.213 4.011-85.717 38.016-119.040 70.827-17.835 17.579-26.283 26.027-33.749 32.427-3.761 3.185-7.92 6.341-12.243 9.271l-0.515 0.329c-5.558 18.734-8.757 40.258-8.757 62.529 0 20.451 2.697 40.272 7.755 59.127l-0.363-1.592c-50.475-22.997-89.728-59.307-118.272-91.392h-0.256c-19.456 24.661-18.091 106.069-16.981 123.051-0.256 1.067-14.507-7.424-16.427-8.704-17.831-12.815-33.515-26.32-47.936-41.065l-0.064-0.066c-16.36-16.594-31.423-34.569-44.964-53.697l-0.902-1.343c-30.203-42.296-53.051-92.121-65.423-145.946l-0.54-2.79c-0.128-0.555-4.693-20.565-8.021-45.312-0.219-0.904-0.775-4.839-1.288-8.788l-0.29-2.732c-1.217-7.733-2.251-17.421-2.855-27.225l-0.046-0.935-0.085-1.451c-0.182-1.893-0.533-7.56-0.845-13.238l-0.136-3.103-0.043-2.56c0-271.275 219.989-491.221 491.349-491.221 242.987 0 444.757 176.427 484.267 408.149 0.853 6.272 1.493 12.587 2.219 18.944 9.813 84.224-1.067 172.8-31.829 246.827z" />
+<glyph unicode="&#xe915;" glyph-name="copyright" d="M512 944c-273.934 0-496-222.066-496-496s222.066-496 496-496 496 222.066 496 496-222.066 496-496 496zM512 48c-221.064 0-400 178.902-400 400 0 221.062 178.902 400 400 400 221.064 0 400-178.902 400-400 0-221.064-178.902-400-400-400zM726.702 250.128c-19.228-19.424-91.060-82.792-208.13-82.792-164.86 0-280.968 122.85-280.968 283.134 0 158.304 120.55 278.802 279.524 278.802 111.062 0 177.476-53.24 195.186-69.558 4.76-4.388 7.731-10.654 7.731-17.613 0-4.845-1.44-9.353-3.915-13.121l0.056 0.091-36.31-56.226c-7.682-11.9-23.932-14.564-34.998-5.842-17.19 13.552-63.628 45.076-123.416 45.076-96.606 0-155.832-70.66-155.832-160.164 0-83.178 53.776-167.384 156.554-167.384 65.314 0 113.686 38.078 131.452 54.45 10.54 9.714 27.192 8.078 35.64-3.476l39.73-54.34c2.91-3.913 4.659-8.84 4.659-14.176 0-6.581-2.66-12.54-6.964-16.861l0.001 0.001z" />
+<glyph unicode="&#xe916;" glyph-name="cloud-download" horiz-adv-x="1097" d="M731.429 420.571c0 10.286-8 18.286-18.286 18.286h-128v201.143c0 9.714-8.571 18.286-18.286 18.286h-109.714c-9.714 0-18.286-8.571-18.286-18.286v-201.143h-128c-10.286 0-18.286-8.571-18.286-18.286 0-4.571 1.714-9.714 5.143-13.143l201.143-201.143c3.429-3.429 8-5.143 13.143-5.143 4.571 0 9.714 1.714 13.143 5.143l200.571 200.571c3.429 4 5.714 8.571 5.714 13.714zM1097.143 292.571c0-121.143-98.286-219.429-219.429-219.429h-621.714c-141.143 0-256 114.857-256 256 0 99.429 57.714 189.714 147.429 231.429-0.571 8.571-1.143 16.571-1.143 24.571 0 161.714 130.857 292.571 292.571 292.571 118.857 0 225.714-72 270.857-181.714 26.286 22.857 60 35.429 94.857 35.429 80.571 0 146.286-65.714 146.286-146.286 0-28-8-55.429-23.429-78.857 99.429-23.429 169.714-112 169.714-213.714z" />
+<glyph unicode="&#xe917;" glyph-name="external-link" d="M864 310.857h-64c-17.673 0-32-14.327-32-32v0-224h-640v640h288c17.673 0 32 14.327 32 32v0 64c0 17.673-14.327 32-32 32v0h-320c-53.019 0-96-42.981-96-96v0-704c0-53.019 42.981-96 96-96v0h704c53.019 0 96 42.981 96 96v0 256c0 17.673-14.327 32-32 32v0zM976 950.857h-256c-42.74 0-64.1-51.82-34-82l71.46-71.46-487.46-487.28c-8.721-8.692-14.118-20.716-14.118-34s5.396-25.308 14.116-33.999l0.001-0.001 45.34-45.26c8.692-8.721 20.716-14.118 34-14.118s25.308 5.396 33.999 14.116l487.221 487.361 71.44-71.36c30-30 82-9 82 34v256c0 26.51-21.49 48-48 48v0z" />
+<glyph unicode="&#xe918;" glyph-name="peertube" d="M128 960v-512l384 256zM128 448v-512l384 256zM512 704v-512l384 256z" />
+<glyph unicode="&#xe919;" glyph-name="linkedin" d="M872.405 87.381h-151.637v237.611c0 56.661-1.152 129.579-79.019 129.579-79.061 0-91.136-61.653-91.136-125.397v-241.792h-151.637v488.619h145.664v-66.603h1.963c20.352 38.4 69.845 78.933 143.787 78.933 153.643 0 182.059-101.12 182.059-232.747v-268.203zM227.712 642.859c-48.811 0-88.021 39.509-88.021 88.107 0 48.555 39.253 88.021 88.021 88.021 48.64 0 88.064-39.467 88.064-88.021 0-48.597-39.467-88.107-88.064-88.107zM303.744 87.381h-152.064v488.619h152.064v-488.619zM948.267 960h-872.704c-41.771 0-75.563-33.024-75.563-73.771v-876.459c0-40.789 33.792-73.771 75.563-73.771h872.576c41.728 0 75.861 32.981 75.861 73.771v876.459c0 40.747-34.133 73.771-75.861 73.771h0.128z" />
+<glyph unicode="&#xe91a;" glyph-name="xing" d="M776.021 960c-22.059 0-31.616-13.867-39.552-28.16 0 0-318.080-564.224-328.619-582.699 0.64-1.024 209.877-384.981 209.877-384.981 7.253-13.141 18.603-28.16 41.259-28.16h147.371c9.003 0 16 3.328 19.755 9.387 3.797 6.443 3.797 14.763-0.384 22.869l-208.171 380.416c-0.171 0.256-0.171 0.683 0 0.939l327.040 578.133c4.053 8.149 4.139 16.512 0.256 22.827-3.797 6.101-10.709 9.429-19.584 9.429h-149.248zM155.648 757.76c-9.003 0-16.427-3.157-20.181-9.216-3.84-6.357-3.328-14.464 0.853-22.656l99.84-172.8c0.171-0.427 0.171-0.683 0-0.896l-156.8-277.035c-4.224-8.021-3.968-16.256 0-22.571 3.627-6.059 10.197-9.984 19.2-9.984h147.669c22.101 0 32.683 14.848 40.32 28.459l159.317 281.984-101.461 177.28c-7.339 13.44-18.517 28.117-41.045 28.117h-147.712v-0.683z" />
+<glyph unicode="&#xe91b;" glyph-name="book" horiz-adv-x="896" d="M896 240v672c0 26.6-21.4 48-48 48h-656c-106 0-192-86-192-192v-640c0-106 86-192 192-192h656c26.6 0 48 21.4 48 48v32c0 15-7 28.6-17.8 37.4-8.4 30.8-8.4 118.6 0 149.4 10.8 8.6 17.8 22.2 17.8 37.2zM256 692c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-424c-6.6 0-12 5.4-12 12v40zM256 564c0 6.6 5.4 12 12 12h424c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12h-424c-6.6 0-12 5.4-12 12v40zM762.8 64h-570.8c-35.4 0-64 28.6-64 64 0 35.2 28.8 64 64 64h570.8c-3.8-34.2-3.8-93.8 0-128z" />
+<glyph unicode="&#xeae7;" glyph-name="git" d="M1004.692 493.606l-447.096 447.080c-25.738 25.754-67.496 25.754-93.268 0l-103.882-103.876 78.17-78.17c12.532 5.996 26.564 9.36 41.384 9.36 53.020 0 96-42.98 96-96 0-14.82-3.364-28.854-9.362-41.386l127.976-127.974c12.532 5.996 26.566 9.36 41.386 9.36 53.020 0 96-42.98 96-96s-42.98-96-96-96-96 42.98-96 96c0 14.82 3.364 28.854 9.362 41.386l-127.976 127.974c-3.042-1.456-6.176-2.742-9.384-3.876v-266.968c37.282-13.182 64-48.718 64-90.516 0-53.020-42.98-96-96-96s-96 42.98-96 96c0 41.796 26.718 77.334 64 90.516v266.968c-37.282 13.18-64 48.72-64 90.516 0 14.82 3.364 28.852 9.36 41.384l-78.17 78.17-295.892-295.876c-25.75-25.776-25.75-67.534 0-93.288l447.12-447.080c25.738-25.75 67.484-25.75 93.268 0l445.006 445.006c25.758 25.762 25.758 67.54-0.002 93.29z" />
+<glyph unicode="&#xf004;" glyph-name="heart" d="M512 0c-9.143 0-18.286 3.429-25.143 10.286l-356.571 344c-4.571 4-130.286 118.857-130.286 256 0 167.429 102.286 267.429 273.143 267.429 100 0 193.714-78.857 238.857-123.429 45.143 44.571 138.857 123.429 238.857 123.429 170.857 0 273.143-100 273.143-267.429 0-137.143-125.714-252-130.857-257.143l-356-342.857c-6.857-6.857-16-10.286-25.143-10.286z" />
+<glyph unicode="&#xf015;" glyph-name="home" horiz-adv-x="951" d="M804.571 384v-274.286c0-20-16.571-36.571-36.571-36.571h-219.429v219.429h-146.286v-219.429h-219.429c-20 0-36.571 16.571-36.571 36.571v274.286c0 1.143 0.571 2.286 0.571 3.429l328.571 270.857 328.571-270.857c0.571-1.143 0.571-2.286 0.571-3.429zM932 423.428l-35.429-42.286c-2.857-3.429-7.429-5.714-12-6.286h-1.714c-4.571 0-8.571 1.143-12 4l-395.429 329.714-395.429-329.714c-4-2.857-8.571-4.571-13.714-4-4.571 0.571-9.143 2.857-12 6.286l-35.429 42.286c-6.286 7.429-5.143 19.429 2.286 25.714l410.857 342.286c24 20 62.857 20 86.857 0l139.429-116.571v111.429c0 10.286 8 18.286 18.286 18.286h109.714c10.286 0 18.286-8 18.286-18.286v-233.143l125.143-104c7.429-6.286 8.571-18.286 2.286-25.714z" />
+<glyph unicode="&#xf02c;" glyph-name="tags" horiz-adv-x="1280" d="M995.882 498.975l-423.764 423.764c-17.373 17.373-41.372 28.118-67.882 28.118h-408.236c-53.020 0-96-42.98-96-96v-408.236c0-26.51 10.745-50.509 28.118-67.882l423.764-423.764c37.488-37.49 98.272-37.492 135.764 0l408.236 408.236c37.49 37.49 37.49 98.274 0 135.764zM224 630.857c-53.020 0-96 42.98-96 96s42.98 96 96 96 96-42.98 96-96-42.98-96-96-96zM1251.882 363.211l-408.236-408.236c-37.49-37.49-98.274-37.49-135.764 0l-0.72 0.72 348.118 348.118c33.998 33.998 52.72 79.2 52.72 127.28s-18.724 93.282-52.72 127.28l-392.486 392.484h97.442c26.51 0 50.509-10.745 67.882-28.118l423.764-423.764c37.49-37.49 37.49-98.274 0-135.764z" />
+<glyph unicode="&#xf086;" glyph-name="comments" horiz-adv-x="1152" d="M832 566.857c0 176.8-186.2 320-416 320s-416-143.2-416-320c0-68.6 28.2-131.8 76-184-26.8-60.4-71-108.4-71.6-109-4.4-4.6-5.6-11.4-3-17.4s8.2-9.6 14.6-9.6c73.2 0 133.8 24.6 177.4 50 64.4-31.4 140.6-50 222.6-50 229.8 0 416 143.2 416 320zM1076 126.857c47.8 52 76 115.4 76 184 0 133.8-107 248.4-258.6 296.2 1.8-13.2 2.6-26.6 2.6-40.2 0-211.8-215.4-384-480-384-21.6 0-42.6 1.6-63.4 3.8 63-115 211-195.8 383.4-195.8 82 0 158.2 18.4 222.6 50 43.6-25.4 104.2-50 177.4-50 6.4 0 12.2 3.8 14.6 9.6 2.6 5.8 1.4 12.6-3 17.4-0.6 0.6-44.8 48.4-71.6 109z" />
+<glyph unicode="&#xf0c0;" glyph-name="users" horiz-adv-x="1280" d="M192 502.857c70.6 0 128 57.4 128 128s-57.4 128-128 128-128-57.4-128-128 57.4-128 128-128zM1088 502.857c70.6 0 128 57.4 128 128s-57.4 128-128 128-128-57.4-128-128 57.4-128 128-128zM1152 438.857h-128c-35.2 0-67-14.2-90.2-37.2 80.6-44.2 137.8-124 150.2-218.8h132c35.4 0 64 28.6 64 64v64c0 70.6-57.4 128-128 128zM640 438.857c123.8 0 224 100.2 224 224s-100.2 224-224 224-224-100.2-224-224 100.2-224 224-224zM793.6 374.857h-16.6c-41.6-20-87.8-32-137-32s-95.2 12-137 32h-16.6c-127.2 0-230.4-103.2-230.4-230.4v-57.6c0-53 43-96 96-96h576c53 0 96 43 96 96v57.6c0 127.2-103.2 230.4-230.4 230.4zM346.2 401.657c-23.2 23-55 37.2-90.2 37.2h-128c-70.6 0-128-57.4-128-128v-64c0-35.4 28.6-64 64-64h131.8c12.6 94.8 69.8 174.6 150.4 218.8z" />
+<glyph unicode="&#xf0c9;" glyph-name="bars" horiz-adv-x="878" d="M877.714 182.857v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 475.428v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571zM877.714 768v-73.143c0-20-16.571-36.571-36.571-36.571h-804.571c-20 0-36.571 16.571-36.571 36.571v73.143c0 20 16.571 36.571 36.571 36.571h804.571c20 0 36.571-16.571 36.571-36.571z" />
+<glyph unicode="&#xf0e0;" glyph-name="envelope" d="M1004.6 569.257c7.8 6.2 19.4 0.4 19.4-9.4v-409c0-53-43-96-96-96h-832c-53 0-96 43-96 96v408.8c0 10 11.4 15.6 19.4 9.4 44.8-34.8 104.2-79 308.2-227.2 42.2-30.8 113.4-95.6 184.4-95.2 71.4-0.6 144 65.6 184.6 95.2 204 148.2 263.2 192.6 308 227.4zM512 310.857c46.4-0.8 113.2 58.4 146.8 82.8 265.4 192.6 285.6 209.4 346.8 257.4 11.6 9 18.4 23 18.4 37.8v38c0 53-43 96-96 96h-832c-53 0-96-43-96-96v-38c0-14.8 6.8-28.6 18.4-37.8 61.2-47.8 81.4-64.8 346.8-257.4 33.6-24.4 100.4-83.6 146.8-82.8z" />
+<glyph unicode="&#xf21b;" glyph-name="user-secret" horiz-adv-x="805" d="M329.143 73.143l54.857 256-54.857 73.143-73.143 36.571zM475.429 73.143l73.143 365.714-73.143-36.571-54.857-73.143zM566.857 650.286c-0.571 1.143-1.143 2.286-2.286 3.429-5.143 4-46.286 4.571-54.857 4.571-32.571 0-63.429-4.571-95.429-10.857-4-1.143-8-1.143-12-1.143s-8 0-12 1.143c-32 6.286-62.857 10.857-95.429 10.857-8.571 0-49.714-0.571-54.857-4.571-1.143-1.143-1.714-2.286-2.286-3.429 0.571-5.143 1.143-10.286 2.286-15.429 3.429-4.571 6.286-2.857 8.571-9.714 14.857-40.571 21.714-72 73.143-72 73.714 0 53.143 68 77.143 68h6.857c24 0 3.429-68 77.143-68 51.429 0 58.286 31.429 73.143 72 2.286 6.857 5.143 5.143 8.571 9.714 1.143 5.143 1.714 10.286 2.286 15.429zM804.571 148c0-93.143-61.143-148-152.571-148h-499.429c-91.429 0-152.571 54.857-152.571 148 0 103.429 18.286 260 124.571 311.429l-51.429 125.714h122.286c-8 23.429-12.571 48-12.571 73.143 0 6.286 0.571 12.571 1.143 18.286-22.286 4.571-110.857 22.857-110.857 54.857 0 33.714 97.143 52 120 56.571 12 42.857 40.571 108 69.714 141.714 11.429 13.143 25.714 21.143 43.429 21.143 34.286 0 61.714-35.429 96-35.429s61.714 35.429 96 35.429c17.714 0 32-8 43.429-21.143 29.143-33.714 57.714-98.857 69.714-141.714 22.857-4.571 120-22.857 120-56.571 0-32-88.571-50.286-110.857-54.857 2.857-30.857-1.143-61.714-11.429-91.429h122.286l-46.857-128.571c102.286-53.143 120-206.857 120-308.571z" />
+<glyph unicode="&#xf21e;" glyph-name="heartbeat" d="M731.429 365.714h174.286c-6.857-7.429-11.429-11.429-12.571-12.571l-356-342.857c-6.857-6.857-16-10.286-25.143-10.286s-18.286 3.429-25.143 10.286l-356.571 344c-1.143 0.571-5.714 4.571-12 11.429h210.857c16.571 0 31.429 11.429 35.429 27.429l40 160.571 108.571-381.143c4.571-15.429 18.857-26.286 35.429-26.286v0c16 0 30.286 10.857 34.857 26.286l83.429 277.143 32-64c6.286-12 18.857-20 32.571-20zM1024 610.286c0-65.714-28.571-125.714-58.857-171.429h-210.857l-63.429 126.286c-6.286 13.143-21.143 21.143-35.429 20-15.429-1.714-28-11.429-32-26.286l-73.714-245.714-112 392c-4.571 15.429-18.857 26.286-36 26.286-16.571 0-30.857-11.429-34.857-27.429l-66.286-265.143h-241.714c-30.286 45.714-58.857 105.714-58.857 171.429 0 167.429 102.286 267.429 273.143 267.429 100 0 193.714-78.857 238.857-123.429 45.143 44.571 138.857 123.429 238.857 123.429 170.857 0 273.143-100 273.143-267.429z" />
+<glyph unicode="&#xf27a;" glyph-name="commenting" d="M512 886.857c-282.8 0-512-186.2-512-416 0-99.2 42.8-190 114-261.4-25-100.8-108.6-190.6-109.6-191.6-4.4-4.6-5.6-11.4-3-17.4s8.2-9.6 14.6-9.6c132.6 0 232 63.6 281.2 102.8 65.4-24.6 138-38.8 214.8-38.8 282.8 0 512 186.2 512 416s-229.2 416-512 416zM256 406.857c-35.4 0-64 28.6-64 64s28.6 64 64 64 64-28.6 64-64-28.6-64-64-64zM512 406.857c-35.4 0-64 28.6-64 64s28.6 64 64 64 64-28.6 64-64-28.6-64-64-64zM768 406.857c-35.4 0-64 28.6-64 64s28.6 64 64 64 64-28.6 64-64-28.6-64-64-64z" />
+<glyph unicode="" glyph-name="commenting" d="M512 886.857c-282.8 0-512-186.2-512-416 0-99.2 42.8-190 114-261.4-25-100.8-108.6-190.6-109.6-191.6-4.4-4.6-5.6-11.4-3-17.4s8.2-9.6 14.6-9.6c132.6 0 232 63.6 281.2 102.8 65.4-24.6 138-38.8 214.8-38.8 282.8 0 512 186.2 512 416s-229.2 416-512 416zM256 406.857c-35.4 0-64 28.6-64 64s28.6 64 64 64 64-28.6 64-64-28.6-64-64-64zM512 406.857c-35.4 0-64 28.6-64 64s28.6 64 64 64 64-28.6 64-64-28.6-64-64-64zM768 406.857c-35.4 0-64 28.6-64 64s28.6 64 64 64 64-28.6 64-64-28.6-64-64-64z" />
+<glyph unicode="git" glyph-name="git" d="M1004.692 493.606l-447.096 447.080c-25.738 25.754-67.496 25.754-93.268 0l-103.882-103.876 78.17-78.17c12.532 5.996 26.564 9.36 41.384 9.36 53.020 0 96-42.98 96-96 0-14.82-3.364-28.854-9.362-41.386l127.976-127.974c12.532 5.996 26.566 9.36 41.386 9.36 53.020 0 96-42.98 96-96s-42.98-96-96-96-96 42.98-96 96c0 14.82 3.364 28.854 9.362 41.386l-127.976 127.974c-3.042-1.456-6.176-2.742-9.384-3.876v-266.968c37.282-13.182 64-48.718 64-90.516 0-53.020-42.98-96-96-96s-96 42.98-96 96c0 41.796 26.718 77.334 64 90.516v266.968c-37.282 13.18-64 48.72-64 90.516 0 14.82 3.364 28.852 9.36 41.384l-78.17 78.17-295.892-295.876c-25.75-25.776-25.75-67.534 0-93.288l447.12-447.080c25.738-25.75 67.484-25.75 93.268 0l445.006 445.006c25.758 25.762 25.758 67.54-0.002 93.29z" />
+<glyph unicode="brand80" glyph-name="git" d="M1004.692 493.606l-447.096 447.080c-25.738 25.754-67.496 25.754-93.268 0l-103.882-103.876 78.17-78.17c12.532 5.996 26.564 9.36 41.384 9.36 53.020 0 96-42.98 96-96 0-14.82-3.364-28.854-9.362-41.386l127.976-127.974c12.532 5.996 26.566 9.36 41.386 9.36 53.020 0 96-42.98 96-96s-42.98-96-96-96-96 42.98-96 96c0 14.82 3.364 28.854 9.362 41.386l-127.976 127.974c-3.042-1.456-6.176-2.742-9.384-3.876v-266.968c37.282-13.182 64-48.718 64-90.516 0-53.020-42.98-96-96-96s-96 42.98-96 96c0 41.796 26.718 77.334 64 90.516v266.968c-37.282 13.18-64 48.72-64 90.516 0 14.82 3.364 28.852 9.36 41.384l-78.17 78.17-295.892-295.876c-25.75-25.776-25.75-67.534 0-93.288l447.12-447.080c25.738-25.75 67.484-25.75 93.268 0l445.006 445.006c25.758 25.762 25.758 67.54-0.002 93.29z" />
+</font></defs></svg>

src/img/de.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-de" viewBox="0 0 640 480">
+  <path fill="#ffce00" d="M0 320h640v160H0z"/>
+  <path d="M0 0h640v160H0z"/>
+  <path fill="#d00" d="M0 160h640v160H0z"/>
+</svg>