From bd380760414cfdcf0a2568766adb33816b872ee7 Mon Sep 17 00:00:00 2001
From: Marcus Noble <marcus@marcusnoble.co.uk>
Date: Sun, 15 Oct 2017 17:31:16 +0100
Subject: [PATCH] Added share buttons

---
 src/css/main.scss             | 22 ++++++++++++++++++++++
 templates/partials/share.html |  6 ++++++
 templates/post.html           | 19 ++++++++++++++++++-
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 templates/partials/share.html

diff --git a/src/css/main.scss b/src/css/main.scss
index 83ff8e2..39aab3b 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -159,3 +159,25 @@ footer {
     height: 40px;
   }
 }
+
+
+.share {
+  background: transparent;
+  border: none;
+  display: none;
+  cursor: pointer;
+
+  &.show {
+    display: initial;
+  }
+
+  &:hover, &:active {
+    fill: $link-color;
+    color: $link-color;
+  }
+
+  svg {
+    height: 20px;
+    vertical-align: bottom;
+  }
+}
diff --git a/templates/partials/share.html b/templates/partials/share.html
new file mode 100644
index 0000000..b2b8292
--- /dev/null
+++ b/templates/partials/share.html
@@ -0,0 +1,6 @@
+<button class="share" title="Share this post">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59 59">
+    <path d="M47 39c-2.67 0-5.182 1.04-7.07 2.93-.525.523-.976 1.1-1.366 1.708l-17.28-10.49c.457-1.143.716-2.387.716-3.692 0-1.305-.26-2.55-.715-3.693l17.284-10.41C40.343 18.143 43.454 20 47 20c5.514 0 10-4.486 10-10S52.514 0 47 0 37 4.486 37 10c0 1.256.243 2.454.667 3.562L20.36 23.985c-1.787-2.724-4.865-4.53-8.36-4.53-5.514 0-10 4.487-10 10s4.486 10 10 10c3.495 0 6.572-1.804 8.36-4.528L37.664 45.43C37.234 46.556 37 47.76 37 49c0 2.67 1.04 5.183 2.93 7.07C41.817 57.96 44.33 59 47 59s5.182-1.04 7.07-2.93C55.96 54.184 57 51.67 57 49s-1.04-5.183-2.93-7.07C52.183 40.04 49.67 39 47 39z"/>
+  </svg>
+  {{ shareText }}
+</button>
diff --git a/templates/post.html b/templates/post.html
index 2974061..4fd4d0a 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -9,7 +9,7 @@
         <a href="/" class="back-to-blog" title="Return to all posts">←</a>
 
         <h2 class="post-title" itemprop="name headline">
-          <a class="post-link" href="{{ path }}">{{ title }}</a>
+          <a class="post-link" href="{{ path }}">{{ title }}</a> {{> share }}
         </h2>
 
         <div class="post-meta feather_type">
@@ -25,6 +25,9 @@
         </div>
 
       </article>
+      <div class="center">
+        {{> share shareText='Share this post'}}
+      </div>
     </section>
 
     {{> footer }}
@@ -52,5 +55,19 @@
     }
 
   </script>
+  <script>
+    if (navigator.share) {
+      [...document.querySelectorAll('.share')].forEach(function(shareButton) {
+        shareButton.classList.add('show');
+        shareButton.addEventListener('click', function(event) {
+          event.preventDefault();
+          navigator.share({
+            title: document.title,
+            url: window.location.url
+          });
+        });
+      });
+    }
+  </script>
 </body>
 </html>