From c91974514c317dea4f1bce3564b808e9708dce85 Mon Sep 17 00:00:00 2001
From: Christian Sarnataro <c.sarnataro@arduino.cc>
Date: Fri, 30 Dec 2022 16:58:12 +0100
Subject: [PATCH] Added Mastodon social link

Added a configuration for Mastodon social, updated the list of social link.
Updated README accordingly.
---
 README.md                        | 15 ++++++++++++++-
 gitprofile.config.js             |  1 +
 src/components/details/index.jsx |  9 +++++++++
 src/helpers/utils.jsx            |  1 +
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2426de2..36e0c88 100644
--- a/README.md
+++ b/README.md
@@ -425,7 +425,7 @@ Your avatar and bio will be fetched from GitHub automatically.
 
 ### Social Links
 
-You can link your social media services you're using, including LinkedIn, Twitter, Facebook, Instagram, Dribbble, Behance, Medium, dev, Stack Overflow, personal website, phone and email.
+You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, Facebook, Instagram, Dribbble, Behance, Medium, dev, Stack Overflow, personal website, phone and email.
 
 ```js
 // gitprofile.config.js
@@ -434,6 +434,7 @@ module.exports = {
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
+    mastodon: 'mastodon-server/@arifszn',
     facebook: '',
     instagram: '',
     dribbble: '',
@@ -448,6 +449,18 @@ module.exports = {
 };
 ```
 
+In case you need to implement the Mastodon verification link, you can add it directly in the `index.html` file.
+
+E.g. you could add a footer section right before the closing `body` tag:
+
+```html
+<footer style="position: fixed; bottom: 0; color: transparent;">
+  <a rel="me" href="https://mastodon-server/@username"
+    >Mastodon verification link</a
+  >
+</footer>
+```
+
 ### Skills
 
 To showcase your skills provide them here.
diff --git a/gitprofile.config.js b/gitprofile.config.js
index 4e1afc7..b16adf5 100644
--- a/gitprofile.config.js
+++ b/gitprofile.config.js
@@ -13,6 +13,7 @@ const config = {
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
+    mastodon: 'mastodon.social/@arifszn', // format: mastodon-server/@username
     facebook: '',
     instagram: '',
     dribbble: '',
diff --git a/src/components/details/index.jsx b/src/components/details/index.jsx
index d84144a..2fd0d59 100644
--- a/src/components/details/index.jsx
+++ b/src/components/details/index.jsx
@@ -15,6 +15,7 @@ import {
   FaDev,
   FaFacebook,
   FaGlobe,
+  FaMastodon,
   FaStackOverflow,
 } from 'react-icons/fa';
 import PropTypes from 'prop-types';
@@ -114,6 +115,14 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://twitter.com/${social.twitter}`}
                 />
               )}
+              {social?.mastodon && (
+                <ListItem
+                  icon={<FaMastodon className="mr-2" />}
+                  title="Mastodon:"
+                  value={social.mastodon}
+                  link={`https://${social.mastodon}`}
+                />
+              )}
               {social?.linkedin && (
                 <ListItem
                   icon={<GrLinkedinOption className="mr-2" />}
diff --git a/src/helpers/utils.jsx b/src/helpers/utils.jsx
index e4fa356..9a853fb 100644
--- a/src/helpers/utils.jsx
+++ b/src/helpers/utils.jsx
@@ -147,6 +147,7 @@ export const sanitizeConfig = (config) => {
     social: {
       linkedin: config?.social?.linkedin,
       twitter: config?.social?.twitter,
+      mastodon: config?.social?.mastodon,
       facebook: config?.social?.facebook,
       instagram: config?.social?.instagram,
       dribbble: config?.social?.dribbble,