layout ng

src/_data/services.json

@@ -9,17 +9,37 @@
       "de": "Die offene Plattform für sichere und dezentrale Kommunikation.",
       "en": "The open platform for secure and decentralized communication."
     },
-    "description": {
+    "cards": [
-      "de": "<p>Seit Anfang 2020 betreibe ich einen öffentlichen Matrix-Server: <a href=\"https://matrix.sp-codes.de\">matrix.sp-codes.de</a> und eine öffentliche Element-Web Instanz: <a href=\"https://chat.sp-codes.de\" target=\"_blank\">chat.sp-codes.de</a></p><p>Die Serverregeln kannst du gerne <a href=\"https://matrix.sp-codes.de/_matrix/consent\" target=\"_blank\">hier</a> 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 <a href=\"https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de\" target=\"_blank\">@samuel-p:matrix.sp-codes.de</a>.</p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://chat.sp-codes.de/#/register\">Jetzt registrieren</a></div>",
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit Anfang 2020 betreibe ich einen öffentlichen Matrix-Server: <a href=\"https://matrix.sp-codes.de\">matrix.sp-codes.de</a> und eine öffentliche Element-Web Instanz: <a href=\"https://chat.sp-codes.de\" target=\"_blank\">chat.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://chat.sp-codes.de/#/register\">Jetzt registrieren</a></div>",
+          "en": ""
+        }
+      },
+      {
+        "title": {
+          "de": "Einstieg",
           "en": ""
         },
+        "content": {
+          "de": "<p>Hier findest du eine Artikelserie für einen einfachen Einstieg in Matrix:</p><ol><li><a href=\"/de/services/matrix/setup/part-1/\">Werde Teil der Matrix</a></li><li><a href=\"/de/services/matrix/setup/part-2/\">Sichere Chats mit Matrix</a></li></ul>",
+          "en": ""
+        }
+      },
+      {
         "ossrox": {
-      "url": "https://ossrox.org/store/matrix",
+          "url": "https://ossrox.org/store/matrix"
-      "description": {
+        },
+        "content": {
           "de": "Wenn du einen eigenen Matrix-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
           "en": "If you want to have your own Matrix server for you, your family or your company, I would be happy to support you with my company Ossrox. Please have a look at our services on our website or send me a message."
         }
       }
+    ]
   },
   {
     "id": "jitsi",
@@ -31,17 +51,27 @@
       "de": "Einfache Videokonferenzen mit Leichtigkeit.",
       "en": "Easy video conferencing with ease."
     },
-    "description": {
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
           "de": "<p>Seit Juli 2020 betreibe ich eine eigene Jitsi-Meet Instanz. Du findest sie unter <a href=\"https://jitsi.sp-codes.de\">jitsi.sp-codes.de</a>.</p><p>Gerne darfst du die Instanz mit anderen Leuten nutzen.</p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://jitsi.sp-codes.de\">Meeting starten</a></div>",
           "en": ""
+        }
       },
+      {
         "ossrox": {
-      "url": "https://ossrox.org/store/jitsi",
+          "url": "https://ossrox.org/store/jitsi"
-      "description": {
+        },
+        "content": {
           "de": "Wenn du einen eigenen Jitsi-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
           "en": ""
         }
       }
+    ]
   },
   {
     "id": "mastodon",
@@ -53,17 +83,28 @@
       "de": "Das soziale Netzwerk für dezentrale und sichere Interaktion.",
       "en": "The social network for decentralized and secure interaction."
     },
-    "description": {
+    "cards": [
-      "de": "<p>Seit Mai 2021 betreibe ich eine öffentliche Mastodon-Instanz: <a href=\"https://social.sp-codes.de\">social.sp-codes.de</a></p><p>Die Serverregeln und weitere Informationen kannst du gerne <a href=\"https://social.sp-codes.de/about\">hier</a> 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 <a href=\"https://social.sp-codes.de/@samuel_p\">@samuel_p@matrix.sp-codes.de</a>.</p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://social.sp-codes.de/auth/sign_up\">Jetzt registrieren</a></div>",
+      {
-      "en": ""
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
         },
+        "content": {
+          "de": "<p>Seit Mai 2021 betreibe ich eine öffentliche Mastodon-Instanz: <a href=\"https://social.sp-codes.de\">social.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://social.sp-codes.de/auth/sign_up\">Jetzt registrieren</a></div>",
+          "en": ""
+        }
+      },
+      {
         "ossrox": {
-      "url": "https://ossrox.org/store/mastodon",
+          "url": "https://ossrox.org/store/mastodon"
-      "description": {
+        },
+        "content": {
           "de": "Wenn du einen eigenen Mastodon-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
           "en": ""
         }
       }
+
+    ]
   },
   {
     "id": "peertube",
@@ -74,7 +115,19 @@
     "summary": {
       "de": "Die freie und dezentrale Plattform für gemeinsames Video-Streaming.",
       "en": "The free and decentralized platform for collaborative video streaming."
+    },
+    "cards": [
+      {
+        "title": {
+          "de": "Mein Angebot",
+          "en": "My Offer"
+        },
+        "content": {
+          "de": "<p>Seit August 2021 betreibe ich eine öffentliche PeerTube-Instanz: <a href=\"https://tube.sp-codes.de\">tube.sp-codes.de</a></p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://tube.sp-codes.de/signup\">Jetzt registrieren</a></div>",
+          "en": ""
         }
+      }
+    ]
   },
   {
     "id": "pixelfed",

src/_includes/layouts/service.njk

@@ -11,21 +11,19 @@ layout: base.njk
             {{ content | safe }}
         </div>
         <div class="col-lg-4 col-12">
-            <div class="tab-card">
+            {% for card in service.cards %}
-                <div class="title"><h1 class="text-center fw-bold">sp-codes</h1></div>
+            <div class="tab-card{% if card.ossrox %} ossrox{% endif %}">
-                <div class="card">
+                {% if card.ossrox %}
-                    {{ service.description[locale] | safe }}
+                <a href="{{ card.ossrox.url }}" class="link"></a>
-                </div>
-            </div>
-            {% if service.ossrox %}
-            <div class="tab-card ossrox">
-                <a href="{{ service.ossrox.url }}" class="link"></a>
                 <div class="title"><img class="ossrox" src="/img/ossrox-white.svg" alt="Ossrox"></div>
-                <div class="card">
+                {% else %}
-                    {{ service.ossrox.description[locale] }}
+                <div class="title"><h2 class="text-center fw-bold">{{ card.title[locale] }}</h1></div>
-                </div>
-            </div>
                 {% endif %}
+                <div class="card">
+                    {{ card.content[locale] | safe }}
+                </div>
+            </div>
+            {% endfor %}
         </div>
     </div>
 {% else %}

src/de/services/forgejo.md

@@ -1,10 +1,8 @@
 ---
-layout: base.njk
+layout: service.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.
@@ -13,8 +11,13 @@ Schau gerne mal vorbei und melde dich an, falls du Lust hast, ein Projekt zu ent
 
 __Zu Forgejo geht's hier lang: [git.sp-codes.de](https://git.sp-codes.de)__
 
-__Wenn du bei Woodpecker vorbeischauen willst, geht das hier: [ci.sp-codes.de](https://ci.sp-codes.de)__
+## Server-Details
 
+[//]: # (TODO)
+
+___TODO___
+
+* Actions
 
 ## Weitere nützliche Links
 

src/de/services/mastodon.md

@@ -7,6 +7,12 @@ Mastodon ist ein verteilter Mikroblogging-Dienst, ähnlich wie Twitter. Allerdin
 
 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.
 
+Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf deine Nachricht an [@samuel_p@matrix.sp-codes.de](https://social.sp-codes.de/@samuel_p).
+
+## Server-Details
+
+Die sp-codes Serverregeln und weitere Informationen kannst du gerne [hier](https://social.sp-codes.de/about) nachlesen.
+
 ## Interessante Accounts
 
 * [Bundesbeauftragte für Datenschutz und Informationsfreiheit](https://social.bund.de/@bfdi)

src/de/services/matrix.md

@@ -14,22 +14,20 @@ 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.
 
-## Einstieg
+Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf deine Nachricht an <a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de" target="_blank">@samuel-p:matrix.sp-codes.de</a>.
 
-Hier findest du eine Artikelserie für einen einfachen Einstieg in Matrix:
+## Server-Details
 
-<div class="row justify-content-center">
+Die sp-codes Serverregeln kannst du gerne [hier](https://matrix.sp-codes.de/_matrix/consent) nachlesen.
-<div class="col-12 col-md-10 col-lg-8">
+
-<div class="card-list">
+[//]: # (TODO)
-<div class="card">
+
-<a href="/de/services/matrix/setup/part-1/">Teil 1: Werde Teil der Matrix</a>
+___TODO___
-</div>
+
-<div class="card">
+* Retention
-<a href="/de/services/matrix/setup/part-2/">Teil 2: Sichere Chats mit Matrix</a>
+  * Medien
-</div>
+  * Nachrichten
-</div>
+* tbc
-</div>
-</div>
 
 ## Warum Matrix?
 

src/de/services/peertube.md

@@ -1,21 +1,17 @@
 ---
-layout: base.njk
+layout: service.njk
-key: mastodon
+key: peertube
-title: Mastodon
+title: PeerTube
 ---
-# <i class="i-peertube"></i> PeerTube
-
 PeerTube ist ein Netzwerk aus mehreren föderierten, interoperablen Video-Hosting-Anbietern, vergleichbar mit YouTube. Allerdings basiert der Dienst nicht auf einer zentralen Plattform, sondern besteht aus vielen verschiedenen, dezentralen Instanzen, die von Privatpersonen, Vereinen oder sonstigen Stellen eigenverantwortlich betrieben werden. Dadurch machen sich die 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/)__
+Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus.
 
-Die Serverregeln und weitere Informationen kannst du gerne [hier](https://tube.sp-codes.de/about/instance) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus.
+## Server-Details
 
-<div class="text-center mb-3">
+Die Serverregeln und weitere Informationen kannst du gerne [hier](https://tube.sp-codes.de/about/instance) nachlesen.
-<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
 

src/scss/main.scss

@@ -402,8 +402,8 @@ table.table {
   }
 
   img {
-    max-width: 250px;
+    max-width: 200px;
-    max-height: 50px;
+    max-height: 30px;
   }
 }