Merge branch 'dev'

assets/css/base.css

@@ -37,6 +37,10 @@
   color: #fff;
 }
 
+.button-wrapper:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
 .btn-outline-primary {
   --bs-btn-color: #f570b9;
   --bs-btn-border-color: #f570b9;
@@ -120,8 +124,9 @@ h5 {
 }
 
 .homemade {
-  top: -0.5rem;
   right: -0.5rem;
+  height: 1.5rem;
+  width: 1.5rem;
   position: absolute;
 }
 
@@ -273,3 +278,48 @@ h5 {
   text-decoration: none;
   color: black;
 }
+
+/* Accordion Styles */
+
+.accordion {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
+
+.accordion-item {
+  border-bottom: 1px solid #ddd;
+}
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+  cursor: pointer;
+  background-color: #f9f9f9;
+  font-size: 1.25rem;
+  font-weight: bold;
+  border-bottom: 1px solid #ddd;
+}
+
+.accordion-header:hover {
+  background-color: #e9e9e9;
+}
+
+.icon-container {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.bs-icon {
+  position: relative;
+}
+
+.accordion-body {
+  padding: 1rem;
+  display: none;
+}
+
+.accordion-item[open] .accordion-body {
+  display: block;
+}

data/services.json

@@ -4,6 +4,7 @@
             "name": "Matrix",
             "url": "https://element.private.coffee",
             "homemade": false,
+            "tiny_description": "decentralized messaging",
             "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",
@@ -31,6 +32,7 @@
             "name": "CryptPad",
             "url": "https://cryptpad.private.coffee",
             "homemade": false,
+            "tiny_description": "collaborative document editing",
             "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",
@@ -48,6 +50,7 @@
             "name": "Piped / Invidious",
             "url": "https://piped.private.coffee",
             "homemade": false,
+            "tiny_description": "tracking-free YouTube",
             "short_description": "Watch YouTube videos without Google tracking.",
             "long_description": "Piped and Invidious are alternative front-ends to YouTube. Unfortunately, they are under attack from Google, and may be slow or unavailable at times.",
             "status": "NOK",
@@ -75,6 +78,7 @@
             "name": "Transfer.coffee",
             "url": "https://transfer.coffee",
             "homemade": true,
+            "tiny_description": "secure direct file transfer",
             "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",
@@ -92,6 +96,7 @@
             "name": "MyIP.Coffee",
             "url": "https://myip.coffee",
             "homemade": true,
+            "tiny_description": "check your IP address",
             "short_description": "Check your IP address.",
             "long_description": "MyIP.Coffee allows you to check your current IPv4 and IPv6 addresses.",
             "status": "OK",
@@ -109,6 +114,7 @@
             "name": "Overleaf",
             "url": "https://overleaf.private.coffee",
             "homemade": false,
+            "tiny_description": "collaborative LaTeX editor",
             "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",
@@ -126,6 +132,7 @@
             "name": "Mastodon",
             "url": "https://cuddly.space",
             "homemade": false,
+            "tiny_description": "decentralized social network",
             "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. Registrations are open to everyone on Cuddly Space.",
             "status": "OK",
@@ -147,6 +154,7 @@
             "name": "Forgejo",
             "url": "https://git.private.coffee",
             "homemade": false,
+            "tiny_description": "self-hosted Git forge",
             "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",
@@ -164,6 +172,7 @@
             "name": "BigBlueButton",
             "url": "https://bbb.private.coffee",
             "homemade": false,
+            "tiny_description": "video conferencing",
             "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",
@@ -181,6 +190,7 @@
             "name": "HedgeDoc",
             "url": "https://hedgedoc.private.coffee",
             "homemade": false,
+            "tiny_description": "collaborative markdown editor",
             "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",
@@ -198,6 +208,7 @@
             "name": "FacilMap",
             "url": "https://facilmap.private.coffee",
             "homemade": false,
+            "tiny_description": "open-source map editor",
             "short_description": "FacilMap is an open-source map editor.",
             "long_description": "FacilMap is an open-source map editor. You can use it to create and edit maps, and to share them with others.",
             "status": "OK",
@@ -215,6 +226,7 @@
             "name": "OTS - One Time Secrets",
             "url": "https://ots.private.coffee",
             "homemade": false,
+            "tiny_description": "share secrets securely",
             "short_description": "OTS is a service for sharing secrets securely.",
             "long_description": "OTS is a service for sharing secrets securely. You can use it to share passwords, API keys, and other sensitive information.",
             "status": "OK",
@@ -232,6 +244,7 @@
             "name": "FreshRSS",
             "url": "https://freshrss.private.coffee",
             "homemade": false,
+            "tiny_description": "RSS feed reader",
             "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",
@@ -249,6 +262,7 @@
             "name": "redlib",
             "url": "https://redlib.private.coffee",
             "homemade": false,
+            "tiny_description": "tracking-free Reddit",
             "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",
@@ -266,6 +280,7 @@
             "name": "AllTube",
             "url": "https://alltube.private.coffee",
             "homemade": false,
+            "tiny_description": "universal video downloader",
             "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",
@@ -283,6 +298,7 @@
             "name": "Structables",
             "url": "https://structables.private.coffee",
             "homemade": true,
+            "tiny_description": "tracking-free Instructables",
             "short_description": "Browse Instructables without being tracked.",
             "long_description": "Structables allows you to browse Instructables without being tracked.",
             "status": "OK",
@@ -300,6 +316,7 @@
             "name": "Quetre",
             "url": "https://quetre.private.coffee",
             "homemade": false,
+            "tiny_description": "tracking-free Quora",
             "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",
@@ -323,6 +340,7 @@
             "name": "Wikimore",
             "url": "https://wikimore.private.coffee",
             "homemade": true,
+            "tiny_description": "censorship-free Wikipedia",
             "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",
@@ -346,6 +364,7 @@
             "name": "Priviblur",
             "url": "https://priviblur.private.coffee",
             "homemade": false,
+            "tiny_description": "tracking-free Tumblr",
             "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",
@@ -369,6 +388,7 @@
             "name": "BiblioReads",
             "url": "https://biblioreads.private.coffee",
             "homemade": false,
+            "tiny_description": "tracking-free Goodreads",
             "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",
@@ -386,6 +406,7 @@
             "name": "LibreTranslate",
             "url": "https://translate.private.coffee",
             "homemade": false,
+            "tiny_description": "self-hosted translation",
             "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",
@@ -403,7 +424,8 @@
             "name": "wishthis",
             "url": "https://wishthis.private.coffee",
             "homemade": false,
-            "short_description": "wishthis is a service for creating wishlists.",
+            "tiny_description": "create and share wishlists",
+            "short_description": "wishthis is a service for creating and sharing 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",
             "links": [
@@ -420,6 +442,7 @@
             "name": "BreezeWiki",
             "url": "https://breezewiki.private.coffee",
             "homemade": false,
+            "tiny_description": "tracking-free Fandom",
             "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",
@@ -443,6 +466,7 @@
             "name": "NocoDB",
             "url": "https://nocodb.private.coffee",
             "homemade": false,
+            "tiny_description": "Airtable alternative",
             "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",
@@ -460,6 +484,7 @@
             "name": "Penpot",
             "url": "https://penpot.private.coffee",
             "homemade": false,
+            "tiny_description": "open-source design platform",
             "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",
@@ -470,13 +495,14 @@
                 }
             ],
             "icon": "pencil-ruler",
-            "exclude_from_index": false,
+            "exclude_from_index": true,
-            "exclude_from_simple": false
+            "exclude_from_simple": true
         },
         {
             "name": "tldraw",
             "url": "https://tldraw.private.coffee",
             "homemade": false,
+            "tiny_description": "collaborative whiteboard",
             "short_description": "tldraw is a collaborative whiteboard.",
             "long_description": "tldraw is a collaborative whiteboard. You can use it to draw and write with others in real-time.",
             "status": "OK",
@@ -494,6 +520,7 @@
             "name": "YOURLS",
             "url": "https://pcof.fi",
             "homemade": false,
+            "tiny_description": "URL shortener",
             "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",
@@ -511,6 +538,7 @@
             "name": "Rallly",
             "url": "https://rallly.private.coffee",
             "homemade": false,
+            "tiny_description": "collaborative scheduling (Doodle)",
             "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",
@@ -528,6 +556,7 @@
             "name": "LibreY",
             "url": "https://librey.private.coffee",
             "homemade": false,
+            "tiny_description": "search engine",
             "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",
@@ -555,6 +584,7 @@
             "name": "GotHub",
             "url": "https://gothub.private.coffee",
             "homemade": false,
+            "tiny_description": "tracking-free GitHub",
             "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",
@@ -572,6 +602,7 @@
             "name": "Binternet",
             "url": "https://binternet.private.coffee",
             "homemade": false,
+            "tiny_description": "tracking-free Pinterest",
             "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",
@@ -589,6 +620,7 @@
             "name": "Overpass",
             "url": "https://overpass.private.coffee",
             "homemade": false,
+            "tiny_description": "OpenStreetMap API",
             "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",
@@ -606,6 +638,7 @@
             "name": "nocdnbs",
             "url": "https://nocdnbs.private.coffee",
             "homemade": true,
+            "tiny_description": "privacy-friendly cdnjs proxy",
             "short_description": "nocdnbs is a privacy-friendly proxy to cdnjs.cloudflare.com",
             "long_description": "nocdnbs is a privacy-friendly proxy to cdnjs.cloudflare.com. It allows you to use the cdnjs.cloudflare.com library without being tracked by Cloudflare.",
             "status": "OK",
@@ -623,6 +656,7 @@
             "name": "nobsdelivr",
             "url": "https://nobsdelivr.private.coffee",
             "homemade": true,
+            "tiny_description": "privacy-friendly jsDelivr proxy",
             "short_description": "nobsdelivr is a privacy-friendly proxy to cdn.jsdelivr.net",
             "long_description": "nobsdelivr is a privacy-friendly proxy to cdn.jsdelivr.net. It allows you to use the cdn.jsdelivr.net library without being tracked by jsDelivr.",
             "status": "OK",

templates/index.html

@@ -36,22 +36,20 @@
       </div>
     </div>
     <div class="py-5 p-lg-5">
-      <div
+      <div class="accordion">
-        class="row row-cols-1 row-cols-md-2 row-cols-lg-3 mx-auto"
-        style="max-width: 1200px"
-      >
         {% for service in services.services %} {% if not
         service.exclude_from_index %}
-        <div class="col mb-5">
+        <details class="accordion-item">
-          <div class="card shadow-sm">
+          <summary class="accordion-header">
-            <div class="card-body px-4 py-5 px-md-5">
             {% if service.icon %}
             <div
-                class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
+              class="bs-icon-lg d-flex justify-content-center align-items-center bs-icon"
-                style="top: 1rem; right: 1rem; position: absolute"
               title="{{ service.name }}"
             >
-                {{ service.icon | icon | safe }} {% if service.homemade %}
+              {{ service.icon | icon | safe }}
+            </div>
+            {% endif %} {{ service.name }}{% if service.tiny_description %} - {{
+            service.tiny_description }}{% endif %} {% 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"
@@ -59,18 +57,15 @@
               {{ "coffee" | icon | safe }}
             </div>
             {% endif %}
-              </div>
+          </summary>
-              {% endif %}
+          <div class="accordion-body">
-              <h5 class="fw-bold card-title">{{ service.name }}</h5>
             <p class="text-muted card-text mb-4">
               {{ service.long_description }}
             </p>
             {% for link in service.links %} {% if link.alternatives %}
-              <div class="dropdown">
+            <div class="button-wrapper dropdown">
               <div class="btn btn-primary shadow">
-                  <a class="main-link" href="{{ link.url }}">
+                <a class="main-link" href="{{ link.url }}">{{ link.name }}</a>
-                    {{ link.name }}
-                  </a>
                 <div class="dropdown-toggle-area">&#9660;</div>
               </div>
               <div class="dropdown-content">
@@ -81,14 +76,13 @@
             </div>
             {% else %}
             <a
-                class="btn btn-primary shadow w-100 text-center"
+              class="button-wrapper btn btn-primary shadow w-100 text-center"
               href="{{ link.url }}"
               >{{ link.name }}</a
             >
             {% endif %} {% endfor %}
           </div>
-          </div>
+        </details>
-        </div>
         {% endif %} {% endfor %}
       </div>
     </div>