Add Mastodon link support to BlogDiscussions

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"/>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yevi-org",
-  "version": "0.4.1",
+  "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 MatrixIcon = require('@site/static/icons/matrix.svg').default;
-  const Svg = 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" />
+        <MatrixIcon fill="currentColor" className={styles.icon} role="img" />
-        <span className={styles.linkText}>Join discussion at Matrix</span>
+        <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;
 }

src/pages/selfhosted-list.md

@@ -80,4 +80,6 @@ Services accessible only from my home network or Tailnet.
 
 ## Tools
 
-- Tailscale
+- Tailscale
+
+<BlogDiscussions />