revine 0.4.1 → 0.6.0

package/dist/commands/createProject.js

@@ -3,7 +3,7 @@ import { fileURLToPath } from "url";
 import { updatePackageJson } from "../config/package.js";
 import { updateReadme } from "../config/readme.js";
 import { installDependencies } from "../setup/dependencies.js";
-import { askForTailwindSetup } from "../prompts/tailwind.js";
+import { askForTailwindSetup, initiateProject } from "../prompts/index.js";
 import { setupTailwind } from "../setup/tailwind.js";
 import { copyTemplate } from "../utils/file.js";
 import { logError, logInfo } from "../utils/logger.js";
@@ -41,6 +41,8 @@ export async function createProject(projectName, options) {
         if (!isCurrentDir)
             console.log(`  cd ${projectName}`);
         console.log("  npm run dev\n");
+        // Prompt to initiate project
+        await initiateProject(projectDir);
     }
     catch (error) {
         logError("Error during project creation:", error);

package/dist/prompts/index.js

@@ -0,0 +1,2 @@
+export { default as askForTailwindSetup } from "./tailwind.js";
+export { default as initiateProject } from "./project.js";

package/dist/prompts/project.js

@@ -0,0 +1,27 @@
+import inquirer from "inquirer";
+import { execSync } from "child_process";
+import { logInfo } from "../utils/logger.js";
+/**
+ * Ask the user if they want to run the project after setup is complete.
+ * If the user confirms, it will run `npm run dev` or the equivalent command.
+ * @param projectDir - The directory where the project was set up.
+ */
+export default async function initiateProject(projectDir) {
+    const { runProject } = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "runProject",
+            message: "Do you want to run the project now?",
+            default: true,
+        },
+    ]);
+    if (runProject) {
+        logInfo("Running your Revine project on dev server...");
+        try {
+            execSync("npm run dev", { cwd: projectDir, stdio: "inherit" });
+        }
+        catch (error) {
+            logInfo("Failed to start the project. You can manually run `npm run dev`.");
+        }
+    }
+}

package/dist/prompts/tailwind.js

@@ -1,5 +1,5 @@
 import inquirer from "inquirer";
-export async function askForTailwindSetup() {
+export default async function askForTailwindSetup() {
     const { useTailwind } = await inquirer.prompt([
         {
             type: "confirm",

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.1",
+  "version": "0.6.0",
   "description": "A react framework, but better.",
   "license": "ISC",
   "author": "Rachit Bharadwaj",

package/src/commands/createProject.ts

@@ -3,7 +3,7 @@ import { fileURLToPath } from "url";
 import { updatePackageJson } from "../config/package.js";
 import { updateReadme } from "../config/readme.js";
 import { installDependencies } from "../setup/dependencies.js";
-import { askForTailwindSetup } from "../prompts/tailwind.js";
+import { askForTailwindSetup, initiateProject } from "../prompts/index.js";
 import { setupTailwind } from "../setup/tailwind.js";
 import { copyTemplate } from "../utils/file.js";
 import { logError, logInfo } from "../utils/logger.js";
@@ -52,6 +52,9 @@ export async function createProject(
     logInfo("\nStart developing with:");
     if (!isCurrentDir) console.log(`  cd ${projectName}`);
     console.log("  npm run dev\n");
+
+    // Prompt to initiate project
+    await initiateProject(projectDir);
   } catch (error) {
     logError("Error during project creation:", error);
     process.exit(1);

package/src/prompts/index.ts

@@ -0,0 +1,2 @@
+export { default as askForTailwindSetup } from "./tailwind.js";
+export { default as initiateProject } from "./project.js";

package/src/prompts/project.ts

@@ -0,0 +1,31 @@
+import inquirer from "inquirer";
+import { execSync } from "child_process";
+import { logInfo } from "../utils/logger.js";
+
+/**
+ * Ask the user if they want to run the project after setup is complete.
+ * If the user confirms, it will run `npm run dev` or the equivalent command.
+ * @param projectDir - The directory where the project was set up.
+ */
+export default async function initiateProject(projectDir: string) {
+  const { runProject } = await inquirer.prompt([
+    {
+      type: "confirm",
+      name: "runProject",
+      message: "Do you want to run the project now?",
+      default: true,
+    },
+  ]);
+
+  if (runProject) {
+    logInfo("Running your Revine project on dev server...");
+
+    try {
+      execSync("npm run dev", { cwd: projectDir, stdio: "inherit" });
+    } catch (error) {
+      logInfo(
+        "Failed to start the project. You can manually run `npm run dev`."
+      );
+    }
+  }
+}

package/src/prompts/tailwind.ts

@@ -1,6 +1,6 @@
 import inquirer from "inquirer";
 
-export async function askForTailwindSetup(): Promise<boolean> {
+export default async function askForTailwindSetup(): Promise<boolean> {
   const { useTailwind } = await inquirer.prompt([
     {
       type: "confirm",

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/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 */
+}