feat: enhance landing

Include:
- Enhance Landing
- Refactor layout
- Enhance error layout
- Make loader internal

src/components/cool_link.rs

@@ -0,0 +1,14 @@
+use sycamore::prelude::*;
+
+#[component]
+pub fn CoolLink<G: Html>(cx: Scope, CoolLinkProps { to, text }: CoolLinkProps) -> View<G> {
+    view! {cx,
+        a(href=(to), class="cool-link", data-text=(text)){span{(text)}}
+    }
+}
+
+#[derive(Prop)]
+pub struct CoolLinkProps {
+    to: &'static str,
+    text: &'static str,
+}

src/components/header.rs

@@ -0,0 +1,23 @@
+use sycamore::prelude::*;
+
+use crate::components::cool_link::CoolLink;
+
+#[component]
+pub fn Header<G: Html>(cx: Scope) -> View<G> {
+    view! {cx,
+        header(class="header") {
+            div(class="header__container") {
+                ul(class="header__left") {
+                    li(class="header--xs") { CoolLink(text="Home", to="") }
+                    li(class="header--sm") { CoolLink(text="Reviews", to="#") }
+                    li { CoolLink(text="Projects", to="#") }
+                    li(class="header--sm") { CoolLink(text="Insights", to="#") }
+                    li(class="header--sm") { CoolLink(text="Faq", to="#") }
+                }
+                div(class="header__right") {
+                    button(class="cool-button") {span{"Contact"}}
+                }
+            }
+        }
+    }
+}

src/components/intro.rs

@@ -0,0 +1,14 @@
+use sycamore::prelude::*;
+
+#[component]
+pub fn Intro<G: Html>(cx: Scope) -> View<G> {
+    view! {cx,
+        div(class="intro") {
+            h4 { "Hi 👋, My name is" }
+            h1 { "Binh Tran" }
+            h2 { "Full stack  web developer" }
+            h2 { "Automation tester" }
+            h2 { "from Vietnam" }
+        }
+    }
+}

src/components/landing.rs

@@ -0,0 +1,14 @@
+use crate::components::{header::Header, intro::Intro, scroll_down::ScrollDown, social::Social};
+use sycamore::prelude::*;
+
+#[component]
+pub fn Landing<G: Html>(cx: Scope) -> View<G> {
+    view! {cx,
+        main(class="landing") {
+            Header
+            Social
+            Intro
+            ScrollDown
+        }
+    }
+}

src/components/layout.rs → src/components/loader.rs

@@ -1,13 +1,17 @@
+use std::fs;
+
 use sycamore::prelude::*;
 
 #[component]
-pub fn Layout<'a, G: Html>(cx: Scope<'a>, LayoutProps { children }: LayoutProps<'a, G>) -> View<G> {
-    let children = children.call(cx);
-
-    view! { cx,
+pub fn Loader<G: Html>(cx: Scope) -> View<G> {
+    view! {cx,
         div(class="loader") {
+            style { (fs::read_to_string("static/styles/loader.css").expect("Cannot read loader.css")) }
             div(class="loader__box") {
-                img(src=".perseus/static/assets/images/mangekyou-sharingan.svg", alt="Loader image", class="loader__image")
+                img(src=".perseus/static/assets/images/mangekyou-sharingan.svg",
+                    loading="lazy",
+                    alt="Loader image",
+                    class="loader__image")
                 div(class="loader__text") {
                     "L"
                     div(class="loader__text--dot")
@@ -22,15 +26,7 @@ pub fn Layout<'a, G: Html>(cx: Scope<'a>, LayoutProps { children }: LayoutProps<
                     span(class="loader__counter--number") {"0%"}
                 }
             }
-            script(src=".perseus/static/scripts/loader.js", defer=true)
-        }
-        main {
-            (children)
         }
+        script { (fs::read_to_string("static/scripts/loader.js").expect("Cannot read loader.js")) }
     }
 }
-
-#[derive(Prop)]
-pub struct LayoutProps<'a, G: Html> {
-    pub children: Children<'a, G>,
-}

src/components/mod.rs

@@ -1,2 +1,9 @@
-pub mod layout;
+pub mod cool_link;
+pub mod header;
+pub mod intro;
+pub mod landing;
+pub mod loader;
+pub mod scroll_down;
 pub mod seo;
+pub mod social;
+pub mod social_link;

src/components/scroll_down.rs

@@ -0,0 +1,17 @@
+use sycamore::prelude::*;
+
+#[component]
+pub fn ScrollDown<G: Html>(cx: Scope) -> View<G> {
+    view!{cx,
+        div(class="scroll-down") {
+            div(class="scroll-down__wheel") {
+                div(class="scroll-down__wheel--inner")
+            }
+            div(class="scroll-down__arrows") {
+                span(class="scroll-down__arrow")
+                span(class="scroll-down__arrow")
+                span(class="scroll-down__arrow")
+            }
+        }
+    }
+}

src/components/social.rs

@@ -0,0 +1,19 @@
+use std::fs;
+
+use sycamore::prelude::*;
+
+use crate::components::social_link::{SocialLink, SocialType};
+
+#[component]
+pub fn Social<G: Html>(cx: Scope) -> View<G> {
+    view! {cx,
+        div(class="social") {
+            style { (fs::read_to_string("static/styles/social-icon.css").expect("Cannot read social-icon.css")) }
+            SocialLink(to="https://www.linkedin.com/in/binhtran432k", typ=SocialType::LinkedIn)
+            SocialLink(to="https://github.com/binhtran432k", typ=SocialType::GitHub)
+            SocialLink(to="#", typ=SocialType::Instagram)
+            SocialLink(to="https://www.facebook.com/binhtran432k", typ=SocialType::Facebook)
+            SocialLink(to="https://www.youtube.com/@binhtran432k", typ=SocialType::Youtube)
+        }
+    }
+}

src/components/social_link.rs

@@ -0,0 +1,43 @@
+use std::fmt;
+
+use sycamore::prelude::*;
+
+#[component]
+pub fn SocialLink<G: Html>(cx: Scope, SocialProps { to, typ }: SocialProps) -> View<G> {
+    view! {cx,
+        a(href=to,
+            target="_blank",
+            title=format!("Social link of {}", typ.to_string()),
+            class=format!("icon icon--{} colored-icon", typ.to_string()))
+        {
+            span{}
+        }
+    }
+}
+
+#[derive(Clone, Copy)]
+pub enum SocialType {
+    GitHub,
+    Youtube,
+    Instagram,
+    Facebook,
+    LinkedIn,
+}
+
+impl fmt::Display for SocialType {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            SocialType::GitHub => write!(f, "github"),
+            SocialType::Youtube => write!(f, "youtube"),
+            SocialType::Instagram => write!(f, "instagram"),
+            SocialType::Facebook => write!(f, "facebook"),
+            SocialType::LinkedIn => write!(f, "linkedin"),
+        }
+    }
+}
+
+#[derive(Prop)]
+pub struct SocialProps {
+    pub to: &'static str,
+    pub typ: SocialType,
+}

src/error_views.rs

@@ -1,14 +1,16 @@
 use perseus::{errors::ClientError, prelude::*};
 use sycamore::prelude::*;
 
+use crate::layouts::error::{Error, ErrorHead};
+
 fn get_error_page<G: Html>(cx: Scope, title: String, message: String) -> (View<SsrNode>, View<G>) {
     (
         view! { cx,
             title { (title) }
+            ErrorHead
         },
         view! { cx,
-            // Don't worry, there are much better ways of styling in Perseus!
-            div(class="test") {
+            Error {
                 h1 { (title) }
                 p { (message) }
             }
@@ -17,7 +19,7 @@ fn get_error_page<G: Html>(cx: Scope, title: String, message: String) -> (View<S
 }
 
 pub fn get_error_views<G: Html>() -> ErrorViews<G> {
-    ErrorViews::new(|cx, err, _err_info, _err_pos| {
+    ErrorViews::new(|cx, err, _err_info, _err_pos| -> (View<SsrNode>, View<G>) {
         match err {
         ClientError::ServerError { status, message: _ } => match status {
             404 => get_error_page(

src/layouts/error.rs

@@ -0,0 +1,33 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+use crate::components::{header::Header, loader::Loader, social::Social};
+
+#[component]
+pub fn Error<'a, G: Html>(cx: Scope<'a>, ErrorProps { children }: ErrorProps<'a, G>) -> View<G> {
+    let children = children.call(cx);
+
+    view! { cx,
+        Loader
+        main(class="error") {
+            Header
+            Social
+            div(class="error__content") {
+                (children)
+            }
+        }
+    }
+}
+
+#[component]
+pub fn ErrorHead(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        link(rel="stylesheet", href=".perseus/static/styles/layout.css")
+        link(rel="stylesheet", href=".perseus/static/styles/cool-item.css")
+    }
+}
+
+#[derive(Prop)]
+pub struct ErrorProps<'a, G: Html> {
+    pub children: Children<'a, G>,
+}

src/layouts/index.rs

@@ -0,0 +1,27 @@
+use perseus::prelude::*;
+use sycamore::prelude::*;
+
+use crate::components::loader::Loader;
+
+#[component]
+pub fn Index<'a, G: Html>(cx: Scope<'a>, IndexProps { children }: IndexProps<'a, G>) -> View<G> {
+    let children = children.call(cx);
+
+    view! { cx,
+        Loader()
+        (children)
+    }
+}
+
+#[component]
+pub fn IndexHead(cx: Scope) -> View<SsrNode> {
+    view! { cx,
+        link(rel="stylesheet", href=".perseus/static/styles/layout.css")
+        link(rel="stylesheet", href=".perseus/static/styles/cool-item.css")
+    }
+}
+
+#[derive(Prop)]
+pub struct IndexProps<'a, G: Html> {
+    pub children: Children<'a, G>,
+}

src/layouts/mod.rs

@@ -0,0 +1,2 @@
+pub mod index;
+pub mod error;

src/main.rs

@@ -5,13 +5,16 @@ use lol_alloc::{FreeListAllocator, LockedAllocator};
 
 #[cfg(client)]
 #[global_allocator]
-static ALLOCATOR: LockedAllocator<FreeListAllocator> = LockedAllocator::new(FreeListAllocator::new());
+static ALLOCATOR: LockedAllocator<FreeListAllocator> =
+    LockedAllocator::new(FreeListAllocator::new());
 
 mod components;
 mod error_views;
+mod layouts;
 mod templates;
 
 use perseus::prelude::*;
+use std::fs;
 use sycamore::prelude::view;
 
 #[perseus::main_export]
@@ -29,10 +32,13 @@ pub fn main<G: Html>() -> PerseusApp<G> {
                         // fonts
                         link (rel="preconnect", href="https://fonts.googleapis.com")
                         link (rel="preconnect", href="https://fonts.gstatic.com", crossorigin="crossorigin")
-                        link (href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Orbitron:wght@400;700&display=swap", rel="stylesheet")
+                        link (rel="preload", href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Orbitron:wght@400;700&display=swap", as="style", onload="this.onload=null;this.rel='stylesheet'")
                         // styles
-                        link(rel="stylesheet", href=".perseus/static/styles/base.css")
-                        link(rel="stylesheet", href=".perseus/static/styles/loader.css")
+                        style { (fs::read_to_string("static/styles/base.css").expect("Cannot read base.css")) }
+                        // No scripts alternative
+                        noscript {
+                            link (href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Orbitron:wght@400;700&display=swap", rel="stylesheet")
+                        }
                     }
                     body {
                         // Quirk: this creates a wrapper `<div>` around the root `<div>` by necessity

src/templates/index.rs

@@ -1,17 +1,15 @@
 use perseus::prelude::*;
 use sycamore::prelude::*;
 
-use crate::components::layout::Layout;
+use crate::{
+    components::landing::Landing,
+    layouts::index::{Index, IndexHead},
+};
 
 fn index_page<G: Html>(cx: Scope) -> View<G> {
     view! { cx,
-        Layout {
-            h1 { "Welcome to Perseus!" }
-            p {
-                "This is just an example app. Try changing some code inside "
-                code { "src/templates/index.rs" }
-                " and you'll be able to see the results here!"
-            }
+        Index {
+            Landing
         }
     }
 }
@@ -20,6 +18,7 @@ fn index_page<G: Html>(cx: Scope) -> View<G> {
 fn head(cx: Scope) -> View<SsrNode> {
     view! { cx,
         title { "BINH TRAN - Fullstack Developer" }
+        IndexHead
     }
 }
 

static/sass/_variables.scss

@@ -0,0 +1,13 @@
+$green: #6cff8d;
+$red: #FF5555;
+$yellow: #F1FA8C;
+$purple: #BD93F9;
+$cyan: #8BE9FD;
+$orange: #FFB86C;
+$pink: #FF79C6;
+$blue: mix($cyan, blue, $weight: 50%);
+$fg: #F8F8F2;
+$bg: #282A36;
+$green-50: rgba($green, 0.4);
+$fg-50: rgba($fg, 0.4);
+$bg-50: rgba($bg, 50%);