Skip to content

Commit

Permalink
feat: redesign the blog
Browse files Browse the repository at this point in the history
  • Loading branch information
@dancixx
dancixx committed Nov 10, 2024
1 parent e5cd287 commit 6806350
Show file tree
Hide file tree
Showing 6 changed files with 99 additions and 68 deletions.
1 change: 1 addition & 0 deletions Cargo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ katex = { version = "0.4.6", optional = true, default-features = false, features
] }



[features]
hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
ssr = [
Expand Down
6 changes: 3 additions & 3 deletions src/api.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ use leptos::{server, ServerFnError};
use serde::{Deserialize, Serialize};
use surrealdb::sql::Thing;

#[derive(Debug, Clone, Serialize, Deserialize)]
#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
pub struct Author {
pub id: Thing,
pub name: Cow<'static, str>,
Expand All @@ -29,7 +29,7 @@ impl Default for Author {
}
}

#[derive(Debug, Clone, Serialize, Deserialize)]
#[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
pub struct Post {
pub id: Thing,
pub title: Cow<'static, str>,
Expand Down Expand Up @@ -100,7 +100,7 @@ pub async fn select_posts(
.unwrap()
.with_timezone(&Utc);
let naive_date = date_time.date_naive();
let formatted_date = naive_date.format("%b %-d").to_string();
let formatted_date = naive_date.format("%b %-d, %Y").to_string();
post.created_at = formatted_date.into();
});

Expand Down
43 changes: 32 additions & 11 deletions src/app.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ pub fn App() -> impl IntoView {
provide_meta_context();

view! {
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<body class="bg-[#1e1e1e]">
<Stylesheet id="leptos" href="/pkg/blog.css" />
Expand Down Expand Up @@ -73,19 +73,28 @@ pub fn App() -> impl IntoView {
content="https://static.rust-dd.com/rust-dd_custom_bg.png"
/>
<Meta name="twitter:image:alt" content="Rust-DD Framework" />
<Link rel="preconnect" href="https://fonts.googleapis.com" />
<Link rel="preconnect" href="https://fonts.gstatic.com" />
<Link
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
</body>
</html>
<Router fallback=|| {
let mut outside_errors = Errors::default();
outside_errors.insert_with_default_key(AppError::NotFound);
view! { <ErrorTemplate outside_errors /> }.into_view()
}>
<div class="overflow-auto text-white">
<div class="overflow-auto text-white font-poppins">
<header class="fixed top-0 right-0 left-0 z-10 py-6 px-4 md:px-6 bg-[#1e1e1e]/80 backdrop-blur-md">
<div class="container mx-auto max-w-5xl">
<div class="flex flex-row justify-between items-center">
<a href="/" class="text-3xl font-bold">
blog
<div class="flex flex-row justify-between items-center text-white">
<a
href="/"
class="text-3xl font-bold transition-all duration-500 hover:text-[#ffef5c]"
>
rust-dd.com
</a>
<div class="flex flex-row gap-3 items-center h-10">
<a
Expand All @@ -94,37 +103,49 @@ pub fn App() -> impl IntoView {
target="_blank"
aria-label="GitHub"
>
<Icon icon=i::IoLogoGithub class="text-white size-6" />
<Icon
icon=i::IoLogoGithub
class="transition-all duration-500 size-6 hover:text-[#ffef5c]"
/>
</a>
<a
href="https://x.com/rust_dd"
rel="noopener noreferrer"
target="_blank"
aria-label="X"
>
<Icon icon=i::FaXTwitterBrands class="text-white size-6" />
<Icon
icon=i::FaXTwitterBrands
class="transition-all duration-500 size-6 hover:text-[#ffef5c]"
/>
</a>
<a
href="https://www.linkedin.com/company/rust-dd"
rel="noopener noreferrer"
target="_blank"
aria-label="LinkedIn"
>
<Icon icon=i::FaLinkedinBrands class="text-white size-6" />
<Icon
icon=i::FaLinkedinBrands
class="transition-all duration-500 size-6 hover:text-[#ffef5c]"
/>
</a>
<a
href="/rss.xml"
rel="noopener noreferrer"
target="_blank"
aria-label="RSS"
>
<Icon icon=i::IoLogoRss class="text-white size-6" />
<Icon
icon=i::IoLogoRss
class="transition-all duration-500 size-6 hover:text-[#ffef5c]"
/>
</a>
</div>
</div>
</div>
</header>
<main class="container flex flex-col gap-8 py-12 px-4 mx-auto mt-16 max-w-5xl md:px-0">
<main class="container flex flex-col gap-8 px-4 pt-10 pb-14 mx-auto mt-16 max-w-4xl md:px-0">
<Routes>
<Route path="/" view=move || view! { <home::Component /> } />
<Route path="/post/:slug/" view=move || view! { <post::Component /> } />
Expand All @@ -133,7 +154,7 @@ pub fn App() -> impl IntoView {
<footer class="fixed right-0 bottom-0 left-0 z-10 py-4 text-center bg-[#1e1e1e]/80 backdrop-blur-md">
<p class="text-gray-400">
Powered by
<a href="https://github.com/rust-dd" class="hover:underline text-[#ffbd2e]">
<a href="https://github.com/rust-dd" class="hover:underline text-[#ffef5c]">
{"rust-dd"}
</a> {" © "} {Utc::now().year()}
</p>
Expand Down
106 changes: 54 additions & 52 deletions src/home.rs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
use icondata as i;
use leptos::*;
use leptos_icons::Icon;
use leptos_meta::Title;

use crate::api::{select_posts, select_tags};
Expand All @@ -18,6 +20,58 @@ pub fn Component() -> impl IntoView {

view! {
<Title text="Tech Diaries - The Official Rust-DD Developer Blog" />
<Suspense fallback=|| ()>
<div class="gap-4 columns-1 sm:columns-2">
<For
each=move || posts.get().unwrap_or_default()
key=|post| post.id.id.to_string()
children=move |post| {
view! {
<div class="flex flex-col p-3 text-left text-white rounded-lg transition-all duration-500 cursor-pointer break-inside-avoid bg-card hover:text-[#ffef5c]">
<a href=format!("/post/{}", post.slug.as_ref().map_or("", |v| v))>
<div class="flex flex-col gap-1 mb-4">
<p class="text-base font-medium line-clamp-2">
{post.title}
</p>
<p class="italic text-xxs">{post.summary}</p>
</div>
<div class="flex flex-row gap-3 justify-start items-center text-xxs">
<div class="flex flex-row gap-3">
<div class="flex flex-row gap-1 items-center">
<Icon icon=i::IoStopwatch class="size-4" />
<p>{format!("{} min read", post.read_time)}</p>
</div>
<div class="flex flex-row gap-1 items-center">
<Icon icon=i::IoEye class="size-4" />
<p>{format!("{} views", post.total_views)}</p>
</div>
<div class="flex flex-row gap-1 items-center">
<Icon icon=i::IoCalendar class="size-4" />
<p>{post.created_at}</p>
</div>
</div>
<div class="flex flex-row gap-1 items-center">
<Icon icon=i::IoPerson class="size-4" />
<a
href=post.author.github.unwrap_or_default()
target="_blank"
rel="noopener noreferrer"
on:click=move |e| {
e.stop_propagation();
}
class="cursor-pointer hover:underline"
>
<span class="font-semibold">{post.author.name}</span>
</a>
</div>
</div>
</a>
</div>
}
}
/>
</div>
</Suspense>
<Suspense fallback=|| view! { <loader::Component /> }>
<div class="flex flex-row flex-wrap gap-1 px-4 text-xs">
<button
Expand Down Expand Up @@ -77,57 +131,5 @@ pub fn Component() -> impl IntoView {
/>
</div>
</Suspense>
<Suspense fallback=|| ()>
<For
each=move || posts.get().unwrap_or_default()
key=|post| post.id.id.to_string()
children=move |post| {
view! {
<div class="flex flex-col p-6 text-left rounded-lg shadow-sm transition-transform duration-300 cursor-pointer hover:shadow-lg hover:-translate-y-2 bg-card">
<a href=format!("/post/{}", post.slug.as_ref().map_or("", |v| v))>
<div class="flex flex-col-reverse gap-10 mb-4 md:flex-row">
<div class="flex flex-col gap-8">
<p class="text-3xl font-semibold">{post.title}</p>
<p class="mb-2 text-muted-foreground">{post.summary}</p>
</div>
<Show
when={
let post_header = post.header_image.clone();
move || post_header.is_some()
}
fallback=|| ()
>
<img
src=post.header_image.as_ref().unwrap().to_string()
alt=""
class="object-contain w-full h-auto rounded-lg md:w-1/5 aspect-auto"
/>
</Show>
</div>
<div class="flex flex-row gap-3 justify-end items-center text-sm">
<div class="flex flex-row gap-3">
<p>{format!("{} min read", post.read_time)}</p>
<p>{format!("{} views", post.total_views)}</p>
<p>{post.created_at}</p>
</div>
<a
href=post.author.github.unwrap_or_default()
target="_blank"
rel="noopener noreferrer"
on:click=move |e| {
e.stop_propagation();
}
class="cursor-pointer hover:underline"
>
{"by "}
<span class="ml-1 font-semibold">{post.author.name}</span>
</a>
</div>
</a>
</div>
}
}
/>
</Suspense>
}
}
2 changes: 1 addition & 1 deletion src/post.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ pub fn Component() -> impl IntoView {
</div>
</div>
<div
class="my-6 mx-auto max-w-3xl prose prose-h3:text-white prose-h4:text-white prose-code:before:content-none prose-th:text-white prose-li:marker:text-white prose-code:after:content-none prose-pre:bg-transparent prose-pre:rounded-lg prose-pre:p-0 prose-code:text-[#ffbd2e] prose-strong:text-white prose-table:text-white prose-thead:text-white prose-li:text-white prose-ol:text-white prose-h1:text-white prose-h1:text-3xl prose-h2:text-white prose-h2:text-2xl prose-ul:text-white prose-p:text-white prose-a:text-[#ffbd2e]"
class="my-6 mx-auto max-w-3xl prose prose-h3:text-white prose-h4:text-white prose-code:before:content-none prose-th:text-white prose-li:marker:text-white prose-code:after:content-none prose-pre:bg-transparent prose-pre:rounded-lg prose-pre:p-0 prose-code:text-[#ffef5c] prose-strong:text-white prose-table:text-white prose-thead:text-white prose-li:text-white prose-ol:text-white prose-h1:text-white prose-h1:text-3xl prose-h2:text-white prose-h2:text-2xl prose-ul:text-white prose-p:text-white prose-a:text-[#ffef5c]"
inner_html=post.body
/>
</article>
Expand Down
9 changes: 8 additions & 1 deletion tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,14 @@ module.exports = {
files: ["*.html", "./src/**/*.rs"],
},
theme: {
extend: {},
extend: {
fontSize: {
xxs: "0.625rem",
},
fontFamily: {
poppins: ["Poppins", "sans-serif"],
},
},
},
plugins: [require("@tailwindcss/typography")],
};

0 comments on commit 6806350

Please sign in to comment.