From 7500465542042b6a3923cb000f4899699bb87800 Mon Sep 17 00:00:00 2001
From: Paul W <lambdapaul@protonmail.com>
Date: Thu, 10 Oct 2024 01:58:33 -0400
Subject: [PATCH] Add last updated to note pages

---
 lib/date.ts            | 18 +++++++++++++++++-
 notes/steam-deck.md    |  2 +-
 pages/notes/[note].tsx |  6 ++++++
 styles/note.module.css |  7 +++++++
 4 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 styles/note.module.css

diff --git a/lib/date.ts b/lib/date.ts
index 2f1fdb7..6e19e6b 100644
--- a/lib/date.ts
+++ b/lib/date.ts
@@ -14,6 +14,16 @@ const months = [
     'December'
 ];
 
+function get12HourTime(pdate: Date | string): string {
+    const date = (typeof pdate === 'string') ? new Date(pdate) : pdate;
+    if (date.getHours() > 12)
+        return `${date.getHours() - 12}:${date.getMinutes()} PM`;
+    else if (date.getHours() === 0) 
+        return `12:${date.getMinutes()} AM`;
+    return `${date.getHours()}:${date.getMinutes()} AM`;
+
+}
+
 function toHumanReadableDate(date: Date | string, disable?: { year?: boolean, month?: boolean, day?: boolean }) {
     const oDate = (typeof date === 'string') ? new Date(date) : date;
 
@@ -29,7 +39,7 @@ function toHumanReadableDate(date: Date | string, disable?: { year?: boolean, mo
 }
 
 
-export function getOrdinalDaySuffix(day: number) {
+export function getOrdinalDaySuffix(day: number): string {
     switch (day) {
         case 1:
         case 21:
@@ -46,6 +56,11 @@ export function getOrdinalDaySuffix(day: number) {
     }
 }
 
+export function toLocaleString(pdate: Date | string): string {
+    const date = (typeof pDate === 'string') ? new Date(pdate) : pdate;
+    return `${toHumanReadableDate(date)}, ${get12HourTime(date)}`;
+}
+
 export function toRelativeDate(date: Date | string): string {
     const oDate = (typeof date === 'string') ? new Date(date) : date;
 
@@ -100,6 +115,7 @@ const DateTool = {
     getFullMonth,
     isValid,
     getOrdinalDaySuffix,
+    toLocaleString,
 };
 
 export default DateTool;
diff --git a/notes/steam-deck.md b/notes/steam-deck.md
index ada97f8..4014c41 100644
--- a/notes/steam-deck.md
+++ b/notes/steam-deck.md
@@ -45,7 +45,7 @@ MimeType=text/plain; # $XDG_PATH contains the paths used to fetch icons, extensi
       menu. 
     - Sample code for the electron app (assuming you can build linux binaries
       for the target platform):
-      ```javascript
+    ```javascript
       // sample code to get started
       const { app, BrowserWindow } = require('electron');
       app
diff --git a/pages/notes/[note].tsx b/pages/notes/[note].tsx
index 8cd2fcf..c67065c 100644
--- a/pages/notes/[note].tsx
+++ b/pages/notes/[note].tsx
@@ -8,8 +8,11 @@ import remarkGithubAdmonitionsToDirectives from 'remark-github-admonitions-to-di
 
 import Layout from '../../components/layout';
 import readMarkdown from '../../lib/read-markdown';
+import { toLocaleString } from '../../lib/date';
 import NotesInfo from '../../public/notes.json';
 
+import style from '../../styles/note.module.css';
+
 interface Note {
     title: string,
     mtime: string,
@@ -50,6 +53,9 @@ function Markdown({ content }: any) {
 function Note({ note }: any) {
     return (<>
         <Layout >
+            <span className={style['last-updated']}>
+                Last updated: {toLocaleString(note.mtime)}
+            </span>
             <section className='block'>
                 <Markdown content={note.content} />
             </section>
diff --git a/styles/note.module.css b/styles/note.module.css
new file mode 100644
index 0000000..5555c37
--- /dev/null
+++ b/styles/note.module.css
@@ -0,0 +1,7 @@
+.last-updated {
+    text-align: right;
+    display: block;
+    font-style: italic;
+    font-size: 1rem;
+    margin: 0.5rem 0.75rem;
+}