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

@@ -72,6 +72,7 @@
 ✓ [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)**.
 
@@ -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: `
+    <p class="font-mono text-sm">
+      Built by <a href="https://www.example.com" class="text-primary" target="_blank" rel="noreferrer">
+        John Doe
+      </a>
+      in <strong>2023</strong>
+      with ❤️ and 
+      <a
+        class="text-primary"
+        href="https://github.com/arifszn/gitprofile"
+        target="_blank"
+        rel="noreferrer"
+      >GitProfile</a>
+    </p>
+    `,
+```
+or:
+
+```js
+// gitprofile.config.js
+
+// This is a plain text footer
+const config = {
+  [...]
+  footer: 'Copyright 2002, John Doe'
+```
+
+
 ## 💖 Support
 
 <p>You can show your support by starring this project. ★</p>

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

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

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`}
               >
                 <div className="card compact bg-base-100 shadow">
-                  <a
+                  <Footer content={sanitizedConfig.footer} loading={loading} />
-                    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>
                 </div>
               </footer>
             </Fragment>

src/components/footer/index.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+
+import { skeleton } from '../../helpers/utils';
+
+const DefaultFooter = () => {
+  return (
+    <a
+      href="https://github.com/arifszn/gitprofile"
+      target="_blank"
+      rel="noreferrer"
+    >
+      <div>
+        <p className="font-mono text-sm">
+          Made with <span className="text-primary">GitProfile</span> and ❤️
+        </p>
+      </div>
+    </a>
+  );
+};
+
+const Footer = ({ content, loading }) => {
+  let footerContent = null;
+  if (content) {
+    footerContent = <div dangerouslySetInnerHTML={{ __html: content }} />;
+  } else {
+    footerContent = <DefaultFooter />;
+  }
+
+  return (
+    <div className="card-body">
+      {loading ? skeleton({ width: 'w-52', height: 'h-6' }) : footerContent}
+    </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',
@@ -207,7 +208,7 @@ export const tooManyRequestError = (reset) => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          rate limit.
+          rate limit
         </a>
         ! Try again later{` ${reset}`}.
       </p>