The official GitHub Skyline web app https://skyline.github.com/ is down.

So I decided to make a clone of this project.

• 3D model
• Contribution Year
• Embed with iframe
• Provide your own API Token
• Contribution by Date (given a start date and an end date)
• Git Providers
  • GitHub
  • GitLab
  • Gitee

I thought about supporting other git providers like GitLab... But personally I only use GitHub. If there are more people requesting support for other platforms, I will consider implementing it. Feel free to send a PR for new features if you are willing to contribute.

You can embed git-skyline webpage into your own web page using iframe with options to disable zoom, pan, auto-rotate, without the header/footer on the page.

https://huakunshen.com/ and https://huakun.tech are examples of the embeded git skyline.

Click on the "Embed Page" button, it will take you to another web page with the 3D model alone. Put the url in an iframe.

<iframe
  src="https://git-skyline.huakun.tech/contribution/github/huakunshen/embed?year=2023&enableZoom=false"
  width="100%"
  height="100%"
  frameborder="0"
></iframe>

The model by default enables auto-rotate, damping, panning, zoom interations, and disable model base. Sometimes you may not want these interactions on your web page.

You can simply add search params into the url

e.g. ?enableZoom=false&enableZoom=false&enablePan=false&enableDamping=false&autoRotate=false&autoRotateSpeed=1

If you want to print the model, you may want to enable the model base so that the pillars are connected with the base. You can enable it by adding &base=true in the search params. By default, the model base is disabled to make the model looks better on a web page.

See source code for how the search parameters are used.

GitHub API requires API token, I am using my own token on server. To reduce cost and avoid flooding GitHub API (I may be banned), I implemented some simple in-memory caching to keep data in memory for ~1-2 days.

But it's possible for my API Token to be banned by GitHub due to massive amount of request.

In that case, if you are embeding this web app in your web page, you can provide your own GitHub token to avoid service down by adding the token in search params

e.g. &token=github_pat_<123456>

Generate a GitHub API token at https://github.com/settings/tokens.

Use a fine-grained token without any extra permission.

This project is just a small side project my website depends on. It may not be stable (in terms of up speed and API). If you want a stable service, consider deploying your own. I didn't spend money for cache service, so it's technically possible that the app could crash due to memory overflow if too many people are using it.

I will consider scaling up the service in the future if necessary.

This project was developed with pnpm workspace and turbo repo.

The apps/web package requires environment variable to properly run.

Create a .env.local file in apps/web folder with the following content:

GITHUB_API_TOKEN=github_pat_xxxxxx

The GITHUB_API_TOKEN can be generated https://github.com/settings/tokens?type=beta (no extra permission required, just get a fine-grained access tokens).

Also put the same environment variable in packages/github-graphql folder as graphql schema requires pulling data from GitHub API.

If you don't want to create any extra file, simple use export GITHUB_API_TOKEN=github_pat_xxxxxx in your terminal.

This project uses turbo to build the monorepo.

pnpm build

This is only for author of this project. If you want to deploy your own web app, you can simply deploy the apps/web package.

This purpose for deploying these packages is because I want to use the same packages in my other projects.

To deploy the 2 packages in packages/github-graphql and packages/common, cd into the directories and run npm publish.

The web app is deployed using Vercel with zero config.

• Framework Preset: Next.js
• Build Command: cd ../.. && turbo run build
• Output Directory: Next.js default
• Install Command: pnpm install
• Development Command: next
• Root Directory: apps/web