added services template

updated .drone.yml

.drone.yml

@@ -1,6 +1,6 @@
 kind: pipeline
 type: docker
-name: default
+name: build
 
 steps:
   - name: build
@@ -9,6 +9,12 @@ steps:
       - npm install
       - npm run build
 
+---
+kind: pipeline
+type: docker
+name: deploy
+
+steps:
   - name: deploy
     image: alpine
     environment:
@@ -22,6 +28,9 @@ steps:
       - which lftp || ( apk --update add lftp )
       - lftp -e "mirror -R ./dist/ sp-codes.de/; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST
 
+depends_on:
+  - build
+
 trigger:
   branch:
     - master

.eleventy.js

@@ -9,6 +9,7 @@ module.exports = function(eleventyConfig) {
         "img": "img",
         "font": "font",
         "node_modules/@fortawesome/fontawesome-free/webfonts/": "font",
+        "node_modules/fork-awesome/fonts/": "font",
         "node_modules/flag-icon-css/flags/4x3/(de|us)*": "flags"
     });
 

package-lock.json

@@ -3158,6 +3158,11 @@
       "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
       "dev": true
     },
+    "fork-awesome": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/fork-awesome/-/fork-awesome-1.1.7.tgz",
+      "integrity": "sha512-IHI7XCSXrKfUIWslse8c/PaaVDT1oBaYge+ju40ihL2ooiQeBpTr4wvIXhgTd2NuhntlvX+M5jYHAPTzNlmv0g=="
+    },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
@@ -6256,42 +6261,130 @@
       "dev": true
     },
     "nunjucks": {
-      "version": "3.2.0",
+      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/nunjucks/-/nunjucks-3.2.1.tgz",
-      "integrity": "sha512-YS/qEQ6N7qCnUdm6EoYRBfJUdWNT0PpKbbRnogV2XyXbBm2STIP1O6yrdZHgwMVK7fIYUx7i8+yatEixnXSB1w==",
+      "integrity": "sha512-LYlVuC1ZNSalQQkLNNPvcgPt2M9FTY9bs39mTCuFXtqh7jWbYzhDlmz2M6onPiXEhdZo+b9anRhc+uBGuJZ2bQ==",
       "dev": true,
       "requires": {
         "a-sync-waterfall": "^1.0.0",
         "asap": "^2.0.3",
-        "chokidar": "^2.0.0",
+        "chokidar": "^3.3.0",
-        "yargs": "^3.32.0"
+        "commander": "^3.0.2"
       },
       "dependencies": {
-        "camelcase": {
+        "anymatch": {
-          "version": "2.1.1",
+          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
-          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
+          "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
-          "dev": true
-        },
-        "window-size": {
-          "version": "0.1.4",
-          "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.4.tgz",
-          "integrity": "sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY=",
-          "dev": true
-        },
-        "yargs": {
-          "version": "3.32.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.32.0.tgz",
-          "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=",
           "dev": true,
+          "optional": true,
           "requires": {
-            "camelcase": "^2.0.1",
+            "normalize-path": "^3.0.0",
-            "cliui": "^3.0.3",
+            "picomatch": "^2.0.4"
-            "decamelize": "^1.1.1",
+          }
-            "os-locale": "^1.4.0",
+        },
-            "string-width": "^1.0.1",
+        "binary-extensions": {
-            "window-size": "^0.1.4",
+          "version": "2.0.0",
-            "y18n": "^3.2.0"
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
+          "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
+          "dev": true,
+          "optional": true
+        },
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "chokidar": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
+          "integrity": "sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "anymatch": "~3.1.1",
+            "braces": "~3.0.2",
+            "fsevents": "~2.1.2",
+            "glob-parent": "~5.1.0",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.4.0"
+          }
+        },
+        "commander": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-3.0.2.tgz",
+          "integrity": "sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==",
+          "dev": true
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "fsevents": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+          "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+          "dev": true,
+          "optional": true
+        },
+        "glob-parent": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-glob": "^4.0.1"
+          }
+        },
+        "is-binary-path": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "binary-extensions": "^2.0.0"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true,
+          "optional": true
+        },
+        "readdirp": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.4.0.tgz",
+          "integrity": "sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "picomatch": "^2.2.1"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-number": "^7.0.0"
           }
         }
       }

scss/main.scss

@@ -4,7 +4,10 @@
 @import "~bootstrap/scss/utilities/spacing";
 @import "~bootstrap/scss/utilities/display";
 @import "~bootstrap/scss/utilities/text";
+@import "~bootstrap/scss/utilities/float";
+
 $fa-font-path: "../font";
+@import "~fork-awesome/scss/fork-awesome";
 @import "~@fortawesome/fontawesome-free/scss/fontawesome";
 @import "~@fortawesome/fontawesome-free/scss/solid";
 @import "~@fortawesome/fontawesome-free/scss/brands";
@@ -64,6 +67,10 @@ body {
   border-bottom: 1px solid #ffffff;
 }
 
+.border-top {
+  border-top: 1px solid #ffffff;
+}
+
 a {
   color: #ffffff;
 
@@ -78,10 +85,16 @@ a {
   text-align: center;
 }
 
-.row {
+.heading {
-  margin: 0;
+  font-family: "Minotaur", monospace;
+  font-size: 3rem;
+  text-align: center;
 }
 
+//.row {
+//  margin: 0;
+//}
+
 .flex-grow {
   flex: 1;
 }
@@ -98,3 +111,42 @@ a {
     font-size: 2em;
   }
 }
+
+.service {
+  background-color: #222;
+  border: 1px solid #fff;
+  height: 100%;
+
+  .link {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .inner {
+    position: relative;
+    pointer-events: none;
+    z-index: 1;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+
+    a {
+      pointer-events: all;
+    }
+  }
+
+  &.flat {
+    .inner {
+      flex-direction: row;
+
+      h2 {
+        margin-left: 0.5rem;
+      }
+    }
+  }
+}

sites/_data/services.json

@@ -0,0 +1,60 @@
+[
+  {
+    "id": "searx",
+    "name": "Searx",
+    "icon": "fas fa-search",
+    "url": "https://searx.sp-codes.de",
+    "summary": {
+      "de": "Eine privatsphären-respektierende, hackbare Metasuchmaschine.",
+      "en": "A privacy-respecting, hackable metasearch engine."
+    }
+  },
+  {
+    "id": "invidious",
+    "name": "Invidious",
+    "icon": "fab fa-youtube",
+    "url": "https://invidious.sp-codes.de",
+    "summary": {
+      "de": "Ein alternatives YouTube-Frontend.",
+      "en": "An alternative YouTube-Frontend."
+    }
+  },
+  {
+    "id": "connectivitycheck",
+    "name": "Captive Portal Check",
+    "icon": "fas fa-wifi",
+    "summary": {
+      "de": "Eine datenschutzfreundliches Tool, um Anmeldeseiten in WLAN-Netzwerken zu erkennen.",
+      "en": "A privacy friendly Service to detect captive portals in WIFI networks."
+    }
+  },
+  {
+    "id": "matrix",
+    "name": "Matrix",
+    "icon": "fas fa-comments",
+    "url": "https://chat.sp-codes.de",
+    "summary": {
+      "de": "Ein offenes Netzwerk für sichere, dezentralisierte Kommunikation.",
+      "en": "An open network for secure, decentralized communication."
+    }
+  },
+  {
+    "id": "git",
+    "name": "Gitea",
+    "icon": "fas fa-code",
+    "url": "https://git.sp-codes.de",
+    "summary": {
+      "de": "Eine leichtgewichtige Code-Hosting-Plattform für git.",
+      "en": "A lightweight code hosting platform for git."
+    }
+  },
+  {
+    "id": "firefox-sync",
+    "name": "Firefox Sync",
+    "icon": "fab fa-firefox",
+    "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."
+    }
+  }
+]

sites/_data/site.js

@@ -1,7 +1,6 @@
 module.exports = {
-    title: "Webstoemp",
+    title: "sp-codes",
-    description:
+    description: "Samuel Philipp - Software Engineer from Magdeburg",
-        "",
     url: "https://sp-codes.de",
     baseUrl: "/",
     author: "Samuel Philipp",

sites/_includes/layouts/base.njk

@@ -24,7 +24,7 @@ title: sp-codes
     <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 & Software Engineer">
+    <meta property="og:description" content="Samuel Philipp - Software Engineer from Magdeburg">
     <meta property="og:site_name" content="sp-codes">
     <meta property="og:image" content="https://sp-codes.de/img/sp-codes.jpg">
     <!--<meta property="og:updated_time" content="">-->
@@ -50,7 +50,7 @@ title: sp-codes
     {% 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 %}
+        {% if item.data.key == key and item.data.locale == language.code and not item.data.hidden %}
           {% set translatedUrl = item.url %}
         {% endif %}
       {% endfor%}
@@ -62,7 +62,9 @@ title: sp-codes
     {% endfor %}
     </div>
     <div class="content">
-      {{ content | safe }}
+      <div class="container">
+        {{ content | safe }}
+      </div>
     </div>
     <div class="d-flex justify-content-end flex-wrap p-2 menu menu-bottom">
         <div class="mr-3"><span class="far fa-copyright mr-2"></span>Samuel Philipp</div>

sites/de/about.html

@@ -2,9 +2,10 @@
 layout: base.njk
 key: about
 title: Über
-eleventyNavigation:
+#eleventyNavigation:
-  key: about
+#  key: about
-  title: Über
+#  title: Über
-  order: 1
+#  order: 1
 ---
 <h1>Über mich</h1>
+Comming soon!

sites/de/index.html

@@ -8,27 +8,57 @@ eleventyNavigation:
   icon: home
 ---
 <div class="d-flex flex-column">
-    <div class="container flex-column flex-grow p-3">
+    <div class="flex-column flex-grow p-3">
         <div class="row py-5">
             <div class="col">
                 <img class="logo" src="../../img/samuel.png">
             </div>
         </div>
 
-        <div class="row justify-content-center py-4 border-top-bottom">
+        <div class="row justify-content-center py-4 border-top">
             <div class="col-lg-8 col-md-10 col-12">
                 <h1 class="sp-codes">SP-CODES</h1>
                 <p class="lead text-center mb-2">
                     Herzlich willkommen bei sp-codes!
                     Mein Name ist Samuel Philipp und ich bin ein Software Engineer aus Magdeburg.
-                    Auf dieser Seite finden Sie meine Profile auf GitHub, GitLab und Stackoverflow.
+                    Auf dieser Seite finden Sie Informationen über mich und eine Übersicht über die von mir
-                    Außerdem finden die verschiedene Möglichkeiten um mit mir in Kontakt zu treten.
+                    bereitgestellten Dienste.
-                    Ich freue mich auf Ihre Nachricht.
+                    Schauen Sie sich gerne um oder nutzen Sie die verschiedenen Tools.
+                </p>
+            </div>
+        </div>
+        <div class="row justify-content-center py-4 border-top">
+            <div class="col-lg-8 col-md-10 col-12">
+                <h1 class="heading"><a href="/{{locale}}/services">Dienste</a></h1>
+                <div class="row">
+                    {%- for service in services %}
+                    <div class="col-12 col-md-6 p-3">
+                        <div class="service flat">
+                            <a class="link inner" href="/{{locale}}/services/{{service.id}}">
+                                <i class="{{service.icon}} fa-fw fa-2x"></i>
+                                <h2 class="mt-2">{{service.name}}</h2>
+                            </a>
+                        </div>
+                    </div>
+                    {%- endfor %}
+                </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">
+                    Sie haben einen Fehler gefunden, Verbesserungsvorschläge, oder eine andere Frage? Treten Sie gerne
+                    auf einem der folgenden Plattformen mit mir in Kontakt. Ich freue mich auf Ihre Nachricht!
                 </p>
             </div>
         </div>
 
         <div class="d-flex justify-content-center flex-wrap my-3">
+            <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 style="width: 64px; height: 64px; margin: 0 8px;" src="img/matrix.png" alt=""></a></div>
             <div class="m-2"><a rel="me" href="https://social.tchncs.de/@samuel_p"><span
                     class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
             <div class="m-2"><a href="https://stackoverflow.com/users/9662601/samuel-p"><span
@@ -39,8 +69,6 @@ eleventyNavigation:
                     class="fab fa-fw fa-4x fa-github"></span></a></div>
             <div class="m-2"><a href="https://hub.docker.com/u/samuelph"><span
                     class="fab fa-fw fa-4x fa-docker"></span></a></div>
-            <div class="m-2"><a href="mailto:mail@sp-codes.de"><span
-                    class="fas fa-fw fa-4x fa-envelope"></span></a></div>
         </div>
 
         <div class="d-flex justify-content-center mb-3">

sites/de/projects.html

@@ -0,0 +1,11 @@
+---
+layout: base.njk
+key: projects
+title: Projekte
+#eleventyNavigation:
+#  key: projects
+#  title: Projekte
+#  order: 4
+---
+<h1>Projekte</h1>
+Comming soon!

sites/de/recommendations.html

@@ -2,9 +2,10 @@
 layout: base.njk
 key: recommendations
 title: Empfehlungen
-eleventyNavigation:
+#eleventyNavigation:
-  key: recommendations
+#  key: recommendations
-  title: Empfehlungen
+#  title: Empfehlungen
-  order: 2
+#  order: 2
 ---
 <h1>Empfehlungen</h1>
+Comming soon!

sites/de/services.html

@@ -5,6 +5,28 @@ title: Dienste
 eleventyNavigation:
   key: services
   title: Dienste
+  icon: server
   order: 2
 ---
-<h1>Services</h1>
+<div>
+    <a class="float-right mt-3" href="https://status.sp-codes.de"><i class="fas fa-heartbeat mr-2"></i>Status</a>
+    <h1>Dienste</h1>
+    <p>In meiner Freizeit stelle ich verschiedene quelloffene Dienste für die freie Nutzung bereit. Hier finden Sie eine
+        Übersicht der einzelnen Services und jeweils eine kurze Beschreibung. Alle Services werden in Deutschland
+        gehostet. Fühlen Sie sich frei davon Gebrauch zu machen.</p>
+    <div class="row">
+        {%- for service in services %}
+        <div class="col-12 col-md-6 col-lg-4 p-3">
+            <div class="service">
+                <a class="link" href="/{{locale}}/services/{{service.id}}"></a>
+                <div class="inner">
+                    <i class="{{service.icon}} fa-4x"></i>
+                    <h2 class="mt-2">{{service.name}}{% if service.url %} <a href="{{service.url}}"><i
+                            class="fas fa-external-link-alt"></i></a>{% endif %}</h2>
+                    <div>{{service.summary[locale]}}</div>
+                </div>
+            </div>
+        </div>
+        {%- endfor %}
+    </div>
+</div>

sites/de/services/invidous.md

@@ -0,0 +1,8 @@
+---
+layout: base.njk
+key: invidious
+title: Invidious
+---
+# Invidious
+
+Die Beschreibung zu Invidious folgt in Kürze.

sites/de/services/searx.md

@@ -0,0 +1,8 @@
+---
+layout: base.njk
+key: searx
+title: Searx
+---
+# Searx
+
+Die Beschreibung zu Searx folgt in Kürze.

sites/en/about.html

@@ -1,10 +0,0 @@
----
-layout: base.njk
-key: about
-title: About
-eleventyNavigation:
-  key: about
-  title: About
-  order: 1
----
-<h1>About me</h1>

sites/en/services.html

@@ -5,6 +5,27 @@ title: Services
 eleventyNavigation:
   key: services
   title: Services
+  icon: server
   order: 2
 ---
-<h1>Services</h1>
+<div>
+    <a class="float-right mt-3" href="https://status.sp-codes.de"><i class="fas fa-heartbeat mr-2"></i>Status</a>
+    <h1>Services</h1>
+    <p>In my spare time I provide various open source services for free. Here you can find an overview of the individual
+        services and a short description for each of them. All services are hosted in Germany. Feel free to use it.</p>
+    <div class="row">
+        {%- for service in services %}
+        <div class="col-12 col-md-6 col-lg-4 p-3">
+            <div class="service">
+                <a class="link" href="/{{locale}}/services/{{service.id}}"></a>
+                <div class="inner">
+                    <i class="{{service.icon}} fa-4x"></i>
+                    <h2 class="mt-2">{{service.name}}{% if service.url %} <a href="{{service.url}}"><i
+                            class="fas fa-external-link-alt"></i></a>{% endif %}</h2>
+                    <div>{{service.summary[locale]}}</div>
+                </div>
+            </div>
+        </div>
+        {%- endfor %}
+    </div>
+</div>