From 9024d5246ec2b625bee942ebf7175d29b4fc89a9 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sat, 10 Feb 2024 02:41:50 +0800
Subject: [PATCH] :lipstick: Optimized widget

---
 src/pages/moments.astro      | 16 ++++++++--------
 src/pages/posts/[slug].astro | 15 ++++++++++-----
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/pages/moments.astro b/src/pages/moments.astro
index e85308d..09f7c65 100644
--- a/src/pages/moments.astro
+++ b/src/pages/moments.astro
@@ -3,15 +3,15 @@ import RootLayout from "../layouts/RootLayout.astro";
 ---
 
 <RootLayout>
-  <iframe class="moments-frame" src="https://feed.smartsheep.studio/realms/1?embedded=yes" />
+  <iframe class="moments-frame" src="https://feed.smartsheep.studio/realms/1?embedded=yes"></iframe>
 </RootLayout>
 
 <style>
-    .moments-frame {
-        margin-top: 64px;
-        display: block;
-        border: 0;
-        width: 100vw;
-        height: calc(100vh - 64px);
-    }
+  .moments-frame {
+    margin-top: 64px;
+    display: block;
+    border: 0;
+    width: 100vw;
+    height: calc(100vh - 64px);
+  }
 </style>
diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro
index f183b6e..6b41ab1 100644
--- a/src/pages/posts/[slug].astro
+++ b/src/pages/posts/[slug].astro
@@ -121,11 +121,9 @@ const embedOptions = new URLSearchParams({
     element.height = height ? `${height}px` : "360px";
   }
 
-  window.addEventListener("DOMContentLoaded", () => {
-    const element = document.querySelector<HTMLIFrameElement>("#interactive-iframe");
-    if (element) {
-      resizeInteractiveWidget(element);
-    }
+  const widget = document.querySelector<HTMLIFrameElement>("#interactive-iframe");
+  widget?.addEventListener("onload", () => {
+    resizeInteractiveWidget(widget);
   });
 </script>
 
@@ -152,4 +150,11 @@ const embedOptions = new URLSearchParams({
       grid-template-columns: 2fr 1fr;
     }
   }
+
+  #interactive-iframe {
+    display: block;
+    border: 0;
+    width: 100%;
+    min-height: 360px;
+  }
 </style>