Webpack hook for jsongen, [somewhat broken] UI changes

pages/_app.tsx

@@ -3,5 +3,5 @@ import 'normalize.css';
 import '../styles/global.css';
 
 export default function MyApp({ Component, pageProps }: AppProps) {
-    return <Component {... pageProps} />
+    return <Component {...pageProps} />
 }

pages/about.tsx

@@ -17,7 +17,7 @@ function AboutPage() {
                 Got any questions, concerns, or issues? Feel free to contact me via my email: <code>lambdapaul [at] pm [dot] me</code>.
             </section>
             <section className='block'>
-                <ReactMarkdown>{ReadmeMd.replace(/#{1,5} /g, (s: string) => {return `#${s}`})}</ReactMarkdown>
+                <ReactMarkdown>{ReadmeMd.replace(/#{1,5} /g, (s: string) => { return `#${s}` })}</ReactMarkdown>
             </section>
         </Layout>
     )

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;

pages/playlists.tsx

@@ -12,7 +12,7 @@ function toListItem(record: Record<string, any>): listItem | null {
     if (!record.title)
         return null;
 
-    let children: listItem[]= [];
+    let children: listItem[] = [];
     if (record.children)
         for (const child of record.children) {
             const lChild = toListItem(child);
@@ -23,7 +23,7 @@ function toListItem(record: Record<string, any>): listItem | null {
     return {
         title: record.title,
         url: record.url,
-        children: children.length? children : undefined,
+        children: children.length ? children : undefined,
     };
 }
 
@@ -38,7 +38,7 @@ function mapChild(obj: listItem, level: number) {
 
     let title: ReactElement;
     if (level >= 0 && level <= 3)
-        title = React.createElement(`h${level+3}`, {}, obj.title);
+        title = React.createElement(`h${level + 3}`, {}, obj.title);
     else
         title = React.createElement('strong', {}, obj.title);
 

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;

pages/recommended.tsx

@@ -1,6 +1,6 @@
 import Layout from '../components/layout';
 import rec from '../public/recommended.yaml';
-import {toListItem, mapChild} from '../util/resrec';
+import { toListItem, mapChild } from '../util/resrec';
 
 function Recommended() {
     return (

pages/resources.tsx

@@ -1,6 +1,6 @@
 import Layout from '../components/layout';
 import res from '../public/resources.yaml';
-import {toListItem, mapChild} from '../util/resrec';
+import { toListItem, mapChild } from '../util/resrec';
 
 function Resources() {
     return (