💛

GitHubのプロフィールにZennのいいね数や記事数を表示してみた

2021/12/24に公開・約2,400字

GitHub

Next.js

SVG

tech

こんにちは、shota1995mです！

最近、Zennに投稿する機会が増えたので、GitHubでもZennの記事数とか表示できたら面白いなーと思ったので、
本日はこんなものを作ってまいりました。

Zennのスコア

作成の経緯

みなさん、GitHubのプロフィールREADMEは使っていますか？
GitHubのユーザー名と同じリポジトリを作ることで、GitHubのプロフィールページにREADMEを表示できる、名前まんまの機能です。

どこかの国のエンジニアの人がプロフィールREADMEを使ってカッコよく仕上げてるのをみて、
とりあえず手を出してみました。
ただ、書くことが無く...
ひとつGitHub Stats Cardというものを置いているだけで放置してたので、今年終わるまでに少しても手を入れようと思った次第です！！！

どうやってつくったの？

使用技術

Typescript（ほんのちょっと支える程度）
Next.js
SVG

の３つ。
SVG??って思うかもしれないですが、SVGを自分で組み立て画像を作成しました。

つまったとこ

SVGを配信するのに、Headerをセットし忘れていた

res.setHeader("Content-Type", "image/svg+xml");

<svg>って書いてるだけだとエラーがでる
- xmlnsを完全に入れ忘れててだいぶ詰まった。

<svg xmlns="http://www.w3.org/2000/svg">

stringで返さないといけないので、普通のコンポーネントは使えなかった。
- レゴみたいに組み立てられるように工夫した。
- こんな感じでつくっていった

const svg = new Svg(
  width,
  height,
  [
    new Card(),
    new ZennIcon({ x: -5, y: height - 50, height: 20 }),
    new Text({ x: 30,  y: 45,  fontWeight: 'bold', text: user.username }),
    new Text({ x: 30,  y: 90,  fontWeight: 'bold', fontSize: 24, text: articlesCount }),
    new Text({ x: 40 + (articlesCount.length * 14), y: 90, fontSize: 14, text: "記事" }),
    new Text({ x: 30,  y: 125,  fontWeight: 'bold', fontSize: 24, text: booksCount }),
    new Text({ x: 40 + (booksCount.length * 14), y: 125,  fontSize: 14, text: "冊の本" }),
    new Text({ x: 30,  y: 160, fontWeight: 'bold', fontSize: 24, text: totalLikedCount }),
    new Text({ x: 40 + (totalLikedCount.length * 14), y: 160, fontSize: 14, text: "Liked" }),
  ]
).render();