GitHub Sponsors Integration

This guide shows how GitHub Sponsors is integrated into the open-source version of Gitea Mirror.

Components

GitHubSponsors Card

A card component that displays in the sidebar or dashboard:

import { GitHubSponsors } from '@/components/sponsors/GitHubSponsors';

// In your layout or dashboard
<GitHubSponsors />

SponsorButton

A smaller button for headers or navigation:

import { SponsorButton } from '@/components/sponsors/GitHubSponsors';

// In your header
<SponsorButton />

Integration Points

1. Dashboard Sidebar

Add the sponsor card to the dashboard sidebar for visibility:

// src/components/layout/DashboardLayout.tsx
<aside>
  {/* Other sidebar content */}
  <GitHubSponsors />
</aside>

Add the sponsor button to the main navigation:

// src/components/layout/Header.tsx
<nav>
  {/* Other nav items */}
  <SponsorButton />
</nav>

3. Settings Page

Add a support section in settings:

// src/components/settings/SupportSection.tsx
<Card>
  <CardHeader>
    <CardTitle>Support Development</CardTitle>
  </CardHeader>
  <CardContent>
    <GitHubSponsors />
  </CardContent>
</Card>

Behavior

Only appears in self-hosted mode: The components automatically hide in hosted mode
Non-intrusive: Designed to be helpful without being annoying
Multiple options: GitHub Sponsors, Buy Me a Coffee, and starring the repo

Customization

You can customize the sponsor components by:

Updating the GitHub Sponsors URL
Adding/removing donation platforms
Changing the styling to match your theme
Adjusting the placement based on user feedback

Best Practices

Don't be pushy: Show sponsor options tastefully
Provide value first: Ensure the tool is useful before asking for support
Be transparent: Explain how sponsorships help the project
Thank sponsors: Acknowledge supporters in README or releases

2.0 KiB Raw Blame History