npm - nodejs-quickstart-structure - Versions diffs - 2.0.0 → 2.1.0 - Mend

nodejs-quickstart-structure 2.0.0 → 2.1.0

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 (161) hide show

package/templates/common/views/ejs/signup.ejs.ejs ADDED Viewed

@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up - <%= projectName %></title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #22c55e;
+            --primary-glow: rgba(34, 197, 94, 0.4);
+            --bg-dark: #0f172a;
+            --card-bg: rgba(255, 255, 255, 0.03);
+            --card-border: rgba(255, 255, 255, 0.08);
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Poppins', sans-serif;
+        }
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow-x: hidden;
+            position: relative;
+        }
+        /* Animated Background Blobs */
+        .background-blobs {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            filter: blur(80px);
+        }
+        .blob {
+            position: absolute;
+            width: 500px;
+            height: 500px;
+            border-radius: 50%;
+            opacity: 0.3;
+            animation: float 25s infinite alternate;
+        }
+        .blob-1 {
+            background: radial-gradient(circle, #22c55e 0%, transparent 70%);
+            top: -200px;
+            right: -100px;
+        }
+        .blob-2 {
+            background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
+            bottom: -200px;
+            left: -100px;
+            animation-delay: -7s;
+        }
+        @keyframes float {
+            0% { transform: translate(0, 0) scale(1); }
+            100% { transform: translate(-150px, 100px) scale(1.3); }
+        }
+        .auth-card {
+            background: var(--card-bg);
+            backdrop-filter: blur(15px);
+            -webkit-backdrop-filter: blur(15px);
+            border: 1px solid var(--card-border);
+            border-radius: 28px;
+            padding: 48px;
+            width: 100%;
+            max-width: 480px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+            z-index: 1;
+            margin: 40px 20px;
+            animation: fadeIn 0.8s ease-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(15px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .auth-card h2 {
+            font-size: 32px;
+            font-weight: 600;
+            margin-bottom: 8px;
+            text-align: center;
+            background: linear-gradient(to right, #fff, #94a3b8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .subtitle {
+            text-align: center;
+            color: var(--text-muted);
+            font-size: 14px;
+            margin-bottom: 40px;
+        }
+        .form-grid {
+            display: grid;
+            gap: 20px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-size: 13px;
+            font-weight: 500;
+            color: var(--text-muted);
+        }
+        .form-group input {
+            width: 100%;
+            background: rgba(255, 255, 255, 0.04);
+            border: 1px solid var(--card-border);
+            border-radius: 14px;
+            padding: 13px 18px;
+            color: #fff;
+            font-size: 15px;
+            transition: all 0.3s;
+            outline: none;
+        }
+        .form-group input:focus {
+            background: rgba(255, 255, 255, 0.07);
+            border-color: var(--primary);
+            box-shadow: 0 0 0 4px var(--primary-glow);
+        }
+        .btn-primary {
+            width: 100%;
+            background: var(--primary);
+            color: white;
+            border: none;
+            border-radius: 14px;
+            padding: 15px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            margin-top: 15px;
+            box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.3);
+        }
+        .btn-primary:hover {
+            transform: scale(1.02);
+            filter: brightness(1.1);
+            box-shadow: 0 15px 25px -5px rgba(34, 197, 94, 0.4);
+        }
+        .btn-primary:active {
+            transform: scale(0.98);
+        }
+        .footer {
+            margin-top: 40px;
+            text-align: center;
+            font-size: 14px;
+            color: var(--text-muted);
+        }
+        .footer a {
+            color: var(--primary);
+            text-decoration: none;
+            font-weight: 600;
+            transition: 0.3s;
+        }
+        .footer a:hover {
+            opacity: 0.8;
+            text-decoration: underline;
+        }
+        .back-home {
+            display: block;
+            margin-top: 20px;
+            font-size: 12px;
+            opacity: 0.5;
+            transition: 0.3s;
+        }
+        .back-home:hover {
+            opacity: 1;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 480px) {
+            .auth-card {
+                padding: 35px 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="background-blobs">
+        <div class="blob blob-1"></div>
+        <div class="blob blob-2"></div>
+    </div>
+    <div class="auth-card">
+        <h2>Join Us</h2>
+        <p class="subtitle">Create your account in seconds</p>
+        <form action="/api/users" method="POST" class="form-grid">
+            <div class="form-group">
+                <label for="name">Full Name</label>
+                <input type="text" id="name" name="name" placeholder="John Doe" required>
+            </div>
+            <div class="form-group">
+                <label for="email">Email Address</label>
+                <input type="email" id="email" name="email" placeholder="john@example.com" required>
+            </div>
+            <div class="form-group">
+                <label for="password">Choose Password</label>
+                <input type="password" id="password" name="password" placeholder="••••••••" required>
+            </div>
+            <button type="submit" class="btn-primary">Create Account</button>
+        </form>
+        <div class="footer">
+            <p>Already have an account? <a href="/login">Sign in</a></p>
+            <a href="/" class="back-home">← Back to home</a>
+        </div>
+    </div>
+    <% if (communication === 'GraphQL') { %>
+    <script>
+        document.querySelector('form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const formData = new FormData(e.target);
+            const data = Object.fromEntries(formData.entries());
+            const query = `
+                mutation CreateUser($name: String!, $email: String!, $password: String!) {
+                    createUser(name: $name, email: $email, password: $password) {
+                        id
+                        name
+                        email
+                    }
+                }
+            `;
+            try {
+                const response = await fetch('/graphql', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        query,
+                        variables: data
+                    })
+                });
+                const result = await response.json();
+                if (result.errors) {
+                    alert('Error: ' + result.errors[0].message);
+                } else {
+                    alert('Account created successfully! Please login.');
+                    window.location.href = '/login';
+                }
+            } catch (err) {
+                console.error(err);
+                alert('An error occurred during signup.');
+            }
+        });
+    </script>
+    <% } %>
+</body>
+</html>

package/templates/common/views/pug/index.pug CHANGED Viewed

@@ -1,40 +1,271 @@
 doctype html
 html(lang="en")
-  head
-    meta(charset="UTF-8")
-    meta(name="viewport", content="width=device-width, initial-scale=1.0")
-    title= projectName
-    link(rel="stylesheet", href="/css/style.css")
-  body
-    .container
-      header.header
-        .logo 🚀
-        h1 Welcome to #{projectName}
-        p.subtitle A production-ready Node.js microservice starter.
-      .card-grid
-        .card
-          h3 Architecture
-          p #{architecture}
-        .card
-          h3 Database
-          p #{database}
-        .card
-          h3 Communication
-          p #{communication}
-      if communication === 'Kafka'
-        .status-card
-          .status-icon 🔄
-          .status-content
-            h3 Kafka Connected
-            p Connection to broker established successfully.
-      else
-        .status-card
-          .status-icon ✅
-          .status-content
-            h3 API Active
-            p REST API is running and ready to accept requests.
-      footer
-        p Generated with ❤️ by Node.js Quickstart Generator
+    head
+        meta(charset="UTF-8")
+        meta(name="viewport" content="width=device-width, initial-scale=1.0")
+        title= projectName
+        link(href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet")
+        style.
+            :root {
+                --primary: #6366f1;
+                --primary-glow: rgba(99, 102, 241, 0.4);
+                --bg-dark: #0f172a;
+                --card-bg: rgba(255, 255, 255, 0.03);
+                --card-border: rgba(255, 255, 255, 0.08);
+                --text-main: #f8fafc;
+                --text-muted: #94a3b8;
+                --success: #22c55e;
+            }
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+                font-family: 'Poppins', sans-serif;
+            }
+            body {
+                background-color: var(--bg-dark);
+                color: var(--text-main);
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                overflow-x: hidden;
+                position: relative;
+                padding: 40px 20px;
+            }
+            .background-blobs {
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                z-index: -1;
+                filter: blur(100px);
+            }
+            .blob {
+                position: absolute;
+                width: 500px;
+                height: 500px;
+                border-radius: 50%;
+                opacity: 0.3;
+                animation: float 25s infinite alternate;
+            }
+            .blob-1 {
+                background: radial-gradient(circle, #6366f1 0%, transparent 70%);
+                top: -200px;
+                left: -100px;
+            }
+            .blob-2 {
+                background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
+                bottom: -200px;
+                right: -100px;
+                animation-delay: -5s;
+            }
+            @keyframes float {
+                0% { transform: translate(0, 0) scale(1); }
+                100% { transform: translate(150px, 80px) scale(1.3); }
+            }
+            .container {
+                width: 100%;
+                max-width: 1000px;
+                z-index: 1;
+                animation: fadeIn 0.8s ease-out;
+            }
+            @keyframes fadeIn {
+                from { opacity: 0; transform: translateY(20px); }
+                to { opacity: 1; transform: translateY(0); }
+            }
+            .hero-card {
+                background: var(--card-bg);
+                backdrop-filter: blur(16px);
+                -webkit-backdrop-filter: blur(16px);
+                border: 1px solid var(--card-border);
+                border-radius: 32px;
+                padding: 60px 40px;
+                text-align: center;
+                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
+                margin-bottom: 40px;
+            }
+            .logo {
+                font-size: 64px;
+                margin-bottom: 24px;
+                display: inline-block;
+                animation: bounce 3s infinite ease-in-out;
+            }
+            @keyframes bounce {
+                0%, 100% { transform: translateY(0); }
+                50% { transform: translateY(-10px); }
+            }
+            h1 {
+                font-size: 48px;
+                font-weight: 600;
+                margin-bottom: 12px;
+                background: linear-gradient(to right, #fff, #94a3b8);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+            }
+            .subtitle {
+                font-size: 18px;
+                color: var(--text-muted);
+                margin-bottom: 40px;
+                max-width: 600px;
+                margin-left: auto;
+                margin-right: auto;
+            }
+            .btn-group {
+                display: flex;
+                gap: 16px;
+                justify-content: center;
+                flex-wrap: wrap;
+            }
+            .btn {
+                padding: 14px 28px;
+                border-radius: 14px;
+                font-size: 16px;
+                font-weight: 600;
+                text-decoration: none;
+                transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+                display: flex;
+                align-items: center;
+                gap: 8px;
+            }
+            .btn-primary {
+                background: var(--primary);
+                color: white;
+                box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
+            }
+            .btn-primary:hover {
+                transform: scale(1.05);
+                background: #4f46e5;
+                box-shadow: 0 15px 25px -5px rgba(99, 102, 241, 0.4);
+            }
+            .btn-secondary {
+                background: rgba(255, 255, 255, 0.05);
+                color: white;
+                border: 1px solid var(--card-border);
+            }
+            .btn-secondary:hover {
+                background: rgba(255, 255, 255, 0.1);
+                transform: scale(1.05);
+            }
+            .feature-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+                gap: 24px;
+            }
+            .feature-card {
+                background: var(--card-bg);
+                backdrop-filter: blur(8px);
+                border: 1px solid var(--card-border);
+                border-radius: 20px;
+                padding: 24px;
+                transition: all 0.3s ease;
+            }
+            .feature-card:hover {
+                transform: translateY(-5px);
+                background: rgba(255, 255, 255, 0.06);
+                border-color: var(--primary);
+            }
+            .feature-card h3 {
+                font-size: 14px;
+                text-transform: uppercase;
+                letter-spacing: 1px;
+                color: var(--text-muted);
+                margin-bottom: 8px;
+            }
+            .feature-card p {
+                font-size: 20px;
+                font-weight: 600;
+                color: #fff;
+            }
+            .status-badge {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                background: rgba(34, 197, 94, 0.1);
+                border: 1px solid rgba(34, 197, 94, 0.2);
+                color: var(--success);
+                padding: 8px 16px;
+                border-radius: 99px;
+                font-size: 14px;
+                font-weight: 500;
+                margin-top: 32px;
+            }
+            footer {
+                margin-top: 60px;
+                text-align: center;
+                font-size: 14px;
+                color: var(--text-muted);
+            }
+            @media (max-width: 640px) {
+                h1 { font-size: 32px; }
+                .hero-card { padding: 40px 20px; }
+            }
+    body
+        div.background-blobs
+            div.blob.blob-1
+            div.blob.blob-2
+        div.container
+            div.hero-card
+                div.logo 🚀
+                h1 Welcome to #{projectName}
+                p.subtitle Your enterprise-grade Node.js microservice is live and ready for production.
+                div.btn-group
+                    if auth && auth.includes('JWT')
+                        a.btn.btn-primary(href="/login") Sign In
+                        a.btn.btn-secondary(href="/signup") Create Account
+                    a.btn.btn-secondary(href=(communication === 'GraphQL' ? '/graphql' : '/api-docs'))
+                        span Explore Docs
+                        svg(width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round")
+                            path(d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6")
+                            polyline(points="15 3 21 3 21 9")
+                            line(x1="10" y1="14" x2="21" y2="3")
+                if communication === 'Kafka'
+                    div.status-badge
+                        | 🔄 Kafka Connected
+                else
+                    div.status-badge
+                        | ✅ API Service Active
+            div.feature-grid
+                div.feature-card
+                    h3 Architecture
+                    p= architecture
+                div.feature-card
+                    h3 Core Stack
+                    p #{database} & #{communication}
+                div.feature-card
+                    h3 Environment
+                    p Node.js & Docker Ready
+            footer
+                p Generated with ❤️ by Node.js Quickstart Generator