refactor!: remove react dependency for UI interactions (#457)

Remove react as a dependency for UI interactions.
Update jsx components such as Search and Datetime
with astro components.

Author: satnaing

astro.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
-import react from "@astrojs/react";
 import sitemap from "@astrojs/sitemap";
 import remarkToc from "remark-toc";
 import remarkCollapse from "remark-collapse";
@@ -10,7 +9,6 @@ import { SITE } from "./src/config";
 export default defineConfig({
   site: SITE.website,
   integrations: [
-    react(),
     sitemap({
       filter: page => SITE.showArchives || !page.endsWith("/archives"),
     }),

package.json

@@ -12,18 +12,13 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@astrojs/react": "^4.2.0",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
     "@resvg/resvg-js": "^2.6.2",
     "@tailwindcss/vite": "^4.0.8",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
     "astro": "^5.3.1",
     "fuse.js": "^7.1.0",
     "lodash.kebabcase": "^4.1.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",
     "satori": "^0.12.1",

pnpm-lock.yaml

@@ -0,0 +1,37 @@
+---
+import { slugifyStr } from "@/utils/slugify";
+import type { CollectionEntry } from "astro:content";
+import Datetime from "./Datetime.astro";
+
+export interface Props {
+  href?: string;
+  frontmatter: CollectionEntry<"blog">["data"];
+  secHeading?: boolean;
+}
+
+const { href, frontmatter, secHeading = true } = Astro.props;
+
+const { title, pubDatetime, modDatetime, description } = frontmatter;
+
+const headerProps = {
+  style: { viewTransitionName: slugifyStr(title) },
+  class: "text-lg font-medium decoration-dashed hover:underline",
+};
+---
+
+<li class="my-6">
+  <a
+    href={href}
+    class="inline-block text-lg font-medium text-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
+  >
+    {
+      secHeading ? (
+        <h2 {...headerProps}>{title}</h2>
+      ) : (
+        <h3 {...headerProps}>{title}</h3>
+      )
+    }
+  </a>
+  <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} />
+  <p>{description}</p>
+</li>

src/components/Card.astro

@@ -0,0 +1,66 @@
+---
+import { LOCALE } from "@/constants";
+
+export interface Props {
+  pubDatetime: string | Date;
+  modDatetime: string | Date | undefined | null;
+  size?: "sm" | "lg";
+  class?: string;
+}
+
+const {
+  pubDatetime,
+  modDatetime,
+  size = "sm",
+  class: className = "",
+} = Astro.props;
+
+/* ========== Formatted Datetime ========== */
+const myDatetime = new Date(
+  modDatetime && modDatetime > pubDatetime ? modDatetime : pubDatetime
+);
+const date = myDatetime.toLocaleDateString(LOCALE.langTag, {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+});
+
+const time = myDatetime.toLocaleTimeString(LOCALE.langTag, {
+  hour: "2-digit",
+  minute: "2-digit",
+});
+---
+
+<div class={`flex items-end space-x-2 opacity-80 ${className}`.trim()}>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    class={`${
+      size === "sm" ? "scale-90" : "scale-100"
+    } inline-block h-6 w-6 min-w-[1.375rem] fill-foreground`}
+    aria-hidden="true"
+  >
+    <path
+      d="M7 11h2v2H7zm0 4h2v2H7zm4-4h2v2h-2zm0 4h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z"
+    ></path>
+    <path
+      d="M5 22h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2zM19 8l.001 12H5V8h14z"
+    ></path>
+  </svg>
+  {
+    modDatetime && modDatetime > pubDatetime ? (
+      <span
+        class={`italic ${size === "sm" ? "text-sm" : "text-sm sm:text-base"}`}
+      >
+        Updated:
+      </span>
+    ) : (
+      <span class="sr-only">Published:</span>
+    )
+  }
+  <span class={`italic ${size === "sm" ? "text-sm" : "text-sm sm:text-base"}`}>
+    <time datetime={myDatetime.toISOString()}>{date}</time>
+    <span aria-hidden="true"> | </span>
+    <span class="sr-only">&nbsp;at&nbsp;</span>
+    <span class="text-nowrap">{time}</span>
+  </span>
+</div>