Smooth scroll

components/openapi/OpenApiView.module.css

@@ -47,4 +47,10 @@
 
 .operationAnchor:hover:after {
   opacity: 1;
+}
+
+.scrollAnchor {
+  display: block;
+  position: relative;
+  top: calc(var(--a-spacing-16) * -1);
 }

components/openapi/OpenApiView.tsx

@@ -74,8 +74,12 @@ export const OpenApiView: React.FC = () => {
                           size="medium"
                         >
                           {pathItem.summary}
+                          <a
+                            id={pathItem.operationId}
+                            className={styles.scrollAnchor}
+                          />
                         </Heading>
-                        <div id={pathItem.operationId} className={styles.path}>
+                        <div className={styles.path}>
                           <Tag
                             className={styles.method}
                             type={calloutTypeForMethod(method)}

lib/openapi/hooks.ts

@@ -1,10 +1,9 @@
-import { useData } from "nextra/hooks"
 import { OpenApiObjectSchema } from "@/lib/openapi/schema"
 import { OpenApiDoc } from "@/lib/openapi/types"
 import { useMemo } from "react"
 
-export const useOpenApiDoc = (): OpenApiDoc => {
-  const { spec } = useData()
+import spec from "./openapi.yml"
 
+export const useOpenApiDoc = (): OpenApiDoc => {
   return useMemo(() => OpenApiObjectSchema.parse(spec) as OpenApiDoc, [spec])
 }

pages/globals.css

@@ -16,6 +16,10 @@
   margin: 0;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;