From d4711ce198a1e1989f22d3f72f5b3edbf0e538cb Mon Sep 17 00:00:00 2001
From: Kushagra <kushagra22.aug@gmail.com>
Date: Fri, 11 Apr 2025 10:48:07 +0530
Subject: [PATCH 1/2] feat: add social sharing buttons to blog posts

Signed-off-by: Kushagra <kushagra22.aug@gmail.com>
---
 package.json                          |   1 +
 src/components/misc/SocialShare.astro | 111 ++++++++++++++++++++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 src/components/misc/SocialShare.astro

diff --git a/package.json b/package.json
index f504749..50c0f61 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "astro-icon": "^1.1.1",
     "colorjs.io": "^0.5.2",
     "hastscript": "^9.0.0",
+    "lucide-astro": "^0.487.0",
     "markdown-it": "^14.1.0",
     "mdast-util-to-string": "^4.0.0",
     "overlayscrollbars": "^2.10.0",
diff --git a/src/components/misc/SocialShare.astro b/src/components/misc/SocialShare.astro
new file mode 100644
index 0000000..1c6b371
--- /dev/null
+++ b/src/components/misc/SocialShare.astro
@@ -0,0 +1,111 @@
+---
+import { Icon } from 'astro-icon/components'
+import {
+  Facebook,
+  Linkedin,
+  MessageCircle,
+  Share2,
+  Twitter,
+} from 'lucide-astro'
+
+interface Props {
+  title: string
+  url: string
+  class?: string
+}
+
+const { title, url, class: className } = Astro.props
+const encodedTitle = encodeURIComponent(title)
+const encodedUrl = encodeURIComponent(url)
+
+const shareLinks = [
+  {
+    name: 'Twitter',
+    url: `https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`,
+    icon: Twitter,
+    label: 'Share on Twitter',
+  },
+  {
+    name: 'Facebook',
+    url: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
+    icon: Facebook,
+    label: 'Share on Facebook',
+  },
+  {
+    name: 'LinkedIn',
+    url: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
+    icon: Linkedin,
+    label: 'Share on LinkedIn',
+  },
+  {
+    name: 'Reddit',
+    url: `https://www.reddit.com/submit?url=${encodedUrl}&title=${encodedTitle}`,
+    icon: Share2,
+    label: 'Share on Reddit',
+  },
+  {
+    name: 'WhatsApp',
+    url: `https://api.whatsapp.com/send?text=${encodedTitle}%20${encodedUrl}`,
+    icon: MessageCircle,
+    label: 'Share on WhatsApp',
+  },
+]
+---
+
+<div class={`flex flex-wrap gap-2 ${className}`}>
+  {shareLinks.map(({ name, url, icon: IconComponent, label }) => (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400"
+      aria-label={label}
+    >
+      <IconComponent class="h-4 w-4" />
+      <span>{name}</span>
+    </a>
+  ))}
+</div>
+
+<style>
+  .social-share {
+    display: flex;
+    gap: 0.5rem;
+    margin: 1rem 0;
+  }
+
+  .social-share-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background-color: var(--color-bg-secondary);
+    color: var(--color-text);
+    transition: all 0.2s ease;
+  }
+
+  .social-share-button:hover {
+    background-color: var(--color-primary);
+    color: white;
+    transform: translateY(-2px);
+  }
+
+  .social-share-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+</style> 

From 53bca3a67c3ab6d548f8b989fadeca7905456944 Mon Sep 17 00:00:00 2001
From: Kushagra <kushagra22.aug@gmail.com>
Date: Fri, 11 Apr 2025 10:55:00 +0530
Subject: [PATCH 2/2] style: improve social sharing buttons styling and layout

Signed-off-by: Kushagra <kushagra22.aug@gmail.com>
---
 src/components/misc/SocialShare.astro | 10 +++++-----
 src/pages/posts/[...slug].astro       |  7 ++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/misc/SocialShare.astro b/src/components/misc/SocialShare.astro
index 1c6b371..74a9168 100644
--- a/src/components/misc/SocialShare.astro
+++ b/src/components/misc/SocialShare.astro
@@ -58,7 +58,7 @@ const shareLinks = [
       href={url}
       target="_blank"
       rel="noopener noreferrer"
-      class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400"
+      class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 transition-colors hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400 bg-gray-100 dark:bg-gray-800 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700"
       aria-label={label}
     >
       <IconComponent class="h-4 w-4" />
@@ -68,8 +68,9 @@ const shareLinks = [
 </div>
 
 <style>
-  .social-share {
+  .social-share-container {
     display: flex;
+    flex-wrap: wrap;
     gap: 0.5rem;
     margin: 1rem 0;
   }
@@ -78,9 +79,8 @@ const shareLinks = [
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 50%;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
     background-color: var(--color-bg-secondary);
     color: var(--color-text);
     transition: all 0.2s ease;
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index b84642a..98d28b5 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -3,6 +3,7 @@ import path from 'node:path'
 import { getCollection } from 'astro:content'
 import License from '@components/misc/License.astro'
 import Markdown from '@components/misc/Markdown.astro'
+import SocialShare from '@components/misc/SocialShare.astro'
 import I18nKey from '@i18n/i18nKey'
 import { i18n } from '@i18n/translation'
 import MainGridLayout from '@layouts/MainGridLayout.astro'
@@ -41,7 +42,9 @@ const jsonLd = {
     url: Astro.site,
   },
   datePublished: formatDateToYYYYMMDD(entry.data.published),
-  inLanguage: (entry.data.lang ? entry.data.lang.replace('_', '-') : siteConfig.lang.replace('_', '-')),
+  inLanguage: entry.data.lang
+    ? entry.data.lang.replace('_', '-')
+    : siteConfig.lang.replace('_', '-'),
   // TODO include cover image here
 }
 ---
@@ -105,6 +108,8 @@ const jsonLd = {
 
             {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
 
+            <SocialShare title={entry.data.title} url={Astro.url.toString()} class="mb-6 social-share-container onload-animation" />
+
         </div>
     </div>