diff --git a/README.md b/README.md index 2298efc..9ef9916 100644 --- a/README.md +++ b/README.md @@ -289,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 }, @@ -367,7 +378,7 @@ The default theme can be specified. ```js // gitprofile.config.js -module.exports = { +const config = { // ... themeConfig: { defaultTheme: 'light', @@ -384,7 +395,7 @@ You can create your own custom theme by modifying these values. Theme `procyon` ```js // gitprofile.config.js -module.exports = { +const config = { // ... themeConfig: { customTheme: { @@ -407,7 +418,7 @@ module.exports = { ```js // gitprofile.config.js -module.exports = { +const config = { // ... googleAnalytics: { id: '', @@ -423,7 +434,7 @@ Besides tracking visitors, it will track `click events` on projects and blog pos ```js // gitprofile.config.js -module.exports = { +const config = { // ... hotjar: { id: '', @@ -446,7 +457,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', @@ -471,7 +482,7 @@ To showcase your skills provide them here. ```js // gitprofile.config.js -module.exports = { +const config = { // ... skills: ['JavaScript', 'React.js'], }; @@ -485,7 +496,7 @@ Provide your job history in `experiences`. ```js // gitprofile.config.js -module.exports = { +const config = { // ... experiences: [ { @@ -514,7 +525,7 @@ Provide your education history in `education`. ```js // gitprofile.config.js -module.exports = { +const config = { // ... education: [ { @@ -541,7 +552,7 @@ Provide your industry certifications in `certifications`. ```js // gitprofile.config.js -module.exports = { +const config = { // ... certifications: [ { @@ -564,7 +575,7 @@ Your public repo from GitHub will be displayed in the `Github Projects` section ```js // gitprofile.config.js -module.exports = { +const config = { // ... github: { username: 'arifszn', @@ -584,7 +595,7 @@ In this section you can showcase your external/personal projects. ```js // gitprofile.config.js -module.exports = { +const config = { // ... externalProjects: [ { @@ -603,7 +614,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', diff --git a/gitprofile.config.js b/gitprofile.config.js index 3a96094..57a0c45 100644 --- a/gitprofile.config.js +++ b/gitprofile.config.js @@ -83,6 +83,16 @@ const config = { }, ], + // 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: [ { @@ -100,7 +110,6 @@ const config = { link: 'https://example.com', }, ], - // Display blog posts from your medium or dev account. (Optional) blog: { source: 'dev', // medium | dev diff --git a/package.json b/package.json index 4835769..a537d07 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.2.1", + "version": "2.2.2", "license": "MIT", "author": "arifszn", "repository": { diff --git a/src/components/GitProfile.jsx b/src/components/GitProfile.jsx index 93b7630..0bf9bed 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'; @@ -221,24 +221,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..fa4c62c --- /dev/null +++ b/src/components/footer/index.jsx @@ -0,0 +1,24 @@ +import PropTypes from 'prop-types'; + +import { skeleton } from '../../helpers/utils'; + +const Footer = ({ content, loading }) => { + if (!content) return null; + + return ( +
+ {loading ? ( + skeleton({ width: 'w-52', height: 'h-6' }) + ) : ( +
+ )} +
+ ); +}; + +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 7a3c22d..f2ed1f4 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', @@ -208,7 +209,7 @@ export const tooManyRequestError = (reset) => { target="_blank" rel="noopener noreferrer" > - rate limit. + rate limit ! Try again later{` ${reset}`}.