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' +``` + + ## 💖 SupportYou 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`} > 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 ❤️ +
+