Update mobile nav and also make github stat gathering more intellegent

Author: nstrayer

.github/workflows/update-github-stats.yml

@@ -0,0 +1,58 @@
+name: Update GitHub Stats
+
+on:
+  schedule:
+    # Run every day at 2:00 AM UTC
+    - cron: '0 2 * * *'
+  workflow_dispatch: # Allow manual triggering
+  push:
+    branches:
+      - main
+      - new-landing-page
+    paths:
+      - 'scripts/update-github-stats.js'
+      - '.github/workflows/update-github-stats.yml'
+
+permissions:
+  contents: write
+
+jobs:
+  update-stats:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Update GitHub stats
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          node scripts/update-github-stats.js
+
+      - name: Check if stats were updated
+        id: check-changes
+        run: |
+          if git diff --quiet data/github-stats.json; then
+            echo "No changes to commit"
+            echo "changes=false" >> $GITHUB_OUTPUT
+          else
+            echo "Stats have been updated"
+            echo "changes=true" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Commit and push if stats changed
+        if: steps.check-changes.outputs.changes == 'true'
+        run: |
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+          git config --local user.name "github-actions[bot]"
+          git add data/github-stats.json
+          git commit -m "chore: update GitHub repository statistics [skip ci]"
+          git push

data/github-stats.json

@@ -0,0 +1,6 @@
+{
+  "stars": 3435,
+  "forks": 108,
+  "contributors": 41,
+  "lastUpdated": "2025-08-01T16:35:38.030Z"
+}

docs/github-stats-implementation.md

@@ -0,0 +1,139 @@
+# GitHub Stats Implementation Guide
+
+## Overview
+
+The Positron website displays real-time GitHub repository statistics (stars, forks, contributors) using a flexible system that supports both live API fetching and static fallbacks.
+
+## Architecture
+
+### Components
+
+1. **Static JSON File** (`data/github-stats.json`)
+   - Updated daily via GitHub Actions
+   - Serves as fallback when API is unavailable
+   - No rate limit concerns
+
+2. **Client-side JavaScript** (`js/github-stats-unified.js`)
+   - Supports three modes: `live`, `static`, and `auto`
+   - Implements caching to reduce API calls
+   - Gracefully handles rate limits
+
+3. **Configuration** (`js/github-stats-config.js`)
+   - Simple configuration file to set fetching mode
+   - Can be modified without touching main script
+
+4. **GitHub Action** (`.github/workflows/update-github-stats.yml`)
+   - Runs daily to update static JSON
+   - Ensures fallback data is always fresh
+
+### Fetching Modes
+
+#### 1. Live Mode (`'live'`)
+- Fetches directly from GitHub API
+- Real-time data
+- Subject to rate limits (60 requests/hour for unauthenticated)
+- Best for development or low-traffic sites
+
+```javascript
+window.GITHUB_STATS_MODE = 'live';
+```
+
+#### 2. Static Mode (`'static'`)
+- Uses pre-generated JSON file only
+- No API calls from client
+- Updated daily via GitHub Actions
+- Best for high-traffic sites
+
+```javascript
+window.GITHUB_STATS_MODE = 'static';
+```
+
+#### 3. Auto Mode (`'auto'`) - Default
+- Tries live API first
+- Falls back to static if rate limited
+- Best balance of freshness and reliability
+
+```javascript
+window.GITHUB_STATS_MODE = 'auto'; // or omit for default
+```
+
+## Rate Limit Considerations
+
+### GitHub API Limits
+- **Unauthenticated**: 60 requests/hour per IP
+- **Authenticated**: 5,000 requests/hour (not used in client)
+
+### Our Implementation
+- **Caching**: 1-hour client-side cache via localStorage
+- **Smart Fetching**: Contributors limited to first 100 (1-2 API calls)
+- **Fallback**: Automatic switch to static data when rate limited
+
+### Traffic Calculations
+With 1-hour caching:
+- Each unique visitor: 2 API calls (repo info + contributors)
+- Supports ~30 unique visitors/hour in live mode
+- Unlimited in static mode
+
+## HTML Implementation
+
+Elements use data attributes for identification:
+
+```html
+<!-- Simple stat -->
+<span data-stat="forks">108</span>
+
+<!-- Formatted stat -->
+<div data-stat="stars" data-format="short-plus">3.4k+</div>
+
+<!-- Stat with nested elements -->
+<span data-stat="stars" data-format="short">
+  <svg>...</svg>
+  <span class="stat-number">3.4k</span>
+</span>
+```
+
+## Debugging
+
+Open browser console and use:
+
+```javascript
+// Check current mode
+GitHubStats.getMode()
+
+// Force refresh
+GitHubStats.refresh()
+
+// Clear cache
+GitHubStats.clearCache()
+
+// Check if stats loaded
+document.body.getAttribute('data-github-stats-loaded')
+```
+
+## Adding New Stats
+
+1. Update `scripts/update-github-stats.js` to fetch new stat
+2. Add to JSON structure
+3. Add HTML element with appropriate `data-stat` attribute
+4. Stats will automatically update
+
+## Performance Tips
+
+1. **High Traffic Sites**: Use `'static'` mode
+2. **Low Traffic Sites**: Use `'auto'` or `'live'` mode
+3. **Development**: Use `'live'` mode with `GitHubStats.clearCache()`
+
+## Security Notes
+
+- No authentication tokens in client-side code
+- API calls are read-only
+- CORS handled by GitHub's API
+- Fallback ensures site never breaks
+
+## Future Enhancements
+
+Possible improvements:
+1. WebSocket for real-time updates
+2. Service Worker for better caching
+3. GraphQL API for more efficient queries
+4. Server-side proxy for authenticated requests

index.html

@@ -24,6 +24,11 @@
 
     <!-- Styles -->
     <link rel="stylesheet" href="landing.css">
+    
+    <!-- Scripts -->
+    <!-- Configure GitHub stats fetching mode: 'live', 'static', or 'auto' (default) -->
+    <script src="js/github-stats-config.js"></script>
+    <script src="js/github-stats-unified.js" defer></script>
 </head>
 <body>
     <!-- Navigation Header -->
@@ -72,6 +77,34 @@
                 </button>
             </div>
         </nav>
+        
+        <!-- Mobile Menu -->
+        <div class="nav-mobile-menu">
+            <a href="start.html" class="nav-link">
+                <svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
+                </svg>
+                Getting Started
+            </a>
+            <a href="add-to-path.html" class="nav-link">
+                <svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                </svg>
+                Guides
+            </a>
+            <a href="troubleshooting.html" class="nav-link">
+                <svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                </svg>
+                Help
+            </a>
+            <a href="download.html" class="nav-link nav-link-cta">
+                <svg class="nav-link-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"/>
+                </svg>
+                Download
+            </a>
+        </div>
     </header>
 
     <main>
@@ -317,20 +350,20 @@ <h3 class="community-card-title">GitHub</h3>
                             <div class="community-stats">
                                 <div class="community-stat">
                                     <span class="stat-label">Stars</span>
-                                    <span class="stat-value">
+                                    <span class="stat-value" data-stat="stars" data-format="short">
                                         <svg class="stat-icon" fill="currentColor" viewBox="0 0 20 20">
                                             <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                         </svg>
-                                        3.4k
+                                        <span class="stat-number">3.4k</span>
                                     </span>
                                 </div>
                                 <div class="community-stat">
                                     <span class="stat-label">Forks</span>
-                                    <span class="stat-value">108</span>
+                                    <span class="stat-value" data-stat="forks">108</span>
                                 </div>
                                 <div class="community-stat">
                                     <span class="stat-label">Contributors</span>
-                                    <span class="stat-value">100+</span>
+                                    <span class="stat-value" data-stat="contributors">41</span>
                                 </div>
                             </div>
                             <a href="https://github.com/posit-dev/positron" target="_blank" rel="noopener noreferrer" 
@@ -410,12 +443,12 @@ <h3 class="community-card-title">Documentation</h3>
                 <div class="community-stats-bar">
                     <a href="https://github.com/posit-dev/positron/stargazers" target="_blank" rel="noopener noreferrer" 
                        class="stats-bar-item">
-                        <div class="stats-bar-value">3.4k+</div>
+                        <div class="stats-bar-value" data-stat="stars" data-format="short-plus">3.4k+</div>
                         <div class="stats-bar-label">GitHub Stars</div>
                     </a>
                     <a href="https://github.com/posit-dev/positron/graphs/contributors" target="_blank" rel="noopener noreferrer" 
                        class="stats-bar-item">
-                        <div class="stats-bar-value">100+</div>
+                        <div class="stats-bar-value" data-stat="contributors">41</div>
                         <div class="stats-bar-label">Contributors</div>
                     </a>
                     <a href="https://github.com/posit-dev/positron/discussions" target="_blank" rel="noopener noreferrer" 
@@ -504,6 +537,45 @@ <h3 class="footer-heading">Posit</h3>
 
             lastScroll = currentScroll;
         });
+        
+        // Mobile menu toggle functionality
+        const mobileToggle = document.querySelector('.nav-mobile-toggle');
+        const mobileMenu = document.querySelector('.nav-mobile-menu');
+        const siteNav = document.querySelector('.site-nav');
+        
+        function openMobileMenu() {
+            mobileMenu.classList.add('active');
+            siteNav.classList.add('menu-open');
+            mobileToggle.setAttribute('aria-expanded', 'true');
+        }
+        
+        function closeMobileMenu() {
+            mobileMenu.classList.remove('active');
+            mobileToggle.setAttribute('aria-expanded', 'false');
+            siteNav.classList.remove('menu-open');
+        }
+        
+        mobileToggle.addEventListener('click', () => {
+            if (mobileMenu.classList.contains('active')) {
+                closeMobileMenu();
+            } else {
+                openMobileMenu();
+            }
+        });
+        
+        // Close mobile menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!mobileToggle.contains(e.target) && !mobileMenu.contains(e.target) && mobileMenu.classList.contains('active')) {
+                closeMobileMenu();
+            }
+        });
+        
+        // Close mobile menu when resizing to desktop
+        window.addEventListener('resize', () => {
+            if (window.innerWidth >= 768 && mobileMenu.classList.contains('active')) {
+                closeMobileMenu();
+            }
+        });
     </script>
 </body>
 </html>

js/github-stats-config.js

@@ -0,0 +1,11 @@
+/**
+ * GitHub Stats Configuration
+ * 
+ * This file allows you to configure how GitHub stats are fetched.
+ * Options:
+ * - 'live': Fetch directly from GitHub API (real-time but subject to rate limits)
+ * - 'static': Use pre-generated JSON file (updated daily via GitHub Actions)
+ * - 'auto': Try live first, fall back to static if rate limited (default)
+ */
+
+window.GITHUB_STATS_MODE = 'auto'; // Change to 'live' or 'static' as needed