☰

GreenWall - 查看历年 GitHub 的贡献图 ⬜🟩

在 GitHub 中查看用户历年的贡献图。

当前为 2024-10-25 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name               GreenWall: View all contribution graphs in GitHub ⬜🟩
  3. // @description        View a graph of users' contributions over the years in GitHub.
  4. // @name:zh-CN         GreenWall - 查看历年 GitHub 的贡献图 ⬜🟩
  5. // @description:zh-CN  在 GitHub 中查看用户历年的贡献图。
  6. // @version            1.1.5
  7. // @namespace          https://green-wall.leoku.dev
  8. // @author             LeoKu(https://leoku.dev)
  9. // @match              https://github.com/*
  10. // @run-at             document-start
  11. // @icon               https://green-wall.leoku.dev/favicon.svg
  12. // @grant              GM.xmlHttpRequest
  13. // @homepageURL        https://github.com/Codennnn/Green-Wall
  14. // @license            MIT
  15. // ==/UserScript==
  16.  
  17. var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
  18.     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
  19.         if (ar || !(i in from)) {
  20.             if (!ar) ar = Array.prototype.slice.call(from, 0, i);
  21.             ar[i] = from[i];
  22.         }
  23.     }
  24.     return to.concat(ar || Array.prototype.slice.call(from));
  25. };
  26. function addHistoryEvent(type) {
  27.     var originalMethod = window.history[type];
  28.     return function () {
  29.         var args = [];
  30.         for (var _i = 0; _i < arguments.length; _i++) {
  31.             args[_i] = arguments[_i];
  32.         }
  33.         originalMethod.apply(window.history, args);
  34.         var ev = new Event(type);
  35.         window.dispatchEvent(ev);
  36.     };
  37. }
  38. window.history.replaceState = addHistoryEvent('replaceState');
  39. var handler = function () {
  40.     var _a, _b, _c;
  41.     var githubUserPageRegex = /^https:\/\/github\.com\/[a-zA-Z0-9-]+(?=\/?$)/;
  42.     var isProfile = githubUserPageRegex.test(window.location.href);
  43.     if (isProfile) {
  44.         var ORIGIN_1 = 'https://green-wall.leoku.dev';
  45.         var produceData_1 = function (_a) {
  46.             var data = _a.data;
  47.             var contributionCalendars = data.contributionCalendars.map(function (cur) {
  48.                 var rows = [[], [], [], [], [], [], []];
  49.                 var nullDay = { count: 0, date: '', level: 'Null' };
  50.                 cur.weeks.forEach(function (_a) {
  51.                     var days = _a.days;
  52.                     if (days.length !== 7) {
  53.                         var newDays = __spreadArray([], days, true);
  54.                         for (var i = 0; i <= 6; i++) {
  55.                             var theDay = newDays.at(i);
  56.                             var weekday = i;
  57.                             if (theDay && typeof theDay.weekday === 'number') {
  58.                                 if (theDay.weekday === weekday) {
  59.                                     rows[theDay.weekday].push(theDay);
  60.                                 }
  61.                                 else {
  62.                                     newDays.splice(i, 0, nullDay);
  63.                                     rows[i].push(nullDay);
  64.                                 }
  65.                             }
  66.                             else {
  67.                                 rows[i].push(nullDay);
  68.                             }
  69.                         }
  70.                     }
  71.                     else {
  72.                         days.forEach(function (day) {
  73.                             if (typeof day.weekday === 'number') {
  74.                                 rows[day.weekday].push(day);
  75.                             }
  76.                         });
  77.                     }
  78.                 });
  79.                 var calendar = {
  80.                     total: cur.total,
  81.                     year: cur.year,
  82.                     rows: rows,
  83.                 };
  84.                 return calendar;
  85.             });
  86.             return {
  87.                 contributionCalendars: contributionCalendars,
  88.             };
  89.         };
  90.         var createGraph_1 = function (params) {
  91.             var year = params.year, total = params.total, rows = params.rows;
  92.             var table = document.createElement('table');
  93.             table.classList.add('ContributionCalendar-grid');
  94.             table.style.borderSpacing = '3px';
  95.             table.style.overflow = 'hidden';
  96.             table.style.position = 'relative';
  97.             var tbody = document.createElement('tbody');
  98.             var tr = document.createElement('tr');
  99.             tr.style.height = '10px';
  100.             rows.forEach(function (row) {
  101.                 var clonedTr = tr.cloneNode();
  102.                 var htmlStr = '';
  103.                 row.forEach(function (col, idx) {
  104.                     var td = '<td></td>';
  105.                     if (col.level !== "Null" /* ContributionLevel.Null */) {
  106.                         var level = col.level === "NONE" /* ContributionLevel.NONE */
  107.                             ? 0
  108.                             : col.level === "FIRST_QUARTILE" /* ContributionLevel.FIRST_QUARTILE */
  109.                                 ? 1
  110.                                 : col.level === "SECOND_QUARTILE" /* ContributionLevel.SECOND_QUARTILE */
  111.                                     ? 2
  112.                                     : col.level === "THIRD_QUARTILE" /* ContributionLevel.THIRD_QUARTILE */
  113.                                         ? 3
  114.                                         : 4;
  115.                         td = "\n            <td\n              title=\"".concat(col.count === 0 ? 'No' : col.count, " contributions in ").concat(col.date, "\"\n              tabindex=\"-1\"\n              data-ix=\"").concat(idx, "\"\n              style=\"width: 10px\"\n              data-level=\"").concat(level, "\"\n              class=\"ContributionCalendar-day\"\n              data-date=\"").concat(col.level, "\"\n              aria-selected=\"false\"\n              role=\"gridcell\"\n            ></td>\n            ");
  116.                     }
  117.                     htmlStr += td;
  118.                 });
  119.                 if (clonedTr instanceof HTMLTableRowElement) {
  120.                     clonedTr.innerHTML = htmlStr;
  121.                     tbody.append(clonedTr);
  122.                 }
  123.             });
  124.             table.appendChild(tbody);
  125.             var graphItem = document.createElement('div');
  126.             var countText = document.createElement('div');
  127.             countText.style.marginBottom = '5px';
  128.             countText.textContent = "".concat(total, " contributions in ").concat(year);
  129.             graphItem.append(countText, table);
  130.             return { graphItem: graphItem };
  131.         };
  132.         var createDialog = function (params) {
  133.             var username = params.username;
  134.             var dialog = document.createElement('dialog');
  135.             dialog.id = 'green-wall-dialog';
  136.             dialog.classList.add('Overlay', 'Overlay-whenNarrow', 'Overlay--size-medium-portrait', 'Overlay--motion-scaleFadeOverlay', 'Overlay-whenNarrow', 'Overlay--size-medium-portrait', 'Overlay--motion-scaleFade');
  137.             dialog.style.minWidth = '720px';
  138.             dialog.style.maxHeight = 'calc(100vh - 50px)';
  139.             dialog.addEventListener('close', function () {
  140.                 document.body.classList.remove('has-modal');
  141.             });
  142.             var mouseDownTarget;
  143.             var mouseDownHandler = function (ev) {
  144.                 if (ev.target instanceof HTMLElement) {
  145.                     mouseDownTarget = ev.target;
  146.                 }
  147.             };
  148.             var mouseUpHandler = function (ev) {
  149.                 if (ev.target instanceof HTMLDialogElement &&
  150.                     ev.target === mouseDownTarget &&
  151.                     ev.target === dialog) {
  152.                     dialog.close();
  153.                 }
  154.             };
  155.             dialog.addEventListener('mousedown', mouseDownHandler);
  156.             dialog.addEventListener('mouseup', mouseUpHandler);
  157.             // ---
  158.             var wrap = document.createElement('div');
  159.             wrap.style.display = 'flex';
  160.             wrap.style.flexDirection = 'column';
  161.             wrap.style.overflow = 'hidden';
  162.             // ---
  163.             var dialogHeader = document.createElement('div');
  164.             dialogHeader.classList.add('Overlay-header');
  165.             var contentWrap = document.createElement('div');
  166.             contentWrap.classList.add('Overlay-headerContentWrap');
  167.             var titleWrap = document.createElement('div');
  168.             titleWrap.classList.add('Overlay-titleWrap');
  169.             var title = document.createElement('h1');
  170.             title.classList.add('Overlay-title');
  171.             title.textContent = "".concat(username, "'s GreenWall");
  172.             var actionWrap = document.createElement('div');
  173.             actionWrap.classList.add('Overlay-actionWrap');
  174.             var actionButton = document.createElement('button');
  175.             actionButton.classList.add('close-button', 'Overlay-closeButton');
  176.             actionButton.setAttribute('type', 'button');
  177.             actionButton.innerHTML = "\n      <svg aria-hidden=\"true\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-x\">\n        <path d=\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z\"></path>\n      </svg>\n      ";
  178.             actionButton.addEventListener('click', function (ev) {
  179.                 ev.stopPropagation();
  180.                 dialog.close();
  181.             });
  182.             // ---
  183.             var dialogBody = document.createElement('div');
  184.             dialogBody.classList.add('Overlay-body');
  185.             dialogBody.style.overflowY = 'auto';
  186.             var dialogContent = document.createElement('div');
  187.             dialogContent.style.display = 'flex';
  188.             dialogContent.style.flexDirection = 'column';
  189.             dialogContent.style.rowGap = '10px';
  190.             dialogContent.style.alignItems = 'center';
  191.             dialogContent.style.padding = 'var(--stack-padding-normal, 1rem)';
  192.             // ---
  193.             var dialogFooter = document.createElement('div');
  194.             dialogFooter.classList.add('Overlay-footer', 'Overlay-footer--alignEnd', 'Overlay-footer--divided');
  195.             var openExtrnalBtn = document.createElement('button');
  196.             var btnContent = document.createElement('span');
  197.             btnContent.classList.add('Button-label');
  198.             btnContent.textContent = 'Open in Green Wall';
  199.             openExtrnalBtn.classList.add('Button', 'Button--primary', 'Button--medium');
  200.             openExtrnalBtn.addEventListener('click', function () {
  201.                 window.open("".concat(ORIGIN_1, "/user/").concat(username), '_blank');
  202.             });
  203.             titleWrap.append(title);
  204.             actionWrap.append(actionButton);
  205.             contentWrap.append(titleWrap, actionWrap);
  206.             openExtrnalBtn.append(btnContent);
  207.             dialogHeader.append(contentWrap);
  208.             dialogBody.append(dialogContent);
  209.             dialogFooter.append(openExtrnalBtn);
  210.             wrap.append(dialogHeader, dialogBody, dialogFooter);
  211.             dialog.append(wrap);
  212.             document.body.append(dialog);
  213.             return { dialog: dialog, dialogContent: dialogContent };
  214.         };
  215.         var profileArea = document.querySelector('.Layout-sidebar .h-card .js-profile-editable-replace');
  216.         var refNode = (_b = (_a = document.querySelector('.js-profile-editable-replace > .d-flex.flex-column')) === null || _a === void 0 ? void 0 : _a.nextSibling) === null || _b === void 0 ? void 0 : _b.nextSibling;
  217.         if (profileArea instanceof HTMLElement && refNode instanceof HTMLElement) {
  218.             var username_1 = (_c = document
  219.                 .querySelector('meta[name="octolytics-dimension-user_login"]')) === null || _c === void 0 ? void 0 : _c.getAttribute('content');
  220.             if (username_1) {
  221.                 var exists = !!document.querySelector('#green-wall-block');
  222.                 if (!exists) {
  223.                     var block = document.createElement('div');
  224.                     block.setAttribute('id', 'green-wall-block');
  225.                     block.classList.add('border-top', 'color-border-muted', 'pt-3', 'mt-3', 'clearfix', 'hide-sm', 'hide-md');
  226.                     var title = document.createElement('h2');
  227.                     title.classList.add('h4', 'mb-2');
  228.                     title.textContent = 'Green Wall';
  229.                     var openBtn = document.createElement('button');
  230.                     openBtn.classList.add('btn');
  231.                     openBtn.textContent = ' ⬜🟩 View All Green';
  232.                     block.appendChild(title);
  233.                     block.appendChild(openBtn);
  234.                     profileArea.insertBefore(block, refNode);
  235.                     var _d = createDialog({ username: username_1 }), dialog_1 = _d.dialog, dialogContent_1 = _d.dialogContent;
  236.                     var hasLoaded_1 = false;
  237.                     var handleLoadError_1 = function () {
  238.                         dialogContent_1.innerHTML = '';
  239.                         var errorBlock = document.createElement('div');
  240.                         errorBlock.style.display = 'flex';
  241.                         errorBlock.style.flexDirection = 'column';
  242.                         errorBlock.style.alignItems = 'center';
  243.                         var tip = document.createElement('p');
  244.                         tip.textContent = 'The process of obtaining data has an exception.';
  245.                         var retryBtn = document.createElement('button');
  246.                         retryBtn.classList.add('btn');
  247.                         retryBtn.textContent = 'Retry';
  248.                         retryBtn.addEventListener('click', function () {
  249.                             // eslint-disable-next-line @typescript-eslint/no-use-before-define
  250.                             handleLoadData_1();
  251.                         });
  252.                         errorBlock.append(tip, retryBtn);
  253.                         dialogContent_1.append(errorBlock);
  254.                     };
  255.                     var handleLoadData_1 = function () {
  256.                         var loading = "\n            <svg aria-label=\"Loading\" style=\"box-sizing: content-box; color: var(--color-icon-primary);\" width=\"32\" height=\"32\" viewBox=\"0 0 16 16\" fill=\"none\" data-view-component=\"true\" class=\"anim-rotate\">\n              <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-opacity=\"0.25\" stroke-width=\"2\" vector-effect=\"non-scaling-stroke\" fill=\"none\"></circle>\n              <path d=\"M15 8a7.002 7.002 0 00-7-7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" vector-effect=\"non-scaling-stroke\"></path>\n            </svg>\n            ";
  257.                         dialogContent_1.innerHTML = loading;
  258.                         GM.xmlHttpRequest({
  259.                             method: 'GET',
  260.                             url: "".concat(ORIGIN_1, "/api/contribution/").concat(username_1),
  261.                             onload: function (response) {
  262.                                 try {
  263.                                     dialogContent_1.innerHTML = '';
  264.                                     var data = JSON.parse(response.responseText);
  265.                                     var xData = produceData_1(data);
  266.                                     xData.contributionCalendars.forEach(function (calendar) {
  267.                                         var graphItem = createGraph_1(calendar).graphItem;
  268.                                         dialogContent_1.append(graphItem);
  269.                                     });
  270.                                     hasLoaded_1 = true;
  271.                                 }
  272.                                 catch (_a) {
  273.                                     handleLoadError_1();
  274.                                 }
  275.                             },
  276.                             onerror: function (err) {
  277.                                 console.error('[Green Wall]: ', err);
  278.                                 handleLoadError_1();
  279.                             },
  280.                         });
  281.                     };
  282.                     var handleDialogOpen_1 = function () {
  283.                         dialog_1.showModal();
  284.                         document.body.classList.add('has-modal');
  285.                         if (!hasLoaded_1) {
  286.                             handleLoadData_1();
  287.                         }
  288.                     };
  289.                     openBtn.addEventListener('click', function () {
  290.                         handleDialogOpen_1();
  291.                     });
  292.                 }
  293.             }
  294.         }
  295.         else {
  296.             console.warn('[Green Wall]: Target node not found.');
  297.         }
  298.     }
  299. };
  300. window.addEventListener('replaceState', handler);
  301.