Displays user's join date/time/age.
Per
// ==UserScript==
// @name GitHub Join Date
// @description Displays user's join date/time/age.
// @icon https://github.githubassets.com/favicons/favicon-dark.svg
// @version 1.2
// @author afkarxyz
// @namespace https://github.com/afkarxyz/userscripts/
// @supportURL https://github.com/afkarxyz/userscripts/issues
// @license MIT
// @match https://github.com/*
// @grant none
// @run-at document-idle
// ==/UserScript==
(function() {
'use strict';
const ELEMENT_ID = 'userscript-join-date-display';
const CACHE_KEY = 'githubUserJoinDatesCache_v1';
let isProcessing = false;
let observerDebounceTimeout = null;
function readCache() {
try {
const cachedData = localStorage.getItem(CACHE_KEY);
return cachedData ? JSON.parse(cachedData) : {};
} catch (e) {
return {};
}
}
function writeCache(cacheData) {
try {
localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));
} catch (e) {
}
}
function getRelativeTime(dateString) {
const joinDate = new Date(dateString);
const now = new Date();
const diffInSeconds = Math.round((now - joinDate) / 1000);
const minute = 60, hour = 3600, day = 86400, month = 2592000, year = 31536000;
if (diffInSeconds < minute) return `less than a minute ago`;
if (diffInSeconds < hour) {
const m = Math.floor(diffInSeconds / minute);
return `${m} ${m === 1 ? 'minute' : 'minutes'} ago`;
}
if (diffInSeconds < day) {
const h = Math.floor(diffInSeconds / hour);
return `${h} ${h === 1 ? 'hour' : 'hours'} ago`;
}
if (diffInSeconds < month) {
const d = Math.floor(diffInSeconds / day);
return `${d} ${d === 1 ? 'day' : 'days'} ago`;
}
if (diffInSeconds < year) {
const mo = Math.floor(diffInSeconds / month);
return `${mo} ${mo === 1 ? 'month' : 'months'} ago`;
}
const y = Math.floor(diffInSeconds / year);
return `${y} ${y === 1 ? 'year' : 'years'} ago`;
}
function getAbbreviatedMonth(date) {
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return months[date.getMonth()];
}
async function getGitHubJoinDate(user) {
const apiUrl = `https://api.github.com/users/${user}`;
try {
const response = await fetch(apiUrl);
if (!response.ok) {
return null;
}
const userData = await response.json();
return userData.created_at;
} catch (error) {
return null;
}
}
function removeExistingElement() {
const existingElement = document.getElementById(ELEMENT_ID);
if (existingElement) {
existingElement.remove();
}
}
async function addOrUpdateJoinDateElement() {
if (document.getElementById(ELEMENT_ID) && !isProcessing) { return; }
if (isProcessing) { return; }
const pathParts = window.location.pathname.split('/').filter(part => part);
if (pathParts.length < 1 || pathParts.length > 2 || (pathParts.length === 2 && !['sponsors', 'followers', 'following'].includes(pathParts[1]))) {
removeExistingElement();
return;
}
const usernameElement = document.querySelector('.p-nickname.vcard-username') ||
document.querySelector('h1.h2.lh-condensed');
if (!usernameElement) {
removeExistingElement();
return;
}
const username = pathParts[0].toLowerCase();
isProcessing = true;
let joinElement = document.getElementById(ELEMENT_ID);
let createdAtISO = null;
let fromCache = false;
try {
const cache = readCache();
if (cache[username]) {
createdAtISO = cache[username];
fromCache = true;
}
if (!joinElement) {
joinElement = document.createElement('div');
joinElement.id = ELEMENT_ID;
joinElement.innerHTML = fromCache ? "..." : "Loading...";
joinElement.style.color = 'var(--color-fg-muted)';
joinElement.style.fontSize = '14px';
joinElement.style.fontWeight = 'normal';
if (usernameElement.classList.contains('h2')) {
joinElement.style.marginTop = '0px';
const colorFgMuted = usernameElement.nextElementSibling?.classList.contains('color-fg-muted') ?
usernameElement.nextElementSibling : null;
if (colorFgMuted) {
const innerDiv = colorFgMuted.querySelector('div') || colorFgMuted;
innerDiv.appendChild(joinElement);
} else {
usernameElement.insertAdjacentElement('afterend', joinElement);
}
} else {
joinElement.style.marginTop = '8px';
usernameElement.insertAdjacentElement('afterend', joinElement);
}
}
if (!fromCache) {
createdAtISO = await getGitHubJoinDate(username);
joinElement = document.getElementById(ELEMENT_ID);
if (!joinElement) { return; }
if (createdAtISO) {
const currentCache = readCache();
currentCache[username] = createdAtISO;
writeCache(currentCache);
} else {
removeExistingElement();
return;
}
}
if (createdAtISO && joinElement) {
const joinDate = new Date(createdAtISO);
const day = joinDate.getDate();
const month = getAbbreviatedMonth(joinDate);
const year = joinDate.getFullYear();
const hours = joinDate.getHours().toString().padStart(2, '0');
const minutes = joinDate.getMinutes().toString().padStart(2, '0');
const formattedTime = `${hours}:${minutes}`;
const relativeTimeString = getRelativeTime(createdAtISO);
joinElement.innerHTML = `<strong>Joined</strong> <span style="font-weight: normal;">${day} ${month} ${year} - ${formattedTime} (${relativeTimeString})</span>`;
} else if (!createdAtISO && joinElement) {
removeExistingElement();
}
} catch (error) {
removeExistingElement();
} finally {
isProcessing = false;
}
}
function handlePotentialPageChange() {
clearTimeout(observerDebounceTimeout);
observerDebounceTimeout = setTimeout(() => {
addOrUpdateJoinDateElement();
}, 600);
}
addOrUpdateJoinDateElement();
const observer = new MutationObserver((mutationsList) => {
let potentiallyRelevantChange = false;
for (const mutation of mutationsList) {
if (mutation.type === 'childList' && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)) {
const targetNode = mutation.target;
if (targetNode && (targetNode.matches?.('main, main *, .Layout-sidebar, .Layout-sidebar *, body'))) {
let onlySelfChange = false;
if ((mutation.addedNodes.length === 1 && mutation.addedNodes[0].id === ELEMENT_ID && mutation.removedNodes.length === 0) ||
(mutation.removedNodes.length === 1 && mutation.removedNodes[0].id === ELEMENT_ID && mutation.addedNodes.length === 0)) {
onlySelfChange = true;
}
if (!onlySelfChange) {
potentiallyRelevantChange = true;
break;
}
}
}
}
if(potentiallyRelevantChange) {
handlePotentialPageChange();
}
});
observer.observe(document.body, { childList: true, subtree: true });
})();