asjs-express 1.4.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asjs-express",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "Lightweight Express view engine with EJS-like templates, layouts, async page rendering, form enhancement, and a built-in client router.",
   "main": "index.js",
   "bin": {

package/templates/minimal/app.js.tpl

@@ -8,8 +8,15 @@ const asjs = setupAsjs(app, {
   rootDir: __dirname,
   defaultLayout: 'layouts/main',
   navItems: [
-    { href: '/', label: 'Home', activeMode: 'exact' }
+    { href: '/', label: 'Home', activeMode: 'exact' },
+    { href: '/about', label: 'About', activeMode: 'exact' }
   ],
+  brand: {
+    href: '/',
+    mark: '__APP_INITIALS__',
+    name: '__APP_TITLE__',
+    tagline: 'Built with ASJS + Express'
+  },
   transitions: 'fade',
   prefetch: true,
   loadingBar: true
@@ -17,13 +24,45 @@ const asjs = setupAsjs(app, {
 
 app.get('/', asjs.page('home', {
   title: '__APP_TITLE__',
-  headline: '__APP_TITLE__ is ready.',
-  description: 'Header, router, loading bar, and SPA-ready page transitions are already connected.',
-  nextStep: 'Add a second route whenever you need it. ASJS will keep the same internal navigation flow.'
+  headline: 'Welcome to __APP_TITLE__',
+  description: 'A starter built with ASJS and Express. SPA navigation, smooth transitions, and server-rendered pages are ready out of the box.',
+  features: [
+    {
+      label: 'SPA Navigation',
+      text: 'Pages swap without a full reload. The header and layout stay in place while only the content changes.'
+    },
+    {
+      label: 'Server Rendering',
+      text: 'Each page is fully rendered on the server before it reaches the browser. Route data is prepared in the callback.'
+    },
+    {
+      label: 'Zero Build Step',
+      text: 'No bundler, no compiler. Write EJS-style templates and run with Node. It just works.'
+    }
+  ]
+}));
+
+app.get('/about', asjs.page('about', {
+  title: 'About — __APP_TITLE__',
+  headline: 'About __APP_TITLE__',
+  description: 'Built with ASJS on top of Express. Layouts, async page models, client-side transitions, and a loading bar — without a front-end build step.',
+  facts: [
+    { label: 'Engine', value: 'ASJS __ASJS_VERSION__' },
+    { label: 'Framework', value: 'Express' },
+    { label: 'Rendering', value: 'Server-first' },
+    { label: 'Templates', value: 'EJS syntax' }
+  ],
+  capabilities: [
+    'Shared layouts with a consistent header and navigation across all pages',
+    'SPA navigation with smooth page transitions and a top loading bar',
+    'Async route callbacks that prepare data before the HTML is rendered',
+    'Form progressive enhancement with server-side validation',
+    'Plugin and hook API for attaching middleware and shared services'
+  ]
 }));
 
 app.use(asjs.errors());
 
 app.listen(port, () => {
-  console.log(`__APP_TITLE__ running at http://localhost:${port}`);
+  console.log('__APP_TITLE__ running at http://localhost:' + port);
 });

package/templates/minimal/views/about.asjs.tpl

@@ -0,0 +1,27 @@
+<div class="page-intro">
+  <span class="section-label">About</span>
+  <h1><%= headline %></h1>
+  <p><%= description %></p>
+</div>
+
+<div class="render-summary-grid render-summary-grid--wide">
+  <% facts.forEach(function(fact) { %>
+  <div class="render-item">
+    <span><%= fact.label %></span>
+    <strong><%= fact.value %></strong>
+  </div>
+  <% }) %>
+</div>
+
+<div class="section-card">
+  <span class="section-label">Capabilities</span>
+  <h2>What ASJS provides</h2>
+  <ul class="check-list">
+    <% capabilities.forEach(function(cap) { %>
+    <li><%= cap %></li>
+    <% }) %>
+  </ul>
+  <div class="hero-actions" style="margin-top: 24px;">
+    <a href="/" class="button button-primary" data-asjs-transition="fade">Back to home</a>
+  </div>
+</div>

package/templates/minimal/views/home.asjs.tpl

@@ -1,5 +1,32 @@
-<section style="max-width: 720px; margin: 40px auto; padding: 24px;">
+<div class="page-intro">
+  <span class="section-label">Starter</span>
   <h1><%= headline %></h1>
   <p><%= description %></p>
-  <p><%= nextStep %></p>
-</section>
+  <div class="hero-actions">
+    <a href="/about" class="button button-primary" data-asjs-transition="fade">Learn more</a>
+  </div>
+</div>
+
+<div class="section-card">
+  <span class="section-label">What's included</span>
+  <h2>Built-in from the start</h2>
+  <div class="card-grid" style="margin-top: 16px;">
+    <% features.forEach(function(feature) { %>
+    <div class="info-card">
+      <h3><%= feature.label %></h3>
+      <p><%= feature.text %></p>
+    </div>
+    <% }) %>
+  </div>
+</div>
+
+<div class="section-card code-panel">
+  <span class="section-label">Quick start</span>
+  <h2>Add a new page in three lines</h2>
+  <p>Open <code>app.js</code> and add a route. ASJS handles the layout, navigation state, and transitions automatically.</p>
+  <pre class="code-block">app.get('/new-page', asjs.page('new-page', {
+  title: 'New page',
+  headline: 'Hello from a new page'
+}));</pre>
+  <p style="margin-top: 14px;">Then create <code>views/new-page.asjs</code> with your HTML. The layout, header, and navigation are inherited.</p>
+</div>

package/templates/minimal/views/layouts/main.asjs.tpl

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,9 +8,15 @@
   </head>
   <body<%- asjs.bodyAttrs() %>>
     <%- asjs.progressMarkup() %>
-    <%- asjs.header() %>
-    <main class="view-frame"<%- asjs.viewAttrs() %>>
-      <%- body %>
-    </main>
+    <div class="page-shell">
+      <%- asjs.header() %>
+      <main class="view-frame"<%- asjs.viewAttrs() %>>
+        <%- body %>
+      </main>
+      <footer class="footer">
+        <span>Built with <strong>ASJS __ASJS_VERSION__</strong> + Express</span>
+        <span>&copy; __YEAR__ __APP_TITLE__</span>
+      </footer>
+    </div>
   </body>
 </html>