Update dependencies in package.json and package-lock.json; remove test posts and update welcome post with new content and formatting details.

src/app/api/posts/[slug]/route.ts

@@ -4,6 +4,10 @@ import path from 'path';
 import matter from 'gray-matter';
 import { remark } from 'remark';
 import html from 'remark-html';
+import gfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import rehypeRaw from 'rehype-raw';
+import rehypeStringify from 'rehype-stringify';
 
 const postsDirectory = path.join(process.cwd(), 'posts');
 
@@ -21,7 +25,10 @@ async function getPostBySlug(slug: string) {
   const createdAt = getFileCreationDate(fullPath);
 
   const processedContent = await remark()
-    .use(html)
+    .use(gfm)
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeRaw)
+    .use(rehypeStringify)
     .process(content);
 
   return {

src/app/api/posts/route.ts

@@ -3,7 +3,10 @@ import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
 import { remark } from 'remark';
-import html from 'remark-html';
+import gfm from 'remark-gfm';
+import remarkRehype from 'remark-rehype';
+import rehypeRaw from 'rehype-raw';
+import rehypeStringify from 'rehype-stringify';
 
 const postsDirectory = path.join(process.cwd(), 'posts');
 
@@ -25,7 +28,12 @@ async function getPostByPath(filePath: string, relPath: string) {
   const fileContents = fs.readFileSync(filePath, 'utf8');
   const { data, content } = matter(fileContents);
   const createdAt = getFileCreationDate(filePath);
-  const processedContent = await remark().use(html).process(content);
+  const processedContent = await remark()
+    .use(gfm)
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeRaw)
+    .use(rehypeStringify)
+    .process(content);
   return {
     type: 'post',
     slug: relPath.replace(/\.md$/, ''),

src/lib/markdown.ts

@@ -3,8 +3,12 @@ import path from 'path';
 import matter from 'gray-matter';
 import { remark } from 'remark';
 import html from 'remark-html';
+import gfm from 'remark-gfm';
 import chokidar from 'chokidar';
 import type { FSWatcher } from 'chokidar';
+import remarkRehype from 'remark-rehype';
+import rehypeRaw from 'rehype-raw';
+import rehypeStringify from 'rehype-stringify';
 
 export interface Post {
   slug: string;
@@ -32,7 +36,10 @@ export async function getPostBySlug(slug: string): Promise<Post> {
   const createdAt = getFileCreationDate(fullPath);
 
   const processedContent = await remark()
-    .use(html)
+    .use(gfm)
+    .use(remarkRehype, { allowDangerousHtml: true })
+    .use(rehypeRaw)
+    .use(rehypeStringify)
     .process(content);
 
   return {