✨ Add social sharing links

config/_default/params.toml

@@ -17,6 +17,7 @@
   showHeadingAnchors = true
   showPagination = true
   showReadingTime = true
+  # sharingLinks = ["facebook", "twitter", "reddit", "linkedin", "email"]
 
 [list]
   groupByYear = true

data/sharing.json

@@ -0,0 +1,27 @@
+{
+  "email": {
+    "icon": "email",
+    "title": "Send via email",
+    "url": "mailto:?body=%s&subject=%s"
+  },
+  "facebook": {
+    "icon": "facebook",
+    "title": "Share on Facebook",
+    "url": "https://www.facebook.com/sharer/sharer.php?u=%s&quote=%s"
+  },
+  "linkedin": {
+    "icon": "linkedin",
+    "title": "Share on LinkedIn",
+    "url": "https://www.linkedin.com/shareArticle?mini=true&url=%s&title=%s"
+  },
+  "reddit": {
+    "icon": "reddit",
+    "title": "Submit to Reddit",
+    "url": "https://reddit.com/submit/?url=%s&resubmit=true&title=%s"
+  },
+  "twitter": {
+    "icon": "twitter",
+    "title": "Tweet on Twitter",
+    "url": "https://twitter.com/intent/tweet/?url=%s&text=%s"
+  }
+}

layouts/_default/single.html

@@ -16,8 +16,9 @@
     <section class="prose dark:prose-light">
       {{ .Content | emojify }}
     </section>
-    <footer>
+    <footer class="pt-8">
       {{ partial "author.html" . }}
+      {{ partial "sharing-links.html" . }}
       {{ partial "article-pagination.html" . }}
     </footer>
     {{/* Comments */}}

layouts/partials/author.html

@@ -1,5 +1,5 @@
 {{ if .Params.showAuthor | default (.Site.Params.article.showAuthor | default true) }}
-  <div class="flex items-center pt-8">
+  <div class="flex items-center">
     {{ with .Site.Author.image }}
       <img class="w-24 h-24 !mt-0 !mb-0 mr-4 rounded-full" src="{{ . }}" />
     {{ end }}

layouts/partials/sharing-links.html

@@ -0,0 +1,15 @@
+{{ with .Site.Params.article.sharingLinks }}
+  {{ $links := site.Data.sharing }}
+  <section class="flex flex-row flex-wrap justify-center pt-4 text-xl">
+    {{ range . }}
+      {{ with index $links . }}
+        <a
+          class="bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-primary-400 dark:hover:text-gray-800 m-1 hover:bg-primary-500 hover:text-white rounded min-w-[2.4rem] inline-block text-center p-1"
+          href="{{ printf .url $.Permalink $.Title }}"
+          title="{{ .title }}"
+          >{{ partial "icon.html" .icon }}</a
+        >
+      {{ end }}
+    {{ end }}
+  </section>
+{{ end }}