nutomic/ibis
1
0
Fork 0
mirror of https://github.com/Nutomic/ibis.git synced 2024-11-24 15:11:10 +00:00
Code Projects Releases Packages Activity

Proper tailwindcss setup

Browse source
This commit is contained in:
Felix Ableitner 2024-10-30 12:09:08 +01:00
parent 52864a6e5c
commit af80819eca
8 changed files with 30 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Cargo.toml
View file

@ -120,6 +120,8 @@ assets-dir = "assets"
bin-features = ["ssr"] bin-features = ["ssr"]
lib-features = ["hydrate"] lib-features = ["hydrate"]
lib-profile-release = "wasm-release" lib-profile-release = "wasm-release"
tailwind-input-file = "assets/tailwind.css"
tailwind-config-file = "tailwind.config.js"
[lib] [lib]
crate-type = ["cdylib", "rlib"] crate-type = ["cdylib", "rlib"]

2
README.md
View file

@ -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 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`. 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`.

4
assets/tailwind.css Normal file
View file

@ -0,0 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind typography;

1
package.json
View file

@ -1,5 +1,6 @@
{ {
"devDependencies": { "devDependencies": {
"@tailwindcss/forms": "^0.5.9",
"@tailwindcss/typography": "^0.5.15", "@tailwindcss/typography": "^0.5.15",
"tailwindcss": "^3.4.14" "tailwindcss": "^3.4.14"
}, },

19
pnpm-lock.yaml
View file

@ -12,6 +12,9 @@ importers:
specifier: ^4.12.13 specifier: ^4.12.13
version: 4.12.13(postcss@8.4.47) version: 4.12.13(postcss@8.4.47)
devDependencies: devDependencies:
'@tailwindcss/forms':
specifier: ^0.5.9
version: 0.5.9(tailwindcss@3.4.14)
'@tailwindcss/typography': '@tailwindcss/typography':
specifier: ^0.5.15 specifier: ^0.5.15
version: 0.5.15(tailwindcss@3.4.14) version: 0.5.15(tailwindcss@3.4.14)
@ -63,6 +66,11 @@ packages:
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'} 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': '@tailwindcss/typography@0.5.15':
resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==} resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==}
peerDependencies: peerDependencies:
@ -269,6 +277,10 @@ packages:
resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
engines: {node: '>=8.6'} engines: {node: '>=8.6'}
mini-svg-data-uri@1.4.4:
resolution: {integrity: sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==}
hasBin: true
minimatch@9.0.5: minimatch@9.0.5:
resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==} resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
engines: {node: '>=16 || 14 >=14.17'} engines: {node: '>=16 || 14 >=14.17'}
@ -518,6 +530,11 @@ snapshots:
'@pkgjs/parseargs@0.11.0': '@pkgjs/parseargs@0.11.0':
optional: true 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)': '@tailwindcss/typography@0.5.15(tailwindcss@3.4.14)':
dependencies: dependencies:
lodash.castarray: 4.4.0 lodash.castarray: 4.4.0
@ -711,6 +728,8 @@ snapshots:
braces: 3.0.3 braces: 3.0.3
picomatch: 2.3.1 picomatch: 2.3.1
mini-svg-data-uri@1.4.4: {}
minimatch@9.0.5: minimatch@9.0.5:
dependencies: dependencies:
brace-expansion: 2.0.1 brace-expansion: 2.0.1

2
src/frontend/app.rs
View file

@ -30,6 +30,7 @@ use leptos::{
provide_context, provide_context,
use_context, use_context,
view, view,
DynAttrs,
IntoView, IntoView,
RwSignal, RwSignal,
SignalGet, SignalGet,
@ -90,6 +91,7 @@ pub fn App() -> impl IntoView {
provide_context(create_rw_signal(global_state)); provide_context(create_rw_signal(global_state));
view! { view! {
<Html attr:data-theme="emerald"/>
<> <>
<Stylesheet id="daisyui" href="/daisyui.css" /> <Stylesheet id="daisyui" href="/daisyui.css" />
<Stylesheet id="ibis" href="/ibis.css" /> <Stylesheet id="ibis" href="/ibis.css" />

6
src/frontend/mod.rs
View file

@ -15,12 +15,6 @@ pub fn hydrate() {
use crate::frontend::app::App; use crate::frontend::app::App;
console_error_panic_hook::set_once(); console_error_panic_hook::set_once();
leptos::mount_to_body(App); 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 { fn article_link(article: &DbArticle) -> String {

3
tailwind.config.js
View file

@ -12,7 +12,6 @@ module.exports = {
require('@tailwindcss/typography') require('@tailwindcss/typography')
], ],
daisyui: { daisyui: {
themes: ["emerald"], themes: ["emerald"]
}, },
darkMode: 'class'
} }