Fix spacing

blog/2025-10-07-proxmox-ve-on-hetzner-dedicated-server/index.md

@@ -184,4 +184,4 @@ Have no idea why everyone wants to write a conclusion for each post nowadays. It
 
 Have a nice tinkering.
 
-<BlogDiscussions/>
+<BlogDiscussions mastodonLink="https://techhub.social/@estevez/115332360350515438"/>

docusaurus.config.js

@@ -99,6 +99,7 @@ const config = {
         },
         items: [
           { to: '/blog', label: 'Blog', position: 'left' },
+          { to: '/selfhosted-list', label: 'Self-hosted List', position: 'left' },
         ],
       },
       footer: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yevi-org",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

src/components/BlogDiscussions/index.js

@@ -1,16 +1,30 @@
 import styles from './styles.module.css';
 
-export default function BlogDiscussions() {
-  const Svg = require('@site/static/icons/matrix.svg').default;
+const MatrixIcon = require('@site/static/icons/matrix.svg').default;
+
+const MastodonIcon = require('@site/static/icons/mastodon.svg').default;
+
+export default function BlogDiscussions({ mastodonLink }) {
+
+
+
 
   return (
     <section className={styles.blogDiscussions}>
 
       <a className={styles.blogDiscussions_container} href="https://matrix.to/#/%23yevi-org-pub:vi.place" target='_blank'>
-        <Svg fill="currentColor" className={styles.icon} role="img" />
-        <span className={styles.linkText}>Join discussion at Matrix</span>
+        <MatrixIcon fill="currentColor" className={styles.icon} role="img" />
+        <span className={styles.linkText}>Discuss on Matrix</span>
       </a>
 
+      {mastodonLink ? (
+        <a className={styles.blogDiscussions_container} href={mastodonLink} target='_blank'>
+          <MastodonIcon fill="currentColor" className={styles.icon} role="img" />
+          <span className={styles.linkText}>Discuss on Mastodon</span>
+        </a>
+      ) : (
+        null
+      )}
     </section>
   );
 }

src/components/BlogDiscussions/styles.module.css

@@ -1,14 +1,15 @@
 .blogDiscussions {
   display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
   padding: 1rem 0;
 }
 
 .blogDiscussions_container {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   justify-content: center;
   align-items: center;
 }
@@ -18,10 +19,11 @@
 }
 
 .icon {
-  width: 3rem;
-  height: 3rem;
+  width: 2rem;
+  height: 2rem;
+  padding-right: 0.5rem;
 }
 
 .icon path {
-  fill: var(--ifm-link-color) !important;
+  fill: var(--ifm-heading-color) !important;
 }

src/css/custom.css

@@ -11,13 +11,14 @@
   --ifm-color-primary-darker: #471947;
   --ifm-color-primary-darkest: #3b143b;
   --ifm-color-primary-light: #3b143b;
-  --ifm-color-primary-lighter: #612161;
-  --ifm-color-primary-lightest: #6d266d;
+  --ifm-color-primary-lighter: #712471;
+  --ifm-color-primary-lightest: #9d389d;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-footer-link-hover-color: #b07ab0;
   --ifm-link-color: var(--ifm-color-primary-lightest);
   --ifm-global-shadow-lw: 0 1px 2px 0 #541d5428;
+  --ifm-heading-color: #575757;
 }
 
 .hero--primary {
@@ -36,8 +37,14 @@
   --ifm-color-primary-lightest: #d1b2d1;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
   --ifm-link-color: var(--ifm-color-primary-darker);
+  --ifm-heading-color: #919191;
 }
 
-.hero {
-  border-bottom: 2px solid var(--ifm-color-primary-opaque-2);
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+  color: var(--ifm-heading-color) !important;
 }

src/pages/selfhosted-list.md

@@ -0,0 +1,102 @@
+---
+title: Self-hosted List
+description: A list of services I'm currently hosting for myself, family and friends
+---
+
+A list of services I'm currently hosting for myself, family and friends. Grouped by access levels and sorted by gut feeling.
+
+## Publicly accessible
+
+Services anyone on the internet can access.
+
+### This website (Docusaurus)
+[Service](https://www.yevi.org) | [Product](https://docusaurus.io)
+
+This static site generator is mainly designed for documentation, but has a blog feature, pages, Markdown, and MDX support. When I decided to leave Ghost behind for something database-less, Markdown-ish, and stored in git, I checked different similar projects, like Hugo, for example. Docusaurus had the cleanest documentation, nicest look, and a very detailed example of a working website once you set it up. Keep it up, Docusaurus!
+
+### Gitea
+[Service](https://git.nicelycomposed.codes) | [Product](https://about.gitea.com)
+
+When I decided to self-host a Git server, GitLab was the first option I tried, as it was familiar to me from my day job. I launched it on an old Intel NUC with only 2 GB of memory... And started to search for lighter alternatives. So here I am with a Gitea instance that hosts my old repositories from GitHub, as well as a lot of private repos with different stuff. Gitea is fast, lightweight, single-binary, and has everything I need, including GitHub-compatible CI/CD.
+
+## Restricted
+
+Services exposed to the internet, but require authorization.
+
+### Plausible Analytics
+[Product](https://plausible.io)
+
+Google Analytics was my one-stop service for a long time, but it slowly enshittified into a huge, overcomplicated pile of pages and graphs you can hardly understand. Lack of fine documentation and constant requests to a user to migrate, fix, review, or reconfigure something didn't add any comfort in using it, while "Easy to use and privacy-friendly Google Analytics alternative" became more and more popular Google Search request.
+[Umami](https://umami.is) was the first thing I tried. It was almost perfect service for my needs until I faced the need to use API calls to send events from my pet project app. So now I'm with Plausible, and it looks like it is here to stay.
+
+### Plane
+[Product](https://plane.so/project-management)
+
+The only service I'm not happy with, but still using. Plane is slowly evolving into Jira. They even launched their own Confluence recently. While it is still a good project management software, I need something simpler for my needs. And there are some alternatives, but I have my pet-project tickets in Plane, and the migration will be a painful manual job. I'm not ready for this yet.
+
+### Kan.bn
+[Product](https://kan.bn)
+
+It is a simple but very nice kanban board. I'm not sure I will replace Plane with it, but I'm using it now as a personal to-do list. And for my homelab stuff, I'll never finish.
+
+### Outline
+[Product](https://www.getoutline.com)
+
+Need to store personal notes, family recipes, or a team’s knowledge base? Get an Outline in any of those cases and in other cases as well. The thing is so simple yet powerful and nice looking, I recommend setting it up even if you think you don't need it. As a bonus, mobile UI feels like a native app. My dream note-taking and knowledge-holding software looks and feels like Outline, has its collaboration features, but stores all notes locally like Obsidian does. For offline access at any time. Did you find something like this yet? Or maybe developing right now? No? Then I'll stick to the Outline for now.
+
+### Yamtrack
+[Product](https://github.com/FuzzyGrim/Yamtrack)
+
+Not that I have a bad memory. It's just a way to know what to watch next, and track things just because you can. Tracking TV shows, for example, becomes especially relevant after COVID and author strikes, when the pauses between some shows' seasons stretched to 3-5 years.  I was a Trakt VIP user for a considerable amount of time. And before that, I checked several self-hosted alternatives, and they were all raw, ugly, and unstable. Now Yamtrack looks and feels like a polished product, so there is no reason to pay for Trakt left.
+
+### AdventureLog
+[Product](https://adventurelog.app)
+
+I liked the idea of Google location history very much. You were able to see routes you traveled and photos you took. After degoogling, all I had as a travel log was a map with all my photos. In Synology Photos at first, and in iCloud after. I also tried to use OwnTracks. Even extracted my past travels from my photos' GPS data and imported them there, but that was just lines and points with no context or additional information.  I didn't even think that there was such a wonderful thing as AdventureLog. Locations, trips, stats, and more! You can log your travels as detailed as you wish and even plan future ones. Logging adventures from the past is a manual process, but it's a nice way to review and recall all the places you were and all the adventures you had.
+
+### Authentik
+[Product](https://goauthentik.io)
+
+There are two types of documentation. Actually, three, but the third one is a documentation absence. The first type wants you to feel like a smart person. It is clean, detailed, and up to date. The second type wants you to suffer and feel miserable. When I was choosing an identity provider for my self-hosting services, I picked Authentik because I like to feel smart.
+
+### Synapse
+[Matrix](https://matrix.org) | [Element](https://element.io)
+
+Synapse is a Matrix server. Matrix is a protocol specification of a decentralised communication platform. But Synapse developed my Element. Element is an organisation that... well, it's complicated. Also, while hosting a Matrix server is not a trivial task, it's the most exciting thing to host. Because come on! It's a chat platform with video calls support, mobile and desktop apps, web clients, and end-to-end encryption! It's not just a web app with a single user - you. Something is continuously happening on the server; it consumes resources, connects to other similar servers, breaks when misconfigured, and makes your life engaging. The hardest part is to lure your friends and family, though.
+
+### Other
+- **Matrix Authentication Service**
+- **Home Assistant**
+- **Plex**
+- **n8n**
+- **FreshRSS**
+
+## Internal
+
+Services accessible only from my home network or Tailnet.
+
+- Zoraxy
+- Caddy
+- Grafana
+- Prometheus
+- InfuxDB
+- Dockge
+- Studio Code Server
+- Gitea Action Runner
+- Element Admin
+- Sonarr
+- Radarr
+- Prowlarr
+- qBittorrent
+- Proxmox Backup Server
+
+## Operating Systems
+
+- TrueNAS Community Edition
+- Proxmox VE
+
+## Tools
+
+- Tailscale
+
+<BlogDiscussions />