feat(projects): display project type and keywords (#18)

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>

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>