Add programming-resources; swi->generic Nintendo;

Remove custom html from markdown, clean-up UI (again)

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

pages/about.tsx

@@ -17,7 +17,7 @@ function AboutPage() {
             </section>
             <hr />
             <section className='block'>
-                <p>Source for this site is available at <a className='button link extern blue' href='https://github.com/LambdaPaul/www'>GitHub / LambdaPaul / www</a></p>
+                <p>Source for this site is available at <a className='link' href='https://github.com/LambdaPaul/www'>GitHub / LambdaPaul / www</a></p>
                 <p>Relevant information regarding the source is available on the repo and is also provided below.</p>
             </section>
             <section className='block'>

pages/index.tsx

@@ -9,7 +9,8 @@ import RootInfo from '../public/home.json';
 function Nav() {
     const nav = RootInfo;
     return (
-        <div className='block' style={{ textAlign: 'center' }}>
+        <div className='block'>
+            <h2>Navigation</h2>
             {
                 Object.entries(nav).map(([slug, info], i) => {
                     return <Link key={i} href={slug} className='button green'>{info.title}</Link>
@@ -22,10 +23,10 @@ function Nav() {
 function HomePage() {
     return (
         <Layout>
-            <Nav />
             <QuickLinks />
-            <RecentNotes />
             <RecentPosts />
+            <RecentNotes />
+            <Nav />
         </Layout>
     )
 }

pages/notes/index.tsx

@@ -1,37 +1,55 @@
 import Link from 'next/link';
-import Layout from '../../components/layout';
 
-import date from '../../lib/date';
+import Layout from '../../components/layout';
+import { toRelativeDate } from '../../lib/date';
+
 import NotesInfo from '../../public/notes.json';
 
-function NoteEntry(props: { path: string, note: { title: string, mtime: string } }) {
+function NoteEntry({ note }: { note: { title: string, mtime: string, slug: string } }) {
     return (
         <tr>
             <td style={{ flex: '1 0 50%' }}>
-                <Link href={props.path}>
-                    {props.note.title}
+                <Link href={`/notes/${note.slug}`}>
+                    {note.title}
                 </Link>
             </td>
             <td style={{ fontStyle: 'italic' }}>
-                {props.note.mtime && date.toRelativeDate(new Date(props.note.mtime))}
+                {note.mtime && toRelativeDate(note.mtime)}
             </td>
         </tr>
-
     );
 }
 
 function NotesPage() {
-    const notes = Object.entries(NotesInfo);
+    const notes = Object.entries(NotesInfo)
+        .map(([slug, note]) => {
+            return {
+                slug,
+                title: note.title,
+                mtime: new Date(note.mtime)
+            }
+        })
+        .sort(
+            (a, b) => {
+                return b.mtime.getTime() - a.mtime.getTime();
+            }
+        );
 
     return (
         <Layout>
-            {!notes || notes.length === 0 && <>No notes found</> || <table>
-                <tbody>
-                    {notes.map(([slug, note]: any, i: number) => {
-                        return <NoteEntry path={`/notes/${slug}`} note={note} key={i} />
-                    })}
-                </tbody>
-            </table>}
+            {
+                !notes || notes.length === 0
+                && <>No notes found</>
+                || <table>
+                    <tbody>
+                        {notes.map(
+                            (note: any, i: number) => {
+                                return (<NoteEntry note={note} key={i} />);
+                            }
+                        )}
+                    </tbody>
+                </table>
+            }
         </Layout>
     )
 }

pages/posts/[post].tsx

@@ -3,6 +3,7 @@ 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';
 
 interface Post {
     title: string;
@@ -14,7 +15,43 @@ interface Posts {
     [slug: string]: Post
 }
 
-function Post({ post }: { post: Post & { content: string, cover?: string } }) {
+
+function TimeBlock({ mtime, otime }: { mtime: string, otime: string }) {
+    const ampm = (h: number) => { if (h >= 12) return 'p.m.'; return 'a.m.'; };
+
+    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}</>
+    };
+
+    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}
@@ -27,6 +64,7 @@ function Post({ post }: { post: Post & { content: string, cover?: string } }) {
             <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>

pages/posts/index.tsx

@@ -30,7 +30,7 @@ function Posts() {
                             return <tr key={i} style={{ alignItems: 'center' }}>
                                 <td style={{ display: 'inline-block', textAlign: 'right', fontSize: '0.9rem' }}>
                                     <div style={{ fontStyle: 'italics', fontSize: '.8rem' }}>{
-                                        post.mtime && `Updated ${date.toRelativeDate(new Date(post.mtime))}`
+                                        post.mtime && (post.mtime != post.otime) && `Updated ${date.toRelativeDate(new Date(post.mtime))}`
                                     }</div>
                                     <div>{date.toRelativeDate(new Date(post.otime))}</div>
                                 </td>

pages/sitemap.tsx

@@ -9,11 +9,13 @@ function traverseMap(head: Site, cwd = '', depth = 0) {
     let elements = [];
     for (const [slug, info] of Object.entries(head.subpages)) {
         const path = `${cwd}/${slug}`;
-        const children = (<><ul> {traverseMap(info, path, depth + 1)}</ul></>);
+        const children = (<><dl style={{marginLeft: '3rem'}}> {traverseMap(info, path, depth + 1)}</dl></>);
         elements.push(<>
-            <li>
-                <Link className='button' href={path}>{info.title}</Link> {children}
-            </li>
+            <>
+                <dt>{info.title}</dt>
+                <dd><Link href={path}>{path}</Link></dd>
+                 {children}
+            </>
         </>);
     }
     return elements;
@@ -23,7 +25,7 @@ function SiteMapPage() {
 
 
     return <Layout>
-        <ul>{traverseMap(SiteMap)}</ul>
+        <dl>{traverseMap(SiteMap)}</dl>
     </Layout>;
 }