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

Reviewed-on: #55

.eleventy.js

@@ -11,6 +11,9 @@ module.exports = function(eleventyConfig) {
         "node_modules/@fortawesome/fontawesome-free/webfonts/": "font",
         "node_modules/flag-icon-css/flags/4x3/(de|us)*": "flags"
     });
+    eleventyConfig.addShortcode("translatedUrl", function(currentLocale, newLocale) {
+        return this.page.url.replace(new RegExp(`\/${currentLocale}\/`), `/${newLocale}/`);
+    });
 
     return {
         dir: {

src/_includes/layouts/base.njk

@@ -43,14 +43,8 @@ title: sp-codes
         <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">
+            <a href="{% translatedUrl locale, language.code %}" class="ml-3">
                 <span class="flag-icon flag-icon-{{ language.icon }}" title="{{ language.label }}"></span>
             </a>
         </div>
@@ -74,20 +68,15 @@ title: sp-codes
 
     <div class="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">
+            <a href="{% translatedUrl locale, language.code %}" class="ml-3">
                 <span class="flag-icon flag-icon-{{ language.icon }}" title="{{ language.label }}"></span>
             </a>
         </div>
         {% endfor %}
     </div>
 </nav>
+<p>{{url}}</p>
 <div class="content">
     <div class="container">
         {{ content | safe }}
@@ -96,7 +85,7 @@ title: sp-codes
 <div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
     <div class="d-flex justify-content-start flex-wrap">
         <div class="mr-3">Made with <span class="fas fa-heart highlight"></span> in Germany</div>
-        <div class="mr-3"><span class="far fa-copyright mr-1"></span>Samuel Philipp</div>
+        <div class="mr-3"><a href="https://samuel-philipp.de"><span class="far fa-copyright mr-1"></span>Samuel Philipp</a></div>
     </div>
     <div class="flex-sm-grow-1"></div>
     <div class="d-flex justify-content-sm-start flex-wrap">

src/de/contact.html

@@ -0,0 +1,43 @@
+---
+layout: base.njk
+key: contact
+title: Kontakt
+eleventyNavigation:
+  key: contact
+  title: Kontakt
+  icon: comment-dots
+  order: 3
+---
+<h1><i class="fas fa-comment-dots"></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="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>
+        <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"><img class="svg-icon" src="/img/xmpp.svg" alt=""></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"><img class="svg-icon" src="/img/threema.svg" alt=""></div>
+            <div>Schreibe mir auf Threema an die ID <strong>YSCU6F6U</strong></div>
+        </a>
+    </div>
+</div>

src/de/donate.html

@@ -6,7 +6,7 @@ eleventyNavigation:
   key: donate
   title: Unterstützen
   icon: hand-holding-heart
-  order: 3
+  order: 4
 ---
 <h1><i class="fas fa-hand-holding-heart"></i> Unterstützen</h1>
 
@@ -24,7 +24,7 @@ eleventyNavigation:
         </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>.
+            <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">

src/de/imprint.html

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

src/de/privacy.html

@@ -2,7 +2,7 @@
 layout: base.njk
 title: Datenschutzerklärung
 ---
-<h1>Datenschutzerklärung</h1>
+<h1><i class="fas fa-user-secret"></i> Datenschutzerklärung</h1>
 <div class="mb-3">
     <h2>Verantwortlicher</h2>
     <p>
@@ -11,7 +11,8 @@ 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>

src/en/contact.html

@@ -0,0 +1,41 @@
+---
+layout: base.njk
+key: contact
+title: Contact
+eleventyNavigation:
+  key: contact
+  title: Contact
+  icon: comment-dots
+  order: 3
+---
+<h1><i class="fas fa-comment-dots"></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="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>
+        <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"><img class="svg-icon" src="/img/xmpp.svg" alt=""></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"><img class="svg-icon" src="/img/threema.svg" alt=""></div>
+            <div>Write me on Threema to the ID <strong>YSCU6F6U</strong></div>
+        </a>
+    </div>
+</div>

src/en/donate.html

@@ -6,7 +6,7 @@ eleventyNavigation:
   key: donate
   title: Donate
   icon: hand-holding-heart
-  order: 3
+  order: 4
 ---
 <h1><i class="fas fa-hand-holding-heart"></i> Donate</h1>
 
@@ -23,7 +23,7 @@ eleventyNavigation:
         </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
+            <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/en/imprint.html

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

src/en/privacy.html

@@ -1,8 +1,6 @@
 ---
 layout: base.njk
-title: sp-codes
+title: Privacy
 ---
-<body class="legal">
+<h1><i class="fas fa-user-secret"></i> Privacy</h1>
-<h2>Privacy</h2>
 <p>Sorry, this document is only available in German so far. Read it <a href="/de/privacy">here</a>.</p>
-</body>

src/img/threema.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Threema icon</title><path d="M11.998 20.486a1.757 1.757 0 1 1 0 3.514 1.757 1.757 0 0 1 0-3.514zm-6.335 0a1.757 1.757 0 1 1 0 3.514 1.757 1.757 0 0 1 0-3.514zm12.671 0a1.757 1.757 0 1 1 0 3.514 1.757 1.757 0 0 1 0-3.514zM12 0c5.7 0 10.322 4.066 10.322 9.082 0 5.016-4.622 9.083-10.322 9.083a11.45 11.45 0 0 1-4.523-.917l-5.171 1.293 1.105-4.42c-1.094-1.442-1.733-3.175-1.733-5.039C1.678 4.066 6.3 0 12 0zm-.001 4.235A2.926 2.926 0 0 0 9.072 7.16v1.17h-.115a.47.47 0 0 0-.47.47v4.126c0 .26.21.471.47.471h6.086c.26 0 .47-.21.47-.47V8.798a.47.47 0 0 0-.47-.47h-.115v-1.17a2.927 2.927 0 0 0-2.93-2.924zm0 1.17c.972 0 1.758.786 1.758 1.754v1.17h-3.514v-1.17c0-.968.786-1.754 1.756-1.754z"/></svg>

src/img/xmpp.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>XMPP icon</title><path d="M24 3.186l-3.217 1.248-.976.325-3.122.925c.014.18.014.361.014.555 0 3.422-1.744 7.59-4.63 10.573-2.805-2.972-4.49-7.066-4.49-10.434 0-.194 0-.375.014-.555l-3.11-.921v-.009l-.861-.306L0 3.172c.146 5.747 4.867 11.701 10.542 15.02-1.3 1.014-2.766 1.788-4.365 2.192v.319c.434-.054.852-.14 1.271-.225.15-.027.3-.048.451-.08l.047-.012c1.36-.29 2.722-.776 4.052-1.408.397.195.797.38 1.2.548.109.05.22.095.33.142.201.086.407.159.612.236 1.25.474 2.568.809 3.96.924v-.305c-1.68-.425-3.211-1.264-4.56-2.355C19.194 14.904 23.853 8.975 24 3.186z"/></svg>