website/blog/index.tsx

export const title = "Blog";
export const description = "Hello, stranger. Stay a while and listen.";

export default function({ nav, comp }) {
  const { PostListItem } = comp;

  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/coffee.svg" className="icon" alt=""/>
        <h2>No posts yet</h2>
        <p>Foster is on a coffee break.<br/>Check back later.</p>
      </div>
    );
  }

  return (
    <ul className="post-list">
      {nav.menu("/blog/posts").children.sort(sortPosts).map((post,index) => <PostListItem key={index} post={post}/>)}
    </ul>
  );
}