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.
---
 public/projects/coldark.jpg                      | Bin 0 -> 26968 bytes
 public/projects/dotig.jpg                        | Bin 0 -> 28730 bytes
 public/projects/new-vhost.jpg                    | Bin 0 -> 11263 bytes
 src/components/ProjectSummary/ProjectSummary.tsx |  10 +++++-----
 src/content                                      |   2 +-
 src/pages/projet/[slug].tsx                      |   8 ++++----
 src/ts/types/app.ts                              |  21 +++++++++++----------
 7 files changed, 21 insertions(+), 20 deletions(-)
 create mode 100644 public/projects/coldark.jpg
 create mode 100644 public/projects/dotig.jpg
 create mode 100644 public/projects/new-vhost.jpg

diff --git a/public/projects/coldark.jpg b/public/projects/coldark.jpg
new file mode 100644
index 0000000..f5a7254
Binary files /dev/null and b/public/projects/coldark.jpg differ
diff --git a/public/projects/dotig.jpg b/public/projects/dotig.jpg
new file mode 100644
index 0000000..4ddbaca
Binary files /dev/null and b/public/projects/dotig.jpg differ
diff --git a/public/projects/new-vhost.jpg b/public/projects/new-vhost.jpg
new file mode 100644
index 0000000..7bf5d7b
Binary files /dev/null and b/public/projects/new-vhost.jpg differ
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"
diff --git a/src/content b/src/content
index 1dc7705..c85ab72 160000
--- a/src/content
+++ b/src/content
@@ -1 +1 @@
-Subproject commit 1dc7705299e9e4a05ecddd35dd1357d6426efe0a
+Subproject commit c85ab7210b3fc984bc06e2d672839cedc37344e5
diff --git a/src/pages/projet/[slug].tsx b/src/pages/projet/[slug].tsx
index 7ae50d6..b6a9cf2 100644
--- a/src/pages/projet/[slug].tsx
+++ b/src/pages/projet/[slug].tsx
@@ -31,7 +31,7 @@ const Project: NextPageWithLayout<ProjectProps> = ({
 }) => {
   const router = useRouter();
   const projectUrl = `${config.url}${router.asPath}`;
-  const { cover, id, intro, meta, title, seo } = project;
+  const { id, intro, meta, title, seo } = project;
   const dates = {
     publication: meta.publishedOn,
     update: meta.updatedOn,
@@ -76,8 +76,8 @@ const Project: NextPageWithLayout<ProjectProps> = ({
     dateModified: updateDate.toISOString(),
     datePublished: publicationDate.toISOString(),
     editor: { '@id': `${config.url}/#branding` },
-    thumbnailUrl: cover,
-    image: cover,
+    thumbnailUrl: meta.hasCover ? `/projects/${id}.jpg` : '',
+    image: meta.hasCover ? `/projects/${id}.jpg` : '',
     inLanguage: config.locales.defaultLocale,
     license: 'https://creativecommons.org/licenses/by-sa/4.0/deed.fr',
     mainEntityOfPage: { '@id': `${projectUrl}` },
@@ -111,7 +111,7 @@ const Project: NextPageWithLayout<ProjectProps> = ({
           <ToC />
         </Sidebar>
         <div className={styles.body}>
-          <ProjectSummary title={title} cover={cover} meta={meta} />
+          <ProjectSummary id={id} title={title} meta={meta} />
           <ProjectContent components={components} />
         </div>
         <Sidebar position="right">
diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index ddd64d1..636aeed 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -94,15 +94,6 @@ export type Meta = {
   updatedOn: string;
 };
 
-export type ProjectMeta = Omit<Meta, 'title'> & {
-  license: string;
-  repos?: {
-    github?: string;
-    gitlab?: string;
-  };
-  technologies?: string[];
-};
-
 export type PageInfo = {
   endCursor: string;
   hasNextPage: boolean;
@@ -110,7 +101,7 @@ export type PageInfo = {
 };
 
 export type Project = {
-  cover: string;
+  cover?: string;
   id: string;
   intro: string;
   meta: ProjectMeta;
@@ -123,6 +114,16 @@ export type Project = {
   };
 };
 
+export type ProjectMeta = Omit<Meta, 'title'> & {
+  hasCover: boolean;
+  license: string;
+  repos?: {
+    github?: string;
+    gitlab?: string;
+  };
+  technologies?: string[];
+};
+
 export type ProjectProps = {
   project: Project;
 };
-- 
cgit v1.2.3