feat(work): group by organization in timeline

components/work.js

@@ -4,29 +4,44 @@ import Duration from './duration.js'
 import Link from './link.js'
 
 export default function Work(work = []) {
+  const nestedWork = work.reduce((acc, { description, name, url, ...rest }) => {
+    const prev = acc[acc.length - 1]
+    if (prev && prev.name === name && prev.description === description && prev.url === url) prev.items.push(rest)
+    else acc.push({ description, name, url, items: [rest] })
+    return acc
+  }, [])
+
   return work.length > 0 && html`
     <section id="work">
       <h3>Work</h3>
       <div class="stack">
-        ${work.map(({ description, highlights = [], location, name, position, startDate, endDate, summary, url }) => html`
+        ${nestedWork.map(({ description, name, url, items = [] }) => html`
           <article>
             <header>
               <h4>${Link(url, name)}</h4>
               <div class="meta">
-                <div>
+                ${description && html`<div>${description}</div>`}
-                  ${description && html`<div>${description}</div>`}
-                  <strong>${position}</strong>
-                </div>
-                <div>${Duration(startDate, endDate)}</div>
-                ${location && html`<div>${location}</div>`}
               </div>
             </header>
-            ${summary && markdown(summary)}
+            <div class="timeline">
-            ${highlights.length > 0 && html`
+              ${items.map(({highlights = [], location, position, startDate, endDate, summary }) => html`
-              <ul>
+                <div>
-                ${highlights.map(highlight => html`<li>${markdown(highlight)}</li>`)}
+                  <div>
-              </ul>
+                    <h5>${position}</h5>
-            `}
+                    <div class="meta">
+                      <div>${Duration(startDate, endDate)}</div>
+                      ${location && html`<div>${location}</div>`}
+                    </div>
+                  </div>
+                  ${summary && markdown(summary)}
+                  ${highlights.length > 0 && html`
+                    <ul>
+                      ${highlights.map(highlight => html`<li>${markdown(highlight)}</li>`)}
+                    </ul>
+                  `}
+                </div>
+              `)}
+            </div>
           </article>
         `)}
       </div>

style.css

@@ -169,7 +169,8 @@ section {
 }
 
 article > * + *,
-blockquote > * + * {
+blockquote > * + *,
+.timeline > div > * + * {
   margin-top: 0.6em;
 }
 
@@ -210,9 +211,34 @@ blockquote > * + * {
   padding: 0.2em 0.6em;
 }
 
-.bullet-item:not(:first-child)::before {
+.timeline > div {
-  content: '· ';
+  position: relative;
-  margin: 0 0.2em;
+}
+
+.timeline > div:not(:last-child) {
+  padding-bottom: 1rem;
+}
+
+.timeline > div:not(:last-child)::before {
+  content: '';
+  position: absolute;
+  top: 1rem;
+  left: -15px;
+  width: 2px;
+  height: 100%;
+  background: var(--color-secondary);
+}
+
+.timeline > div:not(:only-child)::after {
+  content: '';
+  position: absolute;
+  top: 0.6rem;
+  left: -20px;
+  width: 8px;
+  height: 8px;
+  background: var(--color-secondary);
+  border: 2px solid var(--color-background);
+  border-radius: 50%;
 }
 
 @media print, (min-width: 48em) {

test/__snapshots__/index.test.js.snap

@@ -72,20 +72,28 @@ exports[`renders a resume 1`] = `
             <header>
               <h4><a href=\\"http://piedpiper.example.com\\">Pied Piper</a></h4>
               <div class=\\"meta\\">
-                <div>
+                <div>Awesome compression company</div>
-                  <div>Awesome compression company</div>
-                  <strong>CEO/President</strong>
-                </div>
-                <div><time datetime=\\"2013-12-01\\">Dec 2013</time> – <time datetime=\\"2014-12-01\\">Dec 2014</time></div>
-                <div>Palo Alto, CA</div>
               </div>
             </header>
-            <p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</p>
+            <div class=\\"timeline\\">
-            
+              
-              <ul>
+                <div>
-                <li><p>Build an algorithm for artist to detect if their music was violating copy right infringement laws</p></li><li><p>Successfully won Techcrunch Disrupt</p></li><li><p>Optimized an algorithm that holds the current world record for Weisman Scores</p></li>
+                  <div>
-              </ul>
+                    <h5>CEO/President</h5>
-            
+                    <div class=\\"meta\\">
+                      <div><time datetime=\\"2013-12-01\\">Dec 2013</time> – <time datetime=\\"2014-12-01\\">Dec 2014</time></div>
+                      <div>Palo Alto, CA</div>
+                    </div>
+                  </div>
+                  <p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</p>
+                  
+                    <ul>
+                      <li><p>Build an algorithm for artist to detect if their music was violating copy right infringement laws</p></li><li><p>Successfully won Techcrunch Disrupt</p></li><li><p>Optimized an algorithm that holds the current world record for Weisman Scores</p></li>
+                    </ul>
+                  
+                </div>
+              
+            </div>
           </article>
         
       </div>