Merge remote-tracking branch 'origin/master'

www/content/_index.md

@@ -91,19 +91,19 @@ if(window.location.search=="?ads=true") {
 </div>
 
 <div class="alert">
-<b>NEWS:</b> htmx 2.0 has been released! It is not currently marked as <a href="https://docs.npmjs.com/cli/v10/commands/npm-dist-tag#purpose"><code>latest</code></a> 
-in NPM so that people using the <a href="https://v1.htmx.org">1.x line</a> are not accidentally upgraded. We will mark 
+<b>NEWS:</b> htmx 2.0 has been released! It is not currently marked as <a href="https://docs.npmjs.com/cli/v10/commands/npm-dist-tag#purpose"><code>latest</code></a>
+in NPM so that people using the <a href="https://v1.htmx.org">1.x line</a> are not accidentally upgraded. We will mark
 2.0 as <code>latest</code> at some point in 2025.
 </div>
 
 <h2>introduction</h2>
 
-htmx gives you access to [AJAX](@/docs.md#ajax), [CSS Transitions](@/docs.md#css_transitions), [WebSockets](@/docs.md#websockets-and-sse) and [Server Sent Events](@/docs.md#websockets-and-sse) 
-directly in HTML, using [attributes](@/reference.md#attributes), so you can build 
-[modern user interfaces](@/examples/_index.md) with the [simplicity](https://en.wikipedia.org/wiki/HATEOAS) and 
+htmx gives you access to [AJAX](@/docs.md#ajax), [CSS Transitions](@/docs.md#css_transitions), [WebSockets](@/docs.md#websockets-and-sse) and [Server Sent Events](@/docs.md#websockets-and-sse)
+directly in HTML, using [attributes](@/reference.md#attributes), so you can build
+[modern user interfaces](@/examples/_index.md) with the [simplicity](https://en.wikipedia.org/wiki/HATEOAS) and
 [power](https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) of hypertext
 
-htmx is small ([~14k min.gz'd](https://unpkg.com/htmx.org/dist/)), 
+htmx is small ([~14k min.gz'd](https://unpkg.com/htmx.org/dist/)),
 [dependency-free](https://github.com/bigskysoftware/htmx/blob/master/package.json),
 [extendable](https://extensions.htmx.org) & has **reduced** code base sizes by [67% when compared with react](@/essays/a-real-world-react-to-htmx-port.md)
 
@@ -307,7 +307,6 @@ Thank you to all our generous <a href="https://github.com/sponsors/bigskysoftwar
   </a>
 </td>
 </tr>
-/tr>
 <tr>
 <td></td>
 <td>

www/content/attributes/hx-request.md

@@ -11,7 +11,7 @@ The `hx-request` attribute allows you to configure various aspects of the reques
 These attributes are set using a JSON-like syntax:
 
 ```html
-<div ... hx-request='\"timeout\":100'>
+<div ... hx-request='{"timeout":100}'>
  ...
 </div>
 ```

www/content/docs.md

@@ -380,7 +380,7 @@ attribute with a CSS selector to do so:
 Here we call out the indicator explicitly by id. Note that we could have placed the class on the parent `div` as well
 and had the same effect.
 
-You can also add the [the `disabled` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) to
+You can also add the [`disabled` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled) to
 elements for the duration of a request by using the [hx-disabled-elt](@/attributes/hx-disabled-elt.md) attribute.
 
 ### Targets
@@ -888,7 +888,7 @@ First we need to initialize elements that have the class in new content:
 ```javascript
 htmx.onLoad(function (target) {
  // find all elements in the new content that should be
- // an editor and init w/ quill
+ // an editor and init w/ TomSelect
  var editors = target.querySelectorAll(".tomselect")
  .forEach(elt => new TomSelect(elt))
 });
@@ -1641,7 +1641,7 @@ listed below:
 | `htmx.config.inlineStyleNonce` | defaults to `''`, meaning that no nonce will be added to inline styles |
 | `htmx.config.useTemplateFragments` | defaults to `false`, HTML template tags for parsing content from the server (not IE11 compatible!) |
 | `htmx.config.wsReconnectDelay` | defaults to `full-jitter` |
-| `htmx.config.wsBinaryType` | defaults to `blob`, the [the type of binary data](https://developer.mozilla.org/docs/Web/API/WebSocket/binaryType) being received over the WebSocket connection |
+| `htmx.config.wsBinaryType` | defaults to `blob`, the [type of binary data](https://developer.mozilla.org/docs/Web/API/WebSocket/binaryType) being received over the WebSocket connection  |
 | `htmx.config.disableSelector` | defaults to `[hx-disable], [data-hx-disable]`, htmx will not process elements with this attribute on it or a parent |
 | `htmx.config.withCredentials` | defaults to `false`, allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates |
 | `htmx.config.timeout` | defaults to 0, the number of milliseconds a request can take before automatically being terminated |

www/content/examples/animations.md

@@ -134,6 +134,7 @@ class.
 }
 </style>
 <button id="fade-me-in"
+ class="btn primary"
  hx-post="/fade_in_demo"
  hx-swap="outerHTML settle:1s">
  Fade Me In
@@ -153,13 +154,15 @@ class.
 </style>
 
 <button id="fade-me-in"
+ class="btn primary"
  hx-post="/fade_me_in"
  hx-swap="outerHTML settle:1s">
  Fade Me In
 </button>
 
 <script>
  onPost("/fade_me_in", function () {return "<button id=\"fade-me-in\"\n"+
+ " class=\"btn primary\"\n"+
  " hx-post=\"/fade_me_in\"\n"+
  " hx-swap=\"outerHTML settle:1s\">\n"+
  " Fade Me In\n"+
@@ -180,7 +183,7 @@ is a form that on submit will change its look to indicate that a request is bein
 </style>
 <form hx-post="/name" hx-swap="outerHTML">
 <label>Name:</label><input name="name"><br/>
-<button>Submit</button>
+<button class="btn primary">Submit</button>
 </form>
 ```
 
@@ -196,7 +199,7 @@ is a form that on submit will change its look to indicate that a request is bein
 <div aria-live="polite">
 <form hx-post="/name" hx-swap="outerHTML">
 <label>Name:</label><input name="name"><br/>
-<button>Submit</button>
+<button class="btn primary">Submit</button>
 </form>
 </div>
 
@@ -287,7 +290,7 @@ implement this feature in the near future.
 
 <div class="slide-it">
  <h1>Initial Content</h1>
- <button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
+ <button class="btn primary" hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
  Swap It!
  </button>
 </div>
@@ -328,7 +331,7 @@ implement this feature in the near future.
 
 <div class="slide-it">
  <h1>Initial Content</h1>
- <button hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
+ <button class="btn primary" hx-get="/new-content" hx-swap="innerHTML transition:true" hx-target="closest div">
   Swap It!
  </button>
 </div>
@@ -337,7 +340,7 @@ implement this feature in the near future.
  var originalContent = htmx.find(".slide-it").innerHTML;
 
  this.server.respondWith("GET", "/new-content", function(xhr){
- xhr.respond(200, {}, "<h1>New Content</h1> <button hx-get='/original-content' hx-swap='innerHTML transition:true' hx-target='closest div'>Restore It! </button>")
+ xhr.respond(200, {}, "<h1>New Content</h1> <button class='btn danger' hx-get='/original-content' hx-swap='innerHTML transition:true' hx-target='closest div'>Restore It! </button>")
  });
 
  this.server.respondWith("GET", "/original-content", function(xhr){

www/content/examples/bulk-update.md

@@ -29,7 +29,7 @@ values in the form submission (`POST` request):
  ...
  </tbody>
  </table>
- <input type="submit" value="Bulk Update">
+ <input type="submit" value="Bulk Update" class="btn primary">
  <span id="toast"></span>
 </form>
 ```
@@ -163,7 +163,7 @@ You can see a working example of this code below.
  ${displayTable(contacts)}
  </tbody>
  </table>
- <input type="submit" value="Bulk Update">
+ <input type="submit" value="Bulk Update" class="btn primary">
  <span id="toast"></span>
  </form>
  <br>`;

www/content/examples/click-to-edit.md

@@ -12,7 +12,7 @@ The click to edit pattern provides a way to offer inline editing of all or part
  <div><label>First Name</label>: Joe</div>
  <div><label>Last Name</label>: Blow</div>
  <div><label>Email</label>: [email protected]</div>
- <button hx-get="/contact/1/edit" class="btn btn-primary">
+ <button hx-get="/contact/1/edit" class="btn primary">
  Click To Edit
  </button>
 </div>
@@ -96,7 +96,7 @@ return `<form hx-put="/contact/1" hx-target="this" hx-swap="outerHTML">
  <div><label>First Name</label>: ${contact.firstName}</div>
  <div><label>Last Name</label>: ${contact.lastName}</div>
  <div><label>Email Address</label>: ${contact.email}</div>
- <button hx-get="/contact/1/edit" class="btn btn-primary">
+ <button hx-get="/contact/1/edit" class="btn primary">
  Click To Edit
  </button>
 </div>`;

www/content/examples/click-to-load.md

@@ -9,7 +9,7 @@ the final row:
 ```html
 <tr id="replaceMe">
  <td colspan="3">
- <button class='btn' hx-get="/contacts/?page=2"
+ <button class='btn primary' hx-get="/contacts/?page=2"
  hx-target="#replaceMe"
  hx-swap="outerHTML">
  Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
@@ -82,7 +82,7 @@ results (which will contain a button to load the *next* page of results). And s
  return `<tr id="replaceMe">
  <td colspan="3">
  <center>
- <button class='btn' hx-get="/contacts/?page=${page + 1}"
+ <button class='btn primary' hx-get="/contacts/?page=${page + 1}"
  hx-target="#replaceMe"
  hx-swap="outerHTML">
  Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">

www/content/examples/delete-row.md

@@ -47,7 +47,7 @@ row should be replaced with nothing.
  <td>[email protected]</td>
  <td>Active</td>
  <td>
- <button class="btn btn-danger" hx-delete="/contact/1">
+ <button class="btn danger" hx-delete="/contact/1">
  Delete
  </button>
  </td>
@@ -108,7 +108,7 @@ tr.htmx-swapping td {
  <td>${contact["email"]}</td>
  <td>${contact["status"]}</td>
  <td>
- <button class="btn btn-danger" hx-delete="/contact/${i}">
+ <button class="btn danger" hx-delete="/contact/${i}">
  Delete
  </button>
  </td>

www/content/examples/dialogs.md

@@ -7,7 +7,7 @@ Dialogs can be triggered with the [`hx-prompt`](@/attributes/hx-prompt.md) and [
 
 ```html
 <div>
- <button class="btn"
+ <button class="btn primary"
  hx-post="/submit"
  hx-prompt="Enter a string"
  hx-confirm="Are you sure?"
@@ -45,7 +45,7 @@ User entered <i>${response}</i>
  // templates
  function submitButton() {
  return `<div>
- <button class="btn"
+ <button class="btn primary"
  hx-post="/submit"
  hx-prompt="Enter a string"
  hx-confirm="Are you sure?"

www/content/examples/edit-row.md

@@ -30,7 +30,7 @@ Here is the HTML for a row:
  <td>${contact.name}</td>
  <td>${contact.email}</td>
  <td>
- <button class="btn btn-danger"
+ <button class="btn danger"
  hx-get="/contact/${contact.id}/edit"
  hx-trigger="edit"
  onClick="let editing = document.querySelector('.editing')
@@ -74,10 +74,10 @@ Finally, here is what the row looks like when the data is being edited:
  <td><input name='name' value='${contact.name}'></td>
  <td><input name='email' value='${contact.email}'></td>
  <td>
- <button class="btn btn-danger" hx-get="/contact/${contact.id}">
+ <button class="btn danger" hx-get="/contact/${contact.id}">
  Cancel
  </button>
- <button class="btn btn-danger" hx-put="/contact/${contact.id}" hx-include="closest tr">
+ <button class="btn danger" hx-put="/contact/${contact.id}" hx-include="closest tr">
  Save
  </button>
  </td>
@@ -157,7 +157,7 @@ this makes things a bit nicer to deal with.
  <td>${contact.name}</td>
  <td>${contact.email}</td>
  <td>
- <button class="btn btn-danger"
+ <button class="btn danger"
  hx-get="/contact/${contact.id}/edit"
  hx-trigger="edit"
  onClick="let editing = document.querySelector('.editing')
@@ -186,10 +186,10 @@ this makes things a bit nicer to deal with.
  <td><input name='name' value='${contact.name}'</td>
  <td><input name='email' value='${contact.email}'</td>
  <td>
- <button class="btn btn-danger" hx-get="/contact/${contact.id}">
+ <button class="btn danger" hx-get="/contact/${contact.id}">
  Cancel
  </button>
- <button class="btn btn-danger" hx-put="/contact/${contact.id}" hx-include="closest tr">
+ <button class="btn danger" hx-put="/contact/${contact.id}" hx-include="closest tr">
  Save
  </button>
  </td>

www/content/examples/inline-validation.md

@@ -25,7 +25,7 @@ We start with this form:
  <label>Last Name</label>
  <input type="text" class="form-control" name="lastName">
  </div>
- <button class="btn btn-default">Submit</button>
+ <button class="btn primary">Submit</button>
 </form>
 ```
 Note that the first div in the form has set itself as the target of the request and specified the `outerHTML`
@@ -125,7 +125,7 @@ Below is a working demo of this example. The only email that will be accepted i
  <label for="lastName">Last Name</label>
  <input type="text" class="form-control" name="lastName" id="lastName">
  </div>
- <button type='submit' class="btn btn-default" disabled>Submit</button>
+ <button type='submit' class="btn primary" disabled>Submit</button>
 </form>`;
  }
 

www/content/examples/keyboard-shortcuts.md

@@ -8,7 +8,7 @@ In this example we show how to create a keyboard shortcut for an action.
 We start with a simple button that loads some content from the server:
 
 ```html
-<button hx-trigger="click, keyup[altKey&&shiftKey&&key=='D'] from:body"
+<button class="btn primary" hx-trigger="click, keyup[altKey&&shiftKey&&key=='D'] from:body"
  hx-post="/doit">Do It! (alt-shift-D)</button>
 ```
 
@@ -32,10 +32,10 @@ You can find out the conditions needed for a given keyboard shortcut here:
 
  // routes
  init("/init", function(request, params){
- return "<button style='font-size:20pt' hx-trigger='click, keyup[altKey&&shiftKey&&key==\"D\"] from:body'" +
+ return "<button class='btn primary' style='font-size:20pt' hx-trigger='click, keyup[altKey&&shiftKey&&key==\"D\"] from:body'" +
  " hx-post='/doit'>Do It! (alt-shift-D) </button>";
  });
- 
+
  onPost("/doit", function (request, params) {
  return "Did it!";
  });

www/content/examples/modal-bootstrap.md

@@ -3,20 +3,20 @@ title = "Modal Dialogs in Bootstrap"
 template = "demo.html"
 +++
 
-Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes. 
+Many CSS toolkits include styles (and Javascript) for creating modal dialog boxes.
 This example shows how to use HTMX alongside original JavaScript provided by Bootstrap.
 
-We start with a button that triggers the dialog, along with a DIV at the bottom of your 
+We start with a button that triggers the dialog, along with a DIV at the bottom of your
 markup where the dialog will be loaded:
 
 ```html
-<button 
- hx-get="/modal" 
- hx-target="#modals-here" 
- hx-trigger="click" 
- data-bs-toggle="modal" 
+<button
+ hx-get="/modal"
+ hx-target="#modals-here"
+ hx-trigger="click"
+ data-bs-toggle="modal"
  data-bs-target="#modals-here"
- class="btn btn-primary">Open Modal</button>
+ class="btn primary">Open Modal</button>
 
 <div id="modals-here"
  class="modal modal-blur fade"
@@ -74,15 +74,15 @@ tabindex="-1">
 
  // routes
  init("/demo", function(request, params) {
- return `<button 
- hx-get="/modal" 
- hx-target="#modals-here" 
+ return `<button
+ hx-get="/modal"
+ hx-target="#modals-here"
  hx-trigger="click"
  data-bs-toggle="modal"
  data-bs-target="#modals-here"
- class="btn btn-primary">Open Modal</button>
+ class="btn primary">Open Modal</button>
  `})
- 
+
  onGet("/modal", function(request, params){
  return `<div class="modal-dialog modal-dialog-centered">
  <div class="modal-content">