feat: viewtransition (#108)

* feat: viewtransition

* Prettying

---------

Co-authored-by: Prettier <41898282+github-actions[bot]@users.noreply.github.com>

src/components/BaseHead.astro

@@ -2,6 +2,7 @@
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
 import "../styles/global.css";
+import { ViewTransitions } from "astro:transitions";
 
 interface Props {
     title: string;
@@ -14,6 +15,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const { title, description, image = "/share-banner.webp" }: Props = Astro.props;
 ---
 
+<ViewTransitions />
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />

src/components/ThemeIcon.astro

@@ -1,7 +1,3 @@
----
-
----
-
 <button id="themeToggle" aria-label="Toggle theme">
     <svg
         id="themeIcon"
@@ -52,6 +48,13 @@
         localStorage.setItem("theme", theme);
 
         const isDark = theme === "dark";
+        themeIcon.querySelector(".sun").style.fill = isDark
+            ? "transparent"
+            : "black";
+        themeIcon.querySelector(".moon").style.fill = isDark
+            ? "white"
+            : "transparent";
+
         root.style.setProperty(
             "--color-text",
             isDark ? "229, 233, 240" : "15, 18, 25",
@@ -86,25 +89,42 @@
             "--color-text-title",
             isDark ? "239, 243, 250" : "25, 28, 35",
         );
+    };
 
-        if (themeIcon) {
-            themeIcon.querySelector(".sun").style.fill = isDark
-                ? "transparent"
-                : "black";
-            themeIcon.querySelector(".moon").style.fill = isDark
-                ? "white"
-                : "transparent";
-        }
+    const getCurrentTheme = () => {
+        return (
+            localStorage.getItem("theme") ||
+            (window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light")
+        );
     };
 
-    const currentTheme =
-        localStorage.getItem("theme") ||
-        (window.matchMedia("(prefers-color-scheme: dark)").matches
-            ? "dark"
-            : "light");
-    setTheme(currentTheme);
+    const applyCurrentTheme = () => {
+        const theme = getCurrentTheme();
+        setTheme(theme);
+    };
+
+    const setToggleListener = () => {
+        document.getElementById("themeToggle").addEventListener("click", () => {
+            const newTheme = root.classList.contains("dark") ? "light" : "dark";
+            setTheme(newTheme);
+        });
+    };
+
+    // Apply theme on load
+    applyCurrentTheme();
+    setToggleListener();
+
+    // Reapply theme and set listeners after page swaps or transitions
+    document.addEventListener("astro:after-swap", () => {
+        applyCurrentTheme();
+        setToggleListener();
+    });
 
-    document.getElementById("themeToggle").addEventListener("click", () => {
-        setTheme(root.classList.contains("dark") ? "light" : "dark");
+    // Handle view transitions or any other page transitions
+    window.addEventListener("transitionstart", () => {
+        applyCurrentTheme();
+        setToggleListener();
     });
 </script>

src/content/projects/NBodySimulation.md

@@ -103,8 +103,8 @@ The `calculateForces` method calculates the forces acting on a subset of objects
 
 This method is based on Newton's formula:
 
-$$ 
-F = G * (m1 * m2) / (d^2) 
+$$
+F = G * (m1 * m2) / (d^2)
 $$
 
 The function takes a vector of `Body`, the rank (`rank`) of the current node, and the total number of nodes (`numProcesses`) as input. It begins by determining the subset each node should process. This is done by dividing the total number of bodies by the number of nodes, thus assigning each a range of bodies to work on. This approach allows for a balanced distribution of work and optimizes the use of computational resources.

src/layouts/Post.astro

@@ -77,7 +77,7 @@ const { title, description, pubDate, updatedDate, heroImage, heroGif }: Props =
                         )
                     }
                 </div>
-                <div class="prose">
+                <div class="prose" transition:animate="fade">
                     <div class="title">
                         <div class="date">
                             <FormattedDate date={pubDate} />

src/pages/projects/[...slug].astro

@@ -1,7 +1,6 @@
 ---
 import { type CollectionEntry, getCollection } from "astro:content";
 import Post from "../../layouts/Post.astro";
-
 export async function getStaticPaths() {
     const posts = await getCollection("projects");
     return posts.map((post) => ({

src/pages/projects/index.astro

@@ -18,7 +18,7 @@ const posts = (await getCollection("projects")).sort(
         <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
         <style>
             main {
-                width: 960px;
+                width: 1020px;
             }
             ul {
                 display: flex;
@@ -41,7 +41,7 @@ const posts = (await getCollection("projects")).sort(
                 text-align: center;
             }
             ul li:first-child img {
-                width: 100%;
+                width: 1020px;
             }
             ul li:first-child .title {
                 font-size: 2.369rem;