Webpack hook for jsongen, [somewhat broken] UI changes

pages/posts/[page].tsx

@@ -3,34 +3,36 @@ import { useRouter } from 'next/router';
 import { getAllPosts, getPost } from '../../util/slug';
 import ReactMarkdown from 'react-markdown';
 import Image from 'next/image';
+import style from '../../styles/post.module.css';
 
-function Post({post} : any) { // eh
+function Post({ post }: any) { // eh
     const router = useRouter();
-    return (
-        <Layout name={post.title} title={post.title} ancestors={[{name:'Posts', path: 'posts'}]}>
-            <section className='block'>
-                <div className="block" style={{position: 'relative', height: '360px', width: '640px'}}>
-                {post.cover ? <Image width={640} height={360} layout="fill" src={`/assets/images/${post.cover}`} alt={`${post.title} Cover Image`} /> : ''}
-
-                </div>
-                <ReactMarkdown>{post.content}</ReactMarkdown>
-            </section>
+    return (<>
+        <Layout name={post.title} title={post.title} ancestors={[{ name: 'Posts', path: 'posts' }]}>
+            <div className={style.imageBlock} style={{ backgroundImage: post.cover ? `url(/assets/images/${post.cover})` : '' }}>
+                <div className={style.spacer}></div>
+                <section className={`${style.block} block`}>
+                    <ReactMarkdown>{post.content}</ReactMarkdown>
+                </section>
+                <div className={style.spacer}></div>
+            </div>
         </Layout>
+    </>
     );
 }
 
-export async function getStaticProps({params}: any) {
+export async function getStaticProps({ params }: any) {
     const post = getPost(params.page);
 
     return {
-        props: {post}
+        props: { post }
     };
 }
 
 export async function getStaticPaths() {
     const posts = getAllPosts();
     return {
-        paths: posts.map(post => {
+        paths: posts.map((post: any) => {
             return {
                 params: {
                     page: post.slug

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;