Merge pull request #100 from arifszn/refactor

Cleanup codebase

src/components/blog/index.jsx

@@ -7,13 +7,7 @@ import { getDevPost, getMediumPost } from '@arifszn/blog-js';
 import { formatDistance } from 'date-fns';
 
 const displaySection = (blog) => {
-  if (
+  if (blog?.source && blog?.username) {
-    typeof blog !== 'undefined' &&
-    typeof blog.source !== 'undefined' &&
-    typeof blog.username !== 'undefined' &&
-    blog.source &&
-    blog.username
-  ) {
     return true;
   } else {
     return false;
@@ -121,8 +115,7 @@ const Blog = ({ loading, blog, googleAnalytics }) => {
               console.error(error);
             }
 
-            typeof window !== 'undefined' &&
+            window?.open(article.link, '_blank');
-              window.open(article.link, '_blank');
           }}
         >
           <div className="p-8 h-full w-full">

src/components/details/index.jsx

@@ -105,7 +105,7 @@ const Details = ({ profile, loading, social, github }) => {
                 value={github.username}
                 link={`https://github.com/${github.username}`}
               />
-              {typeof social.twitter !== 'undefined' && social.twitter && (
+              {social?.twitter && (
                 <ListItem
                   icon={<SiTwitter className="mr-2" />}
                   title="Twitter:"
@@ -113,7 +113,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://twitter.com/${social.twitter}`}
                 />
               )}
-              {typeof social.linkedin !== 'undefined' && social.linkedin && (
+              {social?.linkedin && (
                 <ListItem
                   icon={<GrLinkedinOption className="mr-2" />}
                   title="LinkedIn:"
@@ -121,7 +121,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://www.linkedin.com/in/${social.linkedin}`}
                 />
               )}
-              {typeof social.dribbble !== 'undefined' && social.dribbble && (
+              {social?.dribbble && (
                 <ListItem
                   icon={<CgDribbble className="mr-2" />}
                   title="Dribbble:"
@@ -129,7 +129,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://dribbble.com/${social.dribbble}`}
                 />
               )}
-              {typeof social.behance !== 'undefined' && social.behance && (
+              {social?.behance && (
                 <ListItem
                   icon={<FaBehanceSquare className="mr-2" />}
                   title="Behance:"
@@ -137,7 +137,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://www.behance.net/${social.behance}`}
                 />
               )}
-              {typeof social.facebook !== 'undefined' && social.facebook && (
+              {social?.facebook && (
                 <ListItem
                   icon={<FaFacebook className="mr-2" />}
                   title="Facebook:"
@@ -145,7 +145,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://www.facebook.com/${social.facebook}`}
                 />
               )}
-              {typeof social.instagram !== 'undefined' && social.instagram && (
+              {social?.instagram && (
                 <ListItem
                   icon={<AiFillInstagram className="mr-2" />}
                   title="Instagram:"
@@ -153,7 +153,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://www.instagram.com/${social.instagram}`}
                 />
               )}
-              {typeof social.medium !== 'undefined' && social.medium && (
+              {social?.medium && (
                 <ListItem
                   icon={<AiFillMediumSquare className="mr-2" />}
                   title="Medium:"
@@ -161,7 +161,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://medium.com/@${social.medium}`}
                 />
               )}
-              {typeof social.dev !== 'undefined' && social.dev && (
+              {social?.dev && (
                 <ListItem
                   icon={<FaDev className="mr-2" />}
                   title="Dev:"
@@ -169,7 +169,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`https://dev.to/${social.dev}`}
                 />
               )}
-              {typeof social.website !== 'undefined' && social.website && (
+              {social?.website && (
                 <ListItem
                   icon={<FaGlobe className="mr-2" />}
                   title="Website:"
@@ -177,7 +177,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={social.website}
                 />
               )}
-              {typeof social.phone !== 'undefined' && social.phone && (
+              {social?.phone && (
                 <ListItem
                   icon={<RiPhoneFill className="mr-2" />}
                   title="Phone:"
@@ -185,7 +185,7 @@ const Details = ({ profile, loading, social, github }) => {
                   link={`tel:${social.phone}`}
                 />
               )}
-              {typeof social.email !== 'undefined' && social.email && (
+              {social?.email && (
                 <ListItem
                   icon={<MdMail className="mr-2" />}
                   title="Email:"

src/components/education/index.jsx

@@ -40,7 +40,7 @@ const Education = ({ loading, education }) => {
 
   return (
     <>
-      {typeof education !== 'undefined' && education.length !== 0 && (
+      {education?.length !== 0 && (
         <div className="card shadow-lg compact bg-base-100">
           <div className="card-body">
             <div className="mx-3">

src/components/experience/index.jsx

@@ -40,7 +40,7 @@ const Experience = ({ experiences, loading }) => {
 
   return (
     <>
-      {typeof experiences !== 'undefined' && experiences.length !== 0 && (
+      {experiences?.length !== 0 && (
         <div className="card shadow-lg compact bg-base-100">
           <div className="card-body">
             <div className="mx-3">

src/components/head-tag-editor/index.jsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { Helmet } from 'react-helmet-async';
 import PropTypes from 'prop-types';
-import { isThemeDarkish } from '../../helpers/utils';
+import { isDarkishTheme } from '../../helpers/utils';
 
 const HeadTagEditor = ({ profile, theme, googleAnalytics, social }) => {
   return (
@@ -25,7 +25,7 @@ const HeadTagEditor = ({ profile, theme, googleAnalytics, social }) => {
           <title>Portfolio of {profile.name}</title>
           <meta
             name="theme-color"
-            content={isThemeDarkish(theme) ? '#000000' : '#ffffff'}
+            content={isDarkishTheme(theme) ? '#000000' : '#ffffff'}
           />
 
           <meta name="description" content={profile.bio} />
@@ -34,12 +34,7 @@ const HeadTagEditor = ({ profile, theme, googleAnalytics, social }) => {
           <meta itemProp="description" content={profile.bio} />
           <meta itemProp="image" content={profile.avatar} />
 
-          <meta
+          <meta property="og:url" content={social?.website || ''} />
-            property="og:url"
-            content={
-              typeof social.website !== 'undefined' ? social.website : ''
-            }
-          />
           <meta property="og:type" content="website" />
           <meta property="og:title" content={`Portfolio of ${profile.name}`} />
           <meta property="og:description" content={profile.bio} />

src/components/project/index.jsx

@@ -72,7 +72,7 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
             console.error(error);
           }
 
-          typeof window !== 'undefined' && window.open(item.html_url, '_blank');
+          window?.open(item.html_url, '_blank');
         }}
       >
         <div className="flex justify-between flex-col p-8 h-full w-full">

src/components/skill/index.jsx

@@ -17,7 +17,7 @@ const Skill = ({ loading, skills }) => {
 
   return (
     <>
-      {typeof skills !== 'undefined' && skills.length !== 0 && (
+      {skills?.length !== 0 && (
         <div className="card shadow-lg compact bg-base-100">
           <div className="card-body">
             <div className="mx-3">

src/helpers/utils.jsx

@@ -76,7 +76,7 @@ export const ga = {
   },
 };
 
-export const isThemeDarkish = (theme) => {
+export const isDarkishTheme = (theme) => {
   return ['dark', 'halloween', 'forest', 'black', 'luxury', 'dracula'].includes(
     theme
   );
@@ -136,11 +136,11 @@ export const sanitizeConfig = (config) => {
 
   return {
     github: {
-      username: config.github.username,
+      username: config?.github?.username || '',
-      sortBy: config.github.sortBy || 'stars',
+      sortBy: config?.github?.sortBy || 'stars',
-      limit: config.github.limit || 8,
+      limit: config?.github?.limit || 8,
       exclude: {
-        forks: config?.github?.exclude?.forks,
+        forks: config?.github?.exclude?.forks || false,
         projects: config?.github?.exclude?.projects || [],
       },
     },
@@ -174,8 +174,9 @@ export const sanitizeConfig = (config) => {
     },
     themeConfig: {
       defaultTheme: config?.themeConfig?.defaultTheme || themes[0],
-      disableSwitch: config?.themeConfig?.disableSwitch,
+      disableSwitch: config?.themeConfig?.disableSwitch || false,
-      respectPrefersColorScheme: config?.themeConfig?.respectPrefersColorScheme,
+      respectPrefersColorScheme:
+        config?.themeConfig?.respectPrefersColorScheme || false,
       themes: themes,
       customTheme: customTheme,
     },