styling (#62)

astro.config.mjs

@@ -5,7 +5,7 @@ import icon from "astro-icon";
 import orama from "@orama/plugin-astro";
 
 import rehypeExternalLinks from "rehype-external-links";
-import expressiveCode from "astro-expressive-code";
+import astroExpressiveCode from "astro-expressive-code";
 import { readingTime, modifiedTime } from "./src/lib/remark.mjs";
 
 // https://astro.build/config
@@ -25,7 +25,7 @@ export default defineConfig({
     icon({
       iconDir: "src/assets/icons",
       include: {
-        lucide: ["sun", "moon", "search"],
+        lucide: ["sun", "moon", "search", "rss"],
       },
       svgoOptions: {
         plugins: [
@@ -44,7 +44,7 @@ export default defineConfig({
         contentSelectors: ["h1", "article"],
       },
     }),
-    expressiveCode({ themes: ["dracula"] }),
+    astroExpressiveCode({ themes: ["dracula"] }),
   ],
   prefetch: true,
   markdown: {

package.json

@@ -21,7 +21,7 @@
     "@astrojs/sitemap": "3.0.4",
     "@astrojs/tailwind": "5.1.0",
     "@orama/plugin-astro": "2.0.0-beta.12",
-    "astro": "4.0.8",
+    "astro": "4.0.9",
     "astro-expressive-code": "0.30.1",
     "astro-icon": "1.0.1",
     "astro-seo": "0.8.0",

src/components/Footer.astro

@@ -1,49 +1,68 @@
 ---
 import { Icon } from "astro-icon/components";
 
+import ThemeToggle from "./ThemeToggle.astro";
 import Updated from "./Updated.astro";
 ---
 
-<footer
-  data-testid="footer"
-  class="mt-auto flex flex-col items-center gap-2 pb-8 pt-10"
->
-  <div class="flex items-center justify-center gap-6">
-    <a href="mailto:[email protected]" title="My email" aria-label="Email">
-      <Icon name="mail" class="h-[26px] w-[26px]" />
-    </a>
-
-    <a
-      href="https://www.linkedin.com/in/anguyennz/"
-      target="_blank"
-      rel="noopener"
-      title="My LinkedIn"
-      aria-label="LinkedIn"
-    >
-      <Icon name="linkedin" class="h-[24px] w-[24px]" />
-    </a>
-
-    <a
-      href="https://twitter.com/anguyendev"
-      target="_blank"
-      rel="noopener"
-      title="My X or Twitter"
-      aria-label="X or Twitter"
-    >
-      <Icon name="x" class="h-[24px] w-[24px]" />
-    </a>
-
-    <a
-      href="https://github.com/alexnguyennz"
-      target="_blank"
-      rel="noopener"
-      title="My GitHub"
-      aria-label="GitHub"
-    >
-      <Icon name="github" class="h-[24px] w-[24px] dark:hidden" />
-      <Icon name="github-dark" class="hidden h-[24px] w-[24px] dark:block" />
-    </a>
-  </div>
+<footer data-testid="footer" class="mb-10 mt-auto gap-2 text-sm">
+  <div class="mx-auto max-w-2xl space-y-4">
+    <hr class="mb-6 mt-10 border-t border-slate-300" />
+    <div class="flex items-center justify-between">
+      <p>© 2023 Alex Nguyen</p>
+
+      <div class="flex items-center justify-center gap-4">
+        <a
+          href="mailto:[email protected]"
+          title="My email"
+          aria-label="Email"
+        >
+          <Icon name="mail" class="h-[26px] w-[26px]" />
+        </a>
+
+        <a
+          href="https://www.linkedin.com/in/anguyennz/"
+          target="_blank"
+          rel="noopener"
+          title="My LinkedIn"
+          aria-label="LinkedIn"
+        >
+          <Icon name="linkedin" class="h-[24px] w-[24px]" />
+        </a>
+
+        <a
+          href="https://twitter.com/anguyendev"
+          target="_blank"
+          rel="noopener"
+          title="My X or Twitter"
+          aria-label="X or Twitter"
+        >
+          <Icon name="x" class="h-[24px] w-[24px]" />
+        </a>
 
-  <Updated />
+        <a
+          href="https://github.com/alexnguyennz"
+          target="_blank"
+          rel="noopener"
+          title="My GitHub"
+          aria-label="GitHub"
+        >
+          <Icon name="github" class="h-[24px] w-[24px] dark:hidden" />
+          <Icon
+            name="github-dark"
+            class="hidden h-[24px] w-[24px] dark:block"
+          />
+        </a>
+
+        <a href="/rss.xml" title="My RSS feed" aria-label="RSS">
+          <Icon name="lucide:rss" class="h-[24px] w-[24px]" />
+        </a>
+      </div>
+    </div>
+
+    <div class="flex items-center justify-between">
+      <Updated />
+      <ThemeToggle />
+    </div>
+  </div>
 </footer>

src/components/header/ThemeToggle.astro → src/components/ThemeToggle.astro

@@ -7,7 +7,7 @@ import { Icon } from "astro-icon/components";
   id="theme-toggle"
   data-testid="theme-toggle"
   aria-label="toggle theme"
-  class="relative rounded-full p-1.5 text-slate-700 dark:text-slate-100"
+  class="relative rounded-full p-1.5"
 >
   <span class="sr-only">toggle theme</span>
   <Icon

src/components/Updated.astro

@@ -3,7 +3,7 @@ const lastUpdated = new Date();
 ---
 
 <astro-updated data-lastupdated={lastUpdated} transition:persist>
-  <span data-testid="updated" class="text-sm text-slate-500"
+  <span data-testid="updated"
     >🛠️ <svg
       xmlns="http://www.w3.org/2000/svg"
       width="20"

src/components/header/Header.astro

@@ -2,15 +2,17 @@
 import { Icon } from "astro-icon/components";
 
 import MobileMenu from "./MobileMenu.astro";
-import ThemeToggle from "./ThemeToggle.astro";
 
 import { cn } from "@/lib/utils";
 import { links } from "@/lib/data";
 
 const pathname = Astro.url.pathname;
 ---
 
-<header class="fixed left-1/2 top-6 z-10 -translate-x-1/2">
+<header
+  transition:name="header"
+  class="fixed left-1/2 top-6 z-10 -translate-x-1/2"
+>
   <div
     id="navbar"
     class="relative z-50 mx-auto flex hidden items-center justify-center gap-6 rounded-3xl border border-b-0 border-slate-200 bg-white px-5 py-3 shadow-md sm:py-2 dark:border-slate-800 dark:bg-cyan-950"
@@ -87,8 +89,6 @@ const pathname = Astro.url.pathname;
     </nav>
 
     <MobileMenu pathname={pathname} />
-
-    <ThemeToggle />
   </div>
 </header>
 
@@ -144,13 +144,8 @@ const pathname = Astro.url.pathname;
     () => {
       const navbar = document.getElementById("navbar");
       if (navbar) {
-        /* set a timeout as a workaround for View Transitions "bug" on All About Astro page in production when page is reloaded
-         TODO find cause
-         */
-        setTimeout(() => {
-          navbar.classList.remove("hidden");
-          navbar.style.animation = "animate-header 0.5s 0s forwards";
-        }, 100);
+        navbar.classList.remove("hidden");
+        navbar.style.animation = "animate-header 0.5s 0s forwards";
       }
 
       const headerNav = document.querySelector("nav");

src/components/pages/home/ProjectCard.astro

@@ -21,14 +21,14 @@ const tags: CollectionEntry<"tags">[] = await getEntries(project.data.tags);
   class="group relative flex h-full max-w-xs flex-1 flex-col rounded-[3rem] border border-slate-200 bg-white p-5 shadow-sm hover:translate-y-1 hover:shadow-md dark:border-slate-800 dark:bg-slate-900"
 >
   <div
-    class="absolute right-4 top-4 flex gap-2 transition group-hover:opacity-100 sm:opacity-0"
+    class="absolute right-5 top-5 z-10 flex gap-2 transition group-hover:opacity-100 sm:opacity-0"
   >
     <a
       href={project.data.url}
       target="_blank"
       rel="noopener noreferrer nofollow"
       title="View"
-      class="p-2 text-2xl no-underline hover:no-underline"
+      class="rounded-full bg-slate-700 p-3 py-1 text-xl text-white no-underline hover:no-underline dark:bg-slate-200 dark:text-black"
       aria-label={project.data.name + " link"}
     >
       ↗

src/layouts/Layout.astro

@@ -60,7 +60,7 @@ const pathname = Astro.url.pathname;
 
     <ViewTransitions fallback="swap" />
   </head>
-  <body class="flex min-h-screen flex-col px-5">
+  <body class="mx-auto flex min-h-screen flex-col px-5">
     <Header />
 
     <main class="mt-32 flex flex-col gap-6 sm:mt-52 sm:items-center">

src/layouts/PostLayout.astro

@@ -1,6 +1,6 @@
 ---
-import { type CollectionEntry } from "astro:content";
-import { type MarkdownHeading } from "astro";
+import type { CollectionEntry } from "astro:content";
+import type { MarkdownHeading } from "astro";
 
 import Layout from "./Layout.astro";
 import TableOfContents from "@/components/pages/blog/TableOfContents.astro";