Hoe de groei van open source-projecten volgen met Star History

Bij het kiezen van een bibliotheek voor een nieuw project of het vergelijken van alternatieven kan de stertelling op GitHub misleidend zijn. Vijfduizend sterren op een project van vijf jaar oud en vijfduizend sterren op een repository die zes maanden geleden is gelanceerd, vertellen totaal verschillende verhalen. De eerste heeft mogelijk een verlaten maintainer, terwijl de tweede explosieve groei ervaart met een actieve instroom van bijdragers.

GitHub zelf toont alleen de huidige stertelling. Het platform biedt geen historische trendgegevens out of the box. Daarom vertrouwt de community al lang op Star History — een tool die ruwe cijfers omzet in visuele grafieken van populariteit.

Wat de service kan doen

Het project draait als een webservice op star-history.com, maar alle broncode is open onder de MIT-licentie. Je voert een repositorynaam in en ziet direct de curve van sterren die in de loop van de tijd zijn verzameld.

Hier zijn de belangrijkste dingen waar mensen het voor gebruiken:

• xkcd-stijl stripgrafieken. De lijnen zien er een beetje handgetekend en informeel uit, waardoor de grafieken direct herkenbaar zijn in presentaties en artikelen.
• Vergelijk meerdere repositories op één scherm. Je kunt concurrentiegrafieken over elkaar heen leggen (bijvoorbeeld Vue vs. React en Svelte) en precies zien wanneer een trendomkering plaatsvond.
• Schakel weergavemodi. Je kunt gegevens bekijken op exacte kalenderdatums of uitlijnen op een tijdlijn vanaf de aanmaakdatum van elke repository.
• Inbedbare live SVG-grafieken en badges voor README-bestanden.

Hoe een grafiek in je README in te bedden

Veel populaire bibliotheekauteurs bedden de stergeschiedenisgrafiek direct in de projectbeschrijving in. Dit toont bezoekers direct het groeitempo van de community.

Dit wordt gedaan door de API van de service aan te roepen. Hier is hoe de markup eruitziet met ondersteuning voor donkere en lichte thema's:

<a href="https://star-history.com/#your-username/your-repo&Date">
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=your-username/your-repo&type=Date&theme=dark" />
   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=your-username/your-repo&type=Date" />
   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=your-username/your-repo&type=Date" />
 </picture>
</a>

Naast grafieken genereert de service compacte badges die de globale rang van de repository tonen.

Wat er onder de motorkap zit

De codebase van het project is opgesplitst in frontend, browserextensie en backend.

De frontend is geschreven in TypeScript met Next.js en gestyled met Tailwind CSS. De ontwikkelaars gebruiken de pnpm-pakketbeheerder.

Om de frontend lokaal te draaien:

cd frontend
pnpm install
pnpm dev

Daarna is de webinterface beschikbaar op http://localhost:3000.

Voor de backend, die SVG-grafiekafbeeldingen on the fly genereert, wordt een aparte service gebruikt:

cd backend
pnpm install
pnpm dev

De API-server draait op poort 8080.

Een interessant detail: de README stelt expliciet dat de auteurs geen externe pull requests accepteren (We do not accept external contribution). Het project wordt onderhouden door een specifiek team, dus als je aangepaste wijzigingen nodig hebt, moet je de repository voor jezelf forken.

Chrome-extensie

Als je niet elke keer de website wilt bezoeken, biedt het project een Chrome-browserextensie.

Het voegt een geschiedenisweergavetoets toe direct op de pagina van elke GitHub-repository. Je kunt het vanuit de broncode bouwen met een enkele opdracht in de frontend-map:

cd frontend
pnpm build:ext

De kant-en-klare bundle komt in de ./dist-map, vanwaar je hem als uitgepakte extensie in ontwikkelaarsmodus in de browser kunt laden.

Praktische scenario's

In het dagelijkse werk is Star History nuttig in vier veelvoorkomende situaties:

1. Afhankelijkheidsgezondheid beoordelen. Een scherpe daling in de sterverwervingssnelheid valt vaak samen met het moment waarop de auteurs het project hebben verlaten of zijn gestopt met reageren op issues.
2. Presentaties en talks voorbereiden. Een xkcd-stijl grafiek is een geweldige manier om droge technische slides op te fleuren.
3. Post-release marketinganalyse. Je hebt een project gelanceerd op Hacker News of Product Hunt en wilt de publieksrespons visueel zien in de daaropvolgende dagen.
4. Kiezen tussen vergelijkbare bibliotheken. Wanneer je moet kiezen tussen twee hulpprogramma's met vergelijkbare functionaliteit, helpt een grafiek je te begrijpen welke momentum wint en welke geleidelijk vervaagt.

Sponsors en ecosysteem

Het project wordt actief ondersteund door commerciële bedrijven in de open source-ruimte, waaronder Bytebase, Dify, SerpApi en pgplex.

Star History lost één specifiek probleem op zonder onnodige complexiteit. De service draait snel, laat je afbeeldingen met een paar klikken exporteren en integreert gemakkelijk in documentatie.

Als je een open repository onderhoudt of regelmatig andermans code analyseert, houd de site dan als bladwijzer opgeslagen of installeer de browserextensie. Dit bespaart tijd bij het evalueren van bibliotheken en helpt je de groeisnelheid van je eigen projecten te volgen.