ページを編集した人リストをGitHubアイコンで列挙したい

[faithandbrave]

いまは各ページの右上に、そのページを最後に編集した人の名前が表示されています (git logからとってきてる)。

ここは元々GitHubユーザーページへのリンクまで貼りたかったのですが、技術的難易度から実装されていませんでした。
目的としては、編集者のモチベーションのためです。

• https://docs.github.com/ja/rest/search?apiVersion=2022-11-28#search-users

このGitHub APIで、メールアドレスからGitHubアカウント名をとってこれるので、これを使ってアカウント名をとってきてキャッシュしつつ、

{
  "faithandbrave@gmail.com": "faithandbrave",
  "octcat@gmail.com": "octcat"
}

可能であればgit logでそのページを編集した人のリストをとって (無理そうなら最終コミットした人)、ページにはGitHubアイコンとそのユーザーへのリンクを貼りたいです。

作業時間がなかなかとれないので、ひとまずタスクissueにしておきます。

[faithandbrave]

yohhoyさんとかonihusubeさんが、メールアドレスからアカウント名をとれないですね。。。

[faithandbrave]

ユーザーページにメールアドレスを載せてる人しかとれないっぽい

[k-satoda]

@faithandbrave https://github.com/cpprefjp/site/blob/master/README.md などで一番上に表示されるアイコンのリストが
それっぽいなーと思ってソースを見ると、 https://github.com/cpprefjp/site/contributors/master/README.md という URL で
取れるようでした。

[faithandbrave]

@k-satoda ありがとうございます。全ページの対応するGitHubページのHTMLをとってきて解析になっちゃいますが、それでできそうですね。

[Raclamusi]

コミットを取ってくる GitHub API があります。
https://docs.github.com/ja/rest/commits/commits?apiVersion=2022-11-28

https://api.github.com/repos/cpprefjp/site/commits?path=パス でそのパスのファイルに対するのコミットが取れます。

使用例

UserScript コード

// ==UserScript==
// @name         Add Author Icons on cpprefjp
// @version      0.1
// @description  cpprefjp に編集者のアイコンを追加
// @match        https://cpprefjp.github.io/*
// ==/UserScript==

(async function () {
    "use strict";

    const path = ((location.pathname === "/") ? "/index.md" : location.pathname.replace(/\.html$/, ".md"));
    const res = await fetch(`https://api.github.com/repos/cpprefjp/site/commits?path=${path}`);
    const commits = await res.json();
    const authors = commits.map(commit => commit.author).filter(author => (author !== null));
    const uniqueAuthors = authors.filter(author => (authors.find(a => (a.id === author.id)) === author));

    const icons = document.createElement("p");
    icons.classList.add("text-right");
    for (const author of uniqueAuthors) {
        const iconURL = new URL(author.avatar_url);
        iconURL.searchParams.append("size", "40");

        const icon = new Image(20, 20);
        icon.src = iconURL.href;
        icon.style.borderRadius = "50%";
        icon.style.boxShadow = "0 0 0 1px #1f232826";
        icon.style.verticalAlign = "middle";
        icon.style.marginLeft = "3px";

        const a = document.createElement("a");
        a.href = author.html_url;

        a.append(icon);
        icons.append(a);
    }

    const editButtonDiv = document.querySelector("div.edit-button");
    editButtonDiv.children[0].after(icons);
})();