BlogにGitHubの草を生やす

プロフィールページがテキストだけで、何か画像を表示したいと思ったので、GitHubのプロフィールページにある、いわゆる芝生を表示することにした。
芝生はいわゆる日本の愛称みたいなもので、 Contributions という「過去一年間でこれだけ活動したよ」を可視化する機能である。公式サイトはこちら

下記のサイトでブログのサイドパーツに表示する例があったので、参考にした。

https://blog.jnito.com/entry/2018/11/04/200916

芝生を画像化するWebサービスが紹介されていたので、Vueコンポーネントを作成し、トップページに追加した。
表示される画像は下記の感じである。

GlassGraph.vue

<template>
  <v-container fluid>
    <v-row>
      <v-col>
        <a :href="this.githubLink" target="_blank" rel="noopener">
          <v-img v-bind:src="this.imageLink"></v-img>
        </a>
      </v-col>
    </v-row>
  </v-container>
</template>
<script lang="ts">
export default {
  props: {
    githubId: {
      type: String,
      required: true,
      default: "vagivagi"
    }
  },
  data: function() {
    return {
      imageLink: {
        type: String,
        required: true
      },
      githubLink: {
        type: String,
        required: true
      }
    };
  },
  created: function() {
    this.imageLink =
      "https://grass-graph.moshimo.works/images/" + this.githubId + ".png";
    this.githubLink = "https://github.com/" + this.githubId;
  }
};
</script>