asjs-express 1.5.0 → 1.7.0

package/package.json

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

@@ -5,6 +5,7 @@ const app = express();
 const port = process.env.PORT || __PORT__;
 
 app.use(express.urlencoded({ extended: false }));
+app.use(express.json());
 
 const asjs = setupAsjs(app, {
   rootDir: __dirname,
@@ -12,7 +13,7 @@ const asjs = setupAsjs(app, {
   navItems: [
     { href: '/', label: 'Home', activeMode: 'exact' },
     { href: '/about', label: 'About', activeMode: 'exact' },
-    { href: '/contact', label: 'Contact', activeMode: 'exact' }
+    { href: '/form', label: 'Contact', activeMode: 'exact' }
   ],
   brand: {
     href: '/',
@@ -25,32 +26,30 @@ const asjs = setupAsjs(app, {
   loadingBar: true
 });
 
-// Home
 app.get('/', asjs.page('home', {
   title: '__APP_TITLE__',
   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.',
+  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 area changes.'
+      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. Route data is prepared in the callback before the HTML response is sent.'
+      text: 'Each page is fully rendered on the server before it reaches the browser. Route data is prepared in the callback.'
     },
     {
-      label: 'Form Handling',
-      text: 'Forms submit to the server and return a new rendered state. Validation errors are shown without losing the page shell.'
+      label: 'Zero Build Step',
+      text: 'No bundler, no compiler. Write EJS-style templates and run with Node. It just works.'
     }
   ]
 }));
 
-// 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.',
+  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' },
@@ -66,66 +65,49 @@ app.get('/about', asjs.page('about', {
   ]
 }));
 
-// 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('/form', asjs.page('form', function(req) {
+  var sent = req.query.sent === '1';
+  return {
+    title: 'Contact — __APP_TITLE__',
+    headline: sent ? 'Message sent!' : 'Get in touch',
+    description: sent
+      ? 'Thank you for reaching out. We will get back to you soon.'
+      : 'Have a question or want to work together? Send us a message.',
+    submitted: sent,
+    values: {},
+    errors: {}
+  };
+}));
 
-app.get('/contact', asjs.page('contact', contactInitialState));
+app.post('/form', function(req, res) {
+  var body = req.body || {};
+  var name = (body.name || '').trim();
+  var email = (body.email || '').trim();
+  var subject = (body.subject || '').trim();
+  var message = (body.message || '').trim();
+  var errors = {};
 
-// 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 (name.length < 2) errors.name = 'Name must be at least 2 characters.';
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errors.email = 'Please enter a valid email address.';
+  if (!subject) errors.subject = 'Please select a subject.';
+  if (message.length < 10) errors.message = 'Message must be at least 10 characters.';
 
-  if (asjs.hasValidationErrors(formErrors)) {
-    return {
-      status: 422,
+  if (Object.keys(errors).length > 0) {
+    return asjs.render(res, 'form', {
       title: 'Contact — __APP_TITLE__',
       headline: 'Get in touch',
-      description: 'A few fields need attention before the form can be sent.',
-      formValues,
-      formErrors,
-      submitted: false
-    };
+      description: 'Have a question or want to work together? Send us a message.',
+      submitted: false,
+      values: body,
+      errors: errors
+    });
   }
 
-  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
-  };
-}));
+  res.redirect('/form?sent=1');
+});
 
 app.use(asjs.errors());
 
 app.listen(port, () => {
-  console.log('__APP_TITLE__ is running at http://localhost:' + port);
+  console.log('__APP_TITLE__ running at http://localhost:' + port);
 });

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

@@ -23,6 +23,5 @@
   </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>
+</div>

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

@@ -0,0 +1,76 @@
+<div class="page-intro">
+  <span class="section-label">Contact</span>
+  <h1><%= headline %></h1>
+  <p><%= description %></p>
+</div>
+
+<% if (submitted) { %>
+
+<div class="status-panel status-panel--success">
+  <h3>Message received!</h3>
+  <p>Thanks for reaching out. We typically respond within one business day.</p>
+  <div class="hero-actions" style="margin-top: 20px;">
+    <a href="/form" class="button button-primary" data-asjs-transition="fade">Send another</a>
+    <a href="/" class="button button-secondary" data-asjs-transition="fade">Back to home</a>
+  </div>
+</div>
+
+<% } else { %>
+
+<% if (Object.keys(errors).length > 0) { %>
+<div class="status-panel status-panel--error" style="margin-bottom: 0;">
+  <h3>Please fix the errors below</h3>
+  <p>Some fields need your attention before the form can be submitted.</p>
+</div>
+<% } %>
+
+<div class="section-card form-panel">
+  <span class="section-label">Send a message</span>
+  <h2>We'd love to hear from you</h2>
+  <p>Fill in the form and we'll get back to you as soon as possible.</p>
+
+  <form action="/form" method="POST" class="asjs-form" style="margin-top: 28px;">
+
+    <div class="field-grid">
+      <div class="field-group<% if (errors.name) { %> has-error<% } %>">
+        <label class="field-label" for="f-name">Full name</label>
+        <input id="f-name" type="text" name="name" value="<%= values.name || '' %>" placeholder="Your full name" autocomplete="name" required>
+        <% if (errors.name) { %><span class="field-error"><%= errors.name %></span><% } %>
+      </div>
+      <div class="field-group<% if (errors.email) { %> has-error<% } %>">
+        <label class="field-label" for="f-email">Email address</label>
+        <input id="f-email" type="email" name="email" value="<%= values.email || '' %>" placeholder="you@example.com" autocomplete="email" required>
+        <% if (errors.email) { %><span class="field-error"><%= errors.email %></span><% } %>
+      </div>
+    </div>
+
+    <div class="field-group<% if (errors.subject) { %> has-error<% } %>">
+      <label class="field-label" for="f-subject">Subject</label>
+      <select id="f-subject" name="subject" class="field-select">
+        <option value="">Select a topic…</option>
+        <option value="general"  <%= values.subject === 'general'  ? 'selected' : '' %>>General enquiry</option>
+        <option value="project"  <%= values.subject === 'project'  ? 'selected' : '' %>>Project collaboration</option>
+        <option value="support"  <%= values.subject === 'support'  ? 'selected' : '' %>>Technical support</option>
+        <option value="other"    <%= values.subject === 'other'    ? 'selected' : '' %>>Other</option>
+      </select>
+      <% if (errors.subject) { %><span class="field-error"><%= errors.subject %></span><% } %>
+    </div>
+
+    <div class="field-group<% if (errors.message) { %> has-error<% } %>">
+      <label class="field-label" for="f-message">Message</label>
+      <textarea id="f-message" name="message" rows="6" placeholder="Write your message here…" required><%= values.message || '' %></textarea>
+      <% if (errors.message) { %><span class="field-error"><%= errors.message %></span><% } %>
+    </div>
+
+    <div class="form-actions">
+      <span class="form-hint">We typically respond within 24 hours.</span>
+      <button type="submit" class="button button-primary">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13M22 2L15 22l-4-9-9-4 20-7z"/></svg>
+        Send message
+      </button>
+    </div>
+
+  </form>
+</div>
+
+<% } %>

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

@@ -4,7 +4,6 @@
   <p><%= description %></p>
   <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>
 

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

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-theme="light">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><%= title %></title>
     <%- asjs.clientTags({ preload: true, theme: true }) %>
+    <script>(function(){var t=localStorage.getItem('asjs-theme')||(window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light');document.documentElement.setAttribute('data-theme',t);})();</script>
   </head>
   <body<%- asjs.bodyAttrs() %>>
     <%- asjs.progressMarkup() %>
@@ -18,5 +19,30 @@
         <span>&copy; __YEAR__ __APP_TITLE__</span>
       </footer>
     </div>
+    <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme" title="Toggle light / dark">
+      <span class="toggle-icon toggle-icon--light">
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
+      </span>
+      <span class="toggle-icon toggle-icon--dark">
+        <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+      </span>
+    </button>
+    <script>
+      (function(){
+        var btn=document.getElementById('theme-toggle');
+        if(!btn)return;
+        function sync(t){
+          document.documentElement.setAttribute('data-theme',t);
+          btn.querySelector('.toggle-icon--light').style.display=t==='dark'?'flex':'none';
+          btn.querySelector('.toggle-icon--dark').style.display=t==='dark'?'none':'flex';
+        }
+        sync(document.documentElement.getAttribute('data-theme')||'light');
+        btn.addEventListener('click',function(){
+          var next=document.documentElement.getAttribute('data-theme')==='dark'?'light':'dark';
+          localStorage.setItem('asjs-theme',next);
+          sync(next);
+        });
+      })();
+    </script>
   </body>
 </html>

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

@@ -1,53 +0,0 @@
-<% 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>
-<% } %>