leptos-template

.cargo/config.toml

@@ -0,0 +1,6 @@
+[target.wasm32-unknown-unknown]
+linker = "lld"
+
+[build]
+# Uncomment the line below if you want wasm32-unknown-unknown to be the default target
+# target = "wasm32-unknown-unknown"

.gitignore

@@ -7,3 +7,7 @@ devenv.local.nix
 
 # pre-commit
 .pre-commit-config.yaml
+
+# from leptos template
+/target
+/dist

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+    "rust-analyzer.rustfmt.overrideCommand": [
+        "leptosfmt",
+        "--stdin",
+        "--rustfmt"
+    ],
+    "editor.formatOnSave": true,
+    "[rust]": {
+        "editor.defaultFormatter": "rust-lang.rust-analyzer",
+    },
+    "files.associations": {
+        "*.rs": "rust"
+    },
+}

Cargo.toml

@@ -0,0 +1,32 @@
+[package]
+name = "py-leptos"
+version = "0.1.0"
+edition = "2021"
+authors = ["John Lancaster <32917998+jsl12@users.noreply.github.com>"]
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+leptos = { version = "0.8", features = ["csr"] }
+leptos_meta = { version = "0.8" }
+leptos_router = { version = "0.8" }
+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"

README.md

@@ -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` and `trunk` installed. [`leptosfmt`](https://github.com/bram209/leptosfmt) is optional but highly recommended. You can install them with
+
+```sh
+cargo install cargo-generate trunk leptosfmt
+```
+
+
+To set up your project with this template, run
+
+```sh
+cargo generate --git https://github.com/leptos-rs/start-trunk
+```
+
+to generate your new project, then
+
+```sh
+cd py-leptos
+```
+
+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

Trunk.toml

@@ -0,0 +1,60 @@
+[build]
+# The index HTML file to drive the bundling process.
+target = "index.html"
+# Build in release mode.
+release = false
+# Use a custom cargo profile. Overrides the default chosen by cargo. Ignored if the 'index.html' has one configured.
+# cargo_profile = ""
+# The output dir for all final assets.
+dist = "dist"
+# The public URL from which assets are to be served.
+public_url = "/"
+# Whether to include hash values in the output file names.
+filehash = true
+# Whether to inject scripts (and module preloads) into the finalized output.
+inject_scripts = true
+# Run without network access
+# offline = false
+# Require Cargo.lock and cache are up to date
+# frozen = false
+# Require Cargo.lock is up to date
+# locked = false
+# Control minification
+# minify = "never" # can be one of: never, on_release, always
+# Allow disabling sub-resource integrity (SRI)
+# no_sri = false
+# An optional cargo profile to use
+# cargo_profile = "release-trunk"
+
+[watch]
+# Paths to watch. The `build.target`'s parent folder is watched by default.
+watch = []
+# Paths to ignore.
+ignore = []
+
+[serve]
+# The address to serve on.
+addresses = ["127.0.0.1"]
+# The port to serve on.
+port = 3000
+# Aliases to serve, typically found in an /etc/hosts file.
+# aliases = ["http://localhost.mywebsite.com"]
+# Disable the reverse DNS lookup during startup
+# disable_address_lookup = false
+# Open a browser tab once the initial build is complete.
+open = false
+# Whether to disable fallback to index.html for missing files.
+# no_spa = false
+# Disable auto-reload of the web app.
+# no_autoreload = false
+# Disable error reporting
+# no_error_reporting = false
+# Additional headers set for responses.
+# headers = { "test-header" = "header value", "test-header2" = "header value 2" }
+# Protocol used for autoreload WebSockets connection.
+# ws_protocol = "ws"
+# The certificate/private key pair to use for TLS, which is enabled if both are set.
+# tls_key_path = "self_signed_certs/key.pem"
+# tls_cert_path = "self_signed_certs/cert.pem"
+# Additional headers to send. NOTE: header names must be valid HTTP headers.
+# headers = { "X-Foo" = "bar" }

devenv.nix

@@ -9,14 +9,13 @@
     git
     # rustc rustfmt cargo
     trunk cargo-generate
+    # LLVM tools for WebAssembly compilation
+    llvm
+    lld
   ];
 
-  languages.rust = {
-    enable = true;
-  };
-
   # https://devenv.sh/languages/
-  # languages.rust.enable = true;
+  languages.rust.enable = true;
 
   # https://devenv.sh/processes/
   # processes.cargo-watch.exec = "cargo-watch";

index.html

@@ -0,0 +1,18 @@
+<!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="scss" href="public/styles.scss" />
+
+  <!-- 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>

public/styles.scss

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

rust-toolchain.toml

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

src/components/counter_btn.rs

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

src/components/mod.rs

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

src/lib.rs

@@ -0,0 +1,34 @@
+use leptos::prelude::*;
+use leptos_meta::*;
+use leptos_router::{components::*, path};
+
+// Modules
+mod components;
+mod pages;
+
+// Top-Level pages
+use crate::pages::home::Home;
+
+/// 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! {
+        <Html attr:lang="en" attr: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" />
+
+        <Router>
+            <Routes fallback=|| view! { NotFound }>
+                <Route path=path!("/") view=Home />
+            </Routes>
+        </Router>
+    }
+}

src/main.rs

@@ -0,0 +1,14 @@
+use leptos::prelude::*;
+use py_leptos::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 />
+        }
+    })
+}

src/pages/home.rs

@@ -0,0 +1,52 @@
+use crate::components::counter_btn::Button;
+use leptos::prelude::*;
+
+/// Default Home Page
+#[component]
+pub fn Home() -> impl IntoView {
+    view! {
+        <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>
+            }
+        }>
+
+            <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>
+        </ErrorBoundary>
+    }
+}

src/pages/mod.rs

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

src/pages/not_found.rs

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