Blog archive now displays dates

Author: simshadows

.pnp.cjs

@@ -27,6 +27,7 @@
     "@types/katex": "^0.16.7",
     "@types/node": "^22.13.10",
     "astro": "5.5.2",
+    "dayjs": "^1.11.13",
     "hast-util-from-html": "2.0.3",
     "hast-util-to-text": "^4.0.2",
     "katex": "^0.16.21",

.yarn/cache/dayjs-npm-1.11.13-d478bb9479-7374d63ab1.zip

@@ -0,0 +1,60 @@
+/*
+ * Filename: timezoneless-date.ts
+ * Author:   simshadows <contact@simshadows.com>
+ * License:  GNU Affero General Public License v3.0 or later (AGPL-3.0-or-later)
+ *
+ * A wrapper class to enforce the use of a pre-existing date implementation
+ * as a simple timezoneless calendar date.
+ */
+
+import dayjs from "dayjs";
+//import utc from "dayjs/plugin/utc";
+
+//dayjs.extend(utc);
+
+const iso8601DateRegex = /^[0-9]{4}-[01][0-9]-[0-3][0-9]$/;
+
+export class TimezonelessDate {
+    private __d: dayjs.Dayjs;
+
+    /*
+     * y is the calendar year
+     * m is an integer 0-11
+     * d is an integer 1-31
+     */
+    constructor(y: number, m: number, d: number) {
+        this.__d = dayjs(0).year(y).month(m).date(d);
+    }
+
+    toString(): string {
+        return this.toISOString();
+    }
+    toISOString(): string {
+        return this.__d.format("YYYY-MM-DD");
+    }
+    toDebugString(): string {
+        return this.__d.toISOString();
+    }
+
+    isAfter(other: TimezonelessDate): boolean {
+        return this.__d.isAfter(other.__d, "date");
+    }
+
+    static parseISODate(s: string): TimezonelessDate {
+        if (s.length !== 10) {
+            throw new Error(`Failed to parse string as a date. Must be exactly 10 characters. Instead got: ${s}`);
+        }
+        if (!iso8601DateRegex.test(s)) {
+            throw new Error(`Failed to parse string as a date. String must be an ISO8601 date. Instead got: ${s}`);
+        }
+        const subStrs = s.split("-");
+        const y = subStrs[0];
+        const m = subStrs[1];
+        const d = subStrs[2];
+        if ((subStrs.length !== 3) || (!y) || (!m) || (!d)) {
+            throw new Error("Expected three integers.");
+        }
+        return new TimezonelessDate(Number(y), Number(m) - 1, Number(d));
+    }
+}
+

package.json

@@ -2,7 +2,7 @@
 import {getCollection, render} from "astro:content";
 import Layout from "@layouts/GeneralLayout.astro";
 
-import {makeFrontmatter} from "@helpers/frontmatter";
+import {postToFrontmatter} from "./_common/post-to-frontmatter";
 
 export async function getStaticPaths() {
     const posts = await getCollection("blogPosts");
@@ -15,12 +15,9 @@ export async function getStaticPaths() {
 const {post} = Astro.props;
 const {Content} = await render(post);
 
-const frontmatter = makeFrontmatter({
-    description: post.data.title || "(no description)",
-    ...post.data,
-});
+const bfrontmatter = postToFrontmatter(post);
 ---
 
-<Layout {...frontmatter}>
+<Layout {...bfrontmatter.frontmatter}>
     <Content/>
 </Layout>

src/helpers/timezoneless-date.ts

@@ -0,0 +1,51 @@
+/*
+ * Filename: post-to-frontmatter.ts
+ * Author:   simshadows <contact@simshadows.com>
+ */
+
+import {type CollectionEntry} from "astro:content";
+
+import {TimezonelessDate} from "@helpers/timezoneless-date";
+
+import {
+    type Frontmatter,
+    makeFrontmatter,
+} from "@helpers/frontmatter";
+
+type ThisCollectionEntry = CollectionEntry<"blogPosts">;
+
+export interface BlogFrontmatter {
+    date: TimezonelessDate;
+    post: ThisCollectionEntry;
+    frontmatter: Frontmatter;
+};
+
+function filenameErr(filename: string): Error {
+    filename; // TODO: I should actually make the error message specific about
+              //       what the format expectations are.
+    return new Error(`Invalid blog post filename '${filename}'. Filenames must start with an ISO8601 date like '2025-03-26-foobar.md'`);
+}
+
+export function postToFrontmatter(post: ThisCollectionEntry): BlogFrontmatter {
+    const idMandatoryPrefix = post.id.slice(0, 11);
+
+    if (
+        post.id.length < 12
+        || idMandatoryPrefix.length !== 11
+        || idMandatoryPrefix.slice(-1) !== "-"
+    ) {
+        throw filenameErr(post.id);
+    }
+
+    const date = TimezonelessDate.parseISODate(idMandatoryPrefix.slice(0, 10));
+    const description = post.data.title || "(no description)";
+
+    return {
+        date,
+        post,
+        frontmatter: makeFrontmatter({
+            description,
+            ...post.data,
+        }),
+    };
+}

src/pages/blog/[...slug].astro

@@ -4,7 +4,11 @@ import {getCollection} from "astro:content";
 
 import {fm} from "@helpers/frontmatter";
 
-const allPosts = await getCollection("blogPosts");
+import {postToFrontmatter} from "./_common/post-to-frontmatter";
+
+const allPosts = (await getCollection("blogPosts")).map(postToFrontmatter);
+
+// TODO: Sort posts by date
 
 export const frontmatter = fm({
     title: "Sim's Blog Archive",
@@ -17,15 +21,11 @@ export const frontmatter = fm({
 
 <h1>Blog Archive</h1>
 
-<p><em>This is an early WIP focused on experimenting with ways to manage my blog posts before migrating <a href="https://blog.simshadows.com/">my old blog</a> to this website.</em></p>
-
-<ul>
-    {
-        allPosts.map((post) => (
-            <li><a href={`/blog/${post.id}/`}>{post.data.title}</a></li>
-        ))
-    }
-</ul>
+{
+    allPosts.map((post) => (
+    <p>{post.date.toISOString()} &raquo; <a href={`/blog/${post.post.id}/`}>{post.frontmatter.title}</a></p>
+    ))
+}
 
 </Layout>
 

src/pages/blog/_common/post-to-frontmatter.ts

@@ -4,7 +4,9 @@ import {getCollection} from "astro:content";
 
 import {fm} from "@helpers/frontmatter";
 
-const allPosts = await getCollection("blogPosts");
+import {postToFrontmatter} from "./_common/post-to-frontmatter";
+
+const allPosts = (await getCollection("blogPosts")).map(postToFrontmatter);
 
 export const frontmatter = fm({
     title: "Sim's Blog",
@@ -24,7 +26,7 @@ export const frontmatter = fm({
 <ul>
     {
         allPosts.map((post) => (
-            <li><a href={`/blog/${post.id}/`}>{post.data.title}</a></li>
+            <li><a href={`/blog/${post.post.id}/`}>{post.frontmatter.title}</a></li>
         ))
     }
 </ul>

src/pages/blog/archive.astro

@@ -2569,6 +2569,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dayjs@npm:^1.11.13":
+  version: 1.11.13
+  resolution: "dayjs@npm:1.11.13"
+  checksum: 10/7374d63ab179b8d909a95e74790def25c8986e329ae989840bacb8b1888be116d20e1c4eee75a69ea0dfbae13172efc50ef85619d304ee7ca3c01d5878b704f5
+  languageName: node
+  linkType: hard
+
 "debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.3.1, debug@npm:^4.3.3, debug@npm:^4.3.4":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
@@ -5841,6 +5848,7 @@ __metadata:
     "@types/katex": "npm:^0.16.7"
     "@types/node": "npm:^22.13.10"
     astro: "npm:5.5.2"
+    dayjs: "npm:^1.11.13"
     hast-util-from-html: "npm:2.0.3"
     hast-util-to-text: "npm:^4.0.2"
     katex: "npm:^0.16.21"