chore: update project preview appearance

6 files changed, 40 insertions, 28 deletions

diff --git a/src/components/ProjectPreview/ProjectPreview.module.scss b/src/components/ProjectPreview/ProjectPreview.module.scss
index f29dc49..3bf56ec 100644
--- a/src/components/ProjectPreview/ProjectPreview.module.scss
+++ b/src/components/ProjectPreview/ProjectPreview.module.scss
@@ -4,7 +4,8 @@
   display: flex;
   flex-flow: column nowrap;
   height: 100%;
-  padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
+  padding: var(--spacing-md);
+  text-align: center;
 }
 
 .cover {
@@ -25,12 +26,17 @@
   margin: 0 0 var(--spacing-xs);
 }
 
+.footer {
+  margin-top: auto;
+}
+
 .meta {
   display: block;
 
   &__item {
     display: flex;
     flex-flow: row wrap;
+    place-content: center;
     gap: var(--spacing-2xs);
   }
 }
@@ -85,3 +91,8 @@
     }
   }
 }
+
+.techno {
+  padding: 0 var(--spacing-2xs);
+  border: fun.convert-px(1) solid var(--color-primary-darker);
+}
diff --git a/src/components/ProjectPreview/ProjectPreview.tsx b/src/components/ProjectPreview/ProjectPreview.tsx
index f5d2e8f..cba0b02 100644
--- a/src/components/ProjectPreview/ProjectPreview.tsx
+++ b/src/components/ProjectPreview/ProjectPreview.tsx
@@ -6,41 +6,41 @@ import Link from 'next/link';
 import styles from './ProjectPreview.module.scss';
 
 const ProjectPreview = ({ project }: { project: Project }) => {
+  const { id, meta, tagline, title } = project;
+
   return (
     <Link href={`/projet/${project.slug}`}>
       <a className={styles.link}>
         <article className={styles.article}>
           <header>
-            {project.cover && (
+            {meta.hasCover && (
               <div className={styles.cover}>
                 <Image
-                  src={project.cover}
+                  src={`/projects/${id}.jpg`}
                   layout="fill"
                   objectFit="contain"
                   objectPosition="center"
-                  alt={t`${project.title} picture`}
+                  alt={t`${title} picture`}
                 />
               </div>
             )}
-            <h2 className={styles.title}>{project.title}</h2>
+            <h2 className={styles.title}>{title}</h2>
           </header>
-          <div
-            className={styles.body}
-            dangerouslySetInnerHTML={{ __html: project.intro }}
-          ></div>
-          <footer>
+          {tagline && (
+            <div
+              className={styles.body}
+              dangerouslySetInnerHTML={{ __html: tagline }}
+            ></div>
+          )}
+          <footer className={styles.footer}>
             <dl className={styles.meta}>
-              {project.meta.license && (
-                <div className={styles.meta__item}>
-                  <dt>{t`License:`}</dt>
-                  <dd>{project.meta.license}</dd>
-                </div>
-              )}
-              {project.meta.technologies && (
+              {meta.technologies && (
                 <div className={styles.meta__item}>
-                  <dt>{t`Technologies:`}</dt>
-                  {project.meta.technologies.map((techno) => (
-                    <dd key={slugify(techno)}>{techno}</dd>
+                  <dt className="screen-reader-text">{t`Technologies:`}</dt>
+                  {meta.technologies.map((techno) => (
+                    <dd key={slugify(techno)} className={styles.techno}>
+                      {techno}
+                    </dd>
                   ))}
                 </div>
               )}
diff --git a/src/components/ProjectsList/ProjectsList.module.scss b/src/components/ProjectsList/ProjectsList.module.scss
index 6a77aa9..fbed08d 100644
--- a/src/components/ProjectsList/ProjectsList.module.scss
+++ b/src/components/ProjectsList/ProjectsList.module.scss
@@ -3,7 +3,7 @@
 
 .list {
   --items: 4;
-  --items-size: 35ch;
+  --items-size: 31ch;
 
   @extend %reset-list;
 
diff --git a/src/pages/projets.tsx b/src/pages/projets.tsx
index 0c04024..1a83326 100644
--- a/src/pages/projets.tsx
+++ b/src/pages/projets.tsx
@@ -3,7 +3,7 @@ import PostHeader from '@components/PostHeader/PostHeader';
 import ProjectsList from '@components/ProjectsList/ProjectsList';
 import { seo } from '@config/seo';
 import { config } from '@config/website';
-import PageContent, { intro, meta } from '@content/pages/projects.mdx';
+import PageContent, { meta } from '@content/pages/projects.mdx';
 import styles from '@styles/pages/Projects.module.scss';
 import { Project } from '@ts/types/app';
 import { loadTranslation } from '@utils/helpers/i18n';
@@ -42,7 +42,7 @@ const Projects = ({ projects }: { projects: Project[] }) => {
     '@id': `${config.url}/#projects`,
     '@type': 'Article',
     name: meta.title,
-    description: intro,
+    description: seo.projects.description,
     author: { '@id': `${config.url}/#branding` },
     copyrightYear: publicationDate.getFullYear(),
     creator: { '@id': `${config.url}/#branding` },
@@ -68,7 +68,7 @@ const Projects = ({ projects }: { projects: Project[] }) => {
         <meta property="og:url" content={`${pageUrl}`} />
         <meta property="og:type" content="article" />
         <meta property="og:title" content={meta.title} />
-        <meta property="og:description" content={intro} />
+        <meta property="og:description" content={seo.projects.description} />
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 272d2c7..f1cb38a 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -208,7 +208,8 @@ var {
 
 :not(pre) > code,
 kbd,
-var {
+var,
+samp {
   background: var(--color-bg-code);
   border: fun.convert-px(1) solid var(--color-border);
   border-radius: fun.convert-px(3);
diff --git a/src/utils/helpers/projects.ts b/src/utils/helpers/projects.ts
index 12e5912..1612dae 100644
--- a/src/utils/helpers/projects.ts
+++ b/src/utils/helpers/projects.ts
@@ -10,27 +10,27 @@ import path from 'path';
 export const getProjectData = async (id: string): Promise<Project> => {
   try {
     const {
-      image,
       intro,
       meta,
       seo,
+      tagline,
     }: {
-      image: string;
       intro: string;
       meta: ProjectMeta & { title: string };
       seo: { title: string; description: string };
+      tagline?: string;
     } = await import(`../../content/projects/${id}.mdx`);
 
     const { title, ...onlyMeta } = meta;
 
     return {
       id,
-      cover: image || '',
       intro: intro || '',
       meta: onlyMeta || {},
       slug: id,
       title,
       seo: seo || {},
+      tagline: tagline || '',
     };
   } catch (err) {
     console.error(err);