From 4ddd5b2e227af6f75971f139550e36e19626c2c3 Mon Sep 17 00:00:00 2001
From: jimmy-guzman <hi@jimmyguzman.com>
Date: Tue, 29 Oct 2024 18:24:16 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20show=20not=20found=20when?=
 =?UTF-8?q?=20deployed?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 e2e/app.spec.ts         | 10 ++++++++++
 src/pages/error.tsx     |  4 ++--
 src/pages/not-found.tsx |  4 ++--
 src/routes/__root.tsx   |  4 +++-
 vercel.json             |  8 ++++++++
 5 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 vercel.json

diff --git a/e2e/app.spec.ts b/e2e/app.spec.ts
index 2dcfd03..93a7f82 100644
--- a/e2e/app.spec.ts
+++ b/e2e/app.spec.ts
@@ -6,6 +6,16 @@ test("has title", async ({ page }) => {
   await expect(page).toHaveTitle(/React Starter/);
 });
 
+test("not found", async ({ page }) => {
+  await page.goto("/lost");
+
+  await expect(page).toHaveTitle(/React Starter/);
+
+  await expect(
+    page.getByRole("heading", { name: "Error", level: 1 }),
+  ).toBeInViewport();
+});
+
 test.describe("external links", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto("/");
diff --git a/src/pages/error.tsx b/src/pages/error.tsx
index 184df14..0b1458b 100644
--- a/src/pages/error.tsx
+++ b/src/pages/error.tsx
@@ -6,10 +6,10 @@ export const Error = ({ error }: ErrorComponentProps) => {
       <div className="dsy-hero">
         <div className="dsy-hero-content text-center">
           <div className="max-w-md">
-            <h1 className="mb-5 text-5xl font-bold opacity-10 lg:text-7xl xl:text-9xl">
+            <h1 className="mb-5 text-5xl font-bold lg:text-7xl xl:text-9xl">
               Error
             </h1>
-            <p className="mb-5">{error.message}</p>
+            <p className="mb-5 text-error">{error.message}</p>
             <Link className="dsy-btn dsy-btn-outline" to="/">
               Go back
             </Link>
diff --git a/src/pages/not-found.tsx b/src/pages/not-found.tsx
index a5d34ff..faf4b4d 100644
--- a/src/pages/not-found.tsx
+++ b/src/pages/not-found.tsx
@@ -6,10 +6,10 @@ export const NotFound = () => {
       <div className="dsy-hero">
         <div className="dsy-hero-content text-center">
           <div className="max-w-md">
-            <h1 className="mb-5 text-5xl font-bold opacity-10 lg:text-7xl xl:text-9xl">
+            <h1 className="mb-5 text-5xl font-bold lg:text-7xl xl:text-9xl">
               Error
             </h1>
-            <p className="mb-5">Not Found</p>
+            <p className="mb-5 text-error">Not Found</p>
             <Link className="dsy-btn dsy-btn-outline" to="/">
               Go back
             </Link>
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 301aed5..e371796 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -24,4 +24,6 @@ const Root = () => {
   );
 };
 
-export const Route = createRootRouteWithContext()({ component: Root });
+export const Route = createRootRouteWithContext()({
+  component: Root,
+});
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..408821b
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,8 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/"
+    }
+  ]
+}