feat: initial commit

src/components/echo.rs

@@ -0,0 +1,37 @@
+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 = 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)
+}

src/components/hero.rs

@@ -0,0 +1,21 @@
+use dioxus::prelude::*;
+
+const HEADER_SVG: Asset = asset!("/assets/header.svg");
+
+#[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" }
+            }
+        }
+    }
+}

src/components/mod.rs

@@ -0,0 +1,8 @@
+mod hero;
+pub use hero::Hero;
+
+mod navbar;
+pub use navbar::Navbar;
+
+mod echo;
+pub use echo::Echo;

src/components/navbar.rs

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

src/jobs/mod.rs

@@ -0,0 +1 @@
+pub mod tmdb;

src/jobs/tmdb.rs

@@ -0,0 +1,12 @@
+use std::fmt::Error;
+
+pub async fn get_series() {
+    // TODO: get series upcomming dates from tmdb
+    //
+    let body = reqwest::get("https://www.rust-lang.org")
+        .await?
+        .text()
+        .await?;
+
+    println!("body = {body:?}");
+}

src/main.rs

@@ -0,0 +1,42 @@
+use dioxus::prelude::*;
+
+use components::Navbar;
+use views::{Blog, Calendar, Home};
+
+mod components;
+mod jobs;
+mod views;
+
+#[derive(Debug, Clone, Routable, PartialEq)]
+#[rustfmt::skip]
+enum Route {
+    #[layout(Navbar)]
+    #[route("/")]
+    Home {},
+    #[route("/blog/:id")]
+    Blog { id: i32 },
+    #[route("/calendar/:id")]
+    Calendar { id: i32 },
+}
+
+const FAVICON: Asset = asset!("/assets/favicon.ico");
+const MAIN_CSS: Asset = asset!("/assets/styling/main.css");
+const TAILWIND_CSS: Asset = asset!("/assets/tailwind.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 }
+        document::Link { rel: "stylesheet", href: TAILWIND_CSS }
+
+        Router::<Route> {}
+    }
+}

src/views/blog.rs

@@ -0,0 +1,30 @@
+use crate::Route;
+use dioxus::prelude::*;
+
+const BLOG_CSS: Asset = asset!("/assets/styling/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"
+            }
+        }
+    }
+}

src/views/calendar.rs

@@ -0,0 +1,102 @@
+use crate::Route;
+use dioxus::{
+    html::{strong, th, tr},
+    prelude::*,
+};
+
+const CALENDAR_CSS: Asset = asset!("/assets/styling/calendar.css");
+
+#[component]
+pub fn Calendar(id: i32) -> Element {
+    rsx! {
+        document::Link { rel: "stylesheet", href: CALENDAR_CSS}
+
+        div {
+            id: "calendar",
+
+            // Content
+            h1 { "This is Calendar #{id}!" }
+            table {
+                tr {
+                    th { "Monday" }
+                    th { "Tuesday" }
+                    th { "Wednesday" }
+                    th { "Thursday" }
+                    th { "Friday" }
+                    th { "Saturday" }
+                    th { "Sunday" }
+                }
+
+                tr {
+                    th {
+                        strong { "Family Guy" }
+                        p { "S23E05" }
+                        p { "01:00 Uhr" }
+                        p { "FOX" }
+                    }
+                    th {
+                        strong { "Die Rosenheim-Cops" }
+                        p { "S24E23" }
+                        p { "01:00 Uhr" }
+                        p { "ZDFmediathek" }
+                    }
+                    th {}
+                    th {}
+                    th {}
+                    th {}
+                    th {}
+                }
+
+                tr {
+                    th {
+                        strong { "Married to Medicine" }
+                        p { "S11E15" }
+                        p { "01:00 Uhr" }
+                        p { "Hayu" }
+                    }
+                    th {
+                        strong { "SOKO Köln" }
+                        p { "S23E23" }
+                        p { "01:00 Uhr" }
+                        p { "ZDFmediathek" }
+                    }
+                    th {}
+                    th {}
+                    th {}
+                    th {}
+                    th {}
+                }
+
+                tr {
+                    th {
+                        strong { "SOKO Potsdam" }
+                        p { "S07E11" }
+                        p { "01:00 Uhr" }
+                        p { "ZDFmediathek" }
+                    }
+                    th {}
+                    th {}
+                    th {}
+                    th {}
+                    th {}
+                    th {}
+                }
+
+                tr {
+                    th {
+                        strong { "Tracker" }
+                        p { "S02E13" }
+                        p { "01:00 Uhr" }
+                        p { "CBS" }
+                    }
+                    th {}
+                    th {}
+                    th {}
+                    th {}
+                    th {}
+                    th {}
+                }
+            }
+        }
+    }
+}

src/views/home.rs

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

src/views/mod.rs

@@ -0,0 +1,8 @@
+mod home;
+pub use home::Home;
+
+mod blog;
+pub use blog::Blog;
+
+mod calendar;
+pub use calendar::Calendar;