Merge pull request #133 from umdevclub/feat/formRedirect

feat!: implemented form redirects

Author: FawazBinSaleem

src/resources/data/forms.ts

@@ -0,0 +1,8 @@
+export const forms: Record<string, string> = {
+  arewethereyet: "https://forms.gle/TZREGetDcMRtZY7G7",
+  aurafarming: "https://www.instagram.com/reel/DMg0SvhARRN/",
+  "councilor-applications":
+    "https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ&start_radio=1",
+  "awty-handbook":
+    "https://docs.google.com/document/d/1UotSzRsbD6umpQfN0rHvS7MDXIfaHf7s1IlC7veRaVs/edit?usp=sharing",
+};

src/routes/App.tsx

@@ -27,6 +27,7 @@ import LinkTree from "./LinkTree";
 import RootLayout from "./layouts/RootLayout";
 import PageNotFound from "./PageNotFound";
 import Events from "./Events";
+import { formRedirectLoader } from "./FormRedirect";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -66,7 +67,8 @@ const router = createBrowserRouter(
         path="/devhacks/2025/gallery"
         element={<DevHacks2025ProjectGallery />}
       />
-      <Route path="*" element={<PageNotFound />} />
+      {/* always keep this route last, otherwise it will mess with the actual links above */}
+      <Route path="*" loader={formRedirectLoader} element={<PageNotFound />} />
     </Route>
   )
 );

src/routes/FormRedirect.tsx

@@ -0,0 +1,14 @@
+import { redirect } from "react-router-dom";
+import { forms } from "@/resources/data/forms";
+
+const formsNormalized: Record<string, string> = Object.fromEntries(
+  Object.entries(forms).map(([k, v]) => [k.toLowerCase(), v])
+);
+
+export function formRedirectLoader({ request }: { request: Request }) {
+  const url = new URL(request.url);
+  const slug = url.pathname.replace(/^\/+|\/+$/g, "").toLowerCase();
+  const target = formsNormalized[slug];
+  if (target) return redirect(target);
+  return null;
+}

src/routes/GithubUnix.tsx

@@ -31,7 +31,7 @@ function GithubUnix() {
 
   return (
     <div className="github-tab-container">
-      <h1>.DevHack's Guide to Git and Github</h1>
+      <h1>.devHack's Guide to Git and Github</h1>
       <Box display="flex">
         <aside
           className="github-table-of-contents"

src/routes/GithubWindows.tsx

@@ -31,7 +31,7 @@ function GithubWindows() {
 
   return (
     <div className="github-tab-container">
-      <h1>.DevHack's Guide to Git and Github</h1>
+      <h1>.devHack's Guide to Git and Github</h1>
       <Box display="flex">
         <aside
           className="github-table-of-contents"

src/routes/Home.tsx

@@ -16,7 +16,7 @@ import PeopleList from "@/components/PeopleList";
 import {
   workshopImages,
   hackathonImages,
-  devchampsImages,
+  // devchampsImages,
 } from "@/resources/data/homepage-mission-images";
 import { Box, Modal } from "@mui/material";
 
@@ -172,11 +172,11 @@ function Home() {
             </div>
           </div>
 
-          <div className="mission-container">
+          {/* <div className="mission-container">
             <div className="mission-text-container">
               <span className="mission-heading">.devChamps</span>
               <p className="mission-content">
-                .devChamps is a new, official two to three month project-based
+                .devChamps is a two to three month project-based
                 programming battle featuring a new challenge every season. The
                 competition is designed to be approachable for beginners while
                 also providing a challenge for experienced programmers.
@@ -188,7 +188,7 @@ function Home() {
                 openFn={handleOpenModal}
               />
             </div>
-          </div>
+          </div> */}
         </div>
 
         <div id="join-club"></div>