Fix main header side link

website/src/components/docs/components/headers/Header1.tsx

@@ -0,0 +1,23 @@
+import Typography from '@mui/material/Typography';
+
+import { useNodeText } from '../../../../util/node.util';
+import useAnchor from './hooks/useAnchor';
+
+import type { ReactNode } from 'react';
+
+interface Header1Props {
+  children?: ReactNode;
+}
+
+const Header1 = ({ children }: Header1Props) => {
+  const textContent = useNodeText(children);
+  const anchor = useAnchor(textContent);
+
+  return (
+    <Typography variant="h1" id={anchor}>
+      {children}
+    </Typography>
+  );
+};
+
+export default Header1;

website/src/pages/docs/[doc].tsx

@@ -8,6 +8,7 @@ import remarkGfm from 'remark-gfm';
 import Anchor from '../../components/docs/components/Anchor';
 import Blockquote from '../../components/docs/components/Blockquote';
 import CodeTabs from '../../components/docs/components/CodeTabs';
+import Header1 from '../../components/docs/components/headers/Header1';
 import Header2 from '../../components/docs/components/headers/Header2';
 import Header3 from '../../components/docs/components/headers/Header3';
 import Header4 from '../../components/docs/components/headers/Header4';
@@ -103,10 +104,11 @@ const Docs = ({
       <StyledDocsView className={theme.palette.mode}>
         <StyledDocsContentWrapper>
           <DocsContent>
-            <Typography variant="h1">{title}</Typography>
+            <Header1>{title}</Header1>
             <MDXRemote
               {...source}
               components={{
+                h1: Header1,
                 h2: Header2,
                 h3: Header3,
                 h4: Header4,