Merge pull request #266 from csarnataro/add-mastodon-to-social-links

Added Mastodon social link

README.md

@@ -213,13 +213,14 @@ const config = {
   social: {
     linkedin: '',
     twitter: '',
+    mastodon: '',
     facebook: '',
     instagram: '',
     dribbble: '',
     behance: '',
     medium: '',
     dev: '',
-    stackoverflow: '',
+    stackoverflow: '', // format: userid/username
     website: '',
     phone: '',
     email: '',
@@ -445,7 +446,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
@@ -454,6 +455,7 @@ const config = {
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
+    mastodon: '',
     facebook: '',
     instagram: '',
     dribbble: '',

gitprofile.config.js

@@ -13,6 +13,7 @@ const config = {
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
+    mastodon: '',
     facebook: '',
     instagram: '',
     dribbble: '',

src/components/GitProfile.jsx

@@ -246,6 +246,7 @@ GitProfile.propTypes = {
     social: PropTypes.shape({
       linkedin: PropTypes.string,
       twitter: PropTypes.string,
+      mastodon: PropTypes.string,
       facebook: PropTypes.string,
       instagram: PropTypes.string,
       dribbble: PropTypes.string,

src/components/details/index.jsx

@@ -15,11 +15,38 @@ import {
   FaDev,
   FaFacebook,
   FaGlobe,
+  FaMastodon,
   FaStackOverflow,
 } from 'react-icons/fa';
 import PropTypes from 'prop-types';
 import { skeleton } from '../../helpers/utils';
 
+const isCompanyMention = (company) => {
+  return company.startsWith('@') && !company.includes(' ');
+};
+
+const companyLink = (company) => {
+  return `https://github.com/${company.substring(1)}`;
+};
+
+const getMastodonValue = (mastodonURL) => {
+  const regex = /(https?:\/\/)?(www\.)?([^\s/]+)\/@(\w+)/;
+
+  const match = mastodonURL.match(regex);
+
+  if (match) {
+    const domain = match[3];
+    const username = match[4];
+    return `${domain}/@${username}`;
+  }
+
+  return mastodonURL;
+};
+
+const getMastodonLink = (mastodonURL) => {
+  return mastodonURL.replace(/^(https?:\/\/)?(www\.)?/, 'https://');
+};
+
 const ListItem = ({ icon, title, value, link, skeleton = false }) => {
   return (
     <a
@@ -44,14 +71,6 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
   );
 };
 
-const isCompanyMention = (company) => {
-  return company.startsWith('@') && !company.includes(' ');
-};
-
-const companyLink = (company) => {
-  return `https://github.com/${company.substring(1)}`;
-};
-
 const Details = ({ profile, loading, social, github }) => {
   const renderSkeleton = () => {
     let array = [];
@@ -111,6 +130,14 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://twitter.com/${social.twitter}`}
                 />
               )}
+              {social?.mastodon && (
+                <ListItem
+                  icon={<FaMastodon className="mr-2" />}
+                  title="Mastodon:"
+                  value={getMastodonValue(social.mastodon)}
+                  link={getMastodonLink(social.mastodon)}
+                />
+              )}
               {social?.linkedin && (
                 <ListItem
                   icon={<GrLinkedinOption className="mr-2" />}

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,

types/index.d.ts

@@ -49,6 +49,11 @@ export interface Social {
    */
   twitter?: string;
 
+  /**
+   * Mastodon
+   */
+  mastodon?: string;
+
   /**
    * Facebook
    */