Initial Commit

packages/web/Cargo.toml

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

packages/web/README.md

@@ -0,0 +1,26 @@
+# Development
+
+The web crate defines the entrypoint for the web app along with any assets, components and dependencies that are specific to web builds. The web crate starts out something like this:
+
+```
+web/
+├─ assets/ # Assets used by the web app - Any platform specific assets should go in this folder
+├─ src/
+│  ├─ main.rs # The entrypoint for the web app.
+├─ Cargo.toml # The web crate's Cargo.toml - This should include all web specific dependencies
+```
+
+## Dependencies
+Since you have fullstack enabled, the web crate will be built two times:
+1. Once for the server build with the `server` feature enabled
+2. Once for the client build with the `web` feature enabled
+
+You should make all web specific dependencies optional and only enabled in the `web` feature. This will ensure that the server builds don't pull in web specific dependencies which cuts down on build times significantly.
+
+### Serving Your Web App
+
+You can start your web app with the following command:
+
+```bash
+dx serve
+```

packages/web/assets/blog.css

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

packages/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;
+}

packages/web/src/main.rs

@@ -0,0 +1,24 @@
+use dioxus::prelude::*;
+
+use ui::{Echo, Hero};
+
+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 }
+
+        Hero {}
+        Echo {}
+    }
+}

packages/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"
+            }
+        }
+    }
+}

packages/web/src/views/home.rs

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

packages/web/src/views/mod.rs

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