GitHub 프로필을 iMessage 대화 메시지로 꾸며보기

GitHub Actions를 십분 활용하여 GitHub 프로필 업데이트를 자동화 해보자

이렇게 …이 뜨면서 1~2초 정도 딜레이가 있는 애니메이션에 현혹되었다

Step 0. 프로젝트 구조 설명

일단 들어가기 전에, 본인의 GitHub 프로필에 소개 화면을 만들고 싶다면 나의 GitHub 아이디와 동일한 이름의 저장소가 생성되어 있어야 한다. 예를 들어, 본인의 GitHub 아이디는 jypthemiracle인데 프로필 소개 화면을 만들고 싶다면 jypthemiracle이라는 이름의 Repository를 생성해야 한다는 것이다. 이것이 먼저 준비된 상태에서 아래 글의 내용을 따라오기 바란다.

Step 1. template.svg 만들어보기

index.html에서 작업한 후 이를 template.svg로 저장하면 된다. 기본적인 CSS 스타일링 설정은 모두 index.html나 template.svg에 이미 되어 있다. 나는 HTML, CSS 작업에 둔한지라 바로 svg 파일에서 작업했는데, html을 svg로 변환하는 npm 라이브러리가 몇 가지 있으니 이를 참고해보면 될 듯 하다.

주석 처리된 부분에서 텍스트를 찾아 본인의 입맛에 맞게 수정하면 된다. svg 파일 기준이다.

Step 2. build-svg.js 작업하기

build-svg.js는 template.svg에서 진짜 아웃풋이 될 놈인 chat.svg를 작업하는 부분이다. 전체 코드를 살펴보자.

function convertTZ(date, tzString) {    
return new Date((typeof date === "string" ? new Date(date) : date).toLocaleString("en-US", {timeZone: tzString})); }
const today = convertTZ(new Date(), "Asia/Seoul");
const todayDay = new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(today); // 여기서 지정된 todayDay를 svg 파일에다가 주입한다.
저장소 > Settings > Secrets
Current Weather Data의 무료 버전이면 사용하기에 족하다.
weather.setLang('en')
weather.setCoordinate(37.517235, 127.047325) // 여기서 설정하면 된다.
weather.setUnits('imperial')
weather.setAPPID(WEATHER_API_KEY)
const emojis = {  '01d': '☀️',  '02d': '⛅️',  '03d': '☁️',  '04d': '☁️',  '09d': '🌧',  '10d': '🌦',  '11d': '🌩',  '13d': '❄️',  '50d': '🌫'}weather.getWeatherOneCall(function (err, data) {  
if (err) console.log(err)
const degF = Math.round(data.daily[0].temp.max)
const degC = Math.round(qty(`${degF} tempF`).to('tempC').scalar)
const icon = data.daily[0].weather[0].icon
...

Step 3. GitHub Action으로 자동커밋 설정하기

깃헙 액션을 이용해서 하루에 한 번씩 build-svg.js가 실행되도록 하여서 chat.svg를 업데이트하도록 설정해보자. 이렇게 된다면 매일매일 날씨와 오늘의 요일이 버블 메시지에 업데이트 될 것이다.

readme2.yml

Step 4. GitHub Profile 업데이트하기

위의 단계까지 정상적으로 거쳐왔다면 저장소 최상단 폴더에 chat.svg 파일이 자동으로 생성되어 있을 것이다. 본인이 yaml 파일에서 Auto updating my readme 라고 커밋 메시지를 작성해두었으므로 해당 커밋 메시지에 따라 chat.svg 파일이 생성되었다면 의도대로 workflow가 잘 작동한 것이다.

// README.md
...
![message_svg](https://github.com/나의 깃헙 아이디 /나의 깃헙 아이디/blob/master/chat.svg)

Bonus. Commit Contribution Snakes 만들기

// README.md
...
![snake svg](https://github.com/본인 깃헙 아이디/본인 깃헙 아이디/blob/output/github-contribution-grid-snake.svg)

나가며

GitHub Actions를 활용하여 프로필을 꾸미는 것에 대해 설명해보았다. 이번 작업을 통하여 GitHub Actions가 얼마나 강력한 툴인지 사뭇 깨닫게 되었다. CI/CD를 도구를 활용한 자동 커밋이 세상 유용하다는 생각을 하게 되었다. 개발자는 귀찮음을 싫어하는 사람들이라서 자동화를 그렇게나 좋아한다고 하더라. 자동화를 해가는 삽질을 통해 개발 능력을 상승시키는 것 같기는 하다. 마지막으로, 훌륭한 리소스를 작업해주신 Jason Long씨에게 다시 한번 감사의 말씀을 드리고 싶다.

--

--

Software Engineer at DSRV. ZK Evangelist at Boom Labs. twitter.com/@sigridjin_eth

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store