Browse Source

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

Reviewed-on: #67
main
Samuel Philipp 11 months ago
parent
commit
397a15f3db
  1. 33
      .eleventy.js
  2. 2
      package.json
  3. 74
      src/_data/donations.json
  4. 50
      src/_data/expenses.json
  5. 22
      src/_data/services.json
  6. 44
      src/_data/strings.json
  7. 36
      src/_includes/donations-current.html
  8. 40
      src/_includes/donations.html
  9. 35
      src/_includes/expenses-current.html
  10. 4
      src/_includes/layouts/base.njk
  11. 2
      src/_includes/layouts/services.njk
  12. 8
      src/_includes/licenses.html
  13. 30
      src/_includes/profiles.html
  14. 2
      src/_includes/services-extended.html
  15. 2
      src/_includes/services-simple.html
  16. 10
      src/de/all-donations.html
  17. 2
      src/de/blog.md
  18. 14
      src/de/contact.html
  19. 26
      src/de/donate.html
  20. 5
      src/de/imprint.html
  21. 2
      src/de/index.html
  22. 4
      src/de/services.html
  23. 2
      src/de/services/connectivitycheck.md
  24. 2
      src/de/services/firefox-sync.md
  25. 2
      src/de/services/gitea.md
  26. 2
      src/de/services/invidious.md
  27. 2
      src/de/services/jitsi.md
  28. 2
      src/de/services/matrix.md
  29. 2
      src/de/services/nitter.md
  30. 2
      src/de/services/searx.md
  31. 2
      src/de/services/shields.md
  32. 10
      src/en/all-donations.html
  33. 2
      src/en/blog.md
  34. 14
      src/en/contact.html
  35. 22
      src/en/donate.html
  36. 5
      src/en/imprint.html
  37. 2
      src/en/index.html
  38. 4
      src/en/services.html
  39. 2
      src/en/services/connectivitycheck.md
  40. 2
      src/en/services/firefox-sync.md
  41. 2
      src/en/services/gitea.md
  42. 2
      src/en/services/invidious.md
  43. 2
      src/en/services/jitsi.md
  44. 2
      src/en/services/matrix.md
  45. 2
      src/en/services/nitter.md
  46. 2
      src/en/services/searx.md
  47. 2
      src/en/services/shields.md
  48. BIN
      src/img/bg-light.png
  49. 1
      src/img/gitea.svg
  50. 1
      src/img/icon/bars.svg
  51. 1
      src/img/icon/book.svg
  52. 1
      src/img/icon/comment-dots.svg
  53. 1
      src/img/icon/comments.svg
  54. 1
      src/img/icon/envelope.svg
  55. 1
      src/img/icon/firefox-browser.svg
  56. 0
      src/img/icon/gitea.svg
  57. 1
      src/img/icon/github.svg
  58. 1
      src/img/icon/hand-holding-heart.svg
  59. 1
      src/img/icon/home.svg
  60. 1
      src/img/icon/language.svg
  61. 1
      src/img/icon/mastodon.svg
  62. 0
      src/img/icon/matrix.svg
  63. 0
      src/img/icon/opencollective.svg
  64. 1
      src/img/icon/search.svg
  65. 1
      src/img/icon/server.svg
  66. 1
      src/img/icon/stackoverflow.svg
  67. 1
      src/img/icon/tags.svg
  68. 0
      src/img/icon/threema.svg
  69. 1
      src/img/icon/twitter.svg
  70. 1
      src/img/icon/users.svg
  71. 1
      src/img/icon/wifi.svg
  72. 0
      src/img/icon/xmpp.svg
  73. 1
      src/img/icon/youtube.svg
  74. 1
      src/img/matrix.svg
  75. 1
      src/img/opencollective.svg
  76. 1
      src/img/threema.svg
  77. 1
      src/img/xmpp.svg
  78. 58
      src/scss/icons.scss
  79. 30
      src/scss/main.scss

33
.eleventy.js

@ -1,6 +1,6 @@
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
module.exports = function(eleventyConfig) {
module.exports = function (eleventyConfig) {
eleventyConfig.addWatchTarget("./src/scss/");
eleventyConfig.addPlugin(eleventyNavigationPlugin);
@ -11,10 +11,39 @@ 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) {
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);
});
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;
});
return {
dir: {
input: "src",

2
package.json

@ -19,7 +19,7 @@
"browser-sync": "^2.26.14"
},
"devDependencies": {
"@11ty/eleventy": "^0.12.1",
"@11ty/eleventy": "^1.0.0-canary.32",
"@11ty/eleventy-navigation": "^0.2.0",
"cpx": "^1.5.0",
"node-sass": "^6.0.0",

74
src/_data/donations.json

@ -1,10 +1,68 @@
{
"banktransfer": {
"number": 5,
"color": "success"
[
{
"year": 2021,
"donations": [
{
"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
}
]
},
"cash": {
"number": 0,
"color": "inactive"
{
"year": 2020,
"donations": [
{
"date": "04.12.2020",
"amount": 10,
"via": "banktransfer",
"from": null,
"first": true
}
]
}
}
]

50
src/_data/expenses.json

@ -0,0 +1,50 @@
[
{
"name": {
"en": "Websites",
"de": "Webseiten"
},
"type": "Webhosting",
"provider": "netcup",
"amount": 1.99
},
{
"name": "Diana",
"type": "VPS",
"provider": "Hetzner",
"amount": 2.96
},
{
"name": "Ceres",
"type": "VPS",
"provider": "netcup",
"amount": 5.5
},
{
"name": "Venus",
"type": "VPS",
"provider": "netcup",
"amount": 3.33
},
{
"name": "Luna",
"type": "Root-Server",
"provider": "netcup",
"amount": 14
},
{
"name": "Vesta",
"type": "Root-Server",
"provider": "netcup",
"amount": 11.49
},
{
"name": {
"en": "Additional IPv4",
"de": "Zusätzliche IPv4"
},
"type": "IPv4",
"provider": "netcup",
"amount": 1
}
]

22
src/_data/services.json

@ -2,7 +2,7 @@
{
"id": "searx",
"name": "Searx",
"icon": "fas fa-search",
"icon": "si si-search",
"url": "https://searx.sp-codes.de",
"status": "https://searx.sp-codes.de",
"summary": {
@ -13,7 +13,7 @@
{
"id": "matrix",
"name": "Matrix",
"icon": "fas fa-comments",
"icon": "si si-comments",
"url": "https://chat.sp-codes.de",
"status": "https://matrix.sp-codes.de/_matrix/static/",
"summary": {
@ -24,7 +24,7 @@
{
"id": "jitsi",
"name": "Jitsi Meet",
"icon": "fas fa-users",
"icon": "si si-users",
"url": "https://jitsi.sp-codes.de",
"status": "https://jitsi.sp-codes.de",
"summary": {
@ -35,7 +35,7 @@
{
"id": "mastodon",
"name": "Mastodon",
"icon": "fab fa-mastodon",
"icon": "si si-mastodon",
"url": "https://social.sp-codes.de",
"status": "https://social.sp-codes.de/health",
"beta": true,
@ -47,7 +47,7 @@
{
"id": "gitea",
"name": "Gitea",
"icon": "fas fa-code",
"icon": "si si-gitea",
"url": "https://git.sp-codes.de",
"status": "https://git.sp-codes.de",
"summary": {
@ -58,7 +58,7 @@
{
"id": "connectivitycheck",
"name": "Captive Portal Check",
"icon": "fas fa-wifi",
"icon": "si si-wifi",
"status": "https://connectivitycheck.sp-codes.de/generate204",
"summary": {
"de": "Eine datenschutzfreundliches Tool, um Anmeldeseiten in WLAN-Netzwerken zu erkennen.",
@ -68,7 +68,7 @@
{
"id": "firefox-sync",
"name": "Firefox Sync",
"icon": "fab fa-firefox-browser",
"icon": "si si-firefox-browser",
"status": "https://sync.firefox.sp-codes.de/token/",
"summary": {
"de": "Ein Service um Firefox Einstellungen, Lesezeichen, offene Tabs und vieles mehr über verschiedene Geräte zu synchronisieren.",
@ -78,7 +78,7 @@
{
"id": "shields",
"name": "Shields",
"icon": "fas fa-tags",
"icon": "si si-tags",
"url": "https://shields.sp-codes.de",
"status": "https://shields.sp-codes.de",
"summary": {
@ -89,7 +89,7 @@
{
"id": "translate",
"name": "LibreTranslate",
"icon": "fas fa-language",
"icon": "si si-language",
"url": "https://translate.sp-codes.de",
"status": "https://translate.sp-codes.de",
"beta": true,
@ -101,7 +101,7 @@
{
"id": "invidious",
"name": "Invidious",
"icon": "fab fa-youtube",
"icon": "si si-youtube",
"url": "https://invidious.sp-codes.de",
"status": "https://invidious.sp-codes.de",
"summary": {
@ -112,7 +112,7 @@
{
"id": "nitter",
"name": "Nitter",
"icon": "fab fa-twitter",
"icon": "si si-twitter",
"url": "https://nitter.sp-codes.de",
"status": "https://nitter.sp-codes.de",
"summary": {

44
src/_data/strings.json

@ -38,5 +38,49 @@
"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"
},
"month": {
"de": "Monat",
"en": "Month"
},
"year": {
"de": "Jahr",
"en": "Year"
}
}

36
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><a href="https://opencollective.com/sp-codes" rel="nofollow">Open Collective</a></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>

40
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><a href="https://opencollective.com/sp-codes" rel="nofollow">Open Collective</a></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 %}

35
src/_includes/expenses-current.html

@ -0,0 +1,35 @@
<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.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.amount | amount}} €</td>
<td>{{expense.amount | year | amount}} €</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th colspan="3">{{strings.total[locale]}}</th>
<th>{{expenses | sum | amount}} €</th>
<th>{{expenses | sum | year | amount}} €</th>
</tr>
</tfoot>
</table>
</div>

4
src/_includes/layouts/base.njk

@ -40,7 +40,7 @@ title: sp-codes
<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="si si-bars mr-1"></span>{{ strings.menu[locale] }}</label>
<div class="flex-grow-1"></div>
@ -59,7 +59,7 @@ title: sp-codes
{% 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 }}
{% if entry.icon %}<span class="{{ entry.icon }} mr-1"></span>{% endif %}{{ entry.title }}
</a>
</div>
{% endif %}

2
src/_includes/layouts/services.njk

@ -6,5 +6,5 @@ layout: base.njk
{{ content | safe }}
<div class="row justify-content-center">
{% include 'services-extended.html' %}
{% include "services-extended.html" %}
</div>

8
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 / SIL OFL 1.1 / MIT</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>

30
src/_includes/profiles.html

@ -1,18 +1,28 @@
<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="mailto:mail@sp-codes.de">
<span class="d-none d-md-block si si-envelope si-4x"></span>
<span class="d-block d-md-none si si-envelope si-2x"></span>
</a></div>
<div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
<span class="si si-matrix"></span>
<span class="d-none d-md-block si si-matrix si-4x"></span>
<span class="d-block d-md-none si si-matrix si-2x"></span>
</a></div>
<div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p">
<span class="d-none d-md-block si si-mastodon si-4x"></span>
<span class="d-block d-md-none si si-mastodon si-2x"></span>
</a></div>
<div class="m-2"><a href="https://stackoverflow.com/users/9662601/samuel-p">
<span class="d-none d-md-block si si-stackoverflow si-4x"></span>
<span class="d-block d-md-none si si-stackoverflow si-2x"></span>
</a></div>
<div class="m-2"><a rel="me" href="https://social.sp-codes.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">
<span class="si si-gitea"></span>
<span class="d-none d-md-block si si-gitea si-4x"></span>
<span class="d-block d-md-none si si-gitea si-2x"></span>
</a></div>
<div class="m-2"><a href="https://github.com/samuel-p">
<span class="d-none d-md-block si si-github si-4x"></span>
<span class="d-block d-md-none si si-github si-2x"></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">

2
src/_includes/services-extended.html

@ -6,7 +6,7 @@
<div class="beta">TEST-PHASE</div>
{% endif %}
<div class="inner">
<i class="{{service.icon}} fa-4x"></i>
<i class="{{service.icon}} si-4x"></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>
{% if service.status %}

2
src/_includes/services-simple.html

@ -6,7 +6,7 @@
{% if service.beta == true %}
<div class="beta">TEST-PHASE</div>
{% endif %}
<i class="{{service.icon}} fa-fw fa-2x"></i>
<i class="{{service.icon}} si-2x"></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>
</div>

10
src/de/all-donations.html

@ -0,0 +1,10 @@
---
layout: base.njk
key: all-donations
title: Unterstützen
---
<h1><i class="si si-hand-holding-heart"></i> Alle Spenden</h1>
<p><a href="/{{locale}}/donate/">&#10132; Unterstützen</a></p>
{% include donations.html %}

2
src/de/blog.md

@ -3,7 +3,7 @@ key: blog
eleventyNavigation:
key: blog
title: Blog
icon: book
icon: si si-book
url: https://blog.sp-codes.de/
locale: de
order: 1

14
src/de/contact.html

@ -5,38 +5,38 @@ title: Kontakt
eleventyNavigation:
key: contact
title: Kontakt
icon: comment-dots
icon: si si-comment-dots
order: 3
---
<h1><i class="fas fa-comment-dots"></i> Kontaktmöglichkeiten</h1>
<h1><i class="si si-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-foreground"></span></div>
<div class="pr-3"><span class="si si-envelope si-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="fab fa-fw fa-4x fa-mastodon text-foreground"></span></div>
<div class="pr-3"><span class="si si-mastodon si-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="si si-matrix"></span></div>
<div class="pr-3"><span class="si si-matrix si-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="si si-xmpp"></span></div>
<div class="pr-3"><span class="si si-xmpp si-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="si si-threema"></span></div>
<div class="pr-3"><span class="si si-threema si-4x"></span></div>
<div>Schreibe mir auf Threema an die ID <strong>YSCU6F6U</strong></div>
</a>
</div>

26
src/de/donate.html

@ -5,19 +5,19 @@ title: Unterstützen
eleventyNavigation:
key: donate
title: Unterstützen
icon: hand-holding-heart
icon: si si-hand-holding-heart
order: 4
---
<h1><i class="fas fa-hand-holding-heart"></i> Unterstützen</h1>
<h1><i class="si si-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
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="si si-comments fa-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>
@ -29,7 +29,7 @@ eleventyNavigation:
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>
@ -39,12 +39,12 @@ eleventyNavigation:
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><i class="si h2si si-opencollective m-2"></i>Open Collective</h2>
<h2><i class="si si-opencollective m-2"></i>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.
@ -72,11 +72,13 @@ eleventyNavigation:
</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,

5
src/de/imprint.html

@ -25,3 +25,8 @@ title: Impressum
<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>

2
src/de/index.html

@ -5,7 +5,7 @@ title: Home
eleventyNavigation:
key: home
title: Home
icon: home
icon: si si-home
---
<div class="row justify-content-center py-4 border-top">
<div class="col-lg-8 col-md-10 col-12">

4
src/de/services.html

@ -5,10 +5,10 @@ title: Dienste
eleventyNavigation:
key: services
title: Dienste
icon: server
icon: si si-server
order: 2
---
<h1><i class="fas fa-server"></i> Dienste</h1>
<h1><i class="si si-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>

2
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="si si-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.

2
src/de/services/firefox-sync.md

@ -3,7 +3,7 @@ layout: base.njk
key: firefox-sync
title: Firefox Sync
---
# <i class="fab fa-firefox-browser"></i> Firefox Sync
# <i class="si si-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.

2
src/de/services/gitea.md

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

2
src/de/services/invidious.md

@ -3,7 +3,7 @@ layout: base.njk
key: invidious
title: Invidious
---
# <i class="fab fa-youtube"></i> Invidious
# <i class="si si-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.

2
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="si si-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.

2
src/de/services/matrix.md

@ -4,7 +4,7 @@ key: matrix
title: Matrix
---
# <i class="fas fa-comments"></i> Matrix
# <i class="si si-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

2
src/de/services/nitter.md

@ -3,7 +3,7 @@ layout: base.njk
key: nitter
title: Nitter
---
# <i class="fab fa-twitter"></i> Nitter
# <i class="si si-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.

2
src/de/services/searx.md

@ -3,7 +3,7 @@ layout: base.njk
key: searx
title: Searx
---
# <i class="fas fa-search"></i> Searx
# <i class="si si-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.

2
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="si si-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.

10
src/en/all-donations.html

@ -0,0 +1,10 @@
---
layout: base.njk
key: all-donations
title: Unterstützen
---
<h1><i class="si si-hand-holding-heart"></i> All Donations</h1>
<p><a href="/{{locale}}/donate/">&#10132; Donate</a></p>
{% include donations.html %}

2
src/en/blog.md

@ -3,7 +3,7 @@ key: blog
eleventyNavigation:
key: blog
title: Blog
icon: book
icon: si si-book
url: https://blog.sp-codes.de/
locale: en
order: 1

14
src/en/contact.html

@ -5,36 +5,36 @@ title: Contact
eleventyNavigation:
key: contact
title: Contact
icon: comment-dots
icon: si si-comment-dots
order: 3
---
<h1><i class="fas fa-comment-dots"></i> Contact Information</h1>
<h1><i class="si si-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-foreground"></span></div>
<div class="pr-3"><span class="si si-envelope si-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="fab fa-fw fa-4x fa-mastodon text-foreground"></span></div>
<div class="pr-3"><span class="si si-mastodon si-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="si si-matrix"></span></div>
<div class="pr-3"><span class="si si-matrix si-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="si si-xmpp"></span></div>
<div class="pr-3"><span class="si si-xmpp si-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="si si-threema"></span></div>
<div class="pr-3"><span class="si si-threema si-4x"></span></div>
<div>Write me on Threema to the ID <strong>YSCU6F6U</strong></div>
</a>
</div>

22
src/en/donate.html

@ -5,10 +5,10 @@ title: Donate
eleventyNavigation:
key: donate
title: Donate
icon: hand-holding-heart
icon: si si-hand-holding-heart
order: 4
---
<h1><i class="fas fa-hand-holding-heart"></i> Donate</h1>
<h1><i class="si si-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,7 +16,7 @@ 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="si si-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>
@ -27,7 +27,7 @@ eleventyNavigation:
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>
@ -37,12 +37,12 @@ eleventyNavigation:
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><i class="si h2si si-opencollective m-2"></i>Open Collective</h2>
<h2><i class="si si-opencollective m-2"></i>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.
@ -70,9 +70,13 @@ eleventyNavigation:
</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

5
src/en/imprint.html

@ -25,3 +25,8 @@ title: sp-codes
<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>

2
src/en/index.html

@ -5,7 +5,7 @@ title: Home
eleventyNavigation:
key: home
title: Home
icon: home
icon: si si-home
---
<div class="row justify-content-center py-4 border-top">
<div class="col-lg-8 col-md-10 col-12">

4
src/en/services.html

@ -5,10 +5,10 @@ title: Services
eleventyNavigation:
key: services
title: Services
icon: server
icon: si si-server
order: 2
---
<h1><i class="fas fa-server"></i> Services</h1>
<h1><i class="si si-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>

2
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="si si-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.

2
src/en/services/firefox-sync.md

@ -3,7 +3,7 @@ layout: base.njk
key: firefox-sync
title: Firefox Sync
---
# <i class="fab fa-firefox-browser"></i> Firefox Sync
# <i class="si si-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.

2
src/en/services/gitea.md

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

2
src/en/services/invidious.md

@ -3,7 +3,7 @@ layout: base.njk
key: invidious
title: Invidious
---
# <i class="fab fa-youtube"></i> Invidious
# <i class="si si-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.

2
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="si si-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.

2
src/en/services/matrix.md

@ -3,7 +3,7 @@ layout: base.njk
key: matrix
title: Matrix
---
# <i class="fas fa-comments"></i> Matrix
# <i class="si si-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.

2
src/en/services/nitter.md

@ -3,7 +3,7 @@ layout: base.njk
key: nitter
title: Nitter
---
# <i class="fab fa-twitter"></i> Nitter
# <i class="si si-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.

2
src/en/services/searx.md

@ -3,7 +3,7 @@ layout: base.njk
key: searx
title: Searx
---
# <i class="fas fa-search"></i> Searx
# <i class="si si-search"></i> Searx
Searx is a free meta search engine, which uses other public search engines like Google, DuckDuckGo, StartPage and many others.

2
src/en/services/shields.md

@ -3,7 +3,7 @@ layout: base.njk
key: shields
title: Shields
---
# <i class="fas fa-tags"></i> Shields
# <i class="si si-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.

BIN
src/img/bg-light.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

1
src/img/gitea.svg

@ -1 +0,0 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000"><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>

Before

Width:  |  Height:  |  Size: 1.8 KiB

1
src/img/icon/bars.svg

@ -0,0 +1 @@
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#fff"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>

After

Width:  |  Height:  |  Size: 451 B

1
src/img/icon/book.svg

@ -0,0 +1 @@
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#fff"><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"/></svg>

After

Width:  |  Height:  |  Size: 542 B

1
src/img/icon/comment-dots.svg

@ -0,0 +1 @@
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#fff"><path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32zM128 272c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>

After

Width:  |  Height:  |  Size: 545 B

1
src/img/icon/comments.svg

@ -0,0 +1 @@
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#fff"><path d="M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z"></path></svg>

After

Width:  |  Height:  |  Size: 609 B

1
src/img/icon/envelope.svg

@ -0,0 +1 @@
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#fff"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg>

After

Width:  |  Height:  |  Size: 574 B

1
src/img/icon/firefox-browser.svg

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Firefox Browser</title><path d="M8.824 7.287c.008 0 .004 0 0 0zm-2.8-1.4c.006 0 .003 0 0 0zm16.754 2.161c-.505-1.215-1.53-2.528-2.333-2.943.654 1.283 1.033 2.57 1.177 3.53l.002.02c-1.314-3.278-3.544-4.6-5.366-7.477-.091-.147-.184-.292-.273-.446a3.545 3.545 0 01-.13-.24 2.118 2.118 0 01-.172-.46.03.03 0 00-.027-.03.038.038 0 00-.021 0l-.006.001a.037.037 0 00-.01.005L15.624 0c-2.585 1.515-3.657 4.168-3.932 5.856a6.197 6.197 0 00-2.305.587.297.297 0 00-.147.37c.057.162.24.24.396.17a5.622 5.622 0 012.008-.523l.067-.005a5.847 5.847 0 011.957.222l.095.03a5.816 5.816 0 01.616.228c.08.036.16.073.238.112l.107.055a5.835 5.835 0 01.368.211 5.953 5.953 0 012.034 2.104c-.62-.437-1.733-.868-2.803-.681 4.183 2.09 3.06 9.292-2.737 9.02a5.164 5.164 0 01-1.513-.292 4.42 4.42 0 01-.538-.232c-1.42-.735-2.593-2.121-2.74-3.806 0 0 .537-2 3.845-2 .357 0 1.38-.998