feat(index): remove animations

package.json

@@ -28,5 +28,5 @@
     "@biomejs/biome": "1.9.4",
     "@tailwindcss/typography": "^0.5.16"
   },
-	"trustedDependencies": ["@biomejs/biome"]
+  "trustedDependencies": ["@biomejs/biome", "esbuild", "sharp"]
 }

src/components/Footer.astro

@@ -4,7 +4,7 @@ import Container from "@components/Container.astro";
 import { SITE } from "@consts";
 ---
 
-<footer class="animate">
+<footer>
   <Container>
     <div class="relative">
       <div class="absolute -top-12 right-0">
@@ -14,15 +14,46 @@ import { SITE } from "@consts";
     <div class="flex items-center justify-between">
       <div>&copy; {new Date().getFullYear()} • {SITE.TITLE}</div>
       <div class="flex flex-wrap items-center gap-1.5">
-        <a aria-label="RSS" href="/rss.xml" target="_blank" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
+        <a
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white">
+          aria-label="RSS"
+          href="/rss.xml"
+          target="_blank"
+          class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"
+          >
             <path d="M5 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
             <path d="M4 4a16 16 0 0 1 16 16"></path>
             <path d="M4 11a9 9 0 0 1 9 9"></path>
           </svg>
         </a>
-        <button id="light-theme-button" aria-label="Light theme" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
+        <button
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white">
+          id="light-theme-button"
+          aria-label="Light theme"
+          class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"
+          >
             <circle cx="12" cy="12" r="5"></circle>
             <line x1="12" y1="1" x2="12" y2="3"></line>
             <line x1="12" y1="21" x2="12" y2="23"></line>
@@ -34,13 +65,43 @@ import { SITE } from "@consts";
             <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
           </svg>
         </button>
-        <button id="dark-theme-button" aria-label="Dark theme" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
+        <button
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white">
+          id="dark-theme-button"
+          aria-label="Dark theme"
+          class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"
+          >
             <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
           </svg>
         </button>
-        <button id="system-theme-button" aria-label="System theme" class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5">
+        <button
-          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white">
+          id="system-theme-button"
+          aria-label="System theme"
+          class="group flex size-9 items-center justify-center rounded border border-black/15 hover:bg-black/5 focus-visible:bg-black/5 dark:border-white/20 dark:hover:bg-white/5 dark:focus-visible:bg-white/5"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="transition-colors duration-300 ease-in-out group-hover:animate-pulse group-hover:stroke-black group-focus-visible:animate-pulse group-focus-visible:stroke-black group-hover:dark:stroke-white dark:group-focus-visible:stroke-white"
+          >
             <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
             <line x1="8" y1="21" x2="16" y2="21"></line>
             <line x1="12" y1="17" x2="12" y2="21"></line>

src/components/Head.astro

@@ -2,8 +2,6 @@
 import "../styles/global.css";
 import "../styles/callout.css";
 
-import { ClientRouter } from "astro:transitions";
-
 import "@fontsource/geist-sans/100.css";
 import "@fontsource/geist-sans/200.css";
 import "@fontsource/geist-sans/300.css";
@@ -35,7 +33,10 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22></text></svg>" />
+<link
+  rel="icon"
+  href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22></text></svg>"
+/>
 <meta name="generator" content={Astro.generator} />
 
 <title>{title}</title>
@@ -54,16 +55,12 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
-<ClientRouter />
-
 <script is:inline>
   function init() {
     preloadTheme();
     onScroll();
-    animate();
     updateThemeButtons();
     addCopyCodeButtons();
-    setGiscusTheme();
 
     const backToTop = document.getElementById("back-to-top");
     backToTop?.addEventListener("click", (event) => scrollToTop(event));
@@ -92,7 +89,9 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
       updateThemeButtons();
     });
 
-    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (event) => {
         if (localStorage.theme === "system") {
           toggleTheme(event.matches);
         }
@@ -130,16 +129,6 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
     }
   }
 
-  function animate() {
-    const animateElements = document.querySelectorAll(".animate");
-
-    animateElements.forEach((element, index) => {
-      setTimeout(() => {
-        element.classList.add("show");
-      }, index * 100);
-    });
-  }
-
   function onScroll() {
     if (window.scrollY > 0) {
       document.documentElement.classList.add("scrolled");
@@ -182,8 +171,6 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 
     window.getComputedStyle(css).opacity;
     document.head.removeChild(css);
-
-    setGiscusTheme();
   }
 
   function preloadTheme() {
@@ -233,18 +220,6 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
     }
   }
 
-  const setGiscusTheme = () => {
-    const giscus = document.querySelector(".giscus-frame");
-
-    const isDark = document.documentElement.classList.contains("dark");
-
-    if (giscus) {
-      const url = new URL(giscus.src);
-      url.searchParams.set("theme", isDark ? "dark" : "light");
-      giscus.src = url.toString();
-    }
-  };
-
   document.addEventListener("DOMContentLoaded", () => init());
   document.addEventListener("astro:after-swap", () => init());
   preloadTheme();

src/components/TableOfContents.astro

@@ -26,7 +26,7 @@ function buildToc(headings: Heading[]) {
 }
 ---
 
-<details open class="animate rounded-lg border border-black/15 dark:border-white/20">
+<details open class="rounded-lg border border-black/15 dark:border-white/20">
   <summary>Table of Contents</summary>
   <nav class="">
     <ul class="py-3">

src/pages/404.astro

@@ -7,7 +7,9 @@ import Layout from "@layouts/Layout.astro";
 <Layout title="404" description={SITE.DESCRIPTION}>
   <Container>
     <div class="text-center">
-      <h4 class="animate text-2xl font-semibold text-black dark:text-white">404: Page not found</h4>
+      <h4 class="text-2xl font-semibold text-black dark:text-white">
+        404: Page not found
+      </h4>
     </div>
   </Container>
 </Layout>

src/pages/[...id].astro

@@ -52,19 +52,23 @@ const { Content, headings } = await render(post);
 <Layout title={post.data.title} description={post.data.description}>
 	<Container>
 		<div class="my-10 space-y-1">
-      <div class="animate flex items-center gap-1.5">
+			<div class="flex items-center gap-1.5">
 				<div class="font-base text-sm">
 					<FormattedDate date={post.data.date} />
 				</div>
 				&bull;
-        {post.body && <div class="font-base text-sm">{readingTime(post.body)}</div>}
+				{
+					post.body && (
+						<div class="font-base text-sm">{readingTime(post.body)}</div>
+					)
+				}
 			</div>
-      <h1 class="animate text-3xl font-semibold text-black dark:text-white">
+			<h1 class="text-3xl font-semibold text-black dark:text-white">
 				{post.data.title}
 			</h1>
 		</div>
 		{headings.length > 0 && <TableOfContents headings={headings} />}
-    <article class="animate">
+		<article>
 			<Content />
 			<PostNavigation prevPost={prevPost} nextPost={nextPost} />
 		</article>

src/pages/index.astro

@@ -35,8 +35,10 @@ const years = Object.keys(posts).sort(
         <div class="space-y-4">
           {
             years.map((year) => (
-              <section class="animate space-y-4">
+              <section class="space-y-4">
-                <div class="font-semibold text-black dark:text-white">{year}</div>
+                <div class="font-semibold text-black dark:text-white">
+                  {year}
+                </div>
                 <div>
                   <ul class="not-prose flex flex-col gap-4">
                     {posts[year].map((post) => (

src/styles/global.css

@@ -56,14 +56,6 @@ article {
 	}
 }
 
-.animate {
-	@apply -translate-y-3 opacity-0;
-	@apply transition-all duration-300 ease-out;
-}
-
-.animate.show {
-	@apply translate-y-0 opacity-100;
-}
 
 html #back-to-top {
 	@apply pointer-events-none opacity-0;