create-aziz-app 2.0.5 → 2.0.7

package/bin/create-aziz-app.js

@@ -312,6 +312,9 @@ function Footer() {
     
     // Update all pages
     updatePagesForBootstrap(targetDir);
+    
+    // Update 404 page
+    update404ForBootstrap(targetDir);
 }
 
 // Update components for Tailwind
@@ -380,6 +383,9 @@ function Footer() {
     
     // Update all pages
     updatePagesForTailwind(targetDir);
+    
+    // Update 404 page
+    update404ForTailwind(targetDir);
 }
 
 // Update all pages for Bootstrap
@@ -688,6 +694,79 @@ function TestPage() {
 `;
 }
 
+// Update 404 page for Bootstrap
+function update404ForBootstrap(targetDir) {
+    const routerPath = path.join(targetDir, 'modules', 'router.js');
+    if (!fs.existsSync(routerPath)) return;
+    
+    let content = fs.readFileSync(routerPath, 'utf8');
+    
+    const old404 = `// 404 page — shown when no route matches
+function NotFoundPage() {
+    return (
+        <div class="not-found">
+            <h1>404</h1>
+            <p>Page not found.</p>
+            <button class="btn btn-primary" onClick={() => navigate("home")}>Go Home</button>
+        </div>
+    );
+}`;
+    
+    const new404 = `// 404 page — shown when no route matches
+function NotFoundPage() {
+    return (
+        <div class="container text-center py-5">
+            <h1 class="display-1 fw-bold text-primary mb-4">404</h1>
+            <p class="lead mb-4">Oops! The page you're looking for doesn't exist.</p>
+            <button class="btn btn-primary btn-lg" onClick={() => navigate("home")}>
+                <i class="bi bi-house-door me-2"></i>Go Home
+            </button>
+        </div>
+    );
+}`;
+    
+    content = content.replace(old404, new404);
+    fs.writeFileSync(routerPath, content);
+}
+
+// Update 404 page for Tailwind
+function update404ForTailwind(targetDir) {
+    const routerPath = path.join(targetDir, 'modules', 'router.js');
+    if (!fs.existsSync(routerPath)) return;
+    
+    let content = fs.readFileSync(routerPath, 'utf8');
+    
+    const old404 = `// 404 page — shown when no route matches
+function NotFoundPage() {
+    return (
+        <div class="not-found">
+            <h1>404</h1>
+            <p>Page not found.</p>
+            <button class="btn btn-primary" onClick={() => navigate("home")}>Go Home</button>
+        </div>
+    );
+}`;
+    
+    const new404 = `// 404 page — shown when no route matches
+function NotFoundPage() {
+    return (
+        <div class="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+            <h1 class="text-9xl font-bold text-primary mb-4">404</h1>
+            <p class="text-2xl text-gray-600 mb-8">Oops! The page you're looking for doesn't exist.</p>
+            <button 
+                class="px-8 py-3 bg-primary text-dark font-bold rounded-lg hover:opacity-80 transition transform hover:scale-105"
+                onClick={() => navigate("home")}
+            >
+                ← Go Home
+            </button>
+        </div>
+    );
+}`;
+    
+    content = content.replace(old404, new404);
+    fs.writeFileSync(routerPath, content);
+}
+
 // Run main function
 main().catch(err => {
     console.error('❌ Error:', err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "A React-like framework with state management, routing, and API routes - Create apps with auto-import, live reload, and Next.js-like features",
   "keywords": [
     "react",

package/template/.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["class\\s*=\\s*['\"`]([^'\"`]*)['\"`]", "([^\\s]+)"]
+  ],
+  "tailwindCSS.includeLanguages": {
+    "javascript": "javascript",
+    "javascriptreact": "javascript"
+  },
+  "files.associations": {
+    "*.jsx": "javascriptreact"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  }
+}

package/template/modules/router.js

@@ -150,6 +150,13 @@ function renderShell() {
     footer.appendChild(Footer());
 }
 
+// Re-render shell when route changes (for navbar active state)
+function updateShell() {
+    const navbar = document.getElementById("navbar");
+    navbar.innerHTML = "";
+    navbar.appendChild(Navbar());
+}
+
 // 404 page — shown when no route matches
 function NotFoundPage() {
     return (
@@ -170,8 +177,11 @@ function startApp() {
     renderShell();
     renderPage();
 
-    // Re-render the page whenever the hash changes (back/forward navigation)
-    window.addEventListener("hashchange", renderPage);
+    // Re-render the page and navbar whenever the hash changes (back/forward navigation)
+    window.addEventListener("hashchange", () => {
+        updateShell(); // Update navbar active state
+        renderPage();
+    });
 }
 
 // Export to global scope

package/template/pages/Home.jsx

@@ -1,6 +1,5 @@
 /** @jsx h */
 
-// Register this page at route "home" → "#/"
 registerPage("home", HomePage);
 
 function HomePage() {
@@ -25,14 +24,16 @@ function HomePage() {
                 <h2>File-based Routing</h2>
                 <p>
                     Each file in <strong>pages/</strong> is a route — just like Next.js.
-                    Add a new file, register it in app.js, and it's a new page.
+                    Add a new file, run the build script, and it's a new page.
                 </p>
-                <button class="btn btn-primary" onClick={() => navigate("test")}>
-                    Go to Test Page →
-                </button>
-                <button class="btn btn-primary" onClick={() => navigate("about")}>
-                    Go to About →
-                </button>
+                <div style={{ display: 'flex', gap: '12px' }}>
+                    <button class="btn btn-primary" onClick={() => navigate("test")}>
+                        Go to Test Page →
+                    </button>
+                    <button class="btn btn-primary" onClick={() => navigate("about")}>
+                        Go to About →
+                    </button>
+                </div>
             </div>
         </div>
     );

package/template/pages/test.jsx

@@ -1,6 +1,5 @@
 /** @jsx h */
 
-// Register this page at route "test" → "#/test"
 registerPage("test", TestPage);
 
 function TestPage() {
@@ -19,7 +18,7 @@ function TestPage() {
 
             <div class="card">
                 <h2>Counter Example</h2>
-                <p>This demonstrates the new state management system.</p>
+                <p>This demonstrates the state management system.</p>
                 
                 <div class="count-display">{count}</div>
                 <div class="counter-actions">
@@ -37,15 +36,6 @@ function TestPage() {
                 <p>Try the form with state management.</p>
                 
                 <form onSubmit={handleSubmit}>
-                                        <div>
-                        <label>Email:</label>
-                        <input 
-                            type="email" 
-                            value={email}
-                            onInput={(e) => setEmail(e.target.value)}
-                            placeholder="Enter your email"
-                        />
-                    </div>
                     <div>
                         <label>Name:</label>
                         <input 
@@ -56,6 +46,15 @@ function TestPage() {
                         />
                     </div>
                     
+                    <div>
+                        <label>Email:</label>
+                        <input 
+                            type="email" 
+                            value={email}
+                            onInput={(e) => setEmail(e.target.value)}
+                            placeholder="Enter your email"
+                        />
+                    </div>
                     
                     <button type="submit" class="btn btn-primary">
                         Submit Form

package/template/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,jsx}",
+    "./components/**/*.{js,jsx}",
+    "./app.html",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#61dafb',
+        dark: '#282c34',
+      },
+    },
+  },
+  plugins: [],
+}