[www][blog] Eliminate codegen completely

packages/www/next.config.js

@@ -1,5 +1,57 @@
 // @ts-check
 
+const fs = require("fs");
+const path = require("path");
+
+function parseMarkdownTitle(/** @type {string} */ source) {
+  const firstLine = source.split("\n")[0];
+  if (firstLine == null) {
+    throw new Error("No title.");
+  }
+  const START = 'export const title = "';
+  if (!firstLine.startsWith(START) || !firstLine.endsWith('";')) {
+    throw new Error(`Invalid title line:\n${firstLine}`);
+  }
+  return firstLine.substring(START.length, firstLine.length - 2).trim();
+}
+
+function computeAllMedatada() {
+  const BLOG_POSTS_ROOT = path.join("src", "app", "blog", "(blog-posts)");
+
+  /** @type {import("./src/lib/metadata").BlogPostMetadata[]} */
+  const allMetadata = [];
+  for (const year of fs.readdirSync(BLOG_POSTS_ROOT)) {
+    if (year === "layout.tsx") {
+      continue;
+    }
+    for (const month of fs.readdirSync(path.join(BLOG_POSTS_ROOT, year))) {
+      for (const date of fs.readdirSync(path.join(BLOG_POSTS_ROOT, year, month))) {
+        for (const titleSlug of fs.readdirSync(path.join(BLOG_POSTS_ROOT, year, month, date))) {
+          const fullPath = path.join(BLOG_POSTS_ROOT, year, month, date, titleSlug, "page.mdx");
+          const content = fs.readFileSync(fullPath).toString();
+          try {
+            const title = parseMarkdownTitle(content);
+            allMetadata.push({ title, year, month, date, titleSlug });
+          } catch (error) {
+            throw new Error(`Failed to parse ${fullPath}, error: ${error}`);
+          }
+        }
+      }
+    }
+  }
+
+  allMetadata.sort((a, b) => {
+    let c = b.year.localeCompare(a.year);
+    if (c !== 0) return c;
+    c = b.month.localeCompare(a.month);
+    if (c !== 0) return c;
+    c = b.date.localeCompare(a.date);
+    return c;
+  });
+
+  return allMetadata;
+}
+
 const withMDX = require("@next/mdx")({
   extension: /\.mdx?$/,
   options: {
@@ -10,8 +62,10 @@ const withMDX = require("@next/mdx")({
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  pageExtensions: ["tsx", "mdx"],
   experimental: { mdxRs: true },
   output: "export",
+  env: { ALL_BLOG_POST_METADATA: JSON.stringify(computeAllMedatada()) },
   typescript: { ignoreBuildErrors: true },
 };
 

packages/www/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "2.0.0",
-    "@next/mdx": "^13.5.3",
+    "@next/mdx": "^13.5.4",
     "@types/mdx": "^2.0.8",
     "autoprefixer": "^10.4.16",
     "dev-sam-theme": "^0.0.1",

packages/www/blog/1970-01-01-welcome-to-my-blog.mdx → packages/www/src/app/blog/(blog-posts)/1970/01/01/welcome-to-my-blog/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Welcome to My Blog!";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 This is the zeroth post in my blog. Since the content of the post might change when I migrate the
 blog from one place to another, I choose to set the time to be `1970-01-01`.

packages/www/blog/2016-12-30-nerd-pride.mdx → packages/www/src/app/blog/(blog-posts)/2016/12/30/nerd-pride/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Nerd Pride";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 On the evening of December 8, 2016, exactly on 5:01 PM in Eastern Standard Time, the photons of
 Cornell Engineering acceptance letter struck my eyes. For me, it was a confirmation, a confirmation

packages/www/blog/2017-05-31-project-defcon-1.mdx → packages/www/src/app/blog/(blog-posts)/2017/05/31/project-defcon-1/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Project DEFCON 1: A Confidential Data Storage System";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 ## 1.Introduction
 

packages/www/blog/2018-06-15-sampl-alpha-design-choices.mdx → packages/www/src/app/blog/(blog-posts)/2018/06/15/sampl-alpha-design-choices/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Design Choice of SAMPL - Written After the First Alpha Release";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 ## Beginning
 

packages/www/blog/2018-06-19-sampl-fun-ref-mistake-fix.mdx → packages/www/src/app/blog/(blog-posts)/2018/06/19/sampl-fun-ref-mistake-fix/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Function Reference in SAMPL - A Design Mistake and the Fix";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 ## Background
 

packages/www/blog/2018-08-27-cw-turing-complete.mdx → packages/www/src/app/blog/(blog-posts)/2018/08/27/cw-turing-complete/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Critter World is Turing Complete - A Not-So-Rigorous Proof";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 Critter World is Cornell's CS 2112's Final Project. It is a simulated hexagon world where critters,
 controled by programs, can move, eat, mate, bud, attack, etc. The programming language is very

packages/www/blog/2018-12-31-cs-in-high-schools.mdx → packages/www/src/app/blog/(blog-posts)/2018/12/31/cs-in-high-schools/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Computer Science in High Schools";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 This year, I got an intern with a resume that did not mention my high school's CS project with a
 single word. Therefore, at this point, either success or failure in my high school CS career does

packages/www/blog/2019-01-12-samlang-alpha-design-choices.mdx → packages/www/src/app/blog/(blog-posts)/2019/01/12/samlang-alpha-design-choices/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Design Choice of samlang in Alpha";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 ## Background
 

packages/www/blog/2020-01-07-my-decade-in-review.mdx → packages/www/src/app/blog/(blog-posts)/2020/01/07/my-decade-in-review/page.mdx

@@ -1,4 +1,6 @@
 export const title = "My Decade in Review";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 Following the lead of React and JavaScript god [Dan Abramov](https://overreacted.io/), I decided to
 also publish my decade in review blog post.

packages/www/blog/2020-01-09-implement-autocomplete.mdx → packages/www/src/app/blog/(blog-posts)/2020/01/09/implement-autocomplete/page.mdx

@@ -1,4 +1,6 @@
 export const title = "How to Implement Autocomplete";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 Implement autocomplete in 79 lines of code. Actually, it's not that easy.
 

packages/www/blog/2020-05-14-one-year-as-dev-lead.mdx → packages/www/src/app/blog/(blog-posts)/2020/05/14/one-year-as-dev-lead/page.mdx

@@ -1,4 +1,6 @@
 export const title = "One Year as Developer Lead";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 Almost a year ago, I started to perform developer lead responsibilities at
 [Cornell DTI](https://www.cornelldti.org). My first major task was to grade part of developers at

packages/www/blog/2020-05-17-samlang-in-browser.mdx → packages/www/src/app/blog/(blog-posts)/2020/05/17/samlang-in-browser/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Making samlang Run in Browsers";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 ## Background
 

packages/www/blog/2020-08-30-samlang-ts-rewrite.mdx → packages/www/src/app/blog/(blog-posts)/2020/08/30/samlang-ts-rewrite/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Rewriting samlang in TypeScript";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 A lot has changed since my [last blog post](/blog/2020/05/17/samlang-in-browser) on my effort to make
 samlang run in browsers. The samlang demo site has been merged into the samlang documentation site

packages/www/blog/2021-01-24-samlang-llvm-backend.mdx → packages/www/src/app/blog/(blog-posts)/2021/01/24/samlang-llvm-backend/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Supporting the LLVM Backend for samlang";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 LLVM is a collection of compiler toolchain that allows you to target any instruction set from any
 source-level programming language. Once the source code has been lowered to LLVM IR, the LLVM

packages/www/blog/2021-02-16-squash-and-merge.mdx → packages/www/src/app/blog/(blog-posts)/2021/02/16/squash-and-merge/page.mdx

@@ -1,4 +1,6 @@
 export const title = "The Case for Squash and Merge";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 There are several things I have very passionate opinions on, like whether opening braces `{` should
 be on a new line, etc. _(Answer: NO NO NO!)_ Merging in a pull request using squash and merge is

packages/www/blog/2021-10-29-samlang-wasm-backend.mdx → packages/www/src/app/blog/(blog-posts)/2021/10/29/samlang-wasm-backend/page.mdx

@@ -1,5 +1,6 @@
 export const title = "WebAssembly Backend for samlang";
-export const ogImage = "/blog/2021-10-29-samlang-wasm-backend/wasm.png";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title, "/blog/2021-10-29-samlang-wasm-backend/wasm.png");
 
 Since the release of Apple M1 MacBook, a ticking bomb starts: eventually there will be a day that I
 cannot run the compiled samlang code anymore, if samlang compiler does not change. samlang must

packages/www/blog/2022-01-02-courseplan-review.mdx → packages/www/src/app/blog/(blog-posts)/2022/01/02/courseplan-review/page.mdx

@@ -1,5 +1,6 @@
 export const title = "CoursePlan: A Unique Design & Tech Initiative";
-export const ogImage = "/blog/2022-01-02-courseplan-review/two-graphs-theory.png";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title, "/blog/2022-01-02-courseplan-review/two-graphs-theory.png");
 
 ## Introduction
 

packages/www/blog/2022-01-28-why-useless-code.mdx → packages/www/src/app/blog/(blog-posts)/2022/01/28/why-useless-code/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Why I Write Useless Code";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 There are a lot of ways you can categorize code, but in this blog post, I will mostly focus on their
 usefulness. Some code can be useful, or designed to be useful but actually useless. You might

packages/www/blog/2022-09-05-bounded-qualification.mdx → packages/www/src/app/blog/(blog-posts)/2022/09/05/bounded-qualification/page.mdx

@@ -1,5 +1,6 @@
 export const title = "Bounded Qualification in samlang";
-export const ogImage = "/blog/2022-09-05-bounded-qualification/bounded-qualification.png";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title, "/blog/2022-09-05-bounded-qualification/bounded-qualification.png");
 
 ## Introduction
 

packages/www/blog/2023-01-08-samlang-rust-rewrite.mdx → packages/www/src/app/blog/(blog-posts)/2023/01/08/samlang-rust-rewrite/page.mdx

@@ -1,5 +1,6 @@
 export const title = "Rewriting samlang in Rust";
-export const ogImage = "/blog/2023-01-08-samlang-in-rust/optimization.png";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title, "/blog/2023-01-08-samlang-in-rust/optimization.png");
 
 ## Motivation
 

packages/www/blog/2023-09-11-life-of-high-school-cs-club-member.mdx → packages/www/src/app/blog/(blog-posts)/2023/09/11/life-of-high-school-cs-club-member/page.mdx

@@ -1,4 +1,6 @@
 export const title = "Life of a High School CS Club President, from a SWE's Perspective";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 Imagine yourself being the president of the [CS club at my high school](https://computerization.io).
 You are now in grade 11 and have just taken over the presidency from the seniors. You have grand

packages/www/blog/2023-09-23-samlang-perf-opt.mdx → packages/www/src/app/blog/(blog-posts)/2023/09/23/samlang-perf-opt/page.mdx

@@ -1,5 +1,6 @@
 export const title = "Performance Optimization on the samlang Compiler";
-export const ogImage = "/blog/2023-09-23-samlang-perf-opt/comparison.png";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title, "/blog/2023-09-23-samlang-perf-opt/comparison.png");
 
 With a long-planned Rust rewrite of samlang finally done at the start of 2023, I decided to focus this year on fixing a lot of rough edges of the language, including syntax, semantics, and IDE services. Nine months later, I managed to tick quite a few items in the continuously growing [checklist](https://github.com/SamChou19815/samlang/issues/921).
 

packages/www/blog/2023-10-01-what-happens-if-react-is-eager.mdx → packages/www/src/app/blog/(blog-posts)/2023/10/01/what-happens-if-react-is-eager/page.mdx

@@ -1,4 +1,6 @@
 export const title = "What Will Happen if React Evaluates JSX Eagerly?";
+import blogPostPageMetadata from '../../../../../../../lib/blog-post-page-metadata';
+export const metadata = blogPostPageMetadata(title);
 
 TLDR: Absolute Chaos
 

packages/www/src/app/blog/(blog-posts)/layout.tsx

@@ -0,0 +1,14 @@
+import BlogDocumentWrapper from "../../../lib/BlogDocumentWrapper";
+import BlogPostItemContextAware from "../../../lib/BlogPostItemContextAware";
+
+export default function BlogPostPageLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <BlogDocumentWrapper>
+      <div className="flex flex-row flex-wrap justify-center">
+        <main className="w-full">
+          <BlogPostItemContextAware>{children}</BlogPostItemContextAware>
+        </main>
+      </div>
+    </BlogDocumentWrapper>
+  );
+}

packages/www/src/app/blog/page.tsx

@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
+import Link from "next/link";
 import BlogDocumentWrapper from "../../lib/BlogDocumentWrapper";
 import BlogPostItem from "../../lib/BlogPostItem";
-import { BLOG_TITLE } from "../../lib/blog-constants.mjs";
-import allMetadata from "../../lib/metadata";
+import { BLOG_TITLE } from "../../lib/blog-constants";
+import { allMetadata, permalinkFromMetadata } from "../../lib/metadata";
 
 export const metadata: Metadata = {
   title: BLOG_TITLE,
@@ -21,9 +22,16 @@ export default async function BlogListPage(): Promise<JSX.Element> {
     <BlogDocumentWrapper>
       <div className="flex flex-row flex-wrap justify-center">
         <main className="w-full">
-          {allMetadata.map((metadata) => (
-            <BlogPostItem key={metadata.permalink} metadata={metadata} truncated={true} />
-          ))}
+          {allMetadata.map((metadata) => {
+            const permalink = permalinkFromMetadata(metadata);
+            return (
+              <BlogPostItem
+                key={permalink}
+                title={<Link href={permalink}>{metadata.title}</Link>}
+                formattedDate={`${metadata.year}-${metadata.month}-${metadata.date}`}
+              />
+            );
+          })}
         </main>
       </div>
     </BlogDocumentWrapper>

packages/www/src/lib/BlogDocumentWrapper.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import NavBar from "./NavBar";
-import { BLOG_TITLE } from "./blog-constants.mjs";
+import { BLOG_TITLE } from "./blog-constants";
 
 export default function BlogDocumentWrapper({ children }: { children: ReactNode }): JSX.Element {
   return (