Merge pull request #8 from AverageMarcus/feature/share_button

Added share buttons

app.js

@@ -39,6 +39,12 @@ Handlebars.registerHelper('moment', function(date, format) {
 Handlebars.registerHelper("striptags", function(text){
 	return striptags(text);
 });
+Handlebars.registerHelper("buildTitle", function(title, siteTitle){
+	if (title.indexOf(siteTitle) < 0) {
+    title = `'${title}' by ${siteTitle}`;
+  }
+  return title;
+});
 
 
 Metalsmith(__dirname)

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;
+  }
+}

templates/partials/head.html

@@ -3,7 +3,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <title>{{ site.title }}</title>
+  <title>{{ buildTitle title site.title }}</title>
 
   <meta property="og:url" content="{{ site.url}}/{{ path }}"/>
   <meta property="og:title" content="{{ title }}"/>

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>

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>