Complete WIP: Architecture refactor.

Mount JSX server side templating for blog posts. Send AppShell conditionally. Maintain support for HMR via HTMLbundles using Bun's native fullstack dev server under an /hmr path. This is only mounted in development and is supported by the onImport Bun plugin. Add DB creation on startup and load pages based on those records.

bun_plugins/onStartup-post-importer.ts

@@ -1,15 +1,28 @@
 import matter from 'gray-matter';
-import { loadMetadata } from "./utils";
+import { marked } from 'marked';
+import { addToDatabase } from "../src/db/index";
 
 // When the server starts, import all the blog post metadata into the database
 // Executed on startup because it's included in <root> ./bunfig.toml
 
+// Only import if not running in production
 (async () => {
+  if (process.env.NODE_ENV === 'production') return;
+
   const glob = new Bun.Glob("**/*.md");
   for await (const file of glob.scan("./content")) {
     const {data, content } = matter(await Bun.file(`./content/${file}`).text());
     const route = `/${file.replace(/\.md$/, "")}`;
-		loadMetadata(route, data);
+
+    // Remove the title from content if it matches the frontmatter title to avoid duplicate H1s
+			let processedContent = content;
+			if (data.title) {
+				const titleHeadingRegex = new RegExp(`^#\\s+${data.title.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*$`, 'm');
+				processedContent = content.replace(titleHeadingRegex, '').trim();
+			}
+
+    const bodyHtml = await marked.parse(processedContent);
+		addToDatabase(route, data, bodyHtml);
   }
 
   console.log('Posts have been imported into db');