Webpack hook for jsongen, [somewhat broken] UI changes

pages/index.tsx

@@ -2,46 +2,44 @@ 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 style from '../styles/home.module.css';
+import prettyDatePrint from '../util/pretty-date';
 
-
-function HomePage({posts}: any) {
-    Pages.sort((x, y) => { return ('' + x.title).localeCompare(y.title) });
+function HomePage({ posts }: any) {
+    Pages.sort((x, y) => { return (x.title).localeCompare(y.title) });
     return (
         <Layout name='' title='PaulW.XYZ'>
             <section className='block'>
                 <div className='h2'>Welcome!</div>
                 {
                     Pages.map(obj => {
-                        return <div key='' className='h5'>
+                        return <span key={obj.link}>
                             <Link href={obj.link}>
-                                <a>{obj.title}{obj.link.match('^http*')? ' ↗' : ''}</a>
+                                <a className={style.button}>{obj.title}</a>
                             </Link>
-                        </div>
+                        </span>
                     })
                 }
             </section>
             <section className='block'>
-                <div className='h2'>Posts</div>
-                <div>
-                    {posts?.map((post: any) => {
-                        return <div key={post.slug} className='h5'>
-                            [{ (new Date(post.last_updated)).toLocaleString()}] <Link href={`posts/${post.slug}`}>
-                                {post.title}
-                            </Link>
-                        </div>
+                <table style={{ width: '100%' }}>
+                    <th className='h2'>Posts</th> <th>Posted</th>
+                    {Posts?.map((post: any) => {
+                        return <tr key={post.slug}>
+                            <td className='h5'>
+                                <Link href={`posts/${post.slug}`}>
+                                    {post.title}
+                                </Link>
+                            </td>
+                            <td>{prettyDatePrint(new Date(post.created_at))}</td>
+
+                        </tr>
                     })}
-                </div>
+                </table>
             </section>
         </Layout>
     )
 }
 
-export async function getStaticProps() {
-    // make this webpack plugin
-    return {
-        props: {posts: cachePostLinkData()} 
-    };
-}
-
 export default HomePage;