Clean commit for showcases with image possibility

gitprofile.config.js

@@ -82,6 +82,22 @@ const config = {
       to: '2014',
     },
   ],
+  showcases: [
+    {
+      name: 'Website name 1',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
+      //   image_url: 'https://via.placeholder.com/250x250',
+      html_url: 'https://example.com',
+    },
+    {
+      name: 'Website name 2',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
+      image_url: 'https://via.placeholder.com/250x250',
+      html_url: 'https://example.com',
+    },
+  ],
   // Display blog posts from your medium or dev account. (Optional)
   blog: {
     source: 'dev', // medium | dev

src/components/GitProfile.jsx

@@ -9,6 +9,7 @@ import Skill from './skill';
 import Experience from './experience';
 import Certification from './certification';
 import Education from './education';
+import Showcase from './showcase';
 import Project from './project';
 import Blog from './blog';
 import {
@@ -196,6 +197,12 @@ const GitProfile = ({ config }) => {
                   </div>
                   <div className="lg:col-span-2 col-span-1">
                     <div className="grid grid-cols-1 gap-6">
+                      <Showcase
+                        loading={loading}
+                        cases={sanitizedConfig.showcases}
+                        github={sanitizedConfig.github}
+                        googleAnalytics={sanitizedConfig.googleAnalytics}
+                      />
                       <Project
                         repo={repo}
                         loading={loading}
@@ -269,6 +276,7 @@ GitProfile.propTypes = {
       email: PropTypes.string,
     }),
     skills: PropTypes.array,
+    showcases: PropTypes.array,
     experiences: PropTypes.arrayOf(
       PropTypes.shape({
         company: PropTypes.string,

src/components/showcase/index.jsx

@@ -0,0 +1,146 @@
+import { Fragment } from 'react';
+import { AiOutlineLink } from 'react-icons/ai';
+import PropTypes from 'prop-types';
+import { skeleton } from '../../helpers/utils';
+import { ga } from '../../helpers/utils';
+
+const Showcase = ({ cases, loading, github, googleAnalytics }) => {
+  const renderSkeleton = () => {
+    let array = [];
+    for (let index = 0; index < github.limit; index++) {
+      array.push(
+        <div className="card shadow-lg compact bg-base-100" key={index}>
+          <div className="flex justify-between flex-col p-8 h-full w-full">
+            <div>
+              <div className="flex items-center">
+                <span>
+                  <h5 className="card-title text-lg">
+                    {skeleton({ width: 'w-32', height: 'h-8' })}
+                  </h5>
+                </span>
+              </div>
+              <div className="mb-5 mt-1">
+                {skeleton({
+                  width: 'w-full',
+                  height: 'h-4',
+                  className: 'mb-2',
+                })}
+                {skeleton({ width: 'w-full', height: 'h-4' })}
+              </div>
+            </div>
+            <div className="flex justify-between">
+              <div className="flex flex-grow">
+                <span className="mr-3 flex items-center">
+                  {skeleton({ width: 'w-12', height: 'h-4' })}
+                </span>
+                <span className="flex items-center">
+                  {skeleton({ width: 'w-12', height: 'h-4' })}
+                </span>
+              </div>
+              <div>
+                <span className="flex items-center">
+                  {skeleton({ width: 'w-12', height: 'h-4' })}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return array;
+  };
+
+  const renderShowcases = () => {
+    return cases.map((item, index) => (
+      <a
+        className="card shadow-lg compact bg-base-100 cursor-pointer"
+        href={item.html_url}
+        key={index}
+        onClick={(e) => {
+          e.preventDefault();
+
+          try {
+            if (googleAnalytics?.id) {
+              ga.event({
+                action: 'Click showcase',
+                params: {
+                  project: item.name,
+                },
+              });
+            }
+          } catch (error) {
+            console.error(error);
+          }
+
+          window?.open(item.html_url, '_blank');
+        }}
+      >
+        <div className="flex justify-between flex-col p-8 h-full w-full">
+          <div>
+            <div className="flex items-center opacity-60">
+              <AiOutlineLink className="mr-2" />
+              <span>
+                <h5 className="card-title text-lg text-base-content">
+                  {item.name}
+                </h5>
+              </span>
+            </div>
+            <div className="mt-1 flex flex-col md:flex-row">
+              {item?.image_url && (
+                <div className="flex flex-col md:mr-5">
+                  <img src={item.image_url} alt={item.name} />
+                </div>
+              )}
+              <div className="flex flex-col">
+                <p className="mt-1 text-base-content text-opacity-60 text-sm">
+                  {item.description}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a>
+    ));
+  };
+
+  return (
+    <Fragment>
+      <div className="col-span-1 lg:col-span-2">
+        <div className="grid grid-cols-2 gap-6">
+          <div className="col-span-2">
+            <div className="card compact bg-gradient-to-br to-base-200 from-base-100 shadow">
+              <div className="card-body">
+                <div className="mx-3 flex items-center justify-between mb-2">
+                  <h5 className="card-title">
+                    {loading ? (
+                      skeleton({ width: 'w-28', height: 'h-8' })
+                    ) : (
+                      <span className="text-base-content opacity-70">
+                        My Showcases
+                      </span>
+                    )}
+                  </h5>
+                </div>
+                <div className="col-span-2">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    {loading || !cases ? renderSkeleton() : renderShowcases()}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+Showcase.propTypes = {
+  cases: PropTypes.array,
+  loading: PropTypes.bool.isRequired,
+  github: PropTypes.object.isRequired,
+  googleAnalytics: PropTypes.object,
+};
+
+export default Showcase;

src/helpers/utils.jsx

@@ -162,6 +162,7 @@ export const sanitizeConfig = (config) => {
       fileUrl: config?.resume?.fileUrl || '',
     },
     skills: config?.skills || [],
+    showcases: config?.showcases || [],
     experiences: config?.experiences || [],
     certifications: config?.certifications || [],
     education: config?.education || [],