Added some social buttons to the "Post" template (#415)

* Added new 'GitForge' param for non-git repos

* Added some (optional) social buttons

* Small fix for hardcoded values

* Update single.html

* Update look & feel for share buttons

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix improve-this-page btn alignment when share-buttons disabled

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

Co-authored-by: Pablo Marcos <codebergflamingo@staplehorse.anonaddy.com>
Co-authored-by: hossainemruz <hossainemruz@gmail.com>

18 files changed, 182 insertions, 12 deletions

diff --git a/i18n/bn.toml b/i18n/bn.toml
index d1f7a72..b66b430 100644
--- a/i18n/bn.toml
+++ b/i18n/bn.toml
@@ -50,6 +50,9 @@ other = "পূর্ববর্তী"
 [next]
 other = "পরবর্তী"
 
+[share_on]
+other = "শেয়ার করুন"
+
 [improve_this_page]
 other = "এই পৃষ্ঠাটি উন্নত করুন"
 
diff --git a/i18n/de.toml b/i18n/de.toml
index 19a4cb4..979c7c6 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -53,6 +53,9 @@ other = "Vorherige"
 [next]
 other = "Nächste"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Diese Seite verbessern"
 
diff --git a/i18n/en.toml b/i18n/en.toml
index 00e7df0..e388159 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -53,6 +53,9 @@ other = "Prev"
 [next]
 other = "Next"
 
+[share_on]
+other = "Share on"
+
 [improve_this_page]
 other = "Improve this page"
 
diff --git a/i18n/es.toml b/i18n/es.toml
index 29ef09f..a2ab49b 100644
--- a/i18n/es.toml
+++ b/i18n/es.toml
@@ -53,6 +53,9 @@ other = "Anterior"
 [next]
 other = "Siguiente"
 
+[share_on]
+other = "Compartir en"
+
 [improve_this_page]
 other = "Mejorar esta página"
 
diff --git a/i18n/fr.toml b/i18n/fr.toml
index 4deb5c5..4b9135f 100644
--- a/i18n/fr.toml
+++ b/i18n/fr.toml
@@ -53,6 +53,9 @@ other = "Précédent"
 [next]
 other = "Suivant"
 
+[share_on]
+other = "Partager sur"
+
 [improve_this_page]
 other = "Améliorez cette page"
 
diff --git a/i18n/hi.toml b/i18n/hi.toml
index 8be933a..2b01f97 100644
--- a/i18n/hi.toml
+++ b/i18n/hi.toml
@@ -53,6 +53,9 @@ other = "पिछला"
 [next]
 other = "आगे"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "इस पृष्ठ को सुधारें"
 
diff --git a/i18n/id.toml b/i18n/id.toml
index 69e641f..20b8d95 100644
--- a/i18n/id.toml
+++ b/i18n/id.toml
@@ -53,6 +53,9 @@ other = "Sebelumnya"
 [next]
 other = "Lanjut"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Perbaiki halaman ini"
 
diff --git a/i18n/it.toml b/i18n/it.toml
index 45b2cea..b59a57a 100644
--- a/i18n/it.toml
+++ b/i18n/it.toml
@@ -53,6 +53,9 @@ other = "Precedente"
 [next]
 other = "Successivo"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Migliora questa pagina"
 
diff --git a/i18n/jp.toml b/i18n/jp.toml
index 846036d..f243656 100644
--- a/i18n/jp.toml
+++ b/i18n/jp.toml
@@ -50,6 +50,9 @@ other = "前"
 [next]
 other = "次"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "編集リクエストを送る"
 
diff --git a/i18n/ko.toml b/i18n/ko.toml
index c4dae96..e9c9f4b 100644
--- a/i18n/ko.toml
+++ b/i18n/ko.toml
@@ -53,6 +53,9 @@ other = "이전"
 [next]
 other = "다음"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "이 페이지를 개선"
 
diff --git a/i18n/nl.toml b/i18n/nl.toml
index 40d20d6..070504e 100644
--- a/i18n/nl.toml
+++ b/i18n/nl.toml
@@ -52,6 +52,9 @@ other = "Vorherige"
 [next]
 other = "Nächste"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Diese Seite verbessern"
 
diff --git a/i18n/ru.toml b/i18n/ru.toml
index 92c8864..76fbe25 100644
--- a/i18n/ru.toml
+++ b/i18n/ru.toml
@@ -53,6 +53,9 @@ other = "Предыдущий"
 [next]
 other = "Следующий"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Улучшить эту страницу"
 
diff --git a/i18n/vn.toml b/i18n/vn.toml
index d875e8c..a88524e 100644
--- a/i18n/vn.toml
+++ b/i18n/vn.toml
@@ -53,6 +53,9 @@ other = "Trước"
 [next]
 other = "Tiếp theo"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "Cải thiện trang này"
 
diff --git a/i18n/zh-cn.toml b/i18n/zh-cn.toml
index e9827fc..8deb3cc 100644
--- a/i18n/zh-cn.toml
+++ b/i18n/zh-cn.toml
@@ -53,6 +53,9 @@ other = "上一篇"
 [next]
 other = "下一篇"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "改善此页面"
 
diff --git a/i18n/zh-tw.toml b/i18n/zh-tw.toml
index c814fee..750e2d0 100644
--- a/i18n/zh-tw.toml
+++ b/i18n/zh-tw.toml
@@ -53,6 +53,9 @@ other = "上一篇"
 [next]
 other = "下一篇"
 
+# [share_on]
+# other = "Share on"
+
 [improve_this_page]
 other = "改善此頁面"
 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 3bc2059..3bd38b5 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -68,6 +68,65 @@
           {{ .Page.Content }}
         </div>
 
+        <!-- Share or Contribute -->
+        <div class="row pl-3 pr-3">
+        <!--Social Media Share Buttons-->
+        <div class="col-md-6 share-buttons">
+        {{ if site.Params.features.blog.shareButtons }}
+            <strong>{{ i18n "share_on" }}:</strong>
+            {{ if site.Params.features.blog.shareButtons.facebook }}
+            <a class="btn btn-sm facebook-btn" href="https://www.facebook.com/sharer.php?u={{ .Permalink }}" target="_blank">
+              <i class="fab fa-facebook"></i>
+            </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.twitter }}
+                <a class="btn btn-sm twitter-btn" href="https://twitter.com/share?url={{ .Permalink }}&text={{ .Title }}&via={{- site.Title -}}" target="_blank">
+                  <i class="fab fa-twitter"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.reddit }}
+                <a  class="btn btn-sm reddit-btn" href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                  <i class="fab fa-reddit"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.tumblr }}
+                <a class="btn btn-sm tumblr-btn" href="https://www.tumblr.com/share/link?url={{ .Permalink }}&name={{ .Title }}{{- with .Params.description -}}&description={{- . -}}{{- end -}}" target="_blank">
+                  <i class="fab fa-tumblr"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.pocket }}
+                <a class="btn btn-sm pocket-btn" href="https://getpocket.com/save?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                  <i class="fab fa-get-pocket"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.linkedin }}
+                <a class="btn btn-sm linkedin-btn" href="https://www.linkedin.com/shareArticle?url={{ .Permalink }}&title={{ .Title }}" target="_blank">
+                  <i class="fab fa-linkedin"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.diaspora }}
+                <a class="btn btn-sm diaspora-btn" href="https://share.diasporafoundation.org/?title={{ .Title }}&url={{ .Permalink }}" rel="nofollow" target="_blank">
+                  <i class="fab fa-diaspora"></i>
+                </a>
+            {{ end }}
+             {{ if site.Params.features.blog.shareButtons.mastodon }}
+                <a class="btn btn-sm mastodon-btn" href="https://mastodon.social/share?text={{ .Title }} - {{ .Permalink }}" target="_blank">
+                  <i class="fab fa-mastodon"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.whatsapp }}
+                 <a class="btn btn-sm whatsapp-btn" href="https://api.whatsapp.com/send?text={{ .Title }} {{ .Permalink }}" target="_blank">
+                  <i class="fab fa-whatsapp"></i>
+                </a>
+            {{ end }}
+            {{ if site.Params.features.blog.shareButtons.email }}
+                <a class="btn btn-sm email-btn" href="mailto:?subject={{ .Title }}&body={{ .Permalink }}" target="_blank">
+                  <i class="fas fa-envelope-open-text"></i>
+                </a>
+            {{ end }}
+          {{ end }}
+          </div>
+
         <!--- Improve this page button --->
         {{ if site.Params.GitRepo }}
           {{ if site.Params.GitBranch }}
@@ -75,7 +134,7 @@
           {{ else }}
             {{ .Scratch.Set "GitBranch" "main" }}
           {{ end }}
-          <div class="btn-improve-page">
+          <div class="col-md-6 btn-improve-page">
             {{ if ( eq site.Params.GitForge "gitlab" ) }}
               <a href="{{ site.Params.GitRepo }}/-/edit/{{ .Scratch.Get "GitBranch" }}/{{ .File.Path }}" title="{{ i18n "improve_this_page" }}" target="_blank" rel="noopener">
             {{ else if ( eq site.Params.GitForge "gitea" ) }}
@@ -88,8 +147,11 @@
               </a>
           </div>
         {{ end }}
+        </div>
+
+
 
-        <!---Next and Previous Navigator -->
+      <!---Next and Previous Navigator -->
       <hr />
         {{ partial "navigators/next-prev-navigator.html" . }}
       <hr />
diff --git a/static/css/layouts/main.css b/static/css/layouts/main.css
index 467bd4e..bc96652 100644
--- a/static/css/layouts/main.css
+++ b/static/css/layouts/main.css
@@ -50,17 +50,17 @@ a:hover {
 }
 
 .btn-dark {
-  background-color: #3c4858;
-  border-color: #3c4858;
-  color: #e5e9f2;
-  transition: all 0.3s ease-out;
+  background-color: #3c4858!important;
+  border-color: #3c4858!important;
+  color: #e5e9f2!important;
+  transition: all 0.3s ease-out!important;
 }
 
 .btn-dark:hover,
 .btn-dark:focus {
-  background-color: #248aaa;
-  border-color: #248aaa;
-  transition: all 0.3s ease-out;
+  background-color: #248aaa!important;
+  border-color: #248aaa!important;
+  transition: all 0.3s ease-out!important;
 }
 
 .btn-outline-info {
diff --git a/static/css/layouts/single.css b/static/css/layouts/single.css
index 2a17024..0215391 100644
--- a/static/css/layouts/single.css
+++ b/static/css/layouts/single.css
@@ -205,6 +205,69 @@ h6 {
   padding: 10px;
 }
 
+.share-buttons .btn {
+  color: #e5e9f2 !important;
+  transition: all 0.3s ease-out !important;
+}
+
+.share-buttons .btn:hover,
+.share-buttons .btn:focus {
+  background-color: #248aaa !important;
+  border-color: #248aaa !important;
+  transition: all 0.3s ease-out !important;
+}
+
+.share-buttons .facebook-btn {
+  background-color: #4267b2 !important;
+  border-color: #4267b2 !important;
+}
+
+.share-buttons .twitter-btn {
+  background-color: #1da1f2 !important;
+  border-color: #1da1f2 !important;
+}
+
+.share-buttons .reddit-btn {
+  background-color: #ff4500 !important;
+  border-color: #ff4500 !important;
+}
+
+.share-buttons .tumblr-btn {
+  background-color: #34465d !important;
+  border-color: #34465d !important;
+}
+
+.share-buttons .pocket-btn {
+  background-color: #ef4056 !important;
+  border-color: #ef4056 !important;
+}
+
+.share-buttons .linkedin-btn {
+  background-color: #2867b2 !important;
+  border-color: #2867b2 !important;
+}
+
+.share-buttons .diaspora-btn {
+  background-color: #3c4858 !important;
+  border-color: #3c4858 !important;
+}
+
+.share-buttons .mastodon-btn {
+  background-color: #2791da !important;
+  border-color: #2791da !important;
+}
+
+.share-buttons .whatsapp-btn {
+  background-color: #4ac959 !important;
+  border-color: #4ac959 !important;
+}
+
+.share-buttons .email-btn {
+  background-color: #3c4858 !important;
+  border-color: #3c4858 !important;
+  transition: all 0.3s ease-out !important;
+}
+
 .btn-improve-page {
   text-align: right;
 }
@@ -240,13 +303,13 @@ h6 {
   text-align: center;
 }
 .taxonomy-terms li {
-  font-size: .8em;
+  font-size: 0.8em;
   list-style-type: none;
   display: inline-block;
-	background: #248aaa;
+  background: #248aaa;
 }
 
-.taxonomy-terms a{
+.taxonomy-terms a {
   color: #f9fafc;
 }