From 72ebcf134a861a62ae915ce1d8542cfdbf3407c1 Mon Sep 17 00:00:00 2001
From: BBaoVanC <bbaovanc@bbaovanc.com>
Date: Sat, 30 Apr 2022 21:23:45 -0500
Subject: [PATCH] Add share buttons below post

---
 assets/css/bobastyle.css     | 23 +++++++++++++++++
 layouts/_default/single.html |  6 ++++-
 layouts/partials/share.html  | 50 ++++++++++++++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 layouts/partials/share.html

diff --git a/assets/css/bobastyle.css b/assets/css/bobastyle.css
index acf5816..6c7d6b8 100644
--- a/assets/css/bobastyle.css
+++ b/assets/css/bobastyle.css
@@ -274,6 +274,29 @@
 }
 
 
+/* Social media share buttons */
+.share-buttons {
+  background: var(--background-2);
+  margin: 25px 0;
+  padding: 8px 0;
+  border-radius: 8px;
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+}
+
+.share-buttons a {
+  background-color: var(--background-4);
+  padding: 4px;
+  border-radius: 8px;
+}
+
+.share-buttons svg {
+  width: 32px;
+  height: 32px;
+}
+
+
 /* Back to top */
 #back-to-top {
   position: fixed;
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 696ae66..25bd713 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -32,6 +32,8 @@
         {{ .Content }}
     </div>
 
+    {{ partial "series-box.html" . }}
+
     {{ if or .NextInSection .PrevInSection }}
         <div class="prevnext">
             {{ with .NextInSection }}
@@ -62,7 +64,9 @@
         </div>
     {{ end }}
 
-    {{ partial "series-box.html" . }}
+    {{ if .Site.Params.shareButtons }}
+        {{ partial "share.html" . }}
+    {{ end }}
 
     {{ $related := .Site.RegularPages.Related . | first 10 }}
     {{ with $related }}
diff --git a/layouts/partials/share.html b/layouts/partials/share.html
new file mode 100644
index 0000000..d9c8e96
--- /dev/null
+++ b/layouts/partials/share.html
@@ -0,0 +1,50 @@
+<div class="share-buttons">
+    {{ if .Site.Params.shareButtons.twitter }}
+        <a class="twitter-share"
+           target="_blank"
+           rel="noopener"
+           href="https://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}&via=bbaovanc">
+            {{- partial "icon.html" "twitter" -}}
+        </a>
+    {{ end }}
+
+    {{ if .Site.Params.shareButtons.facebook }}
+        <a class="facebook-share"
+           target="_blank"
+           rel="noopener"
+           href="https://www.facebook.com/sharer.php?u={{ .Permalink }}">
+            {{- partial "icon.html" "facebook" -}}
+        </a>
+    {{ end }}
+
+    {{ if .Site.Params.shareButtons.linkedin }}
+        <a class="linkedin-share"
+           target="_blank"
+           rel="noopener"
+           href="https://www.linkedin.com/sharing/share-offsite/?url={{ .Permalink }}">
+            {{- partial "icon.html" "linkedin" -}}
+        </a>
+    {{ end }}
+
+    {{ if .Site.Params.shareButtons.reddit }}
+        <a class="reddit-share"
+           target="_blank"
+           rel="noopener"
+           href="https://reddit.com/submit?url={{ .Permalink }}&title={{ .Title }}">
+            {{- partial "icon.html" "reddit" -}}
+        </a>
+    {{ end }}
+
+    {{/* Telegram icon doesn't have `viewbox` set, which breaks the sizing.
+            https://stackoverflow.com/q/72073399/19003757
+            https://github.com/michaelampr/jam/issues/39
+    {{ if .Site.Params.shareButtons.telegram }}
+        <a class="telegram-share"
+           target="_blank"
+           rel="noopener"
+           href="https://t.me/share/url?url={{ .Permalink }}&text={{ .Title }}">
+            {{- partial "icon.html" "telegram" -}}
+        </a>
+    {{ end }}
+    */}}
+</div>