Rename GitHub Project component

gitprofile.config.js

@@ -3,11 +3,37 @@
 const config = {
   github: {
     username: 'arifszn', // Your GitHub org/user name. (Required)
-    sortBy: 'stars', // stars | updated
-    limit: 10, // How many projects to display.
-    exclude: {
-      forks: false, // Forked projects will not be displayed if set to true.
-      projects: [], // These projects will not be displayed. example: ['my-project1', 'my-project2']
+  },
+  projects: {
+    github: {
+      header: 'Github Projects',
+      display: true, // Display GitHub projects?
+      sortBy: 'stars', // stars | updated
+      limit: 10, // How many projects to display.
+      exclude: {
+        forks: false, // Forked projects will not be displayed if set to true.
+        projects: [], // These projects will not be displayed. example: ['my-project1', 'my-project2']
+      },
+    },
+    external: {
+      header: 'External Projects',
+      display: true, // Display external projects?
+      projects: [
+        {
+          title: 'Project Name',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+          imageUrl: 'https://via.placeholder.com/250x250',
+          link: 'https://example.com',
+        },
+        {
+          title: 'Project Name',
+          description:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
+          imageUrl: 'https://via.placeholder.com/250x250',
+          link: 'https://example.com',
+        },
+      ],
     },
   },
   social: {
@@ -87,23 +113,6 @@ const config = {
     },
   ],
 
-  // To hide the `My Projects` section, keep it empty.
-  externalProjects: [
-    {
-      title: 'Project Name',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
-      imageUrl: 'https://via.placeholder.com/250x250',
-      link: 'https://example.com',
-    },
-    {
-      title: 'Project Name',
-      description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut.',
-      imageUrl: 'https://via.placeholder.com/250x250',
-      link: 'https://example.com',
-    },
-  ],
   // Display blog posts from your medium or dev account. (Optional)
   blog: {
     source: 'dev', // medium | dev

src/components/GitProfile.jsx

@@ -9,7 +9,7 @@ import Skill from './skill';
 import Experience from './experience';
 import Certification from './certification';
 import Education from './education';
-import Project from './project';
+import GitHubProject from './github-project';
 import Blog from './blog';
 import Footer from './footer';
 import {
@@ -77,15 +77,15 @@ const GitProfile = ({ config }) => {
           return;
         }
 
-        sanitizedConfig.github.exclude.projects.forEach((project) => {
+        sanitizedConfig.projects.github.exclude.projects.forEach((project) => {
           excludeRepo += `+-repo:${sanitizedConfig.github.username}/${project}`;
         });
 
         let query = `user:${
           sanitizedConfig.github.username
-        }+fork:${!sanitizedConfig.github.exclude.forks}${excludeRepo}`;
+        }+fork:${!sanitizedConfig.projects.github.exclude.forks}${excludeRepo}`;
 
-        let url = `https://api.github.com/search/repositories?q=${query}&sort=${sanitizedConfig.github.sortBy}&per_page=${sanitizedConfig.github.limit}&type=Repositories`;
+        let url = `https://api.github.com/search/repositories?q=${query}&sort=${sanitizedConfig.projects.github.sortBy}&per_page=${sanitizedConfig.projects.github.limit}&type=Repositories`;
 
         axios
           .get(url, {
@@ -197,7 +197,7 @@ const GitProfile = ({ config }) => {
                   </div>
                   <div className="lg:col-span-2 col-span-1">
                     <div className="grid grid-cols-1 gap-6">
-                      <Project
+                      <GitHubProject
                         repo={repo}
                         loading={loading}
                         github={sanitizedConfig.github}
@@ -236,13 +236,31 @@ GitProfile.propTypes = {
   config: PropTypes.shape({
     github: PropTypes.shape({
       username: PropTypes.string.isRequired,
-      sortBy: PropTypes.oneOf(['stars', 'updated']),
-      limit: PropTypes.number,
-      exclude: PropTypes.shape({
-        forks: PropTypes.bool,
-        projects: PropTypes.array,
-      }),
     }).isRequired,
+    projects: {
+      github: PropTypes.shape({
+        header: PropTypes.string,
+        display: PropTypes.bool,
+        sortBy: PropTypes.oneOf(['stars', 'updated']),
+        limit: PropTypes.number,
+        exclude: PropTypes.shape({
+          forks: PropTypes.bool,
+          projects: PropTypes.array,
+        }),
+      }),
+      projects: PropTypes.shape({
+        header: PropTypes.string,
+        display: PropTypes.bool,
+        projects: PropTypes.arrayOf(
+          PropTypes.shape({
+            title: PropTypes.string.isRequired,
+            description: PropTypes.string.isRequired,
+            link: PropTypes.string.isRequired,
+            imageUrl: PropTypes.string,
+          })
+        ),
+      }),
+    },
     social: PropTypes.shape({
       linkedin: PropTypes.string,
       twitter: PropTypes.string,
@@ -265,14 +283,6 @@ GitProfile.propTypes = {
       fileUrl: PropTypes.string,
     }),
     skills: PropTypes.array,
-    externalProjects: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string.isRequired,
-        description: PropTypes.string.isRequired,
-        link: PropTypes.string.isRequired,
-        imageUrl: PropTypes.string,
-      })
-    ),
     experiences: PropTypes.arrayOf(
       PropTypes.shape({
         company: PropTypes.string,

src/components/github-project/index.jsx

@@ -4,7 +4,7 @@ import { AiOutlineFork, AiOutlineStar } from 'react-icons/ai';
 import { MdInsertLink } from 'react-icons/md';
 import { ga, languageColor, skeleton } from '../../helpers/utils';
 
-const Project = ({ repo, loading, github, googleAnalytics }) => {
+const GitHubProject = ({ repo, loading, github, googleAnalytics }) => {
   if (!loading && Array.isArray(repo) && repo.length === 0) {
     return <></>;
   }
@@ -166,11 +166,11 @@ const Project = ({ repo, loading, github, googleAnalytics }) => {
   );
 };
 
-Project.propTypes = {
+GitHubProject.propTypes = {
   repo: PropTypes.array,
   loading: PropTypes.bool.isRequired,
   github: PropTypes.object.isRequired,
   googleAnalytics: PropTypes.object.isRequired,
 };
 
-export default Project;
+export default GitHubProject;

src/helpers/utils.jsx

@@ -137,11 +137,22 @@ export const sanitizeConfig = (config) => {
   return {
     github: {
       username: config?.github?.username || '',
-      sortBy: config?.github?.sortBy || 'stars',
-      limit: config?.github?.limit || 8,
-      exclude: {
-        forks: config?.github?.exclude?.forks || false,
-        projects: config?.github?.exclude?.projects || [],
+    },
+    projects: {
+      github: {
+        header: config?.projects?.github?.header || 'GitHub Projects',
+        display: config?.projects?.github?.display || true,
+        sortBy: config?.projects?.github?.sortBy || 'stars',
+        limit: config?.projects?.github?.limit || 8,
+        exclude: {
+          forks: config?.projects?.github?.exclude?.forks || false,
+          projects: config?.projects?.github?.exclude?.projects || [],
+        },
+      },
+      external: {
+        header: config?.projects?.external?.header || 'External Projects',
+        display: config?.projects?.external?.display || true,
+        projects: config?.projects?.external?.projects || [],
       },
     },
     social: {
@@ -166,7 +177,6 @@ export const sanitizeConfig = (config) => {
       fileUrl: config?.resume?.fileUrl || '',
     },
     skills: config?.skills || [],
-    externalProjects: config?.externalProjects || [],
     experiences: config?.experiences || [],
     certifications: config?.certifications || [],
     education: config?.education || [],

types/index.d.ts

@@ -9,32 +9,63 @@ export interface Github {
    * GitHub org/user name
    */
   username: string;
+}
 
-  /**
-   * stars | updated
-   */
-  sortBy?: string;
-
-  /**
-   * How many projects to display
-   */
-  limit?: number;
-
-  /**
-   * Exclude projects option
-   */
-  exclude?: {
+export interface Projects {
+  github: {
     /**
-     * Forked projects will not be displayed if set to true
+     * Header Title
      */
-    forks?: boolean;
+    header?: string;
 
     /**
-     * These projects will not be displayed
-     *
-     * example: ['my-project1', 'my-project2']
+     * Display GitHub projects?
      */
-    projects?: Array<string>;
+    display?: boolean;
+
+    /**
+     * stars | updated
+     */
+    sortBy?: string;
+
+    /**
+     * How many projects to display
+     */
+    limit?: number;
+
+    /**
+     * Exclude projects option
+     */
+    exclude?: {
+      /**
+       * Forked projects will not be displayed if set to true
+       */
+      forks?: boolean;
+
+      /**
+       * These projects will not be displayed
+       *
+       * example: ['my-project1', 'my-project2']
+       */
+      projects?: Array<string>;
+    };
+  };
+
+  external: {
+    /**
+     * Header Title
+     */
+    header?: string;
+
+    /**
+     * Display external projects?
+     */
+    display?: boolean;
+
+    /**
+     * External Projects
+     */
+    projects?: Array<ExternalProjects>;
   };
 }
 
@@ -265,6 +296,11 @@ export interface Config {
    */
   github: Github;
 
+  /**
+   * Projects
+   */
+  projects?: Projects;
+
   /**
    * Social links
    */
@@ -285,11 +321,6 @@ export interface Config {
    */
   experiences?: Array<Experience>;
 
-  /**
-   * External Projects
-   */
-  externalProjects?: Array<ExternalProjects>;
-
   /**
    * Certifications list
    */