foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Create PostListItem component

Browse source
This commit is contained in:
Foster Hangdaan 2023-08-26 21:26:19 -04:00
parent 7fde2ae97c
commit a0d64dbe0c
Signed by: foster
GPG key ID: E48D7F49A852F112
2 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
_components/PostListItem.tsx Normal file
View file

@ -0,0 +1,16 @@
interface Props {
post: any;
}
export default function(props: Props) {
return (
<li className="post-list-item">
<a href={props.post.data.url} className="post-list-title">{props.post.data.title}</a>
<time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(props.post.data.date)}</time>
<ul className="tag-list">
{props.post.data.tags.map(tag => <li className="tag">{tag}</li>)}
</ul>
<p className="post-list-description">{props.post.data.description}</p>
</li>
);
}

15
blog/index.tsx
View file

@ -1,7 +1,9 @@
export const title = "Blog";
export const description = "Hello, stranger. Stay a while and listen.";
export default function({ nav }) {
export default function({ nav, comp }) {
const { PostListItem } = comp;
const sortPosts = (a,b) => {
if (a.data.date < b.data.date) {
return 1;
@ -24,16 +26,7 @@ export default function({ nav }) {
return (
<ul className="post-list">
{nav.menu("/blog/posts").children.sort(sortPosts).map(post => (
<li className="post-list-item">
<a href={post.data.url} className="post-list-title">{post.data.title}</a>
<time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(post.data.date)}</time>
<ul className="tag-list">
{post.data.tags.map(tag => <li className="tag">{tag}</li>)}
</ul>
<p className="post-list-description">{post.data.description}</p>
</li>
))}
{nav.menu("/blog/posts").children.sort(sortPosts).map(post => <PostListItem post={post}/>)}
</ul>
);
}