From 2306df9f87242cd437212a75d1097caff4e48743 Mon Sep 17 00:00:00 2001
From: afterlifepro <vielle.dev@proton.me>
Date: Sat, 9 Aug 2025 22:40:42 +0100
Subject: [PATCH] Add a "no anchor" support warning to index. this delays for a
 couple seconds before rendering, to allow the polyfill to kick in and js to
 hide it. this will cause CLS but it'll be such a small percentage of users
 (fractions of already low user counts) im not concerned

---
 src/components/home/Landing.astro            | 26 ++++++++++++++++++++
 src/components/home/playing/NowPlaying.astro | 16 ++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/components/home/Landing.astro b/src/components/home/Landing.astro
index 617e095..05dc53a 100644
--- a/src/components/home/Landing.astro
+++ b/src/components/home/Landing.astro
@@ -30,6 +30,9 @@ const avatar = await fetch(
           --box-circle-mask-png: url("${boxCircleMask.src}");`}
 >
   <h2>Hello World 🏳️‍⚧️</h2>
+  <p class="no-anchor-warning">
+    ⚠️ Your browser doesnt support anchor positioning or javascript!
+  </p>
   <figure>
     <img src={avatar ?? "http://undefined"} alt="" />
     <figcaption>bsky pfp</figcaption>
@@ -102,4 +105,27 @@ const avatar = await fetch(
   p {
     margin-block: 5px;
   }
+
+  @keyframes fade-in {
+    from, to {
+      height: auto;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .no-anchor-warning {
+    @supports (top: calc(anchor(--player bottom) + 10px)) {
+      display: none;
+    }
+
+    background: rgb(from goldenrod r g b / 0.2);
+    padding: 5px;
+
+    opacity: 0;
+    height: 0;
+    animation: 0s ease-in-out 2s 1 forwards fade-in;
+  }
 </style>
diff --git a/src/components/home/playing/NowPlaying.astro b/src/components/home/playing/NowPlaying.astro
index 277e23e..e3e17a5 100644
--- a/src/components/home/playing/NowPlaying.astro
+++ b/src/components/home/playing/NowPlaying.astro
@@ -396,8 +396,20 @@ const isSong = (
 
   if (!CSS.supports("top", "calc(anchor(--player bottom) + 10px)")) {
     // enable anchor polyfill
-    // @ts-expect-error ts cant find remote types lol
-    import("https://unpkg.com/@oddbird/css-anchor-positioning");
+    const { default: anchor } = await import(
+      // @ts-expect-error ts cant find remote types lol
+      "https://unpkg.com/@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js"
+    );
+
+    anchor().then(() =>
+      document
+        .querySelectorAll(".no-anchor-warning")
+        .forEach((el) =>
+          el instanceof HTMLElement
+            ? el.style.setProperty("display", "none")
+            : null,
+        ),
+    );
   }
   /*************
    * FUNCTIONS *
-- 
2.51.2