diff --git a/docs/_static/how-tos/htmx-demo.gif b/docs/_static/how-tos/htmx-demo.gif
index 72e1a82dd..777b87d49 100644
Binary files a/docs/_static/how-tos/htmx-demo.gif and b/docs/_static/how-tos/htmx-demo.gif differ
diff --git a/docs/_static/how-tos/htmx-edit-delete.gif b/docs/_static/how-tos/htmx-edit-delete.gif
index 89ee58e00..6d5a1a73a 100644
Binary files a/docs/_static/how-tos/htmx-edit-delete.gif and b/docs/_static/how-tos/htmx-edit-delete.gif differ
diff --git a/docs/_static/how-tos/htmx-insert.gif b/docs/_static/how-tos/htmx-insert.gif
index 9c678983e..e4031b0d4 100644
Binary files a/docs/_static/how-tos/htmx-insert.gif and b/docs/_static/how-tos/htmx-insert.gif differ
diff --git a/docs/_static/how-tos/htmx-simple.jpg b/docs/_static/how-tos/htmx-simple.jpg
index e15d13349..4c2768913 100644
Binary files a/docs/_static/how-tos/htmx-simple.jpg and b/docs/_static/how-tos/htmx-simple.jpg differ
diff --git a/docs/how-tos/providing-html-content-using-htmx.rst b/docs/how-tos/providing-html-content-using-htmx.rst
index fd52815d8..1e76c1765 100644
--- a/docs/how-tos/providing-html-content-using-htmx.rst
+++ b/docs/how-tos/providing-html-content-using-htmx.rst
@@ -38,7 +38,8 @@ and return a raw HTML document file.
Creating an HTML Response
-------------------------
-Let's create a function that returns a basic HTML file, using `Tailwind CSS `_ for styling.
+Let's create a function that returns a basic HTML file, using `Pico CSS `_ for styling and
+`Ionicons `_ to show some icons later.
.. code-block:: postgres
@@ -50,15 +51,20 @@ Let's create a function that returns a basic HTML file, using `Tailwind CSS PostgREST + HTMX To-Do List
-
-
+
+
-
-
-
-
PostgREST + HTMX To-Do List
-
-
+
+
+
+
+ PostgREST + HTMX To-Do List
+
+
+
+
+
+
$html$;
@@ -84,24 +90,22 @@ For that, we'll also need a function to help us sanitize the HTML content that m
create or replace function api.html_todo(api.todos) returns text as $$
select format($html$
-
-
+
+ <%2$s>
%3$s
-
-
+
+
$html$,
$1.id,
- case when $1.done then 'line-through text-gray-400' else '' end,
+ case when $1.done then 's' else 'span' end,
api.sanitize_html($1.task)
);
$$ language sql stable;
create or replace function api.html_all_todos() returns text as $$
select coalesce(
- '
'
- || string_agg(api.html_todo(t), '' order by t.id) ||
- '
',
- '
There is nothing else to do.
'
+ string_agg(api.html_todo(t), '' order by t.id),
+ '
There is nothing else to do.
'
)
from api.todos t;
$$ language sql;
@@ -126,39 +130,44 @@ Next, let's add an endpoint to register a to-do in the database and modify the `
$$ language sql;
create or replace function api.index() returns "text/html" as $$
- select $html$
-
-
-
-
-
- PostgREST + HTMX To-Do List
-
-
-
-
-
-
-
+
+
+
+
+
+
+
$html$;
$$ language sql;
@@ -190,49 +199,46 @@ Now, let's modify ``api.html_todo`` and make it more functional.
.. code-block:: postgres
create or replace function api.html_todo(api.todos) returns text as $$
- select format($html$
-
-
-
-
-
-
-
-
-
-
- $html$,
- $1.id,
- case when $1.done then 'line-through text-gray-400' else '' end,
- api.sanitize_html($1.task),
- (not $1.done)::text
- );
+ $html$,
+ $1.id,
+ case when $1.done then 's' else 'span' end,
+ api.sanitize_html($1.task),
+ (not $1.done)::text
+ );
$$ language sql stable;
Let's deconstruct the new htmx features added:
@@ -267,22 +273,21 @@ That's why we create the ``api.html_editable_task`` function as an endpoint:
.. code-block:: postgres
create or replace function api.html_editable_task(_id int) returns "text/html" as $$
- select format ($html$
-
- $html$,
- id,
- api.sanitize_html(task)
- )
- from api.todos
- where id = _id;
+ select format ($html$
+
+ $html$,
+ id,
+ api.sanitize_html(task)
+ )
+ from api.todos
+ where id = _id;
$$ language sql;
In this example, this will return an input field that allows us to edit the corresponding to-do task.