/** * Custom GitHub Button with Organization Star Count * * This script replaces Mintlify's default GitHub button with a custom one that: * - Shows the total organization star count from files.namastex.ai API * - Links to the organization instead of a single repository * - Updates the count every 5 minutes * - Uses localStorage for caching */ (function() { 'use strict'; const API_URL = 'https://files.namastex.ai/nmstx-git-status.json'; const ORG_URL = 'https://github.com/namastexlabs'; const UPDATE_INTERVAL = 5 * 60 * 1000; // 5 minutes /** * Create the custom GitHub button HTML */ function createGitHubButton(stars = '...') { return ` namastexlabs ${stars} `; } /** * Fetch star count from API */ async function fetchStars() { try { const response = await fetch(API_URL); if (!response.ok) throw new Error(`HTTP ${response.status}`); const data = await response.json(); const stars = data.summary.total_stars; console.log('⭐ Fetched total stars:', stars); // Cache it localStorage.setItem('nmstx-stars', JSON.stringify({ count: stars, timestamp: Date.now() })); return stars; } catch (error) { console.error('❌ Failed to fetch stars:', error); // Try to use cached value const cached = localStorage.getItem('nmstx-stars'); if (cached) { const data = JSON.parse(cached); console.log('📦 Using cached stars:', data.count); return data.count; } return null; } } /** * Update existing button or inject new one */ async function updateButton() { const stars = await fetchStars(); if (!stars) return; const existingButton = document.getElementById('custom-github-button'); if (existingButton) { // Just update the count const countElement = existingButton.querySelector('.star-count'); if (countElement) { countElement.textContent = stars; console.log('✅ Updated star count to:', stars); } } else { // Inject the button injectButton(stars); } } /** * Inject the custom button into the navbar */ function injectButton(stars) { console.log('🔍 Looking for navbar to inject button...'); // Check if button already exists if (document.getElementById('custom-github-button')) { console.log('ℹ️ Custom button already exists, skipping injection'); return true; } // Find the navbar - try multiple selectors const selectors = [ 'nav ul', // Main nav list 'header nav', '[role="navigation"]', '.navbar', 'nav' ]; let navbar = null; for (const selector of selectors) { navbar = document.querySelector(selector); if (navbar) { console.log('✅ Found navbar:', selector); break; } } if (!navbar) { console.log('❌ Navbar not found yet, will retry...'); return false; } // Create a list item container const li = document.createElement('li'); li.className = 'custom-github-li'; li.innerHTML = createGitHubButton(stars); // Append to navbar navbar.appendChild(li); console.log('✅ Custom GitHub button injected with', stars, 'stars'); return true; } /** * Initialize */ function init() { console.log('🎬 Initializing custom GitHub button...'); // Try to inject immediately setTimeout(async () => { const stars = await fetchStars() || '260'; if (!injectButton(stars)) { // Retry after delay setTimeout(async () => { const retryStars = await fetchStars() || '260'; if (!injectButton(retryStars)) { console.log('⏰ Button injection failed, will wait for DOM changes'); } }, 1000); } }, 500); // Watch for DOM changes const observer = new MutationObserver(() => { if (!document.getElementById('custom-github-button')) { const cachedData = localStorage.getItem('nmstx-stars'); const stars = cachedData ? JSON.parse(cachedData).count : '260'; injectButton(stars); } }); if (document.body) { observer.observe(document.body, { childList: true, subtree: true }); } // Periodic updates setInterval(updateButton, UPDATE_INTERVAL); console.log('✅ Custom GitHub button script initialized'); } // Start when DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();

Phase 1: Get It Running

Phase 2: Reference

Phase 3: Real Examples

Phase 4: Deep Concepts

Troubleshooting

Page Not Found