tailwind
This commit is contained in:
parent
e183391186
commit
1bd3bc9388
8 changed files with 30 additions and 64 deletions
|
@ -1,6 +0,0 @@
|
||||||
[build]
|
|
||||||
target = "client/index.html"
|
|
||||||
dist = "dist"
|
|
||||||
|
|
||||||
[watch]
|
|
||||||
watch = ["client"]
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
|
@ -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>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
11
client/tailwind.config.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: {
|
||||||
|
relative: true,
|
||||||
|
files: ["*.html", "./src/**/*.rs"],
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Add table
Reference in a new issue