Merge branch 'main' of https://github.com/csarnataro/gitprofile into add-skype-and-telegram-to-social-links

src/components/details/index.jsx

@@ -16,12 +16,39 @@ import {
   FaFacebook,
   FaGlobe,
   FaSkype,
+  FaMastodon,
   FaStackOverflow,
   FaTelegram,
 } 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
@@ -36,27 +63,16 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
         className={`${
           skeleton ? 'flex-grow' : ''
         } text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`}
+        style={{
+          wordBreak: 'break-word',
+        }}
       >
-        <div
-          style={{
-            wordBreak: 'break-word',
-          }}
-        >
-          {value}
-        </div>
+        {value}
       </div>
     </a>
   );
 };
 
-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 = [];
@@ -116,6 +132,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" />}