adam/cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

tailwind

Browse source
This commit is contained in:
Adam 2024-07-18 19:53:28 -04:00
parent e183391186
commit 1bd3bc9388
8 changed files with 30 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
Trunk.toml
View file

@ -1,6 +0,0 @@
[build]
target = "client/index.html"
dist = "dist"
[watch]
watch = ["client"]

4
client/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<!-- Add a plain CSS file: see https://trunkrs.dev/assets/#css --> <!-- Add a plain CSS file: see https://trunkrs.dev/assets/#css -->
<!-- If using Tailwind with Leptos CSR, see https://trunkrs.dev/assets/#tailwind instead--> <!-- If using Tailwind with Leptos CSR, see https://trunkrs.dev/assets/#tailwind instead-->
<link data-trunk rel="css" href="public/styles.css" /> <link data-trunk rel="tailwind-css" href="public/styles.css" />
<!-- Include favicon in dist output: see https://trunkrs.dev/assets/#icon --> <!-- Include favicon in dist output: see https://trunkrs.dev/assets/#icon -->
<link data-trunk rel="icon" href="public/favicon.ico" /> <link data-trunk rel="icon" href="public/favicon.ico" />
@ -11,5 +11,5 @@
<!-- include support for `wasm-bindgen --weak-refs` - see: https://rustwasm.github.io/docs/wasm-bindgen/reference/weak-references.html --> <!-- include support for `wasm-bindgen --weak-refs` - see: https://rustwasm.github.io/docs/wasm-bindgen/reference/weak-references.html -->
<link data-trunk rel="rust" data-target-path="client" data-wasm-opt="z" data-weak-refs /> <link data-trunk rel="rust" data-target-path="client" data-wasm-opt="z" data-weak-refs />
</head> </head>
<body></body> <body class="bg-black"></body>
</html> </html>

55
client/public/styles.css
View file

@ -1,52 +1,3 @@
/* --------------------- Open Props --------------------------- */ @tailwind base;
@tailwind components;
/* the props */ @tailwind utilities;
@import "https://unpkg.com/open-props";
/* optional imports that use the props */
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";
/* ------------------------------------------------------------ */
body {
font-family: sans-serif;
text-align: center;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.buttons {
display: flex;
justify-content: space-evenly;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
margin: 0 auto;
padding: 2rem;
}
p,
button {
margin: var(--size-6);
}
body > picture,
button {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
margin: 2rem;
}

4
client/src/lib.rs
View file

@ -20,17 +20,19 @@ pub fn App() -> impl IntoView {
<Html lang="en" dir="ltr" attr:data-theme="dark"/> <Html lang="en" dir="ltr" attr:data-theme="dark"/>
// sets the document title // sets the document title
<Title text="Welcome to Leptos CSR"/> <Title text="Cards for Humanity"/>
// injects metadata in the <head> of the page // injects metadata in the <head> of the page
<Meta charset="UTF-8"/> <Meta charset="UTF-8"/>
<Meta name="viewport" content="width=device-width, initial-scale=1.0"/> <Meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<body class="bg-black">
<Router> <Router>
<Routes> <Routes>
<Route path="/" view=Home/> <Route path="/" view=Home/>
<Route path="/*" view=NotFound/> <Route path="/*" view=NotFound/>
</Routes> </Routes>
</Router> </Router>
</body>
} }
} }

3
client/src/pages/home.rs
View file

@ -28,6 +28,9 @@ pub fn Home() -> impl IntoView {
<h1>"Cards For Humanity"</h1> <h1>"Cards For Humanity"</h1>
<hr/> <hr/>
<p>Hello, [Name]</p>
<hr/>
<p>Connection status: Disconnected.</p>
<div class="buttons"> <div class="buttons">
<Button/> <Button/>

11
client/tailwind.config.js Normal file
View file

@ -0,0 +1,11 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: {
relative: true,
files: ["*.html", "./src/**/*.rs"],
},
theme: {
extend: {},
},
plugins: [],
};

9
readme.md
View file

@ -7,8 +7,13 @@ This started as a problem trying to play games with friends who are all on diffe
## Dev stuff: ## Dev stuff:
`trunk build` to build test client ### Client
`cargo run` to run server * [Install Trunk](https://trunkrs.dev/#install)
* `trunk build` or `trunk serve --open` (hot reload on port 8080) from `client` dir to build test client
### Server
* `cargo run` to run server
open `localhost:3030` in your browser to run test client or connect to `ws://localhost:3030/websocket` with a custom client open `localhost:3030` in your browser to run test client or connect to `ws://localhost:3030/websocket` with a custom client

2
src/main.rs
View file

@ -139,7 +139,7 @@ async fn main() -> Result<()> {
.route("/reference_client", get(reference_client)) .route("/reference_client", get(reference_client))
.route("/websocket", get(websocket_handler)) .route("/websocket", get(websocket_handler))
.route("/css", get(css)) .route("/css", get(css))
.nest_service("/", ServeDir::new("dist")) .nest_service("/", ServeDir::new("client/dist"))
.with_state(app_state); .with_state(app_state);
// send it // send it