contributor.info/index.html at main · bdougie/contributor.info · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!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="mobile-web-app-capable" content="yes" />
    <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="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 for LCP -->
    <!-- Preconnect to critical domains for faster resource loading -->
    <link rel="preconnect" href="https://avatars.githubusercontent.com" crossorigin>
    <link rel="preconnect" href="https://egcxzonpmmcirmgqdrla.supabase.co" crossorigin>
    <!-- DNS prefetch as fallback for older browsers -->
    <link rel="dns-prefetch" href="https://avatars.githubusercontent.com">
    <link rel="dns-prefetch" href="https://egcxzonpmmcirmgqdrla.supabase.co">

    <!-- Modulepreload for critical vendor chunks -->
    <!-- Vite automatically injects the correct modulepreload links during build -->
    <!--vite-plugin-pwa:modulepreload-->
    <!--/vite-plugin-pwa:modulepreload-->

    <!-- 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>

    <!-- Inlined critical CSS for instant rendering (no additional request) -->
    <style>
      /* Critical base styles - inlined to eliminate render-blocking request */
      *,::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;tab-size:4;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
      body{margin:0;line-height:inherit}
      /* Critical theme variables */
      :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 for LCP - Home page H1 */
      .min-h-screen{min-height:100vh}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.space-y-6>:not([hidden])~:not([hidden]){margin-top:1.5rem}.max-w-2xl{max-width:42rem}.w-full{width:100%}.rounded-xl{border-radius:0.75rem}.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)}.p-6{padding:1.5rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-bold{font-weight:700}.text-center{text-align:center}.text-lg{font-size:1.125rem}.mt-2{margin-top:0.5rem}
      .bg-background{background-color:hsl(var(--background))}.bg-card{background-color:hsl(var(--card))}.bg-muted{background-color:hsl(var(--muted))}.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-border{border-color:hsl(var(--border))}.border-b{border-bottom-width:1px}
      .animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
      @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
      /* Prevent FOUC */
      body{background-color:hsl(var(--background));color:hsl(var(--foreground))}
      #root{min-height:100vh;background-color:hsl(var(--background));contain:style paint}
      /* Optimize LCP element rendering */
      h1{font-weight:700;text-rendering:optimizeLegibility;contain:layout style}
    </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-social-cards.fly.dev/social-cards/home" />
    <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" />


    <!-- 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-social-cards.fly.dev/social-cards/home" />
    <meta property="twitter:image:alt" content="Contributor.info - Visualizing Open Source Contributions" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
    </body>
</html>