headings and scroll fix

components/PostHeader.tsx

@@ -20,10 +20,10 @@ export const PostHeader = ({
     frontMatter as BasicArticleProps;
 
   return (
-    <div>
+    <div className="flex items-start gap-2 flex-col">
       <div className="lg:text-5xl text-3xl font-bold mt-2">{title}</div>
       <div className="mt-2 text-gray-600dark:text-gray-400">{description}</div>
-      <div className="mt-2 mb-10 flex lg:flex-row flex-col gap-2 items-center">
+      <div className="mt-2 mb-10 flex lg:flex-row flex-col gap-2 items-start">
         {author && (
           <div className="font-medium ">
             By{" "}

components/StyledMarkdown.tsx

@@ -12,6 +12,7 @@ import { Components } from "react-markdown";
 import { generateSlug } from "../utils/general";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { useEffect } from "react";
 SyntaxHighlighter.registerLanguage("tsx", tsx);
 SyntaxHighlighter.registerLanguage("typescript", typescript);
 SyntaxHighlighter.registerLanguage("scss", scss);
@@ -21,6 +22,44 @@ SyntaxHighlighter.registerLanguage("json", json);
 
 export const StyledMarkdown = ({ html }: { html: string }) => {
   const MarkdownComponents: Components = {
+    h1: (props: any) => {
+      const arr = props.children;
+      let heading = "";
+
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i]?.type !== undefined) {
+          for (let j = 0; j < arr[i].props.children.length; j++) {
+            heading += arr[i]?.props?.children[0];
+          }
+        } else heading += arr[i];
+      }
+
+      const slug = generateSlug(heading);
+      return (
+        <h1 id={slug}>
+          <a href={`#${slug}`} {...props}></a>
+        </h1>
+      );
+    },
+    h2: (props: any) => {
+      const arr = props.children;
+      let heading = "";
+
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i]?.type !== undefined) {
+          for (let j = 0; j < arr[i].props.children.length; j++) {
+            heading += arr[i]?.props?.children[0];
+          }
+        } else heading += arr[i];
+      }
+
+      const slug = generateSlug(heading);
+      return (
+        <h2 id={slug}>
+          <a href={`#${slug}`} {...props}></a>
+        </h2>
+      );
+    },
     h3: (props: any) => {
       const arr = props.children;
       let heading = "";
@@ -40,6 +79,25 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
         </h3>
       );
     },
+    h4: (props: any) => {
+      const arr = props.children;
+      let heading = "";
+
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i]?.type !== undefined) {
+          for (let j = 0; j < arr[i].props.children.length; j++) {
+            heading += arr[i]?.props?.children[0];
+          }
+        } else heading += arr[i];
+      }
+
+      const slug = generateSlug(heading);
+      return (
+        <h4 id={slug}>
+          <a href={`#${slug}`} {...props}></a>
+        </h4>
+      );
+    },
     code({ node, inline, className, ...props }: any) {
       const match = /language-(\w+)/.exec(className || "");
       const hasMeta = node?.data?.meta;