Refactor, update UI, and add notes

pages/posts/[post].tsx

@@ -1,18 +1,23 @@
 import Layout from '../../components/layout';
-import { getAllPosts, getPost } from '../../util/slug';
+import { getAllPosts, getPost } from '../../lib/slug';
 import ReactMarkdown from 'react-markdown';
 import style from '../../styles/post.module.css';
 
 function Post({ post }: any) { // eh
     return (<>
-        <Layout name={post.title} title={post.title} ancestors={[{ name: 'Posts', path: 'posts' }]}>
-            {post.cover
-                && <div className={style.imageBlock} style={{ backgroundImage: `url(/assets/images/${post.cover})` }}></div>}
+        <Layout removeContainer={true} name={post.title} title={post.title} ancestors={[{ name: 'Posts', path: 'posts' }]}>
+            {<div className={style.imageBlock} 
+                style={{ backgroundImage: 
+                    post.cover ? 
+                        `url(/assets/images/${post.cover})` : 
+                        'linear-gradient(to bottom right, #565a0f, #08432c 15%, rgb(5, 39, 10) 40%, rgb(0, 22, 46) 80%)'
+                }}></div>}
             <div className={style.spacer}></div>
             <section className={`${style.block} block`}>
-                <ReactMarkdown>{post.content}</ReactMarkdown>
+                <div className='container'>
+                    <ReactMarkdown>{post.content}</ReactMarkdown>
+                </div>
             </section>
-            <div className={style.spacer}></div>
         </Layout>
 
     </>
@@ -20,7 +25,7 @@ function Post({ post }: any) { // eh
 }
 
 export async function getStaticProps({ params }: any) {
-    const post = getPost(params.page);
+    const post = getPost(params.post);
 
     return {
         props: { post }
@@ -33,7 +38,7 @@ export async function getStaticPaths() {
         paths: posts.map((post: any) => {
             return {
                 params: {
-                    page: post.slug
+                    post: post.slug
                 }
             }
         }),

pages/posts/index.tsx

@@ -1,39 +1,39 @@
 import Link from 'next/link';
 import Layout from '../../components/layout';
-import date from '../../util/date';
-import { getPostsMeta, PostMeta } from '../../util/slug';
+import date from '../../lib/date';
+import { getPostsMeta, IPostMeta } from '../../lib/slug';
 
-function PostsPage({ postsMeta }: { postsMeta: PostMeta[] }) {
+function PostsPage({ postsMeta }: { postsMeta: IPostMeta[] }) {
     return ( 
         <Layout name='Posts'>
-            <table  className='h5'>
-                <thead>
-                    <tr>
-                        <th style={{flex: '1 0 30%'}}>Name</th>
-                        <th>Created on</th>
-                        <th>Last Updated</th>
-                    </tr>
-                </thead>
+            <table>
                 <tbody>
-                    {postsMeta.map((post: PostMeta, i) => {
-                        return <tr key={i}>
-                            <td style={{flex: '1 0 30%'}}>
-                                <Link href={`/posts/${post.slug}`}>
-                                    {post.title}
+                {
+                    postsMeta.length &&
+                    postsMeta.map((post: IPostMeta, i) => {
+                        return <tr key={i} style={{alignItems: 'center'}}>
+                            <td style={{display: 'inline-block', textAlign: 'right', fontSize: '0.9rem'}}>
+                                <div style={{fontStyle: 'italics', fontSize: '.8rem'}}>{
+                                    post.last_updated && `updated ${date.toRelativeDate(new Date(post.last_updated))}`
+                                }</div>
+                                <div>{ date.toRelativeDate(new Date(post.created_at)) }</div>
+                            </td>
+                            <td style={{
+                                flex: '1 1 60%', 
+                                alignItems: 'center',
+                                fontFamily: `'EB Garamond', 'Garamond', 'Times New Roman', Times, serif`}}>
+                                <Link href={`/posts/${post.slug}`} >
+                                    <a style={{textDecoration: 'none'}}>{post.title}</a>
                                 </Link>
                             </td>
-                            <td>
-                                {date.prettyPrint(new Date(post.created_at))}
-                            </td>
-                            <td>
-                                {
-                                    post.last_updated
-                                    ? date.prettyPrint(new Date(post.last_updated))
-                                    : '-'
-                                }
-                            </td>
                         </tr>
-                    })}
+                    }) || 
+                    <div className='text center'>
+                        <div>**crickets**</div>
+                        <div>No posts found...</div>
+                        <div><Link href='/'><a className='link button green back'>Go Home</a></Link></div>
+                    </div>
+                }
                 </tbody>
             </table>
         </Layout>