feat: add ViewTransitions from Astro

Integrate ViewTransitions API from Astro v3.

resolve #96

src/components/Card.astro

@@ -0,0 +1,22 @@
+---
+import Datetime from "@components/Datetime";
+import type { BlogFrontmatter } from "@content/_schemas";
+
+export interface Props {
+  href?: string;
+  frontmatter: BlogFrontmatter;
+  secHeading?: boolean;
+}
+
+const { href, frontmatter, secHeading = true } = Astro.props;
+
+const { title, pubDatetime, description } = frontmatter;
+---
+
+<li class="list-card">
+  <a href={href} transition:name={title}>
+    {secHeading ? <h2>{title}</h2> : <h3>{title}</h3>}
+  </a>
+  <Datetime datetime={pubDatetime} />
+  <p>{description}</p>
+</li>

src/components/Header.astro

@@ -189,19 +189,26 @@ const { activeNav } = Astro.props;
 </style>
 
 <script>
-  // Toggle menu
-  const menuBtn = document.querySelector(".hamburger-menu");
-  const menuIcon = document.querySelector(".menu-icon");
-  const menuItems = document.querySelector("#menu-items");
+  function toggleNav() {
+    // Toggle menu
+    const menuBtn = document.querySelector(".hamburger-menu");
+    const menuIcon = document.querySelector(".menu-icon");
+    const menuItems = document.querySelector("#menu-items");
 
-  menuBtn?.addEventListener("click", () => {
-    const menuExpanded = menuBtn.getAttribute("aria-expanded") === "true";
-    menuIcon?.classList.toggle("is-active");
-    menuBtn.setAttribute("aria-expanded", menuExpanded ? "false" : "true");
-    menuBtn.setAttribute(
-      "aria-label",
-      menuExpanded ? "Open Menu" : "Close Menu"
-    );
-    menuItems?.classList.toggle("display-none");
-  });
+    menuBtn?.addEventListener("click", () => {
+      const menuExpanded = menuBtn.getAttribute("aria-expanded") === "true";
+      menuIcon?.classList.toggle("is-active");
+      menuBtn.setAttribute("aria-expanded", menuExpanded ? "false" : "true");
+      menuBtn.setAttribute(
+        "aria-label",
+        menuExpanded ? "Open Menu" : "Close Menu"
+      );
+      menuItems?.classList.toggle("display-none");
+    });
+  }
+
+  toggleNav();
+
+  // Runs on view transitions navigation
+  document.addEventListener("astro:after-swap", toggleNav);
 </script>

src/components/Search.tsx

@@ -67,9 +67,9 @@ export default function SearchBar({ searchList }: Props) {
       searchParams.set("q", inputVal);
       const newRelativePathQuery =
         window.location.pathname + "?" + searchParams.toString();
-      history.replaceState(null, "", newRelativePathQuery);
+      history.replaceState(history.state, "", newRelativePathQuery);
     } else {
-      history.replaceState(null, "", window.location.pathname);
+      history.replaceState(history.state, "", window.location.pathname);
     }
   }, [inputVal]);
 

src/components/Tag.astro

@@ -14,6 +14,7 @@ const { name, size = "sm" } = Astro.props;
 >
   <a
     href={`/tags/${name.toLowerCase()}`}
+    transition:name={name.toLowerCase()}
     class={`${size === "sm" ? "text-sm" : "text-lg"} pr-2 group`}
   >
     <svg