Merge pull request #416 from arifszn/social-youtube

Add YouTube as social link

README.md

@@ -219,6 +219,7 @@ const config = {
     mastodon: '',
     facebook: '',
     instagram: '',
+    youtube: '',
     dribbble: '',
     behance: '',
     medium: '',
@@ -457,7 +458,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, Mastodon, Facebook, Instagram, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
+You can link your social media services you're using, including LinkedIn, Twitter, Mastodon, Facebook, Instagram, YouTube, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
 
 ```js
 // gitprofile.config.js
@@ -469,6 +470,7 @@ const config = {
     mastodon: 'arifszn@mastodon.social',
     facebook: '',
     instagram: '',
+    youtube: '',
     dribbble: '',
     behance: '',
     medium: '',

gitprofile.config.js

@@ -16,11 +16,12 @@ const config = {
     mastodon: 'arifszn@mastodon.social',
     facebook: '',
     instagram: '',
+    youtube: '', // example: 'pewdiepie'
     dribbble: '',
     behance: '',
     medium: 'arifszn',
     dev: 'arifszn',
-    stackoverflow: '', // format: userid/username
+    stackoverflow: '', // example: '1/jeff-atwood'
     skype: '',
     telegram: '',
     website: 'https://arifszn.com',

src/components/GitProfile.jsx

@@ -249,6 +249,7 @@ GitProfile.propTypes = {
       mastodon: PropTypes.string,
       facebook: PropTypes.string,
       instagram: PropTypes.string,
+      youtube: PropTypes.string,
       dribbble: PropTypes.string,
       behance: PropTypes.string,
       medium: PropTypes.string,

src/components/details/index.jsx

@@ -19,6 +19,7 @@ import {
   FaStackOverflow,
   FaTelegram,
   FaLinkedin,
+  FaYoutube,
 } from 'react-icons/fa';
 import PropTypes from 'prop-types';
 import { skeleton } from '../../helpers/utils';
@@ -173,6 +174,14 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://www.instagram.com/${social.instagram}`}
                 />
               )}
+              {social?.youtube && (
+                <ListItem
+                  icon={<FaYoutube />}
+                  title="YouTube:"
+                  value={`@${social.youtube}`}
+                  link={`https://www.youtube.com/@${social.youtube}`}
+                />
+              )}
               {social?.medium && (
                 <ListItem
                   icon={<AiFillMediumSquare />}

src/helpers/utils.jsx

@@ -150,6 +150,7 @@ export const sanitizeConfig = (config) => {
       mastodon: config?.social?.mastodon,
       facebook: config?.social?.facebook,
       instagram: config?.social?.instagram,
+      youtube: config?.social?.youtube,
       dribbble: config?.social?.dribbble,
       behance: config?.social?.behance,
       medium: config?.social?.medium,

types/index.d.ts

@@ -64,6 +64,11 @@ export interface Social {
    */
   instagram?: string;
 
+  /**
+   * YouTube
+   */
+  youtube?: string;
+
   /**
    * Dribbble
    */