Push for 0.1.0

Signed-off-by: Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>

.gitignore

@@ -1,7 +1,7 @@
 # Generated by Cargo
 # will have compiled files and executables
 /target/
-/dist/
+/docs/
 /static/
 /.dioxus/
 /node_modules/

Dioxus.toml

@@ -8,7 +8,7 @@ name = "athome"
 default_platform = "web"
 
 # `build` & `serve` dist path
-out_dir = "dist"
+out_dir = "docs"
 
 # resource (assets) file folder
 asset_dir = "assets"
@@ -16,7 +16,7 @@ asset_dir = "assets"
 [web.app]
 
 # HTML title tag content
-title = "athome"
+title = "Tuan-Dat Tran"
 
 [web.watcher]
 

Dockerfile

@@ -14,4 +14,4 @@ COPY ./Dioxus.toml ./Dioxus.toml
 COPY ./tailwind.config.js ./tailwind.config.js
 RUN npx tailwindcss -i ./input.css -o ./assets/tailwind.css
 RUN dx build --platform fullstack --release
-ENTRYPOINT [ "./dist/athome" ]
+ENTRYPOINT [ "./docs/athome" ]

assets/tailwind.css

@@ -554,18 +554,6 @@ video {
   --tw-contain-style:  ;
 }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 .absolute {
   position: absolute;
 }
@@ -630,6 +618,10 @@ video {
   margin-inline-start: 2rem;
 }
 
+.mt-0 {
+  margin-top: 0px;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -642,10 +634,6 @@ video {
   margin-top: 0.75rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
-}
-
 .block {
   display: block;
 }
@@ -658,19 +646,11 @@ video {
   display: inline-flex;
 }
 
-.hidden {
-  display: none;
-}
-
 .size-auto {
   width: auto;
   height: auto;
 }
 
-.h-10 {
-  height: 2.5rem;
-}
-
 .h-16 {
   height: 4rem;
 }
@@ -703,10 +683,6 @@ video {
   min-height: 100vh;
 }
 
-.w-10 {
-  width: 2.5rem;
-}
-
 .w-16 {
   width: 4rem;
 }
@@ -728,6 +704,10 @@ video {
   width: 100%;
 }
 
+.w-96 {
+  width: 24rem;
+}
+
 .min-w-fit {
   min-width: -moz-fit-content;
   min-width: fit-content;
@@ -745,10 +725,6 @@ video {
   max-width: 2rem;
 }
 
-.max-w-screen-md {
-  max-width: 768px;
-}
-
 .max-w-screen-xl {
   max-width: 1280px;
 }
@@ -795,6 +771,18 @@ video {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2rem * var(--tw-space-x-reverse));
+  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .self-center {
   align-self: center;
 }
@@ -839,11 +827,6 @@ video {
   border-inline-start-width: 1px;
 }
 
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
-}
-
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -859,11 +842,6 @@ video {
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
 
-.bg-blue-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
-
 .bg-gray-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -961,10 +939,6 @@ video {
   padding: 0.25rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .p-3 {
   padding: 0.75rem;
 }
@@ -991,11 +965,6 @@ video {
   padding-right: 0.625rem;
 }
 
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -1234,12 +1203,6 @@ video {
   outline-offset: 2px;
 }
 
-.focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
 .focus\:ring-4:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1251,11 +1214,6 @@ video {
   --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-gray-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-}
-
 .group:hover .group-hover\:from-green-400 {
   --tw-gradient-from: #4ade80 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);
@@ -1277,30 +1235,10 @@ video {
 }
 
 @media (min-width: 768px) {
-  .md\:mt-0 {
-    margin-top: 0px;
-  }
-
-  .md\:block {
-    display: block;
-  }
-
   .md\:flex {
     display: flex;
   }
 
-  .md\:hidden {
-    display: none;
-  }
-
-  .md\:w-auto {
-    width: auto;
-  }
-
-  .md\:flex-row {
-    flex-direction: row;
-  }
-
   .md\:items-center {
     align-items: center;
   }
@@ -1309,25 +1247,10 @@ video {
     justify-content: space-between;
   }
 
-  .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(2rem * var(--tw-space-x-reverse));
-    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .md\:border-0 {
-    border-width: 0px;
-  }
-
   .md\:bg-transparent {
     background-color: transparent;
   }
 
-  .md\:bg-white {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  }
-
   .md\:p-0 {
     padding: 0px;
   }
@@ -1489,20 +1412,10 @@ video {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));
   }
-
-  .dark\:focus\:ring-gray-600:focus {
-    --tw-ring-opacity: 1;
-    --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
-  }
 }
 
 @media (min-width: 768px) {
   @media (prefers-color-scheme: dark) {
-    .md\:dark\:bg-gray-900 {
-      --tw-bg-opacity: 1;
-      background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-    }
-
     .md\:dark\:text-blue-500 {
       --tw-text-opacity: 1;
       color: rgb(59 130 246 / var(--tw-text-opacity));

src/impressum.rs

@@ -1,4 +1,4 @@
-use dioxus::prelude::{server_fn::error::ServerFnError, *};
+use dioxus::prelude::*;
 use tracing::info;
 
 use crate::components::{H1, HR, P};
@@ -6,17 +6,17 @@ use crate::components::{H1, HR, P};
 #[component]
 pub fn Impressum() -> Element {
     let mut show_impressum = use_signal(|| false);
-    let mut check_impressum = move || {
-        if !show_impressum() {
-            show_impressum.set(true);
-        }
-    };
 
     rsx! {
         if show_impressum() {
             div {
                 class: "flex flex-col items-center",
+                button {
+                    onclick: move |_| {
+                        info!("Hide impressum.");
+                    },
                     H1 { "Impressum" },
+                },
                 P { "Tuan-Dat Tran" },
                 P { "c/o AutorenServices.de" },
                 P { "Birkenallee 24" },
@@ -32,9 +32,9 @@ pub fn Impressum() -> Element {
             div {
                 class: "flex flex-col items-center p-3",
                 button {
-                    onclick: move |_| {
+                    onclick: move |_| async move {
                         info!("Showing impressum.");
-                        check_impressum();
+                        show_impressum.set(true);
                     },
 
                 H1 { "Show Impressum" },
@@ -43,8 +43,3 @@ pub fn Impressum() -> Element {
         }
     }
 }
-
-#[server(GetImpressum)]
-pub async fn get_impressum() -> Result<(), ServerFnError> {
-    Ok(())
-}

src/layout/footer.rs

@@ -5,7 +5,7 @@ use crate::components::H1;
 pub fn Footer() -> Element {
     rsx! {
         div {
-            ToolsUsed {},
+            // ToolsUsed {},
             footer {
                 class:"bg-white rounded-lg shadow dark:bg-gray-800 my-4:wa mb-4",
                 div {
@@ -28,6 +28,7 @@ pub fn Footer() -> Element {
     }
 }
 
+#[allow(dead_code)]
 fn ToolsUsed() -> Element {
     rsx! {
         div {
@@ -38,15 +39,15 @@ fn ToolsUsed() -> Element {
             div {
                 class: "flex h-fill overflow-x-auto",
                 Logo {
-                    src: "https://raw.githubusercontent.com/SAWARATSUKI/ServiceLogos/main/Rust/Rust.png",
+                    src: "https://raw.githubusercontent.com/SAWARATSUKI/Logogs/main/Rust/Rust.png",
                     alt: "Rust"
                 },
                 Logo {
-                    src: "https://raw.githubusercontent.com/SAWARATSUKI/ServiceLogos/main/Tailwindcss/Tailwindcss6.png",
+                    src: "https://raw.githubusercontent.com/SAWARATSUKI/Logogs/main/Tailwindcss/Tailwindcss6.png",
                     alt: "Tailwindcss"
                 },
                 Logo {
-                    src: "https://raw.githubusercontent.com/SAWARATSUKI/ServiceLogos/main/Html/HTML.png",
+                    src: "https://raw.githubusercontent.com/SAWARATSUKI/Logogs/main/Html/HTML.png",
                     alt: "HTML"
                 },
                 Logo {

src/layout/header.rs

@@ -5,37 +5,31 @@ use crate::Route;
 pub fn Header() -> Element {
     rsx! {
         nav {
-            div { class:" flex flex-wrap items-center justify-between mx-auto p-4",
+            div {
+                class: "flex items-center justify-between p-4 w-96",
+                class: "flex items-center justify-between p-4 flex-wrap mx-auto max-w-screen-xl",
                 Link {
                     to: Route::Home {},
                     class:"flex items-center space-x-3 rtl:space-x-reverse",
                     img { src:"/pictures/ClackCat_t.webp", class:"rounded-full h-8", alt:"Flowbite Logo" },
                     span { class:"self-center text-2xl font-semibold whitespace-nowrap dark:text-white", "" }
                 }
-                button {
+                div { class:"", id:"navbar-default",
-                    r#type:"button",
+                    ul { class:"flex space-x-8",
-                    class:"inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600",
+                        li { class: "", HeaderLink { url: Route::Home {}, text: "Home" } },
-                    aria_controls:"navbar-default",
+                        li { class: "", HeaderLink { url: Route::CV {}, text: "CV" } },
-                    aria_expanded:"false",
+                        li { class: "", HeaderLink { url: Route::ProjectsPublications {}, text: "Publications/Projects" } },
-                    span { class:"sr-only", "Open main menu" },
+                        li { class: "", HeaderLink { url: Route::Impressum {}, text: "About" } },
-                }
-                div { class:"hidden w-full md:block md:w-auto", id:"navbar-default",
-                    ul { class:"font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700",
-                        li {
-                            Link { to: Route::Home {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "Home" }
-                        }
-                        li {
-                            Link { to: Route::CV {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "CV" }
-                        }
-                        li {
-                            Link { to: Route::ProjectsPublications {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "Publications/Projects" }
-                        }
-                        li {
-                            Link { to: Route::Impressum {}, class:"block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", "About" }
                     }
                 }
             }
         }
     }
 }
+
+#[component]
+fn HeaderLink(url: Route, text: String) -> Element {
+    rsx! {
+        Link { to: url, class:"md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500", {text} }
+    }
 }

src/main.rs

@@ -1,6 +1,8 @@
 #![allow(non_snake_case)]
 
+use dioxus::fullstack::Config;
 use dioxus::prelude::*;
+
 use tracing::Level;
 
 pub mod components;
@@ -34,7 +36,13 @@ pub enum Route {
 
 fn main() {
     dioxus_logger::init(Level::DEBUG).expect("failed to init logger");
-    launch(App);
+    let config = server_only!(
+        dioxus::fullstack::Config::new().addr(std::net::SocketAddrV4::new(
+            std::net::Ipv4Addr::new(0, 0, 0, 0),
+            8080,
+        ))
+    );
+    LaunchBuilder::fullstack().with_cfg(config).launch(App)
 }
 
 fn App() -> Element {
@@ -73,7 +81,7 @@ pub fn Body(prop: BodyProp) -> Element {
         div {
             class: "flex justify-center my-4",
             div {
-                class: "max-w-screen-md min-w-full",
+                class: "max-w-screen-xl min-w-full",
                 {prop.children}
             }
         }