Add share button

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>