Share your GitHub contributions in Wordle style

README.md

Execute the JS code and you will get this:

wordle.js

// Copyright (c) 2022 Chanjung Kim (paxbun).

const numCommits = (
    Array.from(
        document.querySelector("svg.js-calendar-graph-svg g")
            .querySelectorAll("g")
    ).map(g =>  
        Array.from(g.querySelectorAll("rect"))
            .map(r => parseInt(r.getAttribute("data-count")))
    )
);
const rectangles = Array.from("⬛🟥🟧");
const thresholds = [0, 10, 20];
const joined = rectangles.map((rect, idx) => [rect, thresholds[idx]]);
const formattedNumCommits = (
    numCommits.map(row =>
        row.map(numCommit => {
            for (const [rect, thres] of joined) {
                if (numCommit <= thres)
                    return rect;
            }
            return "🟩";
        })
    )
);
const today = new Date().toLocaleDateString();
const output = (
`GitHub Commits ${today}

${formattedNumCommits.map(row => row.join("")).join("\n")}`);

const copyButton = document.createElement("summary");
copyButton.setAttribute("class", "btn-link Link--muted mt-1 pinned-items-setting-link");
copyButton.addEventListener("click", () => {
    navigator.clipboard.writeText(output);
});
copyButton.appendChild(document.createTextNode("Copy contributions"));

const contributionsElem = document.querySelector("div.js-yearly-contributions div");
contributionsElem.appendChild(copyButton);