From a122b0e3acf77ace4729ca1c5db02724696ce238 Mon Sep 17 00:00:00 2001
From: Samuel Philipp <codes@samuel-philipp.de>
Date: Sun, 31 Mar 2024 00:09:47 +0100
Subject: [PATCH] major improvements strings refactoring improved og tags (see
 #57)

---
 src/_data/global.json                         |  19 +++
 src/_data/site.js                             |  23 +--
 src/_data/strings.json                        | 136 ------------------
 src/_includes/donations-current.html          |  12 +-
 src/_includes/donations.html                  |  12 +-
 src/_includes/expenses-current.html           |  14 +-
 src/_includes/layouts/article.njk             |  16 +--
 src/_includes/layouts/base.njk                |  35 ++---
 src/_includes/layouts/service.njk             |   4 +-
 .../{services-extended.html => services.html} |   2 +-
 src/de/all-donations.html                     |   1 +
 src/de/contact.html                           |   1 +
 src/de/de.json                                |  45 +++++-
 src/de/donate.html                            |  11 +-
 src/de/imprint.html                           |   1 +
 src/de/index.html                             |   4 +-
 src/de/privacy.html                           |   1 +
 src/de/services.html                          |   3 +-
 src/en/all-donations.html                     |   3 +-
 src/en/contact.html                           |   1 +
 src/en/donate.html                            |   9 +-
 src/en/en.json                                |  46 +++++-
 src/en/imprint.html                           |   3 +-
 src/en/index.html                             |   4 +-
 src/en/privacy.html                           |   1 +
 src/en/services.html                          |   3 +-
 26 files changed, 188 insertions(+), 222 deletions(-)
 create mode 100644 src/_data/global.json
 delete mode 100644 src/_data/strings.json
 rename src/_includes/{services-extended.html => services.html} (73%)

diff --git a/src/_data/global.json b/src/_data/global.json
new file mode 100644
index 0000000..1263fe0
--- /dev/null
+++ b/src/_data/global.json
@@ -0,0 +1,19 @@
+{
+  "title": "sp-codes",
+  "description": "Samuel Philipp - Software Engineer from Magdeburg",
+  "url": "https://sp-codes.de",
+  "baseUrl": "/",
+  "author": "Samuel Philipp",
+  "languages": [
+    {
+      "label": "English",
+      "code": "en",
+      "icon": "us"
+    },
+    {
+      "label": "Deutsch",
+      "code": "de",
+      "icon": "de"
+    }
+  ]
+}
diff --git a/src/_data/site.js b/src/_data/site.js
index a4c5cf4..3c5f555 100644
--- a/src/_data/site.js
+++ b/src/_data/site.js
@@ -1,20 +1,3 @@
-module.exports = {
-    title: "sp-codes",
-    description: "Samuel Philipp - Software Engineer from Magdeburg",
-    url: "https://sp-codes.de",
-    baseUrl: "/",
-    author: "Samuel Philipp",
-    buildTime: new Date(),
-    languages: [
-        {
-            label: "English",
-            code: "en",
-            icon: "us"
-        },
-        {
-            label: "Deutsch",
-            code: "de",
-            icon: "de"
-        }
-    ]
-};
+const site = require("./global.json");
+site.buildTime = new Date();
+module.exports = site;
diff --git a/src/_data/strings.json b/src/_data/strings.json
deleted file mode 100644
index 098bfea..0000000
--- a/src/_data/strings.json
+++ /dev/null
@@ -1,136 +0,0 @@
-{
-  "menu": {
-    "title": {
-      "de": "Menü",
-      "en": "Menu"
-    },
-    "imprint": {
-      "de": "Impressum",
-      "en": "Imprint"
-    },
-    "privacy": {
-      "de": "Datenschutz",
-      "en": "Privacy"
-    },
-    "code": {
-      "de": "Code",
-      "en": "Code"
-    },
-    "stats": {
-      "de": "Statistiken",
-      "en": "Stats"
-    }
-  },
-  "state": {
-    "title": {
-      "de": "Status",
-      "en": "State"
-    },
-    "operational": {
-      "de": "Online",
-      "en": "Online"
-    },
-    "outage": {
-      "de": "Ausfall",
-      "en": "Outage"
-    },
-    "maintenance": {
-      "de": "Wartung",
-      "en": "Maintenance"
-    }
-  },
-  "donations": {
-    "supporters": {
-      "de": "Unterstützende",
-      "en": "Supporters"
-    },
-    "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"
-    },
-    "opencollective": {
-      "de": "Open Collective",
-      "en": "Open Collective"
-    },
-    "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"
-    }
-  },
-  "service": {
-    "overview": {
-      "de": "Zurück zur Übersicht",
-      "en": "Back to overview"
-    }
-  },
-  "article": {
-    "seriesParts": {
-      "de": "Alle Teile dieser Serie",
-      "en": "All parts of this series"
-    },
-    "relatedService": {
-      "de": "Zugehöriger Dienst",
-      "en": "Related Service"
-    },
-    "questions": {
-      "de": "Du hast eine Frage dazu?",
-      "en": "Do you have a question?"
-    },
-    "questionsContent": {
-      "de": "<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>",
-      "en": "<p>Join the Matrix group and let's discuss. I look forward to your feedback!</p><a href=\"https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de\">#sp-codes:matrix.sp-codes.de</a>"
-    },
-    "aboutMe": {
-      "de": "Über mich",
-      "en": "About me"
-    },
-    "aboutMeContent": {
-      "de": "<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>",
-      "en": "<p>My name is Samuel Philipp and I am a software engineer from Magdeburg, Germany. In my spare time, I host various free <a href=\"/en/services/\">services</a>. Here I write articles about security and privacy.</p><a href=\"https://samuel-philipp.com\">Read more</a>"
-    },
-    "yourOpinion": {
-      "de": "Schreib mir deine Meinung",
-      "en": "Send me your opinion"
-    }
-  }
-}
diff --git a/src/_includes/donations-current.html b/src/_includes/donations-current.html
index ec60a4c..5ecb715 100644
--- a/src/_includes/donations-current.html
+++ b/src/_includes/donations-current.html
@@ -2,17 +2,17 @@
     <table class="table">
         <thead>
         <tr>
-            <th>{{strings.donations.date[locale]}}</th>
-            <th>{{strings.donations.via[locale]}}</th>
-            <th>{{strings.donations.from[locale]}}</th>
-            <th>{{strings.donations.amount[locale]}}</th>
+            <th>{{strings.donations.date}}</th>
+            <th>{{strings.donations.via}}</th>
+            <th>{{strings.donations.from}}</th>
+            <th>{{strings.donations.amount}}</th>
         </tr>
         </thead>
         <tbody>
         {% for donation in donations[0].donations %}
         <tr>
             <td>{{donation.date}}</td>
-            <td>{{strings.donations[donation.via][locale]}}</td>
+            <td>{{strings.donations[donation.via]}}</td>
             {% if donation.from %}
             <td>{{donation.from}}</td>
             {% else %}
@@ -24,7 +24,7 @@
         </tbody>
         <tfoot>
         <tr>
-            <th colspan="3">{{strings.donations.total[locale]}}</th>
+            <th colspan="3">{{strings.donations.total}}</th>
             <th>{{donations[0].donations | sum | amount}} €</th>
         </tr>
         </tfoot>
diff --git a/src/_includes/donations.html b/src/_includes/donations.html
index 7a373b5..06ea695 100644
--- a/src/_includes/donations.html
+++ b/src/_includes/donations.html
@@ -5,17 +5,17 @@
     <table class="table">
         <thead>
         <tr>
-            <th>{{strings.donations.date[locale]}}</th>
-            <th>{{strings.donations.via[locale]}}</th>
-            <th>{{strings.donations.from[locale]}}</th>
-            <th>{{strings.donations.amount[locale]}}</th>
+            <th>{{strings.donations.date}}</th>
+            <th>{{strings.donations.via}}</th>
+            <th>{{strings.donations.from}}</th>
+            <th>{{strings.donations.amount}}</th>
         </tr>
         </thead>
         <tbody>
         {% for donation in year.donations %}
         <tr>
             <td>{{donation.date}}</td>
-            <td>{{strings.donations[donation.via][locale]}}</td>
+            <td>{{strings.donations[donation.via]}}</td>
             {% if donation.from %}
             <td>{{donation.from}}</td>
             {% else %}
@@ -27,7 +27,7 @@
         </tbody>
         <tfoot>
         <tr>
-            <th colspan="3">{{strings.donations.total[locale]}}</th>
+            <th colspan="3">{{strings.donations.total}}</th>
             <th>{{year.donations | sum | amount}} €</th>
         </tr>
         </tfoot>
diff --git a/src/_includes/expenses-current.html b/src/_includes/expenses-current.html
index 0fef736..033b407 100644
--- a/src/_includes/expenses-current.html
+++ b/src/_includes/expenses-current.html
@@ -2,12 +2,12 @@
     <table class="table">
         <thead>
         <tr>
-            <th>{{strings.donations.name[locale]}}</th>
-            <th>{{strings.donations.type[locale]}}</th>
-            <th>{{strings.donations.provider[locale]}}</th>
-            <th>{{strings.donations.location[locale]}}</th>
-            <th>{{strings.donations.amount[locale]}} / {{strings.donations.month[locale]}}</th>
-            <th>{{strings.donations.amount[locale]}} / {{strings.donations.year[locale]}}</th>
+            <th>{{strings.donations.name}}</th>
+            <th>{{strings.donations.type}}</th>
+            <th>{{strings.donations.provider}}</th>
+            <th>{{strings.donations.location}}</th>
+            <th>{{strings.donations.amount}} / {{strings.donations.month}}</th>
+            <th>{{strings.donations.amount}} / {{strings.donations.year}}</th>
         </tr>
         </thead>
         <tbody>
@@ -28,7 +28,7 @@
         </tbody>
         <tfoot>
         <tr>
-            <th colspan="4">{{strings.donations.total[locale]}}</th>
+            <th colspan="4">{{strings.donations.total}}</th>
             <th>{{expenses | sum | amount}} €</th>
             <th>{{expenses | sum | year | amount}} €</th>
         </tr>
diff --git a/src/_includes/layouts/article.njk b/src/_includes/layouts/article.njk
index 3c33b88..8b4e771 100644
--- a/src/_includes/layouts/article.njk
+++ b/src/_includes/layouts/article.njk
@@ -16,7 +16,7 @@ layout: base.njk
     <div class="col-lg-4 col-12">
         {% if series %}
         <div class="tab-card">
-            <div class="title">{{ strings.article.seriesParts[locale] }}</div>
+            <div class="title">{{ strings.article.seriesParts }}</div>
             <div class="card">
                 {%- for post in collections.all %}
                 {% if post.data.series == series %}
@@ -34,7 +34,7 @@ layout: base.njk
         {% set service = services | getServiceById(service) %}
         {% if service %}
         <div class="tab-card">
-            <div class="title">{{ strings.article.relatedService[locale] }}</div>
+            <div class="title">{{ strings.article.relatedService }}</div>
             <div class="card service">
                 <a class="link" {% if service.beta !=true %} href="/{{locale}}/services/{{service.id}}" {% endif %}></a>
                 {% if service.beta == true %}
@@ -48,7 +48,7 @@ layout: base.njk
                     {% if service.status %}
                     <div class="mb-2">
                         <a href="https://status.sp-codes.de" target="_blank">
-                            <img alt="{{strings.state.title[locale]}}"
+                            <img alt="{{strings.state.title}}"
                                  src="https://status.sp-codes.de/api/badge/1/status?label=Status&upLabel=Online&downLabel=Ausfall&maintenanceLabel=Wartung">
                         </a>
                     </div>
@@ -59,15 +59,15 @@ layout: base.njk
         </div>
         {% endif %}
         <div class="tab-card">
-            <div class="title">{{ strings.article.questions[locale] }}</div>
-            <div class="card">{{ strings.article.questionsContent[locale] | safe }}</div>
+            <div class="title">{{ strings.article.questions }}</div>
+            <div class="card">{{ strings.article.questionsContent | safe }}</div>
         </div>
         <div class="tab-card">
-            <div class="title">{{ strings.article.aboutMe[locale] }}</div>
-            <div class="card">{{ strings.article.aboutMeContent[locale] | safe }}</div>
+            <div class="title">{{ strings.article.aboutMe }}</div>
+            <div class="card">{{ strings.article.aboutMeContent | safe }}</div>
         </div>
         <div class="tab-card">
-            <div class="title">{{ strings.article.yourOpinion[locale] }}</div>
+            <div class="title">{{ strings.article.yourOpinion }}</div>
             <div class="card">
                 <div class="d-flex justify-content-center flex-wrap my-3 contact-links">
                     <div class="m-2"><a href="mailto:mail@sp-codes.de">
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
index e43e984..62e0f9e 100644
--- a/src/_includes/layouts/base.njk
+++ b/src/_includes/layouts/base.njk
@@ -4,7 +4,7 @@ title: sp-codes
 <!doctype html>
 <html lang="{{ locale }}" prefix="og: http://ogp.me/ns#">
 <head>
-    <title>sp-codes - {{ title }}</title>
+    <title>{{ site.title }} - {{ title }}</title>
     <base href="/">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -16,20 +16,21 @@ title: sp-codes
     <meta name="coverage" content="Worldwide">
     <meta name="distribution" content="Global">
     <meta name="rating" content="general">
-    <meta name="url" content="https://sp-codes.de/">
-    <meta name="subject" content="sp-codes">
-    <meta name="description" content="Samuel Philipp - Software Engineer from Magdeburg">
-    <meta name="author" content="Samuel Philipp">
+    <meta name="url" content="{{ site.url }}{{ page.url }}">
+    <meta name="subject" content="{{ site.title }} - {{ title }}">
+    <meta name="description" content="{{ summary }}">
+    <meta name="author" content="{{ site.author }}">
     <meta property="og:type" content="website">
-    <meta property="og:locale" content="de">
-    <meta property="og:url" content="https://sp-codes.de/">
-    <meta property="og:title" content="sp-codes">
-    <meta property="og:description" content="Samuel Philipp - Software Engineer from Magdeburg">
-    <meta property="og:site_name" content="sp-codes">
+    <meta property="og:locale" content="{{ locale }}">
+    <meta property="og:url" content="{{ site.url }}{{ page.url }}">
+    <meta property="og:title" content="{{ site.title }} - {{ title }}">
+    <meta property="og:description" content="{{ summary }}">
+    <meta property="og:site_name" content="{{ site.title }} - {{ title }}">
     <meta property="og:image" content="https://sp-codes.de/img/sp-codes.jpg">
+    <meta property="og:updated_time" content="{{ site.buildTime }}">
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="sp-codes">
-    <meta name="twitter:description" content="Samuel Philipp - Software Engineer from Magdeburg">
+    <meta name="twitter:title" content="{{ site.title }} - {{ title }}">
+    <meta name="twitter:description" content="{{ summary }}">
     <meta name="twitter:image" content="https://sp-codes.de/img/sp-codes.jpg">
     <link rel="shortcut icon" href="favicon.ico">
     <link rel="icon" type="image/png" href="favicon.png">
@@ -39,7 +40,7 @@ title: sp-codes
 <body>
 <nav class="nav menu border-bottom">
     <div class="toggle">
-        <label for="menu" class="m-0"><span class="i-bars i-fw me-2"></span>{{ strings.menu.title[locale] }}</label>
+        <label for="menu" class="m-0"><span class="i-bars i-fw me-2"></span>{{ strings.menu.title }}</label>
 
         <div class="flex-grow-1"></div>
 
@@ -92,14 +93,14 @@ title: sp-codes
     </div>
     <div class="flex-sm-grow-1"></div>
     <div class="d-flex justify-content-sm-start flex-wrap">
-        <div class="me-4"><a href="/{{locale}}/imprint"><span class="i-info-circle me-2"></span>{{strings.menu.imprint[locale]}}</a>
+        <div class="me-4"><a href="/{{locale}}/imprint"><span class="i-info-circle me-2"></span>{{strings.menu.imprint}}</a>
         </div>
-        <div class="me-4"><a href="/{{locale}}/privacy"><span class="i-user-secret me-2"></span>{{strings.menu.privacy[locale]}}</a>
+        <div class="me-4"><a href="/{{locale}}/privacy"><span class="i-user-secret me-2"></span>{{strings.menu.privacy}}</a>
         </div>
         <div class="me-4"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span
-                class="i-code me-2"></span>{{strings.menu.code[locale]}}</a></div>
+                class="i-code me-2"></span>{{strings.menu.code}}</a></div>
         <div><a target="_blank" href="https://umami.sp-codes.de/share/gaJcXEyG/sp-codes.de"><span
-                class="i-chart-line me-2"></span>{{strings.menu.stats[locale]}}</a></div>
+                class="i-chart-line me-2"></span>{{strings.menu.stats}}</a></div>
     </div>
 </div>
 </body>
diff --git a/src/_includes/layouts/service.njk b/src/_includes/layouts/service.njk
index c21c57d..850d923 100644
--- a/src/_includes/layouts/service.njk
+++ b/src/_includes/layouts/service.njk
@@ -4,8 +4,8 @@ layout: base.njk
 
 {% set service = services | getServiceById(key) %}
 {% if service %}
-    <p class="small"><a href="/{{locale}}/services/">{{ strings.service.overview[locale] }}</a></p>
-    <h1 class="clearfix"><i class="{{service.icon}}"></i> {{title}} <a href="https://status.sp-codes.de" class="float-end"><img alt="{{strings.state.title[locale]}}" src="https://status.sp-codes.de/api/badge/{{service.status}}/status?label={{strings.state.title[locale]}}&upLabel={{strings.state.operational[locale]}}&downLabel={{strings.state.outage[locale]}}&maintenanceLabel={{strings.state.maintenance[locale]}}"></a></h1>
+    <p class="small"><a href="/{{locale}}/services/">{{ strings.service.overview }}</a></p>
+    <h1 class="clearfix"><i class="{{service.icon}}"></i> {{title}} <a href="https://status.sp-codes.de" class="float-end"><img alt="{{strings.state.title}}" src="https://status.sp-codes.de/api/badge/{{service.status}}/status?label={{strings.state.title}}&upLabel={{strings.state.operational}}&downLabel={{strings.state.outage}}&maintenanceLabel={{strings.state.maintenance}}"></a></h1>
 
     <div class="row">
         <div class="col-lg-8 col-12">
diff --git a/src/_includes/services-extended.html b/src/_includes/services.html
similarity index 73%
rename from src/_includes/services-extended.html
rename to src/_includes/services.html
index b721ee2..a3a16ec 100644
--- a/src/_includes/services-extended.html
+++ b/src/_includes/services.html
@@ -12,7 +12,7 @@
             {% if service.status %}
             <div class="mb-2">
                 <a href="https://status.sp-codes.de" target="_blank">
-                    <img alt="{{strings.state.title[locale]}}" src="https://status.sp-codes.de/api/badge/{{service.status}}/status?label={{strings.state.title[locale]}}&upLabel={{strings.state.operational[locale]}}&downLabel={{strings.state.outage[locale]}}&maintenanceLabel={{strings.state.maintenance[locale]}}">
+                    <img alt="{{strings.state.title}}" src="https://status.sp-codes.de/api/badge/{{service.status}}/status?label={{strings.state.title}}&upLabel={{strings.state.operational}}&downLabel={{strings.state.outage}}&maintenanceLabel={{strings.state.maintenance}}">
                 </a>
             </div>
             {% endif %}
diff --git a/src/de/all-donations.html b/src/de/all-donations.html
index fed3912..e53a14c 100644
--- a/src/de/all-donations.html
+++ b/src/de/all-donations.html
@@ -2,6 +2,7 @@
 layout: base.njk
 key: all-donations
 title: Unterstützen
+summary: Unterstütze sp-codes mit einer Spende – hilf mit, die Dienste dauerhaft für die Community bereitstellen zu können.
 ---
 <h1><i class="i-hand-holding-heart"></i> Alle Spenden</h1>
 
diff --git a/src/de/contact.html b/src/de/contact.html
index 19e1b04..94a52d2 100644
--- a/src/de/contact.html
+++ b/src/de/contact.html
@@ -2,6 +2,7 @@
 layout: base.njk
 key: contact
 title: Kontakt
+summary: Kontaktinformationen zu Admins oder Moderation von sp-codes.
 eleventyNavigation:
   key: contact
   title: Kontakt
diff --git a/src/de/de.json b/src/de/de.json
index 6ba62f7..c21cdb6 100644
--- a/src/de/de.json
+++ b/src/de/de.json
@@ -1,3 +1,46 @@
 {
-  "locale": "de"
+  "locale": "de",
+  "strings": {
+    "menu": {
+      "title": "Menü",
+      "imprint": "Impressum",
+      "privacy": "Datenschutz",
+      "code": "Code",
+      "stats": "Statistiken"
+    },
+    "state": {
+      "title": "Status",
+      "operational": "Online",
+      "outage": "Ausfall",
+      "maintenance": "Wartung"
+    },
+    "donations": {
+      "supporters": "Unterstützende",
+      "date": "Datum",
+      "amount": "Betrag",
+      "via": "Via",
+      "from": "Von",
+      "banktransfer": "Überweisung",
+      "opencollective": "Open Collective",
+      "total": "Gesamt",
+      "name": "Name",
+      "type": "Typ",
+      "provider": "Anbieter",
+      "location": "Standort",
+      "month": "Monat",
+      "year": "Jahr"
+    },
+    "service": {
+      "overview": "Zurück zur Übersicht"
+    },
+    "article": {
+      "seriesParts": "Alle Teile dieser Serie",
+      "relatedService": "Zugehöriger Dienst",
+      "questions": "Du hast eine Frage dazu?",
+      "questionsContent": "<p>Komm gerne in der Matrix-Gruppe vorbei und lass uns diskutieren. Ich freue mich auf dein Feedback!</p><a href=\"https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de\">#sp-codes:matrix.sp-codes.de</a>",
+      "aboutMe": "Über mich",
+      "aboutMeContent": "<p>Mein Name ist Samuel Philipp und ich bin ein Software Engineer aus Magdeburg. In meiner Freizeit hoste ich verschiedene freie <a href=\"/de/services/\">Dienste</a>. Hier schreibe ich Artikel rund um Sicherheit und Datenschutz.</p><a href=\"https://samuel-philipp.de\">Mehr erfahren</a>",
+      "yourOpinion": "Schreib mir deine Meinung"
+    }
+  }
 }
diff --git a/src/de/donate.html b/src/de/donate.html
index 9e5d8d9..df941b9 100644
--- a/src/de/donate.html
+++ b/src/de/donate.html
@@ -2,6 +2,7 @@
 layout: base.njk
 key: donate
 title: Unterstützen
+summary: Unterstütze sp-codes mit einer Spende – hilf mit, die Dienste dauerhaft für die Community bereitstellen zu können.
 eleventyNavigation:
   key: donate
   title: Unterstützen
@@ -24,12 +25,12 @@ eleventyNavigation:
         </div>
         <div class="card mb-3">
             <h2><i class="i-credit-card i-fw m-2"></i>Banküberweisung</h2>
-            <div>Wenn Du mir etwas überweisen willst, schreib mir einfach eine kurze <a href="/{{locale}}/contact">Nachricht</a>.
+            <div>Wenn du mir etwas überweisen willst, schreib mir einfach eine kurze <a href="/{{locale}}/contact">Nachricht</a>.
                 Ich schicke dir dann schnellstmöglich meine Bankverbindung zu. Ganz besonders freue ich mich auch über
                 einen Dauerauftrag.
                 <div class="mt-3 text-center">
-                    <img alt="Banküberweisung {{ strings.donations.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters[locale] }}-{{ donations | banktransfers }}-active">
+                    <img alt="Banküberweisung {{ strings.donations.supporters }}"
+                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters }}-{{ donations | banktransfers }}-active">
                 </div>
             </div>
         </div>
@@ -38,8 +39,8 @@ eleventyNavigation:
             <div>Wer mir etwas Bargeld zukommen lassen möchte, darf das gerne an die Adresse aus dem <a
                     href="/{{locale}}/imprint">Impressum</a> senden.
                 <div class="mt-3 text-center">
-                    <img alt="Bargeld {{ strings.donations.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters[locale] }}-{{ donations | cash }}-inactive">
+                    <img alt="Bargeld {{ strings.donations.supporters }}"
+                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters }}-{{ donations | cash }}-inactive">
                 </div>
             </div>
         </div>
diff --git a/src/de/imprint.html b/src/de/imprint.html
index 5a74299..44ab596 100644
--- a/src/de/imprint.html
+++ b/src/de/imprint.html
@@ -1,6 +1,7 @@
 ---
 layout: base.njk
 title: Impressum
+summary: Impressum von sp-codes – Informationen zu Rechtsinhaber und Kontaktangaben.
 ---
 <h1><i class="i-info-circle"></i> Impressum</h1>
 <div class="mb-4">
diff --git a/src/de/index.html b/src/de/index.html
index b039f7f..a9470ee 100644
--- a/src/de/index.html
+++ b/src/de/index.html
@@ -2,12 +2,12 @@
 layout: base.njk
 key: home
 title: Home
+summary: sp-codes stellt verschiedene Open-Source-Tools zur allgemeinen Verfügung. Alle Dienste sind kostenlos und werbefrei.
 eleventyNavigation:
   key: home
   title: Home
   icon: i-home
 ---
-
 <div class="row py-lg-5">
     <div class="col-12 col-lg-4 mb-4 mb-lg-0 fill-col-inner">
         <div class="logo huge animated">
@@ -77,7 +77,7 @@ eleventyNavigation:
         <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-extended.html" %}
+            {% include "services.html" %}
         </div>
     </div>
 </div>
diff --git a/src/de/privacy.html b/src/de/privacy.html
index f65b7e2..3e5d976 100644
--- a/src/de/privacy.html
+++ b/src/de/privacy.html
@@ -1,6 +1,7 @@
 ---
 layout: base.njk
 title: Datenschutzerklärung
+summary: Datenschutzerklärung von sp-codes – Informationen zur Datenverarbeitung.
 ---
 <h1><i class="i-user-secret"></i> Datenschutzerklärung</h1>
 <div class="mb-3">
diff --git a/src/de/services.html b/src/de/services.html
index cfa2ace..202bdcd 100644
--- a/src/de/services.html
+++ b/src/de/services.html
@@ -2,6 +2,7 @@
 layout: base.njk
 key: services
 title: Dienste
+summary: sp-codes stellt verschiedene Open-Source-Tools zur allgemeinen Verfügung. Alle Dienste sind kostenlos und werbefrei.
 eleventyNavigation:
   key: services
   title: Dienste
@@ -27,5 +28,5 @@ eleventyNavigation:
 </h3>
 
 <div class="row justify-content-center">
-    {% include "services-extended.html" %}
+    {% include "services.html" %}
 </div>
diff --git a/src/en/all-donations.html b/src/en/all-donations.html
index 7093449..6e922f2 100644
--- a/src/en/all-donations.html
+++ b/src/en/all-donations.html
@@ -1,7 +1,8 @@
 ---
 layout: base.njk
 key: all-donations
-title: Unterstützen
+title: Donate
+summary: Support sp-codes with a donation - help us to provide the services for the community in the long term.
 ---
 <h1><i class="i-hand-holding-heart"></i> All Donations</h1>
 
diff --git a/src/en/contact.html b/src/en/contact.html
index 5d5f422..1f1a866 100644
--- a/src/en/contact.html
+++ b/src/en/contact.html
@@ -2,6 +2,7 @@
 layout: base.njk
 key: contact
 title: Contact
+summary: Contact information for admins or moderation of sp-codes.
 eleventyNavigation:
   key: contact
   title: Contact
diff --git a/src/en/donate.html b/src/en/donate.html
index 7f33544..c35fc2e 100644
--- a/src/en/donate.html
+++ b/src/en/donate.html
@@ -2,6 +2,7 @@
 layout: base.njk
 key: donate
 title: Donate
+summary: Support sp-codes with a donation - help us to provide the services for the community in the long term.
 eleventyNavigation:
   key: donate
   title: Donate
@@ -26,8 +27,8 @@ eleventyNavigation:
             <div>If you want to transfer some money to me, just write me a short <a href="/en/contact">message</a>. I
                 will then send you my bank details as soon as possible. I am especially happy about a standing order.
                 <div class="mt-3 text-center">
-                    <img alt="Bank transfer {{ strings.donations.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters[locale] }}-{{ donations | banktransfers }}-active">
+                    <img alt="Bank transfer {{ strings.donations.supporters }}"
+                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters }}-{{ donations | banktransfers }}-active">
                 </div>
             </div>
         </div>
@@ -36,8 +37,8 @@ eleventyNavigation:
             <div>If you want to send me some cash, feel free to send it to the address provided in the <a
                     href="/en/imprint">imprint</a>.
                 <div class="mt-3 text-center">
-                    <img alt="Cash {{ strings.donations.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters[locale] }}-{{ donations | cash }}-inactive">
+                    <img alt="Cash {{ strings.donations.supporters }}"
+                         src="https://shields.sp-codes.de/badge/{{ strings.donations.supporters }}-{{ donations | cash }}-inactive">
                 </div>
             </div>
         </div>
diff --git a/src/en/en.json b/src/en/en.json
index d160103..5fce4cd 100644
--- a/src/en/en.json
+++ b/src/en/en.json
@@ -1,3 +1,47 @@
 {
-  "locale": "en"
+  "locale": "en",
+  "strings": {
+    "locale": "en",
+    "menu": {
+      "title": "Menu",
+      "imprint": "Imprint",
+      "privacy": "Privacy",
+      "code": "Code",
+      "stats": "Stats"
+    },
+    "state": {
+      "title": "State",
+      "operational": "Online",
+      "outage": "Outage",
+      "maintenance": "Maintenance"
+    },
+    "donations": {
+      "supporters": "Supporters",
+      "date": "Date",
+      "amount": "Amount",
+      "via": "Via",
+      "from": "Form",
+      "banktransfer": "Bank transfer",
+      "opencollective": "Open Collective",
+      "total": "Total",
+      "name": "Name",
+      "type": "Type",
+      "provider": "Provider",
+      "location": "Location",
+      "month": "Month",
+      "year": "Year"
+    },
+    "service": {
+      "overview": "Back to overview"
+    },
+    "article": {
+      "seriesParts": "All parts of this series",
+      "relatedService": "Related Service",
+      "questions": "Do you have a question?",
+      "questionsContent": "<p>Join the Matrix group and let's discuss. I look forward to your feedback!</p><a href=\"https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de\">#sp-codes:matrix.sp-codes.de</a>",
+      "aboutMe": "About me",
+      "aboutMeContent": "<p>My name is Samuel Philipp and I am a software engineer from Magdeburg, Germany. In my spare time, I host various free <a href=\"/en/services/\">services</a>. Here I write articles about security and privacy.</p><a href=\"https://samuel-philipp.com\">Read more</a>",
+      "yourOpinion": "Send me your opinion"
+    }
+  }
 }
diff --git a/src/en/imprint.html b/src/en/imprint.html
index 5d44c81..9f12b0b 100644
--- a/src/en/imprint.html
+++ b/src/en/imprint.html
@@ -1,6 +1,7 @@
 ---
 layout: base.njk
-title: sp-codes
+title: Impressum
+summary: Imprint of sp-codes - Information on legal owner and contact details.
 ---
 <h1><i class="i-info-circle"></i> Imprint</h1>
 <div class="mb-4">
diff --git a/src/en/index.html b/src/en/index.html
index 6d898bb..54811a7 100644
--- a/src/en/index.html
+++ b/src/en/index.html
@@ -2,12 +2,12 @@
 layout: base.njk
 key: home
 title: Home
+summary: sp-codes provides various open source tools for general use. All services are for free and without advertising.
 eleventyNavigation:
   key: home
   title: Home
   icon: i-home
 ---
-
 <div class="row py-lg-5">
     <div class="col-12 col-lg-4 mb-4 mb-lg-0 fill-col-inner">
         <div class="logo huge animated">
@@ -76,7 +76,7 @@ eleventyNavigation:
         <h1 class="text-center">Tool Overview</h1>
         <p class="text-center"><a href="/{{locale}}/services">View all services</a></p>
         <div class="row justify-content-center">
-            {% include "services-extended.html" %}
+            {% include "services.html" %}
         </div>
     </div>
 </div>
diff --git a/src/en/privacy.html b/src/en/privacy.html
index 99213bd..6b5ff2d 100644
--- a/src/en/privacy.html
+++ b/src/en/privacy.html
@@ -1,6 +1,7 @@
 ---
 layout: base.njk
 title: Privacy
+summary: Privacy policy of sp-codes - Information on data processing.
 ---
 <h1><i class="i-user-secret"></i> Privacy</h1>
 <p>Sorry, this document is only available in German so far. Read it <a href="/de/privacy">here</a>.</p>
diff --git a/src/en/services.html b/src/en/services.html
index 265ea08..d921c00 100644
--- a/src/en/services.html
+++ b/src/en/services.html
@@ -2,6 +2,7 @@
 layout: base.njk
 key: services
 title: Services
+summary: sp-codes provides various open source tools for general use. All services are for free and without advertising.
 eleventyNavigation:
   key: services
   title: Services
@@ -26,5 +27,5 @@ eleventyNavigation:
 </h3>
 
 <div class="row justify-content-center">
-    {% include "services-extended.html" %}
+    {% include "services.html" %}
 </div>