Added leptos example application

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

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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

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;
}

View File

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

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>
}
}

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 />
}
})
}

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>
}
}

View File

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

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> }
}

View File

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

View File

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