feat(ui): ui init

ui/.cargo/config.toml

@@ -0,0 +1,5 @@
+[target.x86_64-unknown-linux-gnu]
+rustflags = ["-C", "target-cpu=native", "-Z", "threads=8"]
+
+[build]
+rustflags = ["-Z", "threads=8"]

ui/.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_size = 4
+charset = utf-8
+
+[*.{yml,yaml}]
+indent_size = 2
+
+[Makefile]
+indent_style = tab

ui/.gitignore

@@ -0,0 +1,30 @@
+[package]
+name = "venus-ui"
+version = "0.1.0"
+edition = "2021"
+authors = ["xfy <xfyxfy@proton.me>"]
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+leptos = { version = "0.6", features = ["csr", "nightly"] }
+leptos_meta = { version = "0.6", features = ["csr", "nightly"] }
+leptos_router = { version = "0.6", features = ["csr", "nightly"] }
+console_log = "1"
+log = "0.4.22"
+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.93"
+wasm-bindgen-test = "0.3.43"
+web-sys = { version = "0.3.70", features = ["Document", "Window"] }
+
+[profile.release]
+opt-level = 'z'
+lto = true
+codegen-units = 1
+panic = "abort"

ui/Cargo.toml

@@ -0,0 +1,30 @@
+[package]
+name = "venus-ui"
+version = "0.1.0"
+edition = "2021"
+authors = ["xfy <xfyxfy@proton.me>"]
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+leptos = { version = "0.6", features = ["csr", "nightly"] }
+leptos_meta = { version = "0.6", features = ["csr", "nightly"] }
+leptos_router = { version = "0.6", features = ["csr", "nightly"] }
+console_log = "1"
+log = "0.4.22"
+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.93"
+wasm-bindgen-test = "0.3.43"
+web-sys = { version = "0.3.70", features = ["Document", "Window"] }
+
+[profile.release]
+opt-level = 'z'
+lto = true
+codegen-units = 1
+panic = "abort"

ui/Makefile

@@ -0,0 +1,56 @@
+CARGO = cargo
+RUSTC = rustc
+CROSS = cross
+
+all: build
+
+build:
+	trunk build
+
+dev:
+	trunk serve
+
+release:
+	trunk build --release
+
+run:
+	$(CARGO) run -p venus
+
+test:
+	$(CARGO) test
+
+clean:
+	$(CARGO) clean
+
+clean-release:
+	rm -rf ./venus/target/release/
+	rm -rf ./venus/target/debug/
+
+check:
+	$(CARGO) check
+
+format:
+	$(CARGO) +nightly fmt
+
+lint:
+	$(CARGO) +nightly clippy
+
+fix:
+	$(CARGO) +nightly fix --allow-dirty --all-features && $(CARGO) +nightly fmt
+
+linux-musl: clean-release
+	$(CROSS) build -p venus --release --target x86_64-unknown-linux-musl
+
+linux-gnu: clean-release
+	$(CROSS) build -p venus --release --target x86_64-unknown-linux-gnu
+
+windows-gnu: clean-release
+	$(CROSS) build -p venus --release --target x86_64-pc-windows-gnu
+
+freebsd: clean-release
+	$(CROSS) build -p venus --release --target x86_64-unknown-freebsd
+
+loongarch: clean-release
+	$(CROSS) build -p venus --release --target loongarch64-unknown-linux-gnu
+
+.PHONY: all

ui/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` 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 venus-ui
+```
+
+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

ui/Trunk.toml

@@ -0,0 +1,5 @@
+[serve]
+# The address to serve on.
+addresses = ["0.0.0.0"]
+# The port to serve on.
+port = 3000

ui/index.html

@@ -0,0 +1,16 @@
+<!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" 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" />
+
+        <!-- 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>

ui/public/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

ui/rust-analyzer.toml

@@ -0,0 +1,2 @@
+[rustfmt]
+overrideCommand = ["leptosfmt", "--stdin", "--rustfmt"]

ui/rust-toolchain.toml

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

ui/src/components/counter_btn.rs

@@ -0,0 +1,36 @@
+use std::borrow::Cow;
+
+use leptos::*;
+
+use crate::clsx;
+
+/// A parameterized incrementing button
+#[component]
+pub fn Button(
+    #[prop(default = 1)] increment: i32,
+    #[prop(optional)] class: Cow<'static, str>,
+) -> impl IntoView {
+    let (count, set_count) = create_signal(0);
+    view! {
+        <button
+            class=clsx!(
+                "bg-white border border-transparent hover:border-gray-200",
+          "outline-none hover:bg-gray-50 focus:ring-4 dark:border-transparent",
+          "focus:ring-cyan-200 font-medium rounded-lg text-sm",
+          "px-5 py-2.5 dark:bg-gray-800 dark:text-white ",
+          "dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:ring-cyan-800",
+          "transition-all disabled:hover:bg-gray-200",
+          "disabled:cursor-not-allowed disabled:dark:hover:bg-gray-700",
+          "disabled:hover:border-transparent",
+          "text-lg disabled:bg-gray-200 disabled:text-gray-500",
+          "dark:disabled:bg-gray-700 dark:disabled:text-gray-300",
+          "disabled:dark:hover:border-transparent",
+          class
+            )
+            on:click=move |_| { set_count(count() + increment) }
+        >
+            "Click me: "
+            {count}
+        </button>
+    }
+}

ui/src/components/mod.rs

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

ui/src/lib.rs

@@ -0,0 +1,38 @@
+#![feature(stmt_expr_attributes)]
+use leptos::*;
+use leptos_meta::*;
+use leptos_router::*;
+
+// Modules
+mod components;
+mod pages;
+mod utils;
+
+// 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! {
+        <Html lang="en" dir="ltr" attr:data-theme="light" />
+
+        // sets the document title
+        <Title text="Venus" />
+
+        // 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>
+                <Route path="/" view=Home />
+                <Route path="/*" view=NotFound />
+            </Routes>
+        </Router>
+    }
+}

ui/src/main.rs

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

ui/src/pages/home.rs

@@ -0,0 +1,37 @@
+use crate::components::counter_btn::Button;
+use leptos::*;
+
+/// 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>
+                <h1>"Welcome to Leptos"</h1>
+
+                <div class="p-2">
+                    <Button class="mr-2".into() />
+                    <Button increment=5 />
+                </div>
+            </div>
+        </ErrorBoundary>
+    }
+}

ui/src/pages/mod.rs

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

ui/src/pages/not_found.rs

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

ui/src/utils/mod.rs

@@ -0,0 +1,32 @@
+#[macro_export]
+macro_rules! clsx {
+    // Match a single item
+    ($item:expr) => {
+        {
+            let mut result = String::new();
+            let val = format!("{}", &$item);
+            result.push_str(&val);
+            result
+        }
+    };
+
+    // Match multiple items
+    ($($item:expr),+) => {
+        {
+            let mut result = String::new();
+            let mut first = true;
+            $(
+                // if let Some(val) = to_val(&$item) {
+                    let val = format!("{}", &$item);
+                    if !first {
+                        result.push(' ');
+                    }
+                    result.push_str(&val);
+                    #[allow(unused_assignments)]
+                    first = false;
+                // }
+            )+
+            result
+        }
+    };
+}

ui/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: {
+        files: ["*.html", "./src/**/*.rs"],
+    },
+    theme: {
+        extend: {},
+    },
+    plugins: [],
+};