Adding a page

Generate a starter

npm run page:new -- attendance

The generator copies starter.html to attendance.html and refuses to overwrite an existing page. Use lowercase names with hyphens. Names containing template or -new are excluded from builds. Restart the development server after adding a page.

Add content

The starter uses the shared dashboard layout:

{{> head}}
{{> sidebar}}
<div class="main-wrapper" id="mainWrapper">
  {{> header}}
  <main class="dashboard-content" id="main-content">
    <div class="container-fluid">
      <h1>{{pageTitle}}</h1>
      <!-- Add Bootstrap components here -->
    </div>
  </main>
  {{> footer}}
</div>
{{> scripts}}

Keep the main-content ID for the skip link, and the sidebar/main-wrapper IDs for responsive shell controls.

Set metadata

New pages receive a title derived from their filename. Add a pageConfigs entry in src/config/pages.js when you need a custom title, description or breadcrumb. Additional stylesheet/script entries can be configured there. Keep scripts as modules when importing npm packages.

Add navigation

Add a link to src/partials/sidebar.hbs. If the page belongs to an existing sidebar group, add its filename without .html to that group in NAV_GROUPS, so the group expands on the current page.

Add optional libraries

Use a DOM hook or await Kiaalap.load(...) for optional libraries. window.Chart is available on detected chart demo pages. For a chart added later, load it explicitly. See Charts.

Verify

npm run check
npm run test:browser

The browser suite discovers HTML pages automatically. Add interaction tests when your new behavior needs verification. Forms are demo interfaces until wired to your backend.