create-colonel 0.1.6 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-colonel",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "type": "module",
   "files": [
     "src",

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colonel-app",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "private": true,
   "scripts": {
@@ -8,7 +8,7 @@
     "upgrade:colonel": "bun add @coloneldev/framework@latest"
   },
   "dependencies": {
-    "@coloneldev/framework": "^0.1.5",
+    "@coloneldev/framework": "^0.1.6",
     "ejs": "^5.0.1"
   },
   "devDependencies": {

package/template/resources/views/base/index.ejs

@@ -1,132 +1,4 @@
-<section class="landing-shell">
-	<style>
-		@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
-
-		:root {
-			--ink: #0d1310;
-			--ink-soft: #203329;
-			--canvas: #f3f1e9;
-			--accent: #b8441a;
-			--accent-soft: #db7c31;
-			--panel: #ffffff;
-			--olive: #5e6a39;
-			--line: #d8d3c7;
-		}
-
-		body {
-			margin: 0;
-			background: radial-gradient(circle at 80% 10%, #f8e6c7 0%, var(--canvas) 38%, #ede8da 100%);
-			color: var(--ink);
-			font-family: 'Space Grotesk', sans-serif;
-		}
-
-		.landing-shell {
-			max-width: 1040px;
-			margin: 0 auto;
-			padding: 2rem 1rem 3rem;
-		}
-
-		.hero {
-			border: 1px solid var(--line);
-			background: linear-gradient(125deg, #fffdf8 0%, #f6f3e9 100%);
-			border-radius: 22px;
-			padding: 2.2rem;
-			box-shadow: 0 16px 45px rgba(32, 51, 41, 0.09);
-			animation: rise 0.65s ease;
-		}
-
-		.kicker {
-			font-family: 'IBM Plex Mono', monospace;
-			letter-spacing: 0.1em;
-			font-size: 0.74rem;
-			color: var(--olive);
-			margin-bottom: 1rem;
-		}
-
-		h1 {
-			font-size: clamp(2rem, 5vw, 3.8rem);
-			line-height: 1.03;
-			margin: 0;
-			max-width: 16ch;
-		}
-
-		.lead {
-			margin-top: 1rem;
-			font-size: 1.04rem;
-			color: var(--ink-soft);
-			max-width: 65ch;
-		}
-
-		.cta {
-			display: flex;
-			gap: 0.75rem;
-			flex-wrap: wrap;
-			margin-top: 1.4rem;
-		}
-
-		.btn {
-			text-decoration: none;
-			padding: 0.72rem 1.05rem;
-			border-radius: 999px;
-			font-weight: 600;
-			border: 1px solid transparent;
-		}
-
-		.btn-primary {
-			background: var(--accent);
-			color: #fff;
-		}
-
-		.btn-secondary {
-			border-color: var(--line);
-			color: var(--ink);
-			background: #fff;
-		}
-
-		.grid {
-			margin-top: 1.25rem;
-			display: grid;
-			grid-template-columns: repeat(3, minmax(0, 1fr));
-			gap: 0.8rem;
-		}
-
-		.tile {
-			background: var(--panel);
-			border: 1px solid var(--line);
-			border-radius: 14px;
-			padding: 0.95rem;
-		}
-
-		.tile strong {
-			display: block;
-			margin-bottom: 0.35rem;
-		}
-
-		.tile p {
-			margin: 0;
-			color: var(--ink-soft);
-			font-size: 0.94rem;
-		}
-
-		.meta {
-			margin-top: 1rem;
-			font-family: 'IBM Plex Mono', monospace;
-			font-size: 0.78rem;
-			color: #4f5e54;
-		}
-
-		@keyframes rise {
-			from { opacity: 0; transform: translateY(12px); }
-			to { opacity: 1; transform: translateY(0); }
-		}
-
-		@media (max-width: 840px) {
-			.hero { padding: 1.35rem; }
-			.grid { grid-template-columns: 1fr; }
-		}
-	</style>
-
-	<article class="hero">
+	<article class="surface">
 		<div class="kicker">COLONEL // APP TEMPLATE</div>
 		<h1>Your first Colonel app starts with opinionated clarity.</h1>
 		<p class="lead">
@@ -153,5 +25,4 @@
 		</div>
 
 		<div class="meta">GENERATED WITH create-colonel • Runtime: Bun • Language: TypeScript</div>
-	</article>
-</section>
+	</article>

package/template/resources/views/base/layouts/main.ejs

@@ -4,10 +4,147 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" href="/favicon.png" sizes="any">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
+
+        :root {
+            --ink: #0d1310;
+            --ink-soft: #203329;
+            --canvas: #f3f1e9;
+            --accent: #b8441a;
+            --accent-soft: #db7c31;
+            --panel: #ffffff;
+            --olive: #5e6a39;
+            --line: #d8d3c7;
+        }
+
+        * { box-sizing: border-box; }
+
+        body {
+            margin: 0;
+            background: radial-gradient(circle at 80% 10%, #f8e6c7 0%, var(--canvas) 38%, #ede8da 100%);
+            color: var(--ink);
+            font-family: 'Space Grotesk', sans-serif;
+            min-height: 100vh;
+        }
+
+        .page-shell {
+            max-width: 1040px;
+            margin: 0 auto;
+            padding: 2rem 1rem 3rem;
+        }
+
+        .surface {
+            border: 1px solid var(--line);
+            background: linear-gradient(125deg, #fffdf8 0%, #f6f3e9 100%);
+            border-radius: 22px;
+            padding: 2.2rem;
+            box-shadow: 0 16px 45px rgba(32, 51, 41, 0.09);
+            animation: rise 0.65s ease;
+        }
+
+        .kicker {
+            font-family: 'IBM Plex Mono', monospace;
+            letter-spacing: 0.1em;
+            font-size: 0.74rem;
+            color: var(--olive);
+            margin-bottom: 1rem;
+        }
+
+        h1 {
+            font-size: clamp(2rem, 5vw, 3.8rem);
+            line-height: 1.03;
+            margin: 0;
+            max-width: 16ch;
+        }
+
+        .lead {
+            margin-top: 1rem;
+            font-size: 1.04rem;
+            color: var(--ink-soft);
+            max-width: 65ch;
+        }
+
+        .cta {
+            display: flex;
+            gap: 0.75rem;
+            flex-wrap: wrap;
+            margin-top: 1.4rem;
+        }
+
+        .btn {
+            text-decoration: none;
+            padding: 0.72rem 1.05rem;
+            border-radius: 999px;
+            font-weight: 600;
+            border: 1px solid transparent;
+            display: inline-block;
+        }
+
+        .btn-primary {
+            background: var(--accent);
+            color: #fff;
+        }
+
+        .btn-secondary {
+            border-color: var(--line);
+            color: var(--ink);
+            background: #fff;
+        }
+
+        .meta {
+            margin-top: 1rem;
+            font-family: 'IBM Plex Mono', monospace;
+            font-size: 0.78rem;
+            color: #4f5e54;
+        }
+
+        .grid {
+            margin-top: 1.25rem;
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 0.8rem;
+        }
+
+        .tile {
+            background: var(--panel);
+            border: 1px solid var(--line);
+            border-radius: 14px;
+            padding: 0.95rem;
+        }
+
+        .tile strong {
+            display: block;
+            margin-bottom: 0.35rem;
+        }
+
+        .tile p {
+            margin: 0;
+            color: var(--ink-soft);
+            font-size: 0.94rem;
+        }
+
+        .list {
+            margin-top: 1rem;
+            padding-left: 1.1rem;
+        }
+
+        @keyframes rise {
+            from { opacity: 0; transform: translateY(12px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        @media (max-width: 840px) {
+            .surface { padding: 1.35rem; }
+            .grid { grid-template-columns: 1fr; }
+        }
+    </style>
     <%- title %>
 </head>
 <body>
-    <%- body %>
+    <main class="page-shell">
+        <%- body %>
+        <%- footer %>
+    </main>
 </body>
-    <%- footer %>
 </html>

package/template/resources/views/base/partials/footer.ejs

@@ -1,3 +1,3 @@
-<footer>
+<footer class="meta">
     <%- footerData %>
 </footer>

package/template/resources/views/users/index.ejs

@@ -1,13 +1,19 @@
-<html>
-    <head>
-        <title>Users</title>
-    </head>
-    <body>
-        <h1>Users</h1>
-        <ul>
-            <% users.forEach(user => { %>
-                <li><%= user.name %></li>
-            <% }); %>
-        </ul>
-    </body>
-</html>
+<section class="surface">
+    <div class="kicker">COLONEL // USERS</div>
+    <h1>Registered Users</h1>
+    <p class="lead">This page is served through grouped routes and rendered with the shared base layout.</p>
+
+    <ul class="list">
+        <% users.forEach(user => { %>
+            <li>
+                <strong><%= user.name %></strong><br>
+                <span><%= user.email %></span>
+            </li>
+        <% }); %>
+    </ul>
+
+    <div class="cta">
+        <a class="btn btn-secondary" href="/">Back Home</a>
+        <a class="btn btn-primary" href="/users/1">View User #1</a>
+    </div>
+</section>

package/template/resources/views/users/show.ejs

@@ -0,0 +1,18 @@
+<section class="surface">
+    <div class="kicker">COLONEL // USERS</div>
+    <h1><%= user.name %></h1>
+    <p class="lead">This page is served through grouped routes and rendered with the shared base layout.</p>
+
+    <ul class="list" style="list-style-type: none;">
+            <li>
+                <strong>Name: <%= user.name %></strong><br>
+            </li>
+            <li>
+                <span>Email: <%= user.email || 'Not provided' %></span>
+            </li>
+    </ul>
+
+    <div class="cta">
+        <a class="btn btn-secondary" href="/">Back Home</a>
+    </div>
+</section>

package/template/src/app/Http/Controllers/UserController.ts

@@ -6,14 +6,26 @@ export class UserController extends Controller {
     index(): Array<string | Record<string, any>> {
         return [
             'users/index',
-            { users: [{ id: 1, name: "John Doe" }, { id: 2, name: "Jane Doe" }] }
+            {
+                users: [
+                    { id: 1, name: "John Doe", email: "john@example.com" },
+                    { id: 2, name: "Jane Doe", email: "jane@example.com" }
+                ]
+            }
         ]}
 
-    show(req: HttpRequest): Record<string, string> {
+    show(req: HttpRequest): Array<string | Record<string, any>> {
         const id = req.params("id");
        
-        return {
-            "message": `Hello from UserController@show with id ${id}`
-        }
+        return [
+            'users/show',
+            {
+                user: {
+                    id,
+                    name: `User ${id}`,
+                    email: `user${id}@example.com`
+                }
+            }
+        ]
     }
 }   

package/template/src/config/routes/web.ts

@@ -6,16 +6,13 @@ const web = new Router();
 web.get('/favicon.ico', () => redirect('/favicon.png', 301));
 
 // Define your web routes here
-//web.get('/health', 'AppController@health');
 web.get('/health', () => new Response("OK", { status: 200 }));
 
 web.get('/', 'AppController@index');
-web.get('/users', 'UserController@index');
-web.get('/users/:id', 'UserController@show');
-//router.get('/users', 'UserController@index');
-//router.post('/users', 'UserController@store');
-//router.get('/users/:id', 'UserController@show');
-//router.put('/users/:id', 'UserController@update');
-//router.delete('/users/:id', 'UserController@destroy');
+
+web.group('/users', (users) => {
+	users.get('/', 'UserController@index');
+	users.get('/:id', 'UserController@show');
+});
 
 export default web;