From 422e0ba12fbf3744768dde6e75d523a803299008 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michel=20Dore=CC=81?= Date: Mon, 10 Oct 2022 14:48:00 +0200 Subject: [PATCH 1/8] Clean commit for showcases with image possibility --- gitprofile.config.js | 16 ++++ src/components/GitProfile.jsx | 8 ++ src/components/showcase/index.jsx | 146 ++++++++++++++++++++++++++++++ src/helpers/utils.jsx | 1 + 4 files changed, 171 insertions(+) create mode 100644 src/components/showcase/index.jsx diff --git a/gitprofile.config.js b/gitprofile.config.js index 4e1afc7..772bf6a 100644 --- a/gitprofile.config.js +++ b/gitprofile.config.js @@ -82,6 +82,22 @@ const config = { to: '2014', }, ], + showcases: [ + { + 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.', + // image_url: 'https://via.placeholder.com/250x250', + html_url: '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.', + image_url: 'https://via.placeholder.com/250x250', + html_url: '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 95d9843..7da7a25 100644 --- a/src/components/GitProfile.jsx +++ b/src/components/GitProfile.jsx @@ -9,6 +9,7 @@ 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 { @@ -196,6 +197,12 @@ const GitProfile = ({ config }) => {
+ { + const renderSkeleton = () => { + let array = []; + for (let index = 0; index < github.limit; index++) { + array.push( +
+
+
+
+ +
+ {skeleton({ width: 'w-32', height: 'h-8' })} +
+ +
+
+ {skeleton({ + width: 'w-full', + height: 'h-4', + className: 'mb-2', + })} + {skeleton({ width: 'w-full', height: 'h-4' })} +
+
+
+
+ + {skeleton({ width: 'w-12', height: 'h-4' })} + + + {skeleton({ width: 'w-12', height: 'h-4' })} + +
+
+ + {skeleton({ width: 'w-12', height: 'h-4' })} + +
+
+
+
+ ); + } + + return array; + }; + + const renderShowcases = () => { + return cases.map((item, index) => ( + { + e.preventDefault(); + + try { + if (googleAnalytics?.id) { + ga.event({ + action: 'Click showcase', + params: { + project: item.name, + }, + }); + } + } catch (error) { + console.error(error); + } + + window?.open(item.html_url, '_blank'); + }} + > +
+
+
+ + +
+ {item.name} +
+ +
+
+ {item?.image_url && ( +
+ {item.name} +
+ )} +
+

+ {item.description} +

+
+
+
+
+ + )); + }; + + return ( + +
+
+
+
+
+
+
+ {loading ? ( + skeleton({ width: 'w-28', height: 'h-8' }) + ) : ( + + My Showcases + + )} +
+
+
+
+ {loading || !cases ? renderSkeleton() : renderShowcases()} +
+
+
+
+
+
+
+ + ); +}; + +Showcase.propTypes = { + cases: PropTypes.array, + loading: PropTypes.bool.isRequired, + github: PropTypes.object.isRequired, + googleAnalytics: PropTypes.object, +}; + +export default Showcase; diff --git a/src/helpers/utils.jsx b/src/helpers/utils.jsx index e4fa356..838a1ef 100644 --- a/src/helpers/utils.jsx +++ b/src/helpers/utils.jsx @@ -162,6 +162,7 @@ export const sanitizeConfig = (config) => { fileUrl: config?.resume?.fileUrl || '', }, skills: config?.skills || [], + showcases: config?.showcases || [], experiences: config?.experiences || [], certifications: config?.certifications || [], education: config?.education || [], From 04603e7bd3a2667145938a298685625dd5e15d44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michel=20Dore=CC=81?= Date: Tue, 11 Oct 2022 22:48:43 +0200 Subject: [PATCH 2/8] Added type and new styling for showcases --- gitprofile.config.js | 13 +-- src/components/GitProfile.jsx | 11 ++- src/components/showcase/index.jsx | 132 +++++++++++++++--------------- types/index.d.ts | 12 +++ 4 files changed, 92 insertions(+), 76 deletions(-) diff --git a/gitprofile.config.js b/gitprofile.config.js index 772bf6a..2d0b414 100644 --- a/gitprofile.config.js +++ b/gitprofile.config.js @@ -86,16 +86,17 @@ const config = { { 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.', - // image_url: 'https://via.placeholder.com/250x250', - html_url: 'https://example.com', + '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.', - image_url: 'https://via.placeholder.com/250x250', - html_url: 'https://example.com', + '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', }, ], // Display blog posts from your medium or dev account. (Optional) diff --git a/src/components/GitProfile.jsx b/src/components/GitProfile.jsx index 7da7a25..90d06cb 100644 --- a/src/components/GitProfile.jsx +++ b/src/components/GitProfile.jsx @@ -197,18 +197,17 @@ const GitProfile = ({ config }) => {
- + { +const Showcase = ({ cases, loading, googleAnalytics }) => { const renderSkeleton = () => { - let array = []; - for (let index = 0; index < github.limit; index++) { - array.push( -
-
-
-
- -
- {skeleton({ width: 'w-32', height: 'h-8' })} -
- -
-
- {skeleton({ - width: 'w-full', - height: 'h-4', - className: 'mb-2', - })} - {skeleton({ width: 'w-full', height: 'h-4' })} -
+ return [ +
+
+
+
+ +
+ {skeleton({ width: 'w-32', height: 'h-8' })} +
+
-
-
- - {skeleton({ width: 'w-12', height: 'h-4' })} - - - {skeleton({ width: 'w-12', height: 'h-4' })} - -
-
- - {skeleton({ width: 'w-12', height: 'h-4' })} - -
+
+ {skeleton({ + width: 'w-full', + height: 'h-4', + className: 'mb-2', + })} + {skeleton({ width: 'w-full', height: 'h-4' })} +
+
+
+
+ + {skeleton({ width: 'w-12', height: 'h-4' })} + + + {skeleton({ width: 'w-12', height: 'h-4' })} + +
+
+ + {skeleton({ width: 'w-12', height: 'h-4' })} +
- ); - } - - return array; +
, + ]; }; const renderShowcases = () => { return cases.map((item, index) => ( { e.preventDefault(); try { if (googleAnalytics?.id) { ga.event({ - action: 'Click showcase', + action: 'Click Showcase', params: { - project: item.name, + post: item.name, }, }); } @@ -73,29 +69,38 @@ const Showcase = ({ cases, loading, github, googleAnalytics }) => { console.error(error); } - window?.open(item.html_url, '_blank'); + window?.open(item.link, '_blank'); }} > -
-
-
- - -
- {item.name} -
- -
-
- {item?.image_url && ( -
- {item.name} +
+
+ {item.imageUrl && ( +
+
+ +
+
+ )} +
+
+
+

+
+ {item.name} +
+

+

+ {item.description} +

- )} -
-

- {item.description} -

@@ -139,7 +144,6 @@ const Showcase = ({ cases, loading, github, googleAnalytics }) => { Showcase.propTypes = { cases: PropTypes.array, loading: PropTypes.bool.isRequired, - github: PropTypes.object.isRequired, googleAnalytics: PropTypes.object, }; diff --git a/types/index.d.ts b/types/index.d.ts index 6278739..7354923 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -221,6 +221,13 @@ export interface Certifications { link?: string; } +export interface Showcase { + name?: string; + description?: string; + imageUrl?: string; + link?: string; +} + export interface Education { institution?: string; degree?: string; @@ -257,6 +264,11 @@ export interface Config { * Experience list */ experiences?: Array; + + /** + * Showcase list + */ + showcases?: Array; /** * Certifications list From 71223e4c043a4f774fd3287a89d6266c3b7c053b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michel=20Dor=C3=A9?= <22073531+micheldore@users.noreply.github.com> Date: Tue, 11 Oct 2022 20:55:32 +0000 Subject: [PATCH 3/8] Update README.md for Showcases --- README.md | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/README.md b/README.md index 2426de2..d50d379 100644 --- a/README.md +++ b/README.md @@ -579,6 +579,37 @@ module.exports = { The posts are fetched by [blog.js](https://github.com/arifszn/blog.js). +## Showcases + +In this section you can showcase your projects with just a url and description. Furthermore, there is the possibility to add an image. + +```js +// gitprofile.config.js +module.exports = { + // ... + showcases: [ + { + 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.', + 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', + }, + ], + }; +``` + +The above configuration will look like this: +![screenshot-rocks(2)](https://user-images.githubusercontent.com/22073531/195196309-1e55fdc2-791d-453e-9341-3f66201f830d.png) + ## 💖 Support

You can show your support by starring this project. ★

From 7ec5802b54a16fb0a8a7b21cd23efe87e6984858 Mon Sep 17 00:00:00 2001 From: Ariful Alam Date: Wed, 12 Oct 2022 15:16:58 +0600 Subject: [PATCH 4/8] Apply prettier --- README.md | 30 +++++++++++++++--------------- types/index.d.ts | 2 +- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index d50d379..082fa5e 100644 --- a/README.md +++ b/README.md @@ -588,23 +588,23 @@ In this section you can showcase your projects with just a url and description. module.exports = { // ... showcases: [ - { - 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. \ + { + 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.', - 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. \ + 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', - }, - ], - }; + imageUrl: 'https://via.placeholder.com/250x250', + link: 'https://example.com', + }, + ], +}; ``` The above configuration will look like this: diff --git a/types/index.d.ts b/types/index.d.ts index 7354923..ab43d60 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -264,7 +264,7 @@ export interface Config { * Experience list */ experiences?: Array; - + /** * Showcase list */ From 53b4a1ee39bca809da53f5ee32875fe7c46b76be Mon Sep 17 00:00:00 2001 From: Ariful Alam Date: Wed, 12 Oct 2022 16:05:14 +0600 Subject: [PATCH 5/8] 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 From 984bee1fcf67dfd9d1232a389a43ce107c8c5a3d Mon Sep 17 00:00:00 2001 From: Ariful Alam Date: Wed, 12 Oct 2022 16:33:55 +0600 Subject: [PATCH 6/8] Fix prop definition of externalProjects --- src/components/GitProfile.jsx | 2 +- types/index.d.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/GitProfile.jsx b/src/components/GitProfile.jsx index d9de889..93b7630 100644 --- a/src/components/GitProfile.jsx +++ b/src/components/GitProfile.jsx @@ -279,7 +279,7 @@ GitProfile.propTypes = { PropTypes.shape({ title: PropTypes.string.isRequired, description: PropTypes.string.isRequired, - link: PropTypes.string, + link: PropTypes.string.isRequired, imageUrl: PropTypes.string, }) ), diff --git a/types/index.d.ts b/types/index.d.ts index d082fee..e8b4482 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -222,10 +222,10 @@ export interface Certifications { } export interface ExternalProjects { - title?: string; - description?: string; + title: string; + description: string; imageUrl?: string; - link?: string; + link: string; } export interface Education { From 32740ede327a5ad0acaaddc3afbdb3176a9e9f59 Mon Sep 17 00:00:00 2001 From: Ariful Alam Date: Tue, 3 Jan 2023 17:09:10 +0600 Subject: [PATCH 7/8] Add section for external projects --- README.md | 62 ++++++---- gitprofile.config.js | 11 +- src/components/external-project/index.jsx | 133 ++++++++++++---------- src/components/project/index.jsx | 4 +- 4 files changed, 116 insertions(+), 94 deletions(-) diff --git a/README.md b/README.md index 6ff5484..cca5d7a 100644 --- a/README.md +++ b/README.md @@ -266,6 +266,23 @@ const config = { to: '2014', }, ], + // To hide the `Other Projects` section, keep it empty. + externalProjects: [ + { + title: 'Project Name', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.', + imageUrl: 'https://via.placeholder.com/250x250', + link: 'https://example.com', + }, + { + title: 'Project Name', + description: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.', + imageUrl: 'https://via.placeholder.com/250x250', + link: 'https://example.com', + }, + ], // Display blog posts from your medium or dev account. (Optional) blog: { source: 'dev', // medium | dev @@ -541,7 +558,9 @@ Empty array will hide the certifications section. ### Projects -Your public repo from GitHub will be displayed here automatically. You can limit how many projects do you want to be displayed. Also, you can hide forked or specific repo. +#### Github Projects + +Your public repo from GitHub will be displayed in the `Github Projects` section automatically. You can limit how many projects do you want to be displayed. Also, you can hide forked or specific repo. ```js // gitprofile.config.js @@ -559,6 +578,25 @@ module.exports = { }; ``` +#### External Projects + +In this section you can showcase your external/personal projects. + +```js +// gitprofile.config.js +module.exports = { + // ... + externalProjects: [ + { + title: 'Project Name', + description: 'Description', + link: 'https://example.com', + imageUrl: 'https://via.placeholder.com/250x250', + }, + ], +}; +``` + ### Blog Posts If you have [medium](https://medium.com) or [dev](https://dev.to) account, you can show your recent blog posts in here just by providing your medium/dev username. You can limit how many posts to display (Max is `10`). @@ -579,28 +617,6 @@ module.exports = { The posts are fetched by [blog.js](https://github.com/arifszn/blog.js). -## External Projects - -In this section you can showcase your external projects. - -```js -// gitprofile.config.js -module.exports = { - // ... - externalProjects: [ - { - title: 'Title', - description: 'Description', - link: 'https://example.com', - imageUrl: 'https://via.placeholder.com/250x250', - }, - ], -}; -``` - -The above configuration will look like this: -![screenshot-rocks(2)](https://user-images.githubusercontent.com/22073531/195196309-1e55fdc2-791d-453e-9341-3f66201f830d.png) - ## 💖 Support

You can show your support by starring this project. ★

diff --git a/gitprofile.config.js b/gitprofile.config.js index 8c082a1..3547f09 100644 --- a/gitprofile.config.js +++ b/gitprofile.config.js @@ -86,17 +86,16 @@ const config = { // To hide the `Other Projects` section, keep it empty. externalProjects: [ { - title: 'Website name 1', + title: 'Project Name', 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.', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.', + imageUrl: 'https://via.placeholder.com/250x250', link: 'https://example.com', }, { - title: 'Website name 2', + title: 'Project Name', 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.', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.', imageUrl: 'https://via.placeholder.com/250x250', link: 'https://example.com', }, diff --git a/src/components/external-project/index.jsx b/src/components/external-project/index.jsx index d7f9272..c5760a1 100644 --- a/src/components/external-project/index.jsx +++ b/src/components/external-project/index.jsx @@ -1,8 +1,6 @@ import { Fragment } from 'react'; -import { AiOutlineLink } from 'react-icons/ai'; import PropTypes from 'prop-types'; -import { skeleton } from '../../helpers/utils'; -import { ga } from '../../helpers/utils'; +import { ga, skeleton } from '../../helpers/utils'; import LazyImage from '../lazy-image'; const displaySection = (externalProjects) => { @@ -19,44 +17,55 @@ const displaySection = (externalProjects) => { const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => { const renderSkeleton = () => { - return [ -
-
-
-
- -
- {skeleton({ width: 'w-32', height: 'h-8' })} -
- -
-
- {skeleton({ - width: 'w-full', - height: 'h-4', - className: 'mb-2', - })} - {skeleton({ width: 'w-full', height: 'h-4' })} -
-
-
-
- - {skeleton({ width: 'w-12', height: 'h-4' })} - - - {skeleton({ width: 'w-12', height: 'h-4' })} - -
-
- - {skeleton({ width: 'w-12', height: 'h-4' })} - + let array = []; + for (let index = 0; index < externalProjects.length; index++) { + array.push( +
+
+
+
+
+
+

+ {skeleton({ + width: 'w-32', + height: 'h-8', + className: 'mb-2 mx-auto', + })} +

+
+
+ {skeleton({ + width: 'w-full', + height: 'h-full', + shape: '', + })} +
+
+
+ {skeleton({ + width: 'w-full', + height: 'h-4', + className: 'mx-auto', + })} +
+
+ {skeleton({ + width: 'w-full', + height: 'h-4', + className: 'mx-auto', + })} +
+
+
+
-
, - ]; + ); + } + + return array; }; const renderExternalProjects = () => { @@ -85,31 +94,29 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => { }} >
-
- {item.imageUrl && ( -
-
- -
-
- )} +
-
-
-

-
- {item.title} -
+
+
+

+ {item.title}

-

+ {item.imageUrl && ( +

+
+ +
+
+ )} +

{item.description}

@@ -132,10 +139,10 @@ const ExternalProject = ({ externalProjects, loading, googleAnalytics }) => {
{loading ? ( - skeleton({ width: 'w-28', height: 'h-8' }) + skeleton({ width: 'w-40', height: 'h-8' }) ) : ( - Other Projects + My Projects )}
diff --git a/src/components/project/index.jsx b/src/components/project/index.jsx index 06d204e..ebec843 100644 --- a/src/components/project/index.jsx +++ b/src/components/project/index.jsx @@ -141,10 +141,10 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
{loading ? ( - skeleton({ width: 'w-28', height: 'h-8' }) + skeleton({ width: 'w-40', height: 'h-8' }) ) : ( - My Projects + GitHub Projects )}
From 9cd95eb08dc79b7c27074a44894aa8a4e437b67e Mon Sep 17 00:00:00 2001 From: Ariful Alam Date: Tue, 3 Jan 2023 17:11:34 +0600 Subject: [PATCH 8/8] Bump version to 2.2.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index c3c0113..3b4bf76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@arifszn/gitprofile", - "version": "2.1.0", + "version": "2.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@arifszn/gitprofile", - "version": "2.1.0", + "version": "2.2.0", "license": "MIT", "dependencies": { "react": "^18.2.0", diff --git a/package.json b/package.json index 3a52c21..706fad3 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@arifszn/gitprofile", "description": "Create an automatic portfolio based on GitHub profile", - "version": "2.1.0", + "version": "2.2.0", "license": "MIT", "author": "arifszn", "repository": {