Merge pull request #227 from knittl/226-social-stackexchange

Allow users to link their Stack Overflow profile #226

README.md

@@ -218,6 +218,7 @@ const config = {
     behance: '',
     medium: '',
     dev: '',
+    stackoverflow: '',
     website: '',
     phone: '',
     email: '',
@@ -415,7 +416,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, personal website, phone and email.
+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.
 
 ```js
 // gitprofile.config.js
@@ -430,6 +431,7 @@ module.exports = {
     behance: '',
     medium: '',
     dev: '',
+    stackoverflow: '',
     website: '',
     phone: '',
     email: '',

gitprofile.config.js

@@ -19,6 +19,7 @@ const config = {
     behance: '',
     medium: 'arifszn',
     dev: 'arifszn',
+    stackoverflow: '', // format: userid/username
     website: 'https://arifszn.github.io',
     phone: '',
     email: 'arifulalamszn@gmail.com',

src/components/GitProfile.jsx

@@ -258,6 +258,7 @@ GitProfile.propTypes = {
       behance: PropTypes.string,
       medium: PropTypes.string,
       dev: PropTypes.string,
+      stackoverflow: PropTypes.string,
       website: PropTypes.string,
       phone: PropTypes.string,
       email: PropTypes.string,

src/components/details/index.jsx

@@ -15,6 +15,7 @@ import {
   FaDev,
   FaFacebook,
   FaGlobe,
+  FaStackOverflow,
 } from 'react-icons/fa';
 import PropTypes from 'prop-types';
 import { skeleton } from '../../helpers/utils';
@@ -169,6 +170,14 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://dev.to/${social.dev}`}
                 />
               )}
+              {social?.stackoverflow && (
+                <ListItem
+                  icon={<FaStackOverflow className="mr-2" />}
+                  title="Stack Overflow:"
+                  value={social.stackoverflow.split('/').slice(-1)}
+                  link={`https://stackoverflow.com/users/${social.stackoverflow}`}
+                />
+              )}
               {social?.website && (
                 <ListItem
                   icon={<FaGlobe className="mr-2" />}

src/helpers/utils.jsx

@@ -153,6 +153,7 @@ export const sanitizeConfig = (config) => {
       behance: config?.social?.behance,
       medium: config?.social?.medium,
       dev: config?.social?.dev,
+      stackoverflow: config?.social?.stackoverflow,
       website: config?.social?.website,
       phone: config?.social?.phone,
       email: config?.social?.email,

types/index.d.ts

@@ -79,6 +79,11 @@ export interface Social {
    */
   dev?: string;
 
+  /**
+   * Stack Overflow
+   */
+  stackoverflow?: string;
+
   /**
    * Website
    */