Merge pull request #581 from Programer3/feat-Social_links_add

Add social links - Reddit, Threads, Udemy

README.md

@@ -150,6 +150,8 @@ As this is a Vite project, you can also host your website to Netlify, Vercel, He
 
 All the magic happens in the file `gitprofile.config.ts`. Open it and modify it according to your preference.
 
+You can leave most of the sections empty if you don't want to display them on your portfolio.
+
 ```ts
 // gitprofile.config.ts
 
@@ -216,7 +218,10 @@ const CONFIG = {
     researchGate: '',
     facebook: '',
     instagram: '',
+    reddit: '',
+    threads: '',
     youtube: '', // example: 'pewdiepie'
+    udemy: '',
     dribbble: '',
     behance: '',
     medium: 'arifszn',
@@ -289,13 +294,22 @@ const CONFIG = {
   publications: [
     {
       title: 'Publication Title',
-      conferenceName: 'Conference Name',
+      conferenceName: '',
       journalName: 'Journal Name',
       authors: 'John Doe, Jane Smith',
       link: 'https://example.com',
       description:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
     },
+    {
+      title: 'Publication Title',
+      conferenceName: 'Conference Name',
+      journalName: '',
+      authors: 'John Doe, Jane Smith',
+      link: 'https://example.com',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+    },
   ],
   // Display articles from your medium or dev account. (Optional)
   blog: {
@@ -413,7 +427,17 @@ You can create your own custom theme by modifying these values. Theme `procyon`
 ```ts
 // gitprofile.config.ts
 const CONFIG = {
-  // ...
+  /**
+   * Defines the custom theme colors and styles for the application.
+   * The theme includes the following properties:
+   * - `primary`: The primary color used throughout the application.
+   * - `secondary`: The secondary color used for accents and highlights.
+   * - `accent`: The accent color used for special elements.
+   * - `neutral`: The neutral color used for backgrounds and text.
+   * - `base-100`: The base background color.
+   * - `--rounded-box`: The border radius for boxes and containers.
+   * - `--rounded-btn`: The border radius for buttons.
+   */
   themeConfig: {
     customTheme: {
       primary: '#fc055b',
@@ -424,7 +448,6 @@ const CONFIG = {
       '--rounded-box': '3rem',
       '--rounded-btn': '3rem',
     },
-    // ...
   },
 };
 ```
@@ -438,7 +461,7 @@ const CONFIG = {
 const CONFIG = {
   // ...
   googleAnalytics: {
-    id: '',
+    id: 'G-XXXXXXXXX',
   },
 };
 ```
@@ -488,7 +511,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, ResearchGate, Facebook, Instagram, YouTube, 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, ResearchGate, Facebook, Instagram, Reddit, Threads, YouTube, Udemy, Dribbble, Behance, Medium, dev, Stack Overflow, Skype, Telegram, personal website, phone and email.
 
 ```ts
 // gitprofile.config.ts
@@ -501,7 +524,10 @@ const CONFIG = {
     researchGate: '',
     facebook: '',
     instagram: '',
+    reddit: '',
+    threads: '',
     youtube: '',
+    udemy: '',
     dribbble: '',
     behance: '',
     medium: '',

gitprofile.config.ts

@@ -63,7 +63,10 @@ const CONFIG = {
     researchGate: '',
     facebook: '',
     instagram: '',
+    reddit: '',
+    threads: '',
     youtube: '', // example: 'pewdiepie'
+    udemy: '',
     dribbble: '',
     behance: '',
     medium: 'arifszn',

global.d.ts

@@ -137,11 +137,26 @@ interface Social {
    */
   instagram?: string;
 
+  /**
+   * Reddit
+   */
+  reddit?: string;
+
+  /**
+   * Threads
+   */
+  threads?: string;
+
   /**
    * YouTube
    */
   youtube?: string;
 
+  /**
+   * Udemy
+   */
+  udemy?: string;
+
   /**
    * Dribbble
    */

src/components/details-card/index.tsx

@@ -1,32 +1,34 @@
-import { MdLocationOn } from 'react-icons/md';
+import { Fragment } from 'react';
 import {
   AiFillGithub,
   AiFillInstagram,
   AiFillMediumSquare,
 } from 'react-icons/ai';
-import { SiTwitter, SiResearchgate } from 'react-icons/si';
 import { CgDribbble } from 'react-icons/cg';
-import { RiPhoneFill, RiMailFill } from 'react-icons/ri';
-import { Fragment } from 'react';
 import {
   FaBehanceSquare,
   FaBuilding,
   FaDev,
   FaFacebook,
   FaGlobe,
-  FaSkype,
+  FaLinkedin,
   FaMastodon,
+  FaReddit,
+  FaSkype,
   FaStackOverflow,
   FaTelegram,
-  FaLinkedin,
   FaYoutube,
 } from 'react-icons/fa';
-import { skeleton } from '../../utils';
+import { FaSquareThreads } from 'react-icons/fa6';
+import { MdLocationOn } from 'react-icons/md';
+import { RiMailFill, RiPhoneFill } from 'react-icons/ri';
+import { SiResearchgate, SiTwitter, SiUdemy } from 'react-icons/si';
 import { Profile } from '../../interfaces/profile';
 import {
   SanitizedGithub,
   SanitizedSocial,
 } from '../../interfaces/sanitized-config';
+import { skeleton } from '../../utils';
 
 type Props = {
   profile: Profile | null;
@@ -211,6 +213,22 @@ const DetailsCard = ({ profile, loading, social, github }: Props) => {
                   link={`https://www.instagram.com/${social.instagram}`}
                 />
               )}
+              {social?.reddit && (
+                <ListItem
+                  icon={<FaReddit />}
+                  title="Reddit:"
+                  value={social.reddit}
+                  link={`https://www.reddit.com/user/${social.reddit}`}
+                />
+              )}
+              {social?.threads && (
+                <ListItem
+                  icon={<FaSquareThreads />}
+                  title="Threads:"
+                  value={social.threads}
+                  link={`https://www.threads.net/@${social.threads.replace('@', '')}`}
+                />
+              )}
               {social?.youtube && (
                 <ListItem
                   icon={<FaYoutube />}
@@ -219,6 +237,14 @@ const DetailsCard = ({ profile, loading, social, github }: Props) => {
                   link={`https://www.youtube.com/@${social.youtube}`}
                 />
               )}
+              {social?.udemy && (
+                <ListItem
+                  icon={<SiUdemy />}
+                  title="Udemy:"
+                  value={social.udemy}
+                  link={`https://www.udemy.com/user/${social.udemy}`}
+                />
+              )}
               {social?.medium && (
                 <ListItem
                   icon={<AiFillMediumSquare />}

src/interfaces/sanitized-config.tsx

@@ -49,7 +49,10 @@ export interface SanitizedSocial {
   researchGate?: string;
   facebook?: string;
   instagram?: string;
+  reddit?: string;
+  threads?: string;
   youtube?: string;
+  udemy?: string;
   dribbble?: string;
   behance?: string;
   medium?: string;

src/utils/index.tsx

@@ -1,13 +1,13 @@
+import { hotjar } from 'react-hotjar';
 import { LOCAL_STORAGE_KEY_NAME } from '../constants';
 import { DEFAULT_CUSTOM_THEME } from '../constants/default-custom-theme';
 import { DEFAULT_THEMES } from '../constants/default-themes';
+import colors from '../data/colors.json';
 import {
   SanitizedConfig,
   SanitizedHotjar,
   SanitizedThemeConfig,
 } from '../interfaces/sanitized-config';
-import { hotjar } from 'react-hotjar';
-import colors from '../data/colors.json';
 
 export const isDarkishTheme = (appliedTheme: string): boolean => {
   return ['dark', 'halloween', 'forest', 'black', 'luxury', 'dracula'].includes(
@@ -66,7 +66,10 @@ export const getSanitizedConfig = (
         mastodon: config?.social?.mastodon,
         facebook: config?.social?.facebook,
         instagram: config?.social?.instagram,
+        reddit: config?.social?.reddit,
+        threads: config?.social?.threads,
         youtube: config?.social?.youtube,
+        udemy: config?.social?.udemy,
         dribbble: config?.social?.dribbble,
         behance: config?.social?.behance,
         medium: config?.social?.medium,