revine 0.4.0 → 0.5.0

package/dist/setup/tailwind.js

@@ -127,4 +127,25 @@ export default function HomePage() {
 }
   `;
     await fs.writeFile(starterFile, starterFileContent);
+    // Replace the NotFound.tsx content
+    const notFoundFile = path.join(projectDir, "src", "NotFound.tsx");
+    const notFoundContent = `
+   export default function NotFound() {
+     return (
+       <div className="min-h-screen flex items-center justify-center bg-gray-100">
+         <div className="text-center space-y-4">
+           <h1 className="text-6xl font-bold text-gray-900">404</h1>
+           <p className="text-xl text-gray-600">Page Not Found</p>
+           <a
+             href="/"
+             className="mt-6 inline-block bg-indigo-600 text-white font-semibold px-6 py-3 rounded-md shadow hover:bg-indigo-700"
+           >
+             Go Back Home
+           </a>
+         </div>
+       </div>
+     );
+   }
+   `;
+    await fs.writeFile(notFoundFile, notFoundContent);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revine",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A react framework, but better.",
   "license": "ISC",
   "author": "Rachit Bharadwaj",

package/src/setup/tailwind.ts

@@ -138,4 +138,26 @@ export default function HomePage() {
 }
   `;
   await fs.writeFile(starterFile, starterFileContent);
+
+  // Replace the NotFound.tsx content
+  const notFoundFile = path.join(projectDir, "src", "NotFound.tsx");
+  const notFoundContent = `
+   export default function NotFound() {
+     return (
+       <div className="min-h-screen flex items-center justify-center bg-gray-100">
+         <div className="text-center space-y-4">
+           <h1 className="text-6xl font-bold text-gray-900">404</h1>
+           <p className="text-xl text-gray-600">Page Not Found</p>
+           <a
+             href="/"
+             className="mt-6 inline-block bg-indigo-600 text-white font-semibold px-6 py-3 rounded-md shadow hover:bg-indigo-700"
+           >
+             Go Back Home
+           </a>
+         </div>
+       </div>
+     );
+   }
+   `;
+  await fs.writeFile(notFoundFile, notFoundContent);
 }

package/template/.revine/routing/fileBased.tsx

@@ -1,5 +1,6 @@
 import { createBrowserRouter } from "react-router-dom";
 import { lazy, Suspense, ComponentType } from "react";
+import NotFound from "../../src/NotFound";
 
 const pages = import.meta.glob("../../src/pages/**/*.tsx");
 
@@ -18,7 +19,6 @@ const routes = Object.entries(pages).map(([filePath, component]) => {
     cleaned = "";
   }
 
-  // 6. Route path is empty for index => "/"
   const routePath = cleaned === "" ? "/" : `/${cleaned}`;
 
   const Component = lazy(
@@ -35,4 +35,10 @@ const routes = Object.entries(pages).map(([filePath, component]) => {
   };
 });
 
+// fallback route for 404s
+routes.push({
+  path: "*",
+  element: <NotFound />,
+});
+
 export const router = createBrowserRouter(routes);

package/template/package.json

@@ -19,7 +19,6 @@
     "vite": "^5.0.12",
     "@vitejs/plugin-react": "^4.2.1",
     "lodash-es": "^4.17.21",
-    "@types/lodash-es": "^4.17.9",
-    "@tailwindcss/vite": "^4.0.0"
+    "@types/lodash-es": "^4.17.9"
   }
 }

package/template/src/NotFound.tsx

@@ -0,0 +1,13 @@
+export default function NotFound() {
+  return (
+    <div className="notfound-container">
+      <div className="notfound-content">
+        <h1 className="notfound-title">404</h1>
+        <p className="notfound-text">Page Not Found</p>
+        <a href="/" className="notfound-link">
+          Go Back Home
+        </a>
+      </div>
+    </div>
+  );
+}

package/template/src/root.tsx

@@ -1,13 +1,14 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./App";
-import './styles/global.css';
+import { RouterProvider } from "react-router-dom";
+import { router } from "../.revine/routing/fileBased";
+import "./styles/global.css";
 
 const container = document.getElementById("root")!;
 const root = createRoot(container);
 
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />;
   </React.StrictMode>
 );

package/template/src/styles/global.css

@@ -148,3 +148,44 @@ p {
   font-size: 0.875rem;
   color: var(--text-secondary);
 }
+
+/* notfound.css */
+.notfound-container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5; /* Light gray */
+}
+
+.notfound-content {
+  text-align: center;
+  margin: auto;
+}
+
+.notfound-title {
+  font-size: 4rem; /* 64px */
+  font-weight: bold;
+  color: #1a202c; /* Gray-900 */
+}
+
+.notfound-text {
+  font-size: 1.25rem; /* 20px */
+  color: #4a5568; /* Gray-600 */
+}
+
+.notfound-link {
+  margin-top: 1.5rem;
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  font-weight: 600;
+  background-color: #5a67d8; /* Indigo-600 */
+  color: #ffffff;
+  text-decoration: none;
+  border-radius: 0.375rem;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.notfound-link:hover {
+  background-color: #4c51bf; /* Indigo-700 */
+}

package/template/src/App.tsx

@@ -1,6 +0,0 @@
-import { RouterProvider } from "react-router-dom";
-import { router } from "../.revine/routing/fileBased";
-
-export default function App() {
-  return <RouterProvider router={router} />;
-}