我認為一般的 GitHub 貢獻圖還不夠。

所以我把自己的貢獻圖變成了一座城市。

而且我想分享給你,讓你也可以試試看。

Skyline

我做了一個 Skyline,這是一個小型的 Go CLI,可以把你的 GitHub 貢獻歷史轉換成 ASCII 城市。

每一週變成一棟建築。

每一天變成一扇窗戶。

如果那天你有貢獻,窗戶就會亮起來。越忙碌的日子顏色越亮,你最活躍的一週還會多一根小天線,最後整體看起來就像是一座由你的寫程式活動打造出來的小城市。

它可以直接在你的終端機中渲染,但我最喜歡的部分是,它也可以為你的 GitHub 個人檔案 README 產生動畫 SVG。

我的意思是,我的 GitHub 個人檔案確實需要一些基礎建設。

原理

貢獻圖和天際線的對應意外地很合。

每棟建築代表一週的活動量,而高度則取決於那一週的總貢獻數。

窗戶代表裡面的七天。

沒有活動的日子會保持黑暗:

·

有貢獻的日子則會亮起來:

▪

顏色強度會依照 GitHub 的貢獻等級變化,因此越活躍的日子,窗戶會越亮。

另外還有一些純裝飾性的元素,因為我實在忍不住。

天空中散布著星星,SVG 版本裡有些窗戶會閃爍,而最亮的星星則會閃耀。

這些動畫是可重現的,所以即使使用相同的貢獻資料重新生成,也不會每次都把你的城市完全重新排列。

當然也有主題

我先從 neon 開始,然後立刻做了那種完全可以預料到的事:再加更多主題。

Skyline themes

目前共有 12 種:

  • neon
  • synthwave
  • matrix
  • amber
  • ice
  • sunset
  • toxic
  • vapor
  • crimson
  • mono
  • prism
  • rainbow

你可以直接在終端機中預覽:

skyline -themes

並用以下指令選擇其中一種:

skyline -theme synthwave your-username

老實說,我根本無法做出一個終端機軟體卻最後不加入霓虹色,所以這件事其實是遲早的。

在本機執行

你需要 Go 1.25 或更新版本。

用以下指令安裝 Skyline:

go install github.com/pinkpixel-dev/skyline@latest

然後執行:

skyline your-username

Skyline 需要存取 GitHub API,但它會盡量讓驗證過程輕鬆一點。

它會檢查:

GITHUB_TOKEN
GH_TOKEN
gh auth token

所以如果你已經用 GitHub CLI 驗證過了,很可能不需要再做其他設定。

完整的城市寬度是 106 欄。如果你的終端機對這種安排沒那麼熱衷,你也可以只渲染較少的週數:

skyline -weeks 30 your-username

你也可以調整建築的最大高度:

skyline -height 10 your-username

產生 SVG

如果你要建立可用在網站或 GitHub 個人檔案上的版本:

skyline -svg skyline.svg your-username

或者把選項組合起來:

skyline -theme prism -svg skyline.svg your-username

這樣會產生動畫 SVG 版本,而不是把城市輸出到終端機。

動畫也會尊重 prefers-reduced-motion,所以如果有人啟用了減少動態效果,它就會保持靜態。

放到你的 GitHub 個人檔案上

這大概是我最喜歡的用途。

你可以讓 GitHub Actions 每晚自動重新生成你的城市,讓天際線隨著你的貢獻圖一起變化。

你的 GitHub 個人檔案 README 會位於一個和你的使用者名稱同名的儲存庫中:

github.com/your-username/your-username

在那個儲存庫裡,建立:

.github/workflows/skyline.yml

接著加入:

name: skyline

on:
  schedule:
    - cron: "17 3 * * *"
  workflow_dispatch:

permissions:
  contents: write

jobs:
  skyline:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/setup-go@v7
        with:
          go-version: stable

      - name: Draw skyline
        env:
          GITHUB_TOKEN: ${{ secrets.SKYLINE_TOKEN || secrets.GITHUB_TOKEN }}
        run: go run github.com/pinkpixel-dev/skyline@latest -theme neon -svg skyline.svg "${{ github.repository_owner }}"

      - name: Publish to output branch
        env:
          TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          mkdir out && mv skyline.svg out/ && cd out
          git init -q -b output
          git add skyline.svg
          git -c user.name="github-actions[bot]" \
              -c user.email="41898282+github-actions[bot]@users.noreply.github.com" \
              commit -qm "Update skyline"
          git push -qf "https://x-access-token:${TOKEN}@github.com/${{ github.repository }}.git" output

你可以把:

-theme neon

換成你想要的任何主題。

提交 workflow 後,打開 GitHub 上的 Actions 分頁,手動執行一次 skyline workflow。

這樣就會建立包含 skyline.svg 的 output 分支。

接著把這段加到你的個人檔案 README:

![My skyline](https://raw.githubusercontent.com/YOUR-USERNAME/YOUR-USERNAME/output/skyline.svg)

把 YOUR-USERNAME 換成你的實際 GitHub 使用者名稱。

之後這個 workflow 就會在每晚自動重新繪製它。

產生出來的 SVG 會放在獨立的 output 分支上,所以你的個人檔案儲存庫主分支也不會被一整年的 "update skyline" 提交紀錄塞滿。

那私密貢獻呢?

這個 workflow 預設會使用 GitHub 內建的 Actions token。

依照 GitHub 透過該 token 會公開哪些貢獻資料,你可能會發現你的天際線看起來比你登入後看到的貢獻圖還要空一些。

如果發生這種情況,你可以建立一個具有 read:user scope 的經典個人存取權杖,並將它加到個人檔案儲存庫中,作為一個名為以下內容的密鑰:

SKYLINE_TOKEN

當這個值可用時,workflow 會自動改用它。

有必要嗎?

大概沒有。不過很好玩。

為什麼不把我們已經一直在看的資料,變成更有趣一點的東西呢?貢獻圖很實用,但把整整一年轉換成這座閃閃發光的小城市,感覺就更有個人特色了。

而且因為它只是個 SVG,一旦 Action 設定完成之後,基本上也不需要再維護什麼。你的天際線只會隨著你的工作持續變化。

所以啊,如果你也做一個放到自己的個人檔案上,我真的很想看看!

這個專案的開源程式碼在這裡:

github.com/pinkpixel-dev/skyline


原文出處:https://dev.to/sizzlebop/turn-your-github-contribution-graph-into-an-ascii-city-ic5


精選技術文章翻譯,幫助開發者持續吸收新知。

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。
🏆 本月排行榜
🥇
站長阿川
📝49   💬2  
689
評分標準:發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10
本數據每小時更新一次
📢 贊助商廣告 · 我要刊登