Merge pull request #617 from iron-fish/fix-docs-anchor-links

Fix docs heading links

layouts/Documentation/Documentation.tsx

@@ -12,7 +12,6 @@ import {
   VStack,
   NAV_HEIGHT,
   HStack,
-  Button,
   SidebarItem,
   ArrowButton,
 } from "@/lib/ui";
@@ -21,6 +20,7 @@ import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ComponentProps, useEffect, useMemo, useRef, useState } from "react";
+import { useIsClient } from "usehooks-ts";
 
 type Props = {
   frontMatter: {
@@ -209,6 +209,7 @@ function flattenSidebarItems(sidebarItems: SidebarItems): SidebarItem[] {
 
 function PrevNextButtons({ sidebarItems }: { sidebarItems: SidebarItems }) {
   const router = useRouter();
+  const isClient = useIsClient();
 
   const flattenedItems = useMemo(() => {
     return flattenSidebarItems(sidebarItems);
@@ -225,6 +226,8 @@ function PrevNextButtons({ sidebarItems }: { sidebarItems: SidebarItems }) {
     };
   }, [flattenedItems, router.asPath]);
 
+  if (!isClient) return null;
+
   return (
     <HStack justifyContent="space-between" mt={20}>
       <ArrowButton

lib/ui/src/components/MDXRenderer/MDXRenderer.tsx

@@ -16,7 +16,6 @@ import {
 import { MDXProvider as BaseMDXProvider } from "@mdx-js/react";
 import { kebabCase } from "lodash-es";
 import { MDXRemote, MDXRemoteProps } from "next-mdx-remote";
-import Head from "next/head";
 import NextLink from "next/link";
 import { ComponentProps, ReactNode, useCallback, useState } from "react";
 import { FAQItem } from "../../components/FAQItem/FAQItem";
@@ -43,6 +42,7 @@ function HeadingWithAnchor(props: ComponentProps<typeof Heading>) {
       id={headingId}
       ref={handleHeadingId}
       fontWeight="normal"
+      scrollMarginTop="100px"
       _hover={{
         'a[href^="#"]': {
           color: "blue",
@@ -51,14 +51,7 @@ function HeadingWithAnchor(props: ComponentProps<typeof Heading>) {
     >
       {props.children}&nbsp;
       {headingId && (
-        <Link
-          href={`#${headingId}`}
-          color="transparent"
-          onClick={(e) => {
-            e.preventDefault();
-            smoothScrollToElByQuerySelector(`#${headingId}`);
-          }}
-        >
+        <Link href={`#${headingId}`} color="transparent">
           #
         </Link>
       )}