Merge pull request #277 from arifszn/footer

Display custom footer

README.md

@@ -356,6 +356,9 @@ const config = {
       '--rounded-btn': '3rem',
     },
   },
+
+  // Optional Footer. Supports plain text or HTML.
+  footer: `Copyright © 2023 John Doe`,
 };
 ```
 
@@ -367,7 +370,7 @@ The default theme can be specified.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   themeConfig: {
     defaultTheme: 'light',
@@ -384,7 +387,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 +410,7 @@ module.exports = {
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   googleAnalytics: {
     id: '',
@@ -423,7 +426,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 +449,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 +474,7 @@ To showcase your skills provide them here.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   skills: ['JavaScript', 'React.js'],
 };
@@ -485,7 +488,7 @@ Provide your job history in `experiences`.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   experiences: [
     {
@@ -514,7 +517,7 @@ Provide your education history in `education`.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   education: [
     {
@@ -541,7 +544,7 @@ Provide your industry certifications in `certifications`.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   certifications: [
     {
@@ -564,7 +567,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 +587,7 @@ In this section you can showcase your external/personal projects.
 
 ```js
 // gitprofile.config.js
-module.exports = {
+const config = {
   // ...
   externalProjects: [
     {
@@ -603,7 +606,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

@@ -100,7 +100,6 @@ const config = {
       link: 'https://example.com',
     },
   ],
-
   // Display blog posts from your medium or dev account. (Optional)
   blog: {
     source: 'dev', // medium | dev
@@ -116,7 +115,7 @@ const config = {
     snippetVersion: 6,
   },
   themeConfig: {
-    defaultTheme: 'business',
+    defaultTheme: 'winter',
 
     // Hides the switch in the navbar
     // Useful if you want to support a single color mode
@@ -174,6 +173,13 @@ const config = {
       '--rounded-btn': '3rem',
     },
   },
+
+  // Optional Footer. Supports plain text or HTML.
+  footer: `Made with <a 
+      class="text-primary" href="https://github.com/arifszn/gitprofile"
+      target="_blank"
+      rel="noreferrer"
+    >GitProfile</a> and ❤️`,
 };
 
 export default config;

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>
@@ -274,6 +257,9 @@ GitProfile.propTypes = {
       phone: PropTypes.string,
       email: PropTypes.string,
     }),
+    resume: PropTypes.shape({
+      fileUrl: PropTypes.string,
+    }),
     skills: PropTypes.array,
     externalProjects: PropTypes.arrayOf(
       PropTypes.shape({
@@ -335,6 +321,7 @@ GitProfile.propTypes = {
         '--rounded-btn': PropTypes.string,
       }),
     }),
+    footer: PropTypes.string,
   }).isRequired,
 };
 

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

@@ -187,6 +187,7 @@ export const sanitizeConfig = (config) => {
       themes: themes,
       customTheme: customTheme,
     },
+    footer: config?.footer,
   };
 };
 
@@ -208,7 +209,7 @@ export const tooManyRequestError = (reset) => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          rate limit.
+          rate limit
         </a>
         ! Try again later{` ${reset}`}.
       </p>

types/index.d.ts

@@ -299,6 +299,11 @@ export interface Config {
    * Theme config
    */
   themeConfig?: ThemeConfig;
+
+  /**
+   * Custom footer
+   */
+  footer?: string;
 }
 
 export interface GitProfileProps {