Create PostListItem component

_components/PostListItem.tsx

@@ -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>
+  );
+}

blog/index.tsx

@@ -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 => (
+      {nav.menu("/blog/posts").children.sort(sortPosts).map(post => <PostListItem post={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>
   );
 }