sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

make services clickthrough for info
Some checks failed
/ build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Ruben 2025-10-28 23:24:36 -05:00
commit c746f1d669
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
4 changed files with 487 additions and 370 deletions
Download patch file Download diff file Expand all files Collapse all files

1
_includes/layouts/pages/index.njk
View file

@ -22,6 +22,7 @@
<p>Be kind to one another.</p> <p>Be kind to one another.</p>
<p>Who left this jar of RAM here?</p> <p>Who left this jar of RAM here?</p>
<p>The Game? What game?</p> <p>The Game? What game?</p>
<p>Sorry! Only <i>modern</i> HTML and CSS allowed!</p>
<p>beeeeeeeep</p> <p>beeeeeeeep</p>
<p>We think Herobrine might have been removed, but we're not so sure.</p> <p>We think Herobrine might have been removed, but we're not so sure.</p>
<p>Sorry for the downtime, we caught a Synth trying to eat the servers in the server room.</p> <p>Sorry for the downtime, we caught a Synth trying to eat the servers in the server room.</p>

751
_includes/layouts/pages/services/list.njk
View file

@ -1,350 +1,407 @@
<card-container> <card-container>
<card-entry redlib> <details redlib>
<h3> <summary>
<img icon src="/assets/icons/redlib.svg" alt=""> <h3>
Redlib <img icon src="/assets/icons/redlib.svg" alt="">
<span status> Redlib
<span><img src="https://status.synth.download/api/badge/19/status?style=flat-square" alt=""></span> <span status>
<icon-tabler cloud-network aria-label="Frontend"></icon-tabler> <img src="https://status.synth.download/api/badge/19/status?style=flat-square" alt="">
<icon-tabler planet aria-label="Public"></icon-tabler> <icon-tabler cloud-network aria-label="Frontend"></icon-tabler>
</span> <icon-tabler planet aria-label="Public"></icon-tabler>
</h3> </span>
<p desc>A privacy respecting frontend for <a href="https://reddit.com">Reddit</a>.</p> </h3>
<p warning><icon-tabler alert-triangle aria-label="Warning"></icon-tabler> This instance may be nonfunctional from time to time.</p> </summary>
<buttons-container> <details-content>
<a button href="https://reddit.synth.download" aria-label="Go"> <p desc>A privacy respecting frontend for <a href="https://reddit.com">Reddit</a>.</p>
<icon-tabler arrow-forward></icon-tabler> <p warning><icon-tabler alert-triangle aria-label="Warning"></icon-tabler> This instance may be nonfunctional from time to time.</p>
</a> <buttons-container>
<a button href="https://github.com/redlib-org/redlib" aria-label="Source"> <a button href="https://reddit.synth.download" aria-label="Go">
<icon-tabler brand-git></icon-tabler>
</a>
<a right button i2p href="http://synthoclokpnsxa2xloi5skskaltlbjjhpvadqrs7swz2vpqui4a.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://reddit.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://reddit.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry safetwitch>
<h3>
<img icon src="/assets/synth.download/icons/twitch.svg" alt="">
SafeTwitch
<span status>
<span><img src="https://status.synth.download/api/badge/21/status?style=flat-square" alt=""></span>
<icon-tabler cloud-network aria-label="Frontend"></icon-tabler>
<icon-tabler planet aria-label="Public"></icon-tabler>
</span>
</h3>
<p desc>A privacy respecting frontend for proxying and watching live <a href="https://twitch.com">Twitch</a> streams.</p>
<buttons-container>
<a button href="https://twitch.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://codeberg.org/safetwitch/safetwitch" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<a right button i2p href="http://synthj6e6xw3kjn2ipd3cmcvu5oic4znsvnjfisdd775wbp3xbqa.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://twitch.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://twitch.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry searxng>
<h3>
<img icon src="/assets/synth.download/icons/search.svg" alt="">
SearxNG
<span status>
<span><img src="https://status.synth.download/api/badge/20/status?style=flat-square" alt=""></span>
<icon-tabler search aria-label="Search"></icon-tabler>
<icon-tabler cloud-network aria-label="Frontend"></icon-tabler>
<icon-tabler planet aria-label="Public"></icon-tabler>
</span>
</h3>
<p desc><a href="https://en.wikipedia.org/wiki/Metasearch_engine">Metasearch engine</a> that retrieves web search results from multiple other search engines, while respecting user privacy.</p>
<buttons-container>
<a button href="https://searx.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://codeberg.org/safetwitch/safetwitch" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<a right button i2p href="http://synth5agr6rfgw2ff6vx2qnlcee7o2vryeyubgnbflukmaohdyda.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://searx.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://searx.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry sharkey>
<h3>
<img icon src="/assets/icons/sharkey.svg" alt="">
Sharkey
<span status>
<span><img src="https://status.synth.download/api/badge/1/status?style=flat-square" alt=""></span>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
<p desc>Advanced, fun, featureful and federated social media platform for the <a href="https://fediverse.info">Fediverse</a>. <small>Based on <a href="https://misskey-hub.net">Misskey</a>.</small></p>
<p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts are located at <span>@booping.synth.download</span></p>
<buttons-container>
<a button href="https://booping.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="/fediverse" aria-label="Information">
<icon-tabler info-circle></icon-tabler>
</a>
<a button href="https://activitypub.software/TransFem-org/Sharkey" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<a right button i2p href="http://synthn43gye7ymvv7y63ru6lisoephszczlnojqlkz5ltwv66mta.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://booping.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://booping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry mastodon>
<h3>
<img icon src="/assets/icons/mastodon.svg" alt="">
Mastodon
<span status>
<span><img src="https://status.synth.download/api/badge/5/status?style=flat-square" alt=""></span>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
<p desc>Traditional, Calmer, more Twitter-like and federated social media platform for the <a href="https://fediverse.info">Fediverse</a>. <small>Runs our own fork with added features.</small></p>
<p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts are located at <span>@merping.synth.download</span></p>
<buttons-container>
<a button href="https://merping.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="/fediverse" aria-label="Information">
<icon-tabler info-circle></icon-tabler>
</a>
<a button href="https://github.com/synth-download/mastodon" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<a right button i2p href="http://synthn43gye7ymvv7y63ru6lisoephszczlnojqlkz5ltwv66mta.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://merping.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://merping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry iceshrimp advise-against>
<h3>
<img icon src="/assets/icons/iceshrimp.svg" alt="">
Iceshrimp.NET
<span status>
<span><img src="https://status.synth.download/api/badge/9/status?style=flat-square" alt=""></span>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
<p desc>Lightweight, Misskey-inspired software for the <a href="https://fediverse.info">Fediverse</a>.</p>
<p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts are located at <span>@synth.download</span></p>
<p warning><icon-tabler alert-triangle aria-label="Warning"></icon-tabler> We currently do not suggest using this software. Sharkey and Mastodon provide better and more stable user experiences.</p>
<buttons-container>
<a button href="https://beeping.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler> <icon-tabler arrow-forward></icon-tabler>
</a> </a>
<a button href="/fediverse" aria-label="Information"> <a button href="https://github.com/redlib-org/redlib" aria-label="Source">
<icon-tabler info-circle></icon-tabler> <icon-tabler brand-git></icon-tabler>
</a> </a>
<a button href="https://iceshrimp.dev/iceshrimp/iceshrimp.net" aria-label="Source"> <a right button i2p href="http://synthoclokpnsxa2xloi5skskaltlbjjhpvadqrs7swz2vpqui4a.b32.i2p" aria-label="I2P">
<icon-tabler brand-git></icon-tabler> <icon-tabler vector></icon-tabler>
</a> </a>
<a right button i2p href="http://synthrfmxti7rfwfh4gg6n5qiwbt6x52qudys4hql6eafb6qexoa.b32.i2p" aria-label="I2P"> <a button yggdrasil href="http://reddit.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler vector></icon-tabler> <icon-tabler leaf></icon-tabler>
</a> </a>
<a button yggdrasil href="http://beeping.ygg.synth.download" aria-label="Yggdrasil"> <a button tor href="http://reddit.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler leaf></icon-tabler> <icon-tabler spiral></icon-tabler>
</a> </a>
<a button tor href="http://beeping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor"> </buttons-container>
<icon-tabler spiral></icon-tabler> </details-content>
</a> </details>
</buttons-container> <details safetwitch>
</card-entry> <summary>
<card-entry pds> <h3>
<h3> <img icon src="/assets/synth.download/icons/twitch.svg" alt="">
<img icon src="/assets/synth.download/icons/atproto.svg" alt=""> SafeTwitch
PDS <span status>
<span status> <img src="https://status.synth.download/api/badge/21/status?style=flat-square" alt="">
<span><img src="https://status.synth.download/api/badge/11/status?style=flat-square" alt=""></span> <icon-tabler cloud-network aria-label="Frontend"></icon-tabler>
<icon-tabler social aria-label="Social"></icon-tabler> <icon-tabler planet aria-label="Public"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler> </span>
</span> </h3>
</h3> </summary>
<p desc><b>P</b>ersonal <b>D</b>ata <b>S</b>erver, used to store your profile data and interact with applications in the <a href="https://atproto.com">Atmosphere</a>, such as <a href="https://bsky.app">Bluesky</a>.</p> <details-content>
<buttons-container> <p desc>A privacy respecting frontend for proxying and watching live <a href="https://twitch.com">Twitch</a> streams.</p>
<a button href="https://pds.synth.download" aria-label="Go"> <buttons-container>
<icon-tabler arrow-forward></icon-tabler> <a button href="https://twitch.synth.download" aria-label="Go">
</a> <icon-tabler arrow-forward></icon-tabler>
<a button href="https://github.com/bluesky-social/pds" aria-label="Source"> </a>
<icon-tabler brand-git></icon-tabler> <a button href="https://codeberg.org/safetwitch/safetwitch" aria-label="Source">
</a> <icon-tabler brand-git></icon-tabler>
</card-entry> </a>
<card-entry pl-fe> <a right button i2p href="http://synthj6e6xw3kjn2ipd3cmcvu5oic4znsvnjfisdd775wbp3xbqa.b32.i2p" aria-label="I2P">
<h3> <icon-tabler vector></icon-tabler>
<img icon src="/assets/synth.download/icons/pl-fe.svg" alt=""> </a>
pl-fe <a button yggdrasil href="http://twitch.ygg.synth.download" aria-label="Yggdrasil">
<span status> <icon-tabler leaf></icon-tabler>
<icon-tabler device-desktop-cog aria-label="Client-side service, serves as a client or frontend where all data is accessed and stored on the users device."></icon-tabler> </a>
<icon-tabler social aria-label="Social"></icon-tabler> <a button tor href="http://twitch.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler planet aria-label="Public"></icon-tabler> <icon-tabler spiral></icon-tabler>
</span> </a>
</h3> </buttons-container>
<p desc>General fediverse compatible client, using a baseline of the Mastodon API with extended support for more APIs and features from other softwares.</small></p> </details-content>
<buttons-container> </details>
<a button href="https://pl-fe.synth.download" aria-label="Go"> <details searxng>
<icon-tabler arrow-forward></icon-tabler> <summary>
</a> <h3>
<a button href="https://codeberg.org/mkljczk/pl-fe" aria-label="Source"> <img icon src="/assets/synth.download/icons/search.svg" alt="">
<icon-tabler brand-git></icon-tabler> SearxNG
</a> <span status>
</buttons-container> <img src="https://status.synth.download/api/badge/20/status?style=flat-square" alt="">
</card-entry> <icon-tabler search aria-label="Search"></icon-tabler>
<card-entry phanpy> <icon-tabler cloud-network aria-label="Frontend"></icon-tabler>
<h3> <icon-tabler planet aria-label="Public"></icon-tabler>
<img icon src="/assets/icons/phanpy.svg" alt=""> </span>
Phanpy </h3>
<span status> </summary>
<icon-tabler device-desktop-cog aria-label="Client-side service, serves as a client or frontend where all data is accessed and stored on the users device."></icon-tabler> <details-content>
<icon-tabler social aria-label="Social"></icon-tabler> <p desc><a href="https://en.wikipedia.org/wiki/Metasearch_engine">Metasearch engine</a> that retrieves web search results from multiple other search engines, while respecting user privacy.</p>
<icon-tabler planet aria-label="Public"></icon-tabler> <buttons-container>
</span> <a button href="https://searx.synth.download" aria-label="Go">
</h3> <icon-tabler arrow-forward></icon-tabler>
<p desc>Opinionated Mastodon-API compatible fediverse client. <small>Our own fork with improved support for extra features, such as emoji reactions.</small></p> </a>
<buttons-container> <a button href="https://codeberg.org/safetwitch/safetwitch" aria-label="Source">
<a button href="https://phanpy.synth.download" aria-label="Go"> <icon-tabler brand-git></icon-tabler>
<icon-tabler arrow-forward></icon-tabler> </a>
</a> <a right button i2p href="http://synth5agr6rfgw2ff6vx2qnlcee7o2vryeyubgnbflukmaohdyda.b32.i2p" aria-label="I2P">
<a button href="https://github.com/zenfyrdev/phanpy" aria-label="Source"> <icon-tabler vector></icon-tabler>
<icon-tabler brand-git></icon-tabler> </a>
</a> <a button yggdrasil href="http://searx.ygg.synth.download" aria-label="Yggdrasil">
</buttons-container> <icon-tabler leaf></icon-tabler>
</card-entry> </a>
<card-entry askjs> <a button tor href="http://searx.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<h3> <icon-tabler spiral></icon-tabler>
<img icon src="/assets/synth.download/icons/ask.svg" alt=""> </a>
AskJS </buttons-container>
<span status> </details-content>
<span><img src="https://status.synth.download/api/badge/16/status?style=flat-square" alt=""></span> </details>
<icon-tabler mood-smile aria-label="Fun"></icon-tabler> <details sharkey>
<icon-tabler social aria-label="Social"></icon-tabler> <summary>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler> <h3>
</span> <img icon src="/assets/icons/sharkey.svg" alt="">
</h3> Sharkey
<p desc>Anonymous asking site to ask users questions.</p> <span status>
<buttons-container> <img src="https://status.synth.download/api/badge/1/status?style=flat-square" alt="">
<a button href="https://asking.synth.download" aria-label="Go"> <icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler arrow-forward></icon-tabler> <icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</a> </span>
<a button href="https://github.com/ihateblueb/ask-js" aria-label="Source"> </h3>
<icon-tabler brand-git></icon-tabler> </summary>
</a> <details-content>
</buttons-container> <p desc>Advanced, fun, featureful and federated social media platform for the <a href="https://fediverse.info">Fediverse</a>. <small>Based on <a href="https://misskey-hub.net">Misskey</a>.</small></p>
</card-entry> <p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts are located at <span>@booping.synth.download</span></p>
<card-entry xmpp> <buttons-container>
<h3> <a button href="https://booping.synth.download" aria-label="Go">
<img icon src="/assets/icons/xmpp.svg" alt=""> <icon-tabler arrow-forward></icon-tabler>
XMPP </a>
<span status> <a button href="/fediverse" aria-label="Information">
<span><img src="https://status.synth.download/api/badge/13/status?style=flat-square" alt=""></span> <icon-tabler info-circle></icon-tabler>
<icon-tabler message aria-label="Chat"></icon-tabler> </a>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler> <a button href="https://activitypub.software/TransFem-org/Sharkey" aria-label="Source">
</span> <icon-tabler brand-git></icon-tabler>
</h3> </a>
<p desc>Our <a href="https://ejabberd.im">Ejabberd</a> server, for the <a href="https://xmpp.org">XMPP chat protocol</a>.</p> <a right button i2p href="http://synthn43gye7ymvv7y63ru6lisoephszczlnojqlkz5ltwv66mta.b32.i2p" aria-label="I2P">
<buttons-container> <icon-tabler vector></icon-tabler>
<a button href="https://github.com/processone/ejabberd" aria-label="Source"> </a>
<icon-tabler brand-git></icon-tabler> <a button yggdrasil href="http://booping.ygg.synth.download" aria-label="Yggdrasil">
</a> <icon-tabler leaf></icon-tabler>
<a href="https://compliance.conversations.im/server/synth.download"><img src="https://compliance.conversations.im/badge/synth.download" alt="XMPP Specifications compliance: 100%"></a> </a>
</buttons-container> <a button tor href="http://booping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
</card-entry> <icon-tabler spiral></icon-tabler>
<card-entry forgejo> </a>
<h3> </buttons-container>
<img icon src="/assets/icons/forgejo.svg" alt=""> </details-content>
Forgejo </details>
<span status> <details mastodon>
<span><img src="https://status.synth.download/api/badge/12/status?style=flat-square" alt=""></span> <summary>
<icon-tabler brand-git aria-label="Git"></icon-tabler> <h3>
<icon-tabler database-share aria-label="Sharing"></icon-tabler> <img icon src="/assets/icons/mastodon.svg" alt="">
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler> Mastodon
</span> <span status>
</h3> <img src="https://status.synth.download/api/badge/5/status?style=flat-square" alt="">
<p desc>Self-hosted Git forge for storing code repositories.</p> <icon-tabler social aria-label="Social"></icon-tabler>
<buttons-container> <icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
<a button href="https://forged.synth.download" aria-label="Go"> </span>
<icon-tabler arrow-forward></icon-tabler> </h3>
</a> </summary>
<a button href="https://codeberg.org/forgejo/forgejo" aria-label="Source"> <details-content>
<icon-tabler brand-git></icon-tabler> <p desc>Traditional, Calmer, more Twitter-like and federated social media platform for the <a href="https://fediverse.info">Fediverse</a>. <small>Runs our own fork with added features.</small></p>
</a> <p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts are located at <span>@merping.synth.download</span></p>
</buttons-container> <buttons-container>
</card-entry> <a button href="https://merping.synth.download" aria-label="Go">
<card-entry vaultwarden> <icon-tabler arrow-forward></icon-tabler>
<h3> </a>
<img icon src="/assets/icons/vaultwarden.svg" alt=""> <a button href="/fediverse" aria-label="Information">
Vaultwarden <icon-tabler info-circle></icon-tabler>
<span status> </a>
<span><img src="https://status.synth.download/api/badge/24/status?style=flat-square" alt=""></span> <a button href="https://github.com/synth-download/mastodon" aria-label="Source">
<icon-tabler user aria-label="Personal"></icon-tabler> <icon-tabler brand-git></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler> </a>
</span> <a right button i2p href="http://synthn43gye7ymvv7y63ru6lisoephszczlnojqlkz5ltwv66mta.b32.i2p" aria-label="I2P">
</h3> <icon-tabler vector></icon-tabler>
<p desc>A Bitwarden-compatible password manager, hosted by us.</p> </a>
<buttons-container> <a button yggdrasil href="http://merping.ygg.synth.download" aria-label="Yggdrasil">
<a button href="https://vault.synth.download" aria-label="Go"> <icon-tabler leaf></icon-tabler>
<icon-tabler arrow-forward></icon-tabler> </a>
</a> <a button tor href="http://merping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<a button href="https://github.com/dani-garcia/vaultwarden" aria-label="Source"> <icon-tabler spiral></icon-tabler>
<icon-tabler brand-git></icon-tabler> </a>
</a> </buttons-container>
</buttons-container> </details-content>
</card-entry> </details>
<card-entry freshrss> <details iceshrimp advise-against>
<h3> <summary>
<img icon src="/assets/icons/freshrss.svg" alt=""> <h3>
FreshRSS <img icon src="/assets/icons/iceshrimp.svg" alt="">
<span status> Iceshrimp.NET
<span><img src="https://status.synth.download/api/badge/15/status?style=flat-square" alt=""></span> <span status>
<icon-tabler user aria-label="Personal"></icon-tabler> <img src="https://status.synth.download/api/badge/9/status?style=flat-square" alt="">
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler> <icon-tabler social aria-label="Social"></icon-tabler>
</span> <icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</h3> </span>
<p desc>An online RSS reader and news aggregator.</p> </h3>
<buttons-container> </summary>
<a button href="https://rss.synth.download" aria-label="Go"> <details-content>
<icon-tabler arrow-forward></icon-tabler> <p desc>Lightweight, Misskey-inspired software for the <a href="https://fediverse.info">Fediverse</a>.</p>
</a> <p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts are located at <span>@synth.download</span></p>
<a button href="https://github.com/FreshRSS/FreshRSS" aria-label="Source"> <p warning><icon-tabler alert-triangle aria-label="Warning"></icon-tabler> We currently do not suggest using this software. Sharkey and Mastodon provide better and more stable user experiences.</p>
<icon-tabler brand-git></icon-tabler> <buttons-container>
</a> <a button href="https://beeping.synth.download" aria-label="Go">
</buttons-container> <icon-tabler arrow-forward></icon-tabler>
</card-entry> </a>
<a button href="/fediverse" aria-label="Information">
<icon-tabler info-circle></icon-tabler>
</a>
<a button href="https://iceshrimp.dev/iceshrimp/iceshrimp.net" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<a right button i2p href="http://synthrfmxti7rfwfh4gg6n5qiwbt6x52qudys4hql6eafb6qexoa.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://beeping.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://beeping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</details-content>
</details>
<details pds>
<summary>
<h3>
<img icon src="/assets/synth.download/icons/atproto.svg" alt="">
PDS
<span status>
<img src="https://status.synth.download/api/badge/11/status?style=flat-square" alt="">
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
</summary>
<details-content>
<p desc><b>P</b>ersonal <b>D</b>ata <b>S</b>erver, used to store your profile data and interact with applications in the <a href="https://atproto.com">Atmosphere</a>, such as <a href="https://bsky.app">Bluesky</a>.</p>
<buttons-container>
<a button href="https://pds.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/bluesky-social/pds" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
</buttons-container>
</details-content>
</details>
<details pl-fe>
<summary>
<h3>
<img icon src="/assets/synth.download/icons/pl-fe.svg" alt="">
pl-fe
<span status>
<icon-tabler device-desktop-cog aria-label="Client-side service, serves as a client or frontend where all data is accessed and stored on the users device."></icon-tabler>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler planet aria-label="Public"></icon-tabler>
</span>
</h3>
</summary>
<details-content>
<p desc>General fediverse compatible client, using a baseline of the Mastodon API with extended support for more APIs and features from other softwares.</small></p>
<buttons-container>
<a button href="https://pl-fe.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://codeberg.org/mkljczk/pl-fe" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
</buttons-container>
</details-content>
</details>
<details phanpy>
<summary>
<h3>
<img icon src="/assets/icons/phanpy.svg" alt="">
Phanpy
<span status>
<icon-tabler device-desktop-cog aria-label="Client-side service, serves as a client or frontend where all data is accessed and stored on the users device."></icon-tabler>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler planet aria-label="Public"></icon-tabler>
</span>
</h3>
</summary>
<details-content>
<p desc>Opinionated Mastodon-API compatible fediverse client. <small>Our own fork with improved support for extra features, such as emoji reactions.</small></p>
<buttons-container>
<a button href="https://phanpy.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/zenfyrdev/phanpy" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
</buttons-container>
</details-content>
</details>
<details askjs>
<summary>
<h3>
<img icon src="/assets/synth.download/icons/ask.svg" alt="">
AskJS
<span status>
<img src="https://status.synth.download/api/badge/16/status?style=flat-square" alt="">
<icon-tabler mood-smile aria-label="Fun"></icon-tabler>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
</summary>
<details-content>
<p desc>Anonymous asking site to ask users questions.</p>
<buttons-container>
<a button href="https://asking.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/ihateblueb/ask-js" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
</buttons-container>
</details-content>
</details>
<details xmpp>
<summary>
<h3>
<img icon src="/assets/icons/xmpp.svg" alt="">
XMPP
<span status>
<img src="https://status.synth.download/api/badge/13/status?style=flat-square" alt="">
<icon-tabler message aria-label="Chat"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
</summary>
<details-content>
<p desc>Our <a href="https://ejabberd.im">Ejabberd</a> server, for the <a href="https://xmpp.org">XMPP chat protocol</a>.</p>
<buttons-container>
<a button href="https://github.com/processone/ejabberd" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<a href="https://compliance.conversations.im/server/synth.download"><img src="https://compliance.conversations.im/badge/synth.download" alt="XMPP Specifications compliance: 100%"></a>
</buttons-container>
</details-content>
</details>
<details forgejo>
<summary>
<h3>
<img icon src="/assets/icons/forgejo.svg" alt="">
Forgejo
<span status>
<img src="https://status.synth.download/api/badge/12/status?style=flat-square" alt="">
<icon-tabler brand-git aria-label="Git"></icon-tabler>
<icon-tabler database-share aria-label="Sharing"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
</summary>
<details-content>
<p desc>Self-hosted Git forge for storing code repositories.</p>
<buttons-container>
<a button href="https://forged.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://codeberg.org/forgejo/forgejo" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
</buttons-container>
</details-content>
</details>
<details vaultwarden>
<summary>
<h3>
<img icon src="/assets/icons/vaultwarden.svg" alt="">
Vaultwarden
<span status>
<img src="https://status.synth.download/api/badge/24/status?style=flat-square" alt="">
<icon-tabler user aria-label="Personal"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
</summary>
<details-content>
<p desc>A Bitwarden-compatible password manager, hosted by us.</p>
<buttons-container>
<a button href="https://vault.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/dani-garcia/vaultwarden" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
</buttons-container>
</details-content>
</details>
<details freshrss>
<summary>
<h3>
<img icon src="/assets/icons/freshrss.svg" alt="">
FreshRSS
<span status>
<img src="https://status.synth.download/api/badge/15/status?style=flat-square" alt="">
<icon-tabler user aria-label="Personal"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
</summary>
<details-content>
<p desc>An online RSS reader and news aggregator.</p>
<buttons-container>
<a button href="https://rss.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/FreshRSS/FreshRSS" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
</buttons-container>
</details-content>
</details>
</card-container> </card-container>

45
_includes/styles/base/base.css
View file

@ -357,7 +357,9 @@ card-container {
display: grid; display: grid;
gap: 1.2rem; gap: 1.2rem;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
grid-template-rows: masonry;
/* regular card entries */
card-entry { card-entry {
background-color: var(--background-secondary); background-color: var(--background-secondary);
border-radius: 1rem; border-radius: 1rem;
@ -367,16 +369,54 @@ card-container {
height: auto; height: auto;
padding: .6rem; padding: .6rem;
width: auto; width: auto;
}
/* detail elements */
details {
background-color: var(--background-secondary);
border-radius: 1rem;
border: .15rem solid var(--border);
height: fit-content;
min-width: 19rem;
transition: .2s;
width: auto;
details-content {
display: block;
padding: .6rem;
}
summary {
border-radius: 1rem;
cursor: pointer;
outline: 0 solid var(--accent);
padding: .6rem;
transition: .3s;
&:hover { outline: .2rem solid var(--accent); }
&::marker { content: ""; }
h3 { margin: 0; padding-bottom: 0; }
}
&[open] {
border-color: color-mix(in srgb, var(--warning) 50%, transparent);
summary {
border-bottom: .15rem solid var(--border);
}
}
}
card-entry, details {
h3 { h3 {
border-bottom: unset; border-bottom: unset;
display: inline;
margin-bottom: 1rem; margin-bottom: 1rem;
margin-top: 0; margin-top: 0;
vertical-align: top;
[icon] { [icon] {
height: 1.4rem; height: 1.4rem;
transition: .3s; transition: .3s;
vertical-align: top; vertical-align: inherit;
} }
span[status] { span[status] {
@ -398,7 +438,6 @@ card-container {
align-self: center; align-self: center;
border-radius: 10rem; border-radius: 10rem;
height: 1.2rem; height: 1.2rem;
vertical-align: middle;
width: auto; width: auto;
} }
} }
@ -407,7 +446,7 @@ card-container {
&:hover { &:hover {
h3 { h3 {
[icon] { [icon] {
margin-right: .4rem; margin-right: .6rem;
transform: rotate(15deg) scale(2.5) translateX(-.1rem) translateY(-.2rem); transform: rotate(15deg) scale(2.5) translateX(-.1rem) translateY(-.2rem);
} }
} }

60
_includes/styles/pages/services.css
View file

@ -22,71 +22,91 @@ article#services {
/* frontends */ /* frontends */
&:not(:has(input#service-frontend:checked)) { &:not(:has(input#service-frontend:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[cloud-network]) { card-container card-entry, card-container details {
display: none; &:has(h3 span[status] icon-tabler[cloud-network]) {
display: none;
}
} }
} }
/* search */ /* search */
&:not(:has(input#service-search:checked)) { &:not(:has(input#service-search:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[search]) { card-container card-entry, card-container details {
display: none; &:has(h3 span[status] icon-tabler[search]) {
display: none;
}
} }
} }
/* social */ /* social */
&:not(:has(input#service-social:checked)) { &:not(:has(input#service-social:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[social]) { card-container card-entry, card-container details {
display: none; &:has(h3 span[status] icon-tabler[social]) {
display: none;
}
} }
} }
/* fun */ /* fun */
&:not(:has(input#service-fun:checked)) { &:not(:has(input#service-fun:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[mood-smile]) { card-container card-entry, card-container details {
display: none; &:has(h3 span[status] icon-tabler[mood-smile]) {
display: none;
}
} }
} }
/* chat */ /* chat */
&:not(:has(input#service-chat:checked)) { &:not(:has(input#service-chat:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[message]) { card-container card-entry, card-container details {
display: none; &:has(h3 span[status] icon-tabler[message]) {
display: none;
}
} }
} }
/* sharing */ /* sharing */
&:not(:has(input#service-sharing:checked)) { &:not(:has(input#service-sharing:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[database-share]) { card-container card-entry, card-container details {
display: none; &:has(h3 span[status] icon-tabler[database-share]) {
display: none;
}
} }
} }
/* git */ /* git */
&:not(:has(input#service-git:checked)) { &:not(:has(input#service-git:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[brand-git]) { card-container card-entry, card-container details {
display: none; &:has(h3 span[status] icon-tabler[brand-git]) {
display: none;
}
} }
} }
/* personal */ /* personal */
&:not(:has(input#service-personal:checked)) { &:not(:has(input#service-personal:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[user]) { card-container card-entry, card-container details {
display: none; &:has(h3 span[status] icon-tabler[user]) {
display: none;
}
} }
} }
/* public */ /* public */
&:not(:has(input#service-public:checked)) { &:not(:has(input#service-public:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[planet]) { card-container card-entry, card-container details {
display: none !important; &:has(h3 span[status] icon-tabler[planet]) {
display: none !important;
}
} }
} }
/* private */ /* private */
&:not(:has(input#service-private:checked)) { &:not(:has(input#service-private:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[lock]) { card-container card-entry, card-container details {
display: none !important; &:has(h3 span[status] icon-tabler[lock]) {
display: none !important;
}
} }
} }
} }