fix: Initialize tilt effect script on page load and reformat post data processing.

Author: paripsky

src/components/Tilt.astro

@@ -34,25 +34,27 @@ const id = crypto.randomUUID();
   }
 </style>
 
-<script type="module">
-  const tiltElements = document.querySelectorAll(".tilt");
-
-  tiltElements.forEach((el) => {
-    document.addEventListener("mousemove", (e) => {
-      rotateElement(e, el);
+<script type="module" is:inline>
+  document.addEventListener("astro:page-load", () => {
+    const tiltElements = document.querySelectorAll(".tilt");
+
+    tiltElements.forEach((el) => {
+      document.addEventListener("mousemove", (e) => {
+        rotateElement(e, el);
+      });
     });
-  });
 
-  function rotateElement(event, element) {
-    const x = event.clientX;
-    const y = event.clientY;
+    function rotateElement(event, element) {
+      const x = event.clientX;
+      const y = event.clientY;
 
-    const middleX = window.innerWidth / 2;
-    const middleY = window.innerHeight / 2;
-    const offsetX = ((x - middleX) / middleX) * 15;
-    const offsetY = ((y - middleY) / middleY) * 15;
+      const middleX = window.innerWidth / 2;
+      const middleY = window.innerHeight / 2;
+      const offsetX = ((x - middleX) / middleX) * 15;
+      const offsetY = ((y - middleY) / middleY) * 15;
 
-    element.style.setProperty("--rotateX", offsetX + "deg");
-    element.style.setProperty("--rotateY", -1 * offsetY + "deg");
-  }
+      element.style.setProperty("--rotateX", offsetX + "deg");
+      element.style.setProperty("--rotateY", -1 * offsetY + "deg");
+    }
+  });
 </script>

src/pages/index.astro

@@ -16,25 +16,27 @@ type Mention = {
 };
 
 const postsGlob = await import.meta.glob("./blog/*", { eager: true });
-const posts = Object.values(postsGlob).map(
-  (p: {
-    url: string;
-    frontmatter: {
-      title: string;
-      description: string;
-      date: string;
-      tags: string[];
-      mentions: Mention[];
-    };
-  }) => ({
-    url: p.url,
-    title: p.frontmatter.title,
-    description: p.frontmatter.description,
-    date: p.frontmatter.date,
-    tags: p.frontmatter.tags,
-    mentions: p.frontmatter.mentions ?? [],
-  })).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
-);
+const posts = Object.values(postsGlob)
+  .map(
+    (p: {
+      url: string;
+      frontmatter: {
+        title: string;
+        description: string;
+        date: string;
+        tags: string[];
+        mentions: Mention[];
+      };
+    }) => ({
+      url: p.url,
+      title: p.frontmatter.title,
+      description: p.frontmatter.description,
+      date: p.frontmatter.date,
+      tags: p.frontmatter.tags,
+      mentions: p.frontmatter.mentions ?? [],
+    }),
+  )
+  .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
 ---
 
 <Layout title="@paripsky's Portfolio">