1 files changed, 103 insertions, 2 deletions
diff --git a/src/routes/canaries/+page.svelte b/src/routes/canaries/+page.svelte
index adbbdcc..24e968a 100644
--- a/src/routes/canaries/+page.svelte
+++ b/src/routes/canaries/+page.svelte
@@ -1,5 +1,106 @@
+<svelte:options runes />
+
 <script lang="ts">
-  import keyStore from "./keystore";
+  import { browser } from "$app/environment";
+  import { canaries } from "./canaries";
+  import Canary from "./Canary.svelte";
+  import { initKeystore } from "./keystore";
 </script>
 
-{@debug keyStore}
+<svelte:head>
+  <title>Warrant Canaries - mem.estrogen.zone</title>
+</svelte:head>
+
+<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:
+          {#each canaries as canary}
+            <a href={canary.url}>{canary.signer}'s canary for {canary.name}</a>
+          {/each}
+        </noscript>
+      {/if}
+    {:then _}
+      <div class="canaries flex gap-4 flex-wrap max-w-full">
+        {#each canaries as canary}
+          <Canary {canary} />
+        {/each}
+      </div>
+    {:catch e}
+      <div class="p-4 bg-red-700 text-white max-w-full overflow-x-auto">
+        Encoutnered Error:
+        <pre>{JSON.stringify(
+            {
+              raw: e,
+              fileName: "fileName" in e ? e.fileName : undefined,
+              name: "name" in e ? e.name : undefined,
+              message: "message" in e ? e.message : undefined,
+              stack: "stack" in e ? e.stack : undefined,
+            },
+            null,
+            2,
+          )}</pre>
+      </div>
+    {/await}
+  </div>
+
+  <div
+    class="mt-3 sticky bottom-0 block bg-black bg-opacity-30 p-4 rounded-xl backdrop-blur-xl"
+  >
+    <p class="text-xs text-white">
+      <span class="about opacity-60 hover:opacity-80 transition-all">
+        This page contains various <a
+          href="https://en.wikipedia.org/wiki/Warrant_canary"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="opacity-90 hover:underline text-blue-400 hover:text-blue-300"
+          >liberty canaries</a
+        >
+        that I, or my friends, depend upon or are otherwise interested in.
+      </span>
+      <span
+        class="validation-attempt opacity-60 hover:opacity-80 transition-all"
+        class:hidden={!browser}
+      >
+        <br />
+        It makes an attempt to validate their signatures, however it does not attempt
+        to check if they've been updated in time for their next scheduled update.
+        It is your responsibility to ensure that the canary's contents match your
+        requirements.
+      </span>
+      <span
+        class="trust-server opacity-60 hover:opacity-80 transition-all"
+        class:hidden={!browser}
+      >
+        <br />
+        The server at
+        <code class="font-grub px-1 bg-white bg-opacity-5 rounded-md"
+          >{#if typeof location !== "undefined"}{location.host ??
+              location.hostname}{:else}mem.estrogen.zone{/if}</code
+        >
+        serves the keys and the canaries. Make sure you trust it to serve correct
+        keys and canaries, or validate the signatures of the
+        <code class="font-grub px-1 bg-white bg-opacity-5 rounded-md"
+          >Signed</code
+        > links with keys obtained externally.
+      </span>
+      <span
+        class="legend opacity-60 hover:opacity-80 transition-all"
+        class:hidden={!browser}
+        ><br />If a signature check passes, the background of the respective
+        canary turns
+        <span class="bg-white text-black">white</span>. Whilst fetching, it's
+        background turns <span class="bg-blue-500 text-white">blue</span>. If a
+        signature check fails, it will turn
+        <span class="bg-red-500 text-white">red</span>. If the canary cannot be
+        found, it turns a different shade of
+        <span class="bg-red-800 text-white">red</span>.</span
+      >
+    </p>
+  </div>
+</div>