☰

一键查看历年 GitHub 的贡献图

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

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

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