Initial commit.

.envrc

@@ -0,0 +1,2 @@
+use flake
+export PATH=~/.cargo/bin:$PATH

.gitignore

@@ -0,0 +1,7 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target
+.DS_Store
+
+# These are backup files generated by rustfmt
+**/*.rs.bk

Cargo.toml

@@ -0,0 +1,28 @@
+[workspace]
+resolver = "2"
+members = [
+    "ui",
+    "web",
+    "desktop",
+    "mobile",
+    "server",
+]
+
+[workspace.dependencies]
+dioxus = { version = "0.6.0" }
+
+# workspace
+ui = { path = "ui" }
+server = { path = "server" }
+
+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"

README.md

@@ -0,0 +1,19 @@
+# Development
+
+Depending on your selected options, your new workspace project contains a workspace member for each platform.
+If you chose to develop with the router feature, each platform crate will have a `views` folder for your platform-specific views.
+You are provided with a `ui` crate for shared UI and if you chose to use fullstack, you will have a `server` crate for your shared server functions.
+
+### Serving Your App
+
+Navigate to the platform crate of your choice:
+```bash
+cd web
+```
+
+and serve:
+
+```bash
+dx serve
+```
+

desktop/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "desktop"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { workspace = true, features = ["router"] }
+ui = { workspace = true }
+
+[features]
+default = []
+desktop = ["dioxus/desktop"]
+server = ["dioxus/server"]

desktop/assets/blog.css

@@ -0,0 +1,8 @@
+#blog {
+  margin-top: 50px;
+}
+
+#blog a {
+  color: #ffffff;
+  margin-top: 50px;
+}

desktop/assets/main.css

@@ -0,0 +1,6 @@
+body {
+    background-color: #0f1116;
+    color: #ffffff;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 20px;
+}

desktop/src/main.rs

@@ -0,0 +1,56 @@
+use dioxus::prelude::*;
+
+use ui::Navbar;
+use views::{Blog, Home};
+
+
+mod views;
+
+#[derive(Debug, Clone, Routable, PartialEq)]
+#[rustfmt::skip]
+enum Route {
+    #[layout(DesktopNavbar)]
+    #[route("/")]
+    Home {},
+    #[route("/blog/:id")]
+    Blog { id: i32 },
+}
+
+
+const MAIN_CSS: Asset = asset!("/assets/main.css");
+
+fn main() {
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    // Build cool things ✌️
+
+    rsx! {
+        // Global app resources
+        document::Link { rel: "stylesheet", href: MAIN_CSS }
+
+        Router::<Route> {}
+    }
+}
+
+/// A desktop-specific Router around the shared `Navbar` component
+/// which allows us to use the desktop-specific `Route` enum.
+#[component]
+fn DesktopNavbar() -> Element {
+    rsx! {
+        Navbar {
+            Link {
+                to: Route::Home {},
+                "Home"
+            }
+            Link {
+                to: Route::Blog { id: 1 },
+                "Blog"
+            }
+        }
+
+        Outlet::<Route> {}
+    }
+}

desktop/src/views/blog.rs

@@ -0,0 +1,30 @@
+use crate::Route;
+use dioxus::prelude::*;
+
+const BLOG_CSS: Asset = asset!("/assets/blog.css");
+
+#[component]
+pub fn Blog(id: i32) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: BLOG_CSS}
+
+        div {
+            id: "blog",
+
+            // Content
+            h1 { "This is blog #{id}!" }
+            p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
+
+            // Navigation links
+            Link {
+                to: Route::Blog { id: id - 1 },
+                "Previous"
+            }
+            span { " <---> " }
+            Link {
+                to: Route::Blog { id: id + 1 },
+                "Next"
+            }
+        }
+    }
+}

desktop/src/views/home.rs

@@ -0,0 +1,10 @@
+use dioxus::prelude::*;
+use ui::{Hero, Echo};
+
+#[component]
+pub fn Home() -> Element {
+    rsx! {
+        Hero {}
+        Echo {}
+    }
+}

desktop/src/views/mod.rs

@@ -0,0 +1,5 @@
+mod home;
+pub use home::Home;
+
+mod blog;
+pub use blog::Blog;

flake.lock

@@ -0,0 +1,93 @@
+{
+  "nodes": {
+    "naersk": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      },
+      "locked": {
+        "lastModified": 1739824009,
+        "narHash": "sha256-fcNrCMUWVLMG3gKC5M9CBqVOAnJtyRvGPxptQFl5mVg=",
+        "owner": "nix-community",
+        "repo": "naersk",
+        "rev": "e5130d37369bfa600144c2424270c96f0ef0e11d",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-community",
+        "ref": "master",
+        "repo": "naersk",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 0,
+        "narHash": "sha256-IhnK4LhkBlf14/F8THvUy3xi/TxSQkp9hikfDZRD4Ic=",
+        "path": "/nix/store/s3bhg6p26cqi1hm2lamjjdwaiq49g2hn-source",
+        "type": "path"
+      },
+      "original": {
+        "id": "nixpkgs",
+        "type": "indirect"
+      }
+    },
+    "nixpkgs_2": {
+      "locked": {
+        "lastModified": 1742268799,
+        "narHash": "sha256-IhnK4LhkBlf14/F8THvUy3xi/TxSQkp9hikfDZRD4Ic=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "da044451c6a70518db5b730fe277b70f494188f1",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-24.11",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "naersk": "naersk",
+        "nixpkgs": "nixpkgs_2",
+        "utils": "utils"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,44 @@
+{
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-24.11";
+    utils.url = "github:numtide/flake-utils";
+    naersk.url = "github:nix-community/naersk/master";
+  };
+
+  outputs =
+    {
+      self,
+      nixpkgs,
+      utils,
+      naersk,
+    }:
+    utils.lib.eachDefaultSystem (
+      system:
+      let
+        pkgs = import nixpkgs { inherit system; };
+        naersk-lib = pkgs.callPackage naersk { };
+      in
+      {
+        defaultPackage = naersk-lib.buildPackage ./.;
+        devShell =
+          with pkgs;
+          mkShell.override { stdenv = pkgs.clangStdenv; } {
+            nativeBuildInputs = [
+              cargo
+              rustc
+              rustfmt
+              rustPackages.clippy
+              cargo-binstall
+              llvmPackages.bintools
+              pkg-config
+            ];
+            buildInputs = [
+              webkitgtk_4_1
+              gtk3
+              xdotool.out
+            ];
+            RUST_SRC_PATH = rustPlatform.rustLibSrc;
+          };
+      }
+    );
+}

mobile/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "mobile"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { workspace = true, features = ["router"] }
+ui = { workspace = true }
+
+[features]
+default = []
+mobile = ["dioxus/mobile"]
+server = ["dioxus/server"]

mobile/assets/blog.css

@@ -0,0 +1,8 @@
+#blog {
+  margin-top: 50px;
+}
+
+#blog a {
+  color: #ffffff;
+  margin-top: 50px;
+}

mobile/assets/main.css

@@ -0,0 +1,6 @@
+body {
+    background-color: #0f1116;
+    color: #ffffff;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 20px;
+}

mobile/src/main.rs

@@ -0,0 +1,56 @@
+use dioxus::prelude::*;
+
+use ui::Navbar;
+use views::{Blog, Home};
+
+
+mod views;
+
+#[derive(Debug, Clone, Routable, PartialEq)]
+#[rustfmt::skip]
+enum Route {
+    #[layout(MobileNavbar)]
+    #[route("/")]
+    Home {},
+    #[route("/blog/:id")]
+    Blog { id: i32 },
+}
+
+
+const MAIN_CSS: Asset = asset!("/assets/main.css");
+
+fn main() {
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    // Build cool things ✌️
+
+    rsx! {
+        // Global app resources
+        document::Link { rel: "stylesheet", href: MAIN_CSS }
+
+        Router::<Route> {}
+    }
+}
+
+/// A mobile-specific Router around the shared `Navbar` component
+/// which allows us to use the mobile-specific `Route` enum.
+#[component]
+fn MobileNavbar() -> Element {
+    rsx! {
+        Navbar {
+            Link {
+                to: Route::Home {},
+                "Home"
+            }
+            Link {
+                to: Route::Blog { id: 1 },
+                "Blog"
+            }
+        }
+
+        Outlet::<Route> {}
+    }
+}

mobile/src/views/blog.rs

@@ -0,0 +1,30 @@
+use crate::Route;
+use dioxus::prelude::*;
+
+const BLOG_CSS: Asset = asset!("/assets/blog.css");
+
+#[component]
+pub fn Blog(id: i32) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: BLOG_CSS}
+
+        div {
+            id: "blog",
+
+            // Content
+            h1 { "This is blog #{id}!" }
+            p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
+
+            // Navigation links
+            Link {
+                to: Route::Blog { id: id - 1 },
+                "Previous"
+            }
+            span { " <---> " }
+            Link {
+                to: Route::Blog { id: id + 1 },
+                "Next"
+            }
+        }
+    }
+}

mobile/src/views/home.rs

@@ -0,0 +1,10 @@
+use dioxus::prelude::*;
+use ui::{Hero, Echo};
+
+#[component]
+pub fn Home() -> Element {
+    rsx! {
+        Hero {}
+        Echo {}
+    }
+}

mobile/src/views/mod.rs

@@ -0,0 +1,5 @@
+mod home;
+pub use home::Home;
+
+mod blog;
+pub use blog::Blog;

server/Cargo.toml

@@ -0,0 +1,7 @@
+[package]
+name = "server"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { workspace = true, features = ["fullstack"] }

server/src/lib.rs

@@ -0,0 +1,8 @@
+//! This crate contains all shared fullstack server functions.
+use dioxus::prelude::*;
+
+/// Echo the user input on the server.
+#[server(Echo)]
+pub async fn echo(input: String) -> Result<String, ServerFnError> {
+    Ok(input)
+}

ui/Cargo.toml

@@ -0,0 +1,8 @@
+[package]
+name = "ui"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { workspace = true }
+server = { workspace = true }

ui/assets/styling/echo.css

@@ -0,0 +1,34 @@
+#echo {
+  width: 360px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 50px;
+  background-color: #1e222d;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+#echo>h4 {
+  margin: 0px 0px 15px 0px;
+}
+
+
+#echo>input {
+  border: none;
+  border-bottom: 1px white solid;
+  background-color: transparent;
+  color: #ffffff;
+  transition: border-bottom-color 0.2s ease;
+  outline: none;
+  display: block;
+  padding: 0px 0px 5px 0px;
+  width: 100%;
+}
+
+#echo>input:focus {
+  border-bottom-color: #6d85c6;
+}
+
+#echo>p {
+  margin: 20px 0px 0px auto;
+}

ui/assets/styling/hero.css

@@ -0,0 +1,35 @@
+#hero {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#links {
+  width: 400px;
+  text-align: left;
+  font-size: x-large;
+  color: white;
+  display: flex;
+  flex-direction: column;
+}
+
+#links a {
+  color: white;
+  text-decoration: none;
+  margin-top: 20px;
+  margin: 10px 0px;
+  border: white 1px solid;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+#links a:hover {
+  background-color: #1f1f1f;
+  cursor: pointer;
+}
+
+#header {
+  max-width: 1200px;
+}

ui/assets/styling/navbar.css

@@ -0,0 +1,16 @@
+#navbar {
+  display: flex;
+  flex-direction: row;
+}
+
+#navbar a {
+  color: #ffffff;
+  margin-right: 20px;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+#navbar a:hover {
+  cursor: pointer;
+  color: #91a4d2;
+}

ui/src/echo.rs

@@ -0,0 +1,31 @@
+use dioxus::prelude::*;
+
+const ECHO_CSS: Asset = asset!("/assets/styling/echo.css");
+
+/// Echo component that demonstrates fullstack server functions.
+#[component]
+pub fn Echo() -> Element {
+    let mut response = use_signal(|| String::new());
+
+    rsx! {
+        document::Link { rel: "stylesheet", href: ECHO_CSS }
+        div {
+            id: "echo",
+            h4 { "ServerFn Echo" }
+            input {
+                placeholder: "Type here to echo...",
+                oninput:  move |event| async move {
+                    let data = server::echo(event.value()).await.unwrap();
+                    response.set(data);
+                },
+            }
+
+            if !response().is_empty() {
+                p { 
+                    "Server echoed: " 
+                    i { "{response}" }
+                }
+            }
+        }
+    }
+}

ui/src/hero.rs

@@ -0,0 +1,24 @@
+use dioxus::prelude::*;
+
+const HERO_CSS: Asset = asset!("/assets/styling/hero.css");
+const HEADER_SVG: Asset = asset!("/assets/header.svg");
+
+#[component]
+pub fn Hero() -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: HERO_CSS }
+
+        div {
+            id: "hero",
+            img { src: HEADER_SVG, id: "header" }
+            div { id: "links",
+                a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" }
+                a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
+                a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
+                a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
+                a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
+                a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
+            }
+        }
+    }
+}

ui/src/lib.rs

@@ -0,0 +1,10 @@
+//! This crate contains all shared UI for the workspace.
+
+mod hero;
+pub use hero::Hero;
+
+mod navbar;
+pub use navbar::Navbar;
+
+mod echo;
+pub use echo::Echo;

ui/src/navbar.rs

@@ -0,0 +1,15 @@
+use dioxus::prelude::*;
+
+const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
+
+#[component]
+pub fn Navbar(children: Element) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: NAVBAR_CSS }
+
+        div {
+            id: "navbar",
+            {children}
+        }
+    }
+}

web/Cargo.toml

@@ -0,0 +1,13 @@
+[package]
+name = "web"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { workspace = true, features = ["router"] }
+ui = { workspace = true }
+
+[features]
+default = []
+web = ["dioxus/web"]
+server = ["dioxus/server"]

web/assets/blog.css

@@ -0,0 +1,8 @@
+#blog {
+  margin-top: 50px;
+}
+
+#blog a {
+  color: #ffffff;
+  margin-top: 50px;
+}

web/assets/main.css

@@ -0,0 +1,6 @@
+body {
+    background-color: #0f1116;
+    color: #ffffff;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 20px;
+}

web/src/main.rs

@@ -0,0 +1,58 @@
+use dioxus::prelude::*;
+
+use ui::Navbar;
+use views::{Blog, Home};
+
+
+mod views;
+
+#[derive(Debug, Clone, Routable, PartialEq)]
+#[rustfmt::skip]
+enum Route {
+    #[layout(WebNavbar)]
+    #[route("/")]
+    Home {},
+    #[route("/blog/:id")]
+    Blog { id: i32 },
+}
+
+
+const FAVICON: Asset = asset!("/assets/favicon.ico");
+const MAIN_CSS: Asset = asset!("/assets/main.css");
+
+fn main() {
+    dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+    // Build cool things ✌️
+
+    rsx! {
+        // Global app resources
+        document::Link { rel: "icon", href: FAVICON }
+        document::Link { rel: "stylesheet", href: MAIN_CSS }
+
+        Router::<Route> {}
+    }
+}
+
+/// A web-specific Router around the shared `Navbar` component
+/// which allows us to use the web-specific `Route` enum.
+#[component]
+fn WebNavbar() -> Element {
+    rsx! {
+        Navbar {
+            Link {
+                to: Route::Home {},
+                "Home"
+            }
+            Link {
+                to: Route::Blog { id: 1 },
+                "Blog"
+            }
+        }
+
+        Outlet::<Route> {}
+    }
+}

web/src/views/blog.rs

@@ -0,0 +1,30 @@
+use crate::Route;
+use dioxus::prelude::*;
+
+const BLOG_CSS: Asset = asset!("/assets/blog.css");
+
+#[component]
+pub fn Blog(id: i32) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: BLOG_CSS}
+
+        div {
+            id: "blog",
+
+            // Content
+            h1 { "This is blog #{id}!" }
+            p { "In blog #{id}, we show how the Dioxus router works and how URL parameters can be passed as props to our route components." }
+
+            // Navigation links
+            Link {
+                to: Route::Blog { id: id - 1 },
+                "Previous"
+            }
+            span { " <---> " }
+            Link {
+                to: Route::Blog { id: id + 1 },
+                "Next"
+            }
+        }
+    }
+}

web/src/views/home.rs

@@ -0,0 +1,10 @@
+use dioxus::prelude::*;
+use ui::{Hero, Echo};
+
+#[component]
+pub fn Home() -> Element {
+    rsx! {
+        Hero {}
+        Echo {}
+    }
+}

web/src/views/mod.rs

@@ -0,0 +1,5 @@
+mod home;
+pub use home::Home;
+
+mod blog;
+pub use blog::Blog;