develop #40

Manually merged
samuel-p merged 6 commits from develop into master 2020-12-07 21:52:46 +00:00
32 changed files with 377 additions and 78 deletions

View file

@ -1,4 +1,8 @@
{
"menu": {
"de": "Menü",
"en": "Menu"
},
"imprint": {
"de": "Impressum",
"en": "Imprint"

View file

@ -35,18 +35,13 @@ title: sp-codes
<link rel="stylesheet" href="/css/main.css">
<script async defer data-domain="sp-codes.de" src="https://plausible.sp-codes.de/js/plausible.js"></script>
</head>
<body>
<div class="d-flex justify-content-start flex-wrap p-2 menu border-bottom">
{%- for entry in collections.all | eleventyNavigation %}
{% if not entry.url.startsWith("https") and entry.url.includes(locale) or entry.locale == locale %}
<div {% if entry.url == page.url %} class="active"{% endif %}>
<a href="{{ entry.url | url }}" class="mr-2">
{% if entry.icon %}<span class="fas fa-{{ entry.icon }} mr-2"></span>{% endif %}{{ entry.title }}
</a>
</div>
{% endif %}
{%- endfor %}
<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>
<div class="flex-grow-1"></div>
{% for language in site.languages %}
{% set translatedUrl = "/" + language.code + "/" %}
{% for item in collections.all %}
@ -54,30 +49,66 @@ title: sp-codes
{% set translatedUrl = item.url %}
{% endif %}
{% endfor%}
<div {% if language.code == locale %} class="active"{% endif %}>
<div {% if language.code== locale %} class="active" {% endif %}>
<a href="{{ translatedUrl | url }}" class="ml-3">
<span class="flag-icon flag-icon-{{ language.icon }}" title="{{ language.label }}"></span>
</a>
</div>
{% endfor %}
</div>
<div class="content">
<input type="checkbox" id="menu"/>
<div class="items">
{%- for entry in collections.all | eleventyNavigation %}
{% 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 }}
</a>
</div>
{% endif %}
{%- endfor %}
</div>
<div class="flex-grow-1"></div>
<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">
<span class="flag-icon flag-icon-{{ language.icon }}" title="{{ language.label }}"></span>
</a>
</div>
{% endfor %}
</div>
</nav>
<div class="content">
<div class="container">
{{ content | safe }}
</div>
</div>
<div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
</div>
<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-2"></span>Samuel Philipp</div>
<div class="mr-3"><span class="far fa-copyright mr-1"></span>Samuel Philipp</div>
</div>
<div class="flex-sm-grow-1"></div>
<div class="d-flex justify-content-sm-start flex-wrap">
<div class="mr-3"><a href="/{{locale}}/imprint"><span class="fas fa-info-circle mr-2"></span>{{strings.imprint[locale]}}</a></div>
<div class="mr-3"><a href="/{{locale}}/privacy"><span class="fas fa-user-secret mr-2"></span>{{strings.privacy[locale]}}</a></div>
<div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span class="fas fa-code mr-2"></span>{{strings.code[locale]}}</a></div>
<div><a target="_blank" href="https://plausible.sp-codes.de/sp-codes.de"><span class="fas fa-chart-line mr-2"></span>{{strings.stats[locale]}}</a></div>
<div class="mr-3"><a href="/{{locale}}/imprint"><span class="fas fa-info-circle mr-1"></span>{{strings.imprint[locale]}}</a>
</div>
<div class="mr-3"><a href="/{{locale}}/privacy"><span class="fas fa-user-secret mr-1"></span>{{strings.privacy[locale]}}</a>
</div>
</body>
<div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span
class="fas fa-code mr-1"></span>{{strings.code[locale]}}</a></div>
<div><a target="_blank" href="https://plausible.sp-codes.de/sp-codes.de"><span
class="fas fa-chart-line mr-1"></span>{{strings.stats[locale]}}</a></div>
</div>
</div>
</body>
</html>

View file

@ -1,6 +1,6 @@
{%- for service in services %}
<div class="col-12 col-md-6 col-lg-4 p-3">
<div class="service">
<div class="card service">
<a class="link" {% if service.beta !=true %} href="/{{locale}}/services/{{service.id}}" {% endif %}></a>
{% if service.beta == true %}
<div class="beta">TEST-PHASE</div>

View file

@ -1,6 +1,6 @@
{%- for service in services %}
<div class="col-12 col-md-6 p-3">
<div class="service flat">
<div class="card service flat">
<a class="link" href="/{{locale}}/services{% if service.beta != true %}/{{service.id}}{% endif %}"></a>
<div class="inner" href="/{{locale}}/services{% if service.beta != true %}/{{service.id}}{% endif %}">
{% if service.beta == true %}

57
src/de/donate.html Normal file
View file

@ -0,0 +1,57 @@
---
layout: base.njk
key: donate
title: Unterstützen
eleventyNavigation:
key: donate
title: Unterstützen
icon: hand-holding-heart
order: 3
---
<h1><i class="fas fa-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 gerne über die
folgenden Wege unterstützen<sup>1</sup>:</p>
<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>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>
</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="/de/imprint">Nachricht</a>.
Ich schicke dir dann schnellstmöglich meine Bankverbindung zu.
</div>
</div>
<div class="card mb-3">
<h2><i class="fas fa-money-bill fa-fw m-2"></i>Bargeld</h2>
<div>Wer mir etwas Bargeld zukommen lassen möchte, darf das gerne an die Adresse aus dem <a
href="/de/imprint">Impressum</a> senden.
</div>
</div>
<div class="card mb-3">
<h2><i class="fas fa-network-wired fa-fw m-2"></i>netcup</h2>
<div>Einige meiner Dienste hoste ich bei <a href="https://www.netcup.de/" target="_blank">netcup</a>. Wenn
du einen eigenen Server oder eine Webseite bei netcup betreiben willst, kannst du gerne den folgenden
Link (auf dem Bild) nutzen. Dadurch erhalte ich bei deiner Bestellung eine kleine Provision. Falls du
ein Neukunde bist, erhältst du einen 5 € Gutschein für deine Bestellung.
</div>
<div class="mt-3 text-center">
<a href="https://www.netcup.de/bestellen/gutschein_einloesen.php?gutschein=36nc16071208640"
target="_blank">
<img src="/img/netcup-setC-234x60.png" width="234" height="60" alt="zu netcup"/>
</a>
</div>
</div>
</div>
</div>
<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,
nicht um steuerlich absetzbare Spenden im Sinne des Steuerrechts.</small></p>
</div>

View file

@ -3,13 +3,35 @@ layout: base.njk
title: Impressum
---
<h1>Impressum</h1>
<div class="mb-3">
<div class="mb-4">
<h2>Angaben gemäß § 5 TMG:</h2>
<p>Samuel Philipp
<p>Samuel Philipp<br/>
Otto-von-Guericke-Straße 40a<br/>
39104 Magdeburg<br/>
Deutschland</p>
<h2>Kontaktmöglichkeiten</h2>
<p><strong>E-Mail-Adresse</strong>: <a href="mailto:info@sp-codes.de" target="_blank">info@sp-codes.de</a></p>
<!--<p><strong>Kontaktformular</strong>: <a href="https://sp-codes.de/contact" target="_blank">https://sp-codes.de/contact</a></p>-->
</div>
<div class="mb-3 pt-4 border-top">
<h2>Kontaktmöglichkeiten</h2>
<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="matrix-icon" src="/img/matrix.png" alt=""></div>
<div>Schreibe mir auf Matrix an <strong>@samuel-p:matrix.sp-codes.de</strong></div>
</a>
</div>
</div>
</div>

View file

@ -21,14 +21,14 @@ eleventyNavigation:
<div class="row justify-content-center py-4 border-top">
<div class="col-lg-8 col-md-10 col-12">
<h1 class="heading"><a href="/{{locale}}/services">Dienste</a></h1>
<div class="row justify-content-center">
{% include services-simple.html %}
</div>
<p class="lead text-center mb-2">
Für die Nutzer:innen der Dienste und Interessierte gibt es einen öffentlichen Matrix-Raum als
Austauschort für Fragen, Ideen und Probleme: <a
href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
</p>
<div class="row justify-content-center">
{% include services-simple.html %}
</div>
</div>
</div>
<div class="row justify-content-center pt-4 border-top">

View file

@ -8,7 +8,7 @@ eleventyNavigation:
icon: server
order: 2
---
<h1>Dienste</h1>
<h1><i class="fas fa-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>

View file

@ -3,7 +3,7 @@ layout: base.njk
key: connectivitycheck
title: Captive Portal Check
---
# Captive Portal Check
# <i class="fas fa-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.

View file

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

View file

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

View file

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

View file

@ -3,7 +3,7 @@ layout: base.njk
key: matrix
title: Matrix
---
# Matrix
# <i class="fas fa-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 ist, dass es nicht den einen Matrix-Server gibt, den alle Nutzer:innen verwenden müssen, wie das beispielsweise bei WhatsApp, Telegram und vielen anderen verbreiteten Messengern der Fall ist.
@ -17,6 +17,20 @@ Melde dich gerne auf meinem Server an oder suche dir einen aus der unten verlink
Auf meinem Blog findest du einen einfachen Einstieg in das Matrix-Netzwerk: [Werde Teil der Matrix](https://blog.sp-codes.de/werde-teil-der-matrix-matrix-teil-1/)
## Warum Matrix?
Hier möchte ich ein paar Gründe nennen, warum ich Matrix nutze und vielen anderen Messengern vorziehe:
* Da die Server dezentral verteilt sind, bleibt das Netzwerk bestehen, auch wenn ein Server ausfällt.
* Du kannst dir deinen Server-Anbieter frei aussuchen und bist nicht auf einen zentralen Anbieter angewiesen.
* Matrix ist ohne Telefonnummer oder E-Mail-Adresse nutzbar.
* Es gibt Apps für alle Plattformen (Handy, PC, Browser, etc.)
* Standardmäßig werden die Nachrichten in privaten Chats und Gruppen Ende-zu-Ende verschlüsselt. Dadurch ist es auch für den Server-Anbieter unmöglich, Nachrichten mitzulesen.
* Das Protokoll (die Art wie Daten übertragen werden) ist frei, dadurch kann jeder die Funktionsweise überprüfen oder neue Apps entwickeln, die dieses Protokoll verwenden.
* Auch die Verschlüsselungsalgorithmen sind öffentlich zugänglich und überprüfbar. Sie sind nicht patentgeschützt durch eine Firma.
* Apps und Server sind quelloffen, wodurch die Funktionsweise und die Weiterentwicklung transparent nachvollziehbar sind.
* Matrix unterstützt Sprach- und Video-Telefonie, sowohl in privaten, als auch in Gruppen-Chats.
## Weitere nützliche Links
* [Verschiedene Apps](https://matrix.org/clients)

View file

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

View file

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

View file

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

56
src/en/donate.html Normal file
View file

@ -0,0 +1,56 @@
---
layout: base.njk
key: donate
title: Donate
eleventyNavigation:
key: donate
title: Donate
icon: hand-holding-heart
order: 3
---
<h1><i class="fas fa-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>
<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>
<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>
</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
will then send you my bank details as soon as possible.
</div>
</div>
<div class="card mb-3">
<h2><i class="fas fa-money-bill fa-fw m-2"></i>Cash</h2>
<div>If you want to send me some cash, feel free to send it to the address provided in the <a
href="/en/imprint">imprint</a>.
</div>
</div>
<div class="card mb-3">
<h2><i class="fas fa-network-wired fa-fw m-2"></i>netcup</h2>
<div>Some of my services are hosted at netcup. If you want to run your own server or website at <a
href="https://www.netcup.de/" target="_blank">netcup</a>, you can use the following link (on the
picture). This way I get a small commission on your order. If you are a new customer, you will receive a
5€ voucher for your order.
</div>
<div class="mt-3 text-center">
<a href="https://www.netcup.de/bestellen/gutschein_einloesen.php?gutschein=36nc16071208640"
target="_blank">
<img src="/img/netcup-setC-234x60.png" width="234" height="60" alt="zu netcup"/>
</a>
</div>
</div>
</div>
</div>
<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
of tax law.</small></p>
</div>

View file

@ -2,7 +2,34 @@
layout: base.njk
title: sp-codes
---
<div class="legal">
<h1>Imprint</h1>
<p>Sorry, this document is only available in German so far. Read it <a href="/de/imprint">here</a>.</p>
<div class="mb-4">
<h2>Information as per § 5 TMG:</h2>
<p>Samuel Philipp<br/>
Otto-von-Guericke-Straße 40a<br/>
39104 Magdeburg<br/>
Deutschland</p>
</div>
<div class="mb-3 pt-4 border-top">
<h2>Contact Information</h2>
<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="matrix-icon" src="/img/matrix.png" alt=""></div>
<div>Write me on Matrix to <strong>@samuel-p:matrix.sp-codes.de</strong></div>
</a>
</div>
</div>
</div>

View file

@ -20,14 +20,14 @@ eleventyNavigation:
<div class="row justify-content-center py-4 border-top">
<div class="col-lg-8 col-md-10 col-12">
<h1 class="heading"><a href="/{{locale}}/services">Services</a></h1>
<div class="row justify-content-center">
{% include services-simple.html %}
</div>
<p class="lead text-center mb-2">
For users of the services and anyone interested, there is a public matrix room as a place to share
questions, ideas and problems: <a
href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
</p>
<div class="row justify-content-center">
{% include services-simple.html %}
</div>
</div>
</div>
<div class="row justify-content-center pt-4 border-top">

View file

@ -8,7 +8,7 @@ eleventyNavigation:
icon: server
order: 2
---
<h1>Services</h1>
<h1><i class="fas fa-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>

View file

@ -3,7 +3,7 @@ layout: base.njk
key: connectivitycheck
title: Captive Portal Check
---
# Captive Portal Check
# <i class="fas fa-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.

View file

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

View file

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

View file

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

View file

@ -3,7 +3,7 @@ layout: base.njk
key: matrix
title: Matrix
---
# Matrix
# <i class="fas fa-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.
@ -17,6 +17,20 @@ Feel free to create an account on my server or choose one from the list linked b
On my blog (German) you will find a simple introduction to the Matrix network: [Werde Teil der Matrix](https://blog.sp-codes.de/werde-teil-der-matrix-matrix-teil-1/)
## Why Matrix?
Here I want to give some reasons why I use Matrix and prefer it over many other messengers:
* Since the servers are decentralized, the network remains available even if one server fails.
* You are free to choose your server provider and you are not dependent on a central provider.
* Matrix can be used without a phone number or email address.
* There are apps for all platforms (mobile, PC, Browser, etc.)
* By default, messages in private chats and groups are end-to-end encrypted. This also makes it impossible for the server provider to read messages.
* The protocol (the way data is transferred) is open, so anyone can check how it works or develop new apps that use this protocol.
* The encryption algorithms are also publicly available and verifiable. They are not proprietary by any company.
* Apps and servers are open source, which makes the functionality and further development transparent and traceable.
* Matrix supports voice and video calls, both in private and group chats.
## More useful links
* [Various Apps](https://matrix.org/clients)

View file

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

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

View file

@ -5,6 +5,9 @@
@import "node_modules/bootstrap/scss/utilities/display";
@import "node_modules/bootstrap/scss/utilities/text";
@import "node_modules/bootstrap/scss/utilities/float";
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
$fa-font-path: "../font";
@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@ -27,6 +30,10 @@ body {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
ul {
list-style: disclosure-closed;
}
.content {
flex: 1;
padding: 2%;
@ -54,6 +61,67 @@ a {
border: 2px solid #000;
}
.nav {
display: flex;
justify-content: start;
flex-wrap: wrap;
padding: .5rem;
.toggle {
padding: .5rem;
display: none;
}
#menu {
display: none;
}
.items {
display: flex;
}
.lang-large {
display: flex;
}
}
@include media-breakpoint-down(xs) {
.nav {
display: block;
padding: 0;
.toggle {
display: flex;
label:hover {
text-decoration: underline;
cursor: pointer;
}
}
.items {
display: none;
.item {
border-top: 1px solid #fff;
a {
display: block;
padding: 0.5rem;
}
}
}
input:checked ~ .items {
display: block;
}
.lang-large {
display: none;
}
}
}
.menu {
a {
color: #fff;
@ -84,11 +152,16 @@ a {
flex: 1;
}
.service {
position: relative;
.card {
background-color: #222;
border: 1px solid #fff;
padding: 1rem;
}
.service {
position: relative;
height: 100%;
padding: 0;
.link {
position: absolute;
@ -106,7 +179,8 @@ a {
.beta {
position: absolute;
top: 0;
right: -1rem; font-weight: bold;
right: -1rem;
font-weight: bold;
background-color: #fea500;
color: #000000;
padding: .5rem 1rem;
@ -140,7 +214,6 @@ a {
.inner {
flex-direction: row;
//pointer-events: all;
text-decoration: none;
h2 {
@ -196,6 +269,7 @@ pre {
@media (max-width: 767.98px) {
.matrix-icon {
margin: 0 4px;
width: 2em;
height: 2em;
}