[refactor] Remove UI components and associated assets
This commit is contained in:
705
Cargo.lock
generated
705
Cargo.lock
generated
File diff suppressed because it is too large
Load Diff
40
Cargo.toml
40
Cargo.toml
@@ -1,16 +1,28 @@
|
||||
[workspace]
|
||||
resolver = "2"
|
||||
members = [
|
||||
"ui",
|
||||
"web",
|
||||
"desktop",
|
||||
"mobile",
|
||||
"api",
|
||||
]
|
||||
[package]
|
||||
name = "tester"
|
||||
version = "0.1.0"
|
||||
authors = ["vikingowl <christian@nachtigall.dev>"]
|
||||
edition = "2021"
|
||||
|
||||
[workspace.dependencies]
|
||||
dioxus = { version = "0.6.0" }
|
||||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
# workspace
|
||||
ui = { path = "ui" }
|
||||
api = { path = "api" }
|
||||
[dependencies]
|
||||
dioxus = { version = "0.6.0", features = ["router", "fullstack"] }
|
||||
|
||||
[features]
|
||||
default = ["web"]
|
||||
web = ["dioxus/web"]
|
||||
desktop = ["dioxus/desktop"]
|
||||
mobile = ["dioxus/mobile"]
|
||||
|
||||
[profile]
|
||||
|
||||
[profile.wasm-dev]
|
||||
inherits = "dev"
|
||||
opt-level = 1
|
||||
|
||||
[profile.server-dev]
|
||||
inherits = "dev"
|
||||
|
||||
[profile.android-dev]
|
||||
inherits = "dev"
|
||||
|
||||
21
Dioxus.toml
Normal file
21
Dioxus.toml
Normal file
@@ -0,0 +1,21 @@
|
||||
[application]
|
||||
|
||||
[web.app]
|
||||
|
||||
# HTML title tag content
|
||||
title = "tester"
|
||||
|
||||
# include `assets` in web platform
|
||||
[web.resource]
|
||||
|
||||
# Additional CSS style files
|
||||
style = []
|
||||
|
||||
# Additional JavaScript files
|
||||
script = []
|
||||
|
||||
[web.resource.dev]
|
||||
|
||||
# Javascript code file
|
||||
# serve: [dev-server] only
|
||||
script = []
|
||||
74
README.md
74
README.md
@@ -1,72 +1,34 @@
|
||||
# Development
|
||||
|
||||
Your new workspace contains a member crate for each of the web, desktop and mobile platforms, a `ui` crate for shared components and a `api` crate for shared backend logic:
|
||||
Your new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.
|
||||
|
||||
```
|
||||
your_project/
|
||||
├─ web/
|
||||
│ ├─ ... # Web specific UI/logic
|
||||
├─ desktop/
|
||||
│ ├─ ... # Desktop specific UI/logic
|
||||
├─ mobile/
|
||||
│ ├─ ... # Mobile specific UI/logic
|
||||
├─ api/
|
||||
│ ├─ ... # All shared server logic
|
||||
├─ ui/
|
||||
│ ├─ ... # Component shared between multiple platforms
|
||||
```
|
||||
|
||||
## Platform crates
|
||||
|
||||
Each platform crate contains the entry point for the platform, and any assets, components and dependencies that are specific to that platform. For example, the desktop crate in the workspace looks something like this:
|
||||
|
||||
```
|
||||
desktop/ # The desktop crate contains all platform specific UI, logic and dependencies for the desktop app
|
||||
├─ assets/ # Assets used by the desktop app - Any platform specific assets should go in this folder
|
||||
project/
|
||||
├─ assets/ # Any assets that are used by the app should be placed here
|
||||
├─ src/
|
||||
│ ├─ main.rs # The entrypoint for the desktop app. It also defines the routes for the desktop platform
|
||||
│ ├─ views/ # The views each route will render in the desktop 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 desktop crate's Cargo.toml - This should include all desktop specific dependencies
|
||||
│ ├─ main.rs # main.rs is the entry point to your application and currently contains all components for the app
|
||||
├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project
|
||||
```
|
||||
|
||||
When you start developing with the workspace setup each of the platform crates will look almost identical. The UI starts out exactly the same on all platforms. However, as you continue developing your application, this setup makes it easy to let the views for each platform change independently.
|
||||
### Tailwind
|
||||
1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
|
||||
2. Install the Tailwind CSS CLI: https://tailwindcss.com/docs/installation
|
||||
3. Run the following command in the root of the project to start the Tailwind CSS compiler:
|
||||
|
||||
## Shared UI crate
|
||||
|
||||
The workspace contains a `ui` crate with components that are shared between multiple platforms. You should put any UI elements you want to use in multiple platforms in this crate. You can also put some shared client side logic in this crate, but be careful to not pull in platform specific dependencies. The `ui` crate starts out something like this:
|
||||
|
||||
```
|
||||
ui/
|
||||
├─ src/
|
||||
│ ├─ lib.rs # The entrypoint for the ui crate
|
||||
│ ├─ hero.rs # The Hero component that will be used in every platform
|
||||
│ ├─ echo.rs # The shared echo component that communicates with the server
|
||||
│ ├─ navbar.rs # The Navbar component that will be used in the layout of every platform's router
|
||||
```
|
||||
|
||||
## Shared backend logic
|
||||
|
||||
The workspace contains a `api` crate with shared backend logic. This crate defines all of the shared server functions for all platforms. Server functions are async functions that expose a public API on the server. They can be called like a normal async function from the client. When you run `dx serve`, all of the server functions will be collected in the server build and hosted on a public API for the client to call. The `api` crate starts out something like this:
|
||||
|
||||
```
|
||||
api/
|
||||
├─ src/
|
||||
│ ├─ lib.rs # Exports a server function that echos the input string
|
||||
```bash
|
||||
npx tailwindcss -i ./tailwind.css -o ./assets/tailwind.css --watch
|
||||
```
|
||||
|
||||
### Serving Your App
|
||||
|
||||
Navigate to the platform crate of your choice:
|
||||
```bash
|
||||
cd web
|
||||
```
|
||||
|
||||
and serve:
|
||||
Run the following command in the root of your project to start developing with the default platform:
|
||||
|
||||
```bash
|
||||
dx serve
|
||||
dx serve --platform web
|
||||
```
|
||||
|
||||
To run for a different platform, use the `--platform platform` flag. E.g.
|
||||
```bash
|
||||
dx serve --platform desktop
|
||||
```
|
||||
|
||||
|
||||
@@ -1,7 +0,0 @@
|
||||
[package]
|
||||
name = "api"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
dioxus = { workspace = true, features = ["fullstack"] }
|
||||
@@ -1,13 +0,0 @@
|
||||
# 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.6/guides/fullstack/managing_dependencies#adding-server-only-dependencies).
|
||||
@@ -1,8 +0,0 @@
|
||||
//! 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)
|
||||
}
|
||||
|
Before Width: | Height: | Size: 130 KiB After Width: | Height: | Size: 130 KiB |
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
107
assets/main.css
Normal file
107
assets/main.css
Normal file
@@ -0,0 +1,107 @@
|
||||
/* App-wide styling */
|
||||
body {
|
||||
background-color: #0f1116;
|
||||
color: #ffffff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
#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;
|
||||
}
|
||||
|
||||
/* Blog page */
|
||||
#blog {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
color: #ffffff;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
/* Echo */
|
||||
#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;
|
||||
}
|
||||
0
assets/tailwind.css
Normal file
0
assets/tailwind.css
Normal file
@@ -1,13 +0,0 @@
|
||||
[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"]
|
||||
@@ -1,30 +0,0 @@
|
||||
# Development
|
||||
|
||||
The desktop crate defines the entrypoint for the desktop app along with any assets, components and dependencies that are specific to desktop builds. The desktop crate starts out something like this:
|
||||
|
||||
```
|
||||
desktop/
|
||||
├─ assets/ # Assets used by the desktop app - Any platform specific assets should go in this folder
|
||||
├─ src/
|
||||
│ ├─ main.rs # The entrypoint for the desktop app.It also defines the routes for the desktop platform
|
||||
│ ├─ views/ # The views each route will render in the desktop 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 desktop crate's Cargo.toml - This should include all desktop specific dependencies
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
Since you have fullstack enabled, the desktop 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 `desktop` feature enabled
|
||||
|
||||
You should make all desktop specific dependencies optional and only enabled in the `desktop` feature. This will ensure that the server builds don't pull in desktop specific dependencies which cuts down on build times significantly.
|
||||
|
||||
### Serving Your Desktop App
|
||||
|
||||
You can start your desktop app with the following command:
|
||||
|
||||
```bash
|
||||
dx serve
|
||||
```
|
||||
@@ -1,8 +0,0 @@
|
||||
#blog {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
color: #ffffff;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
body {
|
||||
background-color: #0f1116;
|
||||
color: #ffffff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
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> {}
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
use ui::{Echo, Hero};
|
||||
|
||||
#[component]
|
||||
pub fn Home() -> Element {
|
||||
rsx! {
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
mod home;
|
||||
pub use home::Home;
|
||||
|
||||
mod blog;
|
||||
pub use blog::Blog;
|
||||
@@ -1,13 +0,0 @@
|
||||
[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"]
|
||||
@@ -1,30 +0,0 @@
|
||||
# Development
|
||||
|
||||
The mobile crate defines the entrypoint for the mobile app along with any assets, components and dependencies that are specific to mobile builds. The mobile crate starts out something like this:
|
||||
|
||||
```
|
||||
mobile/
|
||||
├─ assets/ # Assets used by the mobile app - Any platform specific assets should go in this folder
|
||||
├─ src/
|
||||
│ ├─ main.rs # The entrypoint for the mobile app.It also defines the routes for the mobile platform
|
||||
│ ├─ views/ # The views each route will render in the mobile 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 mobile crate's Cargo.toml - This should include all mobile specific dependencies
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
Since you have fullstack enabled, the mobile 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 `mobile` feature enabled
|
||||
|
||||
You should make all mobile specific dependencies optional and only enabled in the `mobile` feature. This will ensure that the server builds don't pull in mobile specific dependencies which cuts down on build times significantly.
|
||||
|
||||
### Serving Your Mobile App
|
||||
|
||||
Mobile platforms are shared in a single crate. To serve mobile, you need to explicitly set your target device to `android` or `ios`:
|
||||
|
||||
```bash
|
||||
dx serve --platform android
|
||||
```
|
||||
@@ -1,8 +0,0 @@
|
||||
#blog {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
color: #ffffff;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
body {
|
||||
background-color: #0f1116;
|
||||
color: #ffffff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
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> {}
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
use ui::{Echo, Hero};
|
||||
|
||||
#[component]
|
||||
pub fn Home() -> Element {
|
||||
rsx! {
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
mod home;
|
||||
pub use home::Home;
|
||||
|
||||
mod blog;
|
||||
pub use blog::Blog;
|
||||
134
src/main.rs
Normal file
134
src/main.rs
Normal file
@@ -0,0 +1,134 @@
|
||||
use dioxus::prelude::*;
|
||||
|
||||
#[derive(Debug, Clone, Routable, PartialEq)]
|
||||
#[rustfmt::skip]
|
||||
enum Route {
|
||||
#[layout(Navbar)]
|
||||
#[route("/")]
|
||||
Home {},
|
||||
#[route("/blog/:id")]
|
||||
Blog { id: i32 },
|
||||
}
|
||||
|
||||
const FAVICON: Asset = asset!("/assets/favicon.ico");
|
||||
const MAIN_CSS: Asset = asset!("/assets/main.css");
|
||||
const HEADER_SVG: Asset = asset!("/assets/header.svg");
|
||||
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
|
||||
|
||||
fn main() {
|
||||
dioxus::launch(App);
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn App() -> Element {
|
||||
rsx! {
|
||||
document::Link { rel: "icon", href: FAVICON }
|
||||
document::Link { rel: "stylesheet", href: MAIN_CSS } document::Link { rel: "stylesheet", href: TAILWIND_CSS }
|
||||
Router::<Route> {}
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Hero() -> Element {
|
||||
rsx! {
|
||||
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" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Home page
|
||||
#[component]
|
||||
fn Home() -> Element {
|
||||
rsx! {
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
|
||||
/// Blog page
|
||||
#[component]
|
||||
pub fn Blog(id: i32) -> Element {
|
||||
rsx! {
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Shared navbar component.
|
||||
#[component]
|
||||
fn Navbar() -> Element {
|
||||
rsx! {
|
||||
div {
|
||||
id: "navbar",
|
||||
Link {
|
||||
to: Route::Home {},
|
||||
"Home"
|
||||
}
|
||||
Link {
|
||||
to: Route::Blog { id: 1 },
|
||||
"Blog"
|
||||
}
|
||||
}
|
||||
|
||||
Outlet::<Route> {}
|
||||
}
|
||||
}
|
||||
|
||||
/// Echo component that demonstrates fullstack server functions.
|
||||
#[component]
|
||||
fn Echo() -> Element {
|
||||
let mut response = use_signal(|| String::new());
|
||||
|
||||
rsx! {
|
||||
div {
|
||||
id: "echo",
|
||||
h4 { "ServerFn Echo" }
|
||||
input {
|
||||
placeholder: "Type here to echo...",
|
||||
oninput: move |event| async move {
|
||||
let data = echo_server(event.value()).await.unwrap();
|
||||
response.set(data);
|
||||
},
|
||||
}
|
||||
|
||||
if !response().is_empty() {
|
||||
p {
|
||||
"Server echoed: "
|
||||
i { "{response}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Echo the user input on the server.
|
||||
#[server(EchoServer)]
|
||||
async fn echo_server(input: String) -> Result<String, ServerFnError> {
|
||||
Ok(input)
|
||||
}
|
||||
9
tailwind.config.js
Normal file
9
tailwind.config.js
Normal file
@@ -0,0 +1,9 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
mode: "all",
|
||||
content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
3
tailwind.css
Normal file
3
tailwind.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -1,8 +0,0 @@
|
||||
[package]
|
||||
name = "ui"
|
||||
version = "0.1.0"
|
||||
edition = "2021"
|
||||
|
||||
[dependencies]
|
||||
dioxus = { workspace = true }
|
||||
api = { workspace = true }
|
||||
16
ui/README.md
16
ui/README.md
@@ -1,16 +0,0 @@
|
||||
# UI
|
||||
|
||||
This crate contains all shared components for the workspace. This is a great place to place any UI you would like to use in multiple platforms like a common `Button` or `Navbar` component.
|
||||
|
||||
```
|
||||
ui/
|
||||
├─ src/
|
||||
│ ├─ lib.rs # The entrypoint for the ui crate
|
||||
│ ├─ hero.rs # The Hero component that will be used in every platform
|
||||
│ ├─ echo.rs # The shared echo component that communicates with the server
|
||||
│ ├─ navbar.rs # The Navbar component that will be used in the layout of every platform's router
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
|
||||
Since this crate is shared between multiple platforms, it should not pull in any platform specific dependencies. For example, if you want to use the `web_sys` crate in the web build of your app, you should not add it to this crate. Instead, you should add platform specific dependencies to the [web](../web/Cargo.toml), [desktop](../desktop/Cargo.toml), or [mobile](../mobile/Cargo.toml) crates.
|
||||
@@ -1,34 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
#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;
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
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 = api::echo(event.value()).await.unwrap();
|
||||
response.set(data);
|
||||
},
|
||||
}
|
||||
|
||||
if !response().is_empty() {
|
||||
p {
|
||||
"Server echoed: "
|
||||
i { "{response}" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
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" }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
//! 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;
|
||||
@@ -1,15 +0,0 @@
|
||||
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}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
[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"]
|
||||
@@ -1,30 +0,0 @@
|
||||
# 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
|
||||
```
|
||||
@@ -1,8 +0,0 @@
|
||||
#blog {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#blog a {
|
||||
color: #ffffff;
|
||||
margin-top: 50px;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
body {
|
||||
background-color: #0f1116;
|
||||
color: #ffffff;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 20px;
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
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> {}
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
use dioxus::prelude::*;
|
||||
use ui::{Echo, Hero};
|
||||
|
||||
#[component]
|
||||
pub fn Home() -> Element {
|
||||
rsx! {
|
||||
Hero {}
|
||||
Echo {}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
mod home;
|
||||
pub use home::Home;
|
||||
|
||||
mod blog;
|
||||
pub use blog::Blog;
|
||||
Reference in New Issue
Block a user