The GitHub homepage features a very nice rotating 3D globe, augmented with realtime data shooting around. Here’s how they built it:
At the most fundamental level, the globe runs in a WebGL context powered by three.js. We feed it data of recent pull requests that have been created and merged around the world through a JSON file. The scene is made up of five layers: a halo, a globe, the Earth’s regions, blue spikes for open pull requests, and pink arcs for merged pull requests. We don’t use any textures: we point four lights at a sphere, use about 12,000 five-sided circles to render the Earth’s regions, and draw a halo with a simple custom shader on the backside of a sphere.
When embedding a GitHub Gist using a script tag, its contents gets injected into your page’s DOM. As the injected wrapper node has a .gist class, it’s perfectly possible to customize the appearance on your own site. Will Boyd walks us through it.
Will also created a repository with several pre-built themes. Simply add one of the CSS files to your page, and you’re good to go.
When you run act it reads in your GitHub Actions from .github/workflows/ and determines the set of actions that need to be run. It uses the Docker API to either pull or build the necessary images, as defined in your workflow files and finally determines the execution path based on the dependencies that were defined. Once it has the execution path, it then uses the Docker API to run containers for each action based on the images prepared earlier. The environment variables and filesystem are all configured to match what GitHub provides.
Installation per brew (if you’re on Mac):
brew install nektos/tap/act
Once installed, run act and you’re good to go …
# List the actions
# Run the default (`push`) event:
# Run a specific event:
# Run a specific job:
act -j test
# Run in dry-run mode:
# Enable verbose-logging (can be used with any of the above commands)
Sebastian his website supports Webmentions. To show these on his website he used a tad of JS to display them underneath each page. Not being 100% happy with that flow, he sought a better way to implement these …
After some tinkering, I came up with an alternative: a cron-based GitHub Action that queries webmention.io for new webmentions. The Action then commits them to my site’s repository, so I can access the data with my static site generator, Hugo.