eisterman/htmxtailwindtest
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

AutoBuild at change, Special HTMX Indicator Inline, modernate Feed Inline and other small things

Browse Source
This commit is contained in:
Federico Pasqua
2025-02-01 20:37:41 +01:00
parent abb333da54
commit 045b0f5ec0
8 changed files with 64 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -1,4 +1,4 @@
/target
/assets/generated
/autoassets
sqlite.db
node_modules

18
README.md
View File

@@ -1,4 +1,18 @@
To run the Tailwind Compiler:
Install Diesel and Watchexec:
```
sudo pacman -S diesel-cli watchexec
```
Absolutely use pnpm as packet manager for this project.
To run the Tailwind Compiler in watch:
```
pnpm dlx @tailwindcss/cli -i styles/tailwind.css -o assets/generated/main.css --watch
```
```
or (with or without `--watch`)
```
pnpm compile
```
My suggestion is to open one terminal and run `pnpm devrun` to continously rebuild
the Tailwind css and restart/rebuild the Rust server if a template file change.

4
package.json
View File

@@ -2,6 +2,10 @@
"name": "htmxtailwindtest",
"version": "1.0.0",
"license": "ISC",
"scripts": {
"devrun": "watchexec -r -e js,css,html 'tailwindcss -i styles/tailwind.css -o autoassets/main.css;cargo run'",
"compile": "tailwindcss -i styles/tailwind.css -o autoassets/main.css"
},
"devDependencies": {
"@tailwindcss/cli": "^4.0.3",
"daisyui": "5.0.0-beta.6",

1
src/main.rs
View File

@@ -89,6 +89,7 @@ async fn main() -> Result<()> {
// Launch Web Server
let app = Router::new()
.nest_service("/assets", ServeDir::new("assets"))
.nest_service("/autoassets", ServeDir::new("autoassets"))
.route("/", get(index))
.route("/feed/", get(get_list_feed).post(post_feed))
.route("/feed/:id", get(get_feed).delete(delete_feed).put(put_feed))

13
templates/base.html
View File

@@ -1,16 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="/assets/generated/main.css">
<link rel="stylesheet" href="/autoassets/main.css">
<!-- Inter Font is so hot right now! -->
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<title>{% block title %}{{ title }}{% endblock %}</title>
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--suppress CssUnusedSymbol -->
<style>
[x-cloak] {
display: none !important;
}
.htmx-indicator.htmx-inline{
display:none;
}
.htmx-request .htmx-indicator.htmx-inline{
display:inline;
}
.htmx-request.htmx-indicator.htmx-inline{
display:inline;
}
</style>
{% block head %}{% endblock %}
</head>

2
templates/feed.html
View File

@@ -15,7 +15,7 @@
hx-swap="beforeend">
Edit Dialog
</button>
<button class="btn btn-error btn-sm"
<button class="btn btn-sm btn-error"
hx-confirm="Are you sure?"
hx-delete="/feed/{{feed.id}}"
hx-target="#feed_{{feed.id}}"

54
templates/feed_inline.html
View File

@@ -1,29 +1,29 @@
<tr id="feed_{{feed.id}}">
<td>
<label style="width: 100%">
<input type="text" name="name" form="update_feed_{{feed.id}}" value="{{feed.name}}">
</label>
</td>
<td>
<label style="width: 100%">
<input type="url" name="feed_url" form="update_feed_{{feed.id}}" value="{{feed.feed_url}}">
</label>
</td>
<td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
<td>
<form id="update_feed_{{feed.id}}" hx-put="/feed/{{feed.id}}" hx-target="#feed_{{feed.id}}" hx-swap="outerHTML"
hx-indicator="update_feed_{{feed.id}}_indicator" style="padding: 0; background: unset">
<button class="btn" type="reset"
hx-get="/feed/{{feed.id}}"
hx-target="#feed_{{feed.id}}"
hx-swap="outerHTML">
Cancel
</button>
<button class="btn" type="submit">
Confirm
<img id="update_feed_{{feed.id}}_indicator" class="htmx-indicator" src="/assets/oval.svg"
style="height: 1rem; margin-left: 2px" alt="...">
</button>
</form>
</td>
<td>
<label class="w-full">
<input type="text" class="input input-sm" name="name" form="update_feed_{{feed.id}}" value="{{feed.name}}"/>
</label>
</td>
<td>
<label class="w-full">
<input type="url" class="input input-sm" name="feed_url" form="update_feed_{{feed.id}}" value="{{feed.feed_url}}">
</label>
</td>
<td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
<td>
<button class="btn btn-sm btn-warning"
hx-get="/feed/{{feed.id}}"
hx-target="#feed_{{feed.id}}"
hx-swap="outerHTML">
Cancel
</button>
<button class="btn btn-sm btn-primary" type="submit" form="update_feed_{{feed.id}}">
Confirm
<img id="update_feed_{{feed.id}}_indicator" class="htmx-inline htmx-indicator" src="/assets/oval.svg"
style="height: 1rem; margin-left: 2px" alt="...">
</button>
<form id="update_feed_{{feed.id}}" hx-put="/feed/{{feed.id}}" hx-target="#feed_{{feed.id}}" hx-swap="outerHTML"
hx-indicator="#update_feed_{{feed.id}}_indicator">
</form>
</td>
</tr>

4
templates/index.html
View File

@@ -31,9 +31,9 @@
<img class="m-2 h-8" src="/assets/logo.svg" alt="RSS Notifier Logo"/>
<h2 style="margin-bottom: auto; margin-top: auto">RSS Notifier</h2>
</a>
<button class="btn" @click="isModalOpen = true">Create</button>
<button class="btn btn-primary" @click="isModalOpen = true">Create</button>
</nav>
<div class="pt-16">
<div class="pt-20">
<!-- TODO: Switch overlay and dialog to DaisyUI -->
<div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div>
<dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition>