From 53b4a1ee39bca809da53f5ee32875fe7c46b76be Mon Sep 17 00:00:00 2001 From: Ariful Alam Date: Wed, 12 Oct 2022 16:05:14 +0600 Subject: [PATCH] Refactor external projects --- README.md | 19 ++--- gitprofile.config.js | 9 ++- src/components/GitProfile.jsx | 15 ++-- .../{showcase => external-project}/index.jsx | 72 +++++++++++-------- src/helpers/utils.jsx | 2 +- types/index.d.ts | 8 +-- 6 files changed, 70 insertions(+), 55 deletions(-) rename src/components/{showcase => external-project}/index.jsx (68%) diff --git a/README.md b/README.md index 082fa5e..6ff5484 100644 --- a/README.md +++ b/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', - 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.', + title: 'Title', + description: 'Description', 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', }, ], }; diff --git a/gitprofile.config.js b/gitprofile.config.js index 2d0b414..8c082a1 100644 --- a/gitprofile.config.js +++ b/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 diff --git a/src/components/GitProfile.jsx b/src/components/GitProfile.jsx index 90d06cb..d9de889 100644 --- a/src/components/GitProfile.jsx +++ b/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} /> - { +const displaySection = (externalProjects) => { + if ( + externalProjects && + Array.isArray(externalProjects) && + externalProjects.length + ) { + return true; + } else { + return false; + } +}; + +const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => { const renderSkeleton = () => { return [
@@ -47,8 +59,8 @@ const Showcase = ({ cases, loading, googleAnalytics }) => { ]; }; - const renderShowcases = () => { - return cases.map((item, index) => ( + const renderExternalProjects = () => { + return externalProjects.map((item, index) => ( { 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 }) => {

- {item.name} + {item.title}

@@ -111,40 +123,42 @@ const Showcase = ({ cases, loading, googleAnalytics }) => { return ( -

-
-
-
-
-
-
- {loading ? ( - skeleton({ width: 'w-28', height: 'h-8' }) - ) : ( - - My Showcases - - )} -
-
-
-
- {loading || !cases ? renderSkeleton() : renderShowcases()} + {displaySection(externalProjects) && ( +
+
+
+
+
+
+
+ {loading ? ( + skeleton({ width: 'w-28', height: 'h-8' }) + ) : ( + + Other Projects + + )} +
+
+
+
+ {loading ? renderSkeleton() : renderExternalProjects()} +
-
+ )} ); }; -Showcase.propTypes = { - cases: PropTypes.array, +ExternalProject.propTypes = { + externalProjects: PropTypes.array, loading: PropTypes.bool.isRequired, googleAnalytics: PropTypes.object, }; -export default Showcase; +export default ExternalProject; diff --git a/src/helpers/utils.jsx b/src/helpers/utils.jsx index 838a1ef..7a3c22d 100644 --- a/src/helpers/utils.jsx +++ b/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 || [], diff --git a/types/index.d.ts b/types/index.d.ts index ab43d60..d082fee 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -221,8 +221,8 @@ export interface Certifications { link?: string; } -export interface Showcase { - name?: string; +export interface ExternalProjects { + title?: string; description?: string; imageUrl?: string; link?: string; @@ -266,9 +266,9 @@ export interface Config { experiences?: Array; /** - * Showcase list + * External Projects */ - showcases?: Array; + externalProjects?: Array; /** * Certifications list