fixed url docs

Author: Lorenzo Arboit

src/main.tsx

@@ -1,11 +1,39 @@
-// src/main.tsx
-import { createRoot } from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
-import App from './App.tsx'
-import './index.css'
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import App from './App';
+import './index.css';
+
+/**
+ * Scroll to the element pointed by the URL hash after each navigation.
+ * If no hash is present (or not found), scroll to top.
+ */
+function ScrollToHash() {
+  const { pathname, hash } = useLocation();
+
+  React.useEffect(() => {
+    // try to scroll to an in-page anchor first
+    if (hash) {
+      // decode in case ids contain encoded chars
+      const selector = decodeURIComponent(hash);
+      const el = document.querySelector(selector);
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        return;
+      }
+    }
+    // otherwise go to the top on route change
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }, [pathname, hash]);
+
+  return null;
+}
 
 createRoot(document.getElementById('root')!).render(
-  <BrowserRouter basename="/Endoshare">
-    <App />
-  </BrowserRouter>
-)
+  <React.StrictMode>
+    <BrowserRouter basename="/Endoshare">
+      <ScrollToHash />
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

src/pages/Documentation.tsx

@@ -3,6 +3,7 @@ import Footer from "@/components/Footer";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Link } from "react-router-dom";
+import { HashLink } from "react-router-hash-link";
 import { Home, Download } from "lucide-react";
 
 const Documentation = () => {
@@ -27,10 +28,10 @@ const Documentation = () => {
               </Link>
             </Button>
             <Button asChild>
-              <a href="#installation" className="flex items-center gap-2">
+              <HashLink smooth to="#installation" className="flex items-center gap-2">
                 <Download className="h-4 w-4" />
                 Jump to Installation
-              </a>
+              </HashLink>
             </Button>
           </div>
         </section>