xeovalyte/wrb-timings
2
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added leptos example application

Browse Source
This commit is contained in:
xeovalyte 2024-02-12 10:10:26 +01:00
parent 30cac973ab
commit 860e756e79
No known key found for this signature in database
16 changed files with 322 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
application/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
/target
/dist

32
application/Cargo.toml Normal file
View File

@ -0,0 +1,32 @@
[package]
name = "application"
version = "0.1.0"
edition = "2021"
authors = ["xeovalyte <me+gitea@xeovalyte.dev>"]
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
[dependencies]
leptos = { version = "0.6", features = ["csr"] }
leptos_meta = { version = "0.6", features = ["csr"] }
leptos_router = { version = "0.6", features = ["csr"] }
console_log = "1"
log = "0.4"
console_error_panic_hook = "0.1"
# utils
# strum = { version = "0.25", features = ["derive", "strum_macros"] }
# strum_macros = "0.25"
[dev-dependencies]
wasm-bindgen = "0.2"
wasm-bindgen-test = "0.3"
web-sys = { version = "0.3", features = ["Document", "Window"] }
[profile.release]
opt-level = 'z'
lto = true
codegen-units = 1
panic = "abort"

79
application/README.md Normal file
View File

@ -0,0 +1,79 @@
<picture>
<source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_Solid_White.svg" media="(prefers-color-scheme: dark)">
<img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo">
</picture>
# Leptos Client-Side Rendered (CSR) App Starter Template
This is a template for use with the [Leptos][Leptos] web framework using the [Trunk][Trunk] tool to compile and serve your app in development.
## Creating your repo from the template
This template requires you to have `cargo-generate` installed. You can install it with
```sh
cargo install cargo-generate
```
To set up your project with this template, run
```sh
cargo generate --git https://github.com/leptos-community/start-csr
```
to generate your new project, then
```sh
cd application
```
to go to your newly created project.
By default, this template uses Rust `nightly` and requires that you've installed the `wasm` compilation target for your toolchain.
Sass and Tailwind are also supported by the Trunk build tool, but are optional additions: [see here for more info on how to set those up with Trunk][Trunk-instructions].
If you don't have Rust nightly, you can install it with
```sh
rustup toolchain install nightly --allow-downgrade
```
You can add the `wasm` compilation target to rust using
```sh
rustup target add wasm32-unknown-unknown
```
## Developing your Leptos CSR project
To develop your Leptos CSR project, running
```sh
trunk serve --port 3000 --open
```
will open your app in your default browser at `http://localhost:3000`.
## Deploying your Leptos CSR project
To build a Leptos CSR app for release, use the command
```sh
trunk build --release
```
This will output the files necessary to run your app into the `dist` folder; you can then use any static site host to serve these files.
For further information about hosting Leptos CSR apps, please refer to [the Leptos Book chapter on deployment available here][deploy-csr].
[Leptos]: https://github.com/leptos-rs/leptos
[Trunk]: https://github.com/trunk-rs/trunk
[Trunk-instructions]: https://trunkrs.dev/assets/
[deploy-csr]: https://book.leptos.dev/deployment/csr.html

15
application/index.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<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" rel="stylesheet" href="public/styles.css" />
<!-- Include favicon in dist output: see https://trunkrs.dev/assets/#icon -->
<link data-trunk rel="icon" href="public/favicon.ico" />
<!-- 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-wasm-opt="z" data-weak-refs />
</head>
<body></body>
</html>

BIN
application/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

52
application/public/styles.css Normal file
View File

@ -0,0 +1,52 @@
/* --------------------- 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;
}

2
application/rust-toolchain.toml Normal file
View File

@ -0,0 +1,2 @@
[toolchain]
channel = "nightly"

16
application/src/components/counter_btn.rs Normal file
View File

@ -0,0 +1,16 @@
use leptos::*;
/// A parameterized incrementing button
#[component]
pub fn Button(#[prop(default = 1)] increment: i32) -> impl IntoView {
let (count, set_count) = create_signal(0);
view! {
<button
on:click= move |_| {
set_count.update(|n| *n += increment)
}
>
"Click me: " {count}
</button>
}
}

1
application/src/components/mod.rs Normal file
View File

@ -0,0 +1 @@
pub mod counter_btn;

60
application/src/lib.rs Normal file
View File

@ -0,0 +1,60 @@
use leptos::*;
use leptos_meta::*;
use leptos_router::*;
// Modules
mod components;
mod pages;
// Top-Level pages
use crate::pages::home::Home;
use crate::pages::not_found::NotFound;
/// An app router which renders the homepage and handles 404's
#[component]
pub fn App() -> impl IntoView {
// Provides context that manages stylesheets, titles, meta tags, etc.
provide_meta_context();
view! {
// injects info into HTML tag from application code
<Html
lang="en"
dir="ltr"
attr:data-theme="light"
/>
// sets the document title
<Title text="Welcome to Leptos CSR"/>
// injects metadata in the <head> of the page
<Meta charset="UTF-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1.0" />
<ErrorBoundary
fallback=|errors| view! {
<h1>"Uh oh! Something went wrong!"</h1>
<p>"Errors: "</p>
// Render a list of errors as strings - good for development purposes
<ul>
{move || errors.get()
.into_iter()
.map(|(_, e)| view! { <li>{e.to_string()}</li>})
.collect_view()
}
</ul>
}
>
<Router>
<Routes>
<Route path="/" view=Home />
<Route path="/*" view=NotFound />
</Routes>
</Router>
</ErrorBoundary>
}
}

14
application/src/main.rs Normal file
View File

@ -0,0 +1,14 @@
use leptos::*;
use application::App;
fn main() {
// set up logging
_ = console_log::init_with_level(log::Level::Debug);
console_error_panic_hook::set_once();
mount_to_body(|| {
view! {
<App />
}
})
}

24
application/src/pages/home.rs Normal file
View File

@ -0,0 +1,24 @@
use crate::components::counter_btn::Button;
use leptos::*;
/// Default Home Page
#[component]
pub fn Home() -> impl IntoView {
view! {
<div class="container">
<picture>
<source srcset="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_pref_dark_RGB.svg" media="(prefers-color-scheme: dark)" />
<img src="https://raw.githubusercontent.com/leptos-rs/leptos/main/docs/logos/Leptos_logo_RGB.svg" alt="Leptos Logo" height="200" width="400"/>
</picture>
<h1>"Welcome to Leptos"</h1>
<div class="buttons">
<Button />
<Button increment=5 />
</div>
</div>
}
}

2
application/src/pages/mod.rs Normal file
View File

@ -0,0 +1,2 @@
pub mod home;
pub mod not_found;

7
application/src/pages/not_found.rs Normal file
View File

@ -0,0 +1,7 @@
use leptos::*;
/// 404 Not Found Page
#[component]
pub fn NotFound() -> impl IntoView {
view! { <h1>"Uh oh!" <br/> "We couldn't find that page!"</h1> }
}

30
flake.lock
View File

@ -23,11 +23,11 @@
"systems": "systems_2" "systems": "systems_2"
}, },
"locked": { "locked": {
"lastModified": 1681202837, "lastModified": 1705309234,
"narHash": "sha256-H+Rh19JDwRtpVPAWp64F+rlEtxUWBAQW28eAi3SRSzg=", "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
"owner": "numtide", "owner": "numtide",
"repo": "flake-utils", "repo": "flake-utils",
"rev": "cfacdce06f30d2b68473a46042957675eebb3401", "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
"type": "github" "type": "github"
}, },
"original": { "original": {
@ -38,11 +38,11 @@
}, },
"nixpkgs": { "nixpkgs": {
"locked": { "locked": {
"lastModified": 1705916986, "lastModified": 1707514827,
"narHash": "sha256-iBpfltu6QvN4xMpen6jGGEb6jOqmmVQKUrXdOJ32u8w=", "narHash": "sha256-Y+wqFkvikpE1epCx57PsGw+M1hX5aY5q/xgk+ebDwxI=",
"owner": "NixOS", "owner": "NixOS",
"repo": "nixpkgs", "repo": "nixpkgs",
"rev": "d7f206b723e42edb09d9d753020a84b3061a79d8", "rev": "20f65b86b6485decb43c5498780c223571dd56ef",
"type": "github" "type": "github"
}, },
"original": { "original": {
@ -54,11 +54,11 @@
}, },
"nixpkgs-unstable": { "nixpkgs-unstable": {
"locked": { "locked": {
"lastModified": 1705856552, "lastModified": 1707546158,
"narHash": "sha256-JXfnuEf5Yd6bhMs/uvM67/joxYKoysyE3M2k6T3eWbg=", "narHash": "sha256-nYYJTpzfPMDxI8mzhQsYjIUX+grorqjKEU9Np6Xwy/0=",
"owner": "NixOS", "owner": "NixOS",
"repo": "nixpkgs", "repo": "nixpkgs",
"rev": "612f97239e2cc474c13c9dafa0df378058c5ad8d", "rev": "d934204a0f8d9198e1e4515dd6fec76a139c87f0",
"type": "github" "type": "github"
}, },
"original": { "original": {
@ -70,11 +70,11 @@
}, },
"nixpkgs_2": { "nixpkgs_2": {
"locked": { "locked": {
"lastModified": 1681358109, "lastModified": 1706487304,
"narHash": "sha256-eKyxW4OohHQx9Urxi7TQlFBTDWII+F+x2hklDOQPB50=", "narHash": "sha256-LE8lVX28MV2jWJsidW13D2qrHU/RUUONendL2Q/WlJg=",
"owner": "NixOS", "owner": "NixOS",
"repo": "nixpkgs", "repo": "nixpkgs",
"rev": "96ba1c52e54e74c3197f4d43026b3f3d92e83ff9", "rev": "90f456026d284c22b3e3497be980b2e47d0b28ac",
"type": "github" "type": "github"
}, },
"original": { "original": {
@ -98,11 +98,11 @@
"nixpkgs": "nixpkgs_2" "nixpkgs": "nixpkgs_2"
}, },
"locked": { "locked": {
"lastModified": 1705889935, "lastModified": 1707703915,
"narHash": "sha256-77KPBK5e0ACNzIgJDMuptTtEqKvHBxTO3ksqXHHVO+4=", "narHash": "sha256-Vej69igzNr3eVDca6+32uO+TXjVWx6ZUwwy3iZuzhJ4=",
"owner": "oxalica", "owner": "oxalica",
"repo": "rust-overlay", "repo": "rust-overlay",
"rev": "e36f66bb10b09f5189dc3b1706948eaeb9a1c555", "rev": "e6679d2ff9136d00b3a7168d2bf1dff9e84c5758",
"type": "github" "type": "github"
}, },
"original": { "original": {

2
flake.nix
View File

@ -27,7 +27,7 @@
buildInputs = [ buildInputs = [
trunk trunk
dart-sass dart-sass
rust-analyzer unstable.rust-analyzer
llvmPackages.clangNoLibc llvmPackages.clangNoLibc
llvmPackages.lld llvmPackages.lld
dap dap