Merge pull request #272 from csarnataro/add-option-to-display-footer

Add option to display footer

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: {
+    `<p class="font-mono text-sm">
+      Made with <a
+        class="text-primary"
+        href="https://github.com/arifszn/gitprofile"
+        target="_blank"
+        rel="noreferrer"
+      >GitProfile</a>
+      and ❤️</p>`
+  },
   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',

gitprofile.config.js

@@ -83,6 +83,16 @@ const config = {
     },
   ],
 
+  // Optional custom footer. To hide the footer, just remove it from here
+  footer: `<p class="font-mono text-sm">
+    Made with <a
+      class="text-primary"
+      href="https://github.com/arifszn/gitprofile"
+      target="_blank"
+      rel="noreferrer"
+    >GitProfile</a> and ❤️
+    </p>`,
+
   // 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

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": {

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`}
               >
                 <div className="card compact bg-base-100 shadow">
-                  <a
-                    className="card-body"
-                    href="https://github.com/arifszn/gitprofile"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    <div>
-                      {loading ? (
-                        skeleton({ width: 'w-52', height: 'h-6' })
-                      ) : (
-                        <p className="font-mono text-sm">
-                          Made with{' '}
-                          <span className="text-primary">GitProfile</span> and
-                          ❤️
-                        </p>
-                      )}
-                    </div>
-                  </a>
+                  <Footer content={sanitizedConfig.footer} loading={loading} />
                 </div>
               </footer>
             </Fragment>

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 (
+    <div className="card-body">
+      {loading ? (
+        skeleton({ width: 'w-52', height: 'h-6' })
+      ) : (
+        <div dangerouslySetInnerHTML={{ __html: content }} />
+      )}
+    </div>
+  );
+};
+
+Footer.propTypes = {
+  content: PropTypes.string,
+  loading: PropTypes.bool.isRequired,
+};
+
+export default Footer;

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
         </a>
         ! Try again later{` ${reset}`}.
       </p>