DEV Community

Arthur031221
Arthur031221

Posted on

I turned a GitHub star count into a sky you can drag into shape

#opensource #showdev #ai

A star count is easy to paste and hard to feel. When a project of mine passes a milestone I want to thank the people behind the number, and a screenshot of the counter does not do that. So I built Beholden, a small page that reads a public repository's star count and turns it into a thank-you sky you can reshape.

Beholden: clear the sky, drag three stars, join them, write a line, read a repo, save the picture, open the link

What it does

You paste owner/repo or a github.com link. The page asks the GitHub API for the star count, once, with no token. Then you drag the stars into a shape, tap one star and then another to join them, write one line of up to 40 characters, and save a 1080 by 1350 PNG or copy a link.

The picture always prints the exact count and the time it was read. The small print says the star positions are decoration, so nobody mistakes the sky for a chart of who starred.

How the link works

The whole sky is one small object: a theme, the repository and its count, when it was read, the caption, 64 points and up to 32 lines. I pack it into a binary record and put it in the URL fragment, which browsers never send to a server. The demo sky's whole link is 475 characters and the largest possible one is 888. A friend who opens the link sees a dated snapshot, and the page does not ask GitHub for anything.

Embedding the renderer

The drawing code is a separate ES module. This is the whole example:

<canvas id="sky"></canvas>
<script type="module">
  import { renderScene, newScene } from 'https://cdn.jsdelivr.net/gh/Arthur031221/Beholden@main/dist/renderer.js'
  renderScene(document.getElementById('sky'), newScene({ theme: 'night', caption: 'Thank you' }))
</script>
Enter fullscreen mode Exit fullscreen mode

What is rough

Chinese captions use the device's own fonts. The read time comes from the device clock because GitHub does not expose its Date header to pages. Unauthenticated reads are limited to 60 an hour. I tested touch with emulation, not on a real phone, and I would like to hear what breaks.

Live page: https://arthur031221.github.io/Beholden/

Source, MIT: https://github.com/Arthur031221/Beholden

Top comments (0)