Foster Hangdaan
19325bb610
- Added `alt` text to `<img/>` tags. - No longer using a loop since there are not many entries. This also simplifies customizing each item.
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
export const title = "Blog";
|
|
export const description = "Hello, my friend. Stay a while and listen.";
|
|
|
|
export default function({ nav }) {
|
|
const sortPosts = (a,b) => {
|
|
if (a.data.date < b.data.date) {
|
|
return 1;
|
|
} else if (a.data.date > b.data.date) {
|
|
return -1;
|
|
} else {
|
|
return 0;
|
|
}
|
|
};
|
|
|
|
if (!nav.menu("/blog/posts")) {
|
|
return (
|
|
<div className="no-posts">
|
|
<img src="https://static.fosterhangdaan.com/icons/tabler-icons/latest/svg/square-0-filled.svg" className="icon"/>
|
|
<h2>No posts yet.<br/>Check back later.</h2>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
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>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|