Added some SEO and ran cargo update

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

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "athome"
-version = "0.2.1"
+version = "0.2.2"
 authors = ["Tuan-Dat Tran <tuan-dat.tran@tudattr.dev>"]
 edition = "2021"
 
@@ -8,7 +8,6 @@ edition = "2021"
 
 [dependencies]
 serde = { version = "1.0.197", features = ["derive"] }
-
 dioxus = { version = "0.5", features = ["fullstack", "router"] }
 
 # Debug

src/components/mod.rs

@@ -21,6 +21,19 @@ pub fn P(props: PProps) -> Element {
     }
 }
 
+#[component]
+pub fn Title(props: PProps) -> Element {
+    rsx! {
+        div {
+            class: "{props.class}",
+            h1 {
+                class: "mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white",
+                {props.children}
+            }
+        }
+    }
+}
+
 #[component]
 pub fn H1(props: PProps) -> Element {
     rsx! {
@@ -84,7 +97,7 @@ pub fn Card(prop: CardProp) -> Element {
                     Picture {src: "{prop.picture}"},
                 }
             }
-            H5 { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " {prop.gender}" } },
+            Title { "{prop.name}", span { class: "text-grey-600 dark:text-grey-500 text-lg", " {prop.gender}" } },
             { prop.children }
         }
     }

src/layout/mod.rs

@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 
-mod footer;
-mod header;
+pub mod footer;
+pub mod header;
 
 use crate::{Body, Route};
 use footer::Footer;
@@ -9,17 +9,13 @@ use header::Header;
 
 pub fn Layout() -> Element {
     rsx! {
-        meta {
-            name: "description",
-            content: "Explore Tuan-Dat Tran's personal website featuring his CV, publications, projects, and consulting services. Get insights into his professional journey and connect for collaboration opportunities.",
-        }
         div {
-            class: "flex flex-col min-h-screen" ,
+            class: "flex flex-col min-h-screen",
             Header {},
             Body {
                 Outlet::<Route> {},
-            }
             Footer {},
+            }
         }
     }
 }

src/main.rs

@@ -2,9 +2,12 @@
 
 use std::str::FromStr;
 
+use components::H1;
 use dioxus::prelude::*;
 use dioxus_sdk::i18n::*;
 
+use layout::footer::Footer;
+use layout::header::Header;
 use tracing::Level;
 
 pub mod components;
@@ -60,6 +63,41 @@ fn App() -> Element {
     });
 
     rsx! {
+        meta {
+            name: "description",
+            content: "Visit Tuan-Dat Tran's website for his CV, publications, projects, and consulting services. Connect for collaboration.",
+        },
+        script {
+            r#type: "application/ld+json",
+            "
+            {{
+                \"@context\": \"https://schema.org\",
+                \"@type\": \"ProfilePage\",
+                \"mainEntity\": {{
+                  \"@type\": \"Person\",
+                  \"name\": \"Tuan-Dat Tran\",
+                  \"alternateName\": \"TuDatTr\",
+                  \"image\": \"https://www.tudattr.dev/pictures/headshot.webp\",
+                }}
+            }}
+            "
+        }
+        // meta {
+        //     property: "og:title",
+        //     content: "Tuan-Dat Trans Personal Website",
+        // }
+        // meta {
+        //     property: "og:description",
+        //     content: "Explore Tuan-Dat Tran's personal website featuring his CV, publications, projects, and consulting services. Get insights into his professional journey and connect for collaboration opportunities.",
+        // }
+        // meta {
+        //     property: "og:image",
+        //     content: "https://www.tudattr.dev/pictures/headshot.webp",
+        // }
+        // meta {
+        //     property: "og:url",
+        //     content: "https://tudattr.dev",
+        // }
         div {
             class: "bg-white dark:bg-gray-900 min-h-screen",
             Router::<Route> {},
@@ -71,12 +109,16 @@ fn App() -> Element {
 fn PageNotFound(route: Vec<String>) -> Element {
     rsx! {
         div {
-            class: "h-screen items-center justify-center",
-            img {
-                class: "size-auto",
-                src: "https://raw.githubusercontent.com/SAWARATSUKI/ServiceLogos/main/404Notfound/NotFound.png"
+            class: "flex flex-col min-h-screen items",
+            Header {},
+            div {
+                class: "container mx-auto p-4 flex items-center justify-center max-w-md w-full",
+                H1 {
+                    "Site not found (404)"
+                },
             }
-        }
+            Footer {}
+        },
     }
 }