@import url("/assets/md.css")fix: make canary render correctly

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

1 files changed, 20 insertions, 18 deletions

diff --git a/src/routes/canaries/Canary.svelte b/src/routes/canaries/Canary.svelte
index 50031ed..913216d 100644
--- a/src/routes/canaries/Canary.svelte
+++ b/src/routes/canaries/Canary.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Canary } from "./canaries";
+  import type { Canary } from './canaries';
   let {
     canary,
   }: {
@@ -15,12 +15,12 @@
   );
   let status = $derived(
     url !== null
-      ? ("ok" as const)
+      ? ('ok' as const)
       : failedFetch
-        ? ("failed_fetch" as const)
+        ? ('failed_fetch' as const)
         : rawText === null
-          ? ("fetching" as const)
-          : ("failed_sigcheck" as const),
+          ? ('fetching' as const)
+          : ('failed_sigcheck' as const),
   );
   $effect(() => {
     (async (canary) => {
@@ -37,24 +37,26 @@
 </script>
 
 <div
-  class="canary p-4 bg-opacity-10 flex-1 max-w-[1024px] min-w-[min(100%,500px)] overflow-x-auto flex flex-col justify-between rounded-2xl"
-  class:bg-white={status === "ok"}
-  class:bg-blue-500={status === "fetching"}
-  class:bg-red-500={status === "failed_sigcheck"}
-  class:bg-red-800={status === "failed_fetch"}
+  class={{
+    'canary p-4 flex-1 max-w-[1024px] min-w-[min(100%,500px)] overflow-x-auto flex flex-col justify-between rounded-2xl': true,
+    'bg-white/10': status === 'ok',
+    'bg-blue-500/10': status === 'fetching',
+    'bg-red-500/10': status === 'failed_sigcheck',
+    'bg-red-800/10': status === 'failed_fetch',
+  }}
 >
   <div class="top">
     <small class="opacity-50">{canary.signer}'s canary for</small>
     <h2 class="canary-name text-lg">{canary.name}</h2>
     <p class="opacity-80 text-white font-normal mt-1">
-      {#if status === "ok"}
+      {#if status === 'ok'}
         {canary.description}
-      {:else if status === "fetching"}
+      {:else if status === 'fetching'}
         Fetching Canary...
-      {:else if status === "failed_sigcheck"}
+      {:else if status === 'failed_sigcheck'}
         Failed Signature Check!<br />
         Either the upstream key changed, or the canary is fucked!
-      {:else if status === "failed_fetch"}
+      {:else if status === 'failed_fetch'}
         Failed to fetch canary!
       {/if}
     </p>
@@ -70,7 +72,7 @@
           Upstream
         </a>
       {/if}
-      {#if status !== "failed_sigcheck" && status !== "failed_fetch"}
+      {#if status !== 'failed_sigcheck' && status !== 'failed_fetch'}
         <a
           class="opacity-90 hover:underline text-blue-400 hover:text-blue-300"
           href={url?.signed ?? canary.url}
@@ -82,9 +84,9 @@
           class="opacity-90 hover:underline text-red-400 hover:text-red-300"
           href={url?.signed ?? canary.url}
         >
-          Signed, {status === "failed_sigcheck"
-            ? "bad signature"
-            : "unreachable"}
+          Signed, {status === 'failed_sigcheck'
+            ? 'bad signature'
+            : 'unreachable'}
         </a>
       {/if}
       {#if url}