Use Proxies to Prevent False Blocking

.github/workflows/Check-Lint-Format.yml

@@ -26,7 +26,6 @@ jobs:
       - name: Setup PNPM
         uses: pnpm/action-setup@v6
         with:
-          version: latest
           run_install: false
 
       - name: Install dependencies

.github/workflows/deploy.yml

@@ -36,7 +36,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v6
         with:
-          version: latest
+          run-install: false
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

AGENTS.md

@@ -38,4 +38,4 @@ This file provides short, actionable instructions for AI coding agents working i
 
 ## About the project
 
-Go look in readme.md for more about the project.
+Go look in readme.md for more about the project. Also please prefer pnpm.

app/FramesList/FramesList.tsx

@@ -43,9 +43,9 @@ export function FramesList({
 		<section className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
 			<div className="mb-6 flex flex-col gap-3 border-b border-gray-200 pb-5 dark:border-gray-800 sm:flex-row sm:items-end sm:justify-between">
 				<div>
-					<p className="text-sm font-medium text-blue-600 dark:text-blue-400">Source library</p>
+					<p className="text-sm font-medium text-blue-600 dark:text-blue-400">Apps library</p>
 					<h2 className="mt-1 text-2xl font-semibold tracking-tight text-gray-950 dark:text-white">
-						Frames ready to explore
+						Apps ready to use
 					</h2>
 				</div>
 				<p className="text-sm text-gray-600 dark:text-gray-400">{filtered.length} results</p>

app/Header.tsx

@@ -24,12 +24,12 @@ export function Header({
 				<div className="flex items-center gap-3">
 					<Link to="/" className="text-lg font-semibold text-gray-900 dark:text-white">
 						<span className="inline-block mr-2 text-blue-600">◧</span>
-						Source Frames
+						Skibidi Math
 					</Link>
 				</div>
 
 				<div className="flex flex-1 items-center">
-					<label className="sr-only">Search sources</label>
+					<label className="sr-only">Search Apps</label>
 					<input
 						value={query}
 						onChange={(e) => setQuery(e.target.value)}

app/root.tsx

@@ -53,16 +53,18 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
 	if (isRouteErrorResponse(error)) {
 		message = error.status === 404 ? "404" : "Error";
 		details =
-			error.status === 404 ? "The requested page could not be found." : error.statusText || details;
+			error.status === 404
+				? "The requested page could not be found. This can be because the website is broken, or because of issues with github pages or cloudflare pages, you should try another mirror to test."
+				: error.statusText || details;
 	} else if (import.meta.env.DEV && error && error instanceof Error) {
 		details = error.message;
 		stack = error.stack;
 	}
 
 	return (
 		<main className="pt-16 p-4 container mx-auto">
-			<h1>{message}</h1>
-			<p>{details}</p>
+			<h1 className="text-xl font-bold">{message}</h1>
+			<p className="text-lg">{details}</p>
 			{stack && (
 				<pre className="w-full p-4 overflow-x-auto">
 					<code>{stack}</code>

app/routes.ts

@@ -1,3 +1,6 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default [
+	index("./routes/home.tsx"),
+	route("settings", "./routes/settings.tsx"),
+] satisfies RouteConfig;

app/routes/home.tsx

@@ -68,7 +68,7 @@ export default function Home() {
 
 			<main className="min-h-screen bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-white pt-6">
 				<div className="mx-auto w-full max-w-6xl px-4 pt-6 sm:px-6 lg:px-8">
-					<h1 className="sr-only">Source Frames</h1>
+					<h1 className="sr-only">Skibidi Math</h1>
 				</div>
 
 				<FramesList

package.json

@@ -30,5 +30,6 @@
 		"tailwindcss": "^4.3.0",
 		"typescript": "^6.0.3",
 		"vite": "^8.0.16"
-	}
+	},
+	"packageManager": "pnpm@11.5.2"
 }

vite.config.ts

@@ -5,6 +5,17 @@ import { defineConfig } from "vite";
 export default defineConfig({
 	base: "./", // IMPORTANT for Github Pages because it looks at the base of your pages (e.g., https://username.github.io/) to find stuff from index.html.
 	plugins: [tailwindcss(), reactRouter()],
+	optimizeDeps: {
+		// Prevent Vite's dep optimizer from treating our app route modules as external deps.
+		// Some environments (Codespaces/remote) can cause the optimizer to rewrite
+		// imports like `app/routes/home.tsx` into node_modules/.vite/deps which 404s.
+		exclude: [
+			"app/routes/home.tsx",
+			"./app/routes/home.tsx",
+			"app/routes/settings.tsx",
+			"./app/routes/settings.tsx",
+		],
+	},
 	resolve: {
 		tsconfigPaths: true,
 	},