tmk241/hemx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(examples): add saas tutorial skeleton

Browse Source 
Add a compile-tested v1 tutorial skeleton that proves the production-shaped app boundary without provider-heavy scope: auth/session context, CSRF-checked mutation, local persistence adapter, generated form/slot/keyed row/page/push effects, plain CSS, SSE shape, and one explicit metrics island.

req: examples/001

req: auth/001

req: auth/002

req: auth/004

req: form/001

req: failure/004

req: page_swap/002

req: push/003
This commit is contained in:
slhx agent
2026-06-05 09:15:57 +02:00
parent 3dfb3b684f
commit 38cfb263aa
15 changed files with 716 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/saas/templates/dashboard.heml
+41
View File
@@ -0,0 +1,41 @@
<section class="dashboard" data-hemx-root="dashboard" data-hemx-sse="/events">
<header class="hero">
<p class="eyebrow">Production-shaped SaaS path</p>
<h1>Projects</h1>
<p class="lede">Auth-gated mutations, CSRF checks, local persistence, typed forms, generated swaps, page swaps, live status, plain CSS, and one explicit island.</p>
</header>
<nav class="tabs" data-hemx-slot="nav">
<a href="/" data-hemx-nav="">Projects</a>
<button type="button" data-hemx-handle="open_settings">Settings</button>
</nav>
<section class="panel" data-hemx-slot="page_panel">
<form class="project-form" data-hemx-handle="create_project" data-hemx-form="new_project" data-hemx-disable-while-pending>
<input type="hidden" name="csrf" +value="self.csrf">
<label>Project name
<input name="name" required="required" maxlength="64" value="Launch checklist">
</label>
<button type="submit">Create project</button>
<p class="field-error" data-hemx-error-for="name"></p>
</form>
<p class="flash" data-hemx-slot="flash">{+ self.flash +}</p>
<p class="summary" data-hemx-slot="summary">{+ self.summary +}</p>
<ul class="project-list" data-hemx-slot="project_row">
<template h-for="row in &self.rows" h-key="row.id">
{+ row +}
</template>
</ul>
</section>
<section class="status-row">
<p data-hemx-slot="live_status">Waiting for status…</p>
<article class="metrics-island" data-hemx-island="metrics" +data-project-count="self.project_count">
<h2>Metrics island</h2>
<canvas width="320" height="140" aria-label="Project metrics chart"></canvas>
<p data-island-readout="">Waiting for island script…</p>
</article>
</section>
</section>