Switch over to WebAssembly, Rust and Yew #35
@ -13,12 +13,13 @@ use crate::{
|
|||||||
const DATE_FORMAT: &[FormatItem] =
|
const DATE_FORMAT: &[FormatItem] =
|
||||||
format_description!("[day padding:none] [month repr:short] [year]");
|
format_description!("[day padding:none] [month repr:short] [year]");
|
||||||
|
|
||||||
fn post_card_image(doc_id: DocId, image: &Option<String>) -> Html {
|
fn post_card_image(doc_id: DocId, title: &str, image: &Option<String>) -> Html {
|
||||||
html! {
|
html! {
|
||||||
<Link<Route> classes="unstyled" to={Route::BlogPost { doc_id }}>
|
<Link<Route> classes="unstyled" to={Route::BlogPost { doc_id }}>
|
||||||
<div class="relative w-full h-[240px]">
|
<div class="relative w-full h-[240px]">
|
||||||
if let Some(cover_image) = image {
|
if let Some(cover_image) = image {
|
||||||
<img class="rounded-xl object-cover absolute w-full h-full"
|
<img class="rounded-xl object-cover absolute w-full h-full"
|
||||||
|
alt={title.to_string()}
|
||||||
src={cover_image.clone()} />
|
src={cover_image.clone()} />
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
@ -77,7 +78,9 @@ fn post_card_description(info: &Details<DocId>, tags: &TagsContext) -> Html {
|
|||||||
<div class="flex flex-col gap-4">
|
<div class="flex flex-col gap-4">
|
||||||
<h1 class="text-2xl font-bold">{&info.summary.title}</h1>
|
<h1 class="text-2xl font-bold">{&info.summary.title}</h1>
|
||||||
if let Some(excerpt) = &info.summary.excerpt {
|
if let Some(excerpt) = &info.summary.excerpt {
|
||||||
<p class="text-gray-500 font-text text-xl">{excerpt}</p>
|
<p class="text-gray-500 dark:text-gray-400 font-text text-xl leading-relaxed">
|
||||||
|
{excerpt}
|
||||||
|
</p>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</Link<Route>>
|
</Link<Route>>
|
||||||
@ -99,7 +102,9 @@ pub fn post_card(props: &PostCardProps) -> Html {
|
|||||||
if props.first {
|
if props.first {
|
||||||
html! {
|
html! {
|
||||||
<>
|
<>
|
||||||
{post_card_image(props.post.summary.slug, &props.post.cover_image)}
|
{post_card_image(props.post.summary.slug,
|
||||||
|
&props.post.summary.title,
|
||||||
|
&props.post.cover_image)}
|
||||||
<div class="xl:col-span-2 md:mt-4 lg:mt-0">
|
<div class="xl:col-span-2 md:mt-4 lg:mt-0">
|
||||||
{post_card_description(&props.post, &tags)}
|
{post_card_description(&props.post, &tags)}
|
||||||
</div>
|
</div>
|
||||||
@ -108,7 +113,9 @@ pub fn post_card(props: &PostCardProps) -> Html {
|
|||||||
} else {
|
} else {
|
||||||
html! {
|
html! {
|
||||||
<div class="flex flex-col gap-4 md:mt-20 lg:mt-0">
|
<div class="flex flex-col gap-4 md:mt-20 lg:mt-0">
|
||||||
{post_card_image(props.post.summary.slug, &props.post.cover_image)}
|
{post_card_image(props.post.summary.slug,
|
||||||
|
&props.post.summary.title,
|
||||||
|
&props.post.cover_image)}
|
||||||
{post_card_description(&props.post, &tags)}
|
{post_card_description(&props.post, &tags)}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user