refined-github · fregante · Jun 15, 2022 · Jun 15, 2022 · Apr 25, 2023 · Apr 25, 2023
diff --git a/releases-tab.tsx b/releases-tab.tsx
@@ -0,0 +1,133 @@
+import React from 'dom-chef';
+import {CachedFunction} from 'webext-storage-cache';
+import TagIcon from 'octicons-plain-react/Tag';
+import elementReady from 'element-ready';
+import * as pageDetect from 'github-url-detection';
+import {$optional} from 'select-dom/strict.js';
+
+import observe from '../helpers/selector-observer.js';
+import features from '../feature-manager.js';
+import api from '../github-helpers/api.js';
+import abbreviateNumber from '../helpers/abbreviate-number.js';
+import createDropdownItem from '../github-helpers/create-dropdown-item.js';
+import {
+	buildRepoURL,
+	cacheByRepo,
+	getRepo,
+	triggerRepoNavOverflow,
+} from '../github-helpers/index.js';
+import {appendBefore} from '../helpers/dom-utils.js';
+import {repoUnderlineNavUl, repoUnderlineNavDropdownUl} from '../github-helpers/selectors.js';
+import GetReleasesCount from './releases-tab.gql';
+import {expectToken} from '../github-helpers/github-token.js';
+
+function detachHighlightFromCodeTab(codeTab: HTMLAnchorElement): void {
+	codeTab.dataset.selectedLinks = codeTab.dataset.selectedLinks!.replace('repo_releases ', '');
+}
+
+const releasesCount = new CachedFunction('releases-count', {
+	updater: fetchCounts,
+	shouldRevalidate: cachedValue => typeof cachedValue === 'number',
+	maxAge: {hours: 1},
+	staleWhileRevalidate: {days: 3},
+	cacheKey: cacheByRepo,
+});
+
+export async function getReleases(): Promise<[0] | [number, 'Tags' | 'Releases']> {
+	const repo = getRepo()!.nameWithOwner;
+	return releasesCount.get(repo);
+}
+
+async function fetchCounts(nameWithOwner: string): Promise<[0] | [number, 'Tags' | 'Releases'] > {
+	const [owner, name] = nameWithOwner.split('/');
+	const {repository: {releases, tags}} = await api.v4(GetReleasesCount, {
+		variables: {name, owner},
+	});
+
+	if (releases.totalCount) {
+		return [releases.totalCount, 'Releases'];
+	}
+
+	if (tags.totalCount) {
+		return [tags.totalCount, 'Tags'];
+	}
+
+	return [0];
+}
+
+async function addReleasesTab(repoNavigationBar: HTMLElement): Promise<false | void> {
+	const [count, type] = await getReleases();
+	if (!type) {
+		return false;
+	}
+
+	// Wait for the dropdown because `observe` fires as soon as it encounter the container. `releases-tab` must be appended.
+	await elementReady(repoUnderlineNavUl);
+
+	repoNavigationBar.append(
+		<li className="d-flex">
+			<a
+				href={buildRepoURL(type.toLowerCase())}
+				className="js-selected-navigation-item UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item rgh-releases-tab"
+				data-hotkey="g r"
+				data-selected-links="repo_releases"
+				data-tab-item="rgh-releases-item"
+				data-turbo-frame="repo-content-turbo-frame" /* Required for `data-selected-links` to work */
+			>
+				<TagIcon className="UnderlineNav-octicon d-none d-sm-inline" />
+				<span data-content={type}>{type}</span>
+				<span className="Counter" title={count > 999 ? String(count) : ''}>{abbreviateNumber(count)}</span>
+			</a>
+		</li>,
+	);
+
+	triggerRepoNavOverflow();
+}
+
+async function addReleasesDropdownItem(dropdownMenu: HTMLElement): Promise<false | void> {
+	const [, type] = await getReleases();
+
+	if (!type) {
+		$optional('.dropdown-divider', dropdownMenu)?.remove();
+		return false;
+	}
+
+	appendBefore(
+		dropdownMenu,
+		'.dropdown-divider', // Won't exist if `clean-repo-tabs` is disabled
+		createDropdownItem({
+			'label': type,
+			'href': buildRepoURL(type.toLowerCase()),
+			'icon': TagIcon,
+			'data-menu-item': 'rgh-releases-item',
+		}),
+	);
+
+	triggerRepoNavOverflow();
+}
+
+async function init(signal: AbortSignal): Promise<void> {
+	await expectToken();
+	observe(repoUnderlineNavUl, addReleasesTab, {signal});
+	observe(repoUnderlineNavDropdownUl, addReleasesDropdownItem, {signal});
+	observe(['[data-menu-item="i0code-tab"] a', 'a#code-tab'], detachHighlightFromCodeTab, {signal});
+}
+
+void features.add(import.meta.url, {
+	shortcuts: {
+		'g r': 'Go to Releases',
+	},
+	include: [
+		pageDetect.hasRepoHeader,
+	],
+	init,
+});
+
+/*
+
+Test URLs:
+
+Releases: https://github.com/refined-github/refined-github
+Tags: https://github.com/python/cpython
+
+*/
diff --git a/reload-failed-proxied-images.tsx b/reload-failed-proxied-images.tsx
@@ -0,0 +1,35 @@
+import delegate, {type DelegateEvent} from 'delegate-it';
+
+import delay from '../helpers/delay.js';
+import onetime from '../helpers/onetime.js';
+import features from '../feature-manager.js';
+
+async function handleErroredImage({delegateTarget}: DelegateEvent<ErrorEvent, HTMLImageElement>): Promise<void> {
+	console.log('Refined GitHub: image failed loading, will retry', delegateTarget.src);
+
+	await delay(5000);
+	try {
+		// A clone image retries downloading
+		const cloned = delegateTarget.cloneNode();
+		await cloned.decode();
+		// If successfully loaded, the failed image will be replaced.
+		delegateTarget.replaceWith(cloned);
+	} catch {}
+}
+
+function initOnce(): void {
+	delegate('img[src^="https://camo.githubusercontent.com/"]', 'error', handleErroredImage, {capture: true});
+}
+
+void features.add(import.meta.url, {
+	init: onetime(initOnce),
+});
+
+/*
+
+Test URLs:
+
+1. https://github.com/refined-github/sandbox/blob/7416/7416.md
+2. See log in console
+
+*/
diff --git a/repo-age.tsx b/repo-age.tsx
@@ -0,0 +1,120 @@
+import twas from 'twas';
+import {CachedFunction} from 'webext-storage-cache';
+import React from 'dom-chef';
+import RepoIcon from 'octicons-plain-react/Repo';
+import elementReady from 'element-ready';
+import * as pageDetect from 'github-url-detection';
+
+import features from '../feature-manager.js';
+import api from '../github-helpers/api.js';
+import {cacheByRepo} from '../github-helpers/index.js';
+import GetRepoAge from './repo-age.gql';
+import GetFirstCommit from './repo-age-first-commit.gql';
+import {randomArrayItem} from '../helpers/math.js';
+
+type CommitTarget = {
+	oid: string;
+	committedDate: string;
+	resourcePath: string;
+	history: {
+		totalCount: number;
+	};
+};
+
+const fresh = [
+	'Freshly baked',
+	'Freshly brewed',
+	'Newly minted',
+	'Hot off the presses',
+	'Straight out of the oven',
+	'Still hot',
+	'Smells fresh',
+	'Just a baby',
+	'It’s my birthday',
+	'Brand spanking new',
+	'It’s a new world ✨',
+	'Certified Fresh Repo™',
+	'So it begins, the great battle of our time',
+];
+
+const dateFormatter = new Intl.DateTimeFormat('en-US', {
+	year: 'numeric',
+	month: 'long',
+	day: 'numeric',
+});
+
+async function getRepoAge(commitSha: string, commitsCount: number): Promise<[committedDate: string, resourcePath: string]> {
+	const {repository} = await api.v4(GetRepoAge, {
+		variables: {
+			cursor: `${commitSha} ${commitsCount - Math.min(6, commitsCount)}`,
+		},
+	});
+
+	const {committedDate, resourcePath} = repository.defaultBranchRef.target.history.nodes
+		.reverse()
+		// Filter out any invalid commit dates #3185
+		.find((commit: CommitTarget) => new Date(commit.committedDate).getFullYear() > 1970);
+
+	return [committedDate, resourcePath];
+}
+
+const firstCommit = new CachedFunction('first-commit', {
+	async updater(): Promise<[committedDate: string, resourcePath: string]> {
+		const {repository} = await api.v4(GetFirstCommit);
+
+		const {oid: commitSha, history, committedDate, resourcePath} = repository.defaultBranchRef.target as CommitTarget;
+		const commitsCount = history.totalCount;
+		if (commitsCount === 1) {
+			return [committedDate, resourcePath];
+		}
+
+		return getRepoAge(commitSha, commitsCount);
+	},
+	cacheKey: cacheByRepo,
+});
+
+async function init(): Promise<void> {
+	const [firstCommitDate, firstCommitHref] = await firstCommit.get();
+	const birthday = new Date(firstCommitDate);
+
+	// `twas` could also return `an hour ago` or `just now`
+	const [value, unit] = twas(birthday.getTime())
+		.replace('just now', '1 second')
+		.replace(/^an?/, '1')
+		.split(' ');
+
+	// About a day old or less ?
+	const age = Date.now() - birthday.getTime() < 10e7
+		? randomArrayItem(fresh)
+		: <><strong>{value}</strong> {unit} old</>;
+
+	const sidebarForksLinkIcon = await elementReady('.BorderGrid .octicon-repo-forked');
+	sidebarForksLinkIcon!.closest('.mt-2')!.after(
+		<h3 className="sr-only">Repository age</h3>,
+		<div className="mt-2">
+			<a href={firstCommitHref} className="Link--muted" title={`First commit dated ${dateFormatter.format(birthday)}`}>
+				<RepoIcon className="mr-2" /> {age}
+			</a>
+		</div>,
+	);
+}
+
+void features.add(import.meta.url, {
+	include: [
+		pageDetect.isRepoRoot,
+	],
+	exclude: [
+		pageDetect.isEmptyRepoRoot,
+	],
+	deduplicate: 'has-rgh-inner',
+	init,
+});
+
+/*
+
+Test URLs:
+
+https://github.com/refined-github/sandbox
+https://github.com/refined-github/sandbox/tree/6619
+
+*/
diff --git a/repo-avatars.tsx b/repo-avatars.tsx
@@ -0,0 +1,50 @@
+import React from 'dom-chef';
+import * as pageDetect from 'github-url-detection';
+
+import features from '../feature-manager.js';
+import {getRepo} from '../github-helpers/index.js';
+import getUserAvatar from '../github-helpers/get-user-avatar.js';
+import observe from '../helpers/selector-observer.js';
+
+async function add(ownerLabel: HTMLElement): Promise<void> {
+	const username = getRepo()!.owner;
+	const size = 16;
+	const source = getUserAvatar(username, size)!;
+
+	const avatar = (
+		<img
+			className="avatar ml-1 mr-2"
+			src={source}
+			width={size}
+			height={size}
+			alt={`@${username}`}
+		/>
+	);
+
+	ownerLabel.classList.add('d-flex', 'flex-items-center');
+	ownerLabel.prepend(avatar);
+
+	if (!ownerLabel.closest('[data-hovercard-type="organization"]')) {
+		avatar.classList.add('avatar-user');
+	}
+}
+
+function init(signal: AbortSignal): void {
+	observe('.AppHeader-context-full [role="listitem"]:first-child .AppHeader-context-item-label', add, {signal});
+}
+
+void features.add(import.meta.url, {
+	include: [
+		pageDetect.hasRepoHeader,
+	],
+	init,
+});
+
+/*
+
+## Test URLs
+
+- org repo: https://github.com/refined-github/refined-github/issues
+- user repo: https://github.com/fregante/GhostText/issues
+
+*/