[Perf] posts page

zzhack-stack · Aug 29, 2024 · f840df0 · f840df0
1 parent 2e8160d
commit f840df0
Show file tree

Hide file tree

Showing 21 changed files with 358 additions and 773 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/api/src/utils/helpers.rs b/api/src/utils/helpers.rs
@@ -0,0 +1,9 @@
+pub fn parse_load_many_result<T: Clone, U: Clone>(result: Vec<(T, Vec<U>)>) -> Vec<U> {
+    if result.len() == 0 {
+        vec![]
+    } else {
+        let (_, inner) = result[0].clone();
+
+        inner
+    }
+}
diff --git a/app/Cargo.toml b/app/Cargo.toml
@@ -15,7 +15,7 @@ web-sys = "0.3.69"
 yew = { version = "0.21.0", features = ["hydration", "ssr"]}
 yew-router = "0.18.0"
 shared = {path = "../shared"}
-reqwest = { version = "0.12.5", features = ["json"] }
+reqwest = { version = "0.12.5", features = ["json", "socks"] }
 wasm-bindgen = "0.2.92"
 wasm-bindgen-macro = "0.2.92"
 site_config = { path = "../site_config" }

diff --git a/app/assets/Icon/Dark/GitHub.svg b/app/assets/Icon/Dark/GitHub.svg
diff --git a/app/assets/Vector.svg b/app/assets/Vector.svg
diff --git a/app/assets/zzhack-logo.light.png b/app/assets/zzhack-logo.light.png
diff --git a/app/src/components.rs b/app/src/components.rs
@@ -1,3 +1,5 @@
 pub mod load_more;
 pub mod nav;
 pub mod post_item;
+pub mod tag;
+pub mod theme_img;
diff --git a/app/src/components/nav.rs b/app/src/components/nav.rs
@@ -1,8 +1,7 @@
-use shared::site_config::{Config, NavConfig};
-// use shared::site_config::NavConfig;
+use shared::site_config::NavConfig;
 use yew::prelude::*;
 
-use crate::utils::site_config::get_config;
+use crate::{components::theme_img::ThemeImg, icons::GitHubIcon};
 
 #[derive(Properties, PartialEq)]
 pub struct NavProps {
@@ -14,15 +13,20 @@ pub fn Nav() -> Html {
     let site_config = site_config::get_site_config();
     let rendered_nav_items = site_config.nav.iter().map(|config| {
         html! {
-            <a class="navbar-item" href={config.url.clone()}>{&config.text}</a>
+            <a class="font-semibold ml-5 text-sm" href={config.url.clone()}>{&config.text}</a>
         }
     });
 
     html! {
         <nav class="navbar" role="navigation" aria-label="main navigation">
-            <div class="navbar-menu">
-                <div class="navbar-start">
+            <div class="flex items-center justify-between	">
+                <div>
+                    <ThemeImg class="h-8" src="/assets/zzhack-logo.png" alt="logo" />
+                </div>
+                <div class="navbar-start flex items-center">
                     {for rendered_nav_items}
+                    <div class="w-px h-3 bg-black mx-5" />
+                    <GitHubIcon color="" height="17" width="16" />
                 </div>
             </div>
         </nav>

diff --git a/app/src/components/post_item.rs b/app/src/components/post_item.rs
@@ -1,8 +1,7 @@
 use shared::post::Post;
 use yew::prelude::*;
-use yew_router::components::Link;
 
-use crate::routes::Routes;
+use crate::components::tag::Tag;
 
 #[derive(Properties, PartialEq)]
 pub struct PostItemProps {
@@ -12,13 +11,25 @@ pub struct PostItemProps {
 #[function_component]
 pub fn PostItem(props: &PostItemProps) -> Html {
     let post = &props.post;
+    let tags = post
+        .tags
+        .iter()
+        .map(|tag| {
+            html! {
+                <Tag>{tag.text.clone()}</Tag>
+            }
+        })
+        .collect::<Vec<Html>>();
 
     html! {
         <a href={format!("/post/{}", post.id)}>
-            <div>
-                <h2>{&post.title}</h2>
-                <p>{&post.spoiler}</p>
-                <p>{&post.created_at}</p>
+            <div class="my-5">
+                <div class="text-xl font-bold text-black">
+                    {&post.title}
+                    <div>{tags}</div>
+                </div>
+                <div class="text-black-700 text-sm mt-0.5 mb-1">{&post.spoiler}</div>
+                <div class="text-xs text-black-500">{&post.created_at}</div>
             </div>
         </a>
     }

diff --git a/app/src/components/tag.rs b/app/src/components/tag.rs
@@ -0,0 +1,13 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+pub struct TagProps {
+    pub children: Html,
+}
+
+#[function_component]
+pub fn Tag(props: &TagProps) -> Html {
+    html! {
+        <span class="pixel-badge mr-2 px-2 py-0.5 text-xs text-black-500 text-white bg-black">{props.children.clone()}</span>
+    }
+}
diff --git a/app/src/components/theme_img.rs b/app/src/components/theme_img.rs
@@ -0,0 +1,30 @@
+use crate::utils::theme::{parse_theme_icon, with_class_prop};
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+pub struct ThemeImgProps {
+    pub src: String,
+    #[prop_or_default]
+    pub class: Option<String>,
+    pub alt: String,
+}
+
+#[function_component]
+pub fn ThemeImg(props: &ThemeImgProps) -> Html {
+    let theme_icon = parse_theme_icon(&props.src);
+
+    html! {
+        <>
+            <img
+                alt={props.alt.to_string()}
+                class={with_class_prop("hidden dark:block", &props.class)}
+                src={theme_icon.dark}
+            />
+            <img
+                alt={props.alt.to_string()}
+                class={with_class_prop("block dark:hidden", &props.class)}
+                src={theme_icon.light}
+            />
+        </>
+    }
+}
diff --git a/app/src/icons.rs b/app/src/icons.rs
@@ -0,0 +1,18 @@
+use yew::prelude::*;
+
+#[derive(Properties, PartialEq)]
+pub struct IconProps {
+    #[prop_or(AttrValue::Static("none"))]
+    pub color: AttrValue,
+    pub height: String,
+    pub width: String,
+}
+
+#[function_component]
+pub fn GitHubIcon(props: &IconProps) -> Html {
+    html! {
+            <svg width={props.width.clone()} height={props.height.clone()} fill={props.color.clone()} xmlns="http://www.w3.org/2000/svg">
+         <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25683 0C3.69101 0 0 3.64386 0 8.15181C0 11.7553 2.36496 14.8055 5.64579 15.8851C6.05597 15.9662 6.20622 15.7097 6.20622 15.4939C6.20622 15.3049 6.1927 14.6571 6.1927 13.9822C3.89585 14.4681 3.41756 13.0104 3.41756 13.0104C3.04844 12.0657 2.50152 11.8228 2.50152 11.8228C1.74976 11.3235 2.55628 11.3235 2.55628 11.3235C3.39018 11.3775 3.82774 12.1602 3.82774 12.1602C4.56581 13.4018 5.75514 13.051 6.2336 12.835C6.30188 12.3086 6.52075 11.9442 6.75314 11.7418C4.92124 11.5529 2.99385 10.8511 2.99385 7.71985C2.99385 6.82909 3.32173 6.10032 3.84126 5.53353C3.75929 5.33113 3.47215 4.4942 3.9234 3.37405C3.9234 3.37405 4.62057 3.15807 6.19253 4.21081C6.86555 4.03237 7.55962 3.9416 8.25683 3.94084C8.95399 3.94084 9.66468 4.03541 10.3209 4.21081C11.8931 3.15807 12.5902 3.37405 12.5902 3.37405C13.0415 4.4942 12.7542 5.33113 12.6722 5.53353C13.2054 6.10032 13.5198 6.82909 13.5198 7.71985C13.5198 10.8511 11.5924 11.5393 9.74682 11.7418C10.0477 11.9982 10.3073 12.484 10.3073 13.2534C10.3073 14.3465 10.2937 15.2239 10.2937 15.4937C10.2937 15.7097 10.4442 15.9662 10.8542 15.8852C14.135 14.8053 16.5 11.7553 16.5 8.15181C16.5135 3.64386 12.8089 0 8.25683 0Z" fill="black"/>
+        </svg>
+    }
+}
diff --git a/app/src/lib.rs b/app/src/lib.rs
@@ -1,5 +1,6 @@
 mod components;
 mod http;
+mod icons;
 mod pages;
 pub mod portal;
 mod routes;

diff --git a/app/src/pages/posts.rs b/app/src/pages/posts.rs
@@ -68,7 +68,7 @@ pub fn Content() -> HtmlResult {
     });
 
     Ok(html! {
-        <div onclick={Callback::from(|_| {info!("World")})}>
+        <div class="mt-12">
             {for rendered_posts}
             if *has_load_more {
                 <LoadMore onload={handle_load_more_click} />

diff --git a/app/src/portal.rs b/app/src/portal.rs
@@ -17,9 +17,11 @@ pub struct BrowserAppProps {
 pub fn BrowserApp() -> Html {
     html! {
         <BrowserRouter>
-            <Nav />
-            <main class="p-4 h-full w-full">
-                <Switch<Routes> render={switch} />
+            <main class="p-4 h-full w-full flex justify-center">
+                <div class="h-full w-[768px]">
+                    <Nav />
+                    <Switch<Routes> render={switch} />
+                </div>
             </main>
             <footer class="footer">
                 <div class="content has-text-centered">
@@ -52,9 +54,11 @@ pub fn ServerApp(props: &ServerAppProps) -> Html {
 
     html! {
         <Router history={history}>
-            <Nav />
-            <main class="p-4 h-full w-full">
-                <Switch<Routes> render={switch} />
+            <main class="p-4 h-full w-full flex justify-center">
+                <div class="h-full w-[768px]">
+                    <Nav />
+                    <Switch<Routes> render={switch} />
+                </div>
             </main>
             <footer class="footer">
                 <div class="content has-text-centered">

diff --git a/app/src/utils.rs b/app/src/utils.rs
@@ -1,2 +1,3 @@
 pub mod inner_html;
 pub mod site_config;
+pub mod theme;
diff --git a/app/src/utils/theme.rs b/app/src/utils/theme.rs
@@ -0,0 +1,39 @@
+use std::{ffi::OsStr, path::Path};
+
+#[derive(Clone)]
+pub struct ThemeIcon {
+    pub dark: String,
+    pub light: String,
+}
+
+// A theme icon format looks like:
+// filename.[light|dark].extension
+// raw_icon_path is part of theme icon path which without theme suffix:
+// filename.extension
+// this function will parse raw_icon_path to theme_icon_path:
+// {
+//   dark: "filename.dark.extension",
+//   light: "filename.light.extension
+// }
+pub fn parse_theme_icon(raw_icon_path: &str) -> ThemeIcon {
+    let raw_path = Path::new(raw_icon_path);
+    let file_path_without_extension = raw_path.with_extension("");
+    let file_stem_with_path = file_path_without_extension.to_str().unwrap();
+    let extension = raw_path.extension().and_then(OsStr::to_str).unwrap();
+    let create_theme_icon =
+        |theme: &'static str| format!("{file_stem_with_path}.{theme}.{extension}");
+
+    ThemeIcon {
+        light: create_theme_icon("light"),
+        dark: create_theme_icon("dark"),
+    }
+}
+
+// In some scenarios, we need to append a class to the existing class in components,
+// this util function help concat the class prop to existing class
+pub fn with_class_prop(raw_class: &str, class_prop: &Option<String>) -> String {
+    match class_prop {
+        Some(class_prop_value) => format!("{raw_class} {class_prop_value}"),
+        None => raw_class.to_string(),
+    }
+}
diff --git a/entry/index.html b/entry/index.html
@@ -7,6 +7,7 @@
     <link rel="icon" type="image/png" href="public/logo.png" />
     <link data-trunk rel="copy-dir" href="public">
     <link data-trunk rel="copy-dir" href="../posts">
+    <link data-trunk rel="copy-dir" href="../app/assets">
     <link data-trunk rel="css" href="styles/output.css" />
     <title>zzhack</title>
   </head>

diff --git a/entry/styles/input.css b/entry/styles/input.css
@@ -2,16 +2,40 @@
 @tailwind components;
 @tailwind utilities;
 
-body, html {
-  height: 100%;
+@layer base {
+  body,
+  html {
+    height: 100%;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
+@layer components {
+  .pixel-badge {
+    box-shadow:
+      1px 0 red,
+      2px 0 green,
+      3px 0 blue;
+
+    position: relative;
+  }
+
+  .pixel-badge::before {
+    content: "";
+    width: 100%;
+    height: 5px;
+    background: red;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 }