diff --git a/github-inactive-dev-warning.user.js b/github-inactive-dev-warning.user.js index fd6b00d..02110b3 100644 --- a/github-inactive-dev-warning.user.js +++ b/github-inactive-dev-warning.user.js @@ -5,7 +5,7 @@ // @description display big banner if project's last commit over 6 months ago and giant banner if over 1 year ago // @copyright 2019-2025, Zach Hardesty (https://zachhardesty.com/) // @license GPL-3.0-only; http://www.gnu.org/licenses/gpl-3.0.txt -// @version 1.3.2 +// @version 1.4.0 // @homepageURL https://github.com/zachhardesty7/tamper-monkey-scripts-collection/raw/master/github-inactive-dev-warning.user.js // @homepage https://github.com/zachhardesty7/tamper-monkey-scripts-collection/raw/master/github-inactive-dev-warning.user.js @@ -26,68 +26,184 @@ onElementReady( "[data-testid='latest-commit-details'] relative-time", { findOnce: false }, (el) => { - if (document.querySelector("#zh-banner-warning")) { - return - } + if (document.querySelector("#zh-inactive-dev-warning")) return; - const date = new Date(el.getAttribute("datetime") || "") - const daysSinceLastCommit = (Date.now() - date.getTime()) / 1000 / 60 / 60 / 24 + const date = new Date(el.getAttribute("datetime") || ""); + const daysSinceLastCommit = (Date.now() - date.getTime()) / 1000 / 60 / 60 / 24; if (daysSinceLastCommit > 365) { - renderWarning() + renderWarning(); } else if (daysSinceLastCommit > 182.5) { - renderCaution() - } else { - /* noop */ + renderCaution(); } - }, -) + } +); -/** @param {HTMLElement} el - target */ function displayMessage(el) { - document - .querySelector("#js-repo-pjax-container") - ?.insertAdjacentElement("beforebegin", el) + const container = document.querySelector("#js-repo-pjax-container"); + if (container) { + const existingBanner = document.querySelector("#zh-inactive-dev-warning"); + if (existingBanner) existingBanner.remove(); + container.insertAdjacentElement("beforebegin", el); + } +} + +function getThemeSettings() { + const colorMode = document.documentElement.getAttribute('data-color-mode'); + const darkTheme = document.documentElement.getAttribute('data-dark-theme'); + const isLight = colorMode === 'light' || + (colorMode === 'auto' && !window.matchMedia('(prefers-color-scheme: dark)').matches); + + if (isLight) { + return { + bg: '#fef7c5', + text: '#1e2227', + border: '#edd789', + close: '#58626d', + closeHover: '#1e2227', + warningColor: '#996606' // Light theme warning color + }; + } else if (darkTheme === 'dark') { + return { + bg: '#262014', + text: '#f0f0f0', + border: '#614612', + close: '#9097a0', + closeHover: '#d0d6df', + warningColor: '#d19826' // Dark theme warning color + }; + } else { // soft_dark or default + return { + bg: '#36342c', + text: '#f0f0f0', + border: '#665122', + close: '#9097a0', + closeHover: '#d0d6df', + warningColor: '#c58f29' // Soft dark theme warning color + }; + } +} + +function createCloseButton(theme) { + const closeBtn = document.createElement("button"); + closeBtn.setAttribute("style", ` + background: transparent; + border: transparent; + color: ${theme.close}; + width: 24px; + height: 24px; + border-radius: 3px; + display: flex; + align-items: center; + justify-content: center; + margin-left: auto; + cursor: pointer; + padding: 0; + transition: color 0.1s ease-in-out; + font-size: 18px; + flex-shrink: 0; + `); + closeBtn.innerHTML = "×"; + closeBtn.addEventListener("click", (e) => { + e.stopPropagation(); + document.querySelector("#zh-inactive-dev-warning")?.remove(); + }); + closeBtn.addEventListener("mouseenter", () => { + closeBtn.style.color = theme.closeHover; + }); + closeBtn.addEventListener("mouseleave", () => { + closeBtn.style.color = theme.close; + }); + return closeBtn; +} + +function createWarningIcon(theme) { + const icon = document.createElement("div"); + icon.innerHTML = ` + + + + `; + return icon; } function renderWarning() { - const banner = document.createElement("div") - banner.id = "zh-banner-warning" - banner.setAttribute( - "style", - ` - background-color: red; - height: 100px; + const theme = getThemeSettings(); + const banner = document.createElement("div"); + banner.id = "zh-inactive-dev-warning"; + banner.setAttribute("style", ` + background-color: ${theme.bg}; + color: ${theme.text}; + height: 50px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; - color: white; - font-size: 36px; - `, - ) + font-size: 18px; + border-top: 1px solid ${theme.border}; + border-bottom: 1px solid ${theme.border}; + padding: 0 16px; + position: relative; + `); + + const message = document.createElement("div"); + message.style.flex = "1"; + message.style.textAlign = "center"; + message.style.display = "flex"; + message.style.alignItems = "center"; + message.style.justifyContent = "center"; + message.style.gap = "8px"; + + message.appendChild(createWarningIcon(theme)); + + const text = document.createElement("span"); + text.textContent = "repo hasn't been updated in 1+ year(s)"; + message.appendChild(text); + + message.appendChild(createWarningIcon(theme)); - banner.textContent = "WARNING: repo hasn't received an update in 1+ year(s)" + banner.appendChild(message); + banner.appendChild(createCloseButton(theme)); - displayMessage(banner) + displayMessage(banner); } function renderCaution() { - const banner = document.createElement("div") - banner.id = "zh-banner-warning" - banner.setAttribute( - "style", - ` - background-color: yellow; + const theme = getThemeSettings(); + const banner = document.createElement("div"); + banner.id = "zh-inactive-dev-warning"; + banner.setAttribute("style", ` + background-color: ${theme.bg}; + color: ${theme.text}; height: 50px; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; - font-size: 24px; - `, - ) + font-size: 18px; + border-top: 1px solid ${theme.border}; + border-bottom: 1px solid ${theme.border}; + padding: 0 16px; + position: relative; + `); - banner.textContent = "Caution: repo hasn't received an update in 6+ months" + const message = document.createElement("div"); + message.style.flex = "1"; + message.style.textAlign = "center"; + message.style.display = "flex"; + message.style.alignItems = "center"; + message.style.justifyContent = "center"; + message.style.gap = "8px"; - displayMessage(banner) -} + message.appendChild(createWarningIcon(theme)); + + const text = document.createElement("span"); + text.textContent = "repo hasn't been updated in 6+ months"; + message.appendChild(text); + + message.appendChild(createWarningIcon(theme)); + + banner.appendChild(message); + banner.appendChild(createCloseButton(theme)); + + displayMessage(banner); +} \ No newline at end of file