fix: add url() helper for correct base path on GitHub Pages

Astro 4.0.2 does not auto-prefix href/src with base path.
Add url() helper in config.ts and use it across all components,
layouts, and pages so paths work correctly under /ac-site-template/.

Author: yunxinz

src/components/BaseHead.astro

@@ -4,6 +4,7 @@
 import "../styles/global.css";
 import "@fontsource-variable/nunito";
 import "lxgw-wenkai-webfont/style.css";
+import { url } from "../config";
 
 export interface Props {
     title: string;
@@ -24,7 +25,7 @@ const {
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <!-- TODO change color according to theme -->
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="icon" type="image/svg+xml" href={url('favicon.svg')} />
 <meta name="generator" content={Astro.generator} />
 
 <!-- Primary Meta Tags -->

src/components/Header.astro

@@ -1,5 +1,5 @@
 ---
-import { SITE_TITLE } from "../config";
+import { SITE_TITLE, url } from "../config";
 ---
 <div
   class="sticky lg:hidden top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-all duration-100 bg-base-100 text-base-content shadow-ac rounded-b-ac-lg"
@@ -14,7 +14,7 @@ import { SITE_TITLE } from "../config";
     </div>
     <div class="navbar-center">
         <!-- Header on mobile -->
-      <a class="btn btn-ghost normal-case text-xl" href="/">{SITE_TITLE}</a> 
+      <a class="btn btn-ghost normal-case text-xl" href={url('')}>{SITE_TITLE}</a> 
     </div>
     <div class="navbar-end"></div>
   </div>

src/components/SideBar.astro

@@ -2,6 +2,7 @@
 import SideBarFooter from "./SideBarFooter.astro";
 import { Image } from "astro:assets";
 import SideBarMenu from "./SideBarMenu.astro";
+import { url } from "../config";
 const { sideBarActiveItemID } = Astro.props;
 ---
 
@@ -11,7 +12,7 @@ const { sideBarActiveItemID } = Astro.props;
         class="px-2 pt-2 h-auto min-h-full w-[19rem] bg-ac-cream-dark text-ac-text flex flex-col"
     >
         <div class="w-fit mx-auto mt-5 mb-6">
-            <a href="/">
+            <a href={url('')}>
                 <div
                     class="avatar transition ease-in-out hover:scale-[102%] block m-auto"
                 >
@@ -21,7 +22,7 @@ const { sideBarActiveItemID } = Astro.props;
                             format="webp"
                             width={300}
                             height={300}
-                            src="/profile.jpg"
+                            src={url('profile.webp')}
                             alt="Profile image"
                         />
                     </div>

src/components/SideBarFooter.astro

@@ -1,3 +1,7 @@
+---
+import { url } from "../config";
+---
+
 <div
     class="block sticky pointer-events-none bottom-10 bg-ac-cream-dark justify-center h-12 [mask-image:linear-gradient(transparent,#000000)]"
 >
@@ -11,7 +15,7 @@
         aria-label="Toggle theme"
         title="Toggle theme"
     >
-        <img id="theme-icon" src="/leaf_light.png" alt="" class="w-5 h-5 rounded-ac-sm" />
+        <img id="theme-icon" src={url('leaf_light.png')} alt="" class="w-5 h-5 rounded-ac-sm" />
         <span id="theme-label">Dark Mode</span>
     </button>
 </div>
@@ -26,7 +30,7 @@
         aria-label="GitHub"
         title="GitHub"
     >
-        <img src="/news.png" alt="GitHub" class="w-5 h-5 rounded-ac-sm" />
+        <img src={url('news.png')} alt="GitHub" class="w-5 h-5 rounded-ac-sm" />
         <span>GitHub</span>
     </a>
 
@@ -37,7 +41,7 @@
         aria-label="LinkedIn"
         title="LinkedIn"
     >
-        <img src="/brewster.png" alt="LinkedIn" class="w-5 h-5 rounded-ac-sm" />
+        <img src={url('brewster.png')} alt="LinkedIn" class="w-5 h-5 rounded-ac-sm" />
         <span>LinkedIn</span>
     </a>
 
@@ -48,7 +52,7 @@
         aria-label="WhatsApp"
         title="WhatsApp"
     >
-        <img src="/whatsapp.png" alt="WhatsApp" class="w-5 h-5 rounded-ac-sm" />
+        <img src={url('whatsapp.png')} alt="WhatsApp" class="w-5 h-5 rounded-ac-sm" />
         <span>WhatsApp</span>
     </a>
 
@@ -59,7 +63,7 @@
         aria-label="Instagram"
         title="Instagram"
     >
-        <img src="/instagram.png" alt="Instagram" class="w-5 h-5 rounded-ac-sm" />
+        <img src={url('instagram.png')} alt="Instagram" class="w-5 h-5 rounded-ac-sm" />
         <span>Instagram</span>
     </a>
 </div>

src/components/SideBarMenu.astro

@@ -1,4 +1,5 @@
 ---
+import { url } from "../config";
 const { sideBarActiveItemID } = Astro.props;
 const activeClass = "bg-ac-primary/15 text-ac-primary-dark rounded-ac-md";
 ---
@@ -8,59 +9,59 @@ const activeClass = "bg-ac-primary/15 text-ac-primary-dark rounded-ac-md";
         <a
             class="py-3 text-base rounded-ac-md transition-colors hover:bg-ac-sand"
             id="home"
-            href="/"
+            href={url('')}
         >
-            <img src="/nookmiles.png" alt="" class="w-6 h-6 rounded-ac-sm" />
+            <img src={url('nookmiles.png')} alt="" class="w-6 h-6 rounded-ac-sm" />
             Home
         </a>
     </li>
     <li>
         <a
             class="py-3 text-base rounded-ac-md transition-colors hover:bg-ac-sand"
             id="projects"
-            href="/projects"
+            href={url('projects')}
         >
-            <img src="/brush.png" alt="" class="w-6 h-6 rounded-ac-sm" />
+            <img src={url('brush.png')} alt="" class="w-6 h-6 rounded-ac-sm" />
             Projects
         </a>
     </li>
     <li>
         <a
             class="py-3 text-base rounded-ac-md transition-colors hover:bg-ac-sand"
             id="cv"
-            href="/cv"
+            href={url('cv')}
         >
-            <img src="/nookwallet.png" alt="" class="w-6 h-6 rounded-ac-sm" />
+            <img src={url('nookwallet.png')} alt="" class="w-6 h-6 rounded-ac-sm" />
             CV
         </a>
     </li>
     <li>
         <a
             class="py-3 text-base rounded-ac-md transition-colors hover:bg-ac-sand"
             id="blog"
-            href="/blog/"
+            href={url('blog/')}
         >
-            <img src="/photos.png" alt="" class="w-6 h-6 rounded-ac-sm" />
+            <img src={url('photos.png')} alt="" class="w-6 h-6 rounded-ac-sm" />
             Blog
         </a>
     </li>
     <li>
         <a
             class="py-3 text-base rounded-ac-md transition-colors hover:bg-ac-sand"
             id="personal"
-            href="/personal"
+            href={url('personal')}
         >
-            <img src="/nookcritters.png" alt="" class="w-6 h-6 rounded-ac-sm" />
+            <img src={url('nookcritters.png')} alt="" class="w-6 h-6 rounded-ac-sm" />
             Personal
         </a>
     </li>
     <li>
         <a
             class="py-3 text-base rounded-ac-md transition-colors hover:bg-ac-sand"
             id="notes"
-            href="/notes"
+            href={url('notes')}
         >
-            <img src="/drawing.png" alt="" class="w-6 h-6 rounded-ac-sm" />
+            <img src={url('drawing.png')} alt="" class="w-6 h-6 rounded-ac-sm" />
             Notes
         </a>
     </li>
@@ -72,7 +73,7 @@ const activeClass = "bg-ac-primary/15 text-ac-primary-dark rounded-ac-md";
             target="_blank"
             referrerpolicy="no-referrer-when-downgrade"
         >
-            <img src="/messages.png" alt="" class="w-6 h-6 rounded-ac-sm" />
+            <img src={url('messages.png')} alt="" class="w-6 h-6 rounded-ac-sm" />
             Contact
         </a>
     </li>

src/config.ts

@@ -8,3 +8,12 @@ export const SITE_DESCRIPTION =
     "Your Name's personal website.";
 export const GENERATE_SLUG_FROM_TITLE = true;
 export const TRANSITION_API = true;
+
+// Base path helper for GitHub Pages project sites
+// In dev: "/" — in prod with BASE_URL: "/ac-site-template/"
+const BASE_PATH = import.meta.env.BASE_URL;
+export const url = (path: string) => {
+    const clean = path.replace(/^\//, "");
+    return clean ? BASE_PATH + clean : BASE_PATH;
+};
+export { BASE_PATH };

src/layouts/BaseLayout.astro

@@ -5,7 +5,7 @@ import Footer from "../components/Footer.astro";
 import SideBar from "../components/SideBar.astro";
 import { ViewTransitions } from "astro:transitions";
 
-import { SITE_TITLE, SITE_DESCRIPTION, TRANSITION_API } from "../config";
+import { SITE_TITLE, SITE_DESCRIPTION, TRANSITION_API, url, BASE_PATH } from "../config";
 
 const {
     image,
@@ -28,6 +28,7 @@ const {
             ogType={ogType}
         />
         {TRANSITION_API && <ViewTransitions />}
+        <Fragment set:html={`<style is:inline>:root{--divider-img:url("${url('divider_line.png')}")}</style>`} />
         <script is:inline>
             (function(){
                 var t = localStorage.getItem('theme');
@@ -41,7 +42,7 @@ const {
             <input id="my-drawer" type="checkbox" class="drawer-toggle" />
             <div class="drawer-content bg-base-100 rounded-tl-ac-xl relative min-h-screen flex flex-col">
                 <div class="w-full overflow-hidden pointer-events-none select-none">
-                    <img src="/header_banner_light.png" data-light-src="/header_banner_light.png" data-dark-src="/header_banner_dark.png" alt="" class="w-full theme-banner" />
+                    <img src={url('header_banner_light.png')} data-light-src={url('header_banner_light.png')} data-dark-src={url('header_banner_dark.png')} alt="" class="w-full theme-banner" />
                 </div>
                 <Header title={SITE_TITLE} />
                 <div class="md:flex md:justify-center flex-1">
@@ -52,7 +53,7 @@ const {
                 <Footer />
 
                 <div class="w-full overflow-hidden pointer-events-none select-none flex justify-end mt-auto">
-                    <img src="/banner_light.png" data-light-src="/banner_light.png" data-dark-src="/banner_dark.png" alt="" class="w-full theme-banner" />
+                    <img src={url('banner_light.png')} data-light-src={url('banner_light.png')} data-dark-src={url('banner_dark.png')} alt="" class="w-full theme-banner" />
                 </div>
             </div>
             {
@@ -62,6 +63,7 @@ const {
             }
         </div>
         <script is:inline>
+            var __BASE__ = `${BASE_PATH}`;
             function applyTheme(theme) {
                 document.documentElement.setAttribute('data-theme', theme);
                 localStorage.setItem('theme', theme);
@@ -70,7 +72,7 @@ const {
                 });
                 var icon = document.getElementById('theme-icon');
                 var label = document.getElementById('theme-label');
-                if (icon) icon.src = theme === 'night' ? '/leaf_light.png' : '/leaf_dark.png';
+                if (icon) icon.src = theme === 'night' ? __BASE__ + 'leaf_light.png' : __BASE__ + 'leaf_dark.png';
                 if (label) label.textContent = theme === 'night' ? 'Light Mode' : 'Dark Mode';
             }
             window.toggleTheme = function() {

src/layouts/PostLayout.astro

@@ -18,7 +18,7 @@ const {
 dayjs.extend(localizedFormat);
 const displayDate = dayjs(pubDate).format("ll");
 import { Image } from "astro:assets";
-import { AUTHOR_INITIAL } from "../config";
+import { AUTHOR_INITIAL, url } from "../config";
 ---
 
 <BaseLayout

src/pages/404.astro

@@ -1,12 +1,13 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
+import { url } from "../config";
 ---
 
 <BaseLayout title="404: Not Found" includeSidebar={false}>
     <div class="text-center">
         <h1 class="text-8xl font-bold mb-4">☁️</h1>
         <h1 class="text-6xl font-bold mb-2">404</h1>
         <h3 class="text-2xl">Oops, page not found ...</h3>
-        <a class="btn-ac mt-9" href="/">Home</a>
+        <a class="btn-ac mt-9" href={url('')}>Home</a>
     </div>
 </BaseLayout>

src/pages/index.astro

@@ -1,11 +1,11 @@
 ---
 import BaseLayout from "../layouts/BaseLayout.astro";
-import { SITE_TITLE } from "../config";
+import { SITE_TITLE, url } from "../config";
 ---
 
 <BaseLayout sideBarActiveItemID="home">
     <div class="pb-12 mt-5">
-        <img src="/favicon.svg" alt="" class="w-24 h-24 mb-2" />
+        <img src={url('favicon.svg')} alt="" class="w-24 h-24 mb-2" />
         <div class="text-xl py-1">Hey there</div>
         <div class="text-5xl font-bold">I'm {SITE_TITLE}</div>
         <div class="text-xl py-6">