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>
<!-- Add a plain CSS file: see https://trunkrs.dev/assets/#css -->
<!-- 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 -->
<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 -->
<link data-trunk rel="rust" data-target-path="client" data-wasm-opt="z" data-weak-refs />
</head>
<body></body>
<body class="bg-black"></body>
</html>

55
client/public/styles.css
View file

@ -1,52 +1,3 @@
/* --------------------- Open Props --------------------------- */
/* the props */
@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;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

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"/>
// sets the document title
<Title text="Welcome to Leptos CSR"/>
<Title text="Cards for Humanity"/>
// injects metadata in the <head> of the page
<Meta charset="UTF-8"/>
<Meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<body class="bg-black">
<Router>
<Routes>
<Route path="/" view=Home/>
<Route path="/*" view=NotFound/>
</Routes>
</Router>
</body>
}
}

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

@ -28,6 +28,9 @@ pub fn Home() -> impl IntoView {
<h1>"Cards For Humanity"</h1>
<hr/>
<p>Hello, [Name]</p>
<hr/>
<p>Connection status: Disconnected.</p>
<div class="buttons">
<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:
`trunk build` to build test client
`cargo run` to run server
### Client
* [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

2
src/main.rs
View file

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