feat: heading ids

Author: rayan1810

src/new-components/MainContent.tsx

@@ -124,7 +124,7 @@ const SubMainContent2 = React.memo(({ props }: any) => {
         {/*  */}
         <VStack>
           {!isLatestVersionSlug(activeVersion) && <Badge rounded="4" flexDir="row" alignSelf='flex-start'>version: {activeVersion}</Badge>}
-          <Heading mb="6" size="xl" _dark={{ color: "coolGray.50" }}>
+          <Heading nativeID="DocSearch-h1" mb="6" size="xl" _dark={{ color: "coolGray.50" }}>
             {frontMatter && frontMatter.title
               ? frontMatter.title
               : pages.currentPage.title}

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 fontSize="3xl" color={useColorModeValue("gray.700", "gray.300")} />
+    <Heading nativeID="DocSearch-h1" fontSize="3xl" color={useColorModeValue("gray.700", "gray.300")} />
   );
 };

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

@@ -11,6 +11,7 @@ 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" }}

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

@@ -10,6 +10,7 @@ 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"

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

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

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

@@ -3,15 +3,18 @@ import { Heading, useColorModeValue } from "native-base";
 import { getHeadingMeta } from "../../utils";
 
 export const Heading5 = ({ children }: any) => {
-  const [content,id] = getHeadingMeta(children);
+  const [content, id] = getHeadingMeta(children);
   return (
-    <Heading
-      fontSize="md"
-      color={useColorModeValue("gray.700", "gray.300")}
-      // @ts-ignore
-      nativeID={id}
-    >
-      {content}
-    </Heading>
+    <>
+      <Heading display="none" nativeID="DocSearch-h5" >{content}</Heading>
+      <Heading
+        fontSize="md"
+        color={useColorModeValue("gray.700", "gray.300")}
+        // @ts-ignore
+        nativeID={id}
+      >
+        {content}
+      </Heading>
+    </>
   );
 };