mobile ; heading scroll broken

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

@@ -12,7 +12,28 @@ import { getPostsDirectory } from '@/lib/postsDirectory';
 
 const postsDirectory = getPostsDirectory();
 
+// Function to get file creation date
+function getFileCreationDate(filePath: string): Date {
+  const stats = fs.statSync(filePath);
+  return stats.birthtime ?? stats.mtime;
+}
+
+// Function to generate ID from text (matches frontend logic)
+function generateId(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+}
+
 const renderer = new marked.Renderer();
+
+// Custom heading renderer to add IDs
+renderer.heading = (text, level) => {
+  const id = generateId(text);
+  return `<h${level} id="${id}">${text}</h${level}>`;
+};
+
 renderer.code = (code, infostring, escaped) => {
   const lang = (infostring || '').match(/\S*/)?.[0];
   const highlighted = lang && hljs.getLanguage(lang)
@@ -28,12 +49,6 @@ marked.setOptions({
   renderer,
 });
 
-// Function to get file creation date
-function getFileCreationDate(filePath: string): Date {
-  const stats = fs.statSync(filePath);
-  return stats.birthtime ?? stats.mtime;
-}
-
 async function getPostBySlug(slug: string) {
   const realSlug = slug.replace(/\.md$/, '');
   const fullPath = path.join(postsDirectory, `${realSlug}.md`);