Merge branch 'master' into dev

# Conflicts:
#	www/docs.md

www/docs.md

@@ -23,7 +23,7 @@ title: </> htmx - high power tools for html
   * [parameters](#parameters)
 * [history](#history)
 * [requests & responses](#requests)
-* [misc](#misc)
+* [miscellaneous](#miscellaneous)
 * [extensions](#extensions)
 * [events & logging](#events)
 * [configuring](#config)
@@ -362,10 +362,10 @@ event.
 Htmx provides a simple mechanism for interacting with the [browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API):
 
 If you want a given element to push its request URL into the browser navigation bar and add the current state of the page
-to the browser's history, include the [hx-push](/attributes/hx-push) attribute:
+to the browser's history, include the [hx-push-url](/attributes/hx-push-url) attribute:
 
 ```html
-    <a hx-get="/blog" hx-push="true">Blog</a>
+    <a hx-get="/blog" hx-push-url="true">Blog</a>
 ```
   
 When a user clicks on this link, htmx will snapshot the current DOM and store it before it makes a request to /blog. 
@@ -377,7 +377,7 @@ When a user hits the back button, htmx will retrieve the old content from storag
 ### Specifying History Snapshot Element
 
 By default, htmx will use the `body` to take and restore the history snapshop from.  This is usually the right thing, but
-if you want to use a narrower element for snapshotting you can use the [hx-history-element](/attributes/hx-history-element)
+if you want to use a narrower element for snapshotting you can use the [hx-history-elt](/attributes/hx-history-elt)
 attribute to specify a different one.  
 
 Careful: this element will need to be on all pages or restoring from history won't work reliably.
@@ -439,7 +439,7 @@ The order of operations in a htmx request are:
 You can use the `htmx-swapping` and `htmx-settling` classes to create 
 [CSS transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) between pages.
 
-## Miscellaneous Attributes
+## <a name="miscellaneous"></a> [Miscellaneous](#miscellaneous)
 
 In addition to the core AJAX functionality, htmx also has a few other tricks up its sleeve that help you build
 nice interfaces without javascript.

www/examples/delete-row.md

@@ -4,30 +4,8 @@ layout: demo_layout.njk
 
 ## Delete Row
 
-This example shows how to implement a delete button that removes a table row upon completion.
-
-Each row has a button with a `hx-delete` attribute containing the url on which to issue a DELETE request to delete the row from the server.
-This request should respond with empty content.
-
-```html
-<tr>
-  <td>Angie MacDowell</td>
-  <td>angie@macdowell.org</td>
-  <td>Active</td>
-  <td>
-    <button class="btn btn-danger" hx-delete="/contact/1">
-      Delete
-    </button>
-  </td>
-</tr>
-```
-
-In order to tell where to put this empty content, the table body has an `hx-target` attribute set to `closest tr` . This will target the row containing the button which triggred the action, replacing it by... nothing.
-
-It also has a `hx-swap` attribute set to `outerHTML 1s` in order to replace the row itself, with a 1 second delay allowing for a CSS3 transition to fade the row out.
-During this one second delay, the class "kutty-swapping" is added to `tr` element about to be replaced.
-
-Finally, the body also has a `hx-confirm` attribute so that a confirmation popup is shown before triggering the action for real.
+This example shows how to implement a delete button that removes a table row upon completion.  First let's look at the
+table body:
 
 ```html
 <table class="table delete-row-example">
@@ -45,6 +23,45 @@ Finally, the body also has a `hx-confirm` attribute so that a confirmation popup
 </table>
 ```
 
+The table body has a [`hx-confirm`](/attributes/hx-confirm) attribute to confirm the delete action.  It also
+set the target to be the `closest tr` that is, the closest table row, for all the buttons ([`hx-target`](/attributes/hx-target) 
+is inherited from parents in the DOM.)  The swap specification in [`hx-swap`](/attributes/hx-swap) says to swap the
+entire target out and to wait 1 second after receiving a response.  This last bit is so that we can use the following
+CSS:
+
+```css
+tr.htmx-swapping td {
+  opacity: 0;
+  transition: opacity 1s ease-out;
+}
+```
+
+To fade the row out before it is swapped/removed.
+
+Each row has a button with a [`hx-delete`](/attributes/hx-delete) attribute containing the url on which to issue a `DELETE` 
+request to delete the row from the server. This request responds with empty content, indicating that the row should
+be replaced with nothing.
+
+```html
+<tr>
+  <td>Angie MacDowell</td>
+  <td>angie@macdowell.org</td>
+  <td>Active</td>
+  <td>
+    <button class="btn btn-danger" hx-delete="/contact/1">
+      Delete
+    </button>
+  </td>
+</tr>
+```
+
+<style>
+tr.htmx-swapping td {
+  opacity: 0;
+  transition: opacity 1s ease-out;
+}
+</style>
+
 {% include demo_ui.html.liquid %}
 
 <script>
@@ -122,6 +139,4 @@ Finally, the body also has a `hx-confirm` attribute so that a confirmation popup
 </table>`;
     }
 
-</script>
-
-
+</script>

www/headers/x-hx-trigger.md

@@ -55,4 +55,4 @@ object:
 
 `X-HX-Trigger: {"event1":"A message", "event2":"Another message"}`
 
-Using events gives you a lot of flexibility to add functionality to normal htmx responses.
+Using events gives you a lot of flexibility to add functionality to normal htmx responses.