asjs-express 1.4.1 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asjs-express",
-  "version": "1.4.1",
+  "version": "1.5.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

@@ -4,26 +4,128 @@ const { setupAsjs } = require('asjs-express');
 const app = express();
 const port = process.env.PORT || __PORT__;
 
+app.use(express.urlencoded({ extended: false }));
+
 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' },
+    { href: '/contact', label: 'Contact', activeMode: 'exact' }
   ],
+  brand: {
+    href: '/',
+    mark: '__APP_INITIALS__',
+    name: '__APP_TITLE__',
+    tagline: 'Built with ASJS + Express'
+  },
   transitions: 'fade',
   prefetch: true,
   loadingBar: true
 });
 
+// Home
 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 three-page starter built with ASJS and Express. SPA navigation, smooth transitions, and server-rendered pages are already set up.',
+  features: [
+    {
+      label: 'SPA Navigation',
+      text: 'Pages swap without a full reload. The header and layout stay in place while only the content area changes.'
+    },
+    {
+      label: 'Server Rendering',
+      text: 'Each page is fully rendered on the server. Route data is prepared in the callback before the HTML response is sent.'
+    },
+    {
+      label: 'Form Handling',
+      text: 'Forms submit to the server and return a new rendered state. Validation errors are shown without losing the page shell.'
+    }
+  ]
+}));
+
+// About
+app.get('/about', asjs.page('about', {
+  title: 'About — __APP_TITLE__',
+  headline: 'About this project',
+  description: 'This app is built with ASJS on top of Express. ASJS adds layouts, async page models, client-side transitions, and form helpers 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'
+  ]
+}));
+
+// Contact — GET
+const contactInitialState = {
+  title: 'Contact — __APP_TITLE__',
+  headline: 'Get in touch',
+  description: 'Send a message using the form below. This form is handled on the server and returns a validation state or a success state.',
+  formValues: { name: '', email: '', message: '' },
+  formErrors: {},
+  submitted: false
+};
+
+app.get('/contact', asjs.page('contact', contactInitialState));
+
+// Contact — POST
+app.post('/contact', asjs.createPageRoute('contact', {}, async (req) => {
+  const formValues = asjs.normalizeFields(req.body, ['name', 'email', 'message']);
+  const formErrors = asjs.validateFields(formValues, {
+    name: {
+      required: 'Please enter your name.'
+    },
+    email: {
+      required: 'Please enter your email address.',
+      pattern: {
+        value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+        message: 'Please enter a valid email address.'
+      }
+    },
+    message: {
+      required: 'Please write a message.',
+      minLength: {
+        value: 10,
+        message: 'Please write at least 10 characters.'
+      }
+    }
+  });
+
+  if (asjs.hasValidationErrors(formErrors)) {
+    return {
+      status: 422,
+      title: 'Contact — __APP_TITLE__',
+      headline: 'Get in touch',
+      description: 'A few fields need attention before the form can be sent.',
+      formValues,
+      formErrors,
+      submitted: false
+    };
+  }
+
+  return {
+    title: 'Message sent — __APP_TITLE__',
+    headline: 'Message received',
+    description: 'Your message has been received. This is a starter demo — no real email was sent.',
+    formValues: contactInitialState.formValues,
+    formErrors: {},
+    submitted: true,
+    sentValues: formValues
+  };
 }));
 
 app.use(asjs.errors());
 
 app.listen(port, () => {
-  console.log(`__APP_TITLE__ running at http://localhost:${port}`);
+  console.log('__APP_TITLE__ is running at http://localhost:' + port);
 });

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

@@ -0,0 +1,28 @@
+<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>
+    <a href="/contact" class="button button-secondary" data-asjs-transition="fade">Contact</a>
+  </div>
+</div>

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

@@ -0,0 +1,53 @@
+<% if (locals.submitted) { %>
+<div class="section-card status-panel--success" style="margin-top: 0;">
+  <span class="section-label" style="background: #dcfce7; color: #15803d;">Sent</span>
+  <h2 style="margin-top: 14px; letter-spacing: -0.04em;"><%= headline %></h2>
+  <p><%= description %></p>
+  <div class="render-summary-grid" style="margin-top: 20px;">
+    <div class="render-item">
+      <span>Name</span>
+      <strong><%= sentValues.name %></strong>
+    </div>
+    <div class="render-item">
+      <span>Email</span>
+      <strong><%= sentValues.email %></strong>
+    </div>
+  </div>
+  <div class="hero-actions" style="margin-top: 24px;">
+    <a href="/" class="button button-primary" data-asjs-transition="fade">Back to home</a>
+    <a href="/contact" class="button button-secondary" data-asjs-transition="fade">Send another</a>
+  </div>
+</div>
+<% } else { %>
+<div class="page-intro">
+  <span class="section-label">Contact</span>
+  <h1><%= headline %></h1>
+  <p><%= description %></p>
+</div>
+
+<div class="section-card form-panel">
+  <form class="webas-form" method="POST" action="/contact">
+    <div class="field-grid">
+      <div class="field-group">
+        <span>Name</span>
+        <input type="text" name="name" value="<%= formValues.name %>" placeholder="Your name" autocomplete="name">
+        <% if (formErrors.name) { %><span class="field-error"><%= formErrors.name %></span><% } %>
+      </div>
+      <div class="field-group">
+        <span>Email</span>
+        <input type="email" name="email" value="<%= formValues.email %>" placeholder="you@example.com" autocomplete="email">
+        <% if (formErrors.email) { %><span class="field-error"><%= formErrors.email %></span><% } %>
+      </div>
+    </div>
+    <div class="field-group">
+      <span>Message</span>
+      <textarea name="message" placeholder="Your message (at least 10 characters)"><%= formValues.message %></textarea>
+      <% if (formErrors.message) { %><span class="field-error"><%= formErrors.message %></span><% } %>
+    </div>
+    <div class="form-actions">
+      <button type="submit" class="button button-primary">Send message</button>
+      <span>The form is validated on the server before the page re-renders.</span>
+    </div>
+  </form>
+</div>
+<% } %>

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

@@ -1,5 +1,33 @@
-<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>
+    <a href="/contact" class="button button-secondary" data-asjs-transition="fade">Get in touch</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>