npm - mwalajs - Versions diffs - 1.0.7 → 1.0.9 - Mend

mwalajs 1.0.7 → 1.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/.env.backup-2025-12-04T08-55-09-593Z +5 -0
package/app.mjs +4 -0
package/bin/mwala copy.mjs +212 -0
package/bin/mwala.mjs +244 -76
package/config/createdatabase copy.mjs +362 -0
package/config/createdatabase.mjs +0 -158
package/package.json +1 -1
package/public/images/hekima-mwala.jpg +0 -0
package/public/images/hekima-mwala2.jpg +0 -0
package/public/images/mwala3.jpg +0 -0
package/public/images/mwalajs.jpg +0 -0
package/public/images/mwalajs1.jpg +0 -0
package/utils/dbUtils.mjs +150 -0
package/views/about.ejs +271 -136
package/views/index.ejs +325 -428
package/views/mwalajs-framework-documentation.ejs +778 -0
package/views/partials/footer.ejs +102 -0
package/views/partials/header.ejs +160 -0
package/views/steps copy.ejs +243 -0
package/views/steps.ejs +208 -482
package/views/welcome.ejs +242 -184

package/views/steps.ejs CHANGED Viewed

@@ -1,514 +1,240 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MwalaJS Documentation</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            line-height: 1.6;
-            margin: 20px;
-            padding: 20px;
-        }
-        h1, h2, h3 {
-            color: #333;
-        }
-        pre {
-            background: #f4f4f4;
-            padding: 10px;
-            border-left: 4px solid #333;
-        }
-        .section {
-            margin-bottom: 40px;
-        }
-    </style>
-</head>
-<body>
-  <!-- Navbar -->
-  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="/">MwalaJS</a>
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse" id="navbarNav">
-        <ul class="navbar-nav">
-          <li class="nav-item">
-            <a class="nav-link active" href="#overview">Overview</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#installation">Installation</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#commands">Commands</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#structure">Project Structure</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#example">Example Application</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#conclusion">Conclusion</a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-    <h1>MwalaJS - Complete Documentation</h1>
-    <p>Welcome to MwalaJS! This guide will help you install, configure, and use MwalaJS efficiently.</p>
-    <div class="section">
-        <h2>1. Installation</h2>
-        <p>You can install MwalaJS in multiple ways:</p>
-        <h3>Using GitHub Repository</h3>
-        <p>Clone the repository from GitHub:</p>
-        <pre>git clone https://github.com/mwala400/mwalajs.git</pre>
-      <br>  <a class="btn" href="https://github.com/mwala400/mwalajs"  target="_blank" download> from github https://github.com/mwala400/mwalajs v1.0.0</a>
-        <h3>Using a ZIP, EXE, or RAR File</h3>
-        <p>Download and extract the files from the available compressed format:</p>
-        <ul>
-            <li>ZIP: Extract using <code>WinRAR</code> or <code>7-Zip</code>.</li>
-            <li>RAR: Extract using <code>WinRAR</code>.</li>
-            <li>EXE: Run the installer and follow the instructions.</li>
-        </ul>
-        <br> <h2 class="section-title">1. VERSION RELEASE</h2>
-        <p>Click below to download the installer For Mwalajs framework:</p>
-        <br><a class="btn" href="https://mwalajs.biasharabora.com/files/mwalaJS_installer.exe"  target="_blank" download>Download MwalaJS COMMAND SHELL (CLS) download .exe file here  </a>
-       <br> <p>Click below to download zip file mwalajs framework:</p>
-       <br> <a class="btn" href="https://mwalajs.biasharabora.com/files/mwalajsm.zip"  target="_blank" download>Download MwalaJS   mwalajs.zip v1.0.0</a>
-       <br> <p>Click below to download rar file mwalajs framework :</p>
-      <br>  <a class="btn" href="https://mwalajs.biasharabora.com/files/mwalajsm.rar"  target="_blank" download>Download MwalaJS   mwalajs.rar v1.0.0</a>
-<br>
-    </div>
-    <div class="section">
-        <h2>2. Setting Up MwalaJS</h2>
-        <h3>Initialize MwalaJS</h3>
-        <pre>mwala init</pre>
-        <h3>Creating a New Project</h3>
-        <pre>mwala create-project</pre>
-    </div>
-    <div class="section">
-        <h2>3. Running the Application</h2>
-        <pre>mwala serve</pre>
-    </div>
-    <div class="section">
-        <h2>4. Database Operations</h2>
-        <h3>Creating a Database</h3>
-        <pre>mwala create-db</pre>
-        <h3>Creating a Table</h3>
-        <pre>mwala create-table &lt;table_name&gt;</pre>
-        <h3>Dropping a Table</h3>
-        <pre>mwala drop-table &lt;table_name&gt;</pre>
-    </div>
-    <div class="section">
-        <h2>5. Code Generation</h2>
-        <pre>
-            mwala generate model &lt;name&gt;
-            mwala generate controller &lt;name&gt;
-            mwala generate route &lt;name&gt;
-            mwala generate view &lt;name&gt;
-            mwala generate midware &lt;name&gt;
-        </pre>
-    </div>
-    <div class="section">
-        <h2>6. Additional Information</h2>
-        <p>For more details, visit: <a href="https://github.com/mwala400/mwalajs" target="_blank">GitHub Repository</a></p>
-    </div>
-</body>
-</html>
+<!-- include partials/header -->
+ <%- include('partials/header') %>
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="MwalaJS Framework Documentation - A lightweight Node.js framework for scalable web applications with MVC structure, built-in features, and easy database management.">
-  <meta name="keywords" content="MwalaJS, Node.js, MVC framework, web development, database management, routing, middleware, template engine, Node.js framework documentation">
+  <meta name="description" content="MwalaJS Framework Documentation - Lightweight Node.js MVC framework with CLI tools, code generation, database migrations, and EJS templating.">
+  <meta name="keywords" content="MwalaJS, Node.js, MVC framework, Express.js wrapper, CLI, code generation, database migrations, EJS views">
   <meta name="author" content="Hekima Ambalile Mwala">
-  <meta property="og:title" content="MwalaJS Framework Documentation">
-  <meta property="og:description" content="Learn how to use the MwalaJS framework to build scalable web applications with MVC architecture. Explore installation, commands, project structure, and more.">
+  <meta property="og:title" content="MwalaJS Framework - Full Documentation">
+  <meta property="og:description" content="Complete guide to MwalaJS: installation, commands, project structure, code examples, and more.">
   <meta property="og:url" content="https://mwalajs.biasharabora.com">
   <meta property="og:image" content="https://mwalajs.biasharabora.com/images/mwala-logo.png">
   <title>MwalaJS Framework Documentation</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+  <!-- Bootstrap 5 for responsive, modern design -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <!-- Font Awesome for icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   <style>
-    body {
-      font-family: Arial, sans-serif;
-    }
-    .section-title {
-      margin-top: 40px;
-      font-size: 1.5rem;
-    }
-    .code-block {
-      background-color: #f8f9fa;
-      padding: 10px;
-      border-radius: 5px;
-      border: 1px solid #ddd;
-      font-family: 'Courier New', Courier, monospace;
+    :root {
+      --primary: #0d6efd;
+      --dark: #212529;
+      --light: #f8f9fa;
+      --gradient: linear-gradient(135deg, #0d6efd, #6610f2);
     }
+    body { font-family: 'Segoe UI', sans-serif; background: var(--light); line-height: 1.6; }
+    h1, h2, h3 { color: var(--primary); }
+    .navbar { background: var(--gradient) !important; }
+    .nav-link { color: white !important; }
+    .nav-link:hover { color: #ffc107 !important; }
+    pre, code { background: #1e1e1e; color: #f8f8f8; border-radius: 8px; }
+    .section-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 6px 15px rgba(0,0,0,0.08); margin-bottom: 2rem; }
+    footer { background: var(--gradient); color: white; padding: 2rem 0; text-align: center; }
+    .btn-primary { background: var(--gradient); border: none; }
+    .structure-tree { font-family: monospace; background: #f1f1f1; padding: 1.5rem; border-radius: 8px; }
+    @media (max-width: 768px) { pre { font-size: 0.85rem; } }
   </style>
 </head>
 <body>
+  <!-- Navigation -->
+  <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
+    <div class="container">
+      <a class="navbar-brand" href="/"><i class="fas fa-code me-2"></i>MwalaJS</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+        <ul class="navbar-nav ms-auto">
+          <li class="nav-item"><a class="nav-link" href="#overview"><i class="fas fa-info-circle"></i> Overview</a></li>
+          <li class="nav-item"><a class="nav-link" href="#installation"><i class="fas fa-download"></i> Installation</a></li>
+          <li class="nav-item"><a class="nav-link" href="#commands"><i class="fas fa-terminal"></i> Commands</a></li>
+          <li class="nav-item"><a class="nav-link" href="#structure"><i class="fas fa-folder-tree"></i> Structure</a></li>
+          <li class="nav-item"><a class="nav-link" href="#examples"><i class="fas fa-code"></i> Examples</a></li>
+          <li class="nav-item"><a class="nav-link" href="#downloads"><i class="fas fa-cloud-download-alt"></i> Downloads</a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
-  <div class="container">
-    <header class="text-center my-5">
-      <h1>MwalaJS Framework Documentation</h1>
-      <p class="lead">A lightweight, easy-to-use Node.js framework to create scalable web applications with MVC architecture and powerful built-in features.</p>
-      <p>GitHub Repository: <a href="https://github.com/mwala400/mwalajs" target="_blank">https://github.com/mwala400/mwalajs</a></p>
-    </header>
-    <!-- Overview Section -->
-    <section id="overview">
-      <h2 class="section-title">1. Overview</h2>
-      <p>MwalaJS is a lightweight, easy-to-use Node.js framework designed to help you create scalable and organized MVC-based web applications. It comes with built-in features for handling routing, models, views, middleware, and database operations.</p>
-      <a href="files/documentation.pdf" download="documentation.pdf" class="text">
-        Download Documentation
-    </a>
-    <section id="release">
-       <br> <h2 class="section-title">1. VERSION RELEASE</h2>
-        <p>Click below to download the installer For Mwalajs framework:</p>
-        <br><a class="btn" href="https://mwalajs.biasharabora.com/files/mwalaJS_installer.exe" download>Download MwalaJS COMMAND SHELL (CLS) download .exe file here  </a>
-       <br> <p>Click below to download zip file mwalajs framework:</p>
-       <br> <a class="btn" href="https://mwalajs.biasharabora.com/files/mwalajsm.zip" download>Download MwalaJS   mwalajs.zip v1.0.0</a>
-       <br> <p>Click below to download rar file mwalajs framework :</p>
-      <br>  <a class="btn" href="https://mwalajs.biasharabora.com/files/mwalajsm.rar" download>Download MwalaJS   mwalajs.rar v1.0.0</a>
-      <pre>git clone https://github.com/mwala400/mwalajs.git</pre>
-      <br>  <a class="btn" href="https://github.com/mwala400/mwalajs" target="_blank" download>Clone from github https://github.com/mwala400/mwalajs v1.0.0</a>
-  <br>
-<br>
-</section>
+  <div class="container my-5">
+    <header class="text-center mb-5">
+      <h1 class="display-4">MwalaJS Framework Documentation</h1>
+      <p class="lead">Lightweight Node.js MVC framework built on Express.js with powerful CLI tools, code scaffolding, database migrations, and EJS templating.</p>
+      <p>Latest Version: 1.0.5 | <a href="https://github.com/mwala400/mwalajs" target="_blank">GitHub Repository</a></p>
+    </header>
-<section>
-      <h3>Key Features:</h3>
-      <ul>
-        <li><strong>MVC Architecture</strong>: Automatically generates models, controllers, routes, and views.</li>
-        <li><strong>Database Management</strong>: Includes commands to create and drop tables, run migrations, and manage the database.</li>
-        <li><strong>Middleware Support</strong>: Add custom middleware to handle requests.</li>
-        <li><strong>EJS Template Engine</strong>: Integrated for view rendering.</li>
-        <li><strong>Static File Support</strong>: Easily serve static assets like CSS, JavaScript, and images.</li>
+    <!-- Overview -->
+    <section id="overview" class="section-card">
+      <h2><i class="fas fa-eye me-2"></i>Overview</h2>
+      <p>MwalaJS is a modern, lightweight MVC framework for Node.js that simplifies building scalable web applications. It wraps Express.js with built-in MVC structure, CLI scaffolding, multi-database support (MySQL, PostgreSQL, SQLite, MongoDB), migrations, middleware, and EJS views.</p>
+      <h3>Key Features</h3>
+      <ul class="list-group">
+        <li class="list-group-item"><i class="fas fa-check text-success"></i> MVC Architecture with automatic scaffolding</li>
+        <li class="list-group-item"><i class="fas fa-check text-success"></i> Powerful CLI for project creation, code generation, and DB management</li>
+        <li class="list-group-item"><i class="fas fa-check text-success"></i> Built-in middleware (helmet, cors, session, compression)</li>
+        <li class="list-group-item"><i class="fas fa-check text-success"></i> EJS templating engine integration</li>
+        <li class="list-group-item"><i class="fas fa-check text-success"></i> Database migrations and multi-DB support</li>
+        <li class="list-group-item"><i class="fas fa-check text-success"></i> ES Modules (.mjs) and CommonJS (.js) compatibility</li>
       </ul>
     </section>
+    <!-- Installation -->
+    <section id="installation" class="section-card">
+      <h2><i class="fas fa-download me-2"></i>Installation</h2>
+      <p><strong>Recommended (Latest Versions ≥1.0.4):</strong> Install via NPM</p>
+      <pre><code>npm install -g mwalajs</code></pre>
+      <p>For project-specific use:</p>
+      <pre><code>npm install mwalajs</code></pre>
+      <p>Create <code>package.json</code> with <code>npm init</code> and ensure:</p>
+      <pre><code>{
+  "type": "module",
+  "dependencies": {
+    "mwalajs": "^1.0.5"
+  }
+}</code></pre>
+      <h3>Older Versions (≤1.0.2)</h3>
+      <p>Download .exe, .zip, or .rar from the website and follow manual setup (add to PATH on Windows or symlink on Linux).</p>
+    </section>
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>MwalaJS Documentation</title>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/github-dark.min.css">
-        <script>hljs.highlightAll();</script>
-        <style>
-            body {
-                font-family: Arial, sans-serif;
-                background-color: #f8f9fa;
-            }
-            .section-title {
-                color: #007bff;
-                margin-top: 20px;
-            }
-            pre {
-                background: #272c34;
-                color: #fff;
-                padding: 15px;
-                border-radius: 5px;
-            }
-            .navbar {
-                background-color: #007bff;
-            }
-            .navbar-brand, .nav-link {
-                color: white !important;
-            }
-            .footer {
-                background: #007bff;
-                color: white;
-                text-align: center;
-                padding: 10px 0;
-                margin-top: 30px;
-            }
-        </style>
-    </head>
-    <body>
-    <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg">
-        <div class="container">
-            <a class="navbar-brand" href="#">MwalaJS Docs</a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav ms-auto">
-                    <li class="nav-item"><a class="nav-link" href="#example">Examples</a></li>
-                    <li class="nav-item"><a class="nav-link" href="#conclusion">Conclusion</a></li>
-                </ul>
-            </div>
+    <!-- Commands -->
+    <section id="commands" class="section-card">
+      <h2><i class="fas fa-terminal me-2"></i>CLI Commands</h2>
+      <div class="row">
+        <div class="col-md-6">
+          <h4>General</h4>
+          <pre><code>mwala -v              # Show version
+mwala help            # List commands
+mwala create-project &lt;name&gt;  # Create new project</code></pre>
         </div>
-    </nav>
-    <!-- Example Application Section -->
-    <div class="container mt-5">
-        <section id="example">
-            <h2 class="section-title">. Example Application</h2>
-            <h3 class="section-title">app.mjs</h3>
-            <p>Here is an example of the default <code>app.mjs</code> file for starting the server:</p>
-            <pre><code class="language-javascript">
-    import mwalajs from 'mwalajs';
-    import { homeRoutes } from './routes/homeRoutes.mjs';
-    import { fileURLToPath } from 'url';
-    import path from 'path';
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = path.dirname(__filename);
-    mwalajs.set('view engine', 'ejs');
-    mwalajs.set('views', path.join(__dirname, 'views'));
-    mwalajs.useStatic(path.join(__dirname, 'public'));
-    mwalajs.use('/', homeRoutes);
-    const port = process.env.PORT || 3000;
-    mwalajs.listen(port, () => {
-      console.log(`Server running on http://localhost:${port}`);
-    });
-            </code></pre>
-            <h3 class="section-title">homeRoutes.mjs</h3>
-            <p>Here is an example of the default <code>homeRoutes.mjs</code> file:</p>
-            <pre><code class="language-javascript">
-    import mwalajs from 'mwalajs';
-    import { homeController, Steps, welcome, about } from '../controllers/homeController.mjs';
-    const router = mwalajs.Router();
-    router.get('/', homeController.getHomePage);
-    router.get('/steps', Steps.getSteps);
-    router.get('/welcome', welcome.getwelcome);
-    router.get('/about', about.getabout);
-    export { router as homeRoutes };
-            </code></pre>
-            <h3 class="section-title">homeController.mjs</h3>
-            <p>Here is an example of the <code>homeController.mjs</code> file:</p>
-            <pre><code class="language-javascript">
-    export const homeController = {
-      getHomePage: (req, res) => {
-        res.render('index', { title: 'Welcome to MwalaJS MVC' });
-      }
-    };
-    export const Steps = {
-      getSteps: (req, res) => {
-        res.render('steps', { title: 'Steps in MwalaJS MVC' });
-      }
-    };
-    export const welcome = {
-      getwelcome: (req, res) => {
-        res.render('welcome', { title: 'Welcome to MwalaJS MVC' });
-      }
-    };
-    export const about = {
-      getabout: (req, res) => {
-        res.render('about', { title: 'About MwalaJS MVC' });
-      }
-    };
-            </code></pre>
-        </section>
-        <!-- Conclusion Section -->
-        <section id="conclusion">
-            <h2 class="section-title">6. Conclusion</h2>
-            <p>MwalaJS is designed to streamline the development of MVC-based applications with its easy-to-use commands for setting up projects, generating components, and managing the database.</p>
-            <p>For full documentation and to contribute, visit the <a href="https://github.com/mwala400/mwalajs" target="_blank">GitHub repository</a>.</p>
-            <h3>Summary of MwalaJS Commands</h3>
-            <pre><code>
-     General Commands:
-      - mwala -v | mwala --version → Show MwalaJS version.
-      - mwala help | mwala h → Show help message.
-     Project Management:
-      - mwala create-project → Create a new project.
-      - mwala init → Initialize MwalaJS.
-     Running the Application:
-      - mwala serve | mwala app.mjs → Start MwalaJS app.
-     Database Operations:
-      - mwala create-db → Create database from .env file.
-      - mwala migrate all → Run all pending migrations.
-      - mwala rollback all → Undo migration.
-     Code Generation:
-      - mwala generate model <name> → Create a model.
-      - mwala generate controller <name> → Create a controller.
-      - mwala generate route <name> → Create a route.
-      - mwala generate view <name> → Create a view.
-     To execute a command, use:
-      mwala <command>
-            </code></pre>
-        </section>
-    </div>
-    <h1>mwalajsm/               # Root directory</h1>
-    <pre>
-      mwalajsm/               # Root directory
-      │── app.mjs             # Main application file
-      │── runMigrations.mjs   # Handles database migrations
-      │── createProject.mjs   # Script for creating new projects
-      │── setupMwalajs.mjs    # Setup script for MwalaJS
-      │── start.bat           # Batch script to start the server
-      │── setup.bat           # Batch script for installation
-      │── setup.bash          # Bash script for installation (Linux/macOS)
-      │── setup.sh            # Another installation script
-      │── package.json        # Dependencies and project metadata
-      │── package-lock.json   # Dependency lock file
-      │── README.md           # Documentation for MwalaJS
-      │── migrations/         # Database migration files
-      │── models/             # Database models
-      │── controllers/        # Handles application logic
-      │── routes/             # Defines API routes
-      │── middlewares/        # Custom middleware for authentication, logging, etc.
-      │── config/             # Configuration files (e.g., database, app settings)
-      │── public/             # Static assets like CSS, JavaScript, and images
-      │── views/              # Template views (if using server-side rendering)
-      │── mwalajs/            # Core framework files
-      │── dist/               # Compiled or built files
-      │── node_modules/       # Dependencies installed via npm
-      │── YOUR CREATED PROJECT/       # When run mwala create-project will request project name related files (clarify purpose)
-      │── installer/          # Installation-related files
-      │── installerimg.png    # Image used during installation
-      │── mwalajs5.png        # Framework branding/image
-      │── mwalajs4_RXv_icon.ico # Framework icons
-      │── mwalajs4_lyh_icon.ico # Another framework icon
-      │── mwalajsm.iss        # Installer script for Windows
-      │── background.bmp      # Background image (possibly for setup UI)
-      │── background.png      # Another background image
-      │── bin/                # Executable files or scripts
-      This structure makes MwalaJS a well-organized and scalable framework. To make it even more convincing, you could add:
-      A "tests/" folder – To show built-in support for unit and integration tests.
-      A "docs/" folder – Dedicated to documentation with detailed guides.
-      A "scripts/" folder – For automation scripts instead of having them in the root directory.
-      A "logs/" folder – To store logs instead of scattering them.
-```
-</pre>
-## Getting Started
-<pre>
-### Installation
-1. **Install MwalaJS globally:**
-   ```sh
-   npm install -g mwalajs
-   ```
-2. **Create a new project:**
-   ```sh
-   mwalajs create myApp
-   cd myApp
-   npm install
-   ```
-3. **Run the development server:**
-   ```sh
-   npm start
-   ```
-## Sample Code
-A simple MwalaJS route example:
-Your MwalaJS file structure is well-organized, but to make it more convincing for developers to switch, consider:
-1. Clean File Structure Explanation
-Hereâ€™s a structured breakdown:
-</pre>
-<h1>FOLDERS</h1>
-<pre>
+        <div class="col-md-6">
+          <h4>Server & DB</h4>
+          <pre><code>mwala serve           # Start dev server
+mwala create-db       # Create database
+mwala migrate all     # Run migrations
+mwala rollback all    # Undo migrations</code></pre>
+        </div>
+      </div>
+      <h4>Code Generation</h4>
+      <pre><code>mwala generate model &lt;name&gt;
+mwala generate controller &lt;name&gt;
+mwala generate route &lt;name&gt;
+mwala generate view &lt;name&gt;
+mwala generate midware &lt;name&gt;</code></pre>
+    </section>
-   mwalajsm/              # Root directory
-  │──  app.mjs           # Main application entry point
-  │──  ATTENDANCE/       # Attendance-related files (clarify purpose)
-  │──  bin/              # Executable scripts
-  │──  config/           # Configuration files
-  │──  controllers/      # Business logic controllers
-  │──  middlewares/      # Request middlewares
-  │──  migrations/       # Database migrations
-  │──  models/           # Database models
-  │──  mwalajs/          # Core framework code
-  │──  public/           # Static assets (CSS, JS, Images)
-  │──  routes/           # API & web routes
-  │──  views/            # Frontend templates (if using templating)
-  │──  dist/             # Compiled or bundled output
-  │──  package.json      # Dependencies & scripts
-  │──  README.md         # Project documentation
-  │──  start.bat         # Windows startup script
-  │──  setup.sh          # Unix-based setup script
-  │──  createProject.mjs # Automates project creation
-  │──  runMigrations.mjs # Database migration script
-  │──  installer/        # Installer-related files
-  │──  node_modules/     # Dependencies
-  2. Why Developers Should Switch to MwalaJS
-  MwalaJS should highlight:
-   Better modular structure (prevents spaghetti code)
-   Built-in migrations & models (reduces DB setup time)
-   Simplified setup scripts (automates installation)
-   Performance optimizations (mention key tech choices)
-   Security-first approach (middleware for authentication, validation)
-  </pre>
+    <!-- Project Structure -->
+    <section id="structure" class="section-card">
+      <h2><i class="fas fa-folder-tree me-2"></i>Project Structure</h2>
+      <p>Main entry: <code>app.mjs</code> (must be .mjs). Other files can use .mjs or .js if needed.</p>
+      <div class="structure-tree">
+mwalajs-project/<br>
+├── app.mjs                  # Main app (Express wrapper - must be .mjs)<br>
+├── migrations/              # DB migration files (.js or .mjs)<br>
+├── models/                  # Models (e.g., UserModel.js or .mjs)<br>
+├── controllers/             # Controllers (e.g., UserController.js or .mjs)<br>
+├── routes/                  # Routes (e.g., userRoutes.js or .mjs)<br>
+├── middlewares/             # Custom middleware (.js or .mjs)<br>
+├── config/                  # Config files (database.js, etc.)<br>
+├── public/                  # Static assets<br>
+│   ├── css/<br>
+│   ├── js/<br>
+│   └── images/<br>
+├── views/                   # EJS templates (.ejs)<br>
+├── package.json<br>
+└── README.md
+      </div>
+    </section>
-3. Preventing Module Repetition
-<br>
-Are there duplicate functionalities in middlewares/, controllers/, or mwalajs/? <br>
-If mwalajs/ is the core framework, maybe avoid repeating similar logic inside controllers/ <br>
+    <!-- Code Examples -->
+    <section id="examples" class="section-card">
+      <h2><i class="fas fa-code me-2"></i>Code Examples</h2>
+      <h3>app.mjs (Main Entry - must be .mjs)</h3>
+      <pre><code class="language-javascript">import mwalajs from 'mwalajs';
+import { homeRoutes } from './routes/homeRoutes.mjs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+mwalajs.set('view engine', 'ejs');
+mwalajs.set('views', path.join(__dirname, 'views'));
+mwalajs.useStatic(path.join(__dirname, 'public'));
+mwalajs.use('/', homeRoutes);
+const port = process.env.PORT || 3000;
+mwalajs.listen(port, () => {
+  console.log(`Server running on http://localhost:${port}`);
+});</code></pre>
+      <h3>routes/homeRoutes.mjs (or .js)</h3>
+      <pre><code class="language-javascript">import mwalajs from 'mwalajs';
+import { homeController } from '../controllers/homeController.mjs';
+const router = mwalajs.Router();
+router.get('/', homeController.getHomePage);
+router.get('/about', homeController.getAbout);
+export { router as homeRoutes };</code></pre>
+      <h3>controllers/homeController.mjs (or .js)</h3>
+      <pre><code class="language-javascript">export const homeController = {
+  getHomePage: (req, res) => {
+    res.render('index', { title: 'Welcome to MwalaJS' });
+  },
+  getAbout: (req, res) => {
+    res.render('about', { title: 'About Us' });
+  }
+};</code></pre>
+      <h3>views/index.ejs (Example View)</h3>
+      <pre><code class="language-html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;&lt;%= title %&gt;&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;h1&gt;&lt;%= title %&gt;&lt;/h1&gt;
+  &lt;p&gt;Welcome to your MwalaJS application!&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;</code></pre>
+    </section>
-<br>
-## Future of Web Development <br>
-MwalaJS is designed to replace traditional frameworks by offering a modern, easy-to-use, <br>
- and high-performance alternative. Whether you are building a simple website or a complex web application, <br>
- MwalaJS provides the tools you need for success.
+    <!-- Downloads -->
+    <section id="downloads" class="section-card">
+      <h2><i class="fas fa-cloud-download-alt me-2"></i>Downloads (Older Versions)</h2>
+      <div class="row text-center">
+        <div class="col-md-4 mb-3">
+          <a href="https://mwalajs.biasharabora.com/files/mwalaJS_installer.exe" class="btn btn-success btn-lg"><i class="fas fa-download"></i> .exe Installer</a>
+        </div>
+        <div class="col-md-4 mb-3">
+          <a href="https://mwalajs.biasharabora.com/files/mwalajsm.zip" class="btn btn-primary btn-lg"><i class="fas fa-download"></i> .zip (v1.0.0)</a>
+        </div>
+        <div class="col-md-4 mb-3">
+          <a href="https://mwalajs.biasharabora.com/files/mwalajsm.rar" class="btn btn-info btn-lg"><i class="fas fa-download"></i> .rar (v1.0.0)</a>
+        </div>
+      </div>
+    </section>
- <br>
-## Contribute <br>
-We welcome contributors! Feel free to fork the repository, submit issues, and make pull requests.
-<br><br>
-## License <br>
-MwalaJS is open-source and licensed under the MIT License.
-<br>
+  </div>
+  <!-- Footer -->
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
-    <!-- Footer -->
-    <div class="footer">
-      &copy; 2025 MwalaJS Documentation | All Rights Reserved
-  </div>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-  </body>
-  </html>
+<%- include('partials/footer') %>