feat : added social sharing button to blog posts

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",

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 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" />
+      <span>{name}</span>
+    </a>
+  ))}
+</div>
+
+<style>
+  .social-share-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin: 1rem 0;
+  }
+
+  .social-share-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    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> 

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>