20
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

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

スクリーンショット 2020-03-25 14.58.31.png

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

スクリーンショット 2020-03-25 13.13.55.png

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

test
test

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

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

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})`
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
20
Help us understand the problem. What are the problem?