From 501ca1ae4d2f9c5f7e8c89f0bd241350bedfd636 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 1 Sep 2023 03:05:33 +0200
Subject: [PATCH] feat(projects): display project type and keywords (#18)

---
 components/projects.js                | 8 +++++++-
 test/__snapshots__/index.test.js.snap | 6 ++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/projects.js b/components/projects.js
index 058abf2..e429649 100644
--- a/components/projects.js
+++ b/components/projects.js
@@ -12,7 +12,7 @@ export default function Projects(projects = []) {
     <section id="projects">
       <h3>Projects</h3>
       <div class="stack">
-      ${projects.map(({ description, entity, highlights = [], name, startDate, endDate, roles = [], url }) => html`
+      ${projects.map(({ description, entity, highlights = [], keywords = [], name, startDate, endDate, roles = [], type, url }) => html`
         <article>
           <header>
             <h4>${Link(url, name)}</h4>
@@ -22,6 +22,7 @@ export default function Projects(projects = []) {
                 ${entity && html`at <strong>${entity}</strong>`}
               </div>
               <div>${Duration(startDate, endDate)}</div>
+              ${type && html`<div>${type}</div>`}
             </div>
           </header>
           ${description && markdown(description)}
@@ -30,6 +31,11 @@ export default function Projects(projects = []) {
               ${highlights.map(highlight => html`<li>${markdown(highlight)}</li>`)}
             </ul>
           `}
+          ${keywords.length > 0 && html`
+            <ul class="tag-list">
+              ${keywords.map(keyword => html`<li>${keyword}</li>`)}
+            </ul>
+          `}
         </article>
       `)}
       </div>
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
index 490f812..f1837b4 100644
--- a/test/__snapshots__/index.test.js.snap
+++ b/test/__snapshots__/index.test.js.snap
@@ -162,6 +162,7 @@ exports[`renders a resume 1`] = `
                 at <strong>Smoogle</strong>
               </div>
               <div><time datetime=\\"2016-08-24\\">Aug 2016</time> – <time datetime=\\"2016-08-24\\">Aug 2016</time></div>
+              <div>application</div>
             </div>
           </header>
           <p>A mapping engine that misguides you</p>
@@ -170,6 +171,11 @@ exports[`renders a resume 1`] = `
               <li><p>Won award at AIHacks 2016</p></li><li><p>Built by all women team of newbie programmers</p></li><li><p>Using modern technologies such as GoogleMaps, Chrome Extension and Javascript</p></li>
             </ul>
           
+          
+            <ul class=\\"tag-list\\">
+              <li>GoogleMaps</li><li>Chrome Extension</li><li>Javascript</li>
+            </ul>
+          
         </article>
       
       </div>