Skip to content

Improve readability of interactive examples in documentation #142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bitifet merged 5 commits into from
Mar 31, 2026
Merged

Improve readability of interactive examples in documentation #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
961523e
Initial plan
Copilot Mar 30, 2026
7f29901
docs: fix HTML indentation in all interactive example captures
Copilot Mar 31, 2026
bd8b6b9
docs: remove █ trick from direct captures; fix editor HTML re-indenta…
Copilot Mar 31, 2026
f1b6575
docs: fix remaining col-0 indentation issues in 5 doc files
Copilot Mar 31, 2026
902b644
Fix Ace editor indentation: preserve spaces through HTML compressor
Copilot Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions docs/_about/faq.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,10 +318,10 @@ inside have it as their natural context:
{% raw %} <!-- faq_singleton_color {{{ --> {% endraw %}
{% capture faq_singleton_color_html -%}
<div id="myForm$$">
<span data-smark='{"type":"color","name":"bgcolor"}'>
<span data-smark='{"type":"color","name":"bgcolor"}'>
<input data-smark>
<button data-smark='{"action":"clear"}'>❌ Clear</button>
</span>
</span>
</div>{%- endcapture %}
{% raw %} <!-- }}} --> {% endraw %}

Expand Down Expand Up @@ -436,13 +436,13 @@ The following example demonstrates the full technique:
{% raw %} <!-- faq_animations {{{ --> {% endraw %}
{% capture faq_animations_html -%}
<div id="myForm$$">
<ul data-smark='{"type":"list","name":"items","min_items":1}'>
<li>
<input data-smark type="text" name="value" placeholder="Item…">
<button data-smark='{"action":"removeItem"}'>✕</button>
</li>
</ul>
<button data-smark='{"action":"addItem","context":"items"}'>➕ Add item</button>
<ul data-smark='{"type":"list","name":"items","min_items":1}'>
<li>
<input data-smark type="text" name="value" placeholder="Item…">
<button data-smark='{"action":"removeItem"}'>✕</button>
</li>
</ul>
<button data-smark='{"action":"addItem","context":"items"}'>➕ Add item</button>
</div>{%- endcapture %}
{% raw %} <!-- }}} --> {% endraw %}

Expand Down Expand Up @@ -1036,7 +1036,7 @@ of the named component without requiring an extra wrapper:
{% raw %} <!-- faq_mixin_labeled_input {{{ --> {% endraw %}
{% capture faq_mixin_labeled_input_html -%}
<div id="myForm$$">
<div data-smark='{"type":"form","name":"person"}'>
<div data-smark='{"type":"form","name":"person"}'>
<div data-smark='{"type":"#labeledInput","name":"firstName"}' data-label="First name"></div>
<div data-smark='{"type":"#labeledInput","name":"lastName"}' data-label="Last name"></div>
</div>
Expand Down
831 changes: 416 additions & 415 deletions docs/_about/showcase.md
View file
Open in desktop

Large diffs are not rendered by default.

90 changes: 45 additions & 45 deletions docs/_advanced_concepts/data_import_and_export.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,25 +93,25 @@ The structure of the exported value mirrors the nesting of the form:
{% raw %} <!-- capture export_structure_html {{{ --> {% endraw %}
{% capture export_structure_html -%}
<div id="myForm$$">
<fieldset data-smark='{"type":"form","name":"order"}'>
<fieldset data-smark='{"type":"form","name":"order"}'>
<legend>Order</legend>
<p>
<label data-smark>Customer:</label>
<input data-smark type="text" name="customer">
<label data-smark>Customer:</label>
<input data-smark type="text" name="customer">
</p>
<p>
<label data-smark>Notes:</label>
<textarea data-smark name="notes"></textarea>
<label data-smark>Notes:</label>
<textarea data-smark name="notes"></textarea>
</p>
<ul data-smark='{"type":"list","name":"items","min_items":0}'>
<li>
<input data-smark type="text" name="product" placeholder="Product">
<input data-smark type="number" name="qty" placeholder="Qty">
<button data-smark='{"action":"removeItem"}'>➖</button>
</li>
<li>
<input data-smark type="text" name="product" placeholder="Product">
<input data-smark type="number" name="qty" placeholder="Qty">
<button data-smark='{"action":"removeItem"}'>➖</button>
</li>
</ul>
<button data-smark='{"action":"addItem","context":"items"}'>➕ Add item</button>
</fieldset>
</fieldset>
</div>{%
endcapture %}
{% raw %} <!-- }}} --> {% endraw %}
Expand Down Expand Up @@ -229,18 +229,18 @@ The `import` action accepts:
{% raw %} <!-- capture import_example_html {{{ --> {% endraw %}
{% capture import_example_html -%}
<div id="myForm$$">
<p>
<p>
<label data-smark>Name:</label>
<input data-smark type="text" name="name">
</p>
<p>
</p>
<p>
<label data-smark>Email:</label>
<input data-smark type="email" name="email">
</p>
<p>
</p>
<p>
<label data-smark>Role:</label>
<input data-smark type="text" name="role">
</p>
</p>
</div>{%
endcapture %}
{% raw %} <!-- }}} --> {% endraw %}
Expand Down Expand Up @@ -370,18 +370,18 @@ a "New record" button.
{% raw %} <!-- capture clear_vs_reset_html {{{ --> {% endraw %}
{% capture clear_vs_reset_html -%}
<div id="myForm$$">
<div data-smark='{"type":"form","name":"task","value":{"title":"Buy groceries","priority":"medium"}}'>
<div data-smark='{"type":"form","name":"task","value":{"title":"Buy groceries","priority":"medium"}}'>
<p>
<label data-smark>Title:</label>
<input data-smark type="text" name="title">
<label data-smark>Title:</label>
<input data-smark type="text" name="title">
</p>
<p>
<label data-smark>Priority:</label>
<input data-smark type="text" name="priority">
<label data-smark>Priority:</label>
<input data-smark type="text" name="priority">
</p>
<p>
<button data-smark='{"action":"clear","context":"task"}'>❌ Clear</button>
<button data-smark='{"action":"reset","context":"task"}'>♻️ Reset</button>
<button data-smark='{"action":"clear","context":"task"}'>❌ Clear</button>
<button data-smark='{"action":"reset","context":"task"}'>♻️ Reset</button>
</p>
</div>
</div>{%
Expand Down Expand Up @@ -464,43 +464,43 @@ directly into its target (the shipping address) subform:
{% raw %} <!-- capture pipe_example_html {{{ --> {% endraw %}
{% capture pipe_example_html -%}
<div id="myForm$$">
<fieldset data-smark='{"type":"form","name":"billing"}'>
<fieldset data-smark='{"type":"form","name":"billing"}'>
<legend>Billing address</legend>
<p>
<label data-smark>Street:</label>
<input data-smark type="text" name="street">
<label data-smark>Street:</label>
<input data-smark type="text" name="street">
</p>
<p>
<label data-smark>City:</label>
<input data-smark type="text" name="city">
<label data-smark>City:</label>
<input data-smark type="text" name="city">
</p>
<p>
<label data-smark>Postcode:</label>
<input data-smark type="text" name="postcode">
<label data-smark>Postcode:</label>
<input data-smark type="text" name="postcode">
</p>
</fieldset>
<p>
</fieldset>
<p>
<button data-smark='{
"action":"export",
"context":"billing",
"target":"../shipping"
"action":"export",
"context":"billing",
"target":"../shipping"
}'>📋 Copy to shipping</button>
</p>
<fieldset data-smark='{"type":"form","name":"shipping"}'>
</p>
<fieldset data-smark='{"type":"form","name":"shipping"}'>
<legend>Shipping address</legend>
<p>
<label data-smark>Street:</label>
<input data-smark type="text" name="street">
<label data-smark>Street:</label>
<input data-smark type="text" name="street">
</p>
<p>
<label data-smark>City:</label>
<input data-smark type="text" name="city">
<label data-smark>City:</label>
<input data-smark type="text" name="city">
</p>
<p>
<label data-smark>Postcode:</label>
<input data-smark type="text" name="postcode">
<label data-smark>Postcode:</label>
<input data-smark type="text" name="postcode">
</p>
</fieldset>
</fieldset>
</div>{%
endcapture %}
{% raw %} <!-- }}} --> {% endraw %}
Expand Down
8 changes: 4 additions & 4 deletions docs/_advanced_concepts/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,10 +274,10 @@ The recommended pattern is to use an `export` trigger and intercept the
{% raw %} <!-- events_submit_example {{{ --> {% endraw %}
{% capture events_submit_example_html -%}
<div id="myForm$$">
<input data-smark type="text" name="firstName" placeholder="First name">
<input data-smark type="text" name="lastName" placeholder="Last name">
<button data-smark='{"action":"export"}'>Submit</button>
<pre id="output" style="background:#f4f4f4;padding:0.5em;margin-top:0.5em;min-height:2em"></pre>
<input data-smark type="text" name="firstName" placeholder="First name">
<input data-smark type="text" name="lastName" placeholder="Last name">
<button data-smark='{"action":"export"}'>Submit</button>
<pre id="output" style="background:#f4f4f4;padding:0.5em;margin-top:0.5em;min-height:2em"></pre>
</div>{%- endcapture %}
{% raw %} <!-- }}} --> {% endraw %}

Expand Down
74 changes: 37 additions & 37 deletions docs/_advanced_concepts/form_traversing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,16 +378,16 @@ while (currentItem) {
{% raw %} <!-- form_trav_copy_adjacent {{{ --> {% endraw %}
{% capture form_trav_copy_adjacent_html -%}
<div id="myForm$$">
<ul data-smark='{"name": "employees", "type": "list", "of": "form"}'>
<ul data-smark='{"name": "employees", "type": "list", "of": "form"}'>
<li>
<input name="name" data-smark placeholder="Name">
<input name="email" data-smark placeholder="Email">
<button data-smark='{"action":"export","target":".+1"}'>Copy to Next</button>
<button data-smark='{"action":"import","target":".-1"}'>Copy from Previous</button>
<button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
<input name="name" data-smark placeholder="Name">
<input name="email" data-smark placeholder="Email">
<button data-smark='{"action":"export","target":".+1"}'>Copy to Next</button>
<button data-smark='{"action":"import","target":".-1"}'>Copy from Previous</button>
<button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
</li>
</ul>
<button data-smark='{"action":"addItem","context":"employees"}'>➕ Add</button>
</ul>
<button data-smark='{"action":"addItem","context":"employees"}'>➕ Add</button>
</div>{%- endcapture %}
{% raw %} <!-- }}} --> {% endraw %}

Expand Down Expand Up @@ -424,17 +424,17 @@ async function validateSequentially(list) {
{% raw %} <!-- form_trav_navigation_ui {{{ --> {% endraw %}
{% capture form_trav_navigation_ui_html -%}
<div id="myForm$$">
<div data-smark='{"name": "records", "type": "list", "of": "form"}'>
<div data-smark='{"name": "records", "type": "list", "of": "form"}'>
<div>
<input name="data" data-smark>
<div class="navigation">
<button data-smark='{"action":"import","context":".","target":".-1"}'>← Copy from Previous</button>
<button data-smark='{"action":"export","context":".","target":".+1"}'>Copy to Next →</button>
</div>
<button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
<input name="data" data-smark>
<div class="navigation">
<button data-smark='{"action":"import","context":".","target":".-1"}'>← Copy from Previous</button>
<button data-smark='{"action":"export","context":".","target":".+1"}'>Copy to Next →</button>
</div>
<button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
</div>
</div>
<button data-smark='{"action":"addItem","context":"records"}'>➕ Add</button>
</div>
<button data-smark='{"action":"addItem","context":"records"}'>➕ Add</button>
</div>{%- endcapture %}
{% raw %} <!-- }}} --> {% endraw %}

Expand Down Expand Up @@ -494,29 +494,29 @@ This example demonstrates a practical implementation of sibling navigation for d
{% raw %} <!-- form_trav_practical_copy {{{ --> {% endraw %}
{% capture form_trav_practical_copy_html -%}
<div id="myForm$$">
<div data-smark='{"name": "contacts", "type": "list", "of": "form", "min_items": 1}'>
<div data-smark='{"name": "contacts", "type": "list", "of": "form", "min_items": 1}'>
<fieldset>
<legend>Contact Information</legend>
<p>
<label data-smark>Name:</label>
<input name="name" data-smark type="text">
</p>
<p>
<label data-smark>Email:</label>
<input name="email" data-smark type="email">
</p>
<p>
<label data-smark>Phone:</label>
<input name="phone" data-smark type="tel">
</p>
<div class="actions">
<button data-smark='{"action":"export","target":".+1"}'>📋 Copy to Next</button>
<button data-smark='{"action":"import","target":".-1"}'>📥 Copy from Previous</button>
<button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
<legend>Contact Information</legend>
<p>
<label data-smark>Name:</label>
<input name="name" data-smark type="text">
</p>
<p>
<label data-smark>Email:</label>
<input name="email" data-smark type="email">
</p>
<p>
<label data-smark>Phone:</label>
<input name="phone" data-smark type="tel">
</p>
<div class="actions">
<button data-smark='{"action":"export","target":".+1"}'>📋 Copy to Next</button>
<button data-smark='{"action":"import","target":".-1"}'>📥 Copy from Previous</button>
<button data-smark='{"action":"removeItem"}'>🗑️ Remove</button>
</div>
</fieldset>
</div>
<button data-smark='{"action":"addItem","context":"contacts"}'>➕ Add Contact</button>
</div>
<button data-smark='{"action":"addItem","context":"contacts"}'>➕ Add Contact</button>
</div>{%- endcapture %}
{% raw %} <!-- }}} --> {% endraw %}

Expand Down
28 changes: 14 additions & 14 deletions docs/_advanced_concepts/hotkeys.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,22 +110,22 @@ re-used in different parts of the form without conflict:
{% raw %} <!-- hotkeys_context_sensitivity {{{ --> {% endraw %}
{% capture hotkeys_context_sensitivity_html -%}
<div id="myForm$$">
<ul data-smark='{"type":"list","name":"users"}'>
<ul data-smark='{"type":"list","name":"users"}'>
<li>
<input data-smark type="text" name="name" placeholder="User name">
<ul data-smark='{"type":"list","name":"phones"}'>
<li>
<input type="tel" data-smark name="phone" placeholder="Phone">
<!-- Ctrl+- removes a phone when focus is inside the phones list -->
<button data-smark='{"action":"removeItem","hotkey":"-"}'>➖ Phone</button>
</li>
</ul>
<button data-smark='{"action":"addItem","context":"phones","hotkey":"+"}'>➕ Add phone</button>
<!-- Ctrl+- removes a user when focus is at the user level (outside phones) -->
<button data-smark='{"action":"removeItem","hotkey":"-"}'>➖ Remove user</button>
<input data-smark type="text" name="name" placeholder="User name">
<ul data-smark='{"type":"list","name":"phones"}'>
<li>
<input type="tel" data-smark name="phone" placeholder="Phone">
<!-- Ctrl+- removes a phone when focus is inside the phones list -->
<button data-smark='{"action":"removeItem","hotkey":"-"}'>➖ Phone</button>
</li>
</ul>
<button data-smark='{"action":"addItem","context":"phones","hotkey":"+"}'>➕ Add phone</button>
<!-- Ctrl+- removes a user when focus is at the user level (outside phones) -->
<button data-smark='{"action":"removeItem","hotkey":"-"}'>➖ Remove user</button>
</li>
</ul>
<button data-smark='{"action":"addItem","context":"users","hotkey":"+"}'>➕ Add user</button>
</ul>
<button data-smark='{"action":"addItem","context":"users","hotkey":"+"}'>➕ Add user</button>
</div>{%- endcapture %}
{% raw %} <!-- }}} --> {% endraw %}

Expand Down
Loading