feat(examples): add hemx html pattern gallery

Add examples/html_examples as a copy-pasteable gallery for the first htmx-style HTML UX patterns using exact htmx URL slugs in the page and README. The slice covers click-to-edit, edit-row, delete-row, inline-validation, click-to-load, and active-search with .heml templates, generated resources, server-owned Rust state, and runtime-free selector targeting. req: htmx_equivalents/001 req: htmx_equivalents/002 req: examples/001
2026-06-23 07:22:40 +02:00
parent f1d84e4837
commit b3d72e8d82
16 changed files with 764 additions and 3 deletions
@@ -0,0 +1,69 @@
+<main data-hemx-root="gallery">
+  <header>
+    <p>Copy-pasteable hemx HTML patterns</p>
+    <h1>HTML UX pattern gallery</h1>
+    <p>Server-owned Rust state, boring .heml, generated resources, and tiny runtime behavior.</p>
+  </header>
+
+  <section id="click-to-edit" data-htmx-example="click-to-edit" aria-labelledby="click-to-edit-heading">
+    <h2 id="click-to-edit-heading">click-to-edit</h2>
+    <div data-hemx-slot="contact_card">
+      <template h-for="contact in &self.contacts" h-key="contact.id">
+        {+ contact +}
+      </template>
+    </div>
+  </section>
+
+  <section id="edit-row" data-htmx-example="edit-row" aria-labelledby="edit-row-heading">
+    <h2 id="edit-row-heading">edit-row</h2>
+    <p id="delete-row" data-htmx-example="delete-row">delete-row uses the same keyed row partial and a generated remove effect.</p>
+    <table>
+      <thead>
+        <tr><th>Task</th><th>Actions</th></tr>
+      </thead>
+      <tbody data-hemx-slot="editable_row">
+        <template h-for="row in &self.rows" h-key="row.id">
+          {+ row +}
+        </template>
+      </tbody>
+    </table>
+  </section>
+
+  <section id="inline-validation" data-htmx-example="inline-validation" aria-labelledby="validation-heading">
+    <h2 id="validation-heading">inline-validation</h2>
+    <form data-hemx-handle="validate_email" data-hemx-form="validate_email">
+      <label>Email <input name="email" +value="self.email" required="required"></label>
+      <button type="submit">Validate</button>
+      <p data-hemx-error-for="email"></p>
+      <p data-hemx-slot="email_status">{+ self.email_status +}</p>
+    </form>
+  </section>
+
+  <section id="click-to-load" data-htmx-example="click-to-load" aria-labelledby="load-heading">
+    <h2 id="load-heading">click-to-load</h2>
+    <ul data-hemx-slot="loaded_row">
+      <template h-for="row in &self.loaded_rows" h-key="row.id">
+        {+ row +}
+      </template>
+    </ul>
+    <form data-hemx-handle="load_more" data-hemx-form="load_more">
+      <input type="hidden" name="request" value="more">
+      <button type="submit">Load more</button>
+    </form>
+    <p data-hemx-slot="load_status">{+ self.load_status +}</p>
+  </section>
+
+  <section id="active-search" data-htmx-example="active-search" aria-labelledby="search-heading">
+    <h2 id="search-heading">active-search</h2>
+    <form data-hemx-handle="search" data-hemx-form="search">
+      <label>Search <input name="query" +value="self.query"></label>
+      <button type="submit">Search</button>
+    </form>
+    <p data-hemx-slot="search_status">{+ self.search_status +}</p>
+    <ul data-hemx-slot="search_result">
+      <template h-for="result in &self.search_results" h-key="result.id">
+        {+ result +}
+      </template>
+    </ul>
+  </section>
+</main>