Add basic Social Share buttons

src/components/atoms/SocialShare.astro

@@ -0,0 +1,21 @@
+---
+import { Icon } from 'astro-icon';
+const { text, url, class: className = "inline-block" } = Astro.props;
+---
+
+<div class={className}>
+  <span class="align-super font-bold">Share:</span> 
+	<button class="ml-2" data-aw-social-share="facebook" data-aw-url={url}><Icon name="logos:facebook" class="w-6 h-6" /></button>
+	<button class="ml-2" data-aw-social-share="twitter" data-aw-url={url} data-aw-text={text}
+		><Icon name="logos:twitter" class="w-6 h-6" />
+	</button>
+	<button class="ml-2" data-aw-social-share="linkedin" data-aw-url={url} data-aw-text={text}
+		><Icon name="logos:linkedin-icon" class="w-6 h-6" />
+	</button>
+	<button class="ml-2" data-aw-social-share="whatsapp" data-aw-url={url} data-aw-text={text}
+		><Icon name="logos:whatsapp" class="w-6 h-6" />
+	</button>
+	<button class="ml-2" data-aw-social-share="mail" data-aw-url={url} data-aw-text={text}
+		><Icon name="tabler:mail" class="w-6 h-6" />
+	</button>
+</div>

src/components/blog/SinglePost.astro

@@ -1,10 +1,11 @@
 ---
 import Picture from '~/components/core/Picture.astro';
 import PostTags from '~/components/atoms/Tags.astro';
+import SocialShare from '~/components/atoms/SocialShare.astro';
 
 import { getFormattedDate } from '~/utils/utils';
 
-const { post } = Astro.props;
+const { post, canonical } = Astro.props;
 ---
 
 <section class="py-8 sm:py-16 lg:py-20 mx-auto">
@@ -41,8 +42,9 @@ const { post } = Astro.props;
 		>
 			{post.Content ? <post.Content /> : <Fragment set:html={post.body} />}
 		</div>
-		<div class="container mx-auto px-8 sm:px-6 max-w-3xl mt-8">
+		<div class="container mx-auto px-6 sm:px-6 max-w-3xl mt-8 flex justify-between flex-col sm:flex-row">
-			<PostTags tags={post.tags} />
+			<PostTags tags={post.tags} class="mr-5" />
+			<SocialShare url={canonical} text={post.title} class="mt-5 sm:mt-1 align-middle text-gray-400 dark:text-slate-600"/>
 		</div>
 	</article>
 </section>

src/components/core/BasicScripts.astro

@@ -37,6 +37,39 @@
 			document.documentElement.classList.toggle('dark');
 			localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
 		});
+
+		attachEvent('[data-aw-social-share]', 'click', function (elem) {
+			const network = elem.getAttribute('data-aw-social-share');
+			const url = encodeURIComponent(elem.getAttribute('data-aw-url'));
+			const text = encodeURIComponent(elem.getAttribute('data-aw-text'));
+
+			let href;
+			switch (network) {
+				case 'facebook':
+					href = `https://www.facebook.com/sharer.php?u=${url}`;
+					break;
+				case 'twitter':
+					href = `https://twitter.com/intent/tweet?url=${url}&text=${text}`;
+					break;
+				case 'linkedin':
+					href = `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${text}`;
+					break;
+				case 'whatsapp':
+					href = `https://wa.me/?text=${text}%20${url}`;
+					break;
+				case "mail":
+					href = `mailto:?subject=%22${text}%22&body=${text}%20${url}`;
+					break;
+
+				default:
+					return;
+			}
+
+			const newlink = document.createElement('a');
+			newlink.target = '_blank';
+			newlink.href = href;
+			newlink.click();
+		});
 	};
 	window.onpageshow = function () {
 		const elem = document.querySelector('[data-aw-toggle-menu]');

src/pages/[...blog]/[slug].astro

@@ -23,11 +23,12 @@ export async function getStaticPaths() {
 }
 
 const { post } = Astro.props;
+const canonical = post.canonical || getCanonical(getPermalink(post.slug, 'post'))
 
 const meta = {
 	title: `${post.title} — ${SITE.name}`,
 	description: post.description,
-	canonical: post.canonical || getCanonical(getPermalink(post.slug, 'post')),
+	canonical: canonical,
 	image: await findImage(post.image),
 	ogTitle: post.title,
 	ogType: 'article',
@@ -35,5 +36,5 @@ const meta = {
 ---
 
 <Layout {meta}>
-	<SinglePost post={{ ...post, image: meta.image }} />
+	<SinglePost post={{ ...post, image: meta.image }} canonical={canonical} />
 </Layout>