From d84c5a9973639158adea0970b1fd98ebbcf0fe8c Mon Sep 17 00:00:00 2001
From: ebby <ebbyplay@proton.me>
Date: Sat, 22 Aug 2026 07:51:18 +0200
Subject: [PATCH] fix script not working

---
 blog/public/scripts/image-modal.js    | 23 +++++++++++++++++++++++
 blog/src/layouts/BlogPostLayout.astro | 26 +-------------------------
 2 files changed, 24 insertions(+), 25 deletions(-)
 create mode 100644 blog/public/scripts/image-modal.js

diff --git a/blog/public/scripts/image-modal.js b/blog/public/scripts/image-modal.js
new file mode 100644
index 0000000..2f912bc
--- /dev/null
+++ b/blog/public/scripts/image-modal.js
@@ -0,0 +1,23 @@
+const backdrop = document.querySelector("#image-backdrop");
+const preview = document.querySelector("#image-preview");
+
+if (backdrop instanceof HTMLElement && preview instanceof HTMLImageElement) {
+    document.addEventListener("click", (event) => {
+        if (!(event.target instanceof Element)) return;
+
+        if (!backdrop.hidden && backdrop.contains(event.target)) {
+            backdrop.hidden = true;
+            document.body.style.overflow = "";
+            return;
+        }
+
+        const image = event.target.closest("article img");
+
+        if (!(image instanceof HTMLImageElement)) return;
+
+        preview.src = image.currentSrc || image.src;
+        preview.alt = image.alt;
+        backdrop.hidden = false;
+        document.body.style.overflow = "hidden";
+    });
+}
\ No newline at end of file
diff --git a/blog/src/layouts/BlogPostLayout.astro b/blog/src/layouts/BlogPostLayout.astro
index f9499d7..99a51a2 100644
--- a/blog/src/layouts/BlogPostLayout.astro
+++ b/blog/src/layouts/BlogPostLayout.astro
@@ -43,31 +43,7 @@ const localeDate = formatLocalizedDateString(frontmatter.date);
   </div>
 </Main>
 
-<script>
-  const backdrop = document.querySelector("#image-backdrop");
-  const preview = document.querySelector("#image-preview");
-
-  if (backdrop instanceof HTMLElement && preview instanceof HTMLImageElement) {
-    document.addEventListener("click", (event) => {
-      if (!(event.target instanceof Element)) return;
-
-      if (!backdrop.hidden && backdrop.contains(event.target)) {
-        backdrop.hidden = true;
-        document.body.style.overflow = "";
-        return;
-      }
-
-      const image = event.target.closest("article img");
-
-      if (!(image instanceof HTMLImageElement)) return;
-
-      preview.src = image.currentSrc || image.src;
-      preview.alt = image.alt;
-      backdrop.hidden = false;
-      document.body.style.overflow = "hidden";
-    });
-  }
-</script>
+<script is:inline src="/scripts/image-modal.js"></script>
 
 <style>
   article {