☰

⬜🟩 一键查看历年 GitHub 的贡献图

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

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

  1. // ==UserScript==
  2. // @name               ⬜🟩 View all contribution graphs in GitHub
  3. // @description        View a graph of users' contributions over the years in GitHub.
  4. // @name:zh-CN         ⬜🟩 一键查看历年 GitHub 的贡献图
  5. // @description:zh-CN  在 GitHub 中查看用户历年的贡献图。
  6. // @version            1.0.7
  7. // @namespace          https://green-wall.leoku.dev
  8. // @author             LeoKu(https://leoku.dev)
  9. // @match              https://github.com/*
  10. // @run-at             document-end
  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. var _a, _b, _c;
  27. var isProfile = new RegExp(/^https:\/\/github\.com\/([^/]+)$/).test(window.location.href);
  28. if (isProfile) {
  29.     var ORIGIN_1 = 'https://green-wall.leoku.dev';
  30.     var produceData_1 = function (_a) {
  31.         var data = _a.data;
  32.         var contributionCalendars = data.contributionCalendars.map(function (cur) {
  33.             var rows = [[], [], [], [], [], [], []];
  34.             cur.weeks.forEach(function (_a) {
  35.                 var days = _a.days;
  36.                 if (days.length !== 7) {
  37.                     var newDays = __spreadArray([], days, true);
  38.                     for (var i = 0; i <= 6; i++) {
  39.                         var theDay = newDays.at(i);
  40.                         var weekday = i;
  41.                         if (theDay && typeof theDay.weekday === 'number') {
  42.                             if (theDay.weekday === weekday) {
  43.                                 rows[theDay.weekday].push(theDay);
  44.                             }
  45.                             else {
  46.                                 newDays.splice(i, 0, { level: 'Null', weekday: weekday });
  47.                                 rows[i].push({ level: 'Null', weekday: weekday });
  48.                             }
  49.                         }
  50.                         else {
  51.                             rows[i].push({ level: 'Null', weekday: weekday });
  52.                         }
  53.                     }
  54.                 }
  55.                 else {
  56.                     days.forEach(function (day) {
  57.                         if (typeof day.weekday === 'number') {
  58.                             rows[day.weekday].push(day);
  59.                         }
  60.                     });
  61.                 }
  62.             });
  63.             var calendar = {
  64.                 total: cur.total,
  65.                 year: cur.year,
  66.                 rows: rows,
  67.             };
  68.             return calendar;
  69.         });
  70.         return {
  71.             contributionCalendars: contributionCalendars,
  72.         };
  73.     };
  74.     var createGraph_1 = function (params) {
  75.         var year = params.year, total = params.total, rows = params.rows;
  76.         var table = document.createElement('table');
  77.         table.classList.add('ContributionCalendar-grid');
  78.         table.style.borderSpacing = '3px';
  79.         table.style.overflow = 'hidden';
  80.         table.style.position = 'relative';
  81.         var tbody = document.createElement('tbody');
  82.         var tr = document.createElement('tr');
  83.         tr.style.height = '10px';
  84.         rows.forEach(function (row) {
  85.             var clonedTr = tr.cloneNode();
  86.             var htmlStr = '';
  87.             row.forEach(function (col, idx) {
  88.                 var td = '<td></td>';
  89.                 if (col.level !== "Null" /* ContributionLevel.Null */) {
  90.                     var level = col.level === "NONE" /* ContributionLevel.NONE */
  91.                         ? 0
  92.                         : col.level === "FIRST_QUARTILE" /* ContributionLevel.FIRST_QUARTILE */
  93.                             ? 1
  94.                             : col.level === "SECOND_QUARTILE" /* ContributionLevel.SECOND_QUARTILE */
  95.                                 ? 2
  96.                                 : col.level === "THIRD_QUARTILE" /* ContributionLevel.THIRD_QUARTILE */
  97.                                     ? 3
  98.                                     : 4;
  99.                     td = "\n        <td\n          tabindex=\"-1\"\n          data-ix=\"".concat(idx, "\"\n          style=\"width: 10px\"\n          data-level=\"").concat(level, "\"\n          role=\"gridcell\"\n          class=\"ContributionCalendar-day\"\n        ></td>\n        ");
  100.                 }
  101.                 htmlStr += td;
  102.             });
  103.             if (clonedTr instanceof HTMLTableRowElement) {
  104.                 clonedTr.innerHTML = htmlStr;
  105.                 tbody.append(clonedTr);
  106.             }
  107.         });
  108.         table.appendChild(tbody);
  109.         var graphItem = document.createElement('div');
  110.         var countText = document.createElement('div');
  111.         countText.style.marginBottom = '5px';
  112.         countText.textContent = "".concat(total, " contributions in ").concat(year);
  113.         graphItem.append(countText, table);
  114.         return { graphItem: graphItem };
  115.     };
  116.     var createDialog = function (params) {
  117.         var username = params.username;
  118.         var dialog = document.createElement('dialog');
  119.         dialog.id = 'green-wall-dialog';
  120.         dialog.classList.add('Overlay', 'Overlay-whenNarrow', 'Overlay--size-medium-portrait', 'Overlay--motion-scaleFadeOverlay', 'Overlay-whenNarrow', 'Overlay--size-medium-portrait', 'Overlay--motion-scaleFade');
  121.         dialog.style.minWidth = '720px';
  122.         dialog.style.maxHeight = 'calc(100vh - 50px)';
  123.         dialog.addEventListener('close', function () {
  124.             document.body.classList.remove('has-modal');
  125.         });
  126.         dialog.addEventListener('click', function () {
  127.             dialog.close();
  128.         });
  129.         // ---
  130.         var wrap = document.createElement('div');
  131.         wrap.style.display = 'flex';
  132.         wrap.style.flexDirection = 'column';
  133.         wrap.style.overflow = 'hidden';
  134.         wrap.addEventListener('click', function (ev) {
  135.             ev.stopPropagation();
  136.         });
  137.         // ---
  138.         var dialogHeader = document.createElement('div');
  139.         dialogHeader.classList.add('Overlay-header');
  140.         var contentWrap = document.createElement('div');
  141.         contentWrap.classList.add('Overlay-headerContentWrap');
  142.         var titleWrap = document.createElement('div');
  143.         titleWrap.classList.add('Overlay-titleWrap');
  144.         var title = document.createElement('h1');
  145.         title.classList.add('Overlay-title');
  146.         title.textContent = "".concat(username, "'s GreenWall");
  147.         var actionWrap = document.createElement('div');
  148.         actionWrap.classList.add('Overlay-actionWrap');
  149.         var actionButton = document.createElement('button');
  150.         actionButton.classList.add('close-button', 'Overlay-closeButton');
  151.         actionButton.setAttribute('type', 'button');
  152.         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  ";
  153.         actionButton.addEventListener('click', function (ev) {
  154.             ev.stopPropagation();
  155.             dialog.close();
  156.         });
  157.         // ---
  158.         var dialogBody = document.createElement('div');
  159.         dialogBody.classList.add('Overlay-body');
  160.         dialogBody.style.overflowY = 'auto';
  161.         var dialogContent = document.createElement('div');
  162.         dialogContent.style.display = 'flex';
  163.         dialogContent.style.flexDirection = 'column';
  164.         dialogContent.style.rowGap = '10px';
  165.         dialogContent.style.alignItems = 'center';
  166.         dialogContent.style.padding = 'var(--stack-padding-normal, 1rem)';
  167.         // ---
  168.         var dialogFooter = document.createElement('div');
  169.         dialogFooter.classList.add('Overlay-footer', 'Overlay-footer--alignEnd', 'Overlay-footer--divided');
  170.         var openExtrnalBtn = document.createElement('button');
  171.         var btnContent = document.createElement('span');
  172.         btnContent.classList.add('Button-label');
  173.         btnContent.textContent = 'Open in Green Wall';
  174.         openExtrnalBtn.classList.add('Button', 'Button--primary', 'Button--medium');
  175.         openExtrnalBtn.addEventListener('click', function () {
  176.             window.open("".concat(ORIGIN_1, "/user/").concat(username), '_blank');
  177.         });
  178.         titleWrap.append(title);
  179.         actionWrap.append(actionButton);
  180.         contentWrap.append(titleWrap, actionWrap);
  181.         openExtrnalBtn.append(btnContent);
  182.         dialogHeader.append(contentWrap);
  183.         dialogBody.append(dialogContent);
  184.         dialogFooter.append(openExtrnalBtn);
  185.         wrap.append(dialogHeader, dialogBody, dialogFooter);
  186.         dialog.append(wrap);
  187.         document.body.append(dialog);
  188.         return { dialog: dialog, dialogContent: dialogContent };
  189.     };
  190.     var profileArea = document.querySelector('.Layout-sidebar .h-card .js-profile-editable-replace');
  191.     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;
  192.     if (profileArea instanceof HTMLElement && refNode instanceof HTMLElement) {
  193.         var username_1 = (_c = document
  194.             .querySelector('meta[property="profile:username"]')) === null || _c === void 0 ? void 0 : _c.getAttribute('content');
  195.         if (username_1) {
  196.             var block = document.createElement('div');
  197.             block.classList.add('border-top', 'color-border-muted', 'pt-3', 'mt-3', 'clearfix', 'hide-sm', 'hide-md');
  198.             var title = document.createElement('h2');
  199.             title.classList.add('h4', 'mb-2');
  200.             title.textContent = 'Green Wall';
  201.             var openBtn = document.createElement('button');
  202.             openBtn.classList.add('btn');
  203.             openBtn.textContent = ' ⬜🟩 View All Green';
  204.             block.appendChild(title);
  205.             block.appendChild(openBtn);
  206.             profileArea.insertBefore(block, refNode);
  207.             var _d = createDialog({ username: username_1 }), dialog_1 = _d.dialog, dialogContent_1 = _d.dialogContent;
  208.             var hasLoaded_1 = false;
  209.             var handleLoadError_1 = function () {
  210.                 dialogContent_1.innerHTML = '';
  211.                 var errorBlock = document.createElement('div');
  212.                 errorBlock.style.display = 'flex';
  213.                 errorBlock.style.flexDirection = 'column';
  214.                 errorBlock.style.alignItems = 'center';
  215.                 var tip = document.createElement('p');
  216.                 tip.textContent = 'The process of obtaining data has an exception.';
  217.                 var retryBtn = document.createElement('button');
  218.                 retryBtn.classList.add('btn');
  219.                 retryBtn.textContent = 'Retry';
  220.                 retryBtn.addEventListener('click', function () {
  221.                     // eslint-disable-next-line @typescript-eslint/no-use-before-define
  222.                     handleLoadData_1();
  223.                 });
  224.                 errorBlock.append(tip, retryBtn);
  225.                 dialogContent_1.append(errorBlock);
  226.             };
  227.             var handleLoadData_1 = function () {
  228.                 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        ";
  229.                 dialogContent_1.innerHTML = loading;
  230.                 GM.xmlHttpRequest({
  231.                     method: 'GET',
  232.                     url: "".concat(ORIGIN_1, "/api/contribution/").concat(username_1),
  233.                     onload: function (response) {
  234.                         try {
  235.                             dialogContent_1.innerHTML = '';
  236.                             var data = JSON.parse(response.responseText);
  237.                             var xData = produceData_1(data);
  238.                             xData.contributionCalendars.forEach(function (calendar) {
  239.                                 var graphItem = createGraph_1(calendar).graphItem;
  240.                                 dialogContent_1.append(graphItem);
  241.                             });
  242.                             hasLoaded_1 = true;
  243.                         }
  244.                         catch (_a) {
  245.                             handleLoadError_1();
  246.                         }
  247.                     },
  248.                     onerror: function (err) {
  249.                         console.error('[Green Wall]: ', err);
  250.                         handleLoadError_1();
  251.                     },
  252.                 });
  253.             };
  254.             var handleDialogOpen_1 = function () {
  255.                 dialog_1.showModal();
  256.                 document.body.classList.add('has-modal');
  257.                 if (!hasLoaded_1) {
  258.                     handleLoadData_1();
  259.                 }
  260.             };
  261.             openBtn.addEventListener('click', function () {
  262.                 handleDialogOpen_1();
  263.             });
  264.         }
  265.     }
  266.     else {
  267.         console.warn('[Green Wall]: Target node not found.');
  268.     }
  269. }