From e2e894df8ff69b68497ae3cbe67b38b1bc64c56f Mon Sep 17 00:00:00 2001
From: Quentin Deroubaix <139884126+quentinderoubaix@users.noreply.github.com>
Date: Wed, 4 Sep 2024 13:34:27 +0200
Subject: [PATCH] feat: use WebShare api (#905)

---
 demo/src/lib/layout/Published.svelte         | 62 ++++++++++++++++----
 demo/src/routes/blog/2024-02-01/+page.svelte |  2 +-
 2 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/demo/src/lib/layout/Published.svelte b/demo/src/lib/layout/Published.svelte
index 671689bd9d..bf44cdbb01 100644
--- a/demo/src/lib/layout/Published.svelte
+++ b/demo/src/lib/layout/Published.svelte
@@ -4,8 +4,10 @@
 	import twitter from 'bootstrap-icons/icons/twitter-x.svg?raw';
 	import facebook from 'bootstrap-icons/icons/facebook.svg?raw';
 	import linkedin from 'bootstrap-icons/icons/linkedin.svg?raw';
+	import share from 'bootstrap-icons/icons/share.svg?raw';
 
 	import fbasso from '$resources/images/fbasso.webp';
+	import {onMount} from 'svelte';
 
 	type AuthorInfo = {
 		icon: string;
@@ -19,11 +21,31 @@
 		},
 	} satisfies Record<string, AuthorInfo>;
 
-	export let date;
+	export let date: string;
 	export let author: keyof typeof authorLogo;
+	export let title: string;
+
+	let canWebShare = false;
+	let mounted = false;
 
 	$: encodedUrl = encodeURIComponent($page.url.href);
+	$: encodedTitle = encodeURIComponent(title);
 	$: formattedDate = Intl.DateTimeFormat('en-US', {dateStyle: 'medium'}).format(new Date(date));
+	$: webShareData = {
+		url: $page.url.href,
+		title,
+	};
+
+	onMount(() => {
+		canWebShare = !!navigator.canShare?.(webShareData);
+		mounted = true;
+	});
+
+	const webShare = () => {
+		if (canWebShare) {
+			void navigator.share(webShareData);
+		}
+	};
 </script>
 
 <div class="d-flex flex-wrap">
@@ -34,16 +56,34 @@
 			<div>Published on {formattedDate}</div>
 		</div>
 	</div>
-	<div class="d-flex flex-grow-1 justify-content-end gap-2 ms-5 align-self-end">
-		<a target="_blank" class="nav-link" href="https://twitter.com/share?url={encodedUrl}" aria-label="Share on Twitter">
-			<Svg className="icon-20 align-middle" svg={twitter} />
-		</a>
-		<a target="_blank" class="nav-link" href="https://www.facebook.com/sharer/sharer.php?u={encodedUrl}" aria-label="Share on Facebook">
-			<Svg className="icon-20 align-middle" svg={facebook} />
-		</a>
-		<a target="_blank" class="nav-link" href="https://www.linkedin.com/sharing/share-offsite/?url={encodedUrl}" aria-label="Share on LinkedIn">
-			<Svg className="icon-20 align-middle" svg={linkedin} />
-		</a>
+	<div class="d-flex flex-grow-1 justify-content-end gap-3 ms-5 align-self-end">
+		{#if mounted}
+			{#if canWebShare}
+				<button class="nav-link" aria-label="Share blog post" on:click={webShare}>
+					<Svg className="icon-20 align-middle" svg={share} />
+				</button>
+			{:else}
+				<a target="_blank" class="nav-link" href="https://twitter.com/share?url={encodedUrl}&text={encodedTitle}" aria-label="Share on Twitter">
+					<Svg className="icon-20 align-middle" svg={twitter} />
+				</a>
+				<a
+					target="_blank"
+					class="nav-link"
+					href="https://www.facebook.com/sharer/sharer.php?u={encodedUrl}&p[title]={encodedTitle}"
+					aria-label="Share on Facebook"
+				>
+					<Svg className="icon-20 align-middle" svg={facebook} />
+				</a>
+				<a
+					target="_blank"
+					class="nav-link"
+					href="https://www.linkedin.com/shareArticle?mini=true&url={encodedUrl}&title={encodedTitle}"
+					aria-label="Share on LinkedIn"
+				>
+					<Svg className="icon-20 align-middle" svg={linkedin} />
+				</a>
+			{/if}
+		{/if}
 	</div>
 </div>
 <hr />
diff --git a/demo/src/routes/blog/2024-02-01/+page.svelte b/demo/src/routes/blog/2024-02-01/+page.svelte
index 002219aab8..945702210c 100644
--- a/demo/src/routes/blog/2024-02-01/+page.svelte
+++ b/demo/src/routes/blog/2024-02-01/+page.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <Header title={data.pageMeta.title} />
-<Published date="02/01/2024" author="fbasso" />
+<Published date="02/01/2024" author="fbasso" title={data.pageMeta.title} />
 <img
 	src="https://amadeusitgroup.github.io/AgnosUI/static/tansu-blog.webp"
 	alt="frontend development"