init(dixous): inital testing around dioxus

.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,31 @@
+[package]
+name = "personal_site"
+version = "0.1.0"
+authors = ["darkicewolf50 <brock.tomlinson@ucalgary.ca>"]
+edition = "2021"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+dioxus = { version = "0.6.0", features = ["router"] }
+
+[features]
+default = ["web"]
+# The feature that are only required for the web = ["dioxus/web"] build target should be optional and only enabled in the web = ["dioxus/web"] feature
+web = ["dioxus/web"]
+# The feature that are only required for the desktop = ["dioxus/desktop"] build target should be optional and only enabled in the desktop = ["dioxus/desktop"] feature
+desktop = ["dioxus/desktop"]
+# The feature that are only required for the mobile = ["dioxus/mobile"] build target should be optional and only enabled in the mobile = ["dioxus/mobile"] feature
+mobile = ["dioxus/mobile"]
+
+[profile]
+
+[profile.wasm-dev]
+inherits = "dev"
+opt-level = 1
+
+[profile.server-dev]
+inherits = "dev"
+
+[profile.android-dev]
+inherits = "dev"

Dioxus.toml

@@ -0,0 +1,21 @@
+[application]
+
+[web.app]
+
+# HTML title tag content
+title = "Brock Tomlinson"
+
+# 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 = []

assets/styling/blog.css

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

assets/styling/main.css

@@ -0,0 +1,42 @@
+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;
+}

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

dioxus info/README.md

@@ -0,0 +1,35 @@
+# Development
+
+Your new jumpstart project includes basic organization with an organized `assets` folder and a `components` folder. 
+If you chose to develop with the router feature, you will also have a `views` folder.
+
+```
+project/
+├─ assets/ # Any assets that are used by the app should be placed here
+├─ src/
+│  ├─ main.rs # The entrypoint for the app. It also defines the routes for the app.
+│  ├─ components/
+│  │  ├─ mod.rs # Defines the components module
+│  │  ├─ hero.rs # The Hero component for use in the home page
+│  ├─ views/ # The views each route will render in 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 Cargo.toml file defines the dependencies and feature flags for your project
+```
+
+
+
+### Serving Your App
+
+Run the following command in the root of your project to start developing with the default platform:
+
+```bash
+dx serve
+```
+
+To run for a different platform, use the `--platform platform` flag. E.g.
+```bash
+dx serve --platform desktop
+```
+

src/components/hero.rs

@@ -0,0 +1,25 @@
+use dioxus::prelude::*;
+
+const HEADER_SVG: Asset = asset!("/assets/header.svg");
+
+#[component]
+pub fn Hero() -> Element {
+    rsx! {
+        // We can create elements inside the rsx macro with the element name followed by a block of attributes and children.
+        div {
+            // Attributes should be defined in the element before any children
+            id: "hero",
+            // After all attributes are defined, we can define child elements and components
+            img { src: HEADER_SVG, id: "header" }
+            div { id: "links",
+                // The RSX macro also supports text nodes surrounded by quotes
+                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" }
+            }
+        }
+    }
+}

src/components/mod.rs

@@ -0,0 +1,6 @@
+//! The components module contains all shared components for our app. Components are the building blocks of dioxus apps.
+//! They can be used to defined common UI elements like buttons, forms, and modals. In this template, we define a Hero
+//! component  to be used in our app.
+
+mod hero;
+pub use hero::Hero;

src/lib.rs

@@ -0,0 +1,47 @@
+use dioxus::prelude::*;
+
+// use components::Hero;
+use views::{Blog, Home, Navbar, NewHome};
+
+/// Define a components module that contains all shared components for our app.
+mod components;
+/// Define a views module that contains the UI for all Layouts and Routes for our app.
+mod views;
+
+/// The Route enum is used to define the structure of internal routes in our app. All route enums need to derive
+/// the [`Routable`] trait, which provides the necessary methods for the router to work.
+///
+/// Each variant represents a different URL pattern that can be matched by the router. If that pattern is matched,
+/// the components for that route will be rendered.
+#[derive(Debug, Clone, Routable, PartialEq)]
+#[rustfmt::skip]
+pub enum Route {
+    // The layout attribute defines a wrapper for all routes under the layout. Layouts are great for wrapping
+    // many routes with a common UI like a navbar.
+    #[layout(Navbar)]
+        // The route attribute defines the URL pattern that a specific route matches. If that pattern matches the URL,
+        // the component for that route will be rendered. The component name that is rendered defaults to the variant name.
+        #[route("/")]
+        Home {},
+        // The route attribute can include dynamic parameters that implement [`std::str::FromStr`] and [`std::fmt::Display`] with the `:` syntax.
+        // In this case, id will match any integer like `/blog/123` or `/blog/-456`.
+        #[route("/blog/:id")]
+        // Fields of the route variant will be passed to the component as props. In this case, the blog component must accept
+        // an `id` prop of type `i32`.
+        Blog { id: i32 },
+
+        #[route("/test")]
+        Hello {},
+
+        #[route("/new_home")]
+        NewHome {},
+}
+
+#[component]
+fn Hello() -> Element {
+    rsx!(
+        div {
+            h1 { "hello" }
+        }
+    )
+}

src/main.rs

@@ -0,0 +1,35 @@
+// The dioxus prelude contains a ton of common items used in dioxus apps. It's a good idea to import wherever you
+// need dioxus
+use dioxus::prelude::*;
+use personal_site::Route;
+
+// We can import assets in dioxus with the `asset!` macro. This macro takes a path to an asset relative to the crate root.
+// The macro returns an `Asset` type that will display as the path to the asset in the browser or a local path in desktop bundles.
+const FAVICON: Asset = asset!("/assets/favicon.ico");
+// The asset macro also minifies some assets like CSS and JS to make bundled smaller
+const MAIN_CSS: Asset = asset!("/assets/styling/main.css");
+
+fn main() {
+    // The `launch` function is the main entry point for a dioxus app. It takes a component and renders it with the platform feature
+    // you have enabled
+    dioxus::launch(App);
+}
+
+/// App is the main component of our app. Components are the building blocks of dioxus apps. Each component is a function
+/// that takes some props and returns an Element. In this case, App takes no props because it is the root of our app.
+///
+/// Components should be annotated with `#[component]` to support props, better error messages, and autocomplete
+#[component]
+fn App() -> Element {
+    // The `rsx!` macro lets us define HTML inside of rust. It expands to an Element with all of our HTML inside.
+    rsx! {
+        // In addition to element and text (which we will see later), rsx can contain other components. In this case,
+        // we are using the `document::Link` component to add a link to our favicon and main CSS file into the head of our app.
+        document::Link { rel: "icon", href: FAVICON }
+        document::Link { rel: "stylesheet", href: MAIN_CSS }
+
+        // The router component renders the route enum we defined above. It will handle synchronization of the URL and render
+        // the layouts and components for the active route.
+        Router::<Route> {}
+    }
+}

src/views/blog.rs

@@ -0,0 +1,39 @@
+use crate::Route;
+use dioxus::prelude::*;
+
+const BLOG_CSS: Asset = asset!("/assets/styling/blog.css");
+
+/// The Blog page component that will be rendered when the current route is `[Route::Blog]`
+///
+/// The component takes a `id` prop of type `i32` from the route enum. Whenever the id changes, the component function will be
+/// re-run and the rendered HTML will be updated.
+#[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
+            // The `Link` component lets us link to other routes inside our app. It takes a `to` prop of type `Route` and
+            // any number of child nodes.
+            Link {
+                // The `to` prop is the route that the link should navigate to. We can use the `Route` enum to link to the
+                // blog page with the id of -1. Since we are using an enum instead of a string, all of the routes will be checked
+                // at compile time to make sure they are valid.
+                to: Route::Blog { id: id - 1 },
+                "Previous"
+            }
+            span { " <---> " }
+            Link {
+                to: Route::Blog { id: id + 1 },
+                "Next"
+            }
+        }
+    }
+}

src/views/home.rs

@@ -0,0 +1,8 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn Home() -> Element {
+    rsx!(
+        h1 { "Hi I'm Brock" }
+    )
+}

src/views/mod.rs

@@ -0,0 +1,21 @@
+//! The views module contains the components for all Layouts and Routes for our app. Each layout and route in our [`Route`]
+//! enum will render one of these components.
+//!
+//!
+//! The [`Home`] and [`Blog`] components will be rendered when the current route is [`Route::Home`] or [`Route::Blog`] respectively.
+//!
+//!
+//! The [`Navbar`] component will be rendered on all pages of our app since every page is under the layout. The layout defines
+//! a common wrapper around all child routes.
+
+mod new_home;
+pub use new_home::NewHome;
+
+mod blog;
+pub use blog::Blog;
+
+mod navbar;
+pub use navbar::Navbar;
+
+mod home;
+pub use home::Home;

src/views/navbar.rs

@@ -0,0 +1,25 @@
+use crate::Route;
+use dioxus::prelude::*;
+
+const NAVBAR_CSS: Asset = asset!("/assets/styling/navbar.css");
+
+/// The Navbar component that will be rendered on all pages of our app since every page is under the layout.
+///
+///
+/// This layout component wraps the UI of [Route::Home] and [Route::Blog] in a common navbar. The contents of the Home and Blog
+/// routes will be rendered under the outlet inside this component
+#[component]
+pub fn Navbar() -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: NAVBAR_CSS }
+
+        div { id: "navbar",
+            Link { to: Route::NewHome {}, "Home" }
+            Link { to: Route::Blog { id: 1 }, "Blog" }
+        }
+
+        // The `Outlet` component is used to render the next component inside the layout. In this case, it will render either
+        // the [`Home`] or [`Blog`] component depending on the current route.
+        Outlet::<Route> {}
+    }
+}

src/views/new_home.rs

@@ -0,0 +1,10 @@
+use crate::components::Hero;
+use dioxus::prelude::*;
+
+/// The Home page component that will be rendered when the current route is `[Route::Home]`
+#[component]
+pub fn NewHome() -> Element {
+    rsx! {
+        Hero {}
+    }
+}