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;

content/blogs/first-blog.md

@@ -11,3 +11,11 @@ description: Short description
 Insane
 
 test change
+
+# Header 1 test
+
+## Header 2 test
+
+### Header 3 test
+
+#### Header 4 test

styles/globals.css

@@ -2,6 +2,10 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+html {
+  scroll-padding-top: 5rem;
+  scroll-behavior: smooth;
+}
 body {
   @apply dark:bg-gradient-dark dark:text-primary-text bg-slate-100 text-gradient-dark xl:w-2/3 w-11/12 mx-auto;
 }
@@ -27,10 +31,13 @@ pre > div > div > button > svg:hover {
   @apply hover:text-action transition-all ease-in-out duration-100 !important;
 }
 
-h3 > a {
+h1 > a, h2 > a, h3 > a, h4 > a {
-  @apply cursor-pointer relative xl:text-4xl text-2xl text-gray-800 dark:text-primary-text decoration-transparent font-black uppercase !important;
+  @apply cursor-pointer relative text-gray-800 dark:text-primary-text decoration-transparent font-bold !important;
 }
 
-h3 > a:hover::before {
+h1 > a:hover::before,
+h2 > a:hover::before,
+h3 > a:hover::before,
+h4 > a:hover::before {
   @apply content-['#'] absolute -left-8 text-gray-300 dark:text-gray-600;
 }