Без Vercel і стороннього backend: як я зробив власний GitHub contribution graph

💡 Усі статті, обговорення, новини про DevOps — в одному місці. Приєднуйтесь до DevOps спільноти!

Кілька місяців тому графік активності, який я використовував у своєму GitHub Profile README, почав періодично падати через помилки стороннього сервісу.

Найпростіше рішення — знайти ще один hosted endpoint і просто замінити URL.

Але тоді архітектурно нічого не змінюється: README все одно залежить від зовнішнього сервісу, який рендерить картинку в момент запиту.

Тому я пішов іншим шляхом і зробив Deus Commit Chart.

Ідея проста:

GitHub API / local Git → GitHub Action → static SVG → README

Графік генерується заздалегідь і публікується як звичайний статичний файл. README більше не потребує живого chart backend.

Якщо наступний workflow впаде, попередній SVG нікуди не зникає — профіль продовжує нормально рендеритися.

Що вийшло

Інструмент зараз підтримує:

  • GitHub contribution calendar;
  • локальні Git-репозиторії;
  • 30 / 90 / 365 днів;
  • статичні README-safe SVG;
  • self-contained interactive HTML report;
  • configurable themes і layouts;
  • 7-day moving average;
  • GitHub Actions;
  • роботу без runtime charting backend.

Для GitHub source використовується GraphQL contribution calendar. При цьому в output потрапляють агреговані денні значення, а не назви приватних репозиторіїв чи commit messages.

Чому саме static SVG

Тут є цікавий компроміс.

Інтерактивний HTML може перемикати 30/90/365 днів прямо в браузері, але GitHub Profile README не виконує довільний JavaScript всередині embedded image.

Тому для README генеруються окремі SVG:

activity-30d.svg

activity-90d.svg

activity-365d.svg

А інтерактивна версія залишається окремим HTML report.

В результаті README отримує максимально простий dependency chain: фактично просто URL статичного SVG.

GitHub Action

Зараз інструмент можна використати як reusable Action:

- name: Generate contribution charts   uses: dturovskiy/deus-commit-chart@v1   with:     username: ${{ github.repository_owner }}     token: ${{ github.token }}     default-days: '30'     ranges: '30,90,365'

Сам Action навмисно тільки генерує artifacts і не force-push’ить нічого самостійно. Publishing залишається під контролем workflow, який його викликає.

Для мене це важлива межа: reusable Action не повинен отримувати більше контролю над чужим repository, ніж йому реально потрібно.

Що з цього виросло

Спочатку це був маленький скрипт для власного GitHub профілю.

Потім додались GitHub GraphQL source, SVG renderer, interactive HTML, reusable Action, CI, документація, privacy/EULA і окремий publishing workflow.

Зараз Deus Commit Chart опублікований у GitHub Marketplace і доступний як open-source проєкт під MIT.

GitHub: github.com/...​rovskiy/deus-commit-chart

Marketplace: github.com/...​actions/deus-commit-chart

Буде цікаво почути думки тих, хто підтримує GitHub Profile README, пише reusable Actions або мав подібні проблеми із залежністю від сторонніх dynamic-image сервісів.

👍ПодобаєтьсяСподобалось2
До обраногоВ обраному1
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter