@import url("/assets/md.css")feat: nice noscript canary page

@import url("/assets/md.css")

1 files changed, 31 insertions, 10 deletions

diff --git a/src/routes/canaries/+page.svelte b/src/routes/canaries/+page.svelte
index 24e968a..1613831 100644
--- a/src/routes/canaries/+page.svelte
+++ b/src/routes/canaries/+page.svelte
@@ -13,18 +13,39 @@
 
 <div class="flex min-h-full min-w-full flex-col justify-between">
   <div>
-    {#await initKeystore}
-      {#if browser}
-        Preparing...
-      {:else}
-        Awaiting Browser
-        <noscript>
-          If you're using noscript, here are the raw canaries:
+    {#if !browser}
+      <noscript class="text-white min-w-full min-h-full">
+        You're using noscript; here are the raw canaries:<br />
+        <ul>
           {#each canaries as canary}
-            <a href={canary.url}>{canary.signer}'s canary for {canary.name}</a>
+            <li class="list-disc ml-4">
+              {canary.signer}'s canary for {canary.name} (<a
+                href={canary.url}
+                target="_blank"
+                download="{canary.signer}:{canary.name}.sig"
+                class="opacity-90 hover:underline text-blue-400 hover:text-blue-300"
+                >download</a
+              >,
+              <a
+                href={canary.url}
+                target="_blank"
+                class="opacity-90 hover:underline text-blue-400 hover:text-blue-300"
+                >open in newtab</a
+              >)
+            </li>
           {/each}
-        </noscript>
-      {/if}
+        </ul>
+        {@html `<style>.hidden-if-noscript{display:none !important;}</stylew>`}
+      </noscript>
+    {/if}
+    {#await initKeystore}
+      <div class="hidden-if-noscript">
+        {#if browser}
+          Preparing...
+        {:else}
+          Awaiting Browser
+        {/if}
+      </div>
     {:then _}
       <div class="canaries flex gap-4 flex-wrap max-w-full">
         {#each canaries as canary}