Native web share api

src/lib/icons/share_icon.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  export let size = 24
+</script>
+
+<svg
+  class="inline"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  stroke="currentColor"
+  ><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+    id="SVGRepo_tracerCarrier"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  ></g><g id="SVGRepo_iconCarrier">
+    <path
+      d="M9 12C9 13.3807 7.88071 14.5 6.5 14.5C5.11929 14.5 4 13.3807 4 12C4 10.6193 5.11929 9.5 6.5 9.5C7.88071 9.5 9 10.6193 9 12Z"
+      stroke-width="1.5"
+    ></path>
+    <path d="M14 6.5L9 10" stroke-width="1.5" stroke-linecap="round"></path>
+    <path d="M14 17.5L9 14" stroke-width="1.5" stroke-linecap="round"></path>
+    <path
+      d="M19 18.5C19 19.8807 17.8807 21 16.5 21C15.1193 21 14 19.8807 14 18.5C14 17.1193 15.1193 16 16.5 16C17.8807 16 19 17.1193 19 18.5Z"
+      stroke-width="1.5"
+    ></path>
+    <path
+      d="M19 5.5C19 6.88071 17.8807 8 16.5 8C15.1193 8 14 6.88071 14 5.5C14 4.11929 15.1193 3 16.5 3C17.8807 3 19 4.11929 19 5.5Z"
+      stroke-width="1.5"
+    ></path>
+  </g></svg
+>

src/lib/share.ts

@@ -0,0 +1,15 @@
+import { browser } from "$app/environment"
+
+export const webShareSupported = () => browser && navigator?.share
+
+export const webShare = async (title = "", text = "", url = "") => {
+  try {
+    await navigator.share({
+      title,
+      text,
+      url,
+    })
+  } catch (err) {
+    // continue
+  }
+}

src/routes/(marketing)/+layout.svelte

@@ -1,5 +1,7 @@
 <script>
   import "../../app.css"
+  import ShareIcon from "$lib/icons/share_icon.svelte"
+  import { webShare, webShareSupported } from "$lib/share"
 </script>
 
 <div class="navbar bg-base-100 container mx-auto">
@@ -78,7 +80,20 @@
       >
     </nav>
     <aside>
-      <span class="footer-title opacity-80">Sponsor</span>
+      <span class="footer-title opacity-80"
+        >Sponsor {#if webShareSupported()}
+          <button
+            on:click={() =>
+              webShare(
+                "Sponsor",
+                "Critical Moments sponsors the SaaS Starter",
+                "https://criticalmoments.io",
+              )}
+          >
+            <ShareIcon size={20} />
+          </button>
+        {/if}
+      </span>
       <a
         class="link link-hover max-w-[260px]"
         href="https://criticalmoments.io"