☰

GitHub Network Shortcut

Adds a shortcut to the network graph on the repository's main page

  1. // ==UserScript==
  2. // @name         GitHub Network Shortcut
  3. // @namespace    https://mkps.app/
  4. // @version      0.1.2
  5. // @description  Adds a shortcut to the network graph on the repository's main page
  6. // @tag          productivity
  7. // @author       MK
  8. // @license      MIT
  9. // @match        *://github.com/*
  10. // @icon         https://github.com/favicon.ico
  11. // ==/UserScript==
  12.  
  13. (() => {
  14. 	"use strict";
  15.  
  16. 	const ELEMENT_CLASS = "MK_userscript_ghNetworkShortcut_element";
  17. 	const CONTAINER_SELECTOR_LG = `#repo-content-turbo-frame .Layout-sidebar .about-margin > div.BorderGrid-row > div.BorderGrid-cell > div.hide-sm.hide-md`;
  18. 	const CONTAINER_SELECTOR_SM = `#responsive-meta-container ul[aria-label="Repository details"]`;
  19.  
  20. 	function main() {
  21. 		forMatchingElementsForever(CONTAINER_SELECTOR_LG, (element) => {
  22. 			if (element.querySelector(`.${ELEMENT_CLASS}`)) {return;}
  23. 			for (const child of element.children) {
  24. 				if (child.children[0]?.getAttribute("href")?.endsWith("/forks")) {
  25. 					child.insertAdjacentElement("afterend", createShortcutLg());
  26. 					break;
  27. 				}
  28. 			}
  29. 		});
  30. 		forMatchingElementsForever(CONTAINER_SELECTOR_SM, (element) => {
  31. 			if (element.querySelector(`.${ELEMENT_CLASS}`)) {return;}
  32. 			for (const child of element.children) {
  33. 				if (child.getAttribute("href")?.endsWith("/activity")) {
  34. 					child.insertAdjacentElement("afterend", createShortcutSm());
  35. 					break;
  36. 				}
  37. 			}
  38. 		});
  39. 	}
  40.  
  41. 	function getNetworkUrl() {
  42. 		const terms = [...location.pathname.split("/").slice(1, 3), "network"];
  43. 		return `/${terms.join("/")}`;
  44. 	}
  45.  
  46. 	function createShortcutLg() {
  47. 		const div = document.createElement("div");
  48. 		div.classList.add(ELEMENT_CLASS);
  49. 		div.classList.add("mt-2");
  50. 		const a = document.createElement("a");
  51. 		a.setAttribute("href", getNetworkUrl());
  52. 		a.setAttribute("data-view-component", "true");
  53. 		a.classList.add("Link", "Link--muted");
  54. 		a.appendChild(createCommitIcon("mr-2"));
  55. 		a.appendChild(document.createTextNode(" "));
  56. 		const span = document.createElement("span");
  57. 		span.classList.add("color-fg-muted");
  58. 		span.textContent = "Network";
  59. 		a.appendChild(span);
  60. 		div.appendChild(a);
  61. 		return div;
  62. 	}
  63.  
  64. 	function createShortcutSm() {
  65. 		const a = document.createElement("a");
  66. 		a.classList.add(ELEMENT_CLASS, "Link--secondary", "no-underline", "d-block", "mr-2");
  67. 		a.setAttribute("role", "listitem");
  68. 		a.setAttribute("href", getNetworkUrl());
  69. 		a.appendChild(createCommitIcon("mr-1"));
  70. 		a.appendChild(document.createTextNode(" "));
  71. 		const span = document.createElement("span");
  72. 		span.textContent = "Network";
  73. 		a.appendChild(span);
  74. 		return a;
  75. 	}
  76.  
  77. 	function createCommitIcon(marginClass) {
  78. 		const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  79. 		svg.setAttribute("version", "1.1");
  80. 		svg.setAttribute("width", "16");
  81. 		svg.setAttribute("height", "16");
  82. 		svg.setAttribute("viewBox", "0 0 16 16");
  83. 		svg.setAttribute("aria-hidden", "true");
  84. 		svg.setAttribute("data-view-component", "true");
  85. 		svg.classList.add("octicon", "octicon-commit", marginClass);
  86. 		svg.innerHTML = `<path d="M11.93 8.5a4.002 4.002 0 0 1-7.86 0H.75a.75.75 0 0 1 0-1.5h3.32a4.002 4.002 0 0 1 7.86 0h3.32a.75.75 0 0 1 0 1.5Zm-1.43-.75a2.5 2.5 0 1 0-5 0 2.5 2.5 0 0 0 5 0Z"></path>`;
  87. 		return svg;
  88. 	}
  89.  
  90. 	function forMatchingElementsForever(selector, fn) {
  91. 		const observer = new MutationObserver((list, observer) => {
  92. 			for (const mutation of list) {
  93. 				for (const addedNode of mutation.addedNodes) {
  94. 					if (addedNode.nodeType !== Node.ELEMENT_NODE) {continue;}
  95. 					for (const newNode of addedNode.querySelectorAll(selector)) {
  96. 						fn(newNode);
  97. 					}
  98. 				}
  99. 			}
  100. 		});
  101. 		observer.observe(document.body, {childList: true, subtree: true});
  102.  
  103. 		for (const element of document.querySelectorAll(selector)) {
  104. 			fn(element);
  105. 		}
  106. 	}
  107.  
  108. 	main();
  109. })();