From c91974514c317dea4f1bce3564b808e9708dce85 Mon Sep 17 00:00:00 2001 From: Christian Sarnataro Date: Fri, 30 Dec 2022 16:58:12 +0100 Subject: [PATCH 1/4] 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 + +``` + ### 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 && ( + } + title="Mastodon:" + value={social.mastodon} + link={`https://${social.mastodon}`} + /> + )} {social?.linkedin && ( } 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, From f38bbafb2dd05507eebcefddb5d75dcb1a5cc323 Mon Sep 17 00:00:00 2001 From: Christian Sarnataro Date: Fri, 10 Feb 2023 23:44:35 +0100 Subject: [PATCH 2/4] Removed 'verification link' instructions from README --- README.md | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/README.md b/README.md index 9cd7c65..ee8b786 100644 --- a/README.md +++ b/README.md @@ -466,18 +466,6 @@ 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 - -``` - ### Skills To showcase your skills provide them here. From 1229633a778c7ae76473eff279c41d73e654ec2e Mon Sep 17 00:00:00 2001 From: Ariful Alam Date: Tue, 14 Feb 2023 21:06:07 +0600 Subject: [PATCH 3/4] Allow different formats of Mastodon link --- README.md | 5 +++-- gitprofile.config.js | 2 +- src/components/details/index.jsx | 38 +++++++++++++++++++++++--------- 3 files changed, 32 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index ee8b786..7eacb4d 100644 --- a/README.md +++ b/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: '', @@ -451,7 +452,7 @@ module.exports = { social: { linkedin: 'ariful-alam', twitter: 'arif_szn', - mastodon: 'mastodon-server/@arifszn', + mastodon: '', facebook: '', instagram: '', dribbble: '', diff --git a/gitprofile.config.js b/gitprofile.config.js index fec3902..c843ff8 100644 --- a/gitprofile.config.js +++ b/gitprofile.config.js @@ -13,7 +13,7 @@ const config = { social: { linkedin: 'ariful-alam', twitter: 'arif_szn', - mastodon: 'mastodon.social/@arifszn', // format: mastodon-server/@username + mastodon: '', facebook: '', instagram: '', dribbble: '', diff --git a/src/components/details/index.jsx b/src/components/details/index.jsx index 2fd0d59..97303bb 100644 --- a/src/components/details/index.jsx +++ b/src/components/details/index.jsx @@ -21,6 +21,32 @@ import { 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 ( { ); }; -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 = []; @@ -119,8 +137,8 @@ const Details = ({ profile, loading, social, github }) => { } title="Mastodon:" - value={social.mastodon} - link={`https://${social.mastodon}`} + value={getMastodonValue(social.mastodon)} + link={getMastodonLink(social.mastodon)} /> )} {social?.linkedin && ( From 2c9700d47ef696fe0b9f4325997173ed4a7606de Mon Sep 17 00:00:00 2001 From: Ariful Alam Date: Tue, 14 Feb 2023 21:07:59 +0600 Subject: [PATCH 4/4] Add missing prop type for Mastodon --- src/components/GitProfile.jsx | 1 + types/index.d.ts | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/src/components/GitProfile.jsx b/src/components/GitProfile.jsx index 93b7630..2189022 100644 --- a/src/components/GitProfile.jsx +++ b/src/components/GitProfile.jsx @@ -263,6 +263,7 @@ GitProfile.propTypes = { social: PropTypes.shape({ linkedin: PropTypes.string, twitter: PropTypes.string, + mastodon: PropTypes.string, facebook: PropTypes.string, instagram: PropTypes.string, dribbble: PropTypes.string, diff --git a/types/index.d.ts b/types/index.d.ts index e8b4482..6a1c09d 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -49,6 +49,11 @@ export interface Social { */ twitter?: string; + /** + * Mastodon + */ + mastodon?: string; + /** * Facebook */