Merge pull request #350 from tabinurie/dev_share

implement several share buttons

9 files changed, 67 insertions, 1 deletions

diff --git a/assets/sass/components/_donation.scss b/assets/sass/components/_donation.scss
index 60ee276..1391423 100644
--- a/assets/sass/components/_donation.scss
+++ b/assets/sass/components/_donation.scss
@@ -120,6 +120,42 @@
           background-color: #25D366;
         }
       }
+      &[data-name="pocket"] {
+        color: white;
+        @include on-event {
+          background-color: #EF3F56;
+        }
+      }
+      &[data-name="feedly"] {
+        color: white;
+        @include on-event {
+          background-color: #2BB24C;
+        }
+      }
+      &[data-name="hatena"] {
+        color: white;
+        @include on-event {
+          background-color: #00A4DE;
+        }
+      }
+      &[data-name="pinterest"] {
+        color: white;
+        @include on-event {
+          background-color: #BD081C;
+        }
+      }
+      &[data-name="delicious"] {
+        color: white;
+        @include on-event {
+          background-color: #3399FF;
+        }
+      }
+      &[data-name="google"] {
+        color: white;
+        @include on-event {
+          background-color: #4285F4;
+        }
+      }
 
       @include transition(transform, 0.15s, ease-in);
       @include on-event {
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index ec7a849..ca03c11 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -186,7 +186,7 @@ commento = false
   paypal = ""
   patreon = ""
 
-# possible share name: ["facebook","twitter", "reddit", "linkedin", "tumblr", "weibo", "douban", "line"]
+# possible share name: ["facebook","twitter", "reddit", "linkedin", "tumblr", "weibo", "douban", "line", "pocket", "feedly", "hatena", "pinterest", "delicious", "google"]
 [[share]]
   name = "facebook"
   username = ""
diff --git a/layouts/partials/body/share.html b/layouts/partials/body/share.html
index 75d792a..b2f0ef7 100644
--- a/layouts/partials/body/share.html
+++ b/layouts/partials/body/share.html
@@ -47,6 +47,30 @@
         <a href="https://web.whatsapp.com/send?text={{ $ctx.Title }} - {{ $ctx.Permalink | absLangURL }}" data-href="{{ $ctx.Permalink | absLangURL }}" class="donation__item" target="_blank" rel="noreferer" title="{{ i18n "line" | default "WhatsApp" }}" aria-label="WhatsApp Share Button" data-type="share">
           {{ partial "svgs/social/whatsapp.svg" (dict "width" 35 "height" 35) }}
         </a>
+      {{ else if eq (lower .name) "pocket" }}
+        <a href="https://getpocket.com/save?url={{ $ctx.Permalink | absLangURL }}" class="donation__item" target="_blank" rel="noreferer" title="{{ i18n "line" | default "Pocket" }}" aria-label="Pocket Share Button" data-type="share">
+          {{ partial "svgs/share/pocket.svg" (dict "width" 35 "height" 35) }}
+        </a>
+      {{ else if eq (lower .name) "feedly" }}
+        <a href="https://feedly.com/i/subscription/feed/{{ .Permalink | absLangURL }}index.xml" class="donation__item" target="_blank" rel="noreferer" title="{{ i18n "line" | default "Feedly" }}" aria-label="Feedly Share Button" data-type="share">
+          {{ partial "svgs/share/feedly.svg" (dict "width" 35 "height" 35) }}
+        </a>
+      {{ else if eq (lower .name) "hatena" }}
+        <a href="https://b.hatena.ne.jp/entry/panel/?btitle={{ $ctx.Title }}&url={{ $ctx.Permalink | absLangURL }}" title="{{ i18n "Hatena Blog" | default "Hatena Blog" }}" aria-label="Hatena Blog Share Button" class="donation__item" target="_blank" rel="noreferrer" data-type="share">
+          {{ partial "svgs/share/hatena.svg" (dict "width" 35 "height" 35) }}
+        </a>
+      {{ else if eq (lower .name) "pinterest" }}
+        <a href="http://www.pinterest.com/pin/create/button/?url={{ $ctx.Permalink | absLangURL }}{{ if $.Param "featured_image" }}&media={{ (print "images/" ($.Param "featured_image")) | absURL }}{{ else if $.Param "image" }}&media={{ $.Param "image" | absURL }}{{end}}&description={{ $ctx.Description }}" title="{{ i18n "Pinterest" | default "Pinterest" }}" aria-label="Pinterest Share Button" class="donation__item" target="_blank" rel="noreferrer" data-type="share">
+          {{ partial "svgs/share/pinterest.svg" (dict "width" 35 "height" 35) }}
+        </a>
+      {{ else if eq (lower .name) "delicious" }}
+        <a href="http://www.delicious.com/save?url={{ $ctx.Permalink | absLangURL }}&title={{ $ctx.Title }}" title="{{ i18n "Delicious" | default "Delicious" }}" aria-label="Delicious Share Button" class="donation__item" target="_blank" rel="noreferrer" data-type="share">
+          {{ partial "svgs/share/delicious.svg" (dict "width" 35 "height" 35) }}
+        </a>
+      {{ else if eq (lower .name) "google" }}
+        <a href="https://www.google.com/bookmarks/mark?op=add&bkmk={{ $ctx.Permalink | absLangURL }}&title={{ $ctx.Title }}" title="{{ i18n "Google Bookmark" | default "Google Bookmark" }}" aria-label="Google Bookmark Share Button" class="donation__item" target="_blank" rel="noreferrer" data-type="share">
+          {{ partial "svgs/share/google.svg" (dict "width" 35 "height" 35) }}
+        </a>
       {{ end }}
     {{ end }}
   </div>
diff --git a/layouts/partials/svgs/share/delicious.svg b/layouts/partials/svgs/share/delicious.svg
new file mode 100644
index 0000000..14f8921
--- /dev/null
+++ b/layouts/partials/svgs/share/delicious.svg
@@ -0,0 +1 @@
+<svg data-name="delicious" enable-background="new 0 0 24 24" viewBox="0 0 24 24" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 12H0v12h12V12zM24 0H12v12h12V0z"/></svg>
diff --git a/layouts/partials/svgs/share/feedly.svg b/layouts/partials/svgs/share/feedly.svg
new file mode 100644
index 0000000..11e2c85
--- /dev/null
+++ b/layouts/partials/svgs/share/feedly.svg
@@ -0,0 +1 @@
+<svg data-name="feedly" enable-background="new 0 0 24 24" viewBox="0 0 24 24" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M13.86 1.989a2.609 2.609 0 0 0-3.726 0L.768 11.527a2.729 2.729 0 0 0 0 3.795l6.684 6.808a2.618 2.618 0 0 0 1.74.664h5.613a2.616 2.616 0 0 0 1.872-.791l6.554-6.675a2.726 2.726 0 0 0 0-3.795l-9.37-9.544zm-.26 17.422l-.935.95a.372.372 0 0 1-.268.114h-.8a.376.376 0 0 1-.247-.096l-.954-.97a.39.39 0 0 1 0-.542l1.337-1.36a.37.37 0 0 1 .531 0l1.337 1.361a.389.389 0 0 1 0 .543zm0-5.711l-3.737 3.808a.374.374 0 0 1-.268.111h-.799a.376.376 0 0 1-.25-.093l-.951-.97a.391.391 0 0 1 0-.544l4.139-4.214a.372.372 0 0 1 .531 0l1.337 1.362a.386.386 0 0 1 0 .54zm0-5.707l-6.54 6.66a.372.372 0 0 1-.268.113h-.8a.373.373 0 0 1-.249-.094L4.79 13.7a.388.388 0 0 1 0-.54l6.943-7.07a.372.372 0 0 1 .531 0l1.337 1.36a.389.389 0 0 1 0 .543z"/></svg>
diff --git a/layouts/partials/svgs/share/google.svg b/layouts/partials/svgs/share/google.svg
new file mode 100644
index 0000000..1642258
--- /dev/null
+++ b/layouts/partials/svgs/share/google.svg
@@ -0,0 +1 @@
+<svg data-name="google" enable-background="new 0 0 24 24" viewBox="0 0 24 24" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"/></svg>
diff --git a/layouts/partials/svgs/share/hatena.svg b/layouts/partials/svgs/share/hatena.svg
new file mode 100644
index 0000000..5365240
--- /dev/null
+++ b/layouts/partials/svgs/share/hatena.svg
@@ -0,0 +1 @@
+<svg data-name="hatena" enable-background="new 0 0 24 24"  viewBox="0 0 24 24" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M20.47 0C22.42 0 24 1.58 24 3.53v16.94c0 1.95-1.58 3.53-3.53 3.53H3.53C1.58 24 0 22.42 0 20.47V3.53C0 1.58 1.58 0 3.53 0h16.94zm-3.705 14.47c-.78 0-1.41.63-1.41 1.41s.63 1.414 1.41 1.414 1.41-.645 1.41-1.425-.63-1.41-1.41-1.41zM8.61 17.247c1.2 0 2.056-.042 2.58-.12.526-.084.976-.222 1.32-.412.45-.232.78-.564 1.02-.99s.36-.915.36-1.48c0-.78-.21-1.403-.63-1.87-.42-.48-.99-.734-1.74-.794.66-.18 1.156-.45 1.456-.81.315-.344.465-.824.465-1.424 0-.48-.103-.885-.3-1.26-.21-.36-.493-.645-.883-.87-.345-.195-.735-.315-1.215-.405-.464-.074-1.29-.12-2.474-.12H5.654v10.486H8.61zm.736-4.185c.705 0 1.185.088 1.44.262.27.18.39.495.39.93 0 .405-.135.69-.42.855-.27.18-.765.254-1.44.254H8.31v-2.297h1.05zm8.656.706v-7.06h-2.46v7.06H18zM8.925 9.08c.71 0 1.185.08 1.432.24.245.16.367.435.367.83 0 .38-.13.646-.39.804-.265.154-.747.232-1.452.232h-.57V9.08h.615z"/></svg>
diff --git a/layouts/partials/svgs/share/pinterest.svg b/layouts/partials/svgs/share/pinterest.svg
new file mode 100644
index 0000000..10b30a1
--- /dev/null
+++ b/layouts/partials/svgs/share/pinterest.svg
@@ -0,0 +1 @@
+<svg data-name="pinterest" enable-background="new 0 0 24 24" viewBox="0 0 24 24" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg>
diff --git a/layouts/partials/svgs/share/pocket.svg b/layouts/partials/svgs/share/pocket.svg
new file mode 100644
index 0000000..eb82ab9
--- /dev/null
+++ b/layouts/partials/svgs/share/pocket.svg
@@ -0,0 +1 @@
+<svg data-name="pocket" enable-background="new 0 0 24 24" viewBox="0 0 24 24" width="{{ .width }}" height="{{ .height }}" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M18.813 10.259l-5.646 5.419c-.32.305-.73.458-1.141.458-.41 0-.821-.153-1.141-.458l-5.646-5.419c-.657-.628-.677-1.671-.049-2.326.63-.657 1.671-.679 2.325-.05l4.511 4.322 4.517-4.322c.66-.631 1.697-.607 2.326.049.631.645.615 1.695-.045 2.326l-.011.001zm5.083-7.546c-.299-.858-1.125-1.436-2.041-1.436H2.179c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139.045.036.094.07.143.105l.03.023c1.411 1.03 2.989 1.728 4.694 2.072.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029 1.633-.36 3.148-1.036 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148L24 10.678V3.445c0-.251-.031-.5-.121-.742l.017.01z"/></svg>