GitHub Actionsのバッジをリンク付きでREADMEに追加する

GitHub Actionsがリリースされしばらくし、結構使われているレポジトリが増えてきています。
さらに、 README にバッジを置いておくとそれだけで見栄えがよくなるのでオススメです。

バッジをどこで取得できるかというと、対象のアクションに飛んで (https://github.com/<user>/<repo>/actions?<workflow>) Create status badge をクリックし Copy... ボタンを押すだけです。便利ですね。

しかしながら、デフォルトでコピーしただけだとちょっと不便なところがあります。下に2つバッジがありますが、違いがわかりますでしょうか？
上がCopyしただけのバッジです。

クリックすると明白ですが、上は対象のアクションへのリンクになっていません。そのため、[<ここにコピーしたバッジ>](対象のアクションへのリンク) のように書いてリンクにしてあげる必要があります。

毎回これをするのは面倒なので、簡単なユーザースクリプトを用意しました。

UserScriptを実行する拡張が入っていれば、以下のリンクを開いて、Rowを押すだけでインストールできます。

中身としてこれだけです。

// ==UserScript==
// @name         add badge for action link
// @namespace    https://github.com/akameco
// @version      0.1
// @description  add badge for action link
// @author       akameco (https://github.com/akameco)
// @match        https://github.com/*/*/actions*
// @grant        none
// ==/UserScript==

const el = document.querySelector('#badge-markdown')
el.textContent = `[${el.textContent}](${location.href})`

GitHub Actionsのバッジ簡単に設定できて便利なんだけど、そのままコピペするとsvgへのリンクになって不便なので対象のアクションへのリンクにする雑なユーザースクリプト用意したhttps://t.co/z53uo70JLs pic.twitter.com/xLamjw0qPl

— あかめ@無職.js (@akameco) March 25, 2020