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

README.md

@@ -213,13 +213,14 @@ const config = {
   social: {
     linkedin: '',
     twitter: '',
+    mastodon: '',
     facebook: '',
     instagram: '',
     dribbble: '',
     behance: '',
     medium: '',
     dev: '',
-    stackoverflow: '',
+    stackoverflow: '', // format: userid/username
     website: '',
     skype: '',
     telegram: '',
@@ -358,6 +359,9 @@ const config = {
       '--rounded-btn': '3rem',
     },
   },
+
+  // Optional Footer. Supports plain text or HTML.
+  footer: `Copyright © 2023 John Doe`,
 };
 ```
 
@@ -369,7 +373,7 @@ The default theme can be specified.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   themeConfig: {
     defaultTheme: 'light',
@@ -386,7 +390,7 @@ You can create your own custom theme by modifying these values. Theme `procyon`
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   themeConfig: {
     customTheme: {
@@ -409,7 +413,7 @@ module.exports = {
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   googleAnalytics: {
     id: '',
@@ -425,7 +429,7 @@ Besides tracking visitors, it will track `click events` on projects and blog pos
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   hotjar: {
     id: '',
@@ -444,15 +448,16 @@ 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, Skype, Telegram, 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, Skype, Telegram, personal website, phone and email.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
+    mastodon: '',
     facebook: '',
     instagram: '',
     dribbble: '',
@@ -475,7 +480,7 @@ To showcase your skills provide them here.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   skills: ['JavaScript', 'React.js'],
 };
@@ -489,7 +494,7 @@ Provide your job history in `experiences`.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   experiences: [
     {
@@ -518,7 +523,7 @@ Provide your education history in `education`.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   education: [
     {
@@ -545,7 +550,7 @@ Provide your industry certifications in `certifications`.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   certifications: [
     {
@@ -568,7 +573,7 @@ Your public repo from GitHub will be displayed in the `Github Projects` section
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   github: {
     username: 'arifszn',
@@ -588,7 +593,7 @@ In this section you can showcase your external/personal projects.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   externalProjects: [
     {
@@ -607,7 +612,7 @@ If you have [medium](https://medium.com) or [dev](https://dev.to) account, you c
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   blog: {
     source: 'dev',

gitprofile.config.js

@@ -13,6 +13,7 @@ const config = {
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
+    mastodon: '',
     facebook: '',
     instagram: '',
     dribbble: '',
@@ -102,7 +103,6 @@ const config = {
       link: 'https://example.com',
     },
   ],
-
   // Display blog posts from your medium or dev account. (Optional)
   blog: {
     source: 'dev', // medium | dev
@@ -118,7 +118,7 @@ const config = {
     snippetVersion: 6,
   },
   themeConfig: {
-    defaultTheme: 'business',
+    defaultTheme: 'winter',
 
     // Hides the switch in the navbar
     // Useful if you want to support a single color mode
@@ -176,6 +176,13 @@ const config = {
       '--rounded-btn': '3rem',
     },
   },
+
+  // Optional Footer. Supports plain text or HTML.
+  footer: `Made with <a 
+      class="text-primary" href="https://github.com/arifszn/gitprofile"
+      target="_blank"
+      rel="noreferrer"
+    >GitProfile</a> and ❤️`,
 };
 
 export default config;

src/components/GitProfile.jsx

@@ -11,6 +11,7 @@ import Certification from './certification';
 import Education from './education';
 import Project from './project';
 import Blog from './blog';
+import Footer from './footer';
 import {
   genericError,
   getInitialTheme,
@@ -19,7 +20,6 @@ import {
   setupHotjar,
   tooManyRequestError,
   sanitizeConfig,
-  skeleton,
 } from '../helpers/utils';
 import { HelmetProvider } from 'react-helmet-async';
 import PropTypes from 'prop-types';
@@ -221,24 +221,7 @@ const GitProfile = ({ config }) => {
                 className={`p-4 footer ${bgColor} text-base-content footer-center`}
               >
                 <div className="card compact bg-base-100 shadow">
-                  <a
+                  <Footer content={sanitizedConfig.footer} loading={loading} />
-                    className="card-body"
-                    href="https://github.com/arifszn/gitprofile"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <div>
-                      {loading ? (
-                        skeleton({ width: 'w-52', height: 'h-6' })
-                      ) : (
-                        <p className="font-mono text-sm">
-                          Made with{' '}
-                          <span className="text-primary">GitProfile</span> and
-                          ❤️
-                        </p>
-                      )}
-                    </div>
-                  </a>
                 </div>
               </footer>
             </Fragment>
@@ -263,6 +246,7 @@ GitProfile.propTypes = {
     social: PropTypes.shape({
       linkedin: PropTypes.string,
       twitter: PropTypes.string,
+      mastodon: PropTypes.string,
       facebook: PropTypes.string,
       instagram: PropTypes.string,
       dribbble: PropTypes.string,
@@ -274,6 +258,9 @@ GitProfile.propTypes = {
       phone: PropTypes.string,
       email: PropTypes.string,
     }),
+    resume: PropTypes.shape({
+      fileUrl: PropTypes.string,
+    }),
     skills: PropTypes.array,
     externalProjects: PropTypes.arrayOf(
       PropTypes.shape({
@@ -335,6 +322,7 @@ GitProfile.propTypes = {
         '--rounded-btn': PropTypes.string,
       }),
     }),
+    footer: PropTypes.string,
   }).isRequired,
 };
 

src/components/blog/index.jsx

@@ -183,7 +183,7 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
               <div
                 className={`card compact bg-base-100 ${
                   loading || (articles && articles.length)
-                    ? 'card compact shadow bg-opacity-40'
+                    ? 'shadow bg-opacity-40'
                     : 'shadow-lg'
                 }`}
               >

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
+        {value}
-          style={{
-            wordBreak: 'break-word',
-          }}
-        >
-          {value}
-        </div>
       </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" />}

src/components/external-project/index.jsx

@@ -134,7 +134,7 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
         <div className="col-span-1 lg:col-span-2">
           <div className="grid grid-cols-2 gap-6">
             <div className="col-span-2">
-              <div className="card compact bg-gradient-to-br to-base-200 from-base-100 shadow">
+              <div className="card compact bg-base-100 shadow bg-opacity-40">
                 <div className="card-body">
                   <div className="mx-3 flex items-center justify-between mb-2">
                     <h5 className="card-title">

src/components/footer/index.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+
+import { skeleton } from '../../helpers/utils';
+
+const Footer = ({ content, loading }) => {
+  if (!content) return null;
+
+  return (
+    <div className="card-body">
+      {loading ? (
+        skeleton({ width: 'w-52', height: 'h-6' })
+      ) : (
+        <div dangerouslySetInnerHTML={{ __html: content }} />
+      )}
+    </div>
+  );
+};
+
+Footer.propTypes = {
+  content: PropTypes.string,
+  loading: PropTypes.bool.isRequired,
+};
+
+export default Footer;

src/components/project/index.jsx

@@ -96,7 +96,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
               {item.description}
             </p>
           </div>
-          <div className="flex justify-between text-sm text-base-content text-opacity-60">
+          <div className="flex justify-between text-sm text-base-content text-opacity-60 truncate">
             <div className="flex flex-grow">
               <span className="mr-3 flex items-center">
                 <AiOutlineStar className="mr-0.5" />
@@ -146,7 +146,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
                       href={`https://github.com/${github.username}?tab=repositories`}
                       target="_blank"
                       rel="noreferrer"
-                      className="text-base-content opacity-50"
+                      className="text-base-content opacity-50 hover:underline"
                     >
                       See All
                     </a>

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,
@@ -189,6 +190,7 @@ export const sanitizeConfig = (config) => {
       themes: themes,
       customTheme: customTheme,
     },
+    footer: config?.footer,
   };
 };
 
@@ -210,7 +212,7 @@ export const tooManyRequestError = (reset) => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          rate limit.
+          rate limit
         </a>
         ! Try again later{` ${reset}`}.
       </p>

types/index.d.ts

@@ -49,6 +49,11 @@ export interface Social {
    */
   twitter?: string;
 
+  /**
+   * Mastodon
+   */
+  mastodon?: string;
+
   /**
    * Facebook
    */
@@ -299,6 +304,11 @@ export interface Config {
    * Theme config
    */
   themeConfig?: ThemeConfig;
+
+  /**
+   * Custom footer
+   */
+  footer?: string;
 }
 
 export interface GitProfileProps {