From cd17271fb92d87c8a3d86e29b180d22a4c7b194c Mon Sep 17 00:00:00 2001
From: Jesse Smick <git@jesse.smick.me>
Date: Thu, 7 Nov 2024 23:43:40 -0700
Subject: [PATCH] Fix rest of URLs to account for BASE_URL and needing trailing
 slash

---
 astro.config.mjs                   |  3 ++-
 src/components/Button.tsx          |  9 +++------
 src/components/Calendar.tsx        | 14 ++++++--------
 src/components/Link.tsx            | 21 +++++++++++++++++++++
 src/components/SolutionChecker.tsx |  2 +-
 src/layouts/Day.astro              | 13 +++++++------
 src/layouts/Layout.astro           |  2 +-
 src/pages/index.astro              |  2 +-
 8 files changed, 42 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Link.tsx

diff --git a/astro.config.mjs b/astro.config.mjs
index 9e4feba..bfaf14a 100644
--- a/astro.config.mjs
+++ b/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",
 });
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 397ab69..2dafe9a 100644
--- a/src/components/Button.tsx
+++ b/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>
   );
 }
diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
index c1cfb85..3739d50 100644
--- a/src/components/Calendar.tsx
+++ b/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",
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
new file mode 100644
index 0000000..2850b34
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/SolutionChecker.tsx b/src/components/SolutionChecker.tsx
index 1229aa1..a16e04d 100644
--- a/src/components/SolutionChecker.tsx
+++ b/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() {
diff --git a/src/layouts/Day.astro b/src/layouts/Day.astro
index 34a4d8d..2383c07 100644
--- a/src/layouts/Day.astro
+++ b/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">
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f1ed094..b9069cb 100644
--- a/src/layouts/Layout.astro
+++ b/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" />
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fb93453..c148708 100644
--- a/src/pages/index.astro
+++ b/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