First commit

Author: terminalcommandnewsletter

book.toml

@@ -0,0 +1,9 @@
+[book]
+authors = ["tercmd"]
+language = "en"
+multilingual = false
+src = "src"
+title = "HTMXify"
+git_repository_url = "https://github.com/htmxify/docs"
+git_repository_edit_url = "https://github.com/htmxify/docs"
+cname = "https://htmxify.com"

src/SUMMARY.md

@@ -0,0 +1,6 @@
+# Summary
+
+- [Intro](./intro.md)
+- [Extensions](./extensions.md)
+  - [inline-template](./extensions/inline-template.md)
+  - [local-storage](./extensions/local-storage.md)

src/extensions.md

@@ -0,0 +1,5 @@
+# Extensions
+
+HTMXify currently has the following extensions:
+- [inline-template](./extensions/inline-template.md), an extension that uses Handlebars to compile templates, allowing the use of JSON APIs in HTMX.
+- [local-storage](./extensions/local-storage.md), an extension that allows using values from localStorage as request headers and setting values in localStorage as response headers

src/extensions/inline-template.md

@@ -0,0 +1,34 @@
+# inline-template
+
+This extension uses Handlebars to compile a template passed in using an attribute and provides it the context of a JSON response.
+
+## Note
+Please load Handlebars from a CDN like [cdnjs](https://cdnjs.com/libraries/handlebars.js) or [jsDelivr](http://www.jsdelivr.com/#!handlebarsjs).
+
+## Attributes
+### `data-template`
+The value of this attribute should be a Handlebars template.
+
+#### Example
+
+JSON:
+```json
+[{
+    "content": "Hello World!",
+    "author": {
+        "username": "tercmd",
+    },
+}]
+```
+
+HTML:
+```html
+<div hx-get="/api/messages" data-template="{{[0].author.username}} said {{[0].content}}" hx-trigger="load" hx-ext="inline-template"></div>
+```
+
+Rendered content:
+```plaintext
+tercmd said Hello World!
+```
+
+> The use of `[0].content` is important because the Handlebars template is accessing the 0th element of the context provided, which is the response itself.

src/extensions/local-storage.md

@@ -0,0 +1,15 @@
+# local-storage
+An extension to append request headers with values from localStorage.
+
+## Attributes
+### `data-ls-item`
+This is the key of the item in localStorage.
+### `data-ls-header`
+This is the name of the header which is added to requests.
+
+## Example
+```html
+<div hx-get="/api/..." data-ls-item="auth-token" data-ls-header="Authorization" hx-trigger="load"></div>
+```
+
+This code sends a request with the header `Authorization: Bearer ...` (this token is stored in localStorage)

src/intro.md

@@ -0,0 +1,5 @@
+# Intro
+
+HTMXify is a set of extensions for [HTMX](https://htmx.org).
+
+{{ #include extensions.md }}