From 8616cb773cf45d0e8f7ab795e0ca455ae1842ef5 Mon Sep 17 00:00:00 2001
From: Rafael Bardini <rafael@rbardini.com>
Date: Wed, 10 Nov 2021 23:41:05 +0100
Subject: [PATCH] feat(work): render work descriptions

---
 partials/work.hbs                     |  7 ++++++-
 style.css                             |  5 +++++
 tap-snapshots/test/render.js.test.cjs | 10 +++++++++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/partials/work.hbs b/partials/work.hbs
index 928846f..3a6a6df 100644
--- a/partials/work.hbs
+++ b/partials/work.hbs
@@ -6,7 +6,12 @@
         <article>
           <header>
             <h4>{{position}}</h4>
-            <strong>{{> link}}</strong>
+            <div>
+              <strong>{{> link}}</strong>
+              {{#description}}
+                <span class="bullet-item">{{.}}</span>
+              {{/description}}
+            </div>
             <div>
               <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
               {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
diff --git a/style.css b/style.css
index c120e85..c3b2914 100644
--- a/style.css
+++ b/style.css
@@ -201,6 +201,11 @@ blockquote > * + * {
   padding: 0.2em 0.6em;
 }
 
+.bullet-item:not(:first-child)::before {
+  content: '· ';
+  margin: 0 0.2em;
+}
+
 @media print, (min-width: 48em) {
   h3 {
     text-align: right;
diff --git a/tap-snapshots/test/render.js.test.cjs b/tap-snapshots/test/render.js.test.cjs
index b195cc8..93b6138 100644
--- a/tap-snapshots/test/render.js.test.cjs
+++ b/tap-snapshots/test/render.js.test.cjs
@@ -217,6 +217,11 @@ blockquote > * + * {
   padding: 0.2em 0.6em;
 }
 
+.bullet-item:not(:first-child)::before {
+  content: '· ';
+  margin: 0 0.2em;
+}
+
 @media print, (min-width: 48em) {
   h3 {
     text-align: right;
@@ -294,7 +299,10 @@ blockquote > * + * {
             <article>
               <header>
                 <h4>CEO/President</h4>
-                <strong><a href="http://piedpiper.example.com">Pied Piper</a></strong>
+                <div>
+                  <strong><a href="http://piedpiper.example.com">Pied Piper</a></strong>
+                    <span class="bullet-item">Awesome compression company</span>
+                </div>
                 <div>
                   <time datetime="2013-12-01">Dec 2013</time> –
                   <time datetime="2014-12-01">Dec 2014</time>