Webpack hook for jsongen, [somewhat broken] UI changes

.gitignore

@@ -2,4 +2,4 @@ node_modules/
 dist/
 .next/
 .DS_Store
-
+public/posts.json

next.config.js

@@ -6,6 +6,18 @@ module.exports = {
     webpack: (config, options) => {
         config.experiments = { asset: true };
 
+        const { cachePostLinkData } = require('./util/post-cache');
+
+        config.plugins.push(
+            {
+                apply: (compiler) => {
+                    compiler.hooks.initialize.tap('cachePostLinkDataInit', _ => {
+                        cachePostLinkData();
+                    });
+                }
+            }
+        )
+
         config.module.rules.push(
             {
                 test: /\.ya?ml$/,

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) });
+    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}`}>
+                <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>
-                        </div>
+                            </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/posts/[page].tsx

@@ -3,19 +3,21 @@ 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
     const router = useRouter();
-    return (
+    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>
+            <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>
+    </>
     );
 }
 
@@ -30,7 +32,7 @@ export async function getStaticProps({params}: any) {
 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;

public/posts.json

@@ -1 +0,0 @@
-[{"title":"Thoughts on Baba Is You","slug":"thoughts-on-baba-is-you","last_updated":"2021-10-30T00:43:00.000Z"}]

styles/fuzzy.module.css

@@ -11,6 +11,8 @@
 .search {
     display: block;
     width: 100%;
+    max-width: 1018px;
+    margin: 0 auto;
     font-size: 2rem;
     background: linear-gradient(to bottom right, #406b39, #225546) no-repeat center center fixed;
     box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2);
@@ -26,8 +28,9 @@
 }
 
 .results {
+    max-width: 1018px;
     padding: 1rem;
-    margin: 2rem;
+    margin: 2rem auto;
 }
 
 .hyperlink {

styles/global.css

@@ -140,11 +140,6 @@ section {
     margin: 0.5rem;
 }
 
-img {
-    border: 1px solid #FFFFFF;
-    border-radius: 1rem;
-}
-
 .lambda-logo {
     width: 256px;
     height: 256px;

styles/home.module.css

@@ -0,0 +1,22 @@
+.button {
+    padding: 0.2rem 1rem;
+    margin: 0.3rem 0.3rem;
+    background:#1a3a15;
+    color: rgba(255, 255, 255);
+    display: inline-block;
+    text-decoration: none;
+    transition: 100ms ease-in-out all;
+    border: 1px solid #ffffff;
+    border-radius: 0.5rem;
+}
+
+.button:hover {
+    text-decoration: none;
+    background:#099945;
+}
+
+.button:active {
+    text-decoration: none;
+    box-shadow: none;
+    transform: translate(1px, 1px);
+}

styles/post.module.css

@@ -0,0 +1,16 @@
+.imageBlock {
+    position: absolute;
+    right: 0;
+    left: 0;
+    background-size: cover;
+    min-height: 100%;
+    background-attachment: fixed;
+}
+
+.block {
+    background-color: rgba(13, 17, 23, 0.9);
+}
+
+.spacer {
+    height: 5rem;
+}

tsconfig.json

@@ -15,6 +15,6 @@
     "jsx": "preserve",
     "importHelpers": true
   },
-  "include": ["next-env.d.ts", "shims.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "util/post-cache.js", "util/slug.js"],
   "exclude": ["node_modules"]
 }

util/post-cache.d.ts

@@ -0,0 +1 @@
+export default function cachePostLinkData(): any;

util/post-cache.js

@@ -0,0 +1,16 @@
+const fs = require('fs');
+const { getAllPosts } = require('./slug');
+const { join } = require('path');
+
+const publicDir = join(process.cwd(), 'public');
+
+module.exports = {
+    cachePostLinkData: () => {
+        const posts = getAllPosts(['title', 'slug', 'created_at', 'last_updated']);
+        fs.writeFile(`${publicDir}/posts.json`, JSON.stringify(posts), (e) => {
+            if (e)
+                console.error(e);
+        });
+        return posts;
+    }
+}

util/post-cache.ts

@@ -1,14 +0,0 @@
-import fs from 'fs';
-import { getAllPosts } from './slug';
-import { join } from 'path';
-
-const publicDir = join(process.cwd(), 'public');
-
-export default function cachePostLinkData() {
-    const posts = getAllPosts(['title', 'slug', 'last_updated']);
-    fs.writeFile(`${publicDir}/posts.json`, JSON.stringify(posts), (e) => {
-        if (e)
-            console.error(e);
-    });
-    return posts;
-}

util/pretty-date.ts

@@ -0,0 +1,50 @@
+const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+];
+
+const suffixes = ['','st','nd','rd','th'];
+
+export default function prettyDatePrint(date: Date) {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+
+    let tdiff = Math.floor(diff/1000);
+    
+    if (tdiff < 60) {
+        return `${tdiff} seconds ago`;
+    }
+    
+    tdiff = Math.floor(tdiff/60);
+    if (tdiff < 60) {
+        return `${tdiff} minute${tdiff === 1? '' : 's'} ago`;
+    }
+
+    tdiff = Math.floor(tdiff/60);
+    if (tdiff < 24) {
+        return `${tdiff} hour${tdiff === 1? '' : 's'} ago`;
+    }
+    if (tdiff < 48) {
+        return `Yesterday`;
+    }
+
+    const year = date.getFullYear();
+    const month = months[date.getMonth()];
+    const day = date.getDate();
+    let sfx;
+    if (day >= 1 && day <= 3)
+        sfx = suffixes[day];
+    else
+        sfx = suffixes[4];
+    return `${day}${sfx} ${month} ${year}`;
+}

util/slug.d.ts

@@ -0,0 +1,4 @@
+interface Post { slug?: string, rawslug?: string, content?: string, title?: string };
+
+export function getAllPosts(filter: Array<any> = []): Post[];
+export function getPost(rawslug: string, filter: Array<any> = []): Post;

util/slug.js

@@ -1,10 +1,10 @@
-import fs from 'fs'
-import matter from 'gray-matter';
-import { join } from 'path';
+const fs = require('fs');
+const matter = require('gray-matter');
+const { join } = require('path');
 
 const postsDirectory = join(process.cwd(), 'posts');
 
-export function getPost(rawslug: string, filter: Array<any> = []) {
+function getPost(rawslug, filter = []) {
     const slug = rawslug.replace(/\.md$/, '');
     const path = join(postsDirectory, `${slug}.md`);
     const file = fs.readFileSync(path, 'utf-8');
@@ -16,7 +16,7 @@ export function getPost(rawslug: string, filter: Array<any> = []) {
     if (filter.length === 0)
         return { ...data, content, slug, rawslug };
 
-    let post: { slug?: string, rawslug?: string, content?: string, title?: string } | any = {};
+    let post = {};
     for (const [_, entry] of filter.entries()) {
         if (entry === 'slug')
             post[entry] = slug;
@@ -27,8 +27,6 @@ export function getPost(rawslug: string, filter: Array<any> = []) {
         if (entry === 'content')
             post[entry] = content;
 
-
-            
         if (typeof data[entry] !== 'undefined') {
             post[entry] = data[entry]
         }
@@ -36,7 +34,7 @@ export function getPost(rawslug: string, filter: Array<any> = []) {
     return post;
 }
 
-export function getAllPosts(filter: Array<any> = []) {
+function getAllPosts(filter = []) {
     const files = fs.readdirSync(postsDirectory);
 
     return files
@@ -45,3 +43,5 @@ export function getAllPosts(filter: Array<any> = []) {
             return getPost(file, filter)
         });
 }
+
+module.exports = { getAllPosts, getPost };