Fix manul install, make website install sections linkable (#230)

* Fix manual installation JSON examples to use @latest version

- Updated README.md, FAQ.md, and docs/index.html
- Changed '@wonderwhy-er/desktop-commander' to '@wonderwhy-er/desktop-commander@latest'
- Ensures manual installations always use the latest version from npm

* Fix website tab navigation and URL updating

- Updated openTab() function to update URL hash when switching tabs
- Enhanced handleAnchorNavigation() to handle all installation tab anchors
- Now all installation links work: #npx, #bash, #smithery, #manual, #local, #docker-install
- URL updates when changing tabs, making links shareable
- Maintains special handling for docker-install with highlighting

* Add support for general #installation anchor link

- Added handling for #installation link that scrolls to section without changing tabs
- Maintains default tab (NPX Install) when using general installation link
- Existing tab-specific links still work (#npx, #bash, #smithery, etc.)
- Navigation menu 'Installation' link now works properly

* Fix URL hash not updating when clicking navigation links

- Modified smooth scrolling code to update URL hash using history.pushState()
- Now clicking 'Installation' in header properly updates URL to #installation
- Maintains smooth scrolling behavior while enabling shareable URLs
- All navigation links now update the URL hash as expected

Author: wonderwhy-er

FAQ.md

@@ -141,7 +141,7 @@ Add the MCP server to your claude_desktop_config.json (on Mac, found at ~/Librar
       "command": "npx",
       "args": [
         "-y",
-        "@wonderwhy-er/desktop-commander"
+        "@wonderwhy-er/desktop-commander@latest"
       ]
     }
   }

README.md

@@ -131,7 +131,7 @@ Add this entry to your claude_desktop_config.json:
       "command": "npx",
       "args": [
         "-y",
-        "@wonderwhy-er/desktop-commander"
+        "@wonderwhy-er/desktop-commander@latest"
       ]
     }
   }

docs/index.html

@@ -1473,7 +1473,7 @@ <h3>Manual Configuration</h3>
       "command": "npx",
       "args": [
         "-y",
-        "@wonderwhy-er/desktop-commander"
+        "@wonderwhy-er/desktop-commander@latest"
       ]
     }
   }

docs/js/main.js

@@ -65,6 +65,15 @@ function openTab(evt, tabName) {
     // Show the selected tab and add an active class to the button
     document.getElementById(tabName).classList.add("active");
     evt.currentTarget.classList.add("active");
+    
+    // Update URL hash to match the selected tab (for shareable links)
+    if (tabName === 'docker') {
+        // Special case for docker - use docker-install anchor
+        history.replaceState(null, null, '#docker-install');
+    } else {
+        // For other tabs, use the tab name as anchor
+        history.replaceState(null, null, '#' + tabName);
+    }
 }
 
 // Make the openTab function available globally
@@ -314,12 +323,16 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     anchor.addEventListener('click', function (e) {
         e.preventDefault();
 
-        const target = document.querySelector(this.getAttribute('href'));
+        const href = this.getAttribute('href');
+        const target = document.querySelector(href);
         if (target) {
             // Extra offset for section IDs that are inside the cases section
-            const isSubsection = this.getAttribute('href').startsWith('#cases-');
+            const isSubsection = href.startsWith('#cases-');
             const offset = isSubsection ? 120 : 80;
 
+            // Update URL hash to match the clicked link
+            history.pushState(null, null, href);
+            
             window.scrollTo({
                 top: target.offsetTop - offset,
                 behavior: 'smooth'
@@ -431,23 +444,43 @@ function handleAnchorNavigation() {
     if (window.location.hash) {
         const hash = window.location.hash.substring(1); // Remove the #
 
-        // Special handling for docker-install anchor
-        if (hash === 'docker-install') {
-            // Check for UTM parameters to confirm this came from Docker Gateway
-            const urlParams = new URLSearchParams(window.location.search);
-            const utmSource = urlParams.get('utm_source');
-            const utmMedium = urlParams.get('utm_medium');
-            const utmCampaign = urlParams.get('utm_campaign');
-
+        // Handle general installation section link (just scroll, don't change tabs)
+        if (hash === 'installation') {
+            const installationSection = document.getElementById('installation');
+            if (installationSection) {
+                setTimeout(() => {
+                    installationSection.scrollIntoView({ 
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }, 100);
+            }
+            return; // Exit early, don't process as tab-specific
+        }
+        
+        // Define valid installation tab anchors
+        const validTabs = {
+            'npx': 'npx',
+            'bash': 'bash', 
+            'smithery': 'smithery',
+            'manual': 'manual',
+            'local': 'local',
+            'docker': 'docker',
+            'docker-install': 'docker' // Special case: docker-install maps to docker tab
+        };
+        
+        // Check if the hash corresponds to an installation tab
+        if (validTabs[hash]) {
+            const targetTab = validTabs[hash];
 
             // First scroll to the installation section
             const installationSection = document.getElementById('installation');
             if (installationSection) {
-                // Open the docker tab
-                const dockerTab = document.querySelector('[onclick*="docker"]');
-                if (dockerTab) {
-                    // Simulate click on docker tab
-                    dockerTab.click();
+                // Find and click the appropriate tab button
+                const tabButton = document.querySelector(`[onclick*="${targetTab}"]`);
+                if (tabButton) {
+                    // Simulate click on the tab
+                    tabButton.click();
 
                     // Wait a bit for tab to open, then scroll
                     setTimeout(() => {
@@ -456,14 +489,23 @@ function handleAnchorNavigation() {
                             block: 'start'
                         });
 
-                        // Highlight the docker section briefly
-                        const dockerSection = document.getElementById('docker');
-                        if (dockerSection) {
-                            dockerSection.style.transition = 'background-color 0.5s ease';
-                            dockerSection.style.backgroundColor = '#e3f2fd';
-                            setTimeout(() => {
-                                dockerSection.style.backgroundColor = '';
-                            }, 2000);
+                        // Special handling for docker-install anchor
+                        if (hash === 'docker-install') {
+                            // Check for UTM parameters to confirm this came from Docker Gateway
+                            const urlParams = new URLSearchParams(window.location.search);
+                            const utmSource = urlParams.get('utm_source');
+                            const utmMedium = urlParams.get('utm_medium');
+                            const utmCampaign = urlParams.get('utm_campaign');
+                            
+                            // Highlight the docker section briefly
+                            const dockerSection = document.getElementById('docker');
+                            if (dockerSection) {
+                                dockerSection.style.transition = 'background-color 0.5s ease';
+                                dockerSection.style.backgroundColor = '#e3f2fd';
+                                setTimeout(() => {
+                                    dockerSection.style.backgroundColor = '';
+                                }, 2000);
+                            }
                         }
                     }, 100);
                 }