diff --git a/www/_redirects b/www/_redirects index fe065429..8720214b 100644 --- a/www/_redirects +++ b/www/_redirects @@ -1,3 +1,4 @@ /locality-of-behaviour /essays/locality-of-behaviour /posts/2020-6-19-htmx-0.0.5-is-released/ /posts/2020-6-20-htmx-0.0.6-is-released/ -/discord https://discord.gg/Z6gPqAd \ No newline at end of file +/discord https://discord.gg/Z6gPqAd +/ /js/demo/it.js \ No newline at end of file diff --git a/www/demo/_redirects b/www/demo/_redirects deleted file mode 100644 index 86931294..00000000 --- a/www/demo/_redirects +++ /dev/null @@ -1 +0,0 @@ -/ /demo.js \ No newline at end of file diff --git a/www/demo/demo.md b/www/demo/demo.md deleted file mode 100644 index be32406e..00000000 --- a/www/demo/demo.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -layout: layout.njk -title: > htmx - high power tools for html ---- - -# htmx demo helper script - -By adding the script tag below to your demo site (e.g. jsFiddle) you will have a full installation of -htmx and hyperscript for your -demo. - - -Additionally, you can add mock responses by simply adding `template` tags with the -`url` attribute. The response for that url will be the innerHTML of the template. You - may embed simple expressions in the template with a `${}` syntax. - -## Code - -Copy this to your demo site: - -```html - -``` - -## Example - -This is an example of the code in action: - -```html - - - - - - - ${globalInt++} - -``` diff --git a/www/docs.md b/www/docs.md index 2ea84b27..5ed1d8e7 100644 --- a/www/docs.md +++ b/www/docs.md @@ -918,6 +918,44 @@ point in the `issueAjaxRequest()` and `handleAjaxResponse()` methods to see what And always feel free to jump on the [Discord](https://htmx.org/discord) if you need help. +### [Creating Demos](#creating-demos) + +Sometimes, in order to demonstrate a bug or clarify a usage, it is nice to be able to use a javascript snippet +site like [jsfiddle](https://jsfiddle.net/). To facilitate easy demo creation, htmx hosts a demo script +site that will install: + +* htmx +* hyperscript +* a request mocking library + +Simply add the following script tag to your demo/fiddle/whatever: + +```html + +``` + +This helper allows you to add mock responses by adding `template` tags with a `url` attribute to indicate which URL. +The response for that url will be the innerHTML of the template, making it easy to construct mock responses. + +You may embed simple expressions in the template with the `${}` syntax. + +#### Demo Example + +Here is an example of the code in action: + +```html + + + + + + + ${globalInt++} + +``` + ## [hyperscript](#hyperscript) Hyperscript is an experimental front end scripting language designed to be expressive and easily embeddable directly in HTML diff --git a/www/demo/demo.js b/www/js/demo/it.js similarity index 100% rename from www/demo/demo.js rename to www/js/demo/it.js diff --git a/www/demo/scratch.html b/www/js/demo/scratch.html similarity index 88% rename from www/demo/scratch.html rename to www/js/demo/scratch.html index e93e5ad5..17798a8c 100644 --- a/www/demo/scratch.html +++ b/www/js/demo/scratch.html @@ -1,6 +1,6 @@
- +