chore: migrate from remix v2 + react-router v6 to react-router v7

.github/workflows/pages.yml

@@ -31,24 +31,13 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - name: Install dependencies
-        run: npm install --force
-
-      - run: npm run build
-
-      - name: Start server and mirror it with wget
-        run: |
-          npm run dev &
-          sleep 10 &&
-          cp -r public/ out &&
-          wget --mirror http://localhost:5173 -P out --no-host-directories --page-requisites --adjust-extension &&
-          wget --mirror http://localhost:5173/ad -P out --no-host-directories --page-requisites --adjust-extension &&
-          wget --mirror http://localhost:5173/ics-feed.ics -P out --no-host-directories --page-requisites --adjust-extension
-          echo "phillyjs.com" > out/CNAME
+      - run: pnpm install --force
+      - run: pnpm run build
+      - run: echo "phillyjs.com" > build/client/CNAME
 
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3
         with:
           deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
-          publish_dir: ./out
+          publish_dir: ./build/client
           external_repository: philly-js-club/js-club-website-public

app/components/AdText.tsx

@@ -1,7 +1,3 @@
-// We deploy to static pages, so this must be a client-only component.
-// https://github.com/philly-js-club/philly-js-club-website/issues/61
-"use client";
-
 import { site } from "~/config";
 import { upperFirst } from "~/utils/common";
 import { useMonthAndYear } from "~/utils/dates";

app/components/CalendarSubscriptionLinks.tsx

@@ -1,39 +1,25 @@
-import { useState } from "react";
-
 interface CalendarSubscriptionLinksProps {
 	webcalUrl: string;
 }
 
 export function CalendarSubscriptionLinks({
 	webcalUrl,
 }: CalendarSubscriptionLinksProps) {
-	const [showMore, setShowMore] = useState(false);
-
 	return (
-		<div className="calendar-subscription">
-			<button
-				onClick={() => {
-					setShowMore((s) => !s);
-				}}
-			>
-				📆 Subscribe with your favorite calendar client
-			</button>
-			{showMore && (
-				<>
-					<p>
-						<a href={`https://www.google.com/calendar/render?cid=${webcalUrl}`}>
-							Subscribe with Google Calendar
-						</a>
-					</p>
-					<p>To subscribe, point your calendar client to the following URL:</p>
-					<p>{webcalUrl}</p>
-					<p>
-						⚠️ Be sure to not download and import that file! You'll need to
-						subscribe to the calendar updates in order for your calendar client
-						to continue to fetch new events.
-					</p>
-				</>
-			)}
-		</div>
+		<details className="calendar-subscription">
+			<summary>📆 Subscribe with your favorite calendar client</summary>
+			<p>
+				<a href={`https://www.google.com/calendar/render?cid=${webcalUrl}`}>
+					Subscribe with Google Calendar
+				</a>
+			</p>
+			<p>To subscribe, point your calendar client to the following URL:</p>
+			<p>{webcalUrl}</p>
+			<p>
+				⚠️ Be sure to not download and import that file! You'll need to
+				subscribe to the calendar updates in order for your calendar client to
+				continue to fetch new events.
+			</p>
+		</details>
 	);
 }

app/components/PageGrid.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from "@remix-run/react";
+import { NavLink } from "react-router";
 
 import { site } from "~/config";
 
@@ -16,7 +16,7 @@ export function PageGrid({ left, subtitle, title }: PageGridProps) {
 			<header className="page-grid-header">
 				<h1 className="page-grid-title">{title}</h1>
 				{subtitle && (
-					<NavLink className="page-grid-subtitle" reloadDocument to="/">
+					<NavLink className="page-grid-subtitle" to="/">
 						{site.title}
 						<Arrow
 							className="arrow-back"
@@ -28,29 +28,21 @@ export function PageGrid({ left, subtitle, title }: PageGridProps) {
 			</header>
 			<main className="page-grid-left">{left}</main>
 			<footer className="page-grid-footer">
-				<NavLink className="page-grid-footer-link" reloadDocument to="/about">
+				<NavLink className="page-grid-footer-link" to="/about">
 					About
 				</NavLink>
-				<NavLink
-					className="page-grid-footer-link"
-					reloadDocument
-					to="/code-of-conduct"
-				>
+				<NavLink className="page-grid-footer-link" to="/code-of-conduct">
 					Code of Conduct
 				</NavLink>
 				<span className="page-grid-footer-separator" />
-				<NavLink className="page-grid-footer-link" reloadDocument to="/events">
+				<NavLink className="page-grid-footer-link" to="/events">
 					Events
 				</NavLink>
-				<NavLink
-					className="page-grid-footer-link"
-					reloadDocument
-					to="/sponsors"
-				>
+				<NavLink className="page-grid-footer-link" to="/sponsors">
 					Sponsors
 				</NavLink>
 				<span className="page-grid-footer-separator" />
-				<NavLink className="page-grid-footer-link" reloadDocument to="/join-us">
+				<NavLink className="page-grid-footer-link" to="/join-us">
 					Join Us
 				</NavLink>
 			</footer>

app/root.tsx

@@ -1,12 +1,6 @@
 import "./root.css";
 
-import {
-	Links,
-	Meta,
-	Outlet,
-	Scripts,
-	ScrollRestoration,
-} from "@remix-run/react";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 
 import { site } from "./config";
 

app/routes/_index.tsx

@@ -1,5 +1,5 @@
-import type { MetaFunction } from "@remix-run/react";
-import { useLoaderData } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
+import { useLoaderData } from "react-router";
 
 import { EventDetails } from "~/components/EventDetails";
 import { PageGrid } from "~/components/PageGrid";
@@ -33,7 +33,7 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Index() {
-	const events = useLoaderData<typeof loader>();
+	const events = useLoaderData() as Awaited<ReturnType<typeof loader>>;
 
 	return (
 		<PageGrid

app/routes/about.tsx

@@ -1,4 +1,4 @@
-import { type MetaFunction, useLoaderData } from "@remix-run/react";
+import { type MetaFunction, useLoaderData } from "react-router";
 
 import { PageGrid } from "~/components/PageGrid";
 import { constructSiteTitle } from "~/utils/common";
@@ -14,7 +14,7 @@ export function loader() {
 }
 
 export default function About() {
-	const data = useLoaderData<typeof loader>();
+	const data = useLoaderData() as Awaited<ReturnType<typeof loader>>;
 
 	return (
 		<PageGrid

app/routes/banner.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
 
 import { AdLogo } from "~/components/AdLogo";
 import { AdText } from "~/components/AdText";

app/routes/code-of-conduct.tsx

@@ -1,4 +1,4 @@
-import type { MetaFunction } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
 
 import { PageGrid } from "~/components/PageGrid";
 import { constructSiteTitle } from "~/utils/common";

app/routes/events.tsx

@@ -1,5 +1,5 @@
-import type { MetaFunction } from "@remix-run/react";
-import { useLoaderData } from "@remix-run/react";
+import type { MetaFunction } from "react-router";
+import { useLoaderData } from "react-router";
 
 import { CalendarSubscriptionLinks } from "~/components/CalendarSubscriptionLinks";
 import { EventDetails } from "~/components/EventDetails";
@@ -18,7 +18,7 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Events() {
-	const data = useLoaderData<typeof loader>();
+	const data = useLoaderData() as Awaited<ReturnType<typeof loader>>;
 
 	return (
 		<PageGrid

app/routes/join-us.tsx

@@ -1,4 +1,4 @@
-import { type MetaFunction, useLoaderData } from "@remix-run/react";
+import { type MetaFunction, useLoaderData } from "react-router";
 
 import { Icons } from "~/components/Icons";
 import { PageGrid } from "~/components/PageGrid";
@@ -15,7 +15,7 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Socials() {
-	const platforms = useLoaderData<typeof loader>();
+	const platforms = useLoaderData() as Awaited<ReturnType<typeof loader>>;
 
 	return (
 		<PageGrid

app/routes/sponsors.tsx

@@ -1,4 +1,4 @@
-import { type MetaFunction, useLoaderData } from "@remix-run/react";
+import { type MetaFunction, useLoaderData } from "react-router";
 
 import { Icons } from "~/components/Icons";
 import { PageGrid } from "~/components/PageGrid";
@@ -15,7 +15,7 @@ export const meta: MetaFunction = () => {
 };
 
 export default function Sponsors() {
-	const sponsors = useLoaderData<typeof loader>();
+	const sponsors = useLoaderData() as Awaited<ReturnType<typeof loader>>;
 
 	return (
 		<PageGrid

app/shared.css

@@ -132,15 +132,14 @@ Let us know if you think you've found one we'd like. 😏
 }
 
 .page-grid-footer {
-	align-content: flex-end;
 	align-items: baseline;
 	display: flex;
 	flex-wrap: wrap;
 	font-size: var(--font-size-medium);
 	font-weight: var(--font-weight-large);
 	grid-area: footer;
 	height: 100%;
-	justify-content: flex-start;
+	place-content: flex-end flex-start;
 }
 
 .page-grid-footer-separator {
@@ -236,12 +235,13 @@ Let us know if you think you've found one we'd like. 😏
 	font-size: var(--font-size-small);
 }
 
-.calendar-subscription button {
+.calendar-subscription summary {
 	background: var(--color-background);
 	border: 2px solid var(--color-foreground);
 	border-radius: 1em;
 	color: var(--color-foreground);
 	cursor: pointer;
+	display: inline-block;
 	font-size: var(--font-size-smaller);
 	margin: 1em 0;
 	padding: 0.5em;
@@ -258,7 +258,7 @@ Let us know if you think you've found one we'd like. 😏
 }
 
 @media screen and (width >= 1000px) {
-	.calendar-subscription button {
+	.calendar-subscription summary {
 		margin-top: 0;
 	}
 }

app/utils/dates.ts

@@ -1,4 +1,4 @@
-import { useSearchParams } from "@remix-run/react";
+import { useSearchParams } from "react-router";
 
 export function getMonthAndYear(params: URLSearchParams) {
 	const month = params.get("month")?.toLowerCase();

package.json

@@ -6,8 +6,8 @@
 	"sideEffects": false,
 	"type": "module",
 	"scripts": {
-		"build": "remix vite:build",
-		"dev": "remix vite:dev",
+		"build": "react-router build",
+		"dev": "react-router dev",
 		"format": "prettier \"**/*\" --ignore-unknown",
 		"format:write": "pnpm format --write",
 		"lint": "eslint . --max-warnings 0 --report-unused-disable-directives",
@@ -31,8 +31,7 @@
 	"dependencies": {
 		"@axe-core/playwright": "^4.9.1",
 		"@playwright/test": "^1.45.1",
-		"@remix-run/node": "^2.10.2",
-		"@remix-run/react": "^2.10.2",
+		"@react-router/node": "0.0.0-nightly-90ebbf91d-20240718",
 		"clsx": "^2.1.1",
 		"eslint-plugin-react": "^7.34.3",
 		"eslint-plugin-react-hooks": "^4.6.2",
@@ -41,12 +40,13 @@
 		"isbot": "^5.1.12",
 		"playwright": "^1.45.1",
 		"react": "^18.3.1",
-		"react-dom": "^18.3.1"
+		"react-dom": "^18.3.1",
+		"react-router": "0.0.0-nightly-90ebbf91d-20240718"
 	},
 	"devDependencies": {
-		"@remix-run/dev": "^2.10.2",
+		"@react-router/dev": "0.0.0-nightly-90ebbf91d-20240718",
+		"@react-router/serve": "0.0.0-nightly-90ebbf91d-20240718",
 		"@remix-run/eslint-config": "^2.10.2",
-		"@remix-run/serve": "^2.10.2",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
 		"@typescript-eslint/eslint-plugin": "7.16.0",
@@ -78,9 +78,10 @@
 		"typescript": "^5.5.3",
 		"vite": "^5.3.3",
 		"vite-tsconfig-paths": "^4.3.2",
+		"wrangler": "^3.66.0",
 		"yaml-eslint-parser": "^1.2.3"
 	},
 	"engines": {
-		"node": ">=14"
+		"node": ">=20"
 	}
 }