From e9c68e4b3ddcfe638bc611f421d55f372e0100e9 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 27 Jan 2022 11:43:33 +0100
Subject: fix(project): make sure the project cover is displayed

Next.js does not support the dynamic import of images. Sometimes the
images was displayed and other times the loading did not finish. So
even if I would like to keep the content in a same place, I choose to
put the projects covers inside the public directory. Then I use a
hasCover boolean to determine if the project cover need to be printed.
---
 src/components/ProjectSummary/ProjectSummary.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/ProjectSummary/ProjectSummary.tsx b/src/components/ProjectSummary/ProjectSummary.tsx
index 1b07eb1..b32c11f 100644
--- a/src/components/ProjectSummary/ProjectSummary.tsx
+++ b/src/components/ProjectSummary/ProjectSummary.tsx
@@ -11,25 +11,25 @@ import { useRouter } from 'next/router';
 import styles from './ProjectSummary.module.scss';
 
 const ProjectSummary = ({
+  id,
   title,
-  cover,
   meta,
 }: {
+  id: string;
   title: string;
-  cover: string;
   meta: ProjectMeta;
 }) => {
-  const { license, repos, technologies } = meta;
+  const { hasCover, license, repos, technologies } = meta;
   const router = useRouter();
   const locale = router.locale ? router.locale : config.locales.defaultLocale;
   const { data } = useGithubApi(repos?.github ? repos.github : '');
 
   return (
     <div className={styles.wrapper}>
-      {cover && (
+      {hasCover && (
         <div className={styles.cover}>
           <Image
-            src={cover}
+            src={`/projects/${id}.jpg`}
             alt={t`${title} preview`}
             layout="fill"
             objectFit="contain"
-- 
cgit v1.2.3