fix anchor jumping links

css/index.css

@@ -34,4 +34,12 @@
 
 .max-h-code{
     max-height: 40rem;
+}
+
+
+.heading-anchor{
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    top: -64px;
 }

src/App.tsx

@@ -13,7 +13,7 @@ import { EventsPage } from "./pages/Events";
 
 const App: Component = () => {
   return (
-    <Router base="/subxt-explorer">
+    <Router source={hashIntegration()}>
       <MdBookWrapper>
         <Routes>
           <Route path="/" component={HomePage}></Route>

src/components/AnchoredH2.tsx

@@ -0,0 +1,16 @@
+import { JSX } from "solid-js";
+
+export function AnchoredH2({
+  title,
+  id,
+}: {
+  title: string;
+  id?: string;
+}): JSX.Element {
+  return (
+    <h2 class="mt-12 relative">
+      <div class="heading-anchor" id={id ?? title}></div>
+      {title}
+    </h2>
+  );
+}

src/pages/Calls.tsx

@@ -7,6 +7,7 @@ import { Code } from "../components/Code";
 import { Docs } from "../components/Docs";
 import { CodeTabLayout } from "../components/CodeTabLayout";
 import { KeyValueTypesLayout } from "../components/KeyValueTypesLayout";
+import { AnchoredH2 } from "../components/AnchoredH2";
 export const CallsPage = () => {
   let pallet = useParams<{ pallet: string }>().pallet;
   let calls = appState()?.palletCalls(pallet);
@@ -25,7 +26,7 @@ export const CallsPage = () => {
 function callContent(call: CallContent): JSX.Element {
   return (
     <>
-      <h2 class="mt-12">{call.name}</h2>
+      <AnchoredH2 title={call.name}></AnchoredH2>
       <Docs mdDocs={call.docs}></Docs>
       <KeyValueTypesLayout
         keyTypes={

src/pages/Constants.tsx

@@ -12,6 +12,7 @@ import { Code } from "../components/Code";
 import { Docs } from "../components/Docs";
 import { CodeTabLayout } from "../components/CodeTabLayout";
 import { KeyValueTypesLayout } from "../components/KeyValueTypesLayout";
+import { AnchoredH2 } from "../components/AnchoredH2";
 export const ConstantsPage = () => {
   let pallet = useParams<{ pallet: string }>().pallet;
   let constants = appState()?.palletConstants(pallet);
@@ -30,7 +31,7 @@ export const ConstantsPage = () => {
 function constantContent(constant: ConstantContent): JSX.Element {
   return (
     <>
-      <h2 class="mt-12">{constant.name}</h2>
+      <AnchoredH2 title={constant.name}></AnchoredH2>
       <Docs mdDocs={constant.docs}></Docs>
       <KeyValueTypesLayout
         valueType={{

src/pages/Events.tsx

@@ -12,6 +12,7 @@ import { Code } from "../components/Code";
 import { Docs } from "../components/Docs";
 import { CodeTabLayout } from "../components/CodeTabLayout";
 import { KeyValueTypesLayout } from "../components/KeyValueTypesLayout";
+import { AnchoredH2 } from "../components/AnchoredH2";
 
 export const EventsPage = () => {
   let pallet = useParams<{ pallet: string }>().pallet;
@@ -31,7 +32,7 @@ export const EventsPage = () => {
 function eventContent(event: EventContent): JSX.Element {
   return (
     <>
-      <h2 class="mt-12">{event.name}</h2>
+      <AnchoredH2 title={event.name}></AnchoredH2>
       <Docs mdDocs={event.docs}></Docs>
       <KeyValueTypesLayout
         keyTypes={{

src/pages/RuntimeApiMethods.tsx

@@ -9,6 +9,7 @@ import { JSX } from "solid-js";
 import { Docs } from "../components/Docs";
 import { CodeTabLayout } from "../components/CodeTabLayout";
 import { KeyValueTypesLayout } from "../components/KeyValueTypesLayout";
+import { AnchoredH2 } from "../components/AnchoredH2";
 
 export const RuntimeApiMethodsPage = () => {
   let runtimeApi = useParams<{ runtime_api: string }>().runtime_api;
@@ -31,7 +32,7 @@ export const RuntimeApiMethodsPage = () => {
 function methodContent(method: RuntimeApiMethodContent): JSX.Element {
   return (
     <>
-      <h2 class="mt-12">{method.method_name}</h2>
+      <AnchoredH2 title={method.method_name}></AnchoredH2>
       <Docs mdDocs={method.docs} />
       <KeyValueTypesLayout
         keyTypes={

src/pages/Storage.tsx

@@ -10,6 +10,7 @@ import {
   KeyValueTypesLayout,
   sectionHeading,
 } from "../components/KeyValueTypesLayout";
+import { AnchoredH2 } from "../components/AnchoredH2";
 export const StoragePage = () => {
   let pallet = useParams<{ pallet: string }>().pallet;
   let entries = appState()?.palletStorageEntries(pallet);
@@ -58,7 +59,7 @@ function storageEntryContent(
 
   return (
     <>
-      <h2 class="mt-12">{entry.name}</h2>
+      <AnchoredH2 title={entry.name}></AnchoredH2>
       <Docs mdDocs={entry.docs}></Docs>
       <div>
         <KeyValueTypesLayout

vite.config.ts

@@ -22,5 +22,5 @@ export default defineConfig({
   build: {
     target: "esnext",
   },
-  base: "/subxt-explorer",
+  base: "/subxt-explorer/",
 });