<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>Contributor.info</title>
    
    <!-- PWA Configuration -->
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#3b82f6" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="Contributors" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="msapplication-TileColor" content="#3b82f6" />
    <meta name="msapplication-tap-highlight" content="no" />
    
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png" />
    <link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png" />
    
    <!-- SEO Meta Tags -->
    <meta name="robots" content="index, follow" />
    <!-- Canonical URL is dynamically set by React Helmet in the app -->
    <!-- Google Search Console verification - replace with your actual verification code -->
    <!-- <meta name="google-site-verification" content="YOUR_VERIFICATION_CODE" /> -->
    
    <!-- Additional PWA Meta Tags -->
    <meta name="description" content="Visualize GitHub contributors and their contributions. Track open source activity, analyze contribution patterns, and discover insights about repository health and community engagement." />
    <meta name="keywords" content="github,contributors,open source,analytics,visualization,repository analysis,contribution tracking,developer metrics" />
    <meta name="author" content="Brian Douglas" />
    <meta name="application-name" content="Contributor Info" />
    <meta name="format-detection" content="telephone=no" />
    
    <!-- Performance optimizations -->
    <link rel="preconnect" href="https://avatars.githubusercontent.com" crossorigin>
    <link rel="preconnect" href="https://api.github.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://egcxzonpmmcirmgqdrla.supabase.co" crossorigin>
    <link rel="dns-prefetch" href="https://avatars.githubusercontent.com">
    <link rel="dns-prefetch" href="https://api.github.com">
    <link rel="dns-prefetch" href="https://github.com">
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="dns-prefetch" href="https://egcxzonpmmcirmgqdrla.supabase.co">
    
    <!-- Preload critical fonts for faster text rendering -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"></noscript>
    
    <!-- Preload icon sprite if using SVG icons -->
    <link rel="preload" href="/icons.svg" as="image" type="image/svg+xml" fetchpriority="low">
    
    <!-- Vite will inject modulepreload links for critical chunks automatically -->
    
    <!-- Prefetch likely next navigations -->
    <link rel="prefetch" href="/api/contributors" />
    <link rel="prefetch" href="/api/repositories" />
    
    <!-- Prevent FOUC by detecting theme before render -->
    <script>
      (function() {
        // Theme detection script - runs synchronously to prevent FOUC
        const storageKey = 'contributor-info-theme';
        const theme = localStorage.getItem(storageKey) || 'dark';
        
        // Apply theme immediately
        if (theme === 'system') {
          // Check system preference
          const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
          document.documentElement.classList.add(systemTheme);
        } else {
          document.documentElement.classList.add(theme);
        }
      })();
    </script>
    
    <!-- Critical CSS for above-the-fold content -->
    <style>
      /* Critical base styles */
      *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}
      ::before,::after{--tw-content:''}
      html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-feature-settings:normal;font-variation-settings:normal}
      body{margin:0;line-height:inherit}
      
      /* Critical theme variables - Updated to match src/index.css */
      :root{--background:210 20% 98%;--foreground:215 25% 27%;--card:0 0% 100%;--card-foreground:215 25% 27%;--primary:14 100% 50%;--primary-foreground:0 0% 100%;--secondary:210 20% 94%;--secondary-foreground:215 25% 27%;--muted:210 20% 94%;--muted-foreground:215 16% 47%;--border:220 13% 91%;--input:210 20% 96%;--ring:14 100% 50%;--radius:0.5rem}
      .dark{--background:0 0% 3.9%;--foreground:0 0% 98%;--card:0 0% 3.9%;--card-foreground:0 0% 98%;--primary:14 100% 50%;--primary-foreground:0 0% 100%;--secondary:0 0% 14.9%;--secondary-foreground:0 0% 98%;--muted:0 0% 14.9%;--muted-foreground:0 0% 63.9%;--border:0 0% 14.9%;--input:0 0% 14.9%;--ring:14 100% 50%}
      
      /* Critical layout utilities */
      .flex{display:flex}.grid{display:grid}.hidden{display:none}.min-h-screen{min-height:100vh}.h-screen{height:100vh}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-6xl{max-width:72rem}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.rounded-xl{border-radius:0.75rem}.rounded-lg{border-radius:0.5rem}.bg-background{background-color:hsl(var(--background))}.bg-card{background-color:hsl(var(--card))}.bg-secondary{background-color:hsl(var(--secondary))}.text-foreground{color:hsl(var(--foreground))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-muted-foreground{color:hsl(var(--muted-foreground))}.border{border-width:1px;border-color:hsl(var(--border))}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-center{text-align:center}.tracking-tight{letter-spacing:-0.025em}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}
      
      /* Button styles */
      .btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;rounded:calc(var(--radius) - 2px);font-size:0.875rem;font-weight:500;transition:colors 0.15s ease;cursor:pointer;border:none;outline:none}.btn:focus-visible{outline:2px solid;outline-offset:2px}.btn:disabled{pointer-events:none;opacity:0.5}.btn-primary{background-color:hsl(var(--primary));color:hsl(var(--primary-foreground))}.btn-primary:hover{background-color:hsl(var(--primary)/.9)}.btn-secondary{background-color:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}.btn-secondary:hover{background-color:hsl(var(--secondary)/.8)}
      
      /* Navigation styles */
      nav{border-bottom:1px solid hsl(var(--border));background-color:hsl(var(--background))}
      
      /* Prevent FOUC */
      body{background-color:hsl(var(--background));color:hsl(var(--foreground))}
      #root{min-height:100vh;background-color:hsl(var(--background))}
      
      /* Loading state */
      .loading-skeleton{background:linear-gradient(90deg,hsl(var(--muted)) 25%,hsl(var(--muted)/.5) 50%,hsl(var(--muted)) 75%);background-size:200% 100%;animation:loading 1.5s infinite}
      @keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}
    </style>
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://contributor.info/" />
    <meta property="og:title" content="Contributor.info" />
    <meta property="og:description" content="Visualize GitHub contributors and their contributions" />
    <meta property="og:image" content="https://contributor.info/api/social-cards" />
    <meta property="og:image:alt" content="Contributor.info - Visualizing Open Source Contributions" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    
    <!-- Fallback for social media platforms that don't support SVG -->
    <meta property="og:image" content="https://contributor.info/social.webp" />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="https://contributor.info/" />
    <meta property="twitter:title" content="Contributor.info" />
    <meta property="twitter:description" content="Visualize GitHub contributors and their contributions" />
    <meta property="twitter:image" content="https://contributor.info/api/social-cards" />
    <meta property="twitter:image:alt" content="Contributor.info - Visualizing Open Source Contributions" />
    <script type="module" crossorigin src="/js/index-DjvZ4Uuu.js"></script>
    <link rel="modulepreload" crossorigin href="/js/vendor-react-DB0db1pY.js">
    <link rel="stylesheet" crossorigin href="/css/index-pLHcYNHx.css">
  </head>
  <body>
    <div id="root"></div>
  
<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="49290020-1b2d-42c0-b1c9-ed386355493e" data-netlify-deploy-branch="main" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiNDkyOTAwMjAtMWIyZC00MmMwLWIxYzktZWQzODYzNTU0OTNlIiwiYWNjb3VudF9pZCI6IjU4ZGJlNGU1ZDY4NjVkNDVhNTgxODllMSIsImRlcGxveV9pZCI6IjY4OWI0MTQzNDYyMGZkMDAwODYxYjRhZCIsImlzc3VlciI6Im5mc2VydmVyIn0.6OpXql8VyfMEe74UF8q9k0NFGxT14kWidVdA3vfyifQ"></script></body>
</html>
