Tuan-Dat Tran
parent
a6c382fc8b
commit
4b56557d15
|
|
@ -1,7 +1,7 @@
|
|||
# Generated by Cargo
|
||||
# will have compiled files and executables
|
||||
/target/
|
||||
/dist/
|
||||
/docs/
|
||||
/static/
|
||||
/.dioxus/
|
||||
/node_modules/
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
||||
|
|
|
|||
|
|
@ -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" ]
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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(())
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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} }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
12
src/main.rs
12
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}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue