Add Mastodon link support to BlogDiscussions

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;
 }