mwalajs 1.0.6 → 1.0.8

package/views/partials/footer.ejs

@@ -0,0 +1,102 @@
+<!-- views/partials/footer.ejs -->
+<footer class="site-footer">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-4 col-md-6 mb-4">
+        <h5><i class="fas fa-code me-2"></i>MwalaJS Framework</h5>
+        <p>High-performance Node.js MVC framework for modern web applications.</p>
+        <p class="text-muted small">
+          Built with ❤️ by <strong>Hekima Ambalile Mwala</strong>
+        </p>
+      </div>
+
+      <div class="col-lg-2 col-md-3 col-sm-6 mb-4">
+        <h6>Quick Links</h6>
+        <ul class="list-unstyled">
+          <li><a href="/">Home</a></li>
+          <li><a href="/mwalajs-framework-documentation">Documentation</a></li>
+          <li><a href="/about">About</a></li>
+          <li><a href="https://github.com/mwala400/mwalajs">GitHub</a></li>
+        </ul>
+      </div>
+
+      <div class="col-lg-2 col-md-3 col-sm-6 mb-4">
+        <h6>Community</h6>
+        <ul class="list-unstyled">
+          <li><a href="https://chat.whatsapp.com/F8x1p8R1EhZ5b7RX7PO6dR" target="_blank">WhatsApp Group</a></li>
+          <li><a href="https://youtube.com/@hekimamwala" target="_blank">YouTube Channel</a></li>
+        </ul>
+      </div>
+
+      <div class="col-lg-4 col-md-6 mb-4 text-lg-end">
+        <h6>Contact</h6>
+        <p>
+          <i class="fas fa-envelope me-2"></i>
+          <a href="mailto:biasharaboraofficials@gmail.com">biasharaboraofficials@gmail.com</a>
+        </p>
+        <p>
+          <i class="fas fa-phone me-2"></i>
+          <a href="tel:+255747285438">+255 747 285 438</a>
+        </p>
+        <div class="social-links mt-3">
+          <a href="https://github.com/mwala400/mwalajs" target="_blank" class="me-3"><i class="fab fa-github fa-2x"></i></a>
+          <a href="https://youtube.com/@hekimamwala" target="_blank" class="me-3"><i class="fab fa-youtube fa-2x"></i></a>
+          <a href="https://chat.whatsapp.com/F8x1p8R1EhZ5b7RX7PO6dR" target="_blank"><i class="fab fa-whatsapp fa-2x"></i></a>
+        </div>
+      </div>
+    </div>
+
+    <hr class="my-4 border-secondary">
+
+    <div class="text-center">
+      <p class="mb-0">
+        &copy; <span id="currentYear"></span> MwalaJS Framework. All rights reserved.
+        <br>
+        <small class="text-muted">Made in Tanzania with passion for open-source</small>
+      </p>
+    </div>
+  </div>
+</footer>
+
+<style>
+  .site-footer {
+    background: linear-gradient(135deg, #1e3c72, #15294f);
+    color: white;
+    padding: 4rem 0 2rem;
+    margin-top: 5rem;
+  }
+
+  .site-footer a {
+    color: rgba(255,255,255,0.8);
+    text-decoration: none;
+    transition: color 0.3s ease;
+  }
+
+  .site-footer a:hover {
+    color: #ffc107;
+  }
+
+  .site-footer h5, .site-footer h6 {
+    color: white;
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+  }
+
+  .social-links a {
+    color: white;
+    transition: transform 0.3s ease;
+  }
+
+  .social-links a:hover {
+    transform: translateY(-5px);
+  }
+
+  hr.border-secondary {
+    opacity: 0.3;
+  }
+</style>
+
+<script>
+  // Dynamic year
+  document.getElementById('currentYear').textContent = new Date().getFullYear();
+</script>

package/views/partials/header.ejs

@@ -0,0 +1,160 @@
+<!-- views/partials/header.ejs - Responsive Top Navbar (expands/contracts on all devices) -->
+<header class="site-header">
+  <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
+    <div class="container-fluid">
+      <!-- Brand Logo -->
+      <a class="navbar-brand fw-bold" href="/">
+        <i class="fas fa-code me-2"></i>
+        <span class="brand-text">MwalaJS</span>
+      </a>
+
+      <!-- Mobile Toggle Button -->
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" 
+              aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <!-- Collapsible Navigation Links -->
+      <div class="collapse navbar-collapse" id="mainNavbar">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <a class="nav-link <%= (typeof currentPath !== 'undefined' ? currentPath : '/') === '/' ? 'active' : '' %>" 
+               href="/">Home</a>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link <%= (typeof currentPath !== 'undefined' && currentPath.includes('documentation')) ? 'active' : '' %>" 
+               href="/mwalajs-framework-documentation">Documentation</a>
+          </li>
+
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle <%= (typeof currentPath !== 'undefined' && (currentPath.includes('/steps') || currentPath.includes('/welcome'))) ? 'active' : '' %>" 
+               href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Getting Started
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="/steps">Step-by-Step Guide</a></li>
+              <li><a class="dropdown-item" href="/welcome">Welcome Page</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="/mwalajs-framework-documentation#installation">Installation</a></li>
+              <li><a class="dropdown-item" href="/mwalajs-framework-documentation#commands">CLI Commands</a></li>
+              <li><a class="dropdown-item" href="/mwalajs-framework-documentation#structure">Project Structure</a></li>
+            </ul>
+          </li>
+
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle <%= (typeof currentPath !== 'undefined' && currentPath.includes('/examples')) ? 'active' : '' %>" 
+               href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Guides & Examples
+            </a>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="/mwalajs-framework-documentation#examples">Code Examples</a></li>
+              <li><a class="dropdown-item" href="/steps">Tutorial</a></li>
+            </ul>
+          </li>
+
+          <li class="nav-item">
+            <a class="nav-link <%= (typeof currentPath !== 'undefined' && currentPath === '/about') ? 'active' : '' %>" 
+               href="/about">About Us</a>
+          </li>
+        </ul>
+
+        <!-- Right Side Links (Community & GitHub) -->
+        <ul class="navbar-nav ms-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="https://github.com/mwala400/mwalajs" target="_blank">
+              <i class="fab fa-github me-2"></i>GitHub
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link text-success" href="https://chat.whatsapp.com/F8x1p8R1EhZ5b7RX7PO6dR?mode=r_t" target="_blank">
+              <i class="fab fa-whatsapp me-2"></i>Community
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</header>
+
+<style>
+  .site-header {
+    background: linear-gradient(135deg, #1e3c72, #2a5298);
+    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
+  }
+
+  .navbar-brand {
+    font-size: 1.6rem;
+    font-weight: 800;
+  }
+
+  .brand-text {
+    margin-left: 0.5rem;
+  }
+
+  .nav-link {
+    font-weight: 500;
+    padding: 0.8rem 1.2rem !important;
+    transition: all 0.3s ease;
+    border-radius: 8px;
+    margin: 0 0.3rem;
+  }
+
+  .nav-link:hover {
+    background: rgba(255,255,255,0.15);
+    color: #ffc107 !important;
+  }
+
+  .nav-link.active {
+    background: rgba(255,255,255,0.25);
+    color: #ffc107 !important;
+    font-weight: 600;
+  }
+
+  /* Dropdown menu improvements */
+  .dropdown-menu {
+    background: #15294f;
+    border: none;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.4);
+    border-radius: 10px;
+  }
+
+  .dropdown-item {
+    color: rgba(255,255,255,0.9);
+    padding: 0.7rem 1.5rem;
+    transition: all 0.3s ease;
+  }
+
+  .dropdown-item:hover {
+    background: rgba(13,110,253,0.4);
+    color: white;
+    padding-left: 1.8rem;
+  }
+
+  /* Mobile adjustments */
+  @media (max-width: 992px) {
+    .navbar-collapse {
+      background: rgba(21,41,79,0.95);
+      margin-top: 1rem;
+      padding: 1rem;
+      border-radius: 10px;
+      backdrop-filter: blur(10px);
+    }
+
+    .navbar-nav .nav-link {
+      padding: 0.8rem 1rem !important;
+      border-radius: 8px;
+    }
+
+    .navbar-nav.ms-auto {
+      margin-top: 1rem;
+    }
+  }
+
+  /* Extra small devices */
+  @media (max-width: 576px) {
+    .navbar-brand {
+      font-size: 1.4rem;
+    }
+  }
+</style>

package/views/steps copy.ejs

@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>MwalaJS Framework Documentation</title>
+
+  <!-- Bootstrap 5 CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+
+  <!-- Font Awesome for Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+  <!-- Highlight.js for Code Syntax Highlighting -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script>hljs.highlightAll();</script>
+
+  <!-- Meta Tags -->
+  <meta name="description" content="MwalaJS Framework Documentation - Lightweight Node.js MVC framework with CLI tools, database migrations, and EJS templating.">
+  <meta name="keywords" content="MwalaJS, Node.js, MVC, JavaScript framework, EJS, documentation">
+  <meta name="author" content="Hekima Ambalile Mwala">
+  <meta property="og:title" content="MwalaJS Framework Documentation">
+  <meta property="og:description" content="Complete guide to MwalaJS: installation, commands, project structure, 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">
+
+  <!-- Custom Styles -->
+  <style>
+    :root {
+      --primary: #0d6efd;
+      --accent-gradient: linear-gradient(135deg, #0d6efd, #6610f2);
+    }
+    body { background-color: #f8f9fa; font-family: 'Segoe UI', sans-serif; }
+    .navbar { background: var(--accent-gradient) !important; }
+    .nav-link { color: white !important; }
+    .nav-link:hover { color: #ffc107 !important; }
+    pre code { background: #1e1e1e; padding: 1.5rem; border-radius: 12px; }
+    .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(--accent-gradient); color: white; padding: 2rem 0; text-align: center; }
+    .btn-primary { background: var(--primary); border: none; }
+    .structure-tree { font-family: monospace; white-space: pre; background: #f1f1f1; padding: 1rem; border-radius: 8px; }
+  </style>
+</head>
+<body>
+
+  <!-- Navbar -->
+  <nav class="navbar navbar-expand-lg navbar-dark">
+    <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-branch"></i> Examples</a></li>
+          <li class="nav-item"><a class="nav-link" href="#conclusion"><i class="fas fa-check-circle"></i> Conclusion</a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+
+  <div class="container my-5">
+
+    <header class="text-center my-5">
+      <h1 class="display-4"><i class="fas fa-book-open me-3"></i>MwalaJS Framework Documentation</h1>
+      <p class="lead">Lightweight MVC Node.js framework with CLI scaffolding, database migrations, and EJS views.</p>
+      <p>GitHub: <a href="https://github.com/mwala400/mwalajs" target="_blank">https://github.com/mwala400/mwalajs</a></p>
+    </header>
+
+    <!-- Overview -->
+    <section id="overview" class="section-card">
+      <h2><i class="fas fa-eye me-2"></i>Overview</h2>
+      <p>MwalaJS is a lightweight, modular Node.js framework following the MVC pattern. It includes built-in CLI for project setup, code generation, database management, and server running.</p>
+      <h3>Key Features</h3>
+      <ul>
+        <li>MVC Architecture</li>
+        <li>CLI Code Generation (models, controllers, routes, views, middleware)</li>
+        <li>Database Commands & Migrations</li>
+        <li>EJS Template Engine Integration</li>
+        <li>Static File Serving</li>
+        <li>Support for .mjs (ES modules) and fallback to .js</li>
+      </ul>
+    </section>
+
+    <!-- Installation & Releases -->
+    <section id="installation" class="section-card">
+      <h2><i class="fas fa-download me-2"></i>Installation & Releases</h2>
+      <p>Latest versions are available via NPM. Older versions via direct downloads.</p>
+
+      <h3>NPM Installation (Recommended for v1.0.4+)</h3>
+      <pre><code class="language-bash">npm install -g mwalajs</code></pre>
+
+      <h3>Direct Downloads (Older Versions)</h3>
+      <div class="row">
+        <div class="col-md-4 mb-3">
+          <a href="https://mwalajs.biasharabora.com/files/mwalaJS_installer.exe" class="btn btn-success btn-lg d-block"><i class="fas fa-file-archive"></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 d-block"><i class="fas fa-file-zipper"></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 d-block"><i class="fas fa-file-archive"></i> .RAR (v1.0.0)</a>
+        </div>
+      </div>
+
+      <p>GitHub Clone:</p>
+      <pre><code class="language-bash">git clone https://github.com/mwala400/mwalajs.git</code></pre>
+    </section>
+
+    <!-- Commands -->
+    <section id="commands" class="section-card">
+      <h2><i class="fas fa-terminal me-2"></i>CLI Commands</h2>
+      <pre><code class="language-bash">
+mwala create-project &lt;projectName&gt;   # Create new project
+mwala init                          # Initialize in existing project
+mwala serve                         # Start server (or node app.mjs)
+
+Database:
+mwala create-db
+mwala create-table &lt;name&gt;
+mwala drop-table &lt;name&gt;
+mwala migrate all
+mwala rollback all
+
+Generation:
+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;
+
+Other:
+mwala -v     # Version
+mwala help   # Help
+      </code></pre>
+    </section>
+
+    <!-- Project Structure -->
+    <section id="structure" class="section-card">
+      <h2><i class="fas fa-folder-tree me-2"></i>Project Structure</h2>
+      <p>Main entry: <strong>app.mjs</strong> (must be .mjs). Other files can use .mjs or .js.</p>
+      <pre class="structure-tree">
+mwalajs-project/
+├── app.mjs                  # Main entry point (required .mjs)
+├── migrations/              # Database migrations
+├── models/                  # Models (.mjs or .js)
+├── controllers/             # Controllers (.mjs or .js)
+├── routes/                  # Routes (.mjs or .js)
+├── middlewares/             # Middleware (.mjs or .js)
+├── config/                  # Config files
+├── public/                  # Static assets
+│   ├── css/
+│   ├── js/
+│   └── images/
+├── views/                   # EJS templates (.ejs)
+├── package.json
+└── README.md
+      </pre>
+    </section>
+
+    <!-- Examples -->
+    <section id="examples" class="section-card">
+      <h2><i class="fas fa-code-branch me-2"></i>Code Examples</h2>
+
+      <h3>app.mjs (or app.js)</h3>
+      <pre><code class="language-javascript">
+import mwalajs from 'mwalajs';
+import { homeRoutes } from './routes/homeRoutes.mjs'; // or .js
+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'; // or .js
+
+const router = mwalajs.Router();
+
+router.get('/', homeController.getHomePage);
+// Add more routes...
+
+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' });
+  }
+};
+      </code></pre>
+
+      <h3>views/index.ejs (Example View)</h3>
+      <pre><code class="language-html">
+&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&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;This is rendered with EJS in MwalaJS!&lt;/p&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+      </code></pre>
+    </section>
+
+    <!-- Conclusion -->
+    <section id="conclusion" class="section-card">
+      <h2><i class="fas fa-check-circle me-2"></i>Conclusion</h2>
+      <p>MwalaJS simplifies Node.js MVC development with powerful CLI tools and clean structure. Start building scalable apps today!</p>
+      <p>License: MIT © 2025 Hekima Ambalile Mwala</p>
+    </section>
+
+  </div>
+
+ 
+
+  <!-- Bootstrap JS -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+</html>