feat: use WebShare api (#905)

AmadeusITGroup · Sep 4, 2024 · e2e894d · e2e894d
1 parent 1511d49
commit e2e894d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 12 deletions.
diff --git 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
@@ -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"