refactor(website): generate blog navigation from post front matter

Instead of writing out the blog navigation by hand, generate the nav by
reading the front matter of each blog post. This will make writing
future blog posts easier and less bug-prone.

Author: strager

website/public/blog/bug-journey/index.ejs.html

@@ -2,6 +2,7 @@
 "title": "Sometimes it *is* a compiler bug",
 "linkLabelHTML": "Sometimes it <em>is</em> a compiler bug",
 "description": "My journey in finding and fixing a bug in a C++ toolchain",
+"navTitle": "Compiler bug",
 "blogDate": "2022-05-25T21:04:02-07:00"
 }--->
 

website/public/blog/cpp-vs-rust-build-times/index.ejs.html

@@ -1,6 +1,7 @@
 <!---{
 "title": "Is coding in Rust as bad as in C++?",
 "description": "A practical comparison of build and test speed between C++ and Rust.",
+"navTitle": "C++ vs Rust",
 "image": "/blog/cpp-vs-rust-build-times/cpp-vs-rust.jpg",
 "blogDate": "2023-01-05T21:32:37-08:00"
 }--->

website/public/blog/index.mjs

@@ -42,6 +42,9 @@ export async function loadBlogPostsAsync() {
       if (typeof meta.blogDate === "undefined") {
         throw new Error(`Missing blogDate in front matter of ${indexPath}`);
       }
+      if (typeof meta.navTitle === "undefined") {
+        throw new Error(`Missing navTitle in front matter of ${indexPath}`);
+      }
       return {
         dir: dir.name,
         meta: meta,

website/public/blog/show-js-errors-neovim-macos/index.ejs.html

@@ -1,6 +1,7 @@
 <!---{
 "title": "Show JavaScript errors in Neovim on macOS",
 "description": "How to install Homebrew, Neovim, and quick-lint-js on macOS to show JavaScript syntax errors while editing",
+"navTitle": "Neovim for JS",
 "image": "/blog/show-js-errors-neovim-macos/neovim-demo.png",
 "blogDate": "2022-02-16T21:48:38-08:00"
 }--->

website/public/blog/syntax-errors-2021/index.ejs.html

@@ -1,6 +1,7 @@
 <!---{
 "title": "JavaScript syntax errors compared (2021)",
 "description": "Comparison of errors produced by different JavaScript parsers",
+"navTitle": "JS errors",
 "blogDate": "2021-12-11T17:19:10-08:00"
 }--->
 

website/public/blog/version-1.0/index.ejs.html

@@ -2,6 +2,7 @@
 "title": "Faster, easier, friendlier: how quick-lint-js will take over ESLint",
 "linkLabelHTML": "Release: version 1.0",
 "description": "Faster, easier, friendlier: how quick-lint-js will take over ESLint",
+"navTitle": "Release 1.0",
 "blogDate": "2021-12-13T19:27:37-08:00"
 }--->
 

website/public/blog/version-2.0/index.ejs.html

@@ -2,6 +2,7 @@
 "title": "Reacts rocks with quick-lint-js",
 "linkLabelHTML": "Release: version 2.0",
 "description": "We are proud to announce version 2.0 of quick-lint-js!",
+"navTitle": "Release 2.0",
 "blogDate": "2022-02-04T21:43:20-08:00"
 }--->
 

website/public/common-nav.ejs.html

@@ -235,38 +235,7 @@
     {
       uri: "/blog/",
       title: "Blog",
-      subpages: [
-        {
-          uri: "/blog/syntax-errors-2021/",
-          title: "JS errors",
-          hidden: true
-        },
-        {
-          uri: "/blog/version-1.0/",
-          title: "Release 1.0",
-          hidden: true
-        },
-        {
-          uri: "/blog/version-2.0/",
-          title: "Release 2.0",
-          hidden: true
-        },
-        {
-          uri: "/blog/show-js-errors-neovim-macos/",
-          title: "Neovim for JS",
-          hidden: true
-        },
-        {
-          uri: "/blog/bug-journey/",
-          title: "Compiler bug",
-          hidden: true
-        },
-        {
-          uri: "/blog/cpp-vs-rust-build-times/",
-          title: "C++ vs Rust",
-          hidden: true
-        },
-      ]
+      subpages: await loadBlogSubpagesIfNeededAsync(),
     },
   ];
 
@@ -293,6 +262,20 @@
     throw new Error("Malformed page or subpage: " + JSON.stringify(subpage));
   }
 
+  async function loadBlogSubpagesIfNeededAsync() {
+    if (currentURI.startsWith("/blog/")) {
+      let { loadBlogPostsAsync } = await importFileAsync("./blog/index.mjs");
+      let blogPosts = await loadBlogPostsAsync();
+      return blogPosts.map(post => ({
+        uri: `/blog/${post.dir}/`,
+        title: post.meta.navTitle ?? post.meta.title,
+        hidden: true,
+      }));
+    } else {
+      return [];
+    }
+  }
+
   function isOnPageOrSubpage(page) {
     return page.uri === currentURI || page.subpages.some(subpage => isOnSubpage(subpage));
   }