From 621ae06631832531745e7e6258ad71b0cc99f7f0 Mon Sep 17 00:00:00 2001
From: Jade Ellis <jade@ellis.link>
Date: Tue, 16 Jul 2024 23:40:15 +0100
Subject: [PATCH] Add share button

---
 .../routes/blog/[...date]/[slug]/+page.svelte | 42 +++++++++++++++++--
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/website/src/routes/blog/[...date]/[slug]/+page.svelte b/packages/website/src/routes/blog/[...date]/[slug]/+page.svelte
index 7f9a78fd..6f0c985e 100644
--- a/packages/website/src/routes/blog/[...date]/[slug]/+page.svelte
+++ b/packages/website/src/routes/blog/[...date]/[slug]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     // https://github.com/mattjennings/sveltekit-blog-template/blob/main/src/routes/post/%5Bslug%5D/%2Bpage.svelte
 
+    import { browser } from "$app/environment";
     import SvelteSeo from "svelte-seo";
     export let data;
     import { SITE_URL } from "$lib/metadata";
@@ -9,7 +10,23 @@
     // if (data.ghReleaseData) {
     //     GhReleasesDownload = import("$lib/GhReleasesDownload.svelte").then((m) => m.default)
     // }
-    $: canonical = SITE_URL + "/blog/" + data.post.canonical
+    $: canonical = SITE_URL + "/blog/" + data.post.canonical;
+
+    $: webShareAPISupported = browser && typeof navigator.share !== 'undefined';
+    // let webShareAPISupported = true;
+
+    $: handleWebShare;
+    const handleWebShare = async () => {
+        try {
+            navigator.share({
+                title: data.post.title,
+                text: data.post.description,
+                url: canonical,
+            });
+        } catch (error) {
+            webShareAPISupported = false;
+        }
+    };
 </script>
 
 <SvelteSeo
@@ -32,9 +49,16 @@
 <article class="h-entry">
     <h1 id="title" class="p-name">{data.post.title}</h1>
     <aside>
-        <a class="u-url" href={canonical}>Published on <time class="dt-published" datetime={data.post.date}
-            >{new Date(data.post.date).toLocaleDateString()}</time
-        ></a> · <span>{data.post.readingTime.text}</span>
+        <a class="u-url" href={canonical}
+            >Published on <time class="dt-published" datetime={data.post.date}
+                >{new Date(data.post.date).toLocaleDateString()}</time
+            ></a
+        >
+        · <span>{data.post.readingTime.text}</span>
+        {#if webShareAPISupported} · <button class="link" on:click={handleWebShare}
+                >Share</button
+            >
+        {/if}
     </aside>
     <Toc headings={data.post.headings} />
     <!-- {#await GhReleasesDownload}
@@ -56,4 +80,14 @@
         color: currentColor;
         text-decoration: unset;
     }
+    button.link {
+        background: none;
+        border: none;
+        color: unset;
+        padding: 0;
+        /* margin: 0; */
+        display: inline;
+        text-decoration: underline;
+        cursor: pointer;
+    }
 </style>