layout ng

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

.drone.yml

@@ -1,44 +0,0 @@
-kind: pipeline
-type: docker
-name: default
-
-steps:
-  - name: build
-    image: node
-    commands:
-      - npm install
-      - npm run build
-  - name: deploy-dev
-    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
-    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:
-        - main
-      event:
-        - push

.eleventy.js

@@ -1,22 +1,84 @@
-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/");
+    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.addFilter('getServiceById', (services, serviceId) => {
+        return services.find(s => s.id === serviceId);
     });
 
     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,54 @@
+name: Build and Deploy Website
+
+on: [push]
+
+jobs:
+  build:
+    name: Build Website
+    runs-on: docker
+    container:
+      image: node:lts
+    steps:
+      - uses: actions/checkout@v3
+      - 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]
+    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 ./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 ./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,6 +1,6 @@
 # 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)
+[![Build Status](https://ci.sp-codes.de/api/badges/samuel-p/sp-codes.de/status.svg?branch=main)](https://ci.sp-codes.de/samuel-p/sp-codes.de)
 
 Website for [sp-codes.de](https://sp-codes.de)
 
@@ -9,7 +9,7 @@ Website for [sp-codes.de](https://sp-codes.de)
 The following Parameters are set directly on the Web-Server.
 
 ```
-Content-Security-Policy: default-src 'none'; script-src 'self' https://plausible.sp-codes.de; object-src 'none'; style-src 'self'; img-src 'self' https://shields.sp-codes.de; media-src 'none'; frame-src 'none'; font-src 'self'; connect-src 'self' https://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,11 +3,9 @@
   "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",
+    "minify-css": "uncss -n -H dist/ -o dist/css/main-*.css dist/**/*.html dist/**/**/*.html dist/**/**/**/*.html dist/**/**/**/**/*.html dist/**/**/**/**/**/*.html",
+    "start": "eleventy --serve --watch",
+    "build": "eleventy && npm run move-index && npm run minify-css",
     "move-index": "cpx dist/de/index.html dist/"
   },
   "author": "samuel-p",
@@ -16,19 +14,25 @@
     "url": "https://git.sp-codes.de/samuel-p/sp-codes.de"
   },
   "optionalDependencies": {
-    "browser-sync": "^2.26.14"
+    "browser-sync": "^2.29.3"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^0.12.1",
-    "@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": "^5.0.0",
-    "node-sass-tilde-importer": "^1.0.2",
-    "npm-run-all": "^4.1.5"
+    "eleventy-plugin-rev": "^2.0.0",
+    "eleventy-sass": "^2.2.4",
+    "glob": "^10.3.10",
+    "minify": "^10.5.2",
+    "postcss": "^8.4.32",
+    "sass": "^1.69.5",
+    "uncss": "^0.17.3"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.3",
-    "bootstrap": "^4.6.0",
-    "flag-icon-css": "^3.5.0"
+    "bootstrap": "^5.3.2"
   }
 }

src/_data/donations.json

@@ -1,10 +1,281 @@
+[
   {
-  "banktransfer": {
-    "number": 3,
-    "color": "success"
+    "year": 2023,
+    "donations": [
+      {
+        "date": "16.11.2023",
+        "amount": 25,
+        "via": "banktransfer",
+        "from": null,
+        "first": false
       },
-  "cash": {
-    "number": 0,
-    "color": "inactive"
+      {
+        "date": "26.10.2023",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "ub1x",
+        "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/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/services.json

@@ -1,111 +1,119 @@
 [
-  {
-    "id": "searx",
-    "name": "Searx",
-    "icon": "fas fa-search",
-    "url": "https://searx.sp-codes.de",
-    "status": "https://searx.sp-codes.de",
-    "summary": {
-      "de": "Eine privatsphären-respektierende, hackbare Metasuchmaschine.",
-      "en": "A privacy-respecting, hackable metasearch engine."
-    }
-  },
   {
     "id": "matrix",
     "name": "Matrix",
-    "icon": "fas fa-comments",
+    "icon": "i-comments",
     "url": "https://chat.sp-codes.de",
-    "status": "https://matrix.sp-codes.de/_matrix/static/",
+    "status": "1",
     "summary": {
-      "de": "Ein offenes Netzwerk für sichere, dezentralisierte Kommunikation.",
-      "en": "An open network for secure, decentralized communication."
+      "de": "Die offene Plattform für sichere und dezentrale Kommunikation.",
+      "en": "The open platform for secure and decentralized communication."
+    },
+    "ossrox": {
+      "url": "https://ossrox.org/store/matrix",
+      "description": {
+        "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": "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 Videokonferenzen mit Leichtigkeit.",
+      "en": "Easy video conferencing with ease."
     }
   },
   {
-    "id": "gitea",
-    "name": "Gitea",
-    "icon": "fas fa-code",
-    "url": "https://git.sp-codes.de",
-    "status": "https://git.sp-codes.de",
+    "id": "mastodon",
+    "name": "Mastodon",
+    "icon": "i-mastodon",
+    "url": "https://social.sp-codes.de",
+    "status": "7",
     "summary": {
-      "de": "Eine leichtgewichtige Code-Hosting-Plattform für git.",
-      "en": "A lightweight code hosting platform for git."
+      "de": "Das soziale Netzwerk für dezentrale und sichere Interaktion.",
+      "en": "The social network for decentralized and secure interaction."
+    }
+  },
+  {
+    "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."
+    }
+  },
+  {
+    "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."
     }
   },
   {
     "id": "connectivitycheck",
     "name": "Captive Portal Check",
-    "icon": "fas fa-wifi",
-    "status": "https://connectivitycheck.sp-codes.de/generate204",
+    "icon": "i-wifi",
+    "status": "19",
     "summary": {
-      "de": "Eine datenschutzfreundliches Tool, um Anmeldeseiten in WLAN-Netzwerken zu erkennen.",
-      "en": "A privacy friendly Service to detect captive portals in WIFI networks."
+      "de": "Überprüfung der Verfügbarkeit von Internetzugang.",
+      "en": "Verification of Internet access availability."
     }
   },
   {
-    "id": "firefox-sync",
-    "name": "Firefox Sync",
-    "icon": "fab fa-firefox-browser",
-    "status": "https://sync.firefox.sp-codes.de/token/",
+    "id": "ntfy",
+    "name": "ntfy",
+    "icon": "i-cloud-download",
+    "url": "https://ntfy.sp-codes.de",
+    "status": "18",
     "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": "Echtzeitbenachrichtigungen mit UnifiedPush-Unterstützung.",
+      "en": "Real-time notifications with UnifiedPush support."
+    }
+  },
+  {
+    "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."
     }
   },
   {
     "id": "shields",
     "name": "Shields",
-    "icon": "fas fa-tags",
+    "icon": "i-tags",
     "url": "https://shields.sp-codes.de",
-    "status": "https://shields.sp-codes.de",
+    "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."
-    }
-  },
-  {
-    "id": "invidious",
-    "name": "Invidious",
-    "icon": "fab fa-youtube",
-    "url": "https://invidious.sp-codes.de",
-    "status": "https://invidious.sp-codes.de",
-    "summary": {
-      "de": "Ein alternatives YouTube-Frontend.",
-      "en": "An alternative YouTube-Frontend."
-    }
-  },
-  {
-    "id": "nitter",
-    "name": "Nitter",
-    "icon": "fab fa-twitter",
-    "url": "https://nitter.sp-codes.de",
-    "status": "https://nitter.sp-codes.de",
-    "summary": {
-      "de": "Ein alternatives Twitter-Frontend.",
-      "en": "An alternative Twitter-Frontend."
-    }
-  },
-  {
-    "id": "yotter",
-    "name": "Yotter",
-    "icon": "fas fa-desktop",
-    "url": "https://yotter.sp-codes.de",
-    "status": "https://yotter.sp-codes.de",
-    "beta": true,
-    "summary": {
-      "de": "Ein alternatives Twitter- und YouTube-Frontend.",
-      "en": "An alternative Twitter- and YouTube-Frontend."
+      "de": "Visuelle Badges zur Anzeige von Projektinformationen und Status.",
+      "en": "Visual badges for displaying project information and status."
     }
   }
 ]

src/_data/strings.json

@@ -32,11 +32,59 @@
     "en": "Online"
   },
   "outage": {
-    "de": "Fehler",
-    "en": "Error"
+    "de": "Ausfall",
+    "en": "Outage"
   },
   "maintenance": {
     "de": "Wartung",
     "en": "Maintenance"
+  },
+  "date": {
+    "de": "Datum",
+    "en": "Date"
+  },
+  "amount": {
+    "de": "Betrag",
+    "en": "Amount"
+  },
+  "via": {
+    "de": "Via",
+    "en": "Via"
+  },
+  "from": {
+    "de": "Von",
+    "en": "Form"
+  },
+  "banktransfer": {
+    "de": "Überweisung",
+    "en": "Bank transfer"
+  },
+  "total": {
+    "de": "Gesamt",
+    "en": "Total"
+  },
+  "name": {
+    "de": "Name",
+    "en": "Name"
+  },
+  "type": {
+    "de": "Typ",
+    "en": "Type"
+  },
+  "provider": {
+    "de": "Anbieter",
+    "en": "Provider"
+  },
+  "location": {
+    "de": "Standort",
+    "en": "Location"
+  },
+  "month": {
+    "de": "Monat",
+    "en": "Month"
+  },
+  "year": {
+    "de": "Jahr",
+    "en": "Year"
   }
 }

src/_includes/donations-current.html

@@ -0,0 +1,36 @@
+<div class="table-container">
+    <table class="table">
+        <thead>
+        <tr>
+            <th>{{strings.date[locale]}}</th>
+            <th>{{strings.via[locale]}}</th>
+            <th>{{strings.from[locale]}}</th>
+            <th>{{strings.amount[locale]}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for donation in donations[0].donations %}
+        <tr>
+            <td>{{donation.date}}</td>
+            {% if donation.via == 'opencollective' %}
+            <td>Open Collective</td>
+            {% else %}
+            <td>{{strings[donation.via][locale]}}</td>
+            {% endif %}
+            {% 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.total[locale]}}</th>
+            <th>{{donations[0].donations | sum | amount}} €</th>
+        </tr>
+        </tfoot>
+    </table>
+</div>

src/_includes/donations.html

@@ -0,0 +1,40 @@
+{% for year in donations %}
+<h2>{{year.year}}</h2>
+
+<div class="table-container">
+    <table class="table">
+        <thead>
+        <tr>
+            <th>{{strings.date[locale]}}</th>
+            <th>{{strings.via[locale]}}</th>
+            <th>{{strings.from[locale]}}</th>
+            <th>{{strings.amount[locale]}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for donation in year.donations %}
+        <tr>
+            <td>{{donation.date}}</td>
+            {% if donation.via == 'opencollective' %}
+            <td>Open Collective</td>
+            {% else %}
+            <td>{{strings[donation.via][locale]}}</td>
+            {% endif %}
+            {% 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.total[locale]}}</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.name[locale]}}</th>
+            <th>{{strings.type[locale]}}</th>
+            <th>{{strings.provider[locale]}}</th>
+            <th>{{strings.location[locale]}}</th>
+            <th>{{strings.amount[locale]}} / {{strings.month[locale]}}</th>
+            <th>{{strings.amount[locale]}} / {{strings.year[locale]}}</th>
+        </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.total[locale]}}</th>
+            <th>{{expenses | sum | amount}} €</th>
+            <th>{{expenses | sum | year | amount}} €</th>
+        </tr>
+        </tfoot>
+    </table>
+</div>

src/_includes/layouts/article.njk

@@ -0,0 +1,101 @@
+---
+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">Alle Teile dieser Serie</div>
+            <div class="card">
+                {%- for post in collections.all %}
+                {% if post.data.series == series %}
+                <div class="p-2">
+                    <a href="{{ post.url | url }}"
+                       class="list-group-item list-group-item-action{% if post.url == page.url %} fw-bold{% endif %}">
+                        {{ post.data.title }}
+                    </a>
+                </div>
+                {% endif %}
+                {%- endfor %}
+            </div>
+        </div>
+        {% endif %}
+        {% set service = services | getServiceById(service) %}
+        {% if service %}
+        <div class="tab-card">
+            <div class="title">Zugehöriger Dienst</div>
+            <div class="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[locale]}}"
+                                 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">Du hast eine Frage dazu?</div>
+            <div class="card">
+                <p>
+                    Komm gerne in der Matrix-Gruppe vorbei und lass uns diskutieren. Ich freue mich auf dein Feedback!
+                </p>
+                <a href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
+            </div>
+        </div>
+        <div class="tab-card">
+            <div class="title">Über mich</div>
+            <div class="card">
+                <p>
+                    Mein Name ist Samuel Philipp und ich bin ein Software Engineer aus Magdeburg. In meiner Freizeit
+                    hoste ich verschiedene freie <a href="/de/services/">Dienste</a>. Hier schreibe ich Artikel rund um
+                    Sicherheit und Datenschutz.
+                </p>
+                <a href="https://samuel-philipp.de">Mehr erfahren</a>
+            </div>
+        </div>
+        <div class="tab-card">
+            <div class="title">Schreib mir deine Meinung</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">
+                        <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

@@ -31,27 +31,22 @@ title: sp-codes
     <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.outbound-links.js"></script>
+    <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>
 <nav class="nav menu border-bottom">
     <div class="toggle">
-        <label for="menu" class="m-0"><span class="fas fa-bars fa-fw mr-1"></span>{{ strings.menu[locale] }}</label>
+        <label for="menu" class="m-0"><span class="i-bars me-2"></span>{{ strings.menu[locale] }}</label>
 
         <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>
+            <a href="{% translatedUrl locale, language.code %}" class="ms-4">
+                <span class="fi-{{ language.icon }}" title="{{ language.label }}"></span>
             </a>
         </div>
         {% endfor %}
@@ -59,11 +54,14 @@ title: sp-codes
     <input type="checkbox" id="menu"/>
 
     <div class="items">
+        <a class="logo mini fixed me-4" href="/{{locale}}/">
+            <img src="/img/sp-codes.svg" alt="sp-codes">
+        </a>
         {%- for entry in collections.all | eleventyNavigation %}
         {% if not entry.url.startsWith("https") and entry.url.includes(locale) or entry.locale == locale %}
         <div class="item{% if entry.url == page.url %} active{% endif %}">
-            <a href="{{ entry.url | url }}" class="mr-3">
-                {% if entry.icon %}<span class="fas fa-{{ entry.icon }} fa-fw mr-1"></span>{% endif %}{{ entry.title }}
+            <a href="{{ entry.url | url }}" class="me-4">
+                {% if entry.icon %}<span class="{{ entry.icon }} me-2"></span>{% endif %}{{ entry.title }}
             </a>
         </div>
         {% endif %}
@@ -72,17 +70,11 @@ title: sp-codes
 
     <div class="flex-grow-1"></div>
 
-    <div class="lang-large">
+    <div class="items lang-large">
         {% 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>
+        <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 %}
@@ -93,21 +85,21 @@ title: sp-codes
         {{ content | safe }}
     </div>
 </div>
-<div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
+<div class="nav d-flex justify-content-start flex-wrap px-4 py-3 menu border-top">
     <div class="d-flex justify-content-start flex-wrap">
-        <div class="mr-3">Made with <span class="fas fa-heart highlight"></span> in Germany</div>
-        <div class="mr-3"><span class="far fa-copyright mr-1"></span>Samuel Philipp</div>
+        <div class="me-4">Made with <span class="i-heart highlight"></span> in Germany</div>
+        <div class="me-4"><a href="https://samuel-philipp.de"><span class="i-copyright me-2"></span>Samuel Philipp</a></div>
     </div>
     <div class="flex-sm-grow-1"></div>
     <div class="d-flex justify-content-sm-start flex-wrap">
-        <div class="mr-3"><a href="/{{locale}}/imprint"><span class="fas fa-info-circle mr-1"></span>{{strings.imprint[locale]}}</a>
+        <div class="me-4"><a href="/{{locale}}/imprint"><span class="i-info-circle me-2"></span>{{strings.imprint[locale]}}</a>
         </div>
-        <div class="mr-3"><a href="/{{locale}}/privacy"><span class="fas fa-user-secret mr-1"></span>{{strings.privacy[locale]}}</a>
+        <div class="me-4"><a href="/{{locale}}/privacy"><span class="i-user-secret me-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-1"></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-1"></span>{{strings.stats[locale]}}</a></div>
+        <div class="me-4"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span
+                class="i-code me-2"></span>{{strings.code[locale]}}</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.stats[locale]}}</a></div>
     </div>
 </div>
 </body>

src/_includes/layouts/home.njk

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

src/_includes/layouts/service.njk

@@ -0,0 +1,35 @@
+---
+layout: base.njk
+---
+
+{% set service = services | getServiceById(key) %}
+{% if service %}
+    <h1><i class="{{service.icon}}"></i> {{title}} <a href="https://status.sp-codes.de" class="float-end"><img alt="{{strings.state[locale]}}" src="https://status.sp-codes.de/api/badge/1/status?label=Status&upLabel=Online&downLabel=Ausfall&maintenanceLabel=Wartung"></a></h1>
+
+    <div class="row">
+        <div class="col-lg-8 col-12">
+            {{ content | safe }}
+        </div>
+        <div class="col-lg-4 col-12">
+            <div class="tab-card">
+                <div class="title"><h1 class="text-center fw-bold">sp-codes</h1></div>
+                <div class="card">
+                    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>
+                    <div class="text-center mt-2">
+                        <a class="btn btn-primary" target="_blank" href="https://chat.sp-codes.de/#/register">Jetzt registrieren</a>
+                    </div>
+                </div>
+            </div>
+            {% if service.ossrox %}
+            <div class="tab-card ossrox">
+                <div class="title"><img class="ossrox" src="/img/ossrox-white.svg" alt="Ossrox"></div>
+                <div class="card">
+                    {{service.ossrox.description[locale]}}
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+{% else %}
+    Service not found
+{% endif %}

src/_includes/layouts/services.njk

@@ -1,10 +1,10 @@
 ---
 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>
+<a class="float-end mt-3" href="https://status.sp-codes.de" target="_blank"><strong><i class="i-heartbeat me-2"></i>Status</strong></a>
 
 {{ content | safe }}
 
 <div class="row justify-content-center">
-  {% include 'services-extended.html' %}
+  {% 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,21 +1,45 @@
-<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="svg-icon" src="/img/matrix.svg" alt="">
+<!-- TODO -->
+<div class="d-flex flex-wrap gap-3 my-3 contact-links">
+    <div><a href="mailto:mail@sp-codes.de">
+        <span class="d-none d-md-inline-block i-envelope i-2x 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 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://git.sp-codes.de/samuel-p">
-        <img class="svg-icon" src="/img/gitea.svg" alt="">
+    <div><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+        <span class="d-none d-md-inline-block i-matrix i-2x i-fw"></span>
+        <span class="d-inline-block d-md-none i-matrix i-2x i-fw"></span>
+    </a></div>
+    <div><a rel="me" href="https://social.sp-codes.de/@samuel_p">
+        <span class="d-none d-md-inline-block i-mastodon i-2x i-fw"></span>
+        <span class="d-inline-block d-md-none i-mastodon i-2x i-fw"></span>
+    </a></div>
+    <div><a rel="me" href="https://www.xing.com/profile/Samuel_Philipp">
+        <span class="d-none d-md-inline-block i-xing i-2x i-fw"></span>
+        <span class="d-inline-block d-md-none i-xing i-2x i-fw"></span>
+    </a></div>
+    <div><a rel="me" href="https://www.linkedin.com/in/samuel-philipp">
+        <span class="d-none d-md-inline-block i-linkedin i-2x i-fw"></span>
+        <span class="d-inline-block d-md-none i-linkedin i-2x i-fw"></span>
+    </a></div>
+    <div><a href="https://git.sp-codes.de/samuel-p">
+        <span class="d-none d-md-inline-block i-git i-2x i-fw"></span>
+        <span class="d-inline-block d-md-none i-git i-2x i-fw"></span>
+    </a></div>
+    <div><a href="https://github.com/samuel-p">
+        <span class="d-none d-md-inline-block i-github i-2x i-fw"></span>
+        <span class="d-inline-block d-md-none i-github i-2x i-fw"></span>
+    </a></div>
+    <div><a href="https://stackoverflow.com/users/9662601/samuel-p">
+        <span class="d-none d-md-inline-block i-stackoverflow i-2x i-fw"></span>
+        <span class="d-inline-block d-md-none i-stackoverflow i-2x i-fw"></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>
-<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>
+
+<!--<div class="d-flex justify-content-center mb-3">-->
+<!--    <div class="lead text-center">-->
+<!--        {% if locale == 'de' %}-->
+<!--        <a href="https://samuel-philipp.de">samuel-philipp.de</a>-->
+<!--        {% elseif locale == 'en' %}-->
+<!--        <a href="https://samuel-philipp.com">samuel-philipp.com</a>-->
+<!--        {% endif %}-->
+<!--    </div>-->
+<!--</div>-->

src/_includes/services-extended.html

@@ -6,13 +6,13 @@
         <div class="beta">TEST-PHASE</div>
         {% endif %}
         <div class="inner">
-            <i class="{{service.icon}} fa-4x"></i>
+            <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="fas fa-external-link-alt"></i></a>{% endif %}</h2>
+                    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[locale]}}" src="https://shields.sp-codes.de/endpoint?label={{strings.state[locale]}}&url=https%3A%2F%2Fstatus.sp-codes.de%2Fapi%2Fbadge%3Fservice%3D{{service.status}}%26operational%3D{{strings.operational[locale]}}%26outage%3D{{strings.outage[locale]}}%26maintenance%3D{{strings.maintenance[locale]}}">
+                    <img alt="{{strings.state[locale]}}" src="https://status.sp-codes.de/api/badge/{{service.status}}/status?label={{strings.state[locale]}}&upLabel={{strings.operational[locale]}}&downLabel={{strings.outage[locale]}}&maintenanceLabel={{strings.maintenance[locale]}}">
                 </a>
             </div>
             {% endif %}

src/_includes/services-simple.html

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

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,10 @@
+---
+layout: base.njk
+key: all-donations
+title: Unterstützen
+---
+<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,43 @@
+---
+layout: base.njk
+key: contact
+title: Kontakt
+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">
+    <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>Schicke mir eine E-Mail an <strong>mail@sp-codes.de</strong></div>
+        </a>
+        <a class="card mb-3 d-flex align-items-center text-decoration-none"
+           href="https://social.sp-codes.de/@samuel_p">
+            <div class="pr-3"><span class="i-mastodon text-foreground i-fw i-4x"></span></div>
+            <div>Folge mir auf Mastodon oder schicke mir dort eine Nachricht an
+                <strong>@samuel_p@social.sp-codes.de</strong></div>
+        </a>
+        <a class="card mb-3 d-flex align-items-center text-decoration-none"
+           href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+            <div class="pr-3"><span class="i-matrix text-foreground i-fw i-4x"></span></div>
+            <div>Schreibe mir auf Matrix an <strong>@samuel-p:matrix.sp-codes.de</strong></div>
+        </a>
+        <a class="card mb-3 d-flex align-items-center text-decoration-none"
+           href="https://blabber.im/i/samuel-p/dismail.de">
+            <div class="pr-3"><span class="i-xmpp text-foreground i-fw i-4x"></span></div>
+            <div>Schreibe mir auf XMPP an <strong>samuel-p@dismail.de</strong></div>
+        </a>
+        <a class="card mb-3 d-flex align-items-center text-decoration-none"
+           href="https://threema.id/YSCU6F6U">
+            <div class="pr-3"><span class="i-threema text-foreground i-fw i-4x"></span></div>
+            <div>Schreibe mir auf Threema an die ID <strong>YSCU6F6U</strong></div>
+        </a>
+    </div>
+</div>

src/de/donate.html

@@ -5,78 +5,78 @@ title: Unterstützen
 eleventyNavigation:
   key: donate
   title: Unterstützen
-  icon: hand-holding-heart
-  order: 3
+  icon: i-hand-holding-heart
+  order: 4
 ---
-<h1><i class="fas fa-hand-holding-heart"></i> Unterstützen</h1>
+<h1><i class="i-hand-holding-heart"></i> Unterstützen</h1>
 
-<p>Alle öffentlichen Dienste sind kostenfrei nutzbar. Wenn du dich trotzdem an den Unkosten für Server-Infrastruktur
+<p>Alle öffentlichen Dienste sind kostenfrei nutzbar. Wenn du dich trotzdem an den Kosten für die Server-Infrastruktur
     beteiligen oder mir eine kleine Anerkennung für meinen Blog zukommen lassen willst, kannst du mich über die
     folgenden Wege unterstützen<sup>1</sup>:</p>
 
-<div class="row justify-content-center">
+<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="fas fa-comments fa-fw m-2"></i>Empfehlen</h2>
+            <h2><i class="i-comments i-fw m-2"></i>Empfehlen</h2>
             <div>Gerne darfst du meine Dienste und meine Blog-Beiträge weiter empfehlen. Ich freue mich sehr, wenn ich
                 euch damit eine Freude machen kann.
             </div>
         </div>
         <div class="card mb-3">
-            <h2><i class="fas fa-credit-card fa-fw m-2"></i>Banküberweisung</h2>
-            <div>Wenn Du mir etwas überweisen willst, schreib mir einfach eine kurze <a href="/{{locale}}/imprint">Nachricht</a>.
+            <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.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations.banktransfer.number }}-{{ donations.banktransfer.color }}">
+                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | banktransfers }}-active">
                 </div>
             </div>
         </div>
         <div class="card mb-3">
-            <h2><i class="fas fa-money-bill fa-fw m-2"></i>Bargeld</h2>
+            <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.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations.cash.number }}-{{ donations.cash.color }}">
+                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | cash }}-inactive">
                 </div>
             </div>
         </div>
         <div class="card mb-3">
-            <h2><img class="m-2" width="30" height="24" src="/img/opencollective.svg">Open Collective</h2>
-            <div>Gerne kannst du mir auch über <a href="https://opencollective.com/sp-codes" target="_blank">Open
-                Collective</a> einen kleinen Betrag zukommen lassen. Wenn du willst, kannst du mich dort auch mit einer
-                regelmäßigen Spende unterstützen.
+            <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://opencollective.com/sp-codes" target="_blank"><img
-                            alt="Open Collective {{ strings.supporters[locale] }}"
-                            src="https://shields.sp-codes.de/opencollective/all/sp-codes?label={{ strings.supporters[locale] }}&logo=open-collective"></a>
-                </div>
+                <a href="https://hetzner.cloud/?ref=5zWtNOF3q8i8"
+                   target="_blank">Gutschein einlösen</a>
             </div>
         </div>
         <div class="card mb-3">
-            <h2><i class="fas fa-network-wired fa-fw m-2"></i>netcup</h2>
-            <div>Einige meiner Dienste hoste ich bei <a href="https://www.netcup.de/" target="_blank">netcup</a>. Wenn
-                du einen eigenen Server oder eine Webseite bei netcup betreiben willst, kannst du gerne den folgenden
-                Link (auf dem Bild) nutzen. Dadurch erhalte ich bei deiner Bestellung eine kleine Provision. Falls du
+            <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">
-                    <img src="/img/netcup-setC-234x60.png" width="234" height="60" alt="zu netcup"/>
-                </a>
+                   target="_blank">Gutschein einlösen</a>
             </div>
         </div>
     </div>
 </div>
 
-<div class="mt-4">
-    <p>Eine aktuelle Liste aller eingegangenen Spenden pflege ich <a target="_blank"
-                                                                     href="https://git.sp-codes.de/sp-codes/expenses-donations/src/branch/master/donations.md">hier</a>.
-    </p>
-</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,

src/de/imprint.html

@@ -2,7 +2,7 @@
 layout: base.njk
 title: Impressum
 ---
-<h1>Impressum</h1>
+<h1><i class="i-info-circle"></i> Impressum</h1>
 <div class="mb-4">
     <h2>Angaben gemäß § 5 TMG:</h2>
     <p>Samuel Philipp<br/>
@@ -11,27 +11,22 @@ title: Impressum
         Deutschland</p>
 </div>
 <div class="mb-3 pt-4 border-top">
-    <h2>Kontaktmöglichkeiten</h2>
-    <p>Du möchtest mit mir in Kontakt treten, mir einen Fehler mitteilen, hast eine Frage zu einem Dienst oder möchtest
-        mich unterstützen? Schick mir gerne deine Nachricht auf einem der folgenden Wege. Ich freue mich von dir zu
-        hören.</p>
-    <div class="row justify-content-center">
-        <div class="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="fas fa-fw fa-4x fa-envelope text-white"></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.tchncs.de/@samuel_p">
-                <div class="pr-3"><span class="fab fa-fw fa-4x fa-mastodon text-white"></span></div>
-                <div>Folge mir auf Mastodon oder schicke mir dort eine Nachricht an
-                    <strong>@samuel_p@social.tchncs.de</strong></div>
-            </a>
-            <a class="card mb-3 d-flex align-items-center text-decoration-none"
-               href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
-                <div class="pr-3"><img class="svg-icon" src="/img/matrix.svg" alt=""></div>
-                <div>Schreibe mir auf Matrix an <strong>@samuel-p:matrix.sp-codes.de</strong></div>
-            </a>
+    <h2>Kontakt</h2>
+    <p>
+        <strong>E-Mail-Adresse:</strong> mail@sp-codes.de<br>
+        <strong>Weitere Kontaktmöglichkeiten:</strong>  <a href="/{{locale}}/contact">https://sp-codes.de/{{locale}}/contact</a><br>
+    </p>
 </div>
+<div class="mb-3 pt-4 border-top">
+    <h2>Domains</h2>
+    <ul>
+        <li><a href="https://samuel-philipp.de">samuel-philipp.de</a></li>
+        <li><a href="https://sp-codes.de">sp-codes.de</a></li>
+        <li><a href="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>

src/de/index.html

@@ -1,43 +1,73 @@
 ---
-layout: home.njk
+layout: base.njk
 key: home
 title: Home
 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-5">
+    <div class="col-12 col-lg-4 m-3 m-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 werbe-frei. 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 gerne 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>
-        <p class="lead text-center mb-2">
-            Für die Nutzer:innen der Dienste und Interessierte gibt es einen öffentlichen Matrix-Raum als
-            Austauschort für Fragen, Ideen und Probleme: <a
-                href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
+
+<div class="row py-5">
+    <div class="col-12 col-lg-4 col-12 m-3 m-lg-0 fill-col-inner order-lg-1">
+        <div class="me-profile">
+            <img src="/img/samuel-1024-p.jpg" alt="Samuel Philipp">
+        </div>
+    </div>
+    <div class="col-12 col-lg-8 col-12">
+        <h1>Über mich</h1>
+        <p class="mb-2">
+            Mein Name ist Samuel Philipp und ich bin Full-Stack-Developer und SysAdmin. In meiner Freizeit betreibe ich alle angebotenen Dienste von sp-codes. Wenn du mehr über mich erfahren möchtest, schau gerne auf meiner persönlichen Webseite vorbei:
+            <a href="https://samuel-philipp.de">samuel-philipp.de</a>
         </p>
+        <p class="mb-2">
+            Du hast einen Fehler gefunden, Verbesserungsvorschläge oder eine andere Frage? Nimm gerne über eine der folgenden Plattformen Kontakt mit mir auf. Ich freue mich auf deine Nachricht!
+        </p>
+        <p class="mb-2">
+            {% include "profiles.html" %}
+        </p>
+        <hr/>
+        <p class="mb-3">
+            Mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> biete ich professionelles Hosting
+            von Open-Source-Tools für Unternehmen, Privatpersonen und andere Organisationen an. Wenn du daran
+            interessiert bist, schau doch gerne auf unserer Webseite vorbei oder schreibe mir eine Nachricht.
+        </p>
+        <p class="text-center">
+            <a href="https://ossrox.org" target="_blank">
+                <img class="ossrox-logo" src="/img/ossrox-white.svg" alt="Ossrox">
+            </a>
+        </p>
+    </div>
+</div>
+
+<div class="row justify-content-center py-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-extended.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

@@ -2,7 +2,7 @@
 layout: base.njk
 title: Datenschutzerklärung
 ---
-<h1>Datenschutzerklärung</h1>
+<h1><i class="i-user-secret"></i> Datenschutzerklärung</h1>
 <div class="mb-3">
     <h2>Verantwortlicher</h2>
     <p>
@@ -11,7 +11,9 @@ title: Datenschutzerklärung
         39104 Magdeburg, Deutschland<br>
     </p>
     <p>
-        <strong>E-Mail-Adresse:</strong> info@sp-codes.de<br>
+        <strong>E-Mail-Adresse:</strong> mail@sp-codes.de<br>
+        <strong>Kontaktmöglichkeiten:</strong> <a
+            href="/{{locale}}/contact">https://sp-codes.de/{{locale}}/contact</a><br>
         <strong>Impressum:</strong> <a href="/{{locale}}/imprint">https://sp-codes.de/{{locale}}/imprint</a>
     </p>
 </div>
@@ -37,19 +39,18 @@ title: Datenschutzerklärung
     </p>
     <h3>Analysedienste</h3>
     <p>
-        Wir verwenden die Open-Source-Software <a href="https://plausible.io">Plausible Analytics</a>, bereitgestellt
-        von <a href="https://plausible.sp-codes.de">plausible.sp-codes.de</a>, um Website-Besuche, Seitenaufrufe usw. zu
+        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><a href="https://plausible.sp-codes.de/samuel-philipp.de">samuel-philipp.de</a></li>
-        <li><a href="https://plausible.sp-codes.de/sp-codes.de">sp-codes.de</a></li>
-        <li><a href="https://plausible.sp-codes.de/sp-magic.de">sp-magic.de</a></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>
     <p>
-        Es werden keine Cookies verwendet und keine persönlichen Daten; nicht einmal deine IP-Adresse
-        oder dein User-Agent wird gespeichert. Weitere Informationen findest du in der <a
-            href="https://plausible.io/data-policy">Plausible Datenschutzerklärung</a>.
+        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">

src/de/services.html

@@ -5,14 +5,22 @@ title: Dienste
 eleventyNavigation:
   key: services
   title: Dienste
-  icon: server
+  icon: i-server
   order: 2
 ---
-<h1><i class="fas fa-server"></i> Dienste</h1>
-<p>In meiner Freizeit stelle ich verschiedene quelloffene Dienste für die freie Nutzung bereit. Hier findest du eine
-    Übersicht der einzelnen Services und jeweils eine kurze Beschreibung. Alle Services werden in Deutschland
-    gehostet. Fühl dich frei, davon Gebrauch zu machen.</p>
+<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 zu Nutzung. Alle Dienste werden in Deutschland gehostet. Du bist herzlich eingeladen,
+    sie zu nutzen.</p>
 
-<p>Für die Nutzer:innen der Dienste gibt es einen öffentlichen Matrix-Raum als Austauschort für Fragen, Ideen und Probleme. Komm gerne vorbei, wenn du einen der hier aufgelisteten Dienste nutzt oder einfach so mal vorbeischauen willst:</p>
+<p>Da die Dienste privat angeboten werden, kann leider keine dauerhafte Bereitstellung garantiert werden. Sollte ein
+    Dienst eingestellt werden, wird dies für Dienste außerhalb der Test-Phase mindestens drei Monate im Voraus
+    angekündigt.</p>
 
-<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>
+<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>

src/de/services/connectivitycheck.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: connectivitycheck
 title: Captive Portal Check
 ---
-# <i class="fas fa-wifi"></i> Captive Portal Check
+# <i class="i-wifi"></i> Captive Portal Check
 
 Ein Captive Portal ist eine Anmeldeseite in öffentlichen WLAN-Netzwerken, um den Internet-Zugriff an die Zustimmung bestimmter Nutzungsregeln zu binden. Wenn du in einem öffentlichen Netzwerk eine Anmeldeseite angezeigt bekommst, nutzt dein Gerät dafür einen Captive Portal Check. Dieser ermöglicht es dem Gerät, herauszufinden, ob du einen direkten Internetzugang hast oder nicht. Unter Android wird hierfür beispielsweise eine Anfrage an einen Google-Server gestellt.
 
@@ -48,6 +48,21 @@ Starte den _network-manager_ neu:
 sudo service network-manager restart
 ```
 
+## Einrichtung in Fedora
+
+Unter Fedora muss die Datei `/etc/NetworkManager/NetworkManager.conf` geändert werden. Füge die folgenden Zeilen hinzu oder passe sie entsprechend an:
+
+```
+[connectivity]
+uri=https://connectivitycheck.sp-codes.de/generate204
+```
+
+Starte den _NetworkManager_ neu:
+
+```
+sudo service NetworkManager restart 
+```
+
 ## Einrichtung in Firefox
 
 Tippe [about:config](about:config) in die Adresszeile von Firefox und suche anschließend nach `captivedetect.canonicalURL` und `network.connectivity-service`. Setze die URL-Werte auf `https://connectivitycheck.sp-codes.de/generate204`, die Domain-Werte auf `connectivitycheck.sp-codes.de`. Das war es schon.

src/de/services/etherpad.md

@@ -0,0 +1,17 @@
+---
+layout: base.njk
+key: etherpad
+title: Etherpad
+---
+# <i class="i-pencil-square"></i> Etherpad
+
+Etherpad ist eine webbasierte Kollaborationsplattform, die es Benutzern ermöglicht, Textdokumente in Echtzeit gemeinsam zu bearbeiten. Mehrere Benutzer können zeitgleich auf dasselbe Etherpad-Dokument zugreifen, Änderungen vornehmen und sehen, was Andere schreiben. Etherpad bietet eine einfache und effektive Möglichkeit für Teamarbeit, Brainstorming, gemeinsames Schreiben und vieles mehr, ohne dass dabei Versionskonflikte auftreten.
+
+Etherpad ist auch in Jitsi Meet eingebungen. So können während einem Meeting gemeinsame Notizen festgehalten werden.
+
+__Seit Ende 2020 betreibe ich Etherpad: [https://pad.sp-codes.de](https://pad.sp-codes.de)__ Gerne kannst du Etherpad auch für deine Notizen verwenden.
+
+## 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
----
-# <i class="fab fa-firefox-browser"></i> 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,24 @@
+---
+layout: base.njk
+key: forgejo
+title: Forgejo
+---
+# <i class="i-git"></i> Forgejo
+
+Forgejo ist eine einfache Code-Hosting-Plattform wie GitHub oder GitLab. Sie ist opensource und wird kontinuierlich weiterentwickelt. __Seit Ende 2019 betreibe ich eine eigene Forgejo Instanz, in der ich meine Projekte verwalte.__ So zum Beispiel auch diese Webseite. Schau dir gerne mal den Quelltext an und lass mir Feedback da.
+
+Zusätzlich zu Forgejo betreibe ich noch Woodpecker, eine Plattform, die Forgejo um viele Continuous Integration Funktionen erweitert und beispielsweise automatisierte Builds und Deploys ermöglicht.
+
+Schau gerne mal vorbei und melde dich an, falls du Lust hast, ein Projekt zu entwickeln. Die Registrierung ist seit März 2020 geöffnet.
+
+__Zu Forgejo geht's hier lang: [git.sp-codes.de](https://git.sp-codes.de)__
+
+__Wenn du bei Woodpecker vorbeischauen willst, geht das hier: [ci.sp-codes.de](https://ci.sp-codes.de)__
+
+
+## Weitere nützliche Links
+
+* [Forgejo Webseite](https://forgejo.org/)
+* [Quellcode von Forgejo](https://codeberg.org/forgejo/forgejo)
+* [Woodpecker Webseite](https://woodpecker-ci.org/)
+* [Quellcode von Woodpecker](https://github.com/woodpecker-ci/woodpecker)

src/de/services/gitea.md

@@ -1,24 +0,0 @@
----
-layout: base.njk
-key: gitea
-title: Gitea
----
-# <i class="fas fa-code"></i> 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
----
-# <i class="fab fa-youtube"></i> 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

@@ -3,7 +3,7 @@ layout: base.njk
 key: jitsi
 title: Jitsi Meet
 ---
-# <i class="fas fa-users"></i> Jitsi Meet
+# <i class="i-users"></i> Jitsi Meet
 
 Jitsi-Meet ist eine Plattform für Videokonferenzen. Ohne Anmeldung können vollständig verschlüsselte Video-Chats gestartet werden. Zusätzlich bietet Jitsi-Meet die Möglichkeit den Bildschirm für die anderen Teilnehmer:innen freizugeben, neue Benutzer:innen einfach per Link einzuladen und Nachrichten im integrierten Chat zu verschicken.
 
@@ -11,6 +11,14 @@ __Seit Juli 2020 betreibe ich eine eigene Jitsi-Meet Instanz. Du findest sie unt
 
 Gerne darfst du die Instanz mit anderen Leuten nutzen.
 
+Wenn du einen eigenen Jitsi-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.
+
+<div class="text-center mb-3">
+    <a href="https://ossrox.org/store/jitsi" target="_blank">
+        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
+    </a>
+</div>
+
 ## Weitere nützliche Links
 
 * [Jitsi Webseite](https://jitsi.org/)

src/de/services/mastodon.md

@@ -0,0 +1,58 @@
+---
+layout: base.njk
+key: mastodon
+title: Mastodon
+---
+# <i class="i-mastodon"></i> Mastodon
+
+Mastodon ist ein verteilter Mikroblogging-Dienst, ähnlich wie Twitter. Allerdings basiert der Dienst nicht auf einer zentralen Plattform, sondern besteht aus vielen verschiedenen, dezentralen Instanzen, die von Privatpersonen, Vereinen oder sonstigen Stellen eigenverantwortlich betrieben werden. Dadurch machen sich die Nutzer:innen nicht von einem einzigen Anbieter abhängig, sondern können frei entscheiden, mit wem sie welche Informationen teilen.
+
+Da Mastodon auf offenen Web-Protokollen und freier, quelloffener Software basiert, kann auch mit anderen Diensten, wie Pleroma, PeerTube, Pixelfed, Friendica oder Hubzilla kommuniziert werden. Nutzer:innen können Text-, Bild-, Videonachrichten oder Umfragen also dienst- und serverübergreifend teilen.
+
+__Seit Mai 2021 betreibe ich eine öffentliche Mastodon-Instanz: [social.sp-codes.de](https://social.sp-codes.de/)__
+
+Die Serverregeln und weitere Informationen kannst du gerne [hier](https://social.sp-codes.de/about/more) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf
+deine Nachricht an [@samuel_p@matrix.sp-codes.de](https://social.sp-codes.de/@samuel_p).
+
+<div class="text-center mb-3">
+<a class="card d-inline-block font-weight-bold" target="_blank" href="https://social.sp-codes.de/about">Jetzt registrieren</a>
+</div>
+
+Wenn du einen eigenen Mastodon-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.
+
+<div class="text-center mb-3">
+    <a href="https://ossrox.org/store/mastodon" target="_blank">
+        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
+    </a>
+</div>
+
+## 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,13 +1,11 @@
 ---
-layout: base.njk
+layout: service.njk
 key: matrix
 title: Matrix
 ---
 
-# <i class="fas fa-comments"></i> 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
+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.
 
@@ -16,9 +14,6 @@ erstellen und trotzdem mit allen Matrix-Nutzern:innen kommunizieren, nicht nur m
 verschickten Nachrichten werden so nur auf den beteiligten Servern gespeichert. Auch die Anrufe laufen nur über die
 beteiligten Server.
 
-__Seit Anfang 2020 betreibe ich einen öffentlichen Matrix-Server: [matrix.sp-codes.de](https://matrix.sp-codes.de/) und
-eine öffentliche Element-Web Instanz: [chat.sp-codes.de](https://chat.sp-codes.de/)__
-
 Die Serverregeln kannst du gerne [hier](https://matrix.sp-codes.de/_matrix/consent) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf
 deine Nachricht an [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de).
 
@@ -30,10 +25,10 @@ Auf meinem Blog findest du eine Artikelserie für einen einfachen Einstieg in Ma
 <div class="col-12 col-md-10 col-lg-8">
 <div class="card-list">
 <div class="card">
-<a href="https://blog.sp-codes.de/werde-teil-der-matrix-matrix-teil-1/">Teil 1: Werde Teil der Matrix</a>
+<a href="/de/services/matrix/setup/part-1/">Teil 1: Werde Teil der Matrix</a>
 </div>
 <div class="card">
-<a href="https://blog.sp-codes.de/sichere-chats-mit-matrix-matrix-teil-2/">Teil 2: Sichere Chats mit Matrix</a>
+<a href="/de/services/matrix/setup/part-2/">Teil 2: Sichere Chats mit Matrix</a>
 </div>
 </div>
 </div>
@@ -62,9 +57,8 @@ Hier möchte ich ein paar Gründe nennen, warum ich Matrix nutze und vielen ande
 * [Verschiedene Apps](https://matrix.org/clients)
 * [Liste öffentlicher Räume](https://view.matrix.org/)
 * Listen mit öffentlichen Matrix-Servern
+  * [joinmatrix.org](https://joinmatrix.org/servers)
   * [hello-matrix.net](https://www.hello-matrix.net/public_servers.php)
-    * [anchel.nl](https://publiclist.anchel.nl/)
   * [the-federation.info](https://the-federation.info/protocol/matrix)
-    * [FossMessenger](https://fediverse.blog/~/FossMessenger/matrix-server)
 * [Matrix FAQ](https://matrix.org/faq/)
 * [Account umziehen](https://ems.element.io/tools/matrix-migration)

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

@@ -0,0 +1,170 @@
+---
+layout: article.njk
+title: Werde Teil der Matrix - Matrix Teil 1
+service: matrix
+series: matrix-setup
+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)
+
+## 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)
+
+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,174 @@
+---
+layout: article.njk
+title: Sichere Chats mit Matrix – Matrix Teil 2
+service: matrix
+series: matrix-setup
+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/nitter.md

@@ -1,15 +0,0 @@
----
-layout: base.njk
-key: nitter
-title: Nitter
----
-# <i class="fab fa-twitter"></i> Nitter
-
-Eine freies und quelloffenes Twitter-Frontend, das auf Privatsphäre der Nutzer ausgerichtet ist. Die Verbindungen zu Twitter werden vom Server selber übernommen, um Tracking über IP oder JavaScript zu verhindern.
-
-__Seit November 2020 betreibe ich eine öffentliche Nitter Instanz. Du findest sie unter [nitter.sp-codes.de](https://nitter.sp-codes.de/).__
-
-## Weitere nützliche Links
-
-* [Liste weiterer öffentlicher Instanzen](https://github.com/zedeus/nitter/wiki/Instances)
-* [Quellcode von Nitter](https://github.com/zedeus/nitter)

src/de/services/ntfy.md

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

src/de/services/peertube.md

@@ -0,0 +1,35 @@
+---
+layout: base.njk
+key: mastodon
+title: Mastodon
+---
+# <i class="i-peertube"></i> PeerTube
+
+PeerTube ist ein Netzwerk aus mehreren föderierten, interoperablen Video-Hosting-Anbietern, vergleichbar mit YouTube. Allerdings basiert der Dienst nicht auf einer zentralen Plattform, sondern besteht aus vielen verschiedenen, dezentralen Instanzen, die von Privatpersonen, Vereinen oder sonstigen Stellen eigenverantwortlich betrieben werden. Dadurch machen sich die Nutzer:innen nicht von einem einzigen Anbieter abhängig, sondern können frei entscheiden, mit wem sie welche Informationen teilen.
+
+Da PeerTube auf offenen Web-Protokollen und freier, quelloffener Software basiert, kann auch mit anderen Diensten, wie Mastodon, Pleroma, Pixelfed, Friendica oder Hubzilla kommuniziert werden. Nutzer:innen können Accounts also dienst- und serverübergreifend folgen und Videos teilen.
+
+__Seit August 2021 betreibe ich eine öffentliche PeerTube-Instanz: [tube.sp-codes.de](https://tube.sp-codes.de/)__
+
+Die Serverregeln und weitere Informationen kannst du gerne [hier](https://tube.sp-codes.de/about/instance) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus.
+
+<div class="text-center mb-3">
+<a class="card d-inline-block font-weight-bold" target="_blank" href="https://tube.sp-codes.de/signup">Jetzt registrieren</a>
+</div>
+
+## 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,29 +0,0 @@
----
-layout: base.njk
-key: searx
-title: Searx
----
-# <i class="fas fa-search"></i> 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)
-
-Wenn du Searx als Standardsuchmaschine nutzen willst, findest du auf meinem Blog eine Anleitung dafür: [Nur noch Searx](https://blog.sp-codes.de/nur-noch-searx/)
-
-## 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

@@ -3,7 +3,7 @@ layout: base.njk
 key: shields
 title: Shields
 ---
-# <i class="fas fa-tags"></i> Shields
+# <i class="i-tags"></i> Shields
 
 Shields ist ein Service für prägnante, konsistente und lesbare Badges im SVG- und Rasterformat. Über eine URL können sie sehr einfach in Readmes oder jede andere Webseite eingebunden werden. Außerdem werden Integrationen zu verschiedenen Diensten oder Netzwerken bereitgestellt.
 

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,10 @@
+---
+layout: base.njk
+key: all-donations
+title: Unterstützen
+---
+<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,41 @@
+---
+layout: base.njk
+key: contact
+title: Contact
+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">
+    <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">
+            <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>

src/en/donate.html

@@ -5,10 +5,10 @@ title: Donate
 eleventyNavigation:
   key: donate
   title: Donate
-  icon: hand-holding-heart
-  order: 3
+  icon: i-hand-holding-heart
+  order: 4
 ---
-<h1><i class="fas fa-hand-holding-heart"></i> Donate</h1>
+<h1><i class="i-hand-holding-heart"></i> Donate</h1>
 
 <p>All public services can be used for free. If you still want to contribute to the costs for server infrastructure or
     send me a small donation for my blog, you can support me in the following ways<sup>1</sup>:</p>
@@ -16,45 +16,33 @@ eleventyNavigation:
 <div class="row justify-content-center">
     <div class="col-12 col-md-10 col-lg-8">
         <div class="card mb-3">
-            <h2><i class="fas fa-comments fa-fw m-2"></i>Recommend</h2>
+            <h2><i class="i-comments m-2"></i>Recommend</h2>
             <div>You are welcome to recommend my services and my blog posts. I am very glad if I can make you happy with
                 it.
             </div>
         </div>
         <div class="card mb-3">
-            <h2><i class="fas fa-credit-card fa-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/imprint">message</a>. I
+            <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.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations.banktransfer.number }}-{{ donations.banktransfer.color }}">
+                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | banktransfers }}-active">
                 </div>
             </div>
         </div>
         <div class="card mb-3">
-            <h2><i class="fas fa-money-bill fa-fw m-2"></i>Cash</h2>
+            <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.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations.cash.number }}-{{ donations.cash.color }}">
+                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | cash }}-inactive">
                 </div>
             </div>
         </div>
         <div class="card mb-3">
-            <h2><img class="m-2" width="30" height="24" src="/img/opencollective.svg">Open Collective</h2>
-            <div>You are also welcome to send me a small amount via <a href="https://opencollective.com/sp-codes"
-                                                                       target="_blank">Open Collective</a>. If you like
-                you can also support me with a regular donation.
-                <div class="mt-3 text-center">
-                    <a href="https://opencollective.com/sp-codes" target="_blank"><img
-                            alt="Open Collective {{ strings.supporters[locale] }}"
-                            src="https://shields.sp-codes.de/opencollective/all/sp-codes?label={{ strings.supporters[locale] }}&logo=open-collective"></a>
-                </div>
-            </div>
-        </div>
-        <div class="card mb-3">
-            <h2><i class="fas fa-network-wired fa-fw m-2"></i>netcup</h2>
+            <h2><i class="i-network-wired i-fw m-2"></i>netcup</h2>
             <div>Some of my services are hosted at netcup. If you want to run your own server or website at <a
                     href="https://www.netcup.de/" target="_blank">netcup</a>, you can use the following link (on the
                 picture). This way I get a small commission on your order. If you are a new customer, you will receive a
@@ -62,17 +50,31 @@ eleventyNavigation:
             </div>
             <div class="mt-3 text-center">
                 <a href="https://www.netcup.de/bestellen/gutschein_einloesen.php?gutschein=36nc16071208640"
-                   target="_blank">
-                    <img src="/img/netcup-setC-234x60.png" width="234" height="60" alt="zu netcup"/>
-                </a>
+                   target="_blank">Use voucher</a>
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="i-network-wired i-fw m-2"></i>Hetzner</h2>
+            <div>I also host some of my services at <a href="https://www.hetzner.com/" target="_blank">Hetzner</a>. If
+                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>
 </div>
 
-<div class="mt-4">
-    <p>I maintain a list of all received donations <a target="_blank" href="https://git.sp-codes.de/sp-codes/expenses-donations/src/branch/master/donations.md">here</a>.</p>
-</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

src/en/imprint.html

@@ -2,7 +2,7 @@
 layout: base.njk
 title: sp-codes
 ---
-<h1>Imprint</h1>
+<h1><i class="i-info-circle"></i> Imprint</h1>
 <div class="mb-4">
     <h2>Information as per § 5 TMG:</h2>
     <p>Samuel Philipp<br/>
@@ -11,25 +11,22 @@ title: sp-codes
         Deutschland</p>
 </div>
 <div class="mb-3 pt-4 border-top">
-    <h2>Contact Information</h2>
-    <p>You want to contact me, report a problem, have a question about a service or would like to support me? Please
-        send me your message in any of the following ways. I am looking forward to receive your message.</p>
-    <div class="row justify-content-center">
-        <div class="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="fas fa-fw fa-4x fa-envelope text-white"></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.tchncs.de/@samuel_p">
-                <div class="pr-3"><span class="fab fa-fw fa-4x fa-mastodon text-white"></span></div>
-                <div>Follow me on Mastodon or send me a message to <strong>@samuel_p@social.tchncs.de</strong></div>
-            </a>
-            <a class="card mb-3 d-flex align-items-center text-decoration-none"
-               href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
-                <div class="pr-3"><img class="svg-icon" src="/img/matrix.svg" alt=""></div>
-                <div>Write me on Matrix to <strong>@samuel-p:matrix.sp-codes.de</strong></div>
-            </a>
+    <h2>Contact</h2>
+    <p>
+        <strong>E-Mail-Address:</strong> mail@sp-codes.de<br>
+        <strong>More contact options:</strong>  <a href="/{{locale}}/contact">https://sp-codes.de/{{locale}}/contact</a><br>
+    </p>
 </div>
+<div class="mb-3 pt-4 border-top">
+    <h2>Domains</h2>
+    <ul>
+        <li><a href="https://samuel-philipp.de">samuel-philipp.de</a></li>
+        <li><a href="https://sp-codes.de">sp-codes.de</a></li>
+        <li><a href="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

@@ -5,15 +5,30 @@ title: Home
 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.
+            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> (German) or use the various services.
+            to look around or use the various services.
+        </p>
+        <p class="lead text-center mb-2">
+            If you would like to find out more about me, please visit my personal website:
+            <a href="https://samuel-philipp.de">samuel-philipp.de</a>. There you will find my CV and other interests of
+            mine.
+        </p>
+        <p class="lead text-center mb-2">
+            Since April 2022 I also offer professional hosting of open source tools for companies, private persons and
+            other organizations with my company <a href="https://ossrox.org" target="_blank">Ossrox</a>. If you are
+            interested, feel free to visit our website or send me a message.
+        </p>
+        <p class="lead text-center mb-2">
+            <a href="https://ossrox.org" target="_blank">
+                <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
+            </a>
         </p>
     </div>
 </div>
@@ -22,11 +37,15 @@ eleventyNavigation:
         <h1 class="heading"><a href="/{{locale}}/services">Services</a></h1>
         <p class="lead text-center mb-2">
             For users of the services and anyone interested, there is a public matrix room as a place to share
-            questions, ideas and problems: <a
-                href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
+            questions, ideas and problems: <strong><a
+                href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a></strong>
+        </p>
+        <p class="lead text-center mb-2">
+            Follow sp-codes on Mastodon: <strong><a rel="me"
+                                                    href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
         </p>
         <div class="row justify-content-center">
-            {% include services-simple.html %}
+            {% include "services-simple.html" %}
         </div>
     </div>
 </div>
@@ -40,4 +59,4 @@ eleventyNavigation:
     </div>
 </div>
 
-{% include profiles.html %}
+{% include "profiles.html" %}

src/en/privacy.html

@@ -1,8 +1,6 @@
 ---
 layout: base.njk
-title: sp-codes
+title: Privacy
 ---
-<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

@@ -5,13 +5,24 @@ title: Services
 eleventyNavigation:
   key: services
   title: Services
-  icon: server
+  icon: i-server
   order: 2
 ---
-<h1><i class="fas fa-server"></i> Services</h1>
+<h1><i class="i-server"></i> Services</h1>
 <p>In my spare time I provide various open source services for free. Here you can find an overview of the individual
     services and a short description for each of them. All services are hosted in Germany. Feel free to use it.</p>
 
-<p>For the users of the services there is a public matrix room as a place to share questions, ideas and problems. Feel free to join us if you use one of the services listed here or just want to drop by:</p>
+<p>For the users of the services there is a public matrix room as a place to share questions, ideas and problems. Feel
+    free to join us if you use one of the services listed here or just want to drop by:</p>
 
-<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>
+<h3 class="text-center"><a href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
+</h3>
+
+<div class="card text-center mb-3">
+    <p>You want to realize your own open source project to regain your digital sovereignty? I would be happy to support
+        you personally with my company. Feel free to visit <a href="https://ossrox.org" target="_blank">ossrox.org</a>
+        or send me a message.</p>
+    <a href="https://ossrox.org" target="_blank">
+        <img src="/img/ossrox.svg" alt="Ossrox" width="250px">
+    </a>
+</div>

src/en/services/connectivitycheck.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: connectivitycheck
 title: Captive Portal Check
 ---
-# <i class="fas fa-wifi"></i> Captive Portal Check
+# <i class="i-wifi"></i> Captive Portal Check
 
 A captive portal is a login page in public WLAN networks to restrict Internet access to the approval of certain terms of use. When you see a login page on a public network, your device uses a captive portal check. This allows the device to find out whether you have direct Internet access or not. In Android, for example, your device sends a request to a Google server.
 
@@ -46,6 +46,21 @@ Restart the network-manager:
 sudo service network-manager restart
 ```
 
+## Setup in Fedora
+
+In Fedora, the file `/etc/NetworkManager/NetworkManager.conf` must be changed. Add or change the following lines:
+
+```
+[connectivity]
+uri=https://connectivitycheck.sp-codes.de/generate204
+```
+
+Restart the _NetworkManager_:
+
+```
+sudo service NetworkManager restart
+```
+
 ## Setup in Firefox
 
 Type [about:config](about:config) in the Firefox address bar and search for `captivedetect.canonicalURL` and `network.connectivity-service`. Set the URL values to `https://connectivitycheck.sp-codes.de/generate204`, the domain values to `connectivitycheck.sp-codes.de`. That's it.

src/en/services/etherpad.md

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

src/en/services/firefox-sync.md

@@ -1,19 +0,0 @@
----
-layout: base.njk
-key: firefox-sync
-title: Firefox Sync
----
-# <i class="fab fa-firefox-browser"></i> 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,23 @@
+---
+layout: base.njk
+key: forgejo
+title: Forgejo
+---
+# <i class="i-git"></i> Forgejo
+
+Forgejo is a simple code hosting platform like GitHub or GitLab. It is open source and under continuous development. __Since the end of 2019 I have my own Forgejo instance, to manage my projects.__ For example this website. Feel free to have a look at the source code and leave some feedback.
+
+In addition to Forgejo, I also run Woodpecker, a platform that extends Forgejo with many continuous integration features, such as automated builds and deploys.
+
+Feel free to visit and sign up if you're interested in developing a project. The registration is open since March 2020.
+
+__To get to Forgejo click here: [git.sp-codes.de](https://git.sp-codes.de)__
+
+__If you want to check out Woodpecker, click here:  [ci.sp-codes.de](https://ci.sp-codes.de)__
+
+## 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
----
-# <i class="fas fa-code"></i> 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
----
-# <i class="fab fa-youtube"></i> 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

@@ -3,7 +3,7 @@ layout: base.njk
 key: jitsi
 title: Jitsi Meet
 ---
-# <i class="fas fa-users"></i> Jitsi Meet
+# <i class="i-users"></i> Jitsi Meet
 
 Jitsi-Meet is a platform for video conferences. You can start fully encrypted video chats without registration. Additionally, Jitsi-Meet offers the possibility to share the screen with other participants, invite new users with a simple link and send messages in the integrated chat.
 
@@ -11,6 +11,14 @@ __Since July 2020 I run my own Jitsi-Meet instance. You can find it at [jitsi.sp
 
 You are welcome to use the instance with other people.
 
+If you want to have your own Jitsi server for you, your family or your company, I would be happy to support you with my company <a href="https://ossrox.org" target="_blank">Ossrox</a>. Please have a look at our services on our website or send me a message.
+
+<div class="text-center mb-3">
+    <a href="https://ossrox.org/store/jitsi" target="_blank">
+        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
+    </a>
+</div>
+
 ## More useful links
 
 * [Jitsi Website](https://jitsi.org/)

src/en/services/mastodon.md

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

@@ -3,9 +3,8 @@ layout: base.njk
 key: matrix
 title: Matrix
 ---
-# <i class="fas fa-comments"></i> Matrix
 
-Matrix is a modern, open source software for decentralized communication (like e-mail). Matrix offers end-to-end encryption, voice and video calls and much more. However, the most important thing is that there is not one Matrix server that all users have to use, like WhatsApp, Telegram and many other popular messengers.
+[Matrix](https://matrix.org) is a modern, open source software for decentralized communication (like e-mail). Matrix offers end-to-end encryption, voice and video calls and much more. However, the most important thing is that there is not one Matrix server that all users have to use, like WhatsApp, Telegram and many other popular messengers.
 
 Users can choose a public server or create their own and still communicate with all Matrix users, not just those on their own server. The messages are only stored on the participating servers. Calls also go only through the participating servers.
 
@@ -13,7 +12,32 @@ __Since the beginning of 2020 I run a public Matrix server: [matrix.sp-codes.de]
 
 You can read the server rules [here](https://matrix.sp-codes.de/_matrix/consent) (German). Feel free to create an account on my server or choose one from the lists linked below. I look forward to hear from you [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de).
 
-On my blog (German) you will find an article series for an easy start to Matrix: [Werde Teil der Matrix](https://blog.sp-codes.de/werde-teil-der-matrix-matrix-teil-1/)
+<div class="text-center mb-3">
+<a class="card d-inline-block font-weight-bold" target="_blank" href="https://chat.sp-codes.de/#/register">Register now</a>
+</div>
+
+If you want to have your own matrix server for you, your family or your company, I would be happy to support you with my company <a href="https://ossrox.org" target="_blank">Ossrox</a>. Please have a look at our services on our website or send me a message.
+
+<div class="text-center mb-3">
+    <a href="https://ossrox.org/store/matrix" target="_blank">
+        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
+    </a>
+</div>
+
+Here you will find an article series (German) for an easy start to Matrix: 
+
+<div class="row justify-content-center">
+<div class="col-12 col-md-10 col-lg-8">
+<div class="card-list">
+<div class="card">
+<a href="/de/services/matrix/setup/part-1/">Part 1: Werde Teil der Matrix</a>
+</div>
+<div class="card">
+<a href="/de/services/matrix/setup/part-2/">Part 2: Sichere Chats mit Matrix</a>
+</div>
+</div>
+</div>
+</div>
 
 ## Why Matrix?
 
@@ -33,10 +57,9 @@ Here I want to give some reasons why I use Matrix and prefer it over many other
 
 * [Various Apps](https://matrix.org/clients)
 * [List of public rooms](https://view.matrix.org/)
-* Lists with public matrix servers
+* Lists with public Matrix servers
+  * [joinmatrix.org](https://joinmatrix.org/servers)
   * [hello-matrix.net](https://www.hello-matrix.net/public_servers.php)
-  * [anchel.nl](https://publiclist.anchel.nl/)
   * [the-federation.info](https://the-federation.info/protocol/matrix)
-  * [FossMessenger](https://fediverse.blog/~/FossMessenger/matrix-server)
 * [Matrix FAQ](https://matrix.org/faq/)
 * [Migrate Account](https://ems.element.io/tools/matrix-migration)

src/en/services/nitter.md

@@ -1,15 +0,0 @@
----
-layout: base.njk
-key: nitter
-title: Nitter
----
-# <i class="fab fa-twitter"></i> Nitter
-
-A free and open source Twitter frontend that is focussed on user privacy. Connections to Twitter are handled by the server itself to prevent tracking by IP or JavaScript.
-
-__Since November 2020 I run a public Nitter instance. You can find it at [nitter.sp-codes.de](https://nitter.sp-codes.de/).__
-
-## More useful links
-
-* [List of other public instances](https://github.com/zedeus/nitter/wiki/Instances)
-* [Source code of Nitter](https://github.com/zedeus/nitter)

src/en/services/ntfy.md

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

src/en/services/peertube.md

@@ -0,0 +1,35 @@
+---
+layout: base.njk
+key: mastodon
+title: Mastodon
+---
+# <i class="i-peertube"></i> PeerTube
+
+PeerTube is a network of several federated, interoperable video hosting providers, comparable to YouTube. However, the service is not based on a central platform, but consists of many, decentralized instances that are run independently by private individuals, associations or other organizations. This means that users are not locked into a single provider, but are free to decide with whom they share what information.
+
+Since PeerTube is based on open web protocols and free, open source software, it is also possible to communicate with other services such as Mastodon, Pleroma, Pixelfed, Friendica or Hubzilla. Users can share text, image, video messages or polls across services and servers.
+
+__Since August 2021 I run a public PeerTube instance: [tube.sp-codes.de](https://tube.sp-codes.de/)__
+
+Feel free to read the server rules and more information [here](https://tube.sp-codes.de/about/instance) (German). Feel free to register on my server or pick one from the lists linked below.
+
+<div class="text-center mb-3">
+<a class="card d-inline-block font-weight-bold" target="_blank" href="https://tube.sp-codes.de/signup">Register now</a>
+</div>
+
+## 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,29 +0,0 @@
----
-layout: base.njk
-key: searx
-title: Searx
----
-# <i class="fas fa-search"></i> 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)
-
-If you want to use Searx as your default search engine, you can find instructions on my blog (German): [Nur noch Searx](https://blog.sp-codes.de/nur-noch-searx/)
-
-## 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

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

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>

src/img/gitea.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Gitea icon</title><path d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"/></svg>

src/img/matrix.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Matrix icon</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>