From fff850f94fd5b097f540f4bfb76fb1541b5d00b2 Mon Sep 17 00:00:00 2001 From: Christian Sarnataro Date: Wed, 4 Jan 2023 20:36:03 +0100 Subject: [PATCH 1/4] Added an option to display a custom footer Added an option in config file. Added a component which renders the custom footer or a default footer if no custom footer is defined. Updated readme file with related instructions. --- README.md | 67 +++++++++++++++++++++++++++------ gitprofile.config.js | 5 +++ package.json | 2 +- src/components/GitProfile.jsx | 21 +---------- src/components/footer/index.jsx | 41 ++++++++++++++++++++ src/helpers/utils.jsx | 3 +- 6 files changed, 106 insertions(+), 33 deletions(-) create mode 100644 src/components/footer/index.jsx diff --git a/README.md b/README.md index 2426de2..0265bfa 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,8 @@ ✓ [Certification Section](#certifications) ✓ [Education Section](#education) ✓ [Projects Section](#projects) -✓ [Blog Posts Section](#blog-posts) +✓ [Blog Posts Section](#blog-posts) +✓ [Custom footer](#custom-footer) To view a live example, **[click here](https://arifszn.github.io/gitprofile)**. @@ -350,7 +351,7 @@ The default theme can be specified. ```js // gitprofile.config.js -module.exports = { +const config = { // ... themeConfig: { defaultTheme: 'light', @@ -367,7 +368,7 @@ You can create your own custom theme by modifying these values. Theme `procyon` ```js // gitprofile.config.js -module.exports = { +const config = { // ... themeConfig: { customTheme: { @@ -390,7 +391,7 @@ module.exports = { ```js // gitprofile.config.js -module.exports = { +const config = { // ... googleAnalytics: { id: '', @@ -406,7 +407,7 @@ Besides tracking visitors, it will track `click events` on projects and blog pos ```js // gitprofile.config.js -module.exports = { +const config = { // ... hotjar: { id: '', @@ -429,7 +430,7 @@ You can link your social media services you're using, including LinkedIn, Twitte ```js // gitprofile.config.js -module.exports = { +const config = { // ... social: { linkedin: 'ariful-alam', @@ -454,7 +455,7 @@ To showcase your skills provide them here. ```js // gitprofile.config.js -module.exports = { +const config = { // ... skills: ['JavaScript', 'React.js'], }; @@ -468,7 +469,7 @@ Provide your job history in `experiences`. ```js // gitprofile.config.js -module.exports = { +const config = { // ... experiences: [ { @@ -497,7 +498,7 @@ Provide your education history in `education`. ```js // gitprofile.config.js -module.exports = { +const config = { // ... education: [ { @@ -524,7 +525,7 @@ Provide your industry certifications in `certifications`. ```js // gitprofile.config.js -module.exports = { +const config = { // ... certifications: [ { @@ -545,7 +546,7 @@ Your public repo from GitHub will be displayed here automatically. You can limit ```js // gitprofile.config.js -module.exports = { +const config = { // ... github: { username: 'arifszn', @@ -565,7 +566,7 @@ If you have [medium](https://medium.com) or [dev](https://dev.to) account, you c ```js // gitprofile.config.js -module.exports = { +const config = { // ... blog: { source: 'dev', @@ -579,6 +580,48 @@ module.exports = { The posts are fetched by [blog.js](https://github.com/arifszn/blog.js). + +### Custom footer (Optional) +In the configuration file you can optionally +define a custom HTML footer for your page. + +If it's not defined, a default footer "Made with GitProfile and ❤️" will be used instead. + +Examples: +```js +// gitprofile.config.js + +// This is an HTML footer +const config = { + [...] + footer: ` +

+ Built by + John Doe + + in 2023 + with ❤️ and + GitProfile +

+ `, +``` +or: + +```js +// gitprofile.config.js + +// This is a plain text footer +const config = { + [...] + footer: 'Copyright 2002, John Doe' +``` + + ## 💖 Support

You can show your support by starring this project. ★

diff --git a/gitprofile.config.js b/gitprofile.config.js index 4e1afc7..6f72b5e 100644 --- a/gitprofile.config.js +++ b/gitprofile.config.js @@ -82,6 +82,11 @@ const config = { to: '2014', }, ], + + // Optional custom footer. See README file, section "custom-footer", for details + /* + footer: '[...]', + */ // Display blog posts from your medium or dev account. (Optional) blog: { source: 'dev', // medium | dev diff --git a/package.json b/package.json index 3c4f2c4..6bfb90f 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.1.1", "license": "MIT", "author": "arifszn", "repository": { diff --git a/src/components/GitProfile.jsx b/src/components/GitProfile.jsx index 95d9843..2326a6b 100644 --- a/src/components/GitProfile.jsx +++ b/src/components/GitProfile.jsx @@ -11,6 +11,7 @@ import Certification from './certification'; import Education from './education'; import Project from './project'; import Blog from './blog'; +import Footer from './footer'; import { genericError, getInitialTheme, @@ -19,7 +20,6 @@ import { setupHotjar, tooManyRequestError, sanitizeConfig, - skeleton, } from '../helpers/utils'; import { HelmetProvider } from 'react-helmet-async'; import PropTypes from 'prop-types'; @@ -215,24 +215,7 @@ const GitProfile = ({ config }) => { className={`p-4 footer ${bgColor} text-base-content footer-center`} >
- -
- {loading ? ( - skeleton({ width: 'w-52', height: 'h-6' }) - ) : ( -

- Made with{' '} - GitProfile and - ❤️ -

- )} -
- +
diff --git a/src/components/footer/index.jsx b/src/components/footer/index.jsx new file mode 100644 index 0000000..292d0c1 --- /dev/null +++ b/src/components/footer/index.jsx @@ -0,0 +1,41 @@ +import PropTypes from 'prop-types'; + +import { skeleton } from '../../helpers/utils'; + +const DefaultFooter = () => { + return ( + +
+

+ Made with GitProfile and ❤️ +

+
+ + ); +}; + +const Footer = ({ content, loading }) => { + let footerContent = null; + if (content) { + footerContent =
; + } else { + footerContent = ; + } + + return ( +
+ {loading ? skeleton({ width: 'w-52', height: 'h-6' }) : footerContent} +
+ ); +}; + +Footer.propTypes = { + content: PropTypes.string, + loading: PropTypes.bool.isRequired, +}; + +export default Footer; diff --git a/src/helpers/utils.jsx b/src/helpers/utils.jsx index e4fa356..aab7291 100644 --- a/src/helpers/utils.jsx +++ b/src/helpers/utils.jsx @@ -135,6 +135,7 @@ export const sanitizeConfig = (config) => { ]; return { + footer: config?.footer, github: { username: config?.github?.username || '', sortBy: config?.github?.sortBy || 'stars', @@ -207,7 +208,7 @@ export const tooManyRequestError = (reset) => { target="_blank" rel="noopener noreferrer" > - rate limit. + rate limit ! Try again later{` ${reset}`}.

From c7ac31bb99f27496f8aac5c1a921f30180d56fac Mon Sep 17 00:00:00 2001 From: Christian Sarnataro Date: Mon, 9 Jan 2023 23:49:52 +0100 Subject: [PATCH 2/4] Updated code after code review --- README.md | 54 +++++++-------------------------- gitprofile.config.js | 13 +++++--- src/components/footer/index.jsx | 29 ++++-------------- 3 files changed, 26 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index e87ac48..dc59939 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,6 @@ ✓ [Education Section](#education) ✓ [Projects Section](#projects) ✓ [Blog Posts Section](#blog-posts) -✓ [Custom footer](#custom-footer) To view a live example, **[click here](https://arifszn.github.io/gitprofile)**. @@ -290,6 +289,17 @@ const config = { username: 'arifszn', // to hide blog section, keep it empty limit: 5, // How many posts to display. Max is 10. }, + // Display a footer. Supports plain text or HTML. (Optional) + footer: { + `

+ Made with GitProfile + and ❤️

` + }, googleAnalytics: { id: '', // GA3 tracking id/GA4 tag id UA-XXXXXXXXX-X | G-XXXXXXXXXX }, @@ -618,48 +628,6 @@ const config = { The posts are fetched by [blog.js](https://github.com/arifszn/blog.js). - -### Custom footer (Optional) -In the configuration file you can optionally -define a custom HTML footer for your page. - -If it's not defined, a default footer "Made with GitProfile and ❤️" will be used instead. - -Examples: -```js -// gitprofile.config.js - -// This is an HTML footer -const config = { - [...] - footer: ` -

- Built by - John Doe - - in 2023 - with ❤️ and - GitProfile -

- `, -``` -or: - -```js -// gitprofile.config.js - -// This is a plain text footer -const config = { - [...] - footer: 'Copyright 2002, John Doe' -``` - - ## 💖 Support

You can show your support by starring this project. ★

diff --git a/gitprofile.config.js b/gitprofile.config.js index 895edc0..53d3bbe 100644 --- a/gitprofile.config.js +++ b/gitprofile.config.js @@ -83,10 +83,15 @@ const config = { }, ], - // Optional custom footer. See README file, section "custom-footer", for details - /* - footer: '[...]', - */ + // Optional custom footer + footer: `

+ Made with GitProfile and ❤️ +

`, // To hide the `My Projects` section, keep it empty. externalProjects: [ { diff --git a/src/components/footer/index.jsx b/src/components/footer/index.jsx index 292d0c1..fa4c62c 100644 --- a/src/components/footer/index.jsx +++ b/src/components/footer/index.jsx @@ -2,33 +2,16 @@ import PropTypes from 'prop-types'; import { skeleton } from '../../helpers/utils'; -const DefaultFooter = () => { - return ( - -
-

- Made with GitProfile and ❤️ -

-
- - ); -}; - const Footer = ({ content, loading }) => { - let footerContent = null; - if (content) { - footerContent =
; - } else { - footerContent = ; - } + if (!content) return null; return (
- {loading ? skeleton({ width: 'w-52', height: 'h-6' }) : footerContent} + {loading ? ( + skeleton({ width: 'w-52', height: 'h-6' }) + ) : ( +
+ )}
); }; From 8d85ac349cb737473720f13f7a92de8bcc6e7505 Mon Sep 17 00:00:00 2001 From: Christian Sarnataro Date: Mon, 9 Jan 2023 23:51:28 +0100 Subject: [PATCH 3/4] Updated README with prettier fixes --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dc59939..9ef9916 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ ✓ [Certification Section](#certifications) ✓ [Education Section](#education) ✓ [Projects Section](#projects) -✓ [Blog Posts Section](#blog-posts) +✓ [Blog Posts Section](#blog-posts) To view a live example, **[click here](https://arifszn.github.io/gitprofile)**. From 82ce615ff6495832e64e85fc0f12213d21761e8c Mon Sep 17 00:00:00 2001 From: Christian Sarnataro Date: Mon, 9 Jan 2023 23:55:10 +0100 Subject: [PATCH 4/4] Added some clarifications as comments. --- gitprofile.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/gitprofile.config.js b/gitprofile.config.js index 53d3bbe..57a0c45 100644 --- a/gitprofile.config.js +++ b/gitprofile.config.js @@ -83,7 +83,7 @@ const config = { }, ], - // Optional custom footer + // Optional custom footer. To hide the footer, just remove it from here footer: `

Made with GitProfile and ❤️

`, + // To hide the `My Projects` section, keep it empty. externalProjects: [ {