Support auth-protected images

src/app/components/Content.svelte

@@ -141,7 +141,7 @@
           <ContentToken value={parsed.value} />
         {:else if isLink(parsed)}
           {#if isBlock(i)}
-            <ContentLinkBlock value={parsed.value} />
+            <ContentLinkBlock value={parsed.value} {event} />
           {:else}
             <ContentLinkInline value={parsed.value} />
           {/if}

src/app/components/ContentLinkBlock.svelte

@@ -4,9 +4,10 @@
   import {preventDefault, stopPropagation} from "@lib/html"
   import Link from "@lib/components/Link.svelte"
   import ContentLinkDetail from "@app/components/ContentLinkDetail.svelte"
+  import ContentLinkBlockImage from "@app/components/ContentLinkBlockImage.svelte"
   import {pushModal} from "@app/modal"
 
-  const {value} = $props()
+  const {value, event} = $props()
 
   let hideImage = $state(false)
 
@@ -37,7 +38,7 @@
       </video>
     {:else if url.match(/\.(jpe?g|png|gif|webp)$/)}
       <button type="button" onclick={stopPropagation(preventDefault(expand))}>
-        <img alt="Link preview" src={imgproxy(url)} class="m-auto max-h-96 rounded-box" />
+        <ContentLinkBlockImage {event} {value} />
       </button>
     {:else}
       {#await loadPreview()}

src/app/components/ContentLinkBlockImage.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import {onDestroy} from "svelte"
+  import {now} from "@welshman/lib"
+  import {BLOSSOM_AUTH, makeEvent, getTags, getTagValue, tagsFromIMeta} from "@welshman/util"
+  import {signer} from "@welshman/app"
+  import {imgproxy} from "@app/state"
+
+  const {value, event} = $props()
+
+  const url = value.url.toString()
+
+  // If we fail to fetch the image, try authenticating if we have a blossom hash
+  const onerror = async () => {
+    const meta = getTags("imeta", event.tags)
+      .map(tagsFromIMeta)
+      .find(meta => getTagValue("url", meta) === url)
+    const hash = meta ? getTagValue("x", meta) : undefined
+
+    if (hash && $signer) {
+      const event = await signer.get().sign(
+        makeEvent(BLOSSOM_AUTH, {
+          tags: [
+            ["t", "get"],
+            ["x", hash],
+            ["expiration", String(now() + 30)],
+          ],
+        }),
+      )
+
+      const res = await fetch(url, {
+        headers: {
+          Authorization: `Nostr ${btoa(JSON.stringify(event))}`,
+        },
+      })
+
+      if (res.status === 200) {
+        src = URL.createObjectURL(await res.blob())
+      }
+    }
+  }
+
+  let src = $state(imgproxy(url))
+
+  onDestroy(() => {
+    URL.revokeObjectURL(src)
+  })
+</script>
+
+<img alt="" {src} {onerror} class="m-auto max-h-96 rounded-box" />