From 1e2c5e82d8e573d70a340e378659fa52be84df3d Mon Sep 17 00:00:00 2001
From: immodded <75246338+immodded@users.noreply.github.com>
Date: Mon, 8 Jan 2024 14:11:10 +0530
Subject: [PATCH] feat: add share links in blog post (#215)

* Add share links

* refactor: update and rename Sharebutton to ShareLinks

- rename SOCIALS to shareLinks to avoid confusion with `src/config.ts > SOCIALS`
- fix type error related with shareLinks
- add `linkTitle` in shareLinks for better accessibility
- update styles to looks good in all devices

* refactor: place ShareLinks next to `back to top`

- place ShareLinks at the bottom (next to `back to top`)
- update styles for ShareLinks and Back to Top button

---------

Co-authored-by: Sat Naing <satnaingdev@gmail.com>
---
 src/components/ShareLinks.astro | 65 +++++++++++++++++++++++++++++++++
 src/layouts/PostDetails.astro   | 10 ++++-
 2 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ShareLinks.astro

diff --git a/src/components/ShareLinks.astro b/src/components/ShareLinks.astro
new file mode 100644
index 0000000..60477f1
--- /dev/null
+++ b/src/components/ShareLinks.astro
@@ -0,0 +1,65 @@
+---
+import LinkButton from "./LinkButton.astro";
+import socialIcons from "@assets/socialIcons";
+
+const URL = Astro.url;
+
+const shareLinks = [
+  {
+    name: "WhatsApp",
+    href: "https://wa.me/?text=",
+    linkTitle: `Share this post via WhatsApp`,
+  },
+  {
+    name: "Facebook",
+    href: "https://www.facebook.com/sharer.php?u=",
+    linkTitle: `Share this post on Facebook`,
+  },
+  {
+    name: "Twitter",
+    href: "https://twitter.com/intent/tweet?url=",
+    linkTitle: `Share this post on Facebook`,
+  },
+  {
+    name: "Telegram",
+    href: "https://t.me/share/url?url=",
+    linkTitle: `Share this post via Telegram`,
+  },
+  {
+    name: "Pinterest",
+    href: "https://pinterest.com/pin/create/button/?url=",
+    linkTitle: `Share this post on Pinterest`,
+  },
+  {
+    name: "Mail",
+    href: "mailto:?subject=See%20this%20post&body=",
+    linkTitle: `Share this post via email`,
+  },
+] as const;
+---
+
+<div class={`social-icons`}>
+  <span class="italic">Share this post on:</span>
+  <div class="text-center">
+    {
+      shareLinks.map(social => (
+        <LinkButton
+          href={`${social.href + URL}`}
+          className="link-button"
+          title={social.linkTitle}
+        >
+          <Fragment set:html={socialIcons[social.name]} />
+        </LinkButton>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  .social-icons {
+    @apply flex flex-col flex-wrap items-center justify-center gap-1 sm:items-start;
+  }
+  .link-button {
+    @apply scale-90 p-2 hover:rotate-6 sm:p-1;
+  }
+</style>
diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro
index 591cc11..c87219e 100644
--- a/src/layouts/PostDetails.astro
+++ b/src/layouts/PostDetails.astro
@@ -6,6 +6,7 @@ import Tag from "@components/Tag.astro";
 import Datetime from "@components/Datetime";
 import type { CollectionEntry } from "astro:content";
 import { slugifyStr } from "@utils/slugify";
+import ShareLinks from "@components/ShareLinks.astro";
 
 export interface Props {
   post: CollectionEntry<"blog">;
@@ -73,10 +74,13 @@ const layoutProps = {
     <ul class="my-8">
       {tags.map(tag => <Tag tag={slugifyStr(tag)} />)}
     </ul>
-    <div class="flex justify-end">
+
+    <div
+      class="flex flex-col-reverse items-center justify-between gap-6 sm:flex-row-reverse sm:items-end sm:gap-4"
+    >
       <button
         id="back-to-top"
-        class="focus-outline whitespace-nowrap hover:opacity-75"
+        class="focus-outline whitespace-nowrap py-1 hover:opacity-75"
       >
         <svg xmlns="http://www.w3.org/2000/svg" class="rotate-90">
           <path
@@ -85,6 +89,8 @@ const layoutProps = {
         </svg>
         <span>Back to Top</span>
       </button>
+
+      <ShareLinks />
     </div>
   </main>
   <Footer />