From da43c079b0de45fb125be51e922459a5b95369e2 Mon Sep 17 00:00:00 2001
From: Szymon Kin <68154191+hoolek77@users.noreply.github.com>
Date: Mon, 28 Nov 2022 20:22:09 +0100
Subject: [PATCH] Create projects section (#99)

---
 .../organisms/project-timeline-item.astro     | 118 ++++++++++--------
 .../organisms/work-timeline-item.astro        |  12 +-
 .../sections/portfolio-section.astro          |  17 ++-
 src/pages/index.astro                         |   2 +-
 src/pages/playground/projects-timeline.astro  |   2 +-
 5 files changed, 88 insertions(+), 63 deletions(-)

diff --git a/src/components/organisms/project-timeline-item.astro b/src/components/organisms/project-timeline-item.astro
index f60ab00..f690cd7 100644
--- a/src/components/organisms/project-timeline-item.astro
+++ b/src/components/organisms/project-timeline-item.astro
@@ -9,74 +9,82 @@ import Typography from '@/atoms/typography.astro';
 import type { I18n } from '@/types/i18n';
 import type { Project } from '@/types/portfolio-section';
 
-export interface Props extends astroHTML.JSX.HTMLAttributes {
-  value: Project;
+export interface Props {
+  project: Project;
   i18n: I18n;
 }
-const { value, i18n, ...props } = Astro.props;
-const ProjectTimelineItem = 'div';
+const { project, i18n } = Astro.props;
+const { description, details, endDate, name, socials, startDate, tags, image } = project;
 
-const setLabelValue = (val: string | string[]) =>
-  Array.isArray(val) ? val.map((v, id) => (id !== val.length - 1 ? v.concat(', ') : v)) : val;
+// Alt has to destructured separately, because otherwise eslint complains about
+// the missing alt attribute on the Image component.
+const { alt, ...sharedImageProps } = {
+  src: image,
+  aspectRatio: '1/1',
+  alt: `Thumbnail for ${name} project`,
+  format: 'webp',
+} as const;
 ---
 
-<ProjectTimelineItem class:list={[props.className]}>
-  <div class:list={['flex', 'flex-col', 'sm:grid', 'overflow-hidden', 'grid-cols-[120px_minmax(200px,_1fr)]', 'gap-2']}>
-    <Image
-      class:list={['rounded-lg', 'object-cover', 'max-w-[120px]', 'm-0', 'overflow-hidden', 'sm:block', 'hidden']}
-      src={value.image}
-      aspectRatio="1/1"
-      alt={''}
-      format="webp"
-    />
-    <div class:list={['col-start-2', 'col-span-2', 'sm:mx-6']}>
-      <div class:list={['flex', 'justify-between']}>
-        <Typography variant="item-title">{value.name}</Typography>
-        <div class:list={['fixed', 'top-3', 'right-3', 'md:flex', 'md:flex-wrap', 'gap-3', '[&>a]:my-2']}>
-          {value.socials?.map(({ icon, url }) => <IconButton icon={icon} href={url} target="_blank" size="small" />)}
-        </div>
-      </div>
-      <Timestamp
-        startDate={value.startDate}
-        endDate={value.endDate}
-        locale={i18n.locale}
-        translationForNow={i18n.translations.now}
-      />
+<div class:list={['flex', 'flex-col', 'gap-6', 'py-8', 'px-4']}>
+  <div class:list={['flex', 'flex-col', 'gap-4']}>
+    <div class:list={['flex', 'gap-6']}>
       <Image
-        class:list={['rounded-lg', 'object-cover', 'my-2', 'max-w-[120px]', 'sm:block', 'sm:hidden']}
-        src={value.image}
-        aspectRatio="1/1"
-        alt={''}
-        format="webp"
+        class:list={['rounded-lg', 'object-cover', 'max-w-[120px]', 'overflow-hidden', 'sm:block', 'hidden']}
+        {...sharedImageProps}
+        alt={alt}
       />
-      <div class:list={['flex', 'md:gap-3', 'md:flex-row', 'flex-col', 'my-4']}>
-        <div class:list={['md:w-2/6']}>
-          {
-            value.details
-              .slice(0, Math.round(value.details.length / 2))
-              .map((d) => <LabelledValue label={d.label} value={setLabelValue(d.value)} />)
-          }
+      <div class:list={['flex', 'flex-col', 'gap-4', 'w-full']}>
+        <div class:list={['flex', 'justify-between']}>
+          <div>
+            <Typography variant="item-title">{name}</Typography>
+            <Timestamp
+              startDate={startDate}
+              endDate={endDate}
+              locale={i18n.locale}
+              translationForNow={i18n.translations.now}
+            />
+          </div>
+          <div class:list={['flex', 'gap-2']}>
+            {socials?.map(({ icon, url }) => <IconButton icon={icon} href={url} target="_blank" size="small" />)}
+          </div>
         </div>
-        <div>
+        <Image
+          class:list={['rounded-lg', 'object-cover', 'max-w-[120px]', 'sm:block', 'sm:hidden']}
+          {...sharedImageProps}
+          alt={alt}
+        />
+        <div class:list={['inline-grid', 'xl:grid-cols-[auto_auto]', 'w-full']}>
           {
-            value.details
-              .slice(Math.round(value.details.length / 2))
-              .map((d) => <LabelledValue label={d.label} value={setLabelValue(d.value)} />)
+            details.map(({ label: detailLabel, value: detailValue }) => (
+              <LabelledValue
+                label={detailLabel}
+                value={typeof detailValue === 'object' ? detailValue.join(', ') : detailValue}
+              />
+            ))
           }
         </div>
       </div>
     </div>
     <div class:list={['col-start-1 col-span-3']}>
-      <Typography variant="paragraph">{value.description}</Typography>
-    </div>
-    <div class:list={['flex', 'gap-3', 'flex-wrap', 'sm:flex-nowrap', 'mt-6']}>
-      {
-        value.tags.map((t) => (
-          <Tag name={t.icon} color={t.iconColor}>
-            {t.name}
-          </Tag>
-        ))
-      }
+      <Typography variant="paragraph">{description}</Typography>
     </div>
   </div>
-</ProjectTimelineItem>
+  <div class:list={['flex', 'gap-3', 'flex-wrap']}>
+    {
+      tags.map(({ name: tagName, icon, iconColor, url }) => {
+        return url ? (
+          <a href={url} target="_blank" rel="noopener noreferrer">
+            <Tag name={icon} color={iconColor}>
+              {tagName}
+            </Tag>
+          </a>
+        ) : (
+          <Tag name={icon} color={iconColor}>
+            {tagName}
+          </Tag>
+        );
+      })
+    }
+  </div>
+</div>
diff --git a/src/components/organisms/work-timeline-item.astro b/src/components/organisms/work-timeline-item.astro
index e615a47..c64d8cd 100644
--- a/src/components/organisms/work-timeline-item.astro
+++ b/src/components/organisms/work-timeline-item.astro
@@ -15,11 +15,13 @@ const WorkTimelineItem = 'div';
 ---
 
 <WorkTimelineItem class:list={['flex', 'flex-col', 'gap-2', 'md:gap-0', 'mb-4', props.class]}>
-  <div class:list={['flex', 'justify-between', 'items-start', 'gap-4', 'sm:items-center']}>
-    <Typography variant="item-title"
-      >{job.role} <span class="font-medium"> &#8212;&nbsp;{job.company}</span>
-    </Typography>
-    <div class:list={['md:flex', 'sm:flex-wrap', 'gap-3', '[&>a]:mb-2', 'md:[&>a]:my-2']}>
+  <div class:list={['flex', 'flex-row', 'justify-between', 'w-full']}>
+    <div>
+      <Typography variant="item-title"
+        >{job.role} <span class="font-medium"> &#8212;&nbsp;{job.company}</span>
+      </Typography>
+    </div>
+    <div class:list={['flex', 'flex-wrap', 'gap-2']}>
       {job.socials?.map(({ icon, url }) => <IconButton icon={icon} href={url} target="_blank" size="small" />)}
     </div>
   </div>
diff --git a/src/components/sections/portfolio-section.astro b/src/components/sections/portfolio-section.astro
index 8f9d557..07ede21 100644
--- a/src/components/sections/portfolio-section.astro
+++ b/src/components/sections/portfolio-section.astro
@@ -1,13 +1,20 @@
 ---
+import Divider from '@/atoms/divider.astro';
 import SectionCard from '@/atoms/section-card.astro';
 import Typography from '@/atoms/typography.astro';
+import ProjectTimelineItem from '@/organisms/project-timeline-item.astro';
 import type { Section } from '@/types/data';
+import type { I18n } from '@/types/i18n';
 import type { PortfolioSection } from '@/types/portfolio-section';
 
-export interface Props extends PortfolioSection {}
+export interface Props extends PortfolioSection {
+  i18n: I18n;
+}
 
 const {
   config: { title },
+  projects,
+  i18n,
 } = Astro.props;
 
 const section: Section = 'portfolio';
@@ -15,4 +22,12 @@ const section: Section = 'portfolio';
 
 <SectionCard section={section}
   ><Typography variant="section-title" id={`${section}-heading`}>{title}</Typography>
+  {
+    projects.map((project, index) => (
+      <>
+        <ProjectTimelineItem project={project} i18n={i18n} />
+        {index !== projects.length - 1 && <Divider />}
+      </>
+    ))
+  }
 </SectionCard>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ce58a2b..ccbd62d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -53,7 +53,7 @@ const { seo, i18n, ...dataWithoutSeoAndI18n } = data;
             <ExperienceSection i18n={data.i18n} jobs={data.experience.jobs} config={data.experience.config} />
           )
         }
-        {data.portfolio && <PortfolioSection {...data.portfolio} />}
+        {data.portfolio && <PortfolioSection i18n={data.i18n} {...data.portfolio} />}
         {data.testimonials && <TestimonialsSection {...data.testimonials} />}
         {data.favorites && <FavoritesSection {...data.favorites} />}
       </main>
diff --git a/src/pages/playground/projects-timeline.astro b/src/pages/playground/projects-timeline.astro
index 72dd0c8..028b131 100644
--- a/src/pages/playground/projects-timeline.astro
+++ b/src/pages/playground/projects-timeline.astro
@@ -63,5 +63,5 @@ const i18nData: I18n = {
 ---
 
 <div class="p-5">
-  <ProjectTimelineItem value={project} i18n={i18nData} />
+  <ProjectTimelineItem project={project} i18n={i18nData} />
 </div>