From ffdeab097f90bc9a96695e0eeba1bfc881f99fa2 Mon Sep 17 00:00:00 2001
From: badbl0cks <4161747+badbl0cks@users.noreply.github.com>
Date: Fri, 27 Feb 2026 09:23:18 -0800
Subject: [PATCH] Fix script and style tags being outside the fragment (and
 thus rendering before <html> tag)

---
 src/pages/contact.astro | 237 ++++++++++++++++++++--------------------
 1 file changed, 121 insertions(+), 116 deletions(-)
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 00b5dfb..3368d8c 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -26,124 +26,129 @@ const phoneValue = pickValue("phone");
 const msgValue = pickValue("msg");
 ---
 
-<script>
-  import Cap from "@cap.js/widget";
-  import "iconify-icon";
-
-  const captchaInput = document.querySelector("input[id='captcha']");
-  const captchaStatus = document.querySelector("#captchaStatus");
-  const statusText = captchaStatus?.querySelector("#statusText");
-  const initIcon = captchaStatus?.querySelector("#initIcon");
-  const completeIcon = captchaStatus?.querySelector("#completeIcon");
-  const errorIcon = captchaStatus?.querySelector("#errorIcon");
-  const progressIcon = captchaStatus?.querySelector("#progressIcon");
-  const cap = new Cap({
-    apiEndpoint: "/cap/",
-  });
-
-  if (
-    captchaStatus &&
-    statusText &&
-    initIcon &&
-    completeIcon &&
-    errorIcon &&
-    progressIcon
-  ) {
-    cap.addEventListener("solve", function (e) {
-      const humanness = Math.round((85 + Math.random() * 14.9) * 10) / 10;
-      statusText.textContent = `${humanness}% human. Good enough!`;
-      progressIcon.classList.add("hidden");
-      errorIcon.classList.add("hidden");
-      initIcon.classList.add("hidden");
-      completeIcon.classList.remove("hidden");
-    });
-    cap.addEventListener("error", function (e) {
-      statusText.textContent = "Oops! We crashed!";
-      progressIcon.classList.add("hidden");
-      completeIcon.classList.add("hidden");
-      initIcon.classList.add("hidden");
-      errorIcon.classList.remove("hidden");
-    });
-    cap.addEventListener("progress", (event) => {
-      statusText.textContent = `Weighing your humanity... ${event.detail.progress}%`;
-      errorIcon.classList.add("hidden");
-      completeIcon.classList.add("hidden");
-      initIcon.classList.add("hidden");
-      progressIcon.classList.remove("hidden");
-    });
-  }
-  if (captchaInput && "value" in captchaInput) {
-    const { token } = await cap.solve();
-    captchaInput.value = token;
-  }
-</script>
-<style>
-  form {
-    display: grid;
-    row-gap: var(--stack-large);
-    column-gap: var(--gutter-large);
-    width: 100%;
-    margin-inline: auto;
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-areas:
-      "header header"
-      "name phone"
-      "msg msg"
-      "captcha otp"
-      "lbtn rbtn";
-  }
-  #header {
-    grid-area: header;
-  }
-  label[for="name"] {
-    grid-area: name;
-  }
-  label[for="phone"] {
-    grid-area: phone;
-  }
-  label[for="msg"] {
-    grid-area: msg;
-  }
-  label[for="otp"] {
-    grid-area: otp;
-  }
-  label[for="captcha"] {
-    grid-area: captcha;
-  }
-  #captchaStatus {
-    padding-block: calc(2px + (var(--stack-small) * 1));
-    cursor: text;
-  }
-  #statusText {
-    margin-inline-start: 0.5rem;
-  }
-  button#reset {
-    grid-area: lbtn;
-  }
-  button#send_otp {
-    grid-area: lbtn;
-  }
-  button#send_msg {
-    grid-area: rbtn;
-  }
-  fieldset {
-    display: contents;
-  }
-  .spin {
-    animation: spin 4s linear infinite;
-    position: relative;
-  }
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-</style>
 <Layout>
   <title slot="head">Contact</title>
+  <script>
+    import Cap from "@cap.js/widget";
+    import "iconify-icon";
+  </script>
+  <script is:inline>
+    import Cap from "@cap.js/widget";
+    import "iconify-icon";
+    const captchaInput = document.querySelector("input[id='captcha']");
+    const captchaStatus = document.querySelector("#captchaStatus");
+    const statusText = captchaStatus?.querySelector("#statusText");
+    const initIcon = captchaStatus?.querySelector("#initIcon");
+    const completeIcon = captchaStatus?.querySelector("#completeIcon");
+    const errorIcon = captchaStatus?.querySelector("#errorIcon");
+    const progressIcon = captchaStatus?.querySelector("#progressIcon");
+    const cap = new Cap({
+      apiEndpoint: "/cap/",
+    });
+
+    if (
+      captchaStatus &&
+      statusText &&
+      initIcon &&
+      completeIcon &&
+      errorIcon &&
+      progressIcon
+    ) {
+      cap.addEventListener("solve", function (e) {
+        const humanness = Math.round((85 + Math.random() * 14.9) * 10) / 10;
+        statusText.textContent = `${humanness}% human. Good enough!`;
+        progressIcon.classList.add("hidden");
+        errorIcon.classList.add("hidden");
+        initIcon.classList.add("hidden");
+        completeIcon.classList.remove("hidden");
+      });
+      cap.addEventListener("error", function (e) {
+        statusText.textContent = "Oops! We crashed!";
+        progressIcon.classList.add("hidden");
+        completeIcon.classList.add("hidden");
+        initIcon.classList.add("hidden");
+        errorIcon.classList.remove("hidden");
+      });
+      cap.addEventListener("progress", (event) => {
+        statusText.textContent = `Weighing your humanity... ${event.detail.progress}%`;
+        errorIcon.classList.add("hidden");
+        completeIcon.classList.add("hidden");
+        initIcon.classList.add("hidden");
+        progressIcon.classList.remove("hidden");
+      });
+    }
+    if (captchaInput && "value" in captchaInput) {
+      const { token } = await cap.solve();
+      captchaInput.value = token;
+    }
+  </script>
+
+  <style>
+    form {
+      display: grid;
+      row-gap: var(--stack-large);
+      column-gap: var(--gutter-large);
+      width: 100%;
+      margin-inline: auto;
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-areas:
+        "header header"
+        "name phone"
+        "msg msg"
+        "captcha otp"
+        "lbtn rbtn";
+    }
+    #header {
+      grid-area: header;
+    }
+    label[for="name"] {
+      grid-area: name;
+    }
+    label[for="phone"] {
+      grid-area: phone;
+    }
+    label[for="msg"] {
+      grid-area: msg;
+    }
+    label[for="otp"] {
+      grid-area: otp;
+    }
+    label[for="captcha"] {
+      grid-area: captcha;
+    }
+    #captchaStatus {
+      padding-block: calc(2px + (var(--stack-small) * 1));
+      cursor: text;
+    }
+    #statusText {
+      margin-inline-start: 0.5rem;
+    }
+    button#reset {
+      grid-area: lbtn;
+    }
+    button#send_otp {
+      grid-area: lbtn;
+    }
+    button#send_msg {
+      grid-area: rbtn;
+    }
+    fieldset {
+      display: contents;
+    }
+    .spin {
+      animation: spin 4s linear infinite;
+      position: relative;
+    }
+    @keyframes spin {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  </style>
+
   <Fragment slot="content">
     <h2>Contact</h2>
     {
