feat: added AGENTS.md

feat: added cargo and clippy
feat: added gitignore
2026-02-15 23:38:13 +01:00 · 2026-02-15 23:37:58 +01:00 · 2026-02-15 23:37:42 +01:00 · 2026-02-15 23:37:25 +01:00
22 changed files with 4807 additions and 0 deletions
--- a/.gitignore
+++ b/.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
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,265 @@
+You are an expert [0.7 Dioxus](https://dioxuslabs.com/learn/0.7) assistant. Dioxus 0.7 changes every api in dioxus. Only use this up to date documentation. `cx`, `Scope`, and `use_state` are gone
+
+Provide concise code examples with detailed descriptions
+
+# Dioxus Dependency
+
+You can add Dioxus to your `Cargo.toml` like this:
+
+```toml
+[dependencies]
+dioxus = { version = "0.7.1" }
+
+[features]
+default = ["web", "webview", "server"]
+web = ["dioxus/web"]
+webview = ["dioxus/desktop"]
+server = ["dioxus/server"]
+```
+
+# Launching your application
+
+You need to create a main function that sets up the Dioxus runtime and mounts your root component.
+
+```rust
+use dioxus::prelude::*;
+
+fn main() {
+	dioxus::launch(App);
+}
+
+#[component]
+fn App() -> Element {
+	rsx! { "Hello, Dioxus!" }
+}
+```
+
+Then serve with `dx serve`:
+
+```sh
+curl -sSL http://dioxus.dev/install.sh | sh
+dx serve
+```
+
+# UI with RSX
+
+```rust
+rsx! {
+	div {
+		class: "container", // Attribute
+		color: "red", // Inline styles
+		width: if condition { "100%" }, // Conditional attributes
+		"Hello, Dioxus!"
+	}
+	// Prefer loops over iterators
+	for i in 0..5 {
+		div { "{i}" } // use elements or components directly in loops
+	}
+	if condition {
+		div { "Condition is true!" } // use elements or components directly in conditionals
+	}
+
+	{children} // Expressions are wrapped in brace
+	{(0..5).map(|i| rsx! { span { "Item {i}" } })} // Iterators must be wrapped in braces
+}
+```
+
+# Assets
+
+The asset macro can be used to link to local files to use in your project. All links start with `/` and are relative to the root of your project.
+
+```rust
+rsx! {
+	img {
+		src: asset!("/assets/image.png"),
+		alt: "An image",
+	}
+}
+```
+
+## Styles
+
+The `document::Stylesheet` component will inject the stylesheet into the `<head>` of the document
+
+```rust
+rsx! {
+	document::Stylesheet {
+		href: asset!("/assets/styles.css"),
+	}
+}
+```
+
+# Components
+
+Components are the building blocks of apps
+
+* Component are functions annotated with the `#[component]` macro.
+* The function name must start with a capital letter or contain an underscore.
+* A component re-renders only under two conditions:
+	1.  Its props change (as determined by `PartialEq`).
+	2.  An internal reactive state it depends on is updated.
+
+```rust
+#[component]
+fn Input(mut value: Signal<String>) -> Element {
+	rsx! {
+		input {
+            value,
+			oninput: move |e| {
+				*value.write() = e.value();
+			},
+			onkeydown: move |e| {
+				if e.key() == Key::Enter {
+					value.write().clear();
+				}
+			},
+		}
+	}
+}
+```
+
+Each component accepts function arguments (props)
+
+* Props must be owned values, not references. Use `String` and `Vec<T>` instead of `&str` or `&[T]`.
+* Props must implement `PartialEq` and `Clone`.
+* To make props reactive and copy, you can wrap the type in `ReadOnlySignal`. Any reactive state like memos and resources that read `ReadOnlySignal` props will automatically re-run when the prop changes.
+
+# State
+
+A signal is a wrapper around a value that automatically tracks where it's read and written. Changing a signal's value causes code that relies on the signal to rerun.
+
+## Local State
+
+The `use_signal` hook creates state that is local to a single component. You can call the signal like a function (e.g. `my_signal()`) to clone the value, or use `.read()` to get a reference. `.write()` gets a mutable reference to the value.
+
+Use `use_memo` to create a memoized value that recalculates when its dependencies change. Memos are useful for expensive calculations that you don't want to repeat unnecessarily.
+
+```rust
+#[component]
+fn Counter() -> Element {
+	let mut count = use_signal(|| 0);
+	let mut doubled = use_memo(move || count() * 2); // doubled will re-run when count changes because it reads the signal
+
+	rsx! {
+		h1 { "Count: {count}" } // Counter will re-render when count changes because it reads the signal
+		h2 { "Doubled: {doubled}" }
+		button {
+			onclick: move |_| *count.write() += 1, // Writing to the signal rerenders Counter
+			"Increment"
+		}
+		button {
+			onclick: move |_| count.with_mut(|count| *count += 1), // use with_mut to mutate the signal
+			"Increment with with_mut"
+		}
+	}
+}
+```
+
+## Context API
+
+The Context API allows you to share state down the component tree. A parent provides the state using `use_context_provider`, and any child can access it with `use_context`
+
+```rust
+#[component]
+fn App() -> Element {
+	let mut theme = use_signal(|| "light".to_string());
+	use_context_provider(|| theme); // Provide a type to children
+	rsx! { Child {} }
+}
+
+#[component]
+fn Child() -> Element {
+	let theme = use_context::<Signal<String>>(); // Consume the same type
+	rsx! {
+		div {
+			"Current theme: {theme}"
+		}
+	}
+}
+```
+
+# Async
+
+For state that depends on an asynchronous operation (like a network request), Dioxus provides a hook called `use_resource`. This hook manages the lifecycle of the async task and provides the result to your component.
+
+* The `use_resource` hook takes an `async` closure. It re-runs this closure whenever any signals it depends on (reads) are updated
+* The `Resource` object returned can be in several states when read:
+1. `None` if the resource is still loading
+2. `Some(value)` if the resource has successfully loaded
+
+```rust
+let mut dog = use_resource(move || async move {
+	// api request
+});
+
+match dog() {
+	Some(dog_info) => rsx! { Dog { dog_info } },
+	None => rsx! { "Loading..." },
+}
+```
+
+# Routing
+
+All possible routes are defined in a single Rust `enum` that derives `Routable`. Each variant represents a route and is annotated with `#[route("/path")]`. Dynamic Segments can capture parts of the URL path as parameters by using `:name` in the route string. These become fields in the enum variant.
+
+The `Router<Route> {}` component is the entry point that manages rendering the correct component for the current URL.
+
+You can use the `#[layout(NavBar)]` to create a layout shared between pages and place an `Outlet<Route> {}` inside your layout component. The child routes will be rendered in the outlet.
+
+```rust
+#[derive(Routable, Clone, PartialEq)]
+enum Route {
+	#[layout(NavBar)] // This will use NavBar as the layout for all routes
+		#[route("/")]
+		Home {},
+		#[route("/blog/:id")] // Dynamic segment
+		BlogPost { id: i32 },
+}
+
+#[component]
+fn NavBar() -> Element {
+	rsx! {
+		a { href: "/", "Home" }
+		Outlet<Route> {} // Renders Home or BlogPost
+	}
+}
+
+#[component]
+fn App() -> Element {
+	rsx! { Router::<Route> {} }
+}
+```
+
+```toml
+dioxus = { version = "0.7.1", features = ["router"] }
+```
+
+# Fullstack
+
+Fullstack enables server rendering and ipc calls. It uses Cargo features (`server` and a client feature like `web`) to split the code into a server and client binaries.
+
+```toml
+dioxus = { version = "0.7.1", features = ["fullstack"] }
+```
+
+## Server Functions
+
+Use the `#[post]` / `#[get]` macros to define an `async` function that will only run on the server. On the server, this macro generates an API endpoint. On the client, it generates a function that makes an HTTP request to that endpoint.
+
+```rust
+#[post("/api/double/:path/&query")]
+async fn double_server(number: i32, path: String, query: i32) -> Result<i32, ServerFnError> {
+	tokio::time::sleep(std::time::Duration::from_secs(1)).await;
+	Ok(number * 2)
+}
+```
+
+## Hydration
+
+Hydration is the process of making a server-rendered HTML page interactive on the client. The server sends the initial HTML, and then the client-side runs, attaches event listeners, and takes control of future rendering.
+
+### Errors
+The initial UI rendered by the component on the client must be identical to the UI rendered on the server.
+
+* Use the `use_server_future` hook instead of `use_resource`. It runs the future on the server, serializes the result, and sends it to the client, ensuring the client has the data immediately for its first render.
+* Any code that relies on browser-specific APIs (like accessing `localStorage`) must be run *after* hydration. Place this code inside a `use_effect` hook.
--- a/Cargo.lock
+++ b/Cargo.lock
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -0,0 +1,9 @@
+[workspace]
+resolver = "2"
+members = ["packages/web", "packages/api"]
+
+[workspace.dependencies]
+dioxus = { version = "0.7.1" }
+
+# workspace
+api = { path = "packages/api" }
--- a/clippy.toml
+++ b/clippy.toml
@@ -0,0 +1,8 @@
+await-holding-invalid-types = [
+  "generational_box::GenerationalRef",
+  { path = "generational_box::GenerationalRef", reason = "Reads should not be held over an await point. This will cause any writes to fail while the await is pending since the read borrow is still active." },
+  "generational_box::GenerationalRefMut",
+  { path = "generational_box::GenerationalRefMut", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
+  "dioxus_signals::WriteLock",
+  { path = "dioxus_signals::WriteLock", reason = "Write should not be held over an await point. This will cause any reads or writes to fail while the await is pending since the write borrow is still active." },
+]
--- a/packages/api/Cargo.toml
+++ b/packages/api/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "api"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { workspace = true, features = ["fullstack"] }
+
+[features]
+server = ["dioxus/server"]
--- a/packages/api/README.md
+++ b/packages/api/README.md
@@ -0,0 +1,13 @@
+# API
+
+This crate contains all shared fullstack server functions. This is a great place to place any server-only logic you would like to expose in multiple platforms like a method that accesses your database or a method that sends an email.
+
+This crate will be built twice:
+1. Once for the server build with the `dioxus/server` feature enabled
+2. Once for the client build with the client feature disabled
+
+During the server build, the server functions will be collected and hosted on a public API for the client to call. During the client build, the server functions will be compiled into the client build.
+
+## Dependencies
+
+Most server dependencies (like sqlx and tokio) will not compile on client platforms like WASM. To avoid building server dependencies on the client, you should add platform specific dependencies under the `server` feature in the [Cargo.toml](../Cargo.toml) file. More details about managing server only dependencies can be found in the [Dioxus guide](https://dioxuslabs.com/learn/0.7/guides/fullstack/managing_dependencies#adding-server-only-dependencies).
--- a/packages/api/src/lib.rs
+++ b/packages/api/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.
+#[post("/api/echo")]
+pub async fn echo(input: String) -> Result<String, ServerFnError> {
+    Ok(input)
+}
--- a/packages/web/Cargo.toml
+++ b/packages/web/Cargo.toml
@@ -0,0 +1,13 @@
+[package]
+name = "web"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+dioxus = { workspace = true, features = ["router", "fullstack"] }
+dioxus-primitives = { git = "https://github.com/DioxusLabs/components", version = "0.0.1", default-features = false }
+
+[features]
+default = []
+web = ["dioxus/web"]
+server = ["dioxus/server"]
--- a/packages/web/README.md
+++ b/packages/web/README.md
@@ -0,0 +1,30 @@
+# 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.It also defines the routes for the web platform
+│  ├─ views/ # The views each route will render in the web version of the app
+│  │  ├─ mod.rs # Defines the module for the views route and re-exports the components for each route
+│  │  ├─ blog.rs # The component that will render at the /blog/:id route
+│  │  ├─ home.rs # The component that will render at the / route
+├─ 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
+```
--- a/packages/web/assets/blog.css
+++ b/packages/web/assets/blog.css
@@ -0,0 +1,8 @@
+#blog {
+  margin-top: 50px;
+}
+
+#blog a {
+  color: #ffffff;
+  margin-top: 50px;
+}
--- a/packages/web/assets/dx-components-theme.css
+++ b/packages/web/assets/dx-components-theme.css
@@ -0,0 +1,87 @@
+/* This file contains the global styles for the styled dioxus components. You only
+ * need to import this file once in your project root.
+ */
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
+body {
+  color: var(--secondary-color-4);
+  font-family: Inter, sans-serif;
+  font-optical-sizing: auto;
+  font-style: normal;
+  font-weight: 400;
+}
+
+html[data-theme="dark"] {
+  --dark: initial;
+  --light: ;
+}
+
+html[data-theme="light"] {
+  --dark: ;
+  --light: initial;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dark: initial;
+    --light: ;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --dark: ;
+    --light: initial;
+  }
+}
+
+:root {
+  /* Primary colors */
+  --primary-color: var(--dark, #000) var(--light, #fff);
+  --primary-color-1: var(--dark, #0e0e0e) var(--light, #fbfbfb);
+  --primary-color-2: var(--dark, #0a0a0a) var(--light, #fff);
+  --primary-color-3: var(--dark, #141313) var(--light, #f8f8f8);
+  --primary-color-4: var(--dark, #1a1a1a) var(--light, #f8f8f8);
+  --primary-color-5: var(--dark, #262626) var(--light, #f5f5f5);
+  --primary-color-6: var(--dark, #232323) var(--light, #e5e5e5);
+  --primary-color-7: var(--dark, #3e3e3e) var(--light, #b0b0b0);
+
+  /* Secondary colors */
+  --secondary-color: var(--dark, #fff) var(--light, #000);
+  --secondary-color-1: var(--dark, #fafafa) var(--light, #000);
+  --secondary-color-2: var(--dark, #e6e6e6) var(--light, #0d0d0d);
+  --secondary-color-3: var(--dark, #dcdcdc) var(--light, #2b2b2b);
+  --secondary-color-4: var(--dark, #d4d4d4) var(--light, #111);
+  --secondary-color-5: var(--dark, #a1a1a1) var(--light, #848484);
+  --secondary-color-6: var(--dark, #5d5d5d) var(--light, #d0d0d0);
+
+  /* Highlight colors */
+  --focused-border-color: var(--dark, #2b7fff) var(--light, #2b7fff);
+  --primary-success-color: var(--dark, #02271c) var(--light, #ecfdf5);
+  --secondary-success-color: var(--dark, #b6fae3) var(--light, #10b981);
+  --primary-warning-color: var(--dark, #342203) var(--light, #fffbeb);
+  --secondary-warning-color: var(--dark, #feeac7) var(--light, #f59e0b);
+  --primary-error-color: var(--dark, #a22e2e) var(--light, #dc2626);
+  --secondary-error-color: var(--dark, #9b1c1c) var(--light, #ef4444);
+  --contrast-error-color: var(--dark, var(--secondary-color-3)) var(--light, var(--primary-color));
+  --primary-info-color: var(--dark, var(--primary-color-5)) var(--light, var(--primary-color));
+  --secondary-info-color: var(--dark, var(--primary-color-7)) var(--light, var(--secondary-color-3));
+}
+
+/* Modern browsers with `scrollbar-*` support */
+@supports (scrollbar-width: auto) {
+  :not(:hover) {
+    scrollbar-color: rgb(0 0 0 / 0%) rgb(0 0 0 / 0%);
+  }
+
+  :hover {
+    scrollbar-color: var(--secondary-color-2) rgb(0 0 0 / 0%);
+  }
+}
+
+/* Legacy browsers with `::-webkit-scrollbar-*` support */
+@supports selector(::-webkit-scrollbar) {
+  :root::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
--- a/packages/web/assets/favicon.ico
+++ b/packages/web/assets/favicon.ico
--- a/packages/web/assets/main.css
+++ b/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;
+}
--- a/packages/web/src/components/mod.rs
+++ b/packages/web/src/components/mod.rs
@@ -0,0 +1,2 @@
+// AUTOGENERATED Components module
+pub mod toast;
--- a/packages/web/src/components/toast/component.rs
+++ b/packages/web/src/components/toast/component.rs
@@ -0,0 +1,15 @@
+use dioxus::prelude::*;
+use dioxus_primitives::toast::{self, ToastProviderProps};
+
+#[component]
+pub fn ToastProvider(props: ToastProviderProps) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: asset!("./style.css") }
+        toast::ToastProvider {
+            default_duration: props.default_duration,
+            max_toasts: props.max_toasts,
+            render_toast: props.render_toast,
+            {props.children}
+        }
+    }
+}
--- a/packages/web/src/components/toast/mod.rs
+++ b/packages/web/src/components/toast/mod.rs
@@ -0,0 +1,2 @@
+mod component;
+pub use component::*;
--- a/packages/web/src/components/toast/style.css
+++ b/packages/web/src/components/toast/style.css
@@ -0,0 +1,185 @@
+.toast-container {
+  position: fixed;
+  z-index: 9999;
+  right: 20px;
+  bottom: 20px;
+  max-width: 350px;
+}
+
+.toast-list {
+  display: flex;
+  flex-direction: column-reverse;
+  padding: 0;
+  margin: 0;
+  gap: 0.75rem;
+}
+
+.toast-item {
+  display: flex;
+}
+
+.toast {
+  z-index: calc(var(--toast-count) - var(--toast-index));
+  display: flex;
+  overflow: hidden;
+  width: 18rem;
+  height: 4rem;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border: 1px solid var(--light, var(--primary-color-6))
+    var(--dark, var(--primary-color-7));
+  border-radius: 0.5rem;
+  margin-top: -4rem;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  filter: var(--light, none)
+    var(
+      --dark,
+      brightness(calc(0.5 + 0.5 * (1 - ((var(--toast-index) + 1) / 4))))
+    );
+  opacity: calc(1 - var(--toast-hidden));
+  transform: scale(
+    calc(100% - var(--toast-index) * 5%),
+    calc(100% - var(--toast-index) * 2%)
+  );
+  transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
+
+  --toast-hidden: calc(min(max(0, var(--toast-index) - 2), 1));
+}
+
+.toast-container:not(:hover, :focus-within)
+  .toast[data-toast-even]:not([data-top]) {
+  animation: slide-up-even 0.2s ease-out;
+}
+
+.toast-container:not(:hover, :focus-within)
+  .toast[data-toast-odd]:not([data-top]) {
+  animation: slide-up-odd 0.2s ease-out;
+}
+
+@keyframes slide-up-even {
+  from {
+    transform: translateY(0.5rem)
+      scale(
+        calc(100% - var(--toast-index) * 5%),
+        calc(100% - var(--toast-index) * 2%)
+      );
+  }
+
+  to {
+    transform: translateY(0)
+      scale(
+        calc(100% - var(--toast-index) * 5%),
+        calc(100% - var(--toast-index) * 2%)
+      );
+  }
+}
+
+@keyframes slide-up-odd {
+  from {
+    transform: translateY(0.5rem)
+      scale(
+        calc(100% - var(--toast-index) * 5%),
+        calc(100% - var(--toast-index) * 2%)
+      );
+  }
+
+  to {
+    transform: translateY(0)
+      scale(
+        calc(100% - var(--toast-index) * 5%),
+        calc(100% - var(--toast-index) * 2%)
+      );
+  }
+}
+
+.toast[data-top] {
+  animation: slide-in 0.2s ease-out;
+}
+
+.toast-container:hover .toast[data-top],
+.toast-container:focus-within .toast[data-top] {
+  animation: slide-in 0 ease-out;
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(100%)
+      scale(
+        calc(110% - var(--toast-index) * 5%),
+        calc(110% - var(--toast-index) * 2%)
+      );
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0)
+      scale(
+        calc(100% - var(--toast-index) * 5%),
+        calc(100% - var(--toast-index) * 2%)
+      );
+  }
+}
+
+.toast-container:hover .toast,
+.toast-container:focus-within .toast {
+  margin-top: var(--toast-padding);
+  filter: brightness(1);
+  opacity: 1;
+  transform: scale(calc(100%));
+}
+
+.toast[data-type="success"] {
+  background-color: var(--primary-success-color);
+  color: var(--secondary-success-color);
+}
+
+.toast[data-type="error"] {
+  background-color: var(--primary-error-color);
+  color: var(--contrast-error-color);
+}
+
+.toast[data-type="warning"] {
+  background-color: var(--primary-warning-color);
+  color: var(--secondary-warning-color);
+}
+
+.toast[data-type="info"] {
+  background-color: var(--primary-info-color);
+  color: var(--secondary-info-color);
+}
+
+.toast-content {
+  flex: 1;
+  margin-right: 8px;
+  transition: filter 0.2s ease;
+}
+
+.toast-title {
+  margin-bottom: 4px;
+  color: var(--secondary-color-4);
+  font-weight: 600;
+}
+
+.toast-description {
+  color: var(--secondary-color-3);
+  font-size: 0.875rem;
+}
+
+.toast-close {
+  align-self: flex-start;
+  padding: 0;
+  border: none;
+  margin: 0;
+  background: none;
+  color: var(--secondary-color-3);
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+}
+
+.toast-close:hover {
+  color: var(--secondary-color-1);
+}
--- a/packages/web/src/main.rs
+++ b/packages/web/src/main.rs
@@ -0,0 +1,45 @@
+use dioxus::prelude::*;
+
+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! {
+
+        Outlet::<Route> {}
+    }
+}
--- a/packages/web/src/views/blog.rs
+++ b/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"
+            }
+        }
+    }
+}
--- a/packages/web/src/views/home.rs
+++ b/packages/web/src/views/home.rs
@@ -0,0 +1,6 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn Home() -> Element {
+    rsx! {}
+}
--- a/packages/web/src/views/mod.rs
+++ b/packages/web/src/views/mod.rs
@@ -0,0 +1,5 @@
+mod home;
+pub use home::Home;
+
+mod blog;
+pub use blog::Blog;
Author	SHA1	Message	Date
Sharang Parnerkar	f102d96c09	feat: added AGENTS.md	2026-02-15 23:38:13 +01:00
Sharang Parnerkar	c44177cbc2	feat: added cargo and clippy	2026-02-15 23:37:58 +01:00
Sharang Parnerkar	73ad7bd16d	feat: added gitignore	2026-02-15 23:37:42 +01:00
Sharang Parnerkar	421f99537e	feat: added server and web base code	2026-02-15 23:37:25 +01:00