From 1c5b4cb7c503075d3497172255ba0b0eeaac1cf7 Mon Sep 17 00:00:00 2001
From: Rafael Bardini <rafael@rbardini.com>
Date: Wed, 3 Mar 2021 19:42:34 +0100
Subject: [PATCH] feat(contact): move contact information to header

- List location with city and country
- Linkify phone number
- Render decorative Feather icons
- Use Node.js 14 with Intl.DisplayNames support
---
 .github/workflows/main.yml               |  2 +-
 index.js                                 | 10 ++++
 partials/contact.hbs                     | 23 ---------
 partials/header.hbs                      | 42 ++++++++++++++---
 resume.hbs                               |  1 -
 style.css                                | 18 +++++++-
 tap-snapshots/test-render.js-TAP.test.js | 59 +++++++++++++++---------
 test/render.js                           |  1 +
 8 files changed, 102 insertions(+), 54 deletions(-)
 delete mode 100644 partials/contact.hbs

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 3503035..251859c 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -12,7 +12,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 14
 
       - name: Install
         run: npm ci
diff --git a/index.js b/index.js
index 4132359..98b56ea 100644
--- a/index.js
+++ b/index.js
@@ -17,6 +17,12 @@ fs.readdirSync(partialsDir)
     Handlebars.registerPartial(path.basename(filename, extname), template),
   )
 
+Handlebars.registerHelper('formatCountry', countryCode =>
+  Intl.DisplayNames
+    ? new Intl.DisplayNames(['en'], { type: 'region' }).of(countryCode)
+    : countryCode,
+)
+
 Handlebars.registerHelper('formatDate', dateString =>
   new Date(dateString).toLocaleDateString('en', {
     month: 'short',
@@ -24,6 +30,10 @@ Handlebars.registerHelper('formatDate', dateString =>
   }),
 )
 
+Handlebars.registerHelper('formatPhone', phone =>
+  phone.replace(/[^\d|+]+/g, ''),
+)
+
 Handlebars.registerHelper('formatURL', url =>
   url.replace(/^(https?:|)\/\//, '').replace(/\/$/, ''),
 )
diff --git a/partials/contact.hbs b/partials/contact.hbs
deleted file mode 100644
index 0a37d20..0000000
--- a/partials/contact.hbs
+++ /dev/null
@@ -1,23 +0,0 @@
-<section id="contact">
-  <h3>Contact</h3>
-  <div class="grid-list">
-    {{#email}}
-      <div>
-        <h4>Email</h4>
-        <a href="mailto:{{.}}">{{.}}</a>
-      </div>
-    {{/email}}
-    {{#phone}}
-      <div>
-        <h4>Phone</h4>
-        {{.}}
-      </div>
-    {{/phone}}
-    {{#url}}
-      <div>
-        <h4>Website</h4>
-        <a href="{{.}}">{{formatURL .}}</a>
-      </div>
-    {{/url}}
-  </div>
-</section>
diff --git a/partials/header.hbs b/partials/header.hbs
index fe510db..1d19409 100644
--- a/partials/header.hbs
+++ b/partials/header.hbs
@@ -1,8 +1,38 @@
 <header class="masthead">
-  {{#name}}
-    <h1>{{.}}</h1>
-  {{/name}}
-  {{#label}}
-    <h2>{{.}}</h2>
-  {{/label}}
+  <div>
+    {{#name}}
+      <h1>{{.}}</h1>
+    {{/name}}
+    {{#label}}
+      <h2>{{.}}</h2>
+    {{/label}}
+  </div>
+  <ul class="icon-list">
+    {{#location}}
+      {{#if city}}
+        <li>
+          <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
+          {{city}}{{#countryCode}}, {{formatCountry .}}{{/countryCode}}
+        </li>
+      {{/if}}
+    {{/location}}
+    {{#email}}
+      <li>
+        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+        <a href="mailto:{{.}}">{{.}}</a>
+      </li>
+    {{/email}}
+    {{#phone}}
+      <li>
+        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+        <a href="tel:{{formatPhone .}}">{{.}}</a>
+      </li>
+    {{/phone}}
+    {{#url}}
+      <li>
+        <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+        <a href="{{.}}">{{formatURL .}}</a>
+      </li>
+    {{/url}}
+  </ul>
 </header>
diff --git a/resume.hbs b/resume.hbs
index 1237cb8..e67c1d0 100644
--- a/resume.hbs
+++ b/resume.hbs
@@ -11,7 +11,6 @@
   <body>
     {{#resume.basics}}
       {{> header}}
-      {{> contact}}
       {{> about}}
       {{> profiles}}
     {{/resume.basics}}
diff --git a/style.css b/style.css
index 36ace50..0ba640e 100644
--- a/style.css
+++ b/style.css
@@ -57,7 +57,7 @@ ul {
 }
 
 li + li {
-  margin-top: 0.2em;
+  margin-top: 0.4em;
 }
 
 li::marker {
@@ -130,6 +130,16 @@ cite::before {
   content: '— ';
 }
 
+svg {
+  fill: none;
+  margin-right: 0.2em;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+  vertical-align: -0.2em;
+}
+
 .masthead {
   background: var(--mutedColor);
   display: inherit;
@@ -137,7 +147,6 @@ cite::before {
   grid-column: full;
   grid-template-columns: inherit;
   padding: 4em 0;
-  row-gap: 0;
 }
 
 .masthead > *,
@@ -155,6 +164,11 @@ blockquote > * + * {
   gap: 1.5em;
 }
 
+.icon-list {
+  list-style: none;
+  padding: 0;
+}
+
 .grid-list {
   display: grid;
   gap: 1em;
diff --git a/tap-snapshots/test-render.js-TAP.test.js b/tap-snapshots/test-render.js-TAP.test.js
index 4c05af5..6a7ddb1 100644
--- a/tap-snapshots/test-render.js-TAP.test.js
+++ b/tap-snapshots/test-render.js-TAP.test.js
@@ -73,7 +73,7 @@ ul {
 }
 
 li + li {
-  margin-top: 0.2em;
+  margin-top: 0.4em;
 }
 
 li::marker {
@@ -146,6 +146,16 @@ cite::before {
   content: '— ';
 }
 
+svg {
+  fill: none;
+  margin-right: 0.2em;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+  vertical-align: -0.2em;
+}
+
 .masthead {
   background: var(--mutedColor);
   display: inherit;
@@ -153,7 +163,6 @@ cite::before {
   grid-column: full;
   grid-template-columns: inherit;
   padding: 4em 0;
-  row-gap: 0;
 }
 
 .masthead > *,
@@ -171,6 +180,11 @@ blockquote > * + * {
   gap: 1.5em;
 }
 
+.icon-list {
+  list-style: none;
+  padding: 0;
+}
+
 .grid-list {
   display: grid;
   gap: 1em;
@@ -230,26 +244,29 @@ blockquote > * + * {
   </head>
   <body>
       <header class="masthead">
-          <h1>Richard Hendriks</h1>
-          <h2>Programmer</h2>
-      </header>
-      <section id="contact">
-        <h3>Contact</h3>
-        <div class="grid-list">
-            <div>
-              <h4>Email</h4>
-              <a href="mailto:richard.hendriks@mail.com">richard.hendriks@mail.com</a>
-            </div>
-            <div>
-              <h4>Phone</h4>
-              (912) 555-4321
-            </div>
-            <div>
-              <h4>Website</h4>
-              <a href="http://richardhendricks.example.com">richardhendricks.example.com</a>
-            </div>
+        <div>
+            <h1>Richard Hendriks</h1>
+            <h2>Programmer</h2>
         </div>
-      </section>
+        <ul class="icon-list">
+              <li>
+                <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
+                San Francisco, United States
+              </li>
+            <li>
+              <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
+              <a href="mailto:richard.hendriks@mail.com">richard.hendriks@mail.com</a>
+            </li>
+            <li>
+              <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
+              <a href="tel:9125554321">(912) 555-4321</a>
+            </li>
+            <li>
+              <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
+              <a href="http://richardhendricks.example.com">richardhendricks.example.com</a>
+            </li>
+        </ul>
+      </header>
         <section id="about">
           <h3>About</h3>
           <article>
diff --git a/test/render.js b/test/render.js
index bf6eed7..deff04d 100644
--- a/test/render.js
+++ b/test/render.js
@@ -12,6 +12,7 @@ test('renders a resume', t => {
 test('renders valid HTML', t => {
   const htmlvalidate = new HtmlValidate({
     extends: ['html-validate:recommended'],
+    rules: { 'svg-focusable': 'off' },
   })
 
   const {