feat: switch to BrowserRouter with HF iframe deep linking support

Replace HashRouter with BrowserRouter for clean URLs. Add HashRedirect
to handle hash-to-path conversion on initial iframe load (HF propagates
parent hash to iframe). Add RouteSync to sync current route back to
parent page via postMessage so users can copy/share deep links.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/App.jsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, useLocation, useNavigate } from 'react-router-dom';
 import { ThemeProvider, CssBaseline } from '@mui/material';
 import theme from './theme/theme';
 import { AppsProvider } from './context/AppsContext';
@@ -13,14 +13,57 @@ import Buy from './pages/Buy';
 import GettingStarted from './pages/GettingStarted';
 import Build from './pages/Build';
 
-function ScrollToTop() {
+/**
+ * Handle hash-to-path redirect for HuggingFace Spaces iframe embedding.
+ *
+ * HF propagates the parent page's hash to the iframe on initial load.
+ * For example, visiting huggingface.co/reachy-mini#/apps will load the
+ * iframe at *.hf.space/#/apps. This component reads that hash and
+ * converts it to a BrowserRouter path (e.g. /apps).
+ */
+function HashRedirect() {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const hash = window.location.hash;
+    // Match hash routes like #/apps, #/download, etc.
+    if (hash && hash.startsWith('#/')) {
+      const path = hash.slice(1); // Remove the # to get /apps
+      window.location.hash = ''; // Clean up the hash
+      navigate(path, { replace: true });
+    }
+  }, [navigate]);
+
+  return null;
+}
+
+/**
+ * Sync the current route back to the HF parent page via postMessage.
+ * This updates the URL in the browser address bar so users can
+ * copy/share deep links (e.g. huggingface.co/reachy-mini#/apps).
+ *
+ * Also handles scrollTo query parameter for anchor-like behavior.
+ */
+function RouteSync() {
   const location = useLocation();
 
   useEffect(() => {
-    // Check for scrollTo query parameter (used for anchor-like behavior with HashRouter)
+    // Sync current path to parent frame hash (for HF Spaces embedding)
+    const isInIframe = window.parent !== window;
+    if (isInIframe && location.pathname !== '/') {
+      window.parent.postMessage(
+        { hash: `#${location.pathname}` },
+        'https://huggingface.co'
+      );
+    } else if (isInIframe && location.pathname === '/') {
+      // Clear hash when on home page
+      window.parent.postMessage({ hash: '' }, 'https://huggingface.co');
+    }
+
+    // Handle scrollTo query parameter
     const params = new URLSearchParams(location.search);
     const scrollTo = params.get('scrollTo');
-    
+
     if (scrollTo) {
       // Retry mechanism to wait for element to be rendered
       const scrollToElement = (retries = 0) => {
@@ -28,14 +71,11 @@ function ScrollToTop() {
         if (element) {
           element.scrollIntoView({ behavior: 'smooth', block: 'center' });
         } else if (retries < 10) {
-          // Retry up to 10 times with 100ms interval
           setTimeout(() => scrollToElement(retries + 1), 100);
         }
       };
-      // Initial delay for page render
       setTimeout(() => scrollToElement(), 300);
     } else {
-      // Otherwise scroll to top
       window.scrollTo({ top: 0, behavior: 'smooth' });
     }
   }, [location.pathname, location.search]);
@@ -49,8 +89,9 @@ export default function App() {
       <CssBaseline />
       <AuthProvider>
         <AppsProvider>
-          <HashRouter>
-            <ScrollToTop />
+          <BrowserRouter>
+            <HashRedirect />
+            <RouteSync />
             <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/getting-started" element={<GettingStarted />} />
@@ -60,7 +101,7 @@ export default function App() {
               <Route path="/apps" element={<Apps />} />
               <Route path="/buy" element={<Buy />} />
             </Routes>
-          </HashRouter>
+          </BrowserRouter>
         </AppsProvider>
       </AuthProvider>
     </ThemeProvider>