feat: add social sharing component and integrate into blog post layout

Author: TechWatching

app/components/SocialsShare.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3 mb-5">
+    <span class="text-sm text-muted">Share this post</span>
+    <div class="flex flex-wrap justify-center gap-4">
+      <SocialShare
+        v-for="network in ['bluesky', 'mastodon', 'linkedin', 'hackernews', 'reddit', 'email']"
+        :key="network"
+        :network="network"
+        :styled="false"
+        :label="false"
+        class="text-muted p-3 rounded-lg transition-all duration-200 hover:text-primary hover:bg-elevated hover:scale-110"
+      />
+    </div>
+  </div>
+</template>

app/pages/posts/[slug].vue

@@ -87,6 +87,8 @@ if (post.value.image?.src) {
 
         <UContentSurround :surround="surround" />
 
+        <SocialsShare />
+
         <GiscusComments />
       </UPageBody>
 

nuxt.config.ts

@@ -8,7 +8,8 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     'nuxt-og-image',
     '@nuxt/hints',
-    '@nuxt/scripts'
+    '@nuxt/scripts',
+    '@stefanobartoletti/nuxt-social-share'
   ],
 
   devtools: {
@@ -28,6 +29,10 @@ export default defineNuxtConfig({
     name: 'Alexandre Nédélec'
   },
 
+  socialShare: {
+    baseUrl: 'https://techwatching.dev'
+  },
+
   experimental: {
     viewTransition: true
   },

package.json

@@ -35,6 +35,7 @@
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/vscode-icons": "^1.2.37",
     "@nuxt/eslint": "^1.10.0",
+    "@stefanobartoletti/nuxt-social-share": "^2.3.0",
     "eslint": "^9.39.1",
     "typescript": "^5.9.3",
     "vue-tsc": "^3.1.5"