Fix navigation links to use relative paths and match category names

1. Add JavaScript to convert absolute navigation hrefs to relative paths
- Fixes issue where links pointed to hf.space domain when accessed via index.openhands.dev
- Navigation now stays on the same domain regardless of proxy configuration

2. Update route paths to match category names:
- Issue Resolution: /bug-fixing → /issue-resolution
- Greenfield: /app-creation → /greenfield
- Frontend: /frontend-development → /frontend
- Testing: /test-generation → /testing

Co-authored-by: openhands <openhands@all-hands.dev>

app.py

@@ -75,6 +75,43 @@ redirect_script = """
     if (window.location.pathname === '/') { window.location.replace('/home'); }
 </script>
 """
+
+# JavaScript to fix navigation links to use relative paths (avoids domain mismatch when behind proxy)
+fix_nav_links_script = """
+<script>
+(function() {
+    function fixNavLinks() {
+        // Find all navigation links in the nav-holder
+        const navLinks = document.querySelectorAll('.nav-holder nav a');
+        navLinks.forEach(link => {
+            const href = link.getAttribute('href');
+            if (href) {
+                // Extract the pathname from the href (works with both relative and absolute URLs)
+                try {
+                    const url = new URL(href, window.location.origin);
+                    // Only update if the pathname starts with /
+                    if (url.pathname.startsWith('/')) {
+                        link.setAttribute('href', url.pathname);
+                    }
+                } catch (e) {
+                    // If URL parsing fails, leave the href as-is
+                }
+            }
+        });
+    }
+    
+    // Run when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', fixNavLinks);
+    } else {
+        fixNavLinks();
+    }
+    
+    // Also run periodically to catch dynamically added links
+    setInterval(fixNavLinks, 1000);
+})();
+</script>
+"""
 tooltip_script = """
 <script>
 function initializeSmartTooltips() {
@@ -312,23 +349,23 @@ logger.info("Creating Gradio application")
 demo = gr.Blocks(
     theme=theme,
     css=final_css,
-    head=posthog_script + scroll_script + redirect_script + tooltip_script + dark_mode_script,
+    head=posthog_script + scroll_script + redirect_script + fix_nav_links_script + tooltip_script + dark_mode_script,
     title="OpenHands Index",
 )
 
 with demo.route("Home", "/home"):
     build_main_page()
 
-with demo.route("Issue Resolution", "/bug-fixing"):
+with demo.route("Issue Resolution", "/issue-resolution"):
     build_bug_fixing_page()
 
-with demo.route("Greenfield", "/app-creation"):
+with demo.route("Greenfield", "/greenfield"):
     build_app_creation_page()
 
-with demo.route("Frontend", "/frontend-development"):
+with demo.route("Frontend", "/frontend"):
     build_frontend_page()
 
-with demo.route("Testing", "/test-generation"):
+with demo.route("Testing", "/testing"):
     build_test_generation_page()
 
 with demo.route("Information Gathering", "/information-gathering"):