demo site setup

eldamir · Feb 17, 2022 · dd2e470 · dd2e470
1 parent b3751e1
commit dd2e470
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 43 deletions.
diff --git 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
+/discord                                     https://discord.gg/Z6gPqAd
+/                                            /js/demo/it.js
diff --git a/www/demo/_redirects b/www/demo/_redirects
diff --git a/www/demo/demo.md b/www/demo/demo.md
diff --git 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.
 
+### <a name="creating-demos">[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
+<script src="https://demo.htmx.org"></script>
+```
+
+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
+<script src="https://htmx.org/js/demo.js"></script>
+<!-- post to /foo -->
+<button hx-post="/foo" hx-target="#result">Count Up</button> <output id="result"></output>
+<!-- respond to /foo -->
+<script>
+    globalInt = 0;
+</script>
+<template url="/foo">
+    ${globalInt++}
+</template>
+```
+
 ## <a name="hyperscript"></a>[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 → www/js/demo/it.js b/www/demo/demo.js → www/js/demo/it.js
diff --git a/www/demo/scratch.html → www/js/demo/scratch.html b/www/demo/scratch.html → www/js/demo/scratch.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-    <script src="demo.js"></script>
+    <script src="it.js"></script>
 </head>
 <body>
 <!-- post to /foo -->