From 4b56557d15dbfebf4e74674950d3b701bc63fbbb Mon Sep 17 00:00:00 2001 From: Tuan-Dat Tran Date: Tue, 14 May 2024 11:33:25 +0200 Subject: [PATCH] Push for 0.1.0 Signed-off-by: Tuan-Dat Tran --- .gitignore | 2 +- Dioxus.toml | 4 +- Dockerfile | 2 +- assets/tailwind.css | 127 +++++++------------------------------------ src/impressum.rs | 23 +++----- src/layout/footer.rs | 9 +-- src/layout/header.rs | 38 ++++++------- src/main.rs | 12 +++- 8 files changed, 64 insertions(+), 153 deletions(-) diff --git a/.gitignore b/.gitignore index 4d7d673..871545a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ # Generated by Cargo # will have compiled files and executables /target/ -/dist/ +/docs/ /static/ /.dioxus/ /node_modules/ diff --git a/Dioxus.toml b/Dioxus.toml index 18ca310..c8a3e86 100644 --- a/Dioxus.toml +++ b/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] diff --git a/Dockerfile b/Dockerfile index 10fce5c..3c8b2eb 100644 --- a/Dockerfile +++ b/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" ] diff --git a/assets/tailwind.css b/assets/tailwind.css index 0db91b0..4a313d0 100644 --- a/assets/tailwind.css +++ b/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)); diff --git a/src/impressum.rs b/src/impressum.rs index c041334..b2165e0 100644 --- a/src/impressum.rs +++ b/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", - H1 { "Impressum" }, + 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(()) -} diff --git a/src/layout/footer.rs b/src/layout/footer.rs index dce68db..12f6691 100644 --- a/src/layout/footer.rs +++ b/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 { diff --git a/src/layout/header.rs b/src/layout/header.rs index 8614887..9f7bc17 100644 --- a/src/layout/header.rs +++ b/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 { - r#type:"button", - 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", - aria_controls:"navbar-default", - aria_expanded:"false", - span { class:"sr-only", "Open main menu" }, - } - 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" } - } + div { class:"", id:"navbar-default", + ul { class:"flex space-x-8", + li { class: "", HeaderLink { url: Route::Home {}, text: "Home" } }, + li { class: "", HeaderLink { url: Route::CV {}, text: "CV" } }, + li { class: "", HeaderLink { url: Route::ProjectsPublications {}, text: "Publications/Projects" } }, + li { class: "", HeaderLink { url: Route::Impressum {}, text: "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} } + } +} diff --git a/src/main.rs b/src/main.rs index 8de0f9f..357dae0 100644 --- a/src/main.rs +++ b/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} } }