itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-03 07:45:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

demo site setup

Browse Source
This commit is contained in:
carson 2022-02-17 11:19:48 -07:00
parent b3751e1ff2
commit dd2e470422
6 changed files with 41 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
www/_redirects
View File

@ -1,3 +1,4 @@
/locality-of-behaviour /essays/locality-of-behaviour /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/ /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

1
www/demo/_redirects
View File

@ -1 +0,0 @@
/ /demo.js

40
www/demo/demo.md
View File

@ -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
<a href="https://htmx.org">htmx</a> and <a href="https://hyperscript.org">hyperscript</a> 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
<script src="https://htmx.org/js/demo.js"></script>
```
## Example
This 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>
```

38
www/docs.md
View File

@ -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. 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) ## <a name="hyperscript"></a>[hyperscript](#hyperscript)
Hyperscript is an experimental front end scripting language designed to be expressive and easily embeddable directly in HTML Hyperscript is an experimental front end scripting language designed to be expressive and easily embeddable directly in HTML

0
www/demo/demo.js → www/js/demo/it.js
View File

2
www/demo/scratch.html → www/js/demo/scratch.html
View File

@ -1,6 +1,6 @@
<html> <html>
<head> <head>
<script src="demo.js"></script> <script src="it.js"></script>
</head> </head>
<body> <body>
<!-- post to /foo --> <!-- post to /foo -->