GitHub Skyline — Your GitHub Story in 3D

Nice in-browser 3D-render of your GitHub History. You can download the result as a .stl file to run it through your 3D printer.

Here’s my 2020 timeline for example:

I take pride in the fact that my Saturdays (front row) and Sundays (back row) remain as good as empty, and that there’s an occasional gap in between the blocks where I took some time off.

GitHub Skyline →

GitHub1s — One second to read GitHub code with VS Code

This tool — not endorsed nor affiliated with GitHub — lets you quickly load any GitHub repo in an online hosted Visual Studio Code environment.

Just add 1s after github and press Enter in the browser address bar for any repository you want to read.

Note that this is a *viewer* only, no editing. For that you’ll need to wait on GitHub Codespaces or run VSCode in the cloud yourself.

GitHub1s →

How we built the GitHub globe

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.

How we built the GitHub globe →

Customizing GitHub Gist Embeds

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.

@import url('https://cdn.rawgit.com/lonekorean/gist-syntax-themes/848d6580/stylesheets/monokai.css');

Customizing GitHub Gists →
Gist Syntax Themes →

Automatically update your GitHub readme through GitHub Actions

Pawel Grzybek has set up a workflow that uses GitHub Actions’ Scheduled Events to automatically update his profile README.md. It runs every 6 hours and pulls in his RSS feed to populate the README.md

import fs from "fs";
import fetch from "node-fetch";
import parser from "xml2json";

const FEED_URL = "https://pawelgrzybek.com/feed.xml";
const TAG_OPEN = `<!-- FEED-START -->`;
const TAG_CLOSE = `<!-- FEED-END -->`;

const fetchArticles = async () => {
  const articles = await fetch(FEED_URL);
  const articlesText = await articles.text();
  const articlesJSON = parser.toJson(articlesText);
  const newC = JSON.parse(articlesJSON).rss.channel.item.slice(0, 5);

  return newC.map(({ title, link }) => `- [${title}](${link})`).join("\n");
};

async function main() {
  const readme = fs.readFileSync("./README.md", "utf8");
  const indexBefore = readme.indexOf(TAG_OPEN) + TAG_OPEN.length;
  const indexAfter = readme.indexOf(TAG_CLOSE);
  const readmeContentChunkBreakBefore = readme.substring(0, indexBefore);
  const readmeContentChunkBreakAfter = readme.substring(indexAfter);

  const posts = await fetchArticles();

  const readmeNew = `
${readmeContentChunkBreakBefore}
${posts}
${readmeContentChunkBreakAfter}
`;

  fs.writeFileSync("./README.md", readmeNew.trim());
}

try {
  main();
} catch (error) {
  console.error(error);
}

Fetch most recent posts to your GitHub profile page using GitHub workflow and Node.js →

💡 People have been doing lots of nice stuff with their README’s. There’s a curated list to be found at matiassingers/awesome-readme (and plenty of others if you search for them)

Run your GitHub Actions locally with act

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
act -l

# Run the default (`push`) event:
act

# Run a specific event:
act pull_request

# Run a specific job:
act -j test

# Run in dry-run mode:
act -n

# Enable verbose-logging (can be used with any of the above commands)
act -v

act

Webmentions on a static site with GitHub Actions

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.

Clever!

Webmentions on a static site with GitHub Actions →

🔥 Those “GitHub Cron Jobs” once again prove to be really powerful. You can even use them to trigger a Netlify build on a daily basis.

RSS Feeds for GitHub Project Releases and User Activity

As an extra to RSS feed for youtube channels and GitHub projects, Pawel notes that it’s also possible to get a feed for the releases published in GitHub Projects.

GitHub gives us RSS feeds for project releases and tags. Thats my preferred way of finding out about my followed projects fixed bugs and new features.

https://github.com/{{username}}/{{repository}}/releases.atom
https://github.com/{{username}}/{{repository}}/tags.atom

Ah, that I didn’t know!

I noticed that this also works for user activity feeds btw. Just like you can append .keys to any GitHub User Profile Page to see their public keys, you can append .atom to get their (public) activity feed.

https://github.com/{{username}}.atom

Here’s my activity feed for example: https://github.com/bramus.atom

RSS feed for youtube channels and GitHub projects →

Easily Build and push Docker images with the `build-push-action` GitHub Action

The Docker folks have released their first GitHub Action build-push-action which builds and pushes Docker images and will log in to a Docker registry if required.

Building and pushing an image becomes really easy:

uses: docker/build-push-action@v1
with:
  username: ${{ secrets.DOCKER_USERNAME }}
  password: ${{ secrets.DOCKER_PASSWORD }}
  repository: myorg/myrepository
  tags: latest

Amongst other options you can also define a registry, which defaults to the Docker Hub.

Build and push Docker images GitHub Action →

Draft your next release notes as pull requests are merged into master with Release Drafter

Now this looks handy: a GitHub action that builds release notes for you:

As pull requests are merged, a draft release is kept up-to-date listing the changes, ready to publish when you’re ready

You configure the release notes contents using a .github/release-drafter.yml file in your repo:

template: |
  ## What’s Changed

  $CHANGES

More advanced templates are also possible:

name-template: 'v$NEXT_PATCH_VERSION 🌈'
tag-template: 'v$NEXT_PATCH_VERSION'
categories:
  - title: '🚀 Features'
    labels:
      - 'feature'
      - 'enhancement'
  - title: '🐛 Bug Fixes'
    labels:
      - 'fix'
      - 'bugfix'
      - 'bug'
  - title: '🧰 Maintenance'
    label: 'chore'
change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
template: |
  ## Changes

  $CHANGES

The template above yields this kind of result:

Nice!

Release Drafter →