Fix rest of URLs to account for BASE_URL and needing trailing slash

astro.config.mjs

@@ -7,5 +7,6 @@ import tailwind from "@astrojs/tailwind";
 export default defineConfig({
   integrations: [react(), tailwind()],
   site: "https://dalurness.github.io",
-  base: "/winter-code-fest",
+  base: "/winter-code-fest/",
+  trailingSlash: "always",
 });

src/components/Button.tsx

@@ -1,6 +1,5 @@
 import { twMerge } from "tailwind-merge";
-
-const { BASE_URL } = import.meta.env;
+import { Link } from "./Link";
 
 export enum Color {
   dark = "dark",
@@ -56,15 +55,13 @@ export function LinkButton({
   color = Color.dark,
   size = Size.medium,
   pill,
-  href,
   className,
   children,
   ...nativeProps
 }: LinkButtonProps) {
   return (
-    <a
+    <Link
       {...nativeProps}
-      href={href.startsWith("/") ? BASE_URL + href : href}
       className={twMerge(
         "text-center",
         pill ? "rounded-full" : "rounded-lg",
@@ -77,6 +74,6 @@ export function LinkButton({
       )}
     >
       {children}
-    </a>
+    </Link>
   );
 }

src/components/Calendar.tsx

@@ -1,7 +1,7 @@
 import { getCollection } from "astro:content";
 import { twMerge } from "tailwind-merge";
+import { Link } from "./Link";
 
-const { BASE_URL } = import.meta.env;
 const days = await getCollection("days");
 
 const titles = days.reduce(
@@ -26,9 +26,7 @@ interface Props {
   className?: string;
 }
 
-export default GridCalendar;
-
-function GridCalendar({ current, className }: Props) {
+export function Calendar({ current, className }: Props) {
   return (
     <div
       className={twMerge(
@@ -49,8 +47,8 @@ function GridCalendar({ current, className }: Props) {
 function GridDay({ day, current }: { day: number; current: number }) {
   return (
     <div className="border-yeti-dark border-b border-r">
-      <a
-        href={BASE_URL + "/day/" + day}
+      <Link
+        href={`/day/${day}`}
         className={twMerge(
           "flex flex-col w-full h-full p-2 relative focus:z-10",
           current < day && "bg-yeti-light-1 hover:bg-yeti-light-3",
@@ -63,7 +61,7 @@ function GridDay({ day, current }: { day: number; current: number }) {
         {current > day && (
           <span className="absolute w-full h-px bg-yeti-dark-9 top-1/2 left-0 right-0 -rotate-45"></span>
         )}
-      </a>
+      </Link>
     </div>
   );
 }
@@ -97,7 +95,7 @@ function TableDay({ day, current }: { day: number; current: number }) {
   return (
     <td colSpan={1} className="w-[12.4%] border border-yeti-dark p-0">
       <a
-        href={BASE_URL + "/day/" + day}
+        href={BASE_URL + "day/" + day}
         className={twMerge(
           "flex flex-col w-full h-full p-2 relative", // border-yeti-dark border-b border-r",
           // day <= 7 && "border-t",

src/components/Link.tsx

@@ -0,0 +1,21 @@
+const { BASE_URL } = import.meta.env;
+const HAS_EXTENSION = /\.[0-9a-z]+$/i;
+
+interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+}
+export function Link({ href, children, ...nativeProps }: LinkProps) {
+  if (href.startsWith("/")) {
+    href = BASE_URL + href.slice(1);
+  }
+
+  if (!HAS_EXTENSION.test(href) && !href.endsWith("/")) {
+    href += "/";
+  }
+
+  return (
+    <a {...nativeProps} href={href}>
+      {children}
+    </a>
+  );
+}

src/components/SolutionChecker.tsx

@@ -5,7 +5,7 @@ interface Props {
   solution: string;
 }
 
-export default function ({ solution }: Props) {
+export function SolutionChecker({ solution }: Props) {
   const [input, setInput] = useState("");
 
   function checkSolution() {

src/layouts/Day.astro

@@ -10,8 +10,9 @@ interface Props {
 import { MdCalendarMonth, MdEventBusy } from "react-icons/md";
 
 import Layout from "./Layout.astro";
-import SolutionChecker from "../components/SolutionChecker";
-import Calendar from "../components/Calendar";
+import { SolutionChecker } from "../components/SolutionChecker";
+import { Calendar } from "../components/Calendar";
+import { Link } from "../components/Link";
 
 const { BASE_URL } = import.meta.env;
 const { day, title, solutions } = Astro.props;
@@ -22,10 +23,10 @@ const { day, title, solutions } = Astro.props;
     <div
       class="flex items-center gap-4 max-w-screen-lg w-full mx-auto px-4 md:px-6 py-3"
     >
-      <a
-        class="flex justify-center items-center gap-2 font-bold text-2xl"
-        href={BASE_URL}
-        ><img src={BASE_URL + "/logo.svg"} alt="Logo" class="w-10" />WCF</a
+      <Link
+        href="/"
+        className="flex justify-center items-center gap-2 font-bold text-2xl"
+        ><img src={BASE_URL + "logo.svg"} alt="Logo" class="w-10" />WCF</Link
       >
 
       <details class="ml-auto group">

src/layouts/Layout.astro

@@ -17,7 +17,7 @@ const { title } = Astro.props;
     <title>{title}</title>
     <link
       rel="shortcut icon"
-      href={BASE_URL + "/favicon.ico"}
+      href={BASE_URL + "favicon.ico"}
       type="image/x-icon"
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />

src/pages/index.astro

@@ -10,7 +10,7 @@ const { BASE_URL } = import.meta.env;
     class="px-4 sm:px-12 py-8 bg-yeti-light-3 flex flex-col items-center gap-8 max-w-screen-md md:mx-auto md:mt-12 md:rounded-2xl"
   >
     <h1 class="text-5xl font-bold text-center">Winter Code Fest</h1>
-    <img src={BASE_URL + "/logo.svg"} alt="WCF Logo" class="w-40" />
+    <img src={BASE_URL + "logo.svg"} alt="WCF Logo" class="w-40" />
     <p class="font-light text-xl">
       The <span class="text-yeti-light-9 font-bold">coolest</span> coding festival
       of the year. Grab your laptop, your warmest blanket, and join us for a fun-filled