zeu.dev
-17
src/content/blog/astro-htmx.md
-17
src/content/blog/astro-htmx.md
···
1
-
---
2
-
title: "Astro and HTMX: An Interesting Stack"
3
-
description: Strap a horse on a rocket and use Astro Partials to stream UI components via HTMX.
4
-
date: "2024-09-10"
5
-
draft: true
6
-
link: https://github.com/zeucapua/
7
-
---
8
-
9
-
### What is HTMX?
10
-
11
-
### Astro Partials
12
-
13
-
### Using HTMX Attributes
14
-
15
-
### Forms and Values via Astro Partials
16
-
17
-
### Streaming in Client Components as Astro Islands
+100
src/content/blog/rash-stack.md
+100
src/content/blog/rash-stack.md
···
1
+
---
2
+
title: "The RASH Stack: React, Astro, Svelte, HTMX"
3
+
description: Strap a horse on a rocket and use Astro Partials to stream UI components via HTMX.
4
+
date: "2024-09-10"
5
+
draft: true
6
+
link: https://github.com/zeucapua/
7
+
---
8
+
9
+
## The Project
10
+
11
+
I'm building a Notion-like note taking system that'll (probably) make me more productive with as
12
+
little fluff and features as possible. Each block can be added, edited, and deleted freely, with
13
+
the full page data is saved locally.
14
+
15
+
For the features to demo the RASH stack, we are making:
16
+
- Plain text (Astro + HTMX)
17
+
- Checkbox (Svelte)
18
+
- Whiteboard (React via tldraw library)
19
+
20
+
## What is HTMX?
21
+
22
+
The basic idea behind HTMX is that APIs should return HTML that shows the updated part of the page
23
+
after a request. For example, let's make a button that adds our feature, simple plain text input:
24
+
25
+
```html
26
+
<h1>Hodgepodge App</h1>
27
+
<ul id="blocks">
28
+
29
+
</ul>
30
+
31
+
<button
32
+
hx-post="/addTextBlock"
33
+
hx-target="#blocks"
34
+
hx-swap="beforeend"
35
+
>
36
+
Text
37
+
</button>
38
+
```
39
+
40
+
The button has a few new attributes to use HTMX: `hx-post` specifies a `POST` API request
41
+
at the endpoint `/addTextBlock`; `hx-target` is to determine what element we want to update;
42
+
`hx-swap` tells us how we should handle the HTML after the response, in this case adding the
43
+
response before the button. Now the endpoint can return HTML like so...
44
+
45
+
```html
46
+
<li><textarea /></li>
47
+
```
48
+
49
+
And on the button press, the initial page will now be:
50
+
51
+
```html
52
+
<h1>Hodgepodge App</h1>
53
+
<ul id="blocks">
54
+
<li><textarea /></li>
55
+
</ul>
56
+
57
+
<button
58
+
hx-post="/addTextBlock"
59
+
hx-target="#blocks"
60
+
hx-swap="beforeend"
61
+
>
62
+
Text
63
+
</button>
64
+
```
65
+
66
+
While we will be using more attributes during the rest of the blog, there are plenty more
67
+
I can't possibly go over. To find more information on the list of attributes and HTMX in
68
+
general, go to [htmx.org](https://htmx.org) or read their book
69
+
[Hypermedia Systems](https://hypermedia.systems) which is free online, but you can be cool
70
+
like me and get the physical book:
71
+
72
+
# TODO: ADD PHOTO OF HYPERMEDIA SYSTEMS
73
+
74
+
## Astro Partials
75
+
76
+
Since we are using Astro as our meta framework, we can use its feature **Astro Partials** in
77
+
conjunction with HTMX for a smooth developer experience. It allows Astro components inside the
78
+
`/src/pages` directory to be easily called via its endpoint and returned as HTML.
79
+
80
+
For the example above, the only thing needed is for the Lemon to be in the
81
+
`/src/pages/addTextBlock.astro` file with one extra line in the *Component Script* (the code
82
+
inside the frontmatter like section ran on the server):
83
+
84
+
```astro
85
+
---
86
+
export const partial = true;
87
+
---
88
+
<li><textarea /></li>
89
+
```
90
+
91
+
Now we can use this page via HTMX under the `/revealSecret` endpoint, like the example above!
92
+
93
+
## Forms and Values via Astro Partials
94
+
95
+
Swapping HTML is all fine and dandy, but if we want to do more, we can leverage existing
96
+
hypermedia controls to extend functionality like the `<form>` and `<input>` elements.
97
+
98
+
## Streaming in Client Components as Astro Islands
99
+
100
+
## Using the HTMX Javascript API