From 04603e7bd3a2667145938a298685625dd5e15d44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michel=20Dore=CC=81?= <michel@doremail.nl>
Date: Tue, 11 Oct 2022 22:48:43 +0200
Subject: [PATCH] Added type and new styling for showcases

---
 gitprofile.config.js              |  13 +--
 src/components/GitProfile.jsx     |  11 ++-
 src/components/showcase/index.jsx | 132 +++++++++++++++---------------
 types/index.d.ts                  |  12 +++
 4 files changed, 92 insertions(+), 76 deletions(-)

diff --git a/gitprofile.config.js b/gitprofile.config.js
index 772bf6a..2d0b414 100644
--- a/gitprofile.config.js
+++ b/gitprofile.config.js
@@ -86,16 +86,17 @@ const config = {
     {
       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',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. \
+        Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
+      link: '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',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. \
+        Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
+      imageUrl: 'https://via.placeholder.com/250x250',
+      link: 'https://example.com',
     },
   ],
   // Display blog posts from your medium or dev account. (Optional)
diff --git a/src/components/GitProfile.jsx b/src/components/GitProfile.jsx
index 7da7a25..90d06cb 100644
--- a/src/components/GitProfile.jsx
+++ b/src/components/GitProfile.jsx
@@ -197,18 +197,17 @@ 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}
                         github={sanitizedConfig.github}
                         googleAnalytics={sanitizedConfig.googleAnalytics}
                       />
+                      <Showcase
+                        loading={loading}
+                        cases={sanitizedConfig.showcases}
+                        googleAnalytics={sanitizedConfig.googleAnalytics}
+                      />
                       <Blog
                         loading={loading}
                         googleAnalytics={sanitizedConfig.googleAnalytics}
diff --git a/src/components/showcase/index.jsx b/src/components/showcase/index.jsx
index bf0151d..82c0fc4 100644
--- a/src/components/showcase/index.jsx
+++ b/src/components/showcase/index.jsx
@@ -3,69 +3,65 @@ import { AiOutlineLink } from 'react-icons/ai';
 import PropTypes from 'prop-types';
 import { skeleton } from '../../helpers/utils';
 import { ga } from '../../helpers/utils';
+import LazyImage from '../lazy-image';
 
-const Showcase = ({ cases, loading, github, googleAnalytics }) => {
+const Showcase = ({ cases, loading, 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>
+    return [
+      <div className="card shadow-lg compact bg-base-100" key="">
+        <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="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 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>
-      );
-    }
-
-    return array;
+      </div>,
+    ];
   };
 
   const renderShowcases = () => {
     return cases.map((item, index) => (
       <a
         className="card shadow-lg compact bg-base-100 cursor-pointer"
-        href={item.html_url}
         key={index}
+        href={item.link}
         onClick={(e) => {
           e.preventDefault();
 
           try {
             if (googleAnalytics?.id) {
               ga.event({
-                action: 'Click showcase',
+                action: 'Click Showcase',
                 params: {
-                  project: item.name,
+                  post: item.name,
                 },
               });
             }
@@ -73,29 +69,38 @@ const Showcase = ({ cases, loading, github, googleAnalytics }) => {
             console.error(error);
           }
 
-          window?.open(item.html_url, '_blank');
+          window?.open(item.link, '_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 className="p-8 h-full w-full">
+          <div className="flex items-center flex-col md:flex-row">
+            {item.imageUrl && (
+              <div className="avatar mb-5 md:mb-0 opacity-90">
+                <div className="w-24 h-24 mask mask-squircle">
+                  <LazyImage
+                    src={item.imageUrl}
+                    alt={'thumbnail'}
+                    placeholder={skeleton({
+                      width: 'w-full',
+                      height: 'h-full',
+                      shape: '',
+                    })}
+                  />
+                </div>
+              </div>
+            )}
+            <div className="w-full">
+              <div className="flex items-start px-4">
+                <div className="text-center md:text-left w-full">
+                  <h2 className="font-semibold text-base-content opacity-60">
+                    <div className="flex flex-row items-center">
+                      <AiOutlineLink className="mr-1" /> {item.name}
+                    </div>
+                  </h2>
+                  <p className="mt-3 text-base-content text-opacity-60 text-sm">
+                    {item.description}
+                  </p>
                 </div>
-              )}
-              <div className="flex flex-col">
-                <p className="mt-1 text-base-content text-opacity-60 text-sm">
-                  {item.description}
-                </p>
               </div>
             </div>
           </div>
@@ -139,7 +144,6 @@ const Showcase = ({ cases, loading, github, googleAnalytics }) => {
 Showcase.propTypes = {
   cases: PropTypes.array,
   loading: PropTypes.bool.isRequired,
-  github: PropTypes.object.isRequired,
   googleAnalytics: PropTypes.object,
 };
 
diff --git a/types/index.d.ts b/types/index.d.ts
index 6278739..7354923 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -221,6 +221,13 @@ export interface Certifications {
   link?: string;
 }
 
+export interface Showcase {
+  name?: string;
+  description?: string;
+  imageUrl?: string;
+  link?: string;
+}
+
 export interface Education {
   institution?: string;
   degree?: string;
@@ -257,6 +264,11 @@ export interface Config {
    * Experience list
    */
   experiences?: Array<Experience>;
+  
+  /**
+   * Showcase list
+   */
+  showcases?: Array<Showcase>;
 
   /**
    * Certifications list