Refactor external projects

README.md

@@ -579,29 +579,20 @@ module.exports = {
 
 The posts are fetched by [blog.js](https://github.com/arifszn/blog.js).
 
-## Showcases
+## External Projects
 
-In this section you can showcase your projects with just a url and description. Furthermore, there is the possibility to add an image.
+In this section you can showcase your external projects.
 
 ```js
 // gitprofile.config.js
 module.exports = {
   // ...
-  showcases: [
+  externalProjects: [
     {
-      name: 'Website name 1',
+      title: 'Title',
-      description:
+      description: 'Description',
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. \
-          Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
       link: 'https://example.com',
-    },
-    {
-      name: 'Website name 2',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. \
-          Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
       imageUrl: 'https://via.placeholder.com/250x250',
-      link: 'https://example.com',
     },
   ],
 };

gitprofile.config.js

@@ -82,16 +82,18 @@ const config = {
       to: '2014',
     },
   ],
-  showcases: [
+
+  // To hide the `Other Projects` section, keep it empty.
+  externalProjects: [
     {
-      name: 'Website name 1',
+      title: 'Website name 1',
       description:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. \
         Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
       link: 'https://example.com',
     },
     {
-      name: 'Website name 2',
+      title: 'Website name 2',
       description:
         'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. \
         Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
@@ -99,6 +101,7 @@ const config = {
       link: 'https://example.com',
     },
   ],
+
   // Display blog posts from your medium or dev account. (Optional)
   blog: {
     source: 'dev', // medium | dev

src/components/GitProfile.jsx

@@ -9,7 +9,6 @@ import Skill from './skill';
 import Experience from './experience';
 import Certification from './certification';
 import Education from './education';
-import Showcase from './showcase';
 import Project from './project';
 import Blog from './blog';
 import {
@@ -26,6 +25,7 @@ import { HelmetProvider } from 'react-helmet-async';
 import PropTypes from 'prop-types';
 import '../assets/index.css';
 import { formatDistance } from 'date-fns';
+import ExternalProject from './external-project';
 
 const bgColor = 'bg-base-300';
 
@@ -203,9 +203,9 @@ const GitProfile = ({ config }) => {
                         github={sanitizedConfig.github}
                         googleAnalytics={sanitizedConfig.googleAnalytics}
                       />
-                      <Showcase
+                      <ExternalProject
                         loading={loading}
-                        cases={sanitizedConfig.showcases}
+                        externalProjects={sanitizedConfig.externalProjects}
                         googleAnalytics={sanitizedConfig.googleAnalytics}
                       />
                       <Blog
@@ -275,7 +275,14 @@ GitProfile.propTypes = {
       email: PropTypes.string,
     }),
     skills: PropTypes.array,
-    showcases: PropTypes.array,
+    externalProjects: PropTypes.arrayOf(
+      PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        description: PropTypes.string.isRequired,
+        link: PropTypes.string,
+        imageUrl: PropTypes.string,
+      })
+    ),
     experiences: PropTypes.arrayOf(
       PropTypes.shape({
         company: PropTypes.string,

src/components/external-project/index.jsx

@@ -5,7 +5,19 @@ import { skeleton } from '../../helpers/utils';
 import { ga } from '../../helpers/utils';
 import LazyImage from '../lazy-image';
 
-const Showcase = ({ cases, loading, googleAnalytics }) => {
+const displaySection = (externalProjects) => {
+  if (
+    externalProjects &&
+    Array.isArray(externalProjects) &&
+    externalProjects.length
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+};
+
+const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
   const renderSkeleton = () => {
     return [
       <div className="card shadow-lg compact bg-base-100" key="">
@@ -47,8 +59,8 @@ const Showcase = ({ cases, loading, googleAnalytics }) => {
     ];
   };
 
-  const renderShowcases = () => {
+  const renderExternalProjects = () => {
-    return cases.map((item, index) => (
+    return externalProjects.map((item, index) => (
       <a
         className="card shadow-lg compact bg-base-100 cursor-pointer"
         key={index}
@@ -59,9 +71,9 @@ const Showcase = ({ cases, loading, googleAnalytics }) => {
           try {
             if (googleAnalytics?.id) {
               ga.event({
-                action: 'Click Showcase',
+                action: 'Click External Project',
                 params: {
-                  post: item.name,
+                  post: item.title,
                 },
               });
             }
@@ -94,7 +106,7 @@ const Showcase = ({ cases, loading, googleAnalytics }) => {
                 <div className="text-center md:text-left w-full">
                   <h2 className="font-semibold text-base-content opacity-60">
                     <div className="flex flex-row items-center">
-                      <AiOutlineLink className="mr-1" /> {item.name}
+                      <AiOutlineLink className="mr-1" /> {item.title}
                     </div>
                   </h2>
                   <p className="mt-3 text-base-content text-opacity-60 text-sm">
@@ -111,40 +123,42 @@ const Showcase = ({ cases, loading, googleAnalytics }) => {
 
   return (
     <Fragment>
-      <div className="col-span-1 lg:col-span-2">
+      {displaySection(externalProjects) && (
-        <div className="grid grid-cols-2 gap-6">
+        <div className="col-span-1 lg:col-span-2">
-          <div className="col-span-2">
+          <div className="grid grid-cols-2 gap-6">
-            <div className="card compact bg-gradient-to-br to-base-200 from-base-100 shadow">
+            <div className="col-span-2">
-              <div className="card-body">
+              <div className="card compact bg-gradient-to-br to-base-200 from-base-100 shadow">
-                <div className="mx-3 flex items-center justify-between mb-2">
+                <div className="card-body">
-                  <h5 className="card-title">
+                  <div className="mx-3 flex items-center justify-between mb-2">
-                    {loading ? (
+                    <h5 className="card-title">
-                      skeleton({ width: 'w-28', height: 'h-8' })
+                      {loading ? (
-                    ) : (
+                        skeleton({ width: 'w-28', height: 'h-8' })
-                      <span className="text-base-content opacity-70">
+                      ) : (
-                        My Showcases
+                        <span className="text-base-content opacity-70">
-                      </span>
+                          Other Projects
-                    )}
+                        </span>
-                  </h5>
+                      )}
-                </div>
+                    </h5>
-                <div className="col-span-2">
+                  </div>
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <div className="col-span-2">
-                    {loading || !cases ? renderSkeleton() : renderShowcases()}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      {loading ? renderSkeleton() : renderExternalProjects()}
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      )}
     </Fragment>
   );
 };
 
-Showcase.propTypes = {
+ExternalProject.propTypes = {
-  cases: PropTypes.array,
+  externalProjects: PropTypes.array,
   loading: PropTypes.bool.isRequired,
   googleAnalytics: PropTypes.object,
 };
 
-export default Showcase;
+export default ExternalProject;

src/helpers/utils.jsx

@@ -162,7 +162,7 @@ export const sanitizeConfig = (config) => {
       fileUrl: config?.resume?.fileUrl || '',
     },
     skills: config?.skills || [],
-    showcases: config?.showcases || [],
+    externalProjects: config?.externalProjects || [],
     experiences: config?.experiences || [],
     certifications: config?.certifications || [],
     education: config?.education || [],

types/index.d.ts

@@ -221,8 +221,8 @@ export interface Certifications {
   link?: string;
 }
 
-export interface Showcase {
+export interface ExternalProjects {
-  name?: string;
+  title?: string;
   description?: string;
   imageUrl?: string;
   link?: string;
@@ -266,9 +266,9 @@ export interface Config {
   experiences?: Array<Experience>;
 
   /**
-   * Showcase list
+   * External Projects
    */
-  showcases?: Array<Showcase>;
+  externalProjects?: Array<ExternalProjects>;
 
   /**
    * Certifications list