Merge pull request #14 from binhtran432k/feat/seo

feat: enhance seo

src/components/mod.rs

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

src/components/seo.rs

@@ -0,0 +1,34 @@
+use sycamore::prelude::*;
+
+#[component]
+pub fn Seo<G: Html>(cx: Scope) -> View<G> {
+    view! { cx,
+        meta (
+            name = "description",
+            content = "Full stack web developer, Automation tester with more than three years experience in Open Source development.")
+        meta (
+            name = "keywords",
+            content = "binh tran, fullstack, automation, developer, tester, web development")
+        meta (
+            name = "author",
+            content = "Binh Tran")
+        // favicons
+        link (rel="apple-touch-icon", sizes="57x57", href=".perseus/static/favicons/apple-icon-57x57.png")
+        link (rel="apple-touch-icon", sizes="60x60", href=".perseus/static/favicons/apple-icon-60x60.png")
+        link (rel="apple-touch-icon", sizes="72x72", href=".perseus/static/favicons/apple-icon-72x72.png")
+        link (rel="apple-touch-icon", sizes="76x76", href=".perseus/static/favicons/apple-icon-76x76.png")
+        link (rel="apple-touch-icon", sizes="114x114", href=".perseus/static/favicons/apple-icon-114x114.png")
+        link (rel="apple-touch-icon", sizes="120x120", href=".perseus/static/favicons/apple-icon-120x120.png")
+        link (rel="apple-touch-icon", sizes="144x144", href=".perseus/static/favicons/apple-icon-144x144.png")
+        link (rel="apple-touch-icon", sizes="152x152", href=".perseus/static/favicons/apple-icon-152x152.png")
+        link (rel="apple-touch-icon", sizes="180x180", href=".perseus/static/favicons/apple-icon-180x180.png")
+        link (rel="icon", type="image/png", sizes="192x192" , href=".perseus/static/favicons/android-icon-192x192.png")
+        link (rel="icon", type="image/png", sizes="32x32", href=".perseus/static/favicons/favicon-32x32.png")
+        link (rel="icon", type="image/png", sizes="96x96", href=".perseus/static/favicons/favicon-96x96.png")
+        link (rel="icon", type="image/png", sizes="16x16", href=".perseus/static/favicons/favicon-16x16.png")
+        link (rel="manifest", href=".perseus/static/favicons/manifest.json")
+        meta (name="msapplication-TileColor", content="#ffffff")
+        meta (name="msapplication-TileImage", content=".perseus/static/favicons/ms-icon-144x144.png")
+        meta (name="theme-color", content="#ffffff")
+    }
+}

src/main.rs

@@ -1,11 +1,28 @@
+mod components;
 mod error_views;
 mod templates;
 
 use perseus::prelude::*;
+use sycamore::prelude::view;
 
 #[perseus::main(perseus_axum::dflt_server)]
 pub fn main<G: Html>() -> PerseusApp<G> {
     PerseusApp::new()
         .template(crate::templates::index::get_template())
         .error_views(crate::error_views::get_error_views())
+        .index_view(|cx| {
+            view! { cx,
+                html (lang="en") {
+                    head {
+                        meta(charset = "UTF-8")
+                        meta(name = "viewport", content = "width=device-width, initial-scale=1.0")
+                        crate::components::seo::Seo()
+                    }
+                    body {
+                        // Quirk: this creates a wrapper `<div>` around the root `<div>` by necessity
+                        PerseusRoot()
+                    }
+                }
+            }
+        })
 }

src/templates/index.rs

@@ -18,7 +18,7 @@ fn index_page<G: Html>(cx: Scope) -> View<G> {
 #[engine_only_fn]
 fn head(cx: Scope) -> View<SsrNode> {
     view! { cx,
-        title { "Welcome to Perseus!" }
+        title { "BINH TRAN - Fullstack Developer" }
     }
 }
 

static/favicons/browserconfig.xml

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

static/favicons/manifest.json

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}