WIP – Added social buttons in post view

assets/js/src/__init.coffee

@@ -37,19 +37,20 @@ $ ->
       DateInDays ".post.meta > time"
 
   ## Main
-
-  el = document.body
-  el.dataset.page ?= Uno.context()
-  Uno.readTime()
-
-  if Uno.is 'page', 'post'
-    $('.main').readingTime readingTimeTarget: ".post.reading-time > span"
-
-  $('#panic-button').click ->
-    s = document.createElement('script')
-    s.setAttribute('src','https://nthitz.github.io/turndownforwhatjs/tdfw.js')
-    document.body.appendChild(s)
-
   $ ->
-    unless Uno.is 'device', 'desktop'
-      FastClick.attach(el)
+    el = document.body
+    el.dataset.page ?= Uno.context()
+    Uno.readTime()
+    FastClick.attach el unless Uno.is 'device', 'desktop'
+
+    if Uno.is 'page', 'post'
+      $('.main').readingTime readingTimeTarget: '.post.reading-time > span'
+      if Uno.is 'device', 'desktop'
+        firstImage = ($('#post-image')[0] || $('article.post img')[0]).src
+        social = new Share '#social-buttons', image: firstImage
+        social.open()
+
+    $('#panic-button').click ->
+      s = document.createElement 'script'
+      s.setAttribute 'src','https://nthitz.github.io/turndownforwhatjs/tdfw.js'
+      document.body.appendChild s

assets/scss/components/_post.scss

@@ -43,8 +43,8 @@ section.post {
     }
   }
 }
-.post {
 
+.post {
   > p > img {
     width: 100%;
     margin: 0 auto;
@@ -77,6 +77,7 @@ section.post {
       text-transform: uppercase;
       background-color: rgba($primary-color, .7);
       border-radius: .25rem;
+      transition: all $aside-animation-time;
       &:hover {
         background-color: rgba($primary-color, 1);
       }
@@ -101,6 +102,25 @@ section.post {
   }
 }
 
+#social-buttons {
+  transform: rotate(90deg);
+  position: fixed;
+  right: 15px;
+  top: 50%;
+  transition: all $aside-animation-time;
+  &:hover {
+    right: 54px;
+  }
+}
+
+.sharer-0 label {
+  display: none;
+}
+.sharer-0 .social ul li {
+  transform: rotate(-90deg);
+  width: 46px !important;
+}
+
 #back-button {
   position: absolute;
   left: 0;

bower.json

@@ -6,13 +6,14 @@
     "Kiko Beats <josefrancisco.verdu@gmail.com>"
   ],
   "dependencies": {
-    "ghostHunter": "git://github.com/i11ume/ghostHunter.git",
     "animate.css": "*",
-    "reading-time": "*",
+    "fastclick": "*",
+    "ghostHunter": "git://github.com/i11ume/ghostHunter.git",
     "pace": "*",
     "parrot-module-device": "*",
     "parrotjs": "*",
-    "fastclick": "*"
+    "reading-time": "*",
+    "share-button": "*"
   },
   "ignore": [
     "**/.*",

gulpfile.coffee

@@ -34,7 +34,8 @@ src =
               'assets/vendor/fastclick/lib/fastclick.js'
               'assets/vendor/ghostHunter/jquery.ghostHunter.min.js'
               'assets/vendor/pace/pace.min.js'
-              'assets/vendor/reading-time/build/readingTime.min.js']
+              'assets/vendor/reading-time/build/readingTime.min.js'
+              'assets/vendor/share-button/build/share.min.js']
   css      :
     main   : 'assets/css/uno.css'
     vendor : ['assets/vendor/animate.css/animate.min.css']

package.json

@@ -7,29 +7,26 @@
     "url": "https://github.com/kikobeats"
   },
   "devDependencies": {
-    "browser-sync": "^2.1.1",
+    "browser-sync": "*",
     "coffee-script": "*",
-    "gulp": "^3.8.11",
-    "gulp-add-src": "^0.2.0",
+    "gulp": "*",
+    "gulp-add-src": "*",
     "gulp-autoprefixer": "*",
+    "gulp-changed": "*",
     "gulp-coffee": "*",
     "gulp-concat": "*",
-    "gulp-cssmin": "^0.1.6",
+    "gulp-cssmin": "*",
     "gulp-header": "*",
-    "gulp-minify-css": "^0.4.5",
+    "gulp-minify-css": "*",
     "gulp-sass": "*",
-    "gulp-sourcemaps": "^1.3.0",
-    "gulp-strip-css-comments": "^1.1.0",
-    "gulp-uglify": "^1.1.0",
+    "gulp-strip-css-comments": "*",
+    "gulp-uglify": "*",
     "gulp-util": "*"
   },
+  "homepage": "https://github.com/kikobeats/uno-zen",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/kikobeats/uno-zen"
-  },
-  "homepage": "https://github.com/kikobeats/uno-zen",
-  "dependencies": {
-    "gulp-changed": "^1.1.1"
   }
 }

partials/meta.hbs

@@ -4,15 +4,21 @@
 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
-<meta name="description" content="{{meta_description}}">
+{{#if meta_description}}
+  <meta name="description" content="{{meta_description}}">
+{{/if}}
 
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="{{meta_title}}">
+{{#if meta_description}}
 <meta name="twitter:description" content="{{meta_description}}">
+{{/if}}
 
 <meta property="og:type" content="article">
 <meta property="og:title" content="{{meta_title}}">
+{{#if meta_description}}
 <meta property="og:description" content="{{meta_description}}">
+{{/if}}
 
 <link rel="shortcut icon" href="/assets/img/favicon.ico">
 <link rel="apple-touch-icon" sizes="57x57" href="/assets/img/apple-touch-icon-57x57.png">

post.hbs

@@ -26,6 +26,7 @@
 
     </header>
 
+    <section id="social-buttons"></section>
     <section class="{{post_class}}">
       {{content}}
     </section>