Merge pull request #395 from arifszn/2.5.0

Version 2.5.0

.github/workflows/deploy.yml

@@ -29,7 +29,7 @@ jobs:
           cache: 'npm'
 
       - name: Setup Pages
-        uses: actions/configure-pages@v2
+        uses: actions/configure-pages@v3
 
       - name: Restore cache
         uses: actions/cache@v3
@@ -58,4 +58,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1.2.3
+        uses: actions/deploy-pages@v1.2.4

README.md

@@ -64,6 +64,7 @@
 ✓ [Google Analytics](#google-analytics)  
 ✓ [Hotjar](#hotjar)  
 ✓ [SEO](#seo)  
+✓ [PWA](#pwa)  
 ✓ [Avatar and Bio](#avatar-and-bio)  
 ✓ [Social Links](#social-links)  
 ✓ [Skill Section](#skills)  
@@ -81,11 +82,11 @@ Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
   <img src="https://arifszn.github.io/assets/img/hosted/gitprofile/themes.png" alt="Themes">
 </p>
 
-## 🎉 Thank you for the 500 ★
+## 🎉 Thank you for the 800 ★
 
 <p>
   <a href="https://arifszn.github.io/gitprofile">
-    <img src="https://user-images.githubusercontent.com/45073703/202119579-eae272bd-ed39-434d-9361-df25308e0691.gif" alt="Thank You" width="50%"/>
+    <img src="https://github.com/arifszn/gitprofile/assets/45073703/b3d34d17-cf55-4c74-bf44-3196b1f0ac66" alt="Thank You" width="50%"/>
   </a>
 </p>
 
@@ -93,9 +94,9 @@ Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
 
 There are three ways to use **GitProfile**. Use any.
 
-- Forking this repo _(recommended)_
-- Setting up locally
-- Installing as package
+- [Forking this repo _(recommended)_](#forking-this-repo)
+- [Setting up locally](#setting-up-locally)
+- [Installing as package](#installing-as-package)
 
 ### Forking this repo
 
@@ -104,7 +105,7 @@ These instructions will get you a copy of the project and deploy your portfolio
 - **Fork repo:** Click [here](https://github.com/arifszn/gitprofile/fork) to fork the repo so you have your own project to customize. A "fork" is a copy of a repository.
 - **Rename repo:**
   - If you want to host your portfolio at `https://<USERNAME>.github.io`, rename your forked repository to `username.github.io` in GitHub, where `username` is your GitHub username (or organization name).
-  - If you want to host your portfolio at `https://<USERNAME>.github.io/<REPO>` (e.g. `https://<USERNAME>.github.io/portfolio`), rename your forked repository to `<REPO>` (e.g. `portfolio`) in GitHub.
+  - If you want to host your portfolio at `https://<USERNAME>.github.io/<REPO_NAME>` (e.g. `https://<USERNAME>.github.io/portfolio`), rename your forked repository to `<REPO_NAME>` (e.g. `portfolio`) in GitHub.
 - **Enable workflows:** Go to your repo's **Actions** tab and enable workflows.
 
   ![Workflows](https://arifszn.github.io/assets/img/hosted/gitprofile/workflows.png)
@@ -113,7 +114,7 @@ These instructions will get you a copy of the project and deploy your portfolio
 
   - If you are deploying to `https://<USERNAME>.github.io`, set `base` to `'/'`.
 
-  - If you are deploying to `https://<USERNAME>.github.io/<REPO>` (e.g. `https://<USERNAME>.github.io/portfolio`), then set `base` to `'/<REPO>/'` (e.g. `'/portfolio/'`).
+  - If you are deploying to `https://<USERNAME>.github.io/<REPO_NAME>` (e.g. `https://<USERNAME>.github.io/portfolio`), then set `base` to `'/<REPO_NAME>/'` (e.g. `'/portfolio/'`).
 
   ```js
   // vite.config.js
@@ -156,7 +157,9 @@ As this is a Vite project, you can also host your website to Netlify, Vercel, He
 
 ### Installing as package
 
-You can also use **GitProfile** by installing as an NPM package. First Install **GitProfile** via <a href="https://www.npmjs.com/package/@arifszn/gitprofile">NPM</a>.
+You can also use **GitProfile** by installing as an NPM package.
+
+First Install **GitProfile** via <a href="https://www.npmjs.com/package/@arifszn/gitprofile">NPM</a>.
 
 ```sh
 npm install @arifszn/gitprofile
@@ -213,14 +216,17 @@ const config = {
   social: {
     linkedin: '',
     twitter: '',
+    mastodon: '',
     facebook: '',
     instagram: '',
     dribbble: '',
     behance: '',
     medium: '',
     dev: '',
-    stackoverflow: '',
+    stackoverflow: '', // format: userid/username
     website: '',
+    skype: '',
+    telegram: '',
     phone: '',
     email: '',
   },
@@ -439,13 +445,19 @@ const config = {
 
 Meta tags will be auto-generated from configs dynamically. However, you can also manually add meta tags in `public/index.html`.
 
+### PWA
+
+GitProfile is PWA enabled. The site can be installed as a Progressive Web App.
+
+![PWA](https://github.com/arifszn/gitprofile/assets/45073703/9dc7cc5c-4262-4445-a7a5-1e3566ef43fa)
+
 ### Avatar and Bio
 
 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, Skype, Telegram, personal website, phone and email.
 
 ```js
 // gitprofile.config.js
@@ -454,6 +466,7 @@ const config = {
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
+    mastodon: 'arifszn@mastodon.social',
     facebook: '',
     instagram: '',
     dribbble: '',
@@ -461,6 +474,8 @@ const config = {
     medium: '',
     dev: '',
     stackoverflow: '',
+    skype: '',
+    telegram: '',
     website: '',
     phone: '',
     email: '',

gitprofile.config.js

@@ -13,6 +13,7 @@ const config = {
   social: {
     linkedin: 'ariful-alam',
     twitter: 'arif_szn',
+    mastodon: 'arifszn@mastodon.social',
     facebook: '',
     instagram: '',
     dribbble: '',
@@ -20,6 +21,8 @@ const config = {
     medium: 'arifszn',
     dev: 'arifszn',
     stackoverflow: '', // format: userid/username
+    skype: '',
+    telegram: '',
     website: 'https://arifszn.com',
     phone: '',
     email: 'arifulalamszn@gmail.com',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arifszn/gitprofile",
   "description": "Create an automatic portfolio based on GitHub profile",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "license": "MIT",
   "author": "arifszn",
   "repository": {
@@ -42,11 +42,11 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@arifszn/blog-js": "^2.0.0",
-    "@vitejs/plugin-react": "^3.0.0",
+    "@arifszn/blog-js": "^2.0.4",
+    "@vitejs/plugin-react": "^4.0.0",
     "autoprefixer": "^10.4.4",
     "axios": "^1.1.3",
-    "daisyui": "^2.11.0",
+    "daisyui": "^3.0.3",
     "date-fns": "^2.28.0",
     "eslint": "^8.11.0",
     "eslint-config-prettier": "^8.5.0",
@@ -56,10 +56,11 @@
     "prettier": "^2.6.0",
     "prop-types": "^15.8.1",
     "react-helmet-async": "^1.2.3",
-    "react-hotjar": "^5.0.0",
+    "react-hotjar": "^6.1.0",
     "react-icons": "^4.3.1",
     "tailwindcss": "^3.0.23",
-    "vite": "^4.0.3"
+    "vite": "^4.0.3",
+    "vite-plugin-pwa": "^0.16.3"
   },
   "keywords": [
     "git-profile",

src/components/GitProfile.jsx

@@ -246,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,
@@ -254,6 +255,8 @@ GitProfile.propTypes = {
       dev: PropTypes.string,
       stackoverflow: PropTypes.string,
       website: PropTypes.string,
+      skype: PropTypes.string,
+      telegram: PropTypes.string,
       phone: PropTypes.string,
       email: PropTypes.string,
     }),

src/components/details/index.jsx

@@ -1,13 +1,12 @@
-import { MdLocationOn, MdMail } from 'react-icons/md';
+import { MdLocationOn } from 'react-icons/md';
 import {
   AiFillGithub,
   AiFillInstagram,
   AiFillMediumSquare,
 } from 'react-icons/ai';
 import { SiTwitter } from 'react-icons/si';
-import { GrLinkedinOption } from 'react-icons/gr';
 import { CgDribbble } from 'react-icons/cg';
-import { RiPhoneFill } from 'react-icons/ri';
+import { RiPhoneFill, RiMailFill } from 'react-icons/ri';
 import { Fragment } from 'react';
 import {
   FaBehanceSquare,
@@ -15,11 +14,33 @@ import {
   FaDev,
   FaFacebook,
   FaGlobe,
+  FaSkype,
+  FaMastodon,
   FaStackOverflow,
+  FaTelegram,
+  FaLinkedin,
 } 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 getFormattedMastodonValue = (mastodonValue, isLink) => {
+  const [username, server] = mastodonValue.split('@');
+
+  if (isLink) {
+    return `https://${server}/@${username}`;
+  } else {
+    return `${username}@${server}`;
+  }
+};
+
 const ListItem = ({ icon, title, value, link, skeleton = false }) => {
   return (
     <a
@@ -28,33 +49,23 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
       rel="noreferrer"
       className="flex justify-start py-2 px-1 items-center"
     >
-      <span className="w-2 m-2">{icon}</span>
-      <div className="flex-grow font-medium px-2">{title}</div>
+      <div className="flex-grow font-medium gap-2 flex items-center my-1">
+        {icon} {title}
+      </div>
       <div
         className={`${
           skeleton ? 'flex-grow' : ''
         } text-sm font-normal text-right mr-2 ml-3 ${link ? 'truncate' : ''}`}
+        style={{
+          wordBreak: 'break-word',
+        }}
       >
-        <div
-          style={{
-            wordBreak: 'break-word',
-          }}
-        >
-          {value}
-        </div>
+        {value}
       </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 = [];
@@ -83,14 +94,14 @@ const Details = ({ profile, loading, social, github }) => {
             <Fragment>
               {profile.location && (
                 <ListItem
-                  icon={<MdLocationOn className="mr-2" />}
+                  icon={<MdLocationOn />}
                   title="Based in:"
                   value={profile.location}
                 />
               )}
               {profile.company && (
                 <ListItem
-                  icon={<FaBuilding className="mr-2" />}
+                  icon={<FaBuilding />}
                   title="Company:"
                   value={profile.company}
                   link={
@@ -101,22 +112,30 @@ const Details = ({ profile, loading, social, github }) => {
                 />
               )}
               <ListItem
-                icon={<AiFillGithub className="mr-2" />}
+                icon={<AiFillGithub />}
                 title="GitHub:"
                 value={github.username}
                 link={`https://github.com/${github.username}`}
               />
               {social?.twitter && (
                 <ListItem
-                  icon={<SiTwitter className="mr-2" />}
+                  icon={<SiTwitter />}
                   title="Twitter:"
                   value={social.twitter}
                   link={`https://twitter.com/${social.twitter}`}
                 />
               )}
+              {social?.mastodon && (
+                <ListItem
+                  icon={<FaMastodon />}
+                  title="Mastodon:"
+                  value={getFormattedMastodonValue(social.mastodon, false)}
+                  link={getFormattedMastodonValue(social.mastodon, true)}
+                />
+              )}
               {social?.linkedin && (
                 <ListItem
-                  icon={<GrLinkedinOption className="mr-2" />}
+                  icon={<FaLinkedin />}
                   title="LinkedIn:"
                   value={social.linkedin}
                   link={`https://www.linkedin.com/in/${social.linkedin}`}
@@ -124,7 +143,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.dribbble && (
                 <ListItem
-                  icon={<CgDribbble className="mr-2" />}
+                  icon={<CgDribbble />}
                   title="Dribbble:"
                   value={social.dribbble}
                   link={`https://dribbble.com/${social.dribbble}`}
@@ -132,7 +151,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.behance && (
                 <ListItem
-                  icon={<FaBehanceSquare className="mr-2" />}
+                  icon={<FaBehanceSquare />}
                   title="Behance:"
                   value={social.behance}
                   link={`https://www.behance.net/${social.behance}`}
@@ -140,7 +159,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.facebook && (
                 <ListItem
-                  icon={<FaFacebook className="mr-2" />}
+                  icon={<FaFacebook />}
                   title="Facebook:"
                   value={social.facebook}
                   link={`https://www.facebook.com/${social.facebook}`}
@@ -148,7 +167,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.instagram && (
                 <ListItem
-                  icon={<AiFillInstagram className="mr-2" />}
+                  icon={<AiFillInstagram />}
                   title="Instagram:"
                   value={social.instagram}
                   link={`https://www.instagram.com/${social.instagram}`}
@@ -156,7 +175,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.medium && (
                 <ListItem
-                  icon={<AiFillMediumSquare className="mr-2" />}
+                  icon={<AiFillMediumSquare />}
                   title="Medium:"
                   value={social.medium}
                   link={`https://medium.com/@${social.medium}`}
@@ -164,7 +183,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.dev && (
                 <ListItem
-                  icon={<FaDev className="mr-2" />}
+                  icon={<FaDev />}
                   title="Dev:"
                   value={social.dev}
                   link={`https://dev.to/${social.dev}`}
@@ -172,7 +191,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.stackoverflow && (
                 <ListItem
-                  icon={<FaStackOverflow className="mr-2" />}
+                  icon={<FaStackOverflow />}
                   title="Stack Overflow:"
                   value={social.stackoverflow.split('/').slice(-1)}
                   link={`https://stackoverflow.com/users/${social.stackoverflow}`}
@@ -180,15 +199,32 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.website && (
                 <ListItem
-                  icon={<FaGlobe className="mr-2" />}
+                  icon={<FaGlobe />}
                   title="Website:"
                   value={social.website}
                   link={social.website}
                 />
               )}
+              {social?.skype && (
+                <ListItem
+                  icon={<FaSkype />}
+                  title="Skype"
+                  value={social.skype}
+                  link={`skype:${social.skype}?chat`}
+                />
+              )}
+              {social?.telegram && (
+                <ListItem
+                  icon={<FaTelegram />}
+                  title="Telegram"
+                  value={social.telegram}
+                  link={`https://t.me/${social.telegram}`}
+                />
+              )}
+
               {social?.phone && (
                 <ListItem
-                  icon={<RiPhoneFill className="mr-2" />}
+                  icon={<RiPhoneFill />}
                   title="Phone:"
                   value={social.phone}
                   link={`tel:${social.phone}`}
@@ -196,7 +232,7 @@ const Details = ({ profile, loading, social, github }) => {
               )}
               {social?.email && (
                 <ListItem
-                  icon={<MdMail className="mr-2" />}
+                  icon={<RiMailFill />}
                   title="Email:"
                   value={social.email}
                   link={`mailto:${social.email}`}

src/components/project/index.jsx

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
-import { AiOutlineStar, AiOutlineFork } from 'react-icons/ai';
 import PropTypes from 'prop-types';
-import { ga, languageColor, skeleton } from '../../helpers/utils';
+import { Fragment } from 'react';
+import { AiOutlineFork, AiOutlineStar } from 'react-icons/ai';
 import { MdInsertLink } from 'react-icons/md';
+import { ga, languageColor, skeleton } from '../../helpers/utils';
 
 const Project = ({ repo, loading, github, googleAnalytics }) => {
   if (!loading && Array.isArray(repo) && repo.length === 0) {
@@ -89,14 +89,14 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
             <div className="flex items-center">
               <div className="card-title text-lg tracking-wide flex text-base-content opacity-60">
                 <MdInsertLink className="my-auto" />
-                <span className="capitalize">{item.name}</span>
+                <span>{item.name}</span>
               </div>
             </div>
             <p className="mb-5 mt-1 text-base-content text-opacity-60 text-sm">
               {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/components/theme-changer/index.jsx

@@ -57,7 +57,7 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
               </div>
               <div
                 tabIndex={0}
-                className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-b-box bg-base-200 text-base-content"
+                className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-lg bg-base-200 text-base-content z-10"
               >
                 <ul className="p-4 menu compact">
                   {[

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,
@@ -157,6 +158,8 @@ export const sanitizeConfig = (config) => {
       website: config?.social?.website,
       phone: config?.social?.phone,
       email: config?.social?.email,
+      skype: config?.social?.skype,
+      telegram: config?.social?.telegram,
     },
     resume: {
       fileUrl: config?.resume?.fileUrl || '',

types/index.d.ts

@@ -49,6 +49,11 @@ export interface Social {
    */
   twitter?: string;
 
+  /**
+   * Mastodon
+   */
+  mastodon?: string;
+
   /**
    * Facebook
    */
@@ -89,6 +94,16 @@ export interface Social {
    */
   website?: string;
 
+  /**
+   * Skype username
+   */
+  skype?: string;
+
+  /**
+   * Telegram username
+   */
+  telegram?: string;
+
   /**
    * Phone
    */

vite.config.js

@@ -3,13 +3,34 @@ import react from '@vitejs/plugin-react';
 import tailwind from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
 import tailwindConfig from './tailwind.config.mjs';
+import { VitePWA } from 'vite-plugin-pwa';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  // If you are deploying to https://<USERNAME>.github.io/, set base to '/'.
-  // If you are deploying to https://<USERNAME>.github.io/<REPO>/, for example your repository is at https://github.com/<USERNAME>/<REPO>, then set base to '/<REPO>/'.
+  // If you are deploying to https://<USERNAME>.github.io/, for example your repository is at https://github.com/<USERNAME>, set base to '/'.
+
+  // If you are deploying to https://<USERNAME>.github.io/<REPO_NAME>/, for example your repository is at https://github.com/<USERNAME>/<REPO_NAME>, then set base to '/<REPO_NAME>/'.
+
   base: '/gitprofile/',
-  plugins: [react()],
+  plugins: [
+    react(),
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['logo.png'],
+      manifest: {
+        name: 'Portfolio',
+        short_name: 'Portfolio',
+        description: 'Personal Portfolio',
+        icons: [
+          {
+            src: 'logo.png',
+            sizes: '64x64 32x32 24x24 16x16 192x192 512x512',
+            type: 'image/png',
+          },
+        ],
+      },
+    }),
+  ],
   css: {
     postcss: {
       plugins: [tailwind(tailwindConfig), autoprefixer],