some refactor, change most components from svelte -> astro

package.json

@@ -21,6 +21,7 @@
     "astro": "^4.16.7",
     "astro-og-canvas": "^0.5.4",
     "svelte": "^5.1.1",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3"
   },

src/components/CodeCopyButton.svelte → src/components/CodeCopyButton.astro

@@ -1,7 +1,5 @@
-<script lang="ts">
-  import { onMount } from "svelte";
-
-  onMount(() => {
+<script is:inline>
+  document.addEventListener("DOMContentLoaded", () => {
     let copyButtonLabel = "copy";
     let codeBlocks = Array.from(document.querySelectorAll("pre"));
     for (let codeBlock of codeBlocks) {
@@ -13,21 +11,25 @@
         "opacity-50 sm:opacity-20 group-hover:opacity-100 transition-opacity duration-500 absolute top-2 right-2 text-xs bg-base-200 dark:bg-base-700 border border-base-400 dark:border-base-600 py-1 px-2 rounded-xl dark:hover:bg-base-600 hover:bg-base-300";
       copyButton.innerHTML = copyButtonLabel;
 
-      // add class group to codeBlock
+      // Add class 'group' to codeBlock
       codeBlock.classList.add("group");
 
       codeBlock.setAttribute("tabindex", "0");
       codeBlock.appendChild(copyButton);
 
-      codeBlock.parentNode?.insertBefore(wrapper, codeBlock);
-      wrapper.appendChild(codeBlock);
+      // Wrap the codeBlock with the wrapper div
+      let parent = codeBlock.parentNode;
+      if (parent) {
+        parent.insertBefore(wrapper, codeBlock);
+        wrapper.appendChild(codeBlock);
+      }
 
       copyButton.addEventListener("click", async () => {
         await copyCode(codeBlock, copyButton);
       });
     }
 
-    async function copyCode(block: HTMLElement, button: HTMLElement) {
+    async function copyCode(block, button) {
       let code = block.querySelector("code");
       if (!code) return;
 
@@ -39,7 +41,6 @@
       let oldClassName = button.className;
       button.className =
         "opacity-100 transition-opacity duration-500 absolute top-2 right-2 text-xs bg-green-200 dark:bg-green-900 border border-green-300 dark:border-green-700 text-green-800 dark:text-green-300 py-1 px-2 rounded-xl";
-
       button.innerText = "copied!";
 
       setTimeout(() => {

src/components/Header.astro

@@ -5,11 +5,12 @@ import {
   SEARCH_ENABLED,
   SITE_FAVICON,
 } from "../config.json";
-import ThemeToggle from "./ThemeToggle.svelte";
-import Search from "./search/Search.svelte";
+import ThemeToggle from "./ThemeToggle.astro";
 import HeaderLink from "./HeaderLink.astro";
+import CodeCopyButton from "./CodeCopyButton.astro";
+
 import CommandPalette from "./search/CommandPalette.svelte";
-import CodeCopyButton from "./CodeCopyButton.svelte";
+import Search from "./search/Search.svelte";
 
 const { active } = Astro.props;
 ---
@@ -38,12 +39,12 @@ const { active } = Astro.props;
         class="text-sm font-semibold leading-6">About</HeaderLink
       >
 
-      {MANUAL_DARK_MODE ? <ThemeToggle client:visible /> : null}
+      {MANUAL_DARK_MODE ? <ThemeToggle /> : null}
 
       {SEARCH_ENABLED ? <Search client:visible /> : null}
     </div>
   </nav>
 </header>
 
 <CommandPalette client:load />
-<CodeCopyButton client:load />
+<CodeCopyButton />

src/components/Pagination.astro

@@ -2,6 +2,12 @@
 import { BASE } from "../config.json";
 import PaginationNumber from "./PaginationNumber.astro";
 
+type Props = {
+  total: number;
+  current: number;
+  tag?: string;
+};
+
 const { total, current, tag } = Astro.props;
 
 function getVisiblePages(total: number, current: number): Array<number | null> {

src/components/ThemeToggle.astro

@@ -0,0 +1,99 @@
+---
+import { cn } from "../utils";
+import type { HTMLAttributes } from "astro/types";
+
+export type Props = HTMLAttributes<"button">;
+
+const { class: className, ...props } = Astro.props;
+---
+
+<button
+  class={cn(
+    "flex items-center justify-center text-base-950 hover:text-base-600 dark:text-base-50 dark:hover:text-base-400",
+    className
+  )}
+  data-theme-toggle
+  {...props}
+>
+  <span class="sr-only">Theme Toggle</span>
+
+  <!-- Dark Mode Icon -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6 hidden dark:block"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+    ></path>
+  </svg>
+
+  <!-- Light Mode Icon -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6 block dark:hidden"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386
+      6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591
+      1.591M5.25 12H3m4.227-4.773L5.636
+      5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0
+      017.5 0z"
+    ></path>
+  </svg>
+</button>
+
+<script>
+  (() => {
+    let darkMode = false;
+
+    function setTheme(dark: boolean) {
+      const root = document.documentElement;
+      if (dark) {
+        root.classList.add("dark");
+      } else {
+        root.classList.remove("dark");
+      }
+    }
+
+    function toggleTheme() {
+      darkMode = !darkMode;
+      localStorage.setItem("darkMode", JSON.stringify(darkMode));
+      setTheme(darkMode);
+    }
+
+    // Initialize theme on page load
+    const savedDarkMode = localStorage.getItem("darkMode");
+    if (savedDarkMode !== null) {
+      darkMode = JSON.parse(savedDarkMode);
+    } else {
+      darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+    setTheme(darkMode);
+
+    // Listen to system theme changes
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (e) => e.matches && toggleTheme());
+
+    window
+      .matchMedia("(prefers-color-scheme: light)")
+      .addEventListener("change", (e) => e.matches && toggleTheme());
+
+    // Add click event to toggle button
+    document
+      .querySelector("button[data-theme-toggle]")
+      ?.addEventListener("click", toggleTheme);
+  })();
+</script>

src/components/alerts/ErrorAlert.astro

@@ -0,0 +1,41 @@
+---
+import { cn } from "../../utils";
+
+interface Props {
+  title: string;
+  class?: string;
+}
+
+const { title, class: className } = Astro.props;
+---
+
+<div
+  class={cn(
+    "rounded-xl bg-red-50 dark:bg-red-500/5 p-4 dark:ring-1 dark:ring-red-500/10 not-prose max-w-full",
+    className
+  )}
+>
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <svg
+        class="h-5 w-5 text-red-500"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"
+          clip-rule="evenodd"></path>
+      </svg>
+    </div>
+    <div class="ml-3">
+      <h3 class="text-sm font-medium text-red-800 dark:text-red-500">
+        {title}
+      </h3>
+      <div class="mt-2 text-sm text-red-700 dark:text-red-400">
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>