GitHub 프로필을 멋지게! 오픈소스 기여 내역 자동 표시
GitHub 프로필에 오픈소스 기여 내역을 시각적으로 보여주는 위젯(Widget)을 소개
GitHub Actions을 활용하여 외부 오픈소스 프로젝트에 머지된 PR(Pull Request)을 자동 수집
SVG(Scalable Vector Graphics) 형식으로 기여 내역을 생성하여 프로필에 표시
다크/라이트 테마 자동 감지 및 org/user 필터링 등 다양한 커스터마이징 옵션 제공
GitHub Actions 기반 자동화 아키텍처
본 글에서는 GitHub Actions(GitHub Actions)를 사용하여 오픈소스 기여 내역을 자동으로 업데이트하는 방식을 설명한다.
GitHub Search API(GitHub Search API)를 통해 외부 기여 PR(Pull Request)을 검색하고, 검색 결과를 SVG(Scalable Vector Graphics)로 변환
매일 3번 자동 실행되도록 스케줄링하여 프로필을 최신 상태로 유지
GitHub Actions(GitHub Actions)의 Read and write permissions 설정을 통해 레포지토리에 SVG 파일을 자동 커밋
이러한 자동화 방식은 개발자가 수동으로 기여 내역을 관리하는 번거로움을 줄여준다.
SVG(Scalable Vector Graphics) 기반 시각화
글에서는 SVG(Scalable Vector Graphics)를 사용하여 오픈소스 기여 내역을 시각적으로 표현한다.
SVG(Scalable Vector Graphics)는 벡터 기반 이미지 형식으로, 해상도에 관계없이 선명한 이미지를 제공
다크/라이트 테마 자동 감지 기능을 통해 GitHub 테마에 맞춰 색상을 자동 변경
CSS의 @media (prefers-color-scheme: dark) 미디어 쿼리를 활용하여 테마를 구현
SVG(Scalable Vector Graphics)를 사용하면 프로필 페이지의 로딩 속도를 개선하고, 다양한 스타일을 적용할 수 있다.
GitHub Search API(GitHub Search API) 쿼리 분석
본문에서는 GitHub Search API(GitHub Search API)를 사용하여 외부 기여 PR(Pull Request)을 필터링하는 방법을 설명한다.
`author:{username}`: 특정 사용자가 작성한 PR 검색
`type:pr`: PR(Pull Request)만 검색
`is:merged`: 머지된 PR(Pull Request)만 검색
`-user:{username}`: 본인 레포지토리 제외
이 쿼리를 통해 정확한 기여 내역을 추출하고, 프로필에 표시할 수 있다.
커스터마이징 옵션 및 확장성
글에서는 다양한 커스터마이징 옵션을 제공하여 사용자의 요구에 맞게 프로필을 설정할 수 있도록 한다.
THEME, AUTO_THEME, MAX_REPOS, TITLE, SORT_BY, MONTHS_AGO, INCLUDE_ORGS, EXCLUDE_ORGS 등 다양한 변수를 통해 표시되는 정보를 제어
INCLUDE_ORGS와 EXCLUDE_ORGS를 사용하여 특정 조직 또는 사용자의 기여 내역만 표시하거나 제외 가능
향후 기여 내역이 증가함에 따라 정렬 및 필터링 기능을 활용하여 프로필을 효율적으로 관리 가능
이러한 유연성은 사용자 맞춤형 프로필을 구성하는 데 기여한다.
