From af80819eca70b06ab723bdc242b4ebbe5950602c Mon Sep 17 00:00:00 2001
From: Felix Ableitner
Date: Wed, 30 Oct 2024 12:09:08 +0100
Subject: [PATCH] Proper tailwindcss setup
---
Cargo.toml | 2 ++
README.md | 2 +-
assets/tailwind.css | 4 ++++
package.json | 1 +
pnpm-lock.yaml | 19 +++++++++++++++++++
src/frontend/app.rs | 2 ++
src/frontend/mod.rs | 6 ------
tailwind.config.js | 3 +--
8 files changed, 30 insertions(+), 9 deletions(-)
create mode 100644 assets/tailwind.css
diff --git a/Cargo.toml b/Cargo.toml
index c7a6419..1aaad02 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -120,6 +120,8 @@ assets-dir = "assets"
bin-features = ["ssr"]
lib-features = ["hydrate"]
lib-profile-release = "wasm-release"
+tailwind-input-file = "assets/tailwind.css"
+tailwind-config-file = "tailwind.config.js"
[lib]
crate-type = ["cdylib", "rlib"]
diff --git a/README.md b/README.md
index 5cfca71..ec16a15 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ psql -c "CREATE USER ibis WITH PASSWORD 'ibis' SUPERUSER;" -U postgres
psql -c "CREATE DATABASE ibis WITH OWNER ibis;" -U postgres
```
-You need to install [cargo](https://rustup.rs/), and [cargo-leptos](https://github.com/leptos-rs/cargo-leptos). Run `cargo leptos watch` which automatically rebuilds the project after changes. Then open the site at [localhost:3000](http://localhost:3000/). You can login with user `ibis` and password `ibis`.
+You need to install [cargo](https://rustup.rs/), [pnpm](https://pnpm.io/) and [cargo-leptos](https://github.com/leptos-rs/cargo-leptos). Use `pnpm install` to get Javascript dependencies. Then run `cargo leptos watch` which automatically rebuilds the project after changes. Open the site at [localhost:3000](http://localhost:3000/). You can login with user `ibis` and password `ibis`.
By default the frontend runs on port 3000, which can be changed with env var `TRUNK_SERVE_PORT`. The backend port is 8081 and can be changed with `IBIS_BACKEND_PORT`.
diff --git a/assets/tailwind.css b/assets/tailwind.css
new file mode 100644
index 0000000..8d6981e
--- /dev/null
+++ b/assets/tailwind.css
@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind typography;
diff --git a/package.json b/package.json
index d96e610..3dce4da 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
{
"devDependencies": {
+ "@tailwindcss/forms": "^0.5.9",
"@tailwindcss/typography": "^0.5.15",
"tailwindcss": "^3.4.14"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 17c9256..2c07948 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,9 @@ importers:
specifier: ^4.12.13
version: 4.12.13(postcss@8.4.47)
devDependencies:
+ '@tailwindcss/forms':
+ specifier: ^0.5.9
+ version: 0.5.9(tailwindcss@3.4.14)
'@tailwindcss/typography':
specifier: ^0.5.15
version: 0.5.15(tailwindcss@3.4.14)
@@ -63,6 +66,11 @@ packages:
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'}
+ '@tailwindcss/forms@0.5.9':
+ resolution: {integrity: sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==}
+ peerDependencies:
+ tailwindcss: '>=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20'
+
'@tailwindcss/typography@0.5.15':
resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
peerDependencies:
@@ -269,6 +277,10 @@ packages:
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
engines: {node: '>=8.6'}
+ mini-svg-data-uri@1.4.4:
+ resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
+ hasBin: true
+
minimatch@9.0.5:
resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
engines: {node: '>=16 || 14 >=14.17'}
@@ -518,6 +530,11 @@ snapshots:
'@pkgjs/parseargs@0.11.0':
optional: true
+ '@tailwindcss/forms@0.5.9(tailwindcss@3.4.14)':
+ dependencies:
+ mini-svg-data-uri: 1.4.4
+ tailwindcss: 3.4.14
+
'@tailwindcss/typography@0.5.15(tailwindcss@3.4.14)':
dependencies:
lodash.castarray: 4.4.0
@@ -711,6 +728,8 @@ snapshots:
braces: 3.0.3
picomatch: 2.3.1
+ mini-svg-data-uri@1.4.4: {}
+
minimatch@9.0.5:
dependencies:
brace-expansion: 2.0.1
diff --git a/src/frontend/app.rs b/src/frontend/app.rs
index e612d59..fbd6e82 100644
--- a/src/frontend/app.rs
+++ b/src/frontend/app.rs
@@ -30,6 +30,7 @@ use leptos::{
provide_context,
use_context,
view,
+ DynAttrs,
IntoView,
RwSignal,
SignalGet,
@@ -90,6 +91,7 @@ pub fn App() -> impl IntoView {
provide_context(create_rw_signal(global_state));
view! {
+
<>
diff --git a/src/frontend/mod.rs b/src/frontend/mod.rs
index 995713f..fec58e6 100644
--- a/src/frontend/mod.rs
+++ b/src/frontend/mod.rs
@@ -15,12 +15,6 @@ pub fn hydrate() {
use crate::frontend::app::App;
console_error_panic_hook::set_once();
leptos::mount_to_body(App);
-
- // set theme
- // https://daisyui.com/docs/themes/
- let document = web_sys::window().unwrap().document().unwrap();
- let html_element = document.document_element().unwrap();
- html_element.set_attribute("data-theme", "emerald").unwrap();
}
fn article_link(article: &DbArticle) -> String {
diff --git a/tailwind.config.js b/tailwind.config.js
index 6a04ef0..754b9c8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,7 +12,6 @@ module.exports = {
require('@tailwindcss/typography')
],
daisyui: {
- themes: ["emerald"],
+ themes: ["emerald"]
},
- darkMode: 'class'
}