diff --git a/www/content/_index.md b/www/content/_index.md index 6bbe4491..de8a7c28 100644 --- a/www/content/_index.md +++ b/www/content/_index.md @@ -121,7 +121,7 @@ if(window.location.search=="?ads=true") { htmx gives you access to [`fetch()`](@/docs.md#ajax), [View Transitions](@/docs.md#), [Streaming Responses](@/docs.md) and more directly in HTML, using [attributes](@/reference.md#attributes), so you can build -[interactive interfaces](@/examples/_index.md) with the [simplicity](https://en.wikipedia.org/wiki/HATEOAS) and +[interactive interfaces](@/patterns/_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 ([~10k min.br'd](https://cdn.jsdelivr.net/npm/htmx.org/dist/)), diff --git a/www/content/attributes/hx-confirm.md b/www/content/attributes/hx-confirm.md index b03c0246..330bd29e 100644 --- a/www/content/attributes/hx-confirm.md +++ b/www/content/attributes/hx-confirm.md @@ -28,5 +28,5 @@ The event triggered by `hx-confirm` contains additional properties in its `detai ## Notes * `hx-confirm` is inherited and can be placed on a parent element -* `hx-confirm` uses the browser's `window.confirm` by default. You can customize this behavior as shown [in this example](@/examples/confirm.md). +* `hx-confirm` uses the browser's `window.confirm` by default. You can customize this behavior as shown [in this example](@/patterns/confirm.md). * a boolean `skipConfirmation` can be passed to the `issueRequest` callback; if true (defaults to false), the `window.confirm` will not be called and the AJAX request is issued directly diff --git a/www/content/docs.md b/www/content/docs.md index b6aa748c..8645d101 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -265,7 +265,7 @@ issuing the request. Unlike `delay` if a new event occurs before the time limit so the request will trigger at the end of the time period. * `from:` - listen for the event on a different element. This can be used for things like keyboard shortcuts. Note that this CSS selector is not re-evaluated if the page changes. -You can use these attributes to implement many common UX patterns, such as [Active Search](@/examples/active-search.md): +You can use these attributes to implement many common UX patterns, such as [Active Search](@/patterns/active-search.md): ```html more docs on this

-You can see a view transition example on the [Animation Examples](/examples/animations#view-transitions) page. +You can see a view transition example on the [Animation Patterns](/patterns/animations#view-transitions) page. #### Swap Options @@ -696,7 +696,7 @@ in the request. Note that depending on your server-side technology, you may have to handle requests with this type of body content very differently. -See the [examples section](@/examples/_index.md) for more advanced form patterns, including [progress bars](@/examples/file-upload.md) and [error handling](@/examples/file-upload-input.md). +See the [patterns section](@/patterns/_index.md) for more advanced form patterns, including [progress bars](@/patterns/file-upload.md) and [error handling](@/patterns/file-upload-input.md). ### Confirming Requests {#confirming} @@ -842,7 +842,7 @@ a wider audience to use your site's functionality. Other htmx patterns can be adapted to achieve progressive enhancement as well, but they will require more thought. -Consider the [active search](@/examples/active-search.md) example. As it is written, it will not degrade gracefully: +Consider the [active search](@/patterns/active-search.md) example. As it is written, it will not degrade gracefully: someone who does not have javascript enabled will not be able to use this feature. This is done for simplicity’s sake, to keep the example as brief as possible. @@ -1219,7 +1219,7 @@ the [`hx-validate`](@/attributes/hx-validate.md) attribute to "true". Htmx allows you to use [CSS transitions](#css_transitions) in many situations using only HTML and CSS. -Please see the [Animation Guide](@/examples/animations.md) for more details on the options available. +Please see the [Animation Guide](@/patterns/animations.md) for more details on the options available. ## Extensions @@ -1539,7 +1539,7 @@ Here is an example that adds a parameter to an htmx request Here the `example` parameter is added to the `POST` request before it is issued, with the value 'Hello Scripting!'. -Another use case is to [reset user input](@/examples/reset-user-input.md) on successful requests using the `htmx:after:swap` +Another use case is to [reset user input](@/patterns/reset-user-input.md) on successful requests using the `htmx:after:swap` event: ```html @@ -1555,7 +1555,7 @@ Htmx integrates well with third party libraries. If the library fires events on the DOM, you can use those events to trigger requests from htmx. -A good example of this is the [SortableJS demo](@/examples/sortable.md): +A good example of this is the [SortableJS demo](@/patterns/sortable.md): ```html
@@ -1590,7 +1590,7 @@ This will ensure that as new content is added to the DOM by htmx, sortable eleme #### Web Components {#web-components} -Please see the [Web Components Examples](@/examples/web-components.md) page for examples on how to integrate htmx +Please see the [Web Components Pattern](@/patterns/web-components.md) page for examples on how to integrate htmx with web components. ## Caching @@ -1825,4 +1825,4 @@ And that's it! Have fun with htmx! -You can accomplish [quite a bit](@/examples/_index.md) without writing a lot of code! +You can accomplish [quite a bit](@/patterns/_index.md) without writing a lot of code! diff --git a/www/content/essays/10-tips-for-SSR-HDA-apps.md b/www/content/essays/10-tips-for-SSR-HDA-apps.md index 58ace2ea..7ce3b6f5 100644 --- a/www/content/essays/10-tips-for-SSR-HDA-apps.md +++ b/www/content/essays/10-tips-for-SSR-HDA-apps.md @@ -128,7 +128,7 @@ But this experience stinks compared to what people are used to: drag-and-drop. In cases like this, it is perfectly fine to use a front-end heavy approach as an "Island of Interactivity". -Consider the [SortableJS](@/examples/sortable.md) example. Here you have a sophisticated area of interactivity that allows for +Consider the [SortableJS](@/patterns/sortable.md) example. Here you have a sophisticated area of interactivity that allows for drag-and-drop, and that integrates with htmx and the broader hypermedia-driven application via events. This is an excellent way to encapsulate richer UX within an HDA. @@ -153,7 +153,7 @@ Finally, do not be dogmatic about using hypermedia. At the end of the day, it i [strengths & weaknesses](@/essays/when-to-use-hypermedia.md). If a particular part of an app, or if an entire app, demands something more interactive than what hypermedia can deliver, then go with a technology that can. -Just be familiar with [what hypermedia can do](@/examples/_index.md), so you can make that decision as an informed +Just be familiar with [what hypermedia can do](@/patterns/_index.md), so you can make that decision as an informed developer. ## Conclusion diff --git a/www/content/essays/a-response-to-rich-harris.md b/www/content/essays/a-response-to-rich-harris.md index ec36c76a..0de1cec0 100644 --- a/www/content/essays/a-response-to-rich-harris.md +++ b/www/content/essays/a-response-to-rich-harris.md @@ -69,13 +69,13 @@ preserve a particular piece of content between requests. In the presence of infinite scroll behavior (presumably implemented via javascript of some sort) the back button will not work properly with an MPA. I would note that the presence of infinite scroll calls into question the term MPA, which would traditionally use paging instead of an infinite scroll. -That said, [infinite scroll](@/examples/infinite-scroll.md) can be achieved quite easily using htmx, in a hypermedia-oriented and obvious manner. When combined with the [`hx-push-url`](@/attributes/hx-push-url.md) attribute, history and the back button works properly with very little effort by the developer, all with nice Copy-and-Pasteable URLs, sometimes referred to as "Deep Links" by people in the SPA community. +That said, [infinite scroll](@/patterns/infinite-scroll.md) can be achieved quite easily using htmx, in a hypermedia-oriented and obvious manner. When combined with the [`hx-push-url`](@/attributes/hx-push-url.md) attribute, history and the back button works properly with very little effort by the developer, all with nice Copy-and-Pasteable URLs, sometimes referred to as "Deep Links" by people in the SPA community. ### "What about Nice Navigation Transitions?" Nice transitions are, well, nice. We think that designers tend to over-estimate their contribution to application usability, however. Yes, the demo sizzles, but on the 20th click users often just want the UI to get on with it. -That being said, htmx supports using [standard CSS transitions](@/examples/animations.md) to make animations possible. Obviously there is a limit to what you can achieve with these pure CSS techniques, but we believe this can give you the 80 of an 80/20 situation. (Or, perhaps, the 95 of a 95/5 situation.) +That being said, htmx supports using [standard CSS transitions](@/patterns/animations.md) to make animations possible. Obviously there is a limit to what you can achieve with these pure CSS techniques, but we believe this can give you the 80 of an 80/20 situation. (Or, perhaps, the 95 of a 95/5 situation.) ### "Multipage Apps Load Javascript Libraries Every Request" @@ -95,7 +95,7 @@ Of course the problem with latency issues is that they can make an app feel lagg GitHub does, indeed, have UI bugs. However, none of them are particularly difficult to solve. -htmx offers multiple ways to [update content beyond the target element](@/examples/update-other-content.md), all of them quite easy and any of which would work to solve the UI consistency issues Mr. Harris points out. +htmx offers multiple ways to [update content beyond the target element](@/patterns/update-other-content.md), all of them quite easy and any of which would work to solve the UI consistency issues Mr. Harris points out. Contrast the GitHub UI issues with the Instagram UI issues Mr. Harris pointed out earlier: the Instagram issues would require far more sophisticated engineering work to resolve. @@ -136,7 +136,7 @@ AJAX moved to JSON as a data serialization format and largely ([and correctly](@ abandoned the hypermedia concept. This abandonment of The Hypermedia Approach was driven by the admitted usability issues with vanilla MPAs. -It turns out, however, that those usability issues often *can* [be addressed](@/examples/_index.md) using The Hypermedia Approach: +It turns out, however, that those usability issues often *can* [be addressed](@/patterns/_index.md) using The Hypermedia Approach: rather than *abandoning* Hypermedia for RPC, what we needed then and what we need today is a *more powerful* Hypermedia. This is exactly what htmx gives you. diff --git a/www/content/essays/hypermedia-driven-applications.md b/www/content/essays/hypermedia-driven-applications.md index 707e427a..f466ab1a 100644 --- a/www/content/essays/hypermedia-driven-applications.md +++ b/www/content/essays/hypermedia-driven-applications.md @@ -46,7 +46,7 @@ most SPAs abandon HATEOAS in favor of a client-side model and data (rather than ## An Example HDA fragment -Consider the htmx [Active Search](@/examples/active-search.md) example: +Consider the htmx [Active Search](@/patterns/active-search.md) example: ```html

diff --git a/www/content/essays/hypermedia-friendly-scripting.md b/www/content/essays/hypermedia-friendly-scripting.md index b25c3cce..51b570ce 100644 --- a/www/content/essays/hypermedia-friendly-scripting.md +++ b/www/content/essays/hypermedia-friendly-scripting.md @@ -109,7 +109,7 @@ A JavaScript-based component that triggers events allows for hypermedia-oriented to listen for those events and trigger hypermedia exchanges. This, in turn, makes any JavaScript library a potential _hypermedia control_, able to drive the Hypermedia-Driven Application via user-selected actions. -A good example of this is the [Sortable.js](@/examples/sortable.md) example, in which htmx listens for +A good example of this is the [Sortable.js](@/patterns/sortable.md) example, in which htmx listens for the `end` event triggered by Sortable.js: ```html diff --git a/www/content/essays/mvc.md b/www/content/essays/mvc.md index cf1b9ed4..ceb89d3e 100644 --- a/www/content/essays/mvc.md +++ b/www/content/essays/mvc.md @@ -154,7 +154,7 @@ Let's consider another change: we want to add a graph of the number of contacts template in our HTML-based web application. It turns out that this graph is expensive to compute. We do not want to block the rendering of the `index.html` template on the graph generation, so we will use the -[Lazy Loading](@/examples/lazy-load.md) pattern for it instead. To do this, we need to create a new endpoint, `/graph`, +[Lazy Loading](@/patterns/lazy-load.md) pattern for it instead. To do this, we need to create a new endpoint, `/graph`, that returns the HTML for that lazily loaded content: ```python diff --git a/www/content/essays/webcomponents-work-great.md b/www/content/essays/webcomponents-work-great.md index 7427aee7..a2025b14 100644 --- a/www/content/essays/webcomponents-work-great.md +++ b/www/content/essays/webcomponents-work-great.md @@ -161,7 +161,7 @@ The default htmx swap style is to just set [`.innerHTML`](https://developer.mozi That's not to say that htmx doesn't have to accommodate weird Web Component edge cases. Our community member and resident WC expert [Katrina Scialdone](https://unmodernweb.com/) merged [Shadow DOM support for htmx 2.0](https://github.com/bigskysoftware/htmx/pull/2075), which lets htmx process the implementation details of a Web Component, and supporting that is [occasionally](https://github.com/bigskysoftware/htmx/pull/2846) [frustrating](https://github.com/bigskysoftware/htmx/pull/2866). -But being able to work with both the [Shadow DOM](@/examples/web-components.md) and the ["Light DOM"](https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/) is a nice feature for htmx, and it carries a relatively minimal support burden because htmx just isn't doing all that much. +But being able to work with both the [Shadow DOM](@/patterns/web-components.md) and the ["Light DOM"](https://meyerweb.com/eric/thoughts/2023/11/01/blinded-by-the-light-dom/) is a nice feature for htmx, and it carries a relatively minimal support burden because htmx just isn't doing all that much. ## Bringing Behavior Back to the HTML diff --git a/www/content/essays/when-to-use-hypermedia.md b/www/content/essays/when-to-use-hypermedia.md index b4503ba8..a83da6e7 100644 --- a/www/content/essays/when-to-use-hypermedia.md +++ b/www/content/essays/when-to-use-hypermedia.md @@ -75,8 +75,8 @@ Another area where hypermedia has a long track-record of success is [CRUD](https web applications, in the [Ruby on Rails](https://rubyonrails.org/) style. If your main application mechanic is showing forms and saving the forms into a database, hypermedia can work very well. -And, with htmx, it can also be [very smooth](@/examples/click-to-edit.md), and not just constrained -to the simple [list view/detail view](@/examples/edit-row.md) approach many server side applications take. +And, with htmx, it can also be [very smooth](@/patterns/click-to-edit.md), and not just constrained +to the simple [list view/detail view](@/patterns/edit-row.md) approach many server side applications take. ### _...If your UI is "nested", with updates mostly taking place within well-defined blocks_ @@ -89,7 +89,7 @@ when you closed an issue on GitHub, the issue count on the tab did not update pr "Ah ha!", exclaims the SPA enthusiast, "See, even GitHub can't get this right!" Well, GitHub has fixed the issue, but it does demonstrate a problem with the hypermedia approach: how do you update -disjoint parts of the UI cleanly? htmx offers [a few techniques for making this work](@/examples/update-other-content.md), +disjoint parts of the UI cleanly? htmx offers [a few techniques for making this work](@/patterns/update-other-content.md), and Contexte, in their talk, discuss handling this situation very cleanly, using the event approach. But, let us grant that this is an area where the hypermedia approach can get into trouble. To avoid this problem, one @@ -128,7 +128,7 @@ our API to satisfy the new requirements. This is a [unique aspect](@/essays/hat hypermedia, and we [discuss it in more detail here](@/essays/hypermedia-apis-vs-data-apis.md). Of course, there may be UI requirements that do not allow for grouping of dependent element in this manner and, if -the techniques [mentioned above](@/examples/update-other-content.md) aren't satisfactory, then it may be +the techniques [mentioned above](@/patterns/update-other-content.md) aren't satisfactory, then it may be time to consider an alternative approach. ### _...If you need "deep links" & good first-render performance_ @@ -152,8 +152,8 @@ Particularly difficult for hypermedia to handle is when these dependencies are d that cannot be determined at server-side render-time. A good example of this is something like a spreadsheet: a user can enter an arbitrary function into a cell and introduce all sorts of dependencies on the screen, on the fly. -(Note, however, that for many applications, the ["editable row"](@/examples/edit-row.md) pattern is an -acceptable alternative to more general spreadsheet-like behavior, and this pattern does play well with hypermedia by +(Note, however, that for many applications, the ["editable row"](@/patterns/edit-row.md) pattern is an +acceptable alternative to more general spreadsheet-like behavior, and this pattern does play well with hypermedia by isolating edits within a bounded area.) ### _...If you require offline functionality_ @@ -180,7 +180,7 @@ style! We should note, however, that it is typically easier to embed SPA components _within_ a larger hypermedia architecture, than vice-versa. Isolated client-side components can communicate with a broader hypermedia application via [events](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events), in the manner demonstrated -in the [drag-and-drop Sortable.js + htmx](@/examples/sortable.md) example. +in the [drag-and-drop Sortable.js + htmx](@/patterns/sortable.md) example. ### _...If you want integrated copy & paste components_ diff --git a/www/content/examples/click-to-edit.md b/www/content/examples/click-to-edit.md deleted file mode 100644 index 0e81a80c..00000000 --- a/www/content/examples/click-to-edit.md +++ /dev/null @@ -1,104 +0,0 @@ -+++ -title = "Click to Edit" -template = "demo.html" -+++ - -The click to edit pattern provides a way to offer inline editing of all or part of a record without a page refresh. - -* This pattern starts with a UI that shows the details of a contact. The div has a button that will get the editing UI for the contact from `/contact/1/edit` - -```html -
-
: Joe
-
: Blow
-
: joe@blow.com
- -
-``` - -* This returns a form that can be used to edit the contact - -```html - -
- - -
-
- - -
-
- - -
- - - -``` - -* The form issues a `PUT` back to `/contact/1`, following the usual REST-ful pattern. - -{{ demoenv() }} - - diff --git a/www/content/examples/_index.md b/www/content/patterns/_index.md similarity index 75% rename from www/content/examples/_index.md rename to www/content/patterns/_index.md index bc98a29b..a06fa513 100644 --- a/www/content/examples/_index.md +++ b/www/content/patterns/_index.md @@ -1,5 +1,5 @@ +++ -title = "Examples" +title = "Patterns" insert_anchor_links = "heading" +++ @@ -8,7 +8,7 @@ insert_anchor_links = "heading" A list of [GitHub repositories showing examples of integration](@/server-examples.md) with a wide variety of server-side languages and platforms, including JavaScript, Python, Java, and many others. -## UI Examples +## UI Patterns Below are a set of UX patterns implemented in htmx with minimal HTML and styling. @@ -16,34 +16,34 @@ You can copy and paste them and then adjust them for your needs. | Pattern | Description | |-----------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------| -| [Click To Edit](@/examples/click-to-edit.md) | Demonstrates inline editing of a data object | -| [Bulk Update](@/examples/bulk-update.md) | Demonstrates bulk updating of multiple rows of data | -| [Click To Load](@/examples/click-to-load.md) | Demonstrates clicking to load more rows in a table | -| [Delete Row](@/examples/delete-row.md) | Demonstrates row deletion in a table | -| [Edit Row](@/examples/edit-row.md) | Demonstrates how to edit rows in a table | -| [Lazy Loading](@/examples/lazy-load.md) | Demonstrates how to lazy load content | -| [Inline Validation](@/examples/inline-validation.md) | Demonstrates how to do inline field validation | -| [Infinite Scroll](@/examples/infinite-scroll.md) | Demonstrates infinite scrolling of a page | -| [Active Search](@/examples/active-search.md) | Demonstrates the active search box pattern | -| [Progress Bar](@/examples/progress-bar.md) | Demonstrates a job-runner like progress bar | -| [Value Select](@/examples/value-select.md) | Demonstrates making the values of a select dependent on another select | -| [Animations](@/examples/animations.md) | Demonstrates various animation techniques | -| [File Upload](@/examples/file-upload.md) | Demonstrates how to upload a file via ajax with a progress bar | -| [Preserving File Inputs after Form Errors](@/examples/file-upload-input.md) | Demonstrates how to preserve file inputs after form errors | -| [Reset User Input](@/examples/reset-user-input.md) | Demonstrates how to reset form inputs after submission | -| [Dialogs - Browser](@/examples/dialogs.md) | Demonstrates the prompt and confirm dialogs | -| [Dialogs - UIKit](@/examples/modal-uikit.md) | Demonstrates modal dialogs using UIKit | -| [Dialogs - Bootstrap](@/examples/modal-bootstrap.md) | Demonstrates modal dialogs using Bootstrap | -| [Dialogs - Custom](@/examples/modal-custom.md) | Demonstrates modal dialogs from scratch | -| [Tabs (Using HATEOAS)](@/examples/tabs-hateoas.md) | Demonstrates how to display and select tabs using HATEOAS principles | -| [Tabs (Using JavaScript)](@/examples/tabs-javascript.md) | Demonstrates how to display and select tabs using JavaScript | -| [Keyboard Shortcuts](@/examples/keyboard-shortcuts.md) | Demonstrates how to create keyboard shortcuts for htmx enabled elements | -| [Drag & Drop / Sortable](@/examples/sortable.md) | Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering | -| [Updating Other Content](@/examples/update-other-content.md) | Demonstrates how to update content beyond just the target elements | -| [Confirm](@/examples/confirm.md) | Demonstrates how to implement a custom confirmation dialog with htmx | -| [Async Authentication](@/examples/async-auth.md) | Demonstrates how to handle async authentication tokens in htmx | -| [Web Components](@/examples/web-components.md) | Demonstrates how to integrate htmx with web components and shadow DOM | -| [(Experimental) moveBefore()-powered hx-preserve](/examples/move-before) | htmx will use the experimental [`moveBefore()`](https://cr-status.appspot.com/feature/5135990159835136) API for moving elements, if it is present. | +| [Click To Edit](@/patterns/click-to-edit.md) | Demonstrates inline editing of a data object | +| [Bulk Update](@/patterns/bulk-update.md) | Demonstrates bulk updating of multiple rows of data | +| [Click To Load](@/patterns/click-to-load.md) | Demonstrates clicking to load more rows in a table | +| [Delete Row](@/patterns/delete-row.md) | Demonstrates row deletion in a table | +| [Edit Row](@/patterns/edit-row.md) | Demonstrates how to edit rows in a table | +| [Lazy Loading](@/patterns/lazy-load.md) | Demonstrates how to lazy load content | +| [Inline Validation](@/patterns/inline-validation.md) | Demonstrates how to do inline field validation | +| [Infinite Scroll](@/patterns/infinite-scroll.md) | Demonstrates infinite scrolling of a page | +| [Active Search](@/patterns/active-search.md) | Demonstrates the active search box pattern | +| [Progress Bar](@/patterns/progress-bar.md) | Demonstrates a job-runner like progress bar | +| [Value Select](@/patterns/value-select.md) | Demonstrates making the values of a select dependent on another select | +| [Animations](@/patterns/animations.md) | Demonstrates various animation techniques | +| [File Upload](@/patterns/file-upload.md) | Demonstrates how to upload a file via ajax with a progress bar | +| [Preserving File Inputs after Form Errors](@/patterns/file-upload-input.md) | Demonstrates how to preserve file inputs after form errors | +| [Reset User Input](@/patterns/reset-user-input.md) | Demonstrates how to reset form inputs after submission | +| [Dialogs - Browser](@/patterns/dialogs.md) | Demonstrates the prompt and confirm dialogs | +| [Dialogs - UIKit](@/patterns/modal-uikit.md) | Demonstrates modal dialogs using UIKit | +| [Dialogs - Bootstrap](@/patterns/modal-bootstrap.md) | Demonstrates modal dialogs using Bootstrap | +| [Dialogs - Custom](@/patterns/modal-custom.md) | Demonstrates modal dialogs from scratch | +| [Tabs (Using HATEOAS)](@/patterns/tabs-hateoas.md) | Demonstrates how to display and select tabs using HATEOAS principles | +| [Tabs (Using JavaScript)](@/patterns/tabs-javascript.md) | Demonstrates how to display and select tabs using JavaScript | +| [Keyboard Shortcuts](@/patterns/keyboard-shortcuts.md) | Demonstrates how to create keyboard shortcuts for htmx enabled elements | +| [Drag & Drop / Sortable](@/patterns/sortable.md) | Demonstrates how to use htmx with the Sortable.js plugin to implement drag-and-drop reordering | +| [Updating Other Content](@/patterns/update-other-content.md) | Demonstrates how to update content beyond just the target elements | +| [Confirm](@/patterns/confirm.md) | Demonstrates how to implement a custom confirmation dialog with htmx | +| [Async Authentication](@/patterns/async-auth.md) | Demonstrates how to handle async authentication tokens in htmx | +| [Web Components](@/patterns/web-components.md) | Demonstrates how to integrate htmx with web components and shadow DOM | +| [(Experimental) moveBefore()-powered hx-preserve](/patterns/move-before) | htmx will use the experimental [`moveBefore()`](https://cr-status.appspot.com/feature/5135990159835136) API for moving elements, if it is present. | ## Migrating from Hotwire / Turbo ? diff --git a/www/content/examples/active-search.md b/www/content/patterns/active-search.md similarity index 99% rename from www/content/examples/active-search.md rename to www/content/patterns/active-search.md index c687e42c..7b8e822f 100644 --- a/www/content/examples/active-search.md +++ b/www/content/patterns/active-search.md @@ -46,7 +46,7 @@ We can use multiple triggers by separating them with a comma, this way we add 2 Finally, we show an indicator when the search is in flight with the `hx-indicator` attribute. -{{ demoenv() }} +{{ demo_environment() }} + + \ No newline at end of file diff --git a/www/content/examples/click-to-load.md b/www/content/patterns/click-to-load.md similarity index 99% rename from www/content/examples/click-to-load.md rename to www/content/patterns/click-to-load.md index f524abbe..7bc176a6 100644 --- a/www/content/examples/click-to-load.md +++ b/www/content/patterns/click-to-load.md @@ -21,7 +21,7 @@ the final row: This row contains a button that will replace the entire row with the next page of results (which will contain a button to load the *next* page of results). And so on. -{{ demoenv() }} +{{ demo_environment() }} - - {{ page.content | safe }} -{% endblock content %} + +{% if page.extra and page.extra.show_title is defined %} +{% set show_title = page.extra.show_title %} +{% else %} +{% set show_title = true %} +{% endif %} +{% if show_title %}

{{ page.title | safe }}

{% endif %} +{{ page.content | safe }} + +{% endblock content %} \ No newline at end of file diff --git a/www/templates/shortcodes/demo_environment.html b/www/templates/shortcodes/demo_environment.html new file mode 100644 index 00000000..b127f117 --- /dev/null +++ b/www/templates/shortcodes/demo_environment.html @@ -0,0 +1,153 @@ + + + + + + +{# ======================================================================== #} +{# DEMO SECTION #} +{# ======================================================================== #} + +

+ Demo +

+ +
+ +
+ + +{# ======================================================================== #} +{# DEBUG TOOLBAR: Timeline + Request Details #} +{# ======================================================================== #} + +
+ + {# Header (click to expand/collapse) #} + + + {# Content #} +
+ + {# Timeline: List of htmx requests #} +
    + + +
+ + {# Current Request: Parameters, headers, response #} +
+ + + + + + +
+
+
\ No newline at end of file diff --git a/www/templates/shortcodes/demoenv.html b/www/templates/shortcodes/demoenv.html deleted file mode 100644 index 4f76f68d..00000000 --- a/www/templates/shortcodes/demoenv.html +++ /dev/null @@ -1,69 +0,0 @@ - - -
-
Server Requests ↑ Show
-
-
-
    -
-
-
-
-
-
- -

đź”—Demo

-
-
diff --git a/www/themes/htmx-theme/static/css/site.css b/www/themes/htmx-theme/static/css/site.css index dc3d36a4..faf4b7c8 100644 --- a/www/themes/htmx-theme/static/css/site.css +++ b/www/themes/htmx-theme/static/css/site.css @@ -79,6 +79,7 @@ pre { padding: 1rem; background: #f5f5f5; border-radius: 4px; + font-size: 0.75rem; /* Big code is overwhelming :( */ } /* Tables */ @@ -121,7 +122,7 @@ blockquote p:last-child { /* Bold code elements */ code { - font-weight: bold; + /*font-weight: bold;*/ /* Bold code is even more overwhelming :( */ color: unset; } diff --git a/www/themes/htmx-theme/templates/base.html b/www/themes/htmx-theme/templates/base.html index ee282fd0..15f729ed 100644 --- a/www/themes/htmx-theme/templates/base.html +++ b/www/themes/htmx-theme/templates/base.html @@ -24,15 +24,15 @@ - - + +
- {% set should_boost = not page or not page.path is starting_with("/examples") %} + {% set should_boost = not page or not page.path is starting_with("/patterns") %}