major improvements

added expenses and donations
replaced some icons with svgs
This commit is contained in:
Samuel Philipp 2021-06-08 00:16:21 +02:00
parent c5b781fde1
commit a5aa3cc014
Signed by untrusted user: samuel-p
GPG key ID: 2AD495D17760CB4E
41 changed files with 428 additions and 95 deletions

View file

@ -1,6 +1,10 @@
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
module.exports = function(eleventyConfig) {
module.exports = function (eleventyConfig) {
eleventyConfig.setLiquidOptions({
dynamicPartials: true,
// strict_filters: true,
});
eleventyConfig.addWatchTarget("./src/scss/");
eleventyConfig.addPlugin(eleventyNavigationPlugin);
@ -11,10 +15,38 @@ 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, locale) {
return value.toLocaleString(locale, {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",

View file

@ -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 Normal file
View file

@ -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
}
]

View file

@ -13,7 +13,7 @@
{
"id": "matrix",
"name": "Matrix",
"icon": "fas fa-comments",
"si": "matrix",
"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",
"si": "jitsi",
"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",
"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",
"si": "gitea",
"url": "https://git.sp-codes.de",
"status": "https://git.sp-codes.de",
"summary": {

View file

@ -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"
}
}

View file

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

View file

@ -0,0 +1,38 @@
{% for year in donations %}
<h2>{{year.year}}</h2>
<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(locale)}} €</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th colspan="3">{{strings.total[locale]}}</th>
<th>{{year.donations | sum | amount(locale)}} €</th>
</tr>
</tfoot>
</table>
{% endfor %}

View file

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

View file

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

View file

@ -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 fas fa-fw fa-4x fa-envelope"></span>
<span class="d-block d-md-none fas fa-fw fa-2x fa-envelope"></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 fab fa-fw fa-4x fa-stack-overflow"></span>
<span class="d-block d-md-none fab fa-fw fa-2x fa-stack-overflow"></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 fab fa-fw fa-4x fa-github"></span>
<span class="d-block d-md-none fab fa-fw fa-2x fa-github"></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">

View file

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

View file

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

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

View file

@ -20,23 +20,23 @@ eleventyNavigation:
</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>

View file

@ -14,7 +14,7 @@ eleventyNavigation:
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>
@ -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,

View file

@ -31,7 +31,7 @@ eleventyNavigation:
href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
</p>
<div class="row justify-content-center">
{% include services-simple.html %}
{% include "services-simple.html" %}
</div>
</div>
</div>
@ -44,4 +44,4 @@ eleventyNavigation:
</p>
</div>
</div>
{% include profiles.html %}
{% include "profiles.html" %}

View file

@ -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.

View file

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

View file

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

10
src/en/all-donations.html Normal file
View file

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

View file

@ -19,22 +19,22 @@ eleventyNavigation:
</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>

View file

@ -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

View file

@ -30,7 +30,7 @@ eleventyNavigation:
href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
</p>
<div class="row justify-content-center">
{% include services-simple.html %}
{% include "services-simple.html" %}
</div>
</div>
</div>
@ -44,4 +44,4 @@ eleventyNavigation:
</div>
</div>
{% include profiles.html %}
{% include "profiles.html" %}

View file

@ -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.

View file

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

View file

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

View file

@ -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

View file

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

1
src/img/icon/jitsi.svg Normal file
View file

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Jitsi</title><path d="M18.948 7.828c-.638-.406-1.527-.346-1.8-.317l-.156.003c-.135-.058.004-.397.041-.753.051-.496-.131-1.177-.461-1.722-.159-.262-.216-.287-.098-.413.869-.928 1.005-1.956.729-2.812-.539-1.675-.648-1.939-.631-1.771.068.683-.084 1.637-.188 2.025-.148.55-.654 1.248-1.979 1.884-.311.149-1.565.74-1.788.998-.276.321-.344.644-.474 1.283-.138.676-.189 1.307-.027 2.03.031.141.063.246.081.329a.017.017 0 0 0-.002-.005c.037.147-.023.234-.105.286a1.455 1.455 0 0 1-.252.08l-.003.001c-.203.032-.398.067-.585.104-1.379.237-4.401.958-3.328 4.704.381 1.271 1.124 2.078 1.554 2.226l.015.005c.071.032.148.06.223.075.008.002.012.124-.004.296l-.011.074c-.06.434-.308 1.104-.673 1.113-.146.004-.79-.386-.972-.505-1.02-.67-1.384-1.048-2.108-1.129-.597-.067-1.939 1.093-1.968 3.549-.035 2.999.806 4.49.83 4.534.623-2.824 1.072-3.1 2.689-4.205.128-.087 1.647 1.191 2.012 1.184 1.827-.034 5.102.083 6.689-3.196.031-.063.549.474.595.473.019-.001 2.788-1.234 3.199-6.899.188-2.587-.536-3.206-1.044-3.529zm-2.172-1.846c.08.327.057.667-.041.947-.178.427-.45.651-.79.627a.812.812 0 0 1-.31-.11c-.378-.221-.583-.786-.422-1.225a.183.183 0 0 0 .01-.02c.042-.112.144-.237.275-.364.269-.238.797-.64.854-.64.072.002.341.443.424.785zm-.004-4.911c.006-.058.153.385.201.539.209.665.181.96.134 1.297-.122.858-.579 1.422-.924 1.766-.541.54-.668.618-.432.191.753-1.361.912-2.641 1.021-3.793zm-4.103 4.186c.097-.239.584-.503.989-.739.418-.244 1.747-.59 2.566-1.669.253-.333-.214 1.915-1.417 3.002-.406.367-1.522.557-2.485 1.242-.099.071.022-1.153.347-1.836zm-.258 1.993c.236-.196.664-.477 2.209-.987.191-.063.177.002.27.457.099.486.197.933 1.207 1.178.072.018-.328.772-.443.871-.225.36-1.415 1.392-1.919 1.294-.345-.067-1.087-.895-1.289-1.352-.145-.328-.405-1.154-.035-1.461zM8.11 11.537c.165-.783.783-1.18.801-1.196.313-.272.919-.518 1.55-.704.095-.025.154-.038.168-.041.39-.08.88-.213 1.204-.246.246-.025.549-.153.798.036.27.328.864.871 1.191.899.111.009.858-.224 2.083-1.321.153-.137.314-.272.484-.398l.049-.036c.376-.273.792-.5 1.244-.6.14-.031-.5.605.048 1.936.359.872 1.351 3.863 1.188 4.342-.097.286-.185.339-.432.225-.692-.321-1.544-1.269-3.181-1.908-1.319-.515-2.412-.503-3.12-.364-1.629.321-2.473 1.03-2.946 1.426-.072.061.701-.245 1.734-.362.936-.106 1.875-.004 3.037.786.742.621.561.573.226.666-1.28.356-3.719 1.092-4.57.968-.88-.129-1.966-2.388-1.556-4.108zm6.849 3.15c-1.028-1.225-2.201-1.604-2.948-1.654-.927-.062-1.594.057-2.226.267-.068.023 3.387-2.469 7.192.489.685.533 1.094.83 1.454 1.066.052.034-.917.29-1.081.336-1.575.261-2.008-.048-2.391-.504zm-.88.249c-.376.135-.903.321-1.477.499a61.891 61.891 0 0 1 1.477-.499zm-7.455 3.411c.06-.601.193-1.146.134-1.753-.001-.012 1.714 1.163 2.179 1.244.076.013-.801.812-1.697 1.188-.307-.04-.641-.428-.616-.679zm-1.882 4.935c-.092-.129-.694-2.51-.527-4.034.23-2.1 1.408-2.844 1.635-2.871.188-.022.56.1.386 2.198-.021.253 1.117 1.04 1.117 1.04-2.322 1.364-2.136 2.391-2.611 3.667zm4.754-2.535c-.117-.005-2.264-1.473-2.192-1.501 2.477-.964 2.656-2.467 2.827-2.849-.02-.032.484-.236 1.17-.491 1.104-.396 2.631-.891 3.158-1.086l.027-.008c.239-.069.249-.024.313.06.19.247.509.412.544.429.47.223 1.076.202 1.09.221.094.136.154 5.536-6.937 5.225zm7.31-2.681c-.021.001-.528-.472-.528-.472s.196-.427.295-.97c.08-.442.12-1.097.12-1.097s2.331-.278 2.435-1.082c.118-.918-.546-2.827-.645-3.139-.042-.132-.621-1.69-.706-2.093-.096-.454.087-1.187.36-1.294.643-.253 1.59.828 1.647 2.401.217 6.03-2.957 7.745-2.978 7.746z"/></svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View file

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Mastodon</title><path d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"/></svg>

After

Width:  |  Height:  |  Size: 976 B

View file

Before

Width:  |  Height:  |  Size: 957 B

After

Width:  |  Height:  |  Size: 957 B

View file

Before

Width:  |  Height:  |  Size: 433 B

After

Width:  |  Height:  |  Size: 433 B

View file

Before

Width:  |  Height:  |  Size: 782 B

After

Width:  |  Height:  |  Size: 782 B

View file

Before

Width:  |  Height:  |  Size: 659 B

After

Width:  |  Height:  |  Size: 659 B

View file

@ -1 +0,0 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000"><title>Matrix icon</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>

Before

Width:  |  Height:  |  Size: 957 B

View file

@ -1 +0,0 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000"><title>Open Collective icon</title><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c2.54 0 4.894-.79 6.834-2.135l-3.107-3.109a7.715 7.715 0 1 1 0-13.512l3.107-3.109A11.943 11.943 0 0 0 12 0zm9.865 5.166l-3.109 3.107A7.67 7.67 0 0 1 19.715 12a7.682 7.682 0 0 1-.959 3.727l3.109 3.107A11.943 11.943 0 0 0 24 12c0-2.54-.79-4.894-2.135-6.834z"/></svg>

Before

Width:  |  Height:  |  Size: 433 B

View file

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

Before

Width:  |  Height:  |  Size: 782 B

View file

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

Before

Width:  |  Height:  |  Size: 659 B

View file

@ -1,37 +1,38 @@
.si, .si::before {
display: inline-block;
margin: 0 8px;
width: 4em;
height: 4em;
width: 1.25em;
line-height: 1;
box-sizing: border-box;
}
@media (max-width: 767.98px) {
.si, .si::before {
margin: 0 4px;
width: 2em;
height: 2em;
}
.si-2x {
font-size: 2em;
}
.h2si, .h2si::before {
margin: 0;
width: 30px;
height: 24px;
.si-3x {
font-size: 3em;
}
.si-4x {
font-size: 4em;
}
.si::before {
content: '\200b';
background-repeat: no-repeat;
background-position: center;
}
@mixin svg-icon($name) {
.si-#{$name}::before {
content: '\200b';
background-image: url("../img/#{$name}-white.svg");
background-repeat: no-repeat;
background-position: center;
background-image: url("../img/icon/#{$name}.svg");
}
}
@include svg-icon('matrix');
@include svg-icon('gitea');
@include svg-icon('xmpp');
@include svg-icon('threema');
@include svg-icon('jitsi');
@include svg-icon('mastodon');
@include svg-icon('matrix');
@include svg-icon('opencollective');
@include svg-icon('threema');
@include svg-icon('xmpp');

View file

@ -228,12 +228,6 @@ a {
}
&.flat {
color: $primary !important;
&:hover {
color: $primary_dark !important;
}
.inner {
flex-direction: row;
text-decoration: none;
@ -241,10 +235,6 @@ a {
h2 {
margin-left: 0.5rem;
}
a {
color: #fff;
}
}
}
}
@ -278,7 +268,19 @@ pre {
max-width: 96px;
max-height: 96px;
}
.fa-4x {
font-size: 2em;
}
table.table {
width: 100%;
margin-bottom: 16px;
background-color: #111;
tr:nth-child(2n) {
background-color: #ffffff0b;
}
td, th {
padding: 6px 13px;
border: 1px solid #444;
}
}