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}`}.