Webpack hook for jsongen, [somewhat broken] UI changes

pages/posts/index.tsx

@@ -1,31 +1,30 @@
 import Link from 'next/link';
 import React from 'react';
 import Layout from '../../components/layout';
-import Pages from '../../public/pages.json';
-import cachePostLinkData from '../../util/post-cache';
-
+import Posts from '../../public/posts.json';
+import prettyDatePrint from '../../util/pretty-date';
 
 function HomePage({posts}: any) {
-    Pages.sort((x, y) => { return ('' + x.title).localeCompare(y.title) });
+    Posts.sort((x, y) => { return x.title.localeCompare(y.title) });
+    // todo: create a table-like interface
     return (
         <Layout name='Posts'>
-            {posts.map((post: any) => {
+            <>
+            <section className='h4 block'>
+            Post Name <span style={{float: 'right', margin: 'auto 1rem'}}> Created on </span> <span style={{float: 'right', margin: 'auto 1rem'}}>Last Updated </span> 
+            </section>
+            {Posts.map((post: any) => {
                 return <section key='' className='h5 block'>
                     <Link href={`posts/${post.slug}`}>
                         {post.title}
                     </Link>
-                    <div>[{ (new Date(post.last_updated)).toLocaleString()}]</div>
+                    <span className='h6' style={{float: 'right', margin: 'auto 1rem'}}>{prettyDatePrint(new Date(post.created_at))}</span>
+                    {post.last_updated ? <span className='h6' style={{float: 'right', margin: 'auto 1rem'}}>{prettyDatePrint(new Date(post.last_updated))}</span> : ''}
                 </section>
             })}
+            </>
         </Layout>
     )
 }
 
-export async function getStaticProps() {
-
-    return {
-        props: {posts: cachePostLinkData()}
-    };
-}
-
 export default HomePage;