Skip to main content

​
Sharing Features

GitHub Wrapped includes built-in sharing capabilities to help users showcase their year-in-code achievements on social media and share links with friends and colleagues.

​
Social Media Sharing

​
Twitter/X Integration

Every wrapped visualization includes a dedicated “Share on X” button that opens a pre-populated tweet. Implementation (components/WrappedSlide.tsx:1225-1236): 
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
  `Check out ${data.repository.name}'s ${data.year} Wrapped! 🎉`
)}&url=${encodeURIComponent(
  typeof window !== "undefined" ? window.location.href : ""
)}`}
User Experience:
  1. User clicks “Share on X” button on the final slide
  2. Opens Twitter in a new tab with pre-filled tweet
  3. Tweet includes:
    • Custom message with repository name and year
    • Direct link to the wrapped visualization
    • Celebratory emoji

​
Tweet Customization

`Check out ${data.repository.name}'s ${data.year} Wrapped! 🎉`
Example: “Check out facebook/react’s 2024 Wrapped! 🎉”
Styling:
  • Blue background (#1DA1F2 - Twitter brand color)
  • White text
  • Hover animation (scale: 1.05)
  • Tap animation (scale: 0.95)
  • Shadow effect for depth

​
Clipboard API Integration

The “Copy Link” button allows users to quickly copy the wrapped URL to their clipboard. Implementation (components/WrappedSlide.tsx:1241-1246): 
onClick={() => {
  if (typeof window !== "undefined" && navigator.clipboard) {
    navigator.clipboard.writeText(window.location.href);
    alert("Link copied!");
  }
}}
Features:
  • Uses modern Clipboard API
  • Checks for browser support before attempting
  • Provides immediate feedback via alert
  • Copies current page URL
Styling:
  • Border color matches slide theme
  • Text color matches slide theme
  • Hover and tap animations
  • Rounded full button style

​
Browser Compatibility

The Clipboard API requires a secure context (HTTPS) in production. The code includes safety checks to gracefully handle unsupported browsers.
Fallback Behavior: If navigator.clipboard is unavailable, the button click has no effect. Consider implementing a fallback: 
// Potential enhancement
if (navigator.clipboard) {
  navigator.clipboard.writeText(url);
} else {
  // Fallback: select text in hidden input
  const input = document.createElement('input');
  input.value = url;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
}

​
Open Graph Image Generation

GitHub Wrapped automatically generates Open Graph (OG) images for rich social media previews.

​
OG Image Endpoint

Route: /api/og/route.tsx Runtime: Edge (Vercel) 
export const runtime = 'edge';

export async function GET(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams;
  const owner = searchParams.get('owner') || '';
  const repo = searchParams.get('repo') || '';
  const year = searchParams.get('year') || new Date().getFullYear().toString();
  
  return new ImageResponse(/* ... */);
}

​
Parameters

ParameterTypeRequiredDescription
ownerstringYesRepository owner username
repostringYesRepository name
yearstringNoYear (defaults to current year)
Example URL: 
https://yourapp.com/api/og?owner=facebook&repo=react&year=2024

​
Image Design

The OG image features:

​
Dimensions

  • Width: 1200px
  • Height: 630px
  • Optimized for Twitter, Facebook, LinkedIn

​
Visual Elements

Background

  • Dark theme (zinc-950: #09090b)
  • Radial gradient overlay
  • Subtle grid pattern (50px squares)

Content Card

  • Centered card with border
  • Semi-transparent background
  • Rounded corners (30px)
  • Drop shadow for depth

GitHub Icon

  • SVG icon (48x48px)
  • Stroke-based design
  • Positioned next to “GitHub Wrapped” text

Typography

  • Large repository name (72px, bold)
  • Year badge with pill styling
  • “GitHub Wrapped” branding

​
Color Scheme

background: #09090b (zinc-950)
gradient: radial-gradient(circle at 50% 0%, #27272a 0%, #09090b 75%)
text: #ffffff (white)
accent: #e4e4e7 (zinc-200)
border: #3f3f46 (zinc-700)

​
Implementation Using @vercel/og

import { ImageResponse } from '@vercel/og';

return new ImageResponse(
  (
    <div style={{ /* styles */ }}>
      {/* SVG icon */}
      <svg>...</svg>
      
      {/* Repository name */}
      <div>{owner}/{repo}</div>
      
      {/* Year badge */}
      <div>{year} Year in Review</div>
    </div>
  ),
  {
    width: 1200,
    height: 630,
  }
);
The @vercel/og library uses Satori under the hood to convert React components to SVG, then to PNG. It supports a subset of CSS and HTML.

​
Meta Tags Integration

​
Repository Wrapped Metadata

The wrapped page automatically includes rich meta tags (app/wrapped/[owner]/[repo]/[year]/page.tsx:91-134): 
export async function generateMetadata({ params }: PageProps) {
  const { owner, repo, year } = await params;
  const title = `${owner}/${repo} - ${year} Wrapped`;
  const description = `Check out ${owner}/${repo}'s ${year} GitHub Wrapped! See commits, contributors, growth, and more.`;
  
  const ogImage = new URL(
    `/api/og?owner=${encodeURIComponent(owner)}&repo=${encodeURIComponent(repo)}&year=${year}`,
    baseUrl
  ).toString();
  
  return {
    title,
    description,
    openGraph: {
      title,
      description,
      type: "website",
      url: pageUrl,
      images: [ogImage],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [ogImage],
    },
  };
}

​
Rendered HTML

This generates the following meta tags: 
<!-- Open Graph -->
<meta property="og:title" content="facebook/react - 2024 Wrapped" />
<meta property="og:description" content="Check out facebook/react's 2024 GitHub Wrapped!" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yourapp.com/wrapped/facebook/react/2024" />
<meta property="og:image" content="https://yourapp.com/api/og?owner=facebook&repo=react&year=2024" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="facebook/react - 2024 Wrapped" />
<meta name="twitter:description" content="Check out facebook/react's 2024 GitHub Wrapped!" />
<meta name="twitter:image" content="https://yourapp.com/api/og?owner=facebook&repo=react&year=2024" />

​
Social Media Previews

  • Uses summary_large_image card type
  • Displays 1200x630 image
  • Shows title and description below image
  • Includes site name if configured

​
Share Button Positioning

Sharing options appear on the final slide of both repository and user wrapped stories. Layout: 
<div className="flex flex-col sm:flex-row gap-6 w-full max-w-lg">
  <a href="twitter://..." className="flex-1">
    Share on X
  </a>
  
  <button onClick={copyLink} className="flex-1">
    Copy Link
  </button>
</div>
Responsive Design:
  • Mobile (< 640px): Stacked vertically
  • Desktop: Side-by-side
  • Equal flex distribution
  • Consistent gap spacing

​
Future Enhancements

More Platforms

Add LinkedIn, Reddit, Hacker News sharing buttons

Custom OG Images

Generate personalized OG images with actual stats

Download as Image

Export wrapped slides as PNG/SVG

Embed Codes

Provide iframe embeds for websites/blogs

Build docs developers (and LLMs) love

Get started for freeTalk to us