Add last updated to note pages

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;

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>

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;
+}