From efe1624eefd0c79e214da09a930613c1e2172718 Mon Sep 17 00:00:00 2001
From: Tadeo hepperle <tadeo@do-mix.de>
Date: Fri, 29 Sep 2023 18:18:21 +0200
Subject: [PATCH] fix anchor jumping links

---
 css/index.css                   |  8 ++++++++
 src/App.tsx                     |  2 +-
 src/components/AnchoredH2.tsx   | 16 ++++++++++++++++
 src/pages/Calls.tsx             |  3 ++-
 src/pages/Constants.tsx         |  3 ++-
 src/pages/Events.tsx            |  3 ++-
 src/pages/RuntimeApiMethods.tsx |  3 ++-
 src/pages/Storage.tsx           |  3 ++-
 vite.config.ts                  |  2 +-
 9 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 src/components/AnchoredH2.tsx

diff --git a/css/index.css b/css/index.css
index 7516fea..b60a3b8 100644
--- a/css/index.css
+++ b/css/index.css
@@ -34,4 +34,12 @@
 
 .max-h-code{
     max-height: 40rem;
+}
+
+
+.heading-anchor{
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    top: -64px;
 }
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 83d8948..ebd3309 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/AnchoredH2.tsx b/src/components/AnchoredH2.tsx
new file mode 100644
index 0000000..3faa8a5
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/pages/Calls.tsx b/src/pages/Calls.tsx
index 4568f79..07e49ef 100644
--- a/src/pages/Calls.tsx
+++ b/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={
diff --git a/src/pages/Constants.tsx b/src/pages/Constants.tsx
index 21b2300..3cfd177 100644
--- a/src/pages/Constants.tsx
+++ b/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={{
diff --git a/src/pages/Events.tsx b/src/pages/Events.tsx
index 0662c91..de4141d 100644
--- a/src/pages/Events.tsx
+++ b/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={{
diff --git a/src/pages/RuntimeApiMethods.tsx b/src/pages/RuntimeApiMethods.tsx
index 4ff8feb..99bc184 100644
--- a/src/pages/RuntimeApiMethods.tsx
+++ b/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={
diff --git a/src/pages/Storage.tsx b/src/pages/Storage.tsx
index 37eff3a..449ad9f 100644
--- a/src/pages/Storage.tsx
+++ b/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
diff --git a/vite.config.ts b/vite.config.ts
index d88ec12..9c80006 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -22,5 +22,5 @@ export default defineConfig({
   build: {
     target: "esnext",
   },
-  base: "/subxt-explorer",
+  base: "/subxt-explorer/",
 });