dep ver bump; clean-up; minor updates

Signed-off-by: Paul W. <lambdapaul@protonmail.com>

pages/posts/[post].tsx

@@ -3,102 +3,113 @@ import ReactMarkdown from 'react-markdown';
 import style from '../../styles/post.module.css';
 import PostsInfo from '../../public/posts.json';
 import readMarkdown from '../../lib/read-markdown';
-import DateTool from '../../lib/date';
+import DateTool, { toLocaleString } from '../../lib/date';
 
-interface Post {
-    title: string;
-    mtime: string;
-    otime?: string;
+interface IPost {
+	title: string;
+	mtime: string;
+	otime?: string;
 }
 
-interface Posts {
-    [slug: string]: Post
+interface IPosts {
+	[slug: string]: IPost
 }
 
 
 function TimeBlock({ mtime, otime }: { mtime: string, otime: string }) {
-    const ampm = (h: number) => { if (h >= 12) return 'p.m.'; return 'a.m.'; };
+	const ampm = (h: number) => { if (h >= 12) return 'p.m.'; return 'a.m.'; };
 
-    const mdate = new Date(mtime);
-    const odate = new Date(otime);
+	const mdate = new Date(mtime);
+	const odate = new Date(otime);
 
-    const format = (date: Date) => {
-        const day = date.getDay();
-        const ord = <sup>{DateTool.getOrdinalDaySuffix(date.getDay())}</sup>;
-        const month = DateTool.getFullMonth(date.getMonth());
-        const year = date.getFullYear();
-        const hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
-        const minPrefix = date.getMinutes() < 10 ? '0' : '';
-        const minutes = date.getMinutes();
-        const twelveSfx = ampm(date.getHours());
-        return <>{day}{ord} {month} {year} at {hours}:{minPrefix}{minutes} {twelveSfx}</>
-    };
+	const format = (date: Date) => {
+		const day = date.getDay();
+		const ord = <sup>{DateTool.getOrdinalDaySuffix(date.getDay())}</sup>;
+		const month = DateTool.getFullMonth(date.getMonth());
+		const year = date.getFullYear();
+		const hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
+		const minPrefix = date.getMinutes() < 10 ? '0' : '';
+		const minutes = date.getMinutes();
+		const twelveSfx = ampm(date.getHours());
+		return <>{day}{ord} {month} {year} at {hours}:{minPrefix}{minutes} {twelveSfx}</>
+	};
 
-    return (
-        <div style={{ textAlign: 'right', fontSize: '16px', fontFamily: 'Cantarell', fontStyle: 'italic' }}>
-            {
-                mtime ?
-                    <div className='mtime' data-text={mdate.toISOString()}>
-                        Last updated: {format(mdate)}
-                    </div>
-                    :
-                    <></>
-            }
-            <div className='otime'>
-                {format(odate)}
-            </div>
-        </div>
-    );
+	return (
+		<div style={{ textAlign: 'right', fontSize: '16px', fontFamily: 'Cantarell', fontStyle: 'italic' }}>
+			{
+				mtime ?
+					<div className='mtime' data-text={mdate.toISOString()}>
+						Last updated: {format(mdate)}
+					</div>
+					:
+					<></>
+			}
+			<div className='otime'>
+				{format(odate)}
+			</div>
+		</div>
+	);
 }
 
-function Post({ post }: { post: Post & { content: string, cover?: string, otime: string, mtime?: string } }) {
-    return (<>
-        <Layout removeContainer={true}  >
-            {<div className={style.imageBlock}
-                style={{
-                    backgroundImage:
-                        post.cover ?
-                            `url(/assets/images/${post.cover})` :
-                            'linear-gradient(to bottom right, rgb(5, 51, 11), rgb(5, 45, 13) 15%, rgb(5, 39,15) 40%, rgb(0, 30, 16) 80%)'
-                }}></div>}
-            <div className={`${style.spacer} ${post.cover ? style.background : ''}`}></div>
-            <section className={`${style.block} block`}>
-                <div className='container'>
-                    <TimeBlock mtime={post.mtime} otime={post.otime} />
-                    <ReactMarkdown>{post.content}</ReactMarkdown>
-                </div>
-            </section>
-            <div className={style.spacer}></div>
-        </Layout>
+function Post({ post }: { post: IPost & { content: string, cover?: string, otime: string, mtime?: string } }) {
+	if (!post)
+		return <></>;
+	return (<>
+		<Layout removeContainer={true}  >
+			<div className='container'>
+			   { post.otime !== post.mtime &&
+				   <span className={style.time}>
+				   Last updated: {toLocaleString(post.mtime)}
+				   </span>
+			   }
+				<span className={style.time}>
+					{toLocaleString(post.otime)}
+				</span>
+			</div>
+			{<div className={style.imageBlock}
+				style={{
+					backgroundImage:
+						post.cover ?
+							`url(/assets/images/${post.cover})` :
+							'linear-gradient(to bottom right, rgb(5, 51, 11), rgb(5, 45, 13) 15%, rgb(5, 39,15) 40%, rgb(0, 30, 16) 80%)'
+				}}></div>}
+			<div className={`${style.spacer} ${post.cover ? style.background : ''}`}></div>
+			<section className={`${style.block} block`}>
+				<div className='container'>
+					<ReactMarkdown>{post.content}</ReactMarkdown>
+				</div>
+			</section>
+			<div className={style.spacer}></div>
+		</Layout>
 
-    </>
-    );
+	</>
+	);
 }
 
 export async function getStaticProps({ params }: any) {
-    const postsInfo: Posts = PostsInfo;
-    const post: Post = postsInfo[params.post];
-    return {
-        props: {
-            post: {
-                ...post,
-                content: await readMarkdown('posts', params.post, true)
-            }
-        }
-    }
+	const postsInfo: IPosts = PostsInfo;
+	const post: IPost = postsInfo[params.post];
+	return {
+		props: {
+			post: {
+				...post,
+				content: await readMarkdown('posts', params.post, true)
+			}
+		}
+	}
 }
 
 export async function getStaticPaths() {
-    return {
-        paths: Object.keys(PostsInfo).map((post: string) => {
-            return {
-                params: {
-                    post
-                }
-            }
-        }),
-        fallback: false
-    };
+	return {
+		paths: Object.keys(PostsInfo).map((post: string) => {
+			return {
+				params: {
+					post
+				}
+			}
+		}),
+		fallback: false
+	};
 }
 
 

pages/posts/index.tsx

@@ -4,49 +4,47 @@ import date from '../../lib/date';
 import PostsInfo from '../../public/posts.json';
 
 function PostsPage() {
-    return (
-        <Layout>
-            {Object.keys(PostsInfo).length && <Posts /> || <NoPosts />}
-        </Layout>
-    )
+	return (
+		<Layout>
+			{Object.keys(PostsInfo).length && <Posts /> || <NoPosts />}
+		</Layout>
+	)
 }
 
 function NoPosts() {
-    return (<><div className='text center'>
-        <div>**crickets**</div>
-        <div>No posts found...</div>
-        <div><Link href='/' className='link button green back'>Go Home</Link></div>
-    </div></>);
+	return (<div className='text center'>
+		<div>**crickets**</div>
+		<div>No posts found...</div>
+		<div><Link href='/' className='link button green back'>Go Home</Link></div>
+	</div>);
 }
 
 function Posts() {
-    const posts = Object.entries(PostsInfo);
-    return (
-        <>
-            <table>
-                <tbody>
-                    {
-                        posts.map(([slug, post]: [string, any]) => {
-                            return <tr key={slug} style={{ alignItems: 'center' }}>
-                                <td style={{ display: 'inline-block', textAlign: 'right', fontSize: '0.9rem' }}>
-                                    <div style={{ fontStyle: 'italics', fontSize: '.8rem' }}>{
-                                        post.mtime && (post.mtime != post.otime) && `Updated ${date.toRelativeDate(new Date(post.mtime))}`
-                                    }</div>
-                                    <div>{date.toRelativeDate(new Date(post.otime))}</div>
-                                </td>
-                                <td style={{
-                                    flex: '1 1 60%',
-                                    alignItems: 'center',
-                                    fontFamily: `'EB Garamond', 'Garamond', 'Times New Roman', Times, serif`
-                                }}>
-                                    <Link href={`/posts/${slug}`} style={{ textDecoration: 'none' }}>{post.title}</Link>
-                                </td>
-                            </tr>
-                        })}
-                </tbody>
-            </table>
-        </>
-    )
+	const posts = Object.entries(PostsInfo);
+	return (
+			<table>
+				<tbody>
+					{
+						posts.map(([slug, post]: [string, any]) => {
+							return (<tr key={slug} style={{ alignItems: 'center' }}>
+								<td style={{ display: 'inline-block', textAlign: 'right', fontSize: '0.9rem' }}>
+									<div style={{ fontStyle: 'italics', fontSize: '.8rem' }}>{
+										post.mtime && (post.mtime != post.otime) && `Updated ${date.toRelativeDate(new Date(post.mtime))}`
+									}</div>
+									<div>{date.toRelativeDate(new Date(post.otime))}</div>
+								</td>
+								<td style={{
+									fontFamily: `'EB Garamond', 'Garamond', 'Times New Roman', Times, serif`
+									, fontSize: '1.25rem'
+								}}>
+									<Link href={`/posts/${slug}`} style={{ textDecoration: 'none' }}>{post.title}</Link>
+								</td>
+							</tr>)
+						})
+					}
+				</tbody>
+			</table>
+	)
 }