✨ finish blog
✨ add first blog entry 🎨 rework ui+ux ✨ add freemono
This commit is contained in:
@@ -1,6 +1,8 @@
|
||||
use crate::pages::blog::content;
|
||||
use crate::pages::blog::content::BlogEntry;
|
||||
use crate::pages::blog::content::{BlogEntry, Post};
|
||||
use yew::prelude::*;
|
||||
use crate::pages::blog::authorcard::AuthorCard;
|
||||
use crate::pages::blog::entrycard::EntryCard;
|
||||
|
||||
#[derive(Clone, Debug, Eq, PartialEq, Properties)]
|
||||
pub struct Props {
|
||||
@@ -27,20 +29,42 @@ impl Component for Author {
|
||||
|
||||
fn view(&self, _ctx: &Context<Self>) -> Html {
|
||||
let Self { author } = self;
|
||||
let id = author.id;
|
||||
let cards: Vec<_> = (0..Post::POSTS.len()) // TODO: ... | add var
|
||||
.filter(|&id_offset| {
|
||||
Post::from_id(id_offset as u8)
|
||||
.authors
|
||||
.iter()
|
||||
.any(|id1| *id1 == id)
|
||||
})
|
||||
.map(|id_offset| html! {<EntryCard id={id_offset as u8} />})
|
||||
.collect();
|
||||
html! {
|
||||
<div>
|
||||
<img alt="insert pfp here" loading="eager" src={author.image_url.clone()} />
|
||||
<div style="vertical-align: top !important;">
|
||||
<p style="filter: url(post.bloom.svg#process) !important; color: #B4BEFE !important;">{author.name.clone()}</p>
|
||||
<p style="background-clip: text !important; background-image: linear-gradient(45deg, #5BCEFAFF, #F5A9B8FF, #FFFFFFFF) !important;">
|
||||
{ for author.keywords.iter().map(|tag| html! { <p>{ tag }</p> }) }
|
||||
</p>
|
||||
</div>
|
||||
<hr style="background-color: #B4BEFE60 !important;" />
|
||||
<p>{r#"about me"#}</p>
|
||||
<div>
|
||||
{ author.about.clone() }
|
||||
</div>
|
||||
<div style="
|
||||
display: flex !important;
|
||||
width: 100% !important;
|
||||
flex-direction: column !important;
|
||||
flex-wrap: wrap !important;
|
||||
justify-content: center !important;
|
||||
margin-bottom: 2rem !important;
|
||||
">
|
||||
<h2 style="text-align: center !important;">{ "about me" }</h2>
|
||||
<div style="
|
||||
display: flex !important;
|
||||
width: 100% !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: wrap !important;
|
||||
justify-content: center !important;
|
||||
margin-bottom: 1rem !important;
|
||||
"><AuthorCard {id} /></div>
|
||||
<h2 style="text-align: center !important;">{ "my posts" }</h2>
|
||||
<div style="
|
||||
display: flex !important;
|
||||
width: 100% !important;
|
||||
flex-direction: row !important;
|
||||
flex-wrap: wrap !important;
|
||||
justify-content: center !important;
|
||||
">{ for cards }</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user