PrivateCoffee/privatecoffee-website
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add homemade badge for in-house services
All checks were successful
Build and Deploy Static Site / build (push) Successful in 1m1s
Details

Browse source 
Implemented a "homemade" badge to distinguish services developed by Private.coffee from third-party services. Enhanced service data with a "homemade" flag and updated the frontend to display a special icon when this flag is set. This provides users with clear visual feedback, enhancing transparency about service origins.
This commit is contained in:
Kumi 2024-07-16 13:40:37 +02:00
parent d0f8ed0d0b
commit 04a26c180a
Signed by: kumi
GPG key ID: ECBCC9082395383F
3 changed files with 67 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/css/base.css
View file

@ -119,6 +119,16 @@ h5 {
color: #604c2e;
}
.homemade {
top: -0.5rem;
right: -0.5rem;
position: absolute;
}
.homemade svg {
fill: var(--bs-primary-bg-subtle) !important;
}
.bs-icon.bs-icon-primary svg {
fill: var(--bs-primary-bg-subtle);
}

29
data/services.json
View file

@ -3,6 +3,7 @@
{
"name": "Matrix",
"url": "https://element.private.coffee",
"homemade": false,
"short_description": "Matrix is an open network for secure, decentralized communication.",
"long_description": "Private.coffee runs a Matrix server. You can use it to chat with other people at Private.coffee or around the world. Use it with a client of your choice, or use our web clients.",
"status": "OK",
@ -29,6 +30,7 @@
{
"name": "CryptPad",
"url": "https://cryptpad.private.coffee",
"homemade": false,
"short_description": "Private, encrypted, real-time collaborative editor.",
"long_description": "CryptPad is a private, encrypted, zero-knowledge, realtime collaborative editor, similar to Google Docs and Office 365.",
"status": "OK",
@ -45,6 +47,7 @@
{
"name": "Piped / Invidious",
"url": "https://piped.private.coffee",
"homemade": false,
"short_description": "Watch YouTube videos without Google tracking.",
"long_description": "Piped and Invidious are alternative front-ends to YouTube. They allow you to watch YouTube videos without Google tracking you.",
"status": "OK",
@ -71,6 +74,7 @@
{
"name": "Transfer.coffee",
"url": "https://transfer.coffee",
"homemade": true,
"short_description": "Transfer files securely using peer-to-peer connections.",
"long_description": "Transfer.coffee allows you to transfer files securely using peer-to-peer connections. Your files are never stored on our servers.",
"status": "OK",
@ -87,6 +91,7 @@
{
"name": "MyIP.Coffee",
"url": "https://myip.coffee",
"homemade": true,
"short_description": "Check your IP address.",
"long_description": "MyIP.Coffee allows you to check your current IPv4 and IPv6 addresses.",
"status": "OK",
@ -103,6 +108,7 @@
{
"name": "Mastodon",
"url": "https://cuddly.space",
"homemade": false,
"short_description": "Mastodon is a decentralized social network.",
"long_description": "Mastodon is a decentralized social network. You can use it to post short messages, follow other people, and more.",
"status": "OK",
@ -123,6 +129,7 @@
{
"name": "Forgejo",
"url": "https://git.private.coffee",
"homemade": false,
"short_description": "Forgejo is our in-house Git forge.",
"long_description": "Forgejo is our in-house Git forge. You can use it to host your Git repositories, and to collaborate with others.",
"status": "OK",
@ -139,6 +146,7 @@
{
"name": "BigBlueButton",
"url": "https://bbb.private.coffee",
"homemade": false,
"short_description": "BigBlueButton is an open-source video conferencing system.",
"long_description": "BigBlueButton is an open-source video conferencing system. You can use it to hold video conferences, webinars, and more.",
"status": "OK",
@ -155,6 +163,7 @@
{
"name": "HedgeDoc",
"url": "https://hedgedoc.private.coffee",
"homemade": false,
"short_description": "HedgeDoc is an open-source collaborative markdown editor.",
"long_description": "HedgeDoc is an open-source collaborative markdown editor. You can use it to write and edit documents in markdown, and to collaborate with others.",
"status": "OK",
@ -171,6 +180,7 @@
{
"name": "FreshRSS",
"url": "https://freshrss.private.coffee",
"homemade": false,
"short_description": "FreshRSS is a RSS feed reader.",
"long_description": "FreshRSS is a RSS feed reader. You can use it to subscribe to RSS feeds and read the latest articles from your favorite websites.",
"status": "OK",
@ -187,6 +197,7 @@
{
"name": "redlib",
"url": "https://redlib.private.coffee",
"homemade": false,
"short_description": "redlib is a privacy-friendly alternative front-end to Reddit.",
"long_description": "redlib is a privacy-friendly alternative front-end to Reddit. It allows you to browse Reddit without being tracked.",
"status": "OK",
@ -203,6 +214,7 @@
{
"name": "AllTube",
"url": "https://alltube.private.coffee",
"homemade": false,
"short_description": "Download videos from YouTube, Vimeo, and more.",
"long_description": "AllTube is a video downloader powered by yt-dlp. It allows you to download videos from YouTube, Vimeo, and many other sites. You can also stream the download through our server for extra privacy.",
"status": "OK",
@ -219,6 +231,7 @@
{
"name": "Structables",
"url": "https://structables.private.coffee",
"homemade": true,
"short_description": "Browse Instructables without being tracked.",
"long_description": "Structables allows you to browse Instructables without being tracked.",
"status": "OK",
@ -235,6 +248,7 @@
{
"name": "Quetre",
"url": "https://quetre.private.coffee",
"homemade": false,
"short_description": "Quetre is a privacy-friendly alternative front-end to Quora.",
"long_description": "Quetre is a privacy-friendly alternative front-end to Quora. It allows you to browse Quora without being tracked or having to log in.",
"status": "OK",
@ -257,6 +271,7 @@
{
"name": "Wikimore",
"url": "https://wikimore.private.coffee",
"homemade": true,
"short_description": "Wikimore is a privacy-friendly alternative front-end to Wikimedia wikis.",
"long_description": "Wikimore is a privacy-friendly alternative front-end to Wikipedia and other Wikimedia wikis.",
"status": "OK",
@ -279,6 +294,7 @@
{
"name": "Priviblur",
"url": "https://priviblur.private.coffee",
"homemade": false,
"short_description": "Priviblur is a privacy-friendly alternative front-end to Tumblr.",
"long_description": "Priviblur is a privacy-friendly alternative front-end to Tumblr. It allows you to browse Tumblr without being tracked.",
"status": "OK",
@ -301,6 +317,7 @@
{
"name": "BiblioReads",
"url": "https://biblioreads.private.coffee",
"homemade": false,
"short_description": "BiblioReads is a privacy-friendly alternative front-end to Goodreads.",
"long_description": "BiblioReads is a privacy-friendly alternative front-end to Goodreads. It allows you to browse Goodreads without being tracked.",
"status": "OK",
@ -317,6 +334,7 @@
{
"name": "LibreTranslate",
"url": "https://translate.private.coffee",
"homemade": false,
"short_description": "LibreTranslate is a self-hosted translation service powered by Argos Translate.",
"long_description": "LibreTranslate is a self-hosted translation service powered by Argos Translate. It allows you to translate text between many languages.",
"status": "OK",
@ -333,6 +351,7 @@
{
"name": "wishthis",
"url": "https://wishthis.private.coffee",
"homemade": false,
"short_description": "wishthis is a service for creating wishlists.",
"long_description": "wishthis is a service for creating wishlists. You can use it to create wishlists for yourself, or to share them with others.",
"status": "OK",
@ -349,6 +368,7 @@
{
"name": "BreezeWiki",
"url": "https://breezewiki.private.coffee",
"homemade": false,
"short_description": "BreezeWiki is a privacy-friendly alternative front-end to Fandom.",
"long_description": "BreezeWiki is a privacy-friendly alternative front-end to Fandom. It allows you to browse Fandom wikis without ads or tracking.",
"status": "OK",
@ -371,6 +391,7 @@
{
"name": "NocoDB",
"url": "https://nocodb.private.coffee",
"homemade": false,
"short_description": "NocoDB is a self-hosted alternative to Airtable.",
"long_description": "NocoDB is a self-hosted alternative to Airtable. It allows you to create databases and tables, and to view and edit them in a spreadsheet-like interface. (Note: If you are unable to create tables upon registration, simply wait a minute or two, log out and then log in again. Note that your email address will be visible to all registered users!)",
"status": "OK",
@ -387,6 +408,7 @@
{
"name": "Penpot",
"url": "https://penpot.private.coffee",
"homemade": false,
"short_description": "Penpot is an open-source design and prototyping platform.",
"long_description": "Penpot is an open-source design and prototyping platform. It allows you to create designs and prototypes, and to collaborate with others.",
"status": "OK",
@ -403,6 +425,7 @@
{
"name": "YOURLS",
"url": "https://pcof.fi",
"homemade": false,
"short_description": "URL shortener for creating handy links.",
"long_description": "Use our URL shortener at pcof.fi to turn long, complicated URLs into something more handy.",
"status": "OK",
@ -419,6 +442,7 @@
{
"name": "Rallly",
"url": "https://rallly.private.coffee",
"homemade": false,
"short_description": "Rallly is a free collaborative scheduling service for voting and polls.",
"long_description": "Rallly is a free collaborative scheduling service. It allows you to create polls and vote on them, similar to Doodle. Pro features are enabled for free after signing in.",
"status": "OK",
@ -435,6 +459,7 @@
{
"name": "LibreY",
"url": "https://librey.private.coffee",
"homemade": false,
"short_description": "Privacy-friendly metasearch engine.",
"long_description": "LibreY is an open-source, privacy-friendly metasearch engine. It allows you to search for web, image, video, torrents, and more, and it can also search onion sites.",
"status": "OK",
@ -451,6 +476,7 @@
{
"name": "Overleaf",
"url": "https://overleaf.private.coffee",
"homemade": false,
"short_description": "Overleaf is an online LaTeX editor for writing and sharing documents.",
"long_description": "Overleaf is an online LaTeX editor for writing and sharing documents. It allows you to write documents in LaTeX, and to collaborate with others.",
"status": "OK",
@ -467,6 +493,7 @@
{
"name": "GotHub",
"url": "https://gothub.private.coffee",
"homemade": false,
"short_description": "Alternative GitHub interface that respects privacy.",
"long_description": "Gothub is an alternative GitHub interface that respects your privacy. It is currently in alpha, but you can browse and download repositories, and you can also clone them using git+https (although the text on the main page would disagree).",
"status": "OK",
@ -483,6 +510,7 @@
{
"name": "Binternet",
"url": "https://binternet.private.coffee",
"homemade": false,
"short_description": "Binternet is a privacy-friendly alternative front-end to Pinterest.",
"long_description": "Binternet is a privacy-friendly alternative front-end to Pinterest. It allows you to browse Pinterest without being tracked.",
"status": "OK",
@ -499,6 +527,7 @@
{
"name": "Overpass",
"url": "https://overpass.private.coffee",
"homemade": false,
"short_description": "Overpass is an API for OpenStreetMap.",
"long_description": "Overpass is an API for OpenStreetMap. You can use it to query OpenStreetMap data, and to get the results in various formats.",
"status": "OK",

37
templates/index.html
View file

@ -2,15 +2,26 @@
%}
<header class="bg-primary-gradient">
<div class="container pt-4 pt-xl-5 pb-4 pb-xl-5">
<div class="row gy-5 pt-5">
<div class="col-md-8 col-xl-6 text-center text-md-start mx-auto">
<div class="text-center">
<h2>Empowering Privacy with Open Source</h2>
</div>
<p class="text-center special-header fancy-text-primary mb-0" style="font-weight: 500;">Private.coffee</p>
</div>
<div class="col-12 col-lg-10 mx-auto justify-content-center d-flex"><img class="mx-auto" src="assets/img/logo-inv_grad.svg" style="max-width: 400px;width: 80vw;"></div>
<div class="row gy-5 pt-5">
<div class="col-md-8 col-xl-6 text-center text-md-start mx-auto">
<div class="text-center">
<h2>Empowering Privacy with Open Source</h2>
</div>
<p
class="text-center special-header fancy-text-primary mb-0"
style="font-weight: 500"
>
Private.coffee
</p>
</div>
<div class="col-12 col-lg-10 mx-auto justify-content-center d-flex">
<img
class="mx-auto"
src="assets/img/logo-inv_grad.svg"
style="max-width: 400px; width: 80vw"
/>
</div>
</div>
</div>
</header>
<section class="bg-white">
@ -38,8 +49,16 @@
<div
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
style="top: 1rem; right: 1rem; position: absolute"
title="{{ service.name }}"
>
{{ service.icon | icon | safe }}
{{ service.icon | icon | safe }} {% if service.homemade %}
<div
class="bs-icon-sm bs-icon-circle bs-icon-primary shadow d-flex flex-shrink-0 justify-content-center align-items-center d-inline-block bs-icon bs-icon-sm homemade"
title="Made by Private.coffee"
>
{{ "coffee" | icon | safe }}
</div>
{% endif %}
</div>
{% endif %}
<h5 class="fw-bold card-title">{{ service.name }}</h5>