Skip to content

Add GitHub star/fork buttons with counts #36

Description

@michaeldistel

Problem

No GitHub integration on website:

  • Users don't know extension is open source
  • No way to star/fork from website
  • Missing community engagement

Solution

Add GitHub buttons using official GitHub API:

<!-- src/lib/components/GitHubButtons.svelte -->
<script>
  import { onMount } from 'svelte';
  
  let stars = 0;
  let forks = 0;
  
  onMount(async () => {
    const response = await fetch(
      'https://api.github.com/repos/ControlForge-Systems/controlforge-vscode'
    );
    const data = await response.json();
    stars = data.stargazers_count;
    forks = data.forks_count;
  });
</script>

<div class="github-buttons">
  <a 
    href="https://github.com/ControlForge-Systems/controlforge-vscode"
    class="github-button"
    target="_blank"
    rel="noopener noreferrer"
  >
    <svg><!-- GitHub icon --></svg>
    <span>Star</span>
    <span class="count">{stars}</span>
  </a>
  
  <a 
    href="https://github.com/ControlForge-Systems/controlforge-vscode/fork"
    class="github-button"
    target="_blank"
    rel="noopener noreferrer"
  >
    <svg><!-- Fork icon --></svg>
    <span>Fork</span>
    <span class="count">{forks}</span>
  </a>
</div>

<style>
  .github-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5da;
    border-radius: 6px;
    background: white;
    color: #24292e;
    text-decoration: none;
    font-size: 0.875rem;
  }
  
  .count {
    background: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
  }
</style>

Alternative: Use GitHub Buttons Widget

Simpler but less customizable:

<iframe 
  src="https://ghbtns.com/github-btn.html?user=ControlForge-Systems&repo=controlforge-vscode&type=star&count=true&size=large" 
  frameborder="0" 
  scrolling="0" 
  width="170" 
  height="30" 
  title="GitHub Stars"
></iframe>

Placement

  • Header (right side)
  • Footer
  • Homepage hero section
  • Documentation sidebar

Features

  • Real-time counts from GitHub API
  • Cached (localStorage, 1 hour)
  • Hover effects
  • External link indicators
  • Mobile responsive

Success Criteria

  • GitHub buttons visible on homepage
  • Star/fork counts display correctly
  • Links open in new tab
  • API cached to avoid rate limits
  • Works without JavaScript (show button without count)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    effort: smallQuick wins, <1 day effortfeatureNew featurepriority: mediumImportant but not urgentux/uiUser experience/interface

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions