Made social sharing component

web/src/components/form/Social.astro

@@ -0,0 +1,125 @@
+---
+
+import Icon from '@components/form/FontAwesome.svelte';
+import { site, title as defaultTitle, description as defaultDescription } from '@utils/config';
+
+interface Props {
+  url?: string;
+  title?: string;
+  description?: string;
+}
+
+const url = Astro.props.url || site;
+const title = Astro.props.title || defaultTitle;
+const description = Astro.props.description || defaultDescription;
+
+const encodedUrl = encodeURIComponent(url);
+const encodedTitle = encodeURIComponent(title);
+const encodedDescription = encodeURIComponent(description);
+
+const socialMedias = {
+  mastodon: {
+    url: `https://mastodon.social/share?text=${encodeURIComponent(`${title} ${description}`)}&url=${encodedUrl}`,
+    title: 'Mastodon',
+    icon: 'mastodon',
+    color: '#6364FF',
+  },
+  twitter: {
+    url: `https://twitter.com/intent/tweet?text=${encodeURIComponent(`${title} ${description}`)}&url=${url}`,
+    title: 'Twitter',
+    icon: 'twitter',
+    color: '#444343'
+  },
+  reddit: {
+    url: `https://reddit.com/submit?url=${encodedUrl}&title=${encodedTitle}`,
+    title: 'Reddit',
+    icon: 'reddit',
+    color: '#FF4500',
+  },
+  linkedIn: {
+    url: `https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}&title=${encodedTitle}&summary=${encodedDescription}`,
+    title: 'LinkedIn',
+    icon: 'linkedin',
+    color: '#0A66C2'
+  },
+  pinterest: {
+    url: `https://pinterest.com/pin/create/button/?url=${encodedUrl}&description=${encodedTitle}`,
+    title: 'Pinterest',
+    icon: 'pinterest',
+    color: '#BD081C',
+  },
+  telegram: {
+    url: `https://t.me/share/url?url=${encodedUrl}&text=${encodeURIComponent(`${title} ${description}`)}`,
+    title: 'Telegram',
+    icon: 'telegram',
+    color: '#26A5E4',
+  },
+  whatsapp: {
+    url: `https://wa.me/?text=${encodedTitle} ${encodedUrl}`,
+    title: 'WhatsApp',
+    icon: 'whatsapp',
+    color: '#25D366',
+  },
+  signal: {
+    url: `https://signal.me/#p/+${encodedUrl}`,
+    title: 'Signal',
+    icon: 'signal',
+    color: '#3A76F0',
+  },
+  pocket: {
+    url: `https://getpocket.com/save?url=${encodedUrl}&title=${encodedTitle}`,
+    title: 'Pocket',
+    icon: 'pocket',
+    color: '#EF3F56',
+  },
+};
+
+---
+
+<ul class="social-share">
+  {Object.entries(socialMedias).map(([platform, shareUrl]) => (
+    <li style={`--color: ${shareUrl.color}`}>
+      <a title={`Share on ${platform}`} href={shareUrl.url} target="_blank" rel="noopener noreferrer">
+        <Icon iconName={shareUrl.icon} />
+      </a>
+    </li>
+  ))}
+</ul>
+
+<style lang="scss">
+.social-share {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  li {
+    padding: 0;
+    margin: 0;
+    opacity: 0.8;
+    border: 1px solid var(--foreground);
+    box-shadow: 2px 2px 0 var(--foreground);
+    border-radius: var(--curve-sm);
+    transition: all 0.2s ease-in-out;
+    a {
+      display: flex;
+      color: var(--foreground);
+      transition: all 0.2s ease-in-out;
+      padding: 4px;
+      :global(svg) {
+        width: 2rem;
+        height: 2rem;
+      }
+    }
+    &:hover {
+      box-shadow: 3px 3px 0 var(--foreground);
+      border-radius: var(--curve-md);
+      opacity: 1;
+      a {
+        color: var(--color);
+      }
+    }
+  }
+}
+</style>
+