chore: update components

raexera · Sep 21, 2024 · 9e8f642 · 9e8f642
1 parent 1c60cb3
commit 9e8f642
Show file tree

Hide file tree

Showing 16 changed files with 3,954 additions and 2,005 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -45,3 +45,33 @@ const { title, description } = Astro.props;
 
 <!--  View Transitions -->
 <ViewTransitions />
+
+<!--  Theme Toggle -->
+<script is:inline>
+  const setTheme = () => {
+    const theme = (() => {
+      if (
+        typeof localStorage !== "undefined" &&
+        localStorage.getItem("theme")
+      ) {
+        return localStorage.getItem("theme");
+      }
+      if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        return "dark";
+      }
+      return "light";
+    })();
+
+    if (theme === "light") {
+      document.documentElement.classList.remove("dark");
+    } else {
+      document.documentElement.classList.add("dark");
+    }
+
+    window.localStorage.setItem("theme", theme || "light");
+  };
+
+  setTheme();
+
+  document.addEventListener("astro:after-swap", setTheme);
+</script>
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -17,10 +17,10 @@ const { url, name, description, highlights, technologies } = Astro.props;
   class="group flex items-center gap-3 rounded-lg border border-black/15 p-4 transition-colors duration-300 hover:bg-black/5 dark:border-white/20 hover:dark:bg-white/10"
 >
   <div
-    class="w-full transition-colors duration-300 group-hover:text-black dark:group-hover:text-white"
+    class="w-full text-black/75 transition-colors duration-300 group-hover:text-black dark:text-white/75 dark:group-hover:text-white"
   >
     <div class="flex items-center gap-2">
-      <h3 class="text-base font-bold leading-snug text-black dark:text-white">
+      <h3 class="text-base font-bold leading-snug">
         {name}
       </h3>
       <svg
@@ -48,15 +48,17 @@ const { url, name, description, highlights, technologies } = Astro.props;
       </svg>
     </div>
     <div class="mt-2 flex flex-col gap-2">
-      <p class="text-sm">{description}</p>
+      <p class="text-sm">
+        {description}
+      </p>
       <p class="text-sm text-black/50 dark:text-white/50">
         {highlights.join(" ")}
       </p>
       <ul class="flex flex-wrap gap-2">
         {
           technologies.map((tech) => (
             <li class="flex items-center gap-1 rounded-md border border-black/25 bg-neutral-200/50 px-2 py-1 text-xs dark:border-white/25 dark:bg-neutral-800/50">
-              <span>{tech}</span>
+              {tech}
             </li>
           ))
         }

diff --git a/src/components/Drawer.astro b/src/components/Drawer.astro
@@ -16,7 +16,7 @@ const subpath = pathname.match(/[^/]+/g);
           href={LINK.HREF}
           class={cn(
             "flex items-center justify-center rounded-full px-3 py-1",
-            "text-current hover:text-black dark:hover:text-white",
+            "text-black/75 hover:text-black dark:text-white/75 dark:hover:text-white",
             "hover:bg-black/20 dark:hover:bg-white/20",
             "transition-colors duration-300 ease-in-out",
             pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF

diff --git a/src/components/DrawerToggle.astro b/src/components/DrawerToggle.astro
@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
   class={cn(
     "flex md:hidden",
     "size-9 rounded-full p-2 items-center justify-center",
+    "text-black/75 dark:text-white/75",
     "bg-transparent hover:bg-black/20 dark:hover:bg-white/20",
     "stroke-current hover:stroke-black hover:dark:stroke-white",
     "border border-black/25 dark:border-white/25",
@@ -37,7 +38,7 @@ import { cn } from "@/lib/utils";
   }
 </style>
 
-<script is:inline>
+<script>
   function toggleDrawer() {
     const drawer = document.getElementById("drawer");
     const drawerButton = document.getElementById("drawer_toggle");

diff --git a/src/components/ExpandButton.tsx b/src/components/ExpandButton.tsx
@@ -37,7 +37,7 @@ export default function ExpandButton({ children }: ExpandButtonProps) {
       </AnimatePresence>
       <button
         onClick={() => setExpanded(!expanded)}
-        className="group/more flex w-fit cursor-pointer items-center justify-center gap-1.5 text-xs underline transition-all hover:text-black dark:hover:text-white"
+        className="group/more flex w-fit cursor-pointer items-center justify-center gap-1.5 text-xs text-black/75 underline transition-all hover:text-black dark:text-white/75 dark:hover:text-white"
       >
         <span>{expanded ? "Show less" : "Show more"}</span>
         <motion.svg

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -9,7 +9,7 @@ import Container from "@/components/Container.astro";
   >
     <Container size="md">
       <div class="flex h-full items-center justify-center print:hidden">
-        <p class="text-center text-sm">
+        <p class="text-center text-sm text-black/75 dark:text-white/75">
           &copy; {new Date().getFullYear()}
           {SITE.AUTHOR}. All rights reserved.
         </p>

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -12,27 +12,26 @@ const subpath = pathname.match(/[^/]+/g);
 <header id="header" class="fixed top-0 z-50 h-16 w-full print:hidden">
   <Container size="md">
     <div class="relative h-full w-full">
-      <div class="absolute left-0 top-1/2 flex -translate-y-1/2 font-semibold">
+      <div class="absolute left-0 top-1/2 -translate-y-1/2 font-semibold">
         <a
           href="/"
-          class="flex text-current transition-colors duration-300 ease-in-out hover:text-black dark:hover:text-white"
+          class="text-black/75 transition-colors duration-300 hover:text-black dark:text-white/75 dark:hover:text-white"
         >
-          <div class="font-bold uppercase">
-            {SITE.TITLE}
-          </div>
+          <div class="font-bold uppercase">{SITE.TITLE}</div>
         </a>
       </div>
 
       <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-        <nav class="hidden items-center justify-center gap-1 text-sm md:flex">
+        <nav class="hidden items-center gap-1 text-sm md:flex">
           {
             LINKS.map((LINK) => (
               <a
                 href={LINK.HREF}
                 class={cn(
-                  "h-8 rounded-full px-3 text-current",
+                  "h-8 rounded-full px-3",
+                  "text-black/75 dark:text-white/75",
                   "flex items-center justify-center",
-                  "transition-colors duration-300 ease-in-out",
+                  "transition-colors duration-300",
                   pathname === LINK.HREF || "/" + subpath?.[0] === LINK.HREF
                     ? "bg-black text-white dark:bg-white dark:text-black"
                     : "hover:bg-black/20 hover:text-black dark:hover:bg-white/20 dark:hover:text-white",
@@ -46,26 +45,21 @@ const subpath = pathname.match(/[^/]+/g);
       </div>
 
       <div class="absolute right-0 top-1/2 flex -translate-y-1/2 gap-2">
-        <button
-          aria-label={`Github repository`}
+        <a
+          href={SITE.REPO_URL}
+          aria-label="Github repository link"
+          target="_blank"
+          rel="noopener noreferrer"
           class={cn(
-            "flex",
-            "size-9 rounded-full p-2 items-center justify-center",
-            "bg-transparent hover:bg-black/20 dark:hover:bg-white/20",
-            "stroke-current hover:stroke-black hover:dark:stroke-white",
+            "flex items-center justify-center size-9 rounded-full p-2",
+            "text-black/75 dark:text-white/75",
+            "hover:bg-black/20 dark:hover:bg-white/20",
             "border border-black/25 dark:border-white/25",
-            "transition-colors duration-300 ease-in-out",
+            "transition-colors duration-300",
           )}
         >
-          <a
-            href={SITE.REPO_URL}
-            aria-label={`Github repository link`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Icon name="github" class="block size-full" />
-          </a>
-        </button>
+          <Icon name="github" class="block size-full" />
+        </a>
         <ThemeToggle />
         <DrawerToggle />
       </div>

diff --git a/src/components/Heading.astro b/src/components/Heading.astro
@@ -16,15 +16,15 @@ const { title, description, highlight } = Astro.props;
       {title}.
     </h1>
     <h2
-      class="mt-2 text-justify text-sm leading-6 sm:mt-4 sm:text-base lg:mt-6 lg:text-lg"
+      class="mt-2 text-justify text-sm leading-6 text-black/75 dark:text-white/75 sm:mt-4 sm:text-base lg:mt-6 lg:text-lg"
     >
       {description}
     </h2>
     {
       highlight && (
         <div class="flex flex-col gap-2">
           {highlight.map((item) => (
-            <h2 class="mt-2 text-justify text-sm leading-6 sm:mt-4 sm:text-base lg:mt-6 lg:text-lg">
+            <h2 class="text-justify text-sm leading-6 text-black/75 dark:text-white/75 sm:text-base lg:text-lg">
               {item}
             </h2>
           ))}

diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
@@ -4,11 +4,12 @@ import { cn } from "@/lib/utils";
 ---
 
 <button
-  id="theme_toggle"
+  id="themeToggle"
   aria-label={`Toggle light and dark theme`}
   class={cn(
     "flex",
     "size-9 rounded-full p-2 items-center justify-center",
+    "text-black/75 dark:text-white/75",
     "bg-transparent hover:bg-black/20 dark:hover:bg-white/20",
     "stroke-current hover:stroke-black hover:dark:stroke-white",
     "border border-black/25 dark:border-white/25",
@@ -19,80 +20,21 @@ import { cn } from "@/lib/utils";
   <Icon name="moon" class="hidden size-full dark:block" />
 </button>
 
-<style is:global>
-  :root {
-    --bg-light: #ffffff;
-    --bg-dark: #000000;
-    --text-light: rgba(0, 0, 0, 0.75);
-    --text-dark: rgba(255, 255, 255, 0.75);
-  }
-
-  html {
-    color-scheme: light;
-    background-color: var(--bg-light);
-    color: var(--text-light);
-  }
-
-  html.dark {
-    color-scheme: dark;
-    background-color: var(--bg-dark);
-    color: var(--text-dark);
-  }
-</style>
-
-<script is:inline>
-  (function () {
-    function setTheme(theme) {
+<script>
+  const setToggleListener = () => {
+    let toggleBtn = document.getElementById("themeToggle");
+    const handleToggleClick = () => {
       const element = document.documentElement;
-      element.classList.toggle("dark", theme === "dark");
-      localStorage.theme = theme;
-    }
-
-    function changeTheme() {
-      const currentTheme = document.documentElement.classList.contains("dark")
-        ? "dark"
-        : "light";
-      const newTheme = currentTheme === "dark" ? "light" : "dark";
-      setTheme(newTheme);
-    }
-
-    function preloadTheme() {
-      const savedTheme = localStorage.theme;
-      const prefersDark = window.matchMedia(
-        "(prefers-color-scheme: dark)",
-      ).matches;
-      const theme =
-        savedTheme === "light" || savedTheme === "dark"
-          ? savedTheme
-          : prefersDark
-            ? "dark"
-            : "light";
-      setTheme(theme);
-    }
+      element.classList.toggle("dark");
 
-    function initializeThemeButtons() {
-      const themeToggleButton = document.getElementById("theme_toggle");
-      themeToggleButton?.addEventListener("click", changeTheme);
-    }
+      const isDark = element.classList.contains("dark");
+      localStorage.setItem("theme", isDark ? "dark" : "light");
+    };
 
-    // Use requestAnimationFrame for smoother initial theme application
-    requestAnimationFrame(() => {
-      preloadTheme();
-      initializeThemeButtons();
-    });
+    toggleBtn?.addEventListener("click", handleToggleClick);
+  };
 
-    // Listen for system theme changes
-    window.matchMedia("(prefers-color-scheme: dark)").addListener((e) => {
-      if (localStorage.theme !== "light" && localStorage.theme !== "dark") {
-        setTheme(e.matches ? "dark" : "light");
-      }
-    });
+  setToggleListener();
 
-    document.addEventListener("astro:after-swap", () => {
-      requestAnimationFrame(() => {
-        preloadTheme();
-        initializeThemeButtons();
-      });
-    });
-  })();
+  document.addEventListener("astro:after-swap", setToggleListener);
 </script>
diff --git a/src/components/sections/Awards.astro b/src/components/sections/Awards.astro
@@ -4,7 +4,7 @@ import { awards } from "@cv";
 ---
 
 <Section className={Astro.props.className} title="Awards">
-  <ul class="space-y-4">
+  <ul class="space-y-4 text-black/75 dark:text-white/75">
     {
       awards.map(({ title, date, awarder }) => {
         return (
@@ -25,7 +25,7 @@ import { awards } from "@cv";
               <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88" />
             </svg>
             <div class="relative w-full">
-              <time class="mb-1 text-xs font-bold text-black/50 md:absolute md:right-0 md:top-0 md:mb-0 dark:text-white/50">
+              <time class="mb-1 text-xs font-bold text-black/50 dark:text-white/50 md:absolute md:right-0 md:top-0 md:mb-0">
                 {date}
               </time>
               <h3 class="font-medium text-black dark:text-white">{title}</h3>

diff --git a/src/components/sections/Education.astro b/src/components/sections/Education.astro
@@ -4,7 +4,7 @@ import { education } from "@cv";
 ---
 
 <Section className={Astro.props.className} title="Education">
-  <ul class="space-y-4">
+  <ul class="space-y-4 text-black/75 dark:text-white/75">
     {
       education.map(
         ({ institution, startDate, endDate, area, url, summary }) => {
@@ -32,7 +32,7 @@ import { education } from "@cv";
                 <path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5" />
               </svg>
               <div class="relative w-full">
-                <time class="mb-1 text-xs font-bold text-black/50 md:absolute md:right-0 md:top-0 md:mb-0 dark:text-white/50">
+                <time class="mb-1 text-xs font-bold text-black/50 dark:text-white/50 md:absolute md:right-0 md:top-0 md:mb-0">
                   {years}
                 </time>
                 <h3 class="text-base font-medium leading-snug text-black dark:text-white">

diff --git a/src/components/sections/Experience.astro b/src/components/sections/Experience.astro
@@ -28,15 +28,15 @@ import { work } from "@cv";
 
           return (
             <>
-              {/*  Datetime */}
+              {/* Datetime */}
               <div class="mt-1 text-xs font-bold text-black/50 dark:text-white/50">
                 <time datetime={startDate}>{startYear}</time>
                 <span class="mx-1">-</span>
                 <time datetime={endDate}>{endYear}</time>
               </div>
 
               {/* Timeline */}
-              <div class="relative hidden items-start justify-center sm:flex">
+              <div class="relative hidden justify-center sm:flex">
                 {!isLastItem && (
                   <div class="absolute top-2 h-full w-px bg-black/25 dark:bg-white/25" />
                 )}
@@ -75,7 +75,7 @@ import { work } from "@cv";
                   )}
                 </h3>
                 {(location || location_type) && (
-                  <p class="mt-2 text-sm">
+                  <p class="mt-2 text-sm text-black/75 dark:text-white/75">
                     {location}
                     {location && location_type && " - "}
                     {location_type}
@@ -94,7 +94,9 @@ import { work } from "@cv";
                   {responsibilities && (
                     <ExpandButton client:load>
                       <div>
-                        <h4 class="font-medium">Responsibilities:</h4>
+                        <h4 class="font-medium text-black/75 dark:text-white/75">
+                          Responsibilities:
+                        </h4>
                         <ul class="list-inside list-disc space-y-1 text-black/50 dark:text-white/50">
                           {responsibilities.map((responsibility) => (
                             <li>{responsibility}</li>