Merge pull request #246 from GeekyAnts/staging

Staging

Author: rayan1810

src/new-components/markdown-components/Heading1.tsx

@@ -5,6 +5,6 @@ import { getHeadingMeta } from "../../utils";
 export const Heading1 = ({ children }: any) => {
   const [content, id] = getHeadingMeta(children);
   return (
-    <Heading nativeID="DocSearch-h1" fontSize="3xl" color={useColorModeValue("gray.700", "gray.300")} />
+    <Heading nativeID="h1" fontSize="3xl" color={useColorModeValue("gray.700", "gray.300")} />
   );
 };

src/new-components/markdown-components/Heading2.tsx

@@ -11,13 +11,12 @@ export const Heading2 = ({ children }: any) => {
       {({ isHovered }) => {
         return (
           <HStack alignItems="center" space="2">
-            <Heading display="none" nativeID="DocSearch-h2" >{content}</Heading>
             <Heading
               fontSize="2xl"
               _dark={{ color: "gray.300" }}
               _light={{ color: "gray.700" }}
               // @ts-ignore
-              nativeID={id}
+              nativeID={"h2-" + id}
             >
               {content}
             </Heading>

src/new-components/markdown-components/Heading3.tsx

@@ -10,14 +10,13 @@ export const Heading3 = ({ children }: any) => {
       {({ isHovered }) => {
         return (
           <HStack alignItems="center" space="2">
-            <Heading display="none" nativeID="DocSearch-h3" >{content}</Heading>
             <Heading
               fontSize="xl"
               fontWeight="normal"
               _light={{ color: "gray.700" }}
               _dark={{ color: "gray.300" }}
               // @ts-ignore
-              nativeID={id}
+              nativeID={"h3-" + id}
             >
               {content}
             </Heading>

src/new-components/markdown-components/Heading4.tsx

@@ -6,13 +6,12 @@ export const Heading4 = ({ children }: any) => {
   const [content, id] = getHeadingMeta(children);
   return (
     <>
-      <Heading display="none" nativeID="DocSearch-h4" >{content}</Heading>
       <Heading
         my="2"
         fontSize="md"
         color={useColorModeValue("gray.700", "gray.300")}
         // @ts-ignore
-        nativeID={id}
+        nativeID={"h4" + id}
       >
         {content}
       </Heading>

src/new-components/markdown-components/Heading5.tsx

@@ -6,12 +6,11 @@ export const Heading5 = ({ children }: any) => {
   const [content, id] = getHeadingMeta(children);
   return (
     <>
-      <Heading display="none" nativeID="DocSearch-h5" >{content}</Heading>
       <Heading
         fontSize="md"
         color={useColorModeValue("gray.700", "gray.300")}
         // @ts-ignore
-        nativeID={id}
+        nativeID={"h5" + id}
       >
         {content}
       </Heading>