gh-self-star.html

<h1>Measure self-starring <span title="percentage of your starred repos are also your repos" class="infos">ratio</span> of Github users</h1>
<style>
body {
	font-family: arial;
}
h1 {
	text-align: center;
	margin-top: 3em;
	margin-bottom: 2em;
}
.infos {
	border-bottom: lightblue dashed;
}
input {
	font-size: 1.5em;
	margin: .5em auto;
}
input[type=submit] {
	background: transparent;
	border: 1px solid gray;
	font-feature-settings: 'liga' 1;
	padding: 5px 10px;
}
input[type=submit]:disabled {
	border: 1px solid lightgray;
}
form {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
pre {
	max-width: 400px;
	margin: 1em auto;
}
</style>
<form>
	<input name="login" placeholder="Github login, ex: mdo" required>
	<input name="token" placeholder="Github API token" required>
	<input type="submit" value="🔍">
</form>

<pre id="output">
	
</pre>

<script>
/*
create token: https://developer.github.com/v4/guides/forming-calls/#authenticating-with-graphql
*/
const form = document.forms[0];

if (localStorage.ghToken) {
	form.token.value = localStorage.ghToken;
}

form.onsubmit = submit;

async function submit(e) {
	if (e) e.preventDefault();
	const login = form.login.value;
	localStorage.ghToken = form.token.value;
	form.elements[2].disabled = true;
	try {
		const user = await getUser({login});
		const totalStars = user.starredRepositories.totalCount;
		const orgs = new Set(user.organizations.nodes.map(o => o.login));
		let reps;
		let cursor;
		let count = 0;
		for (let i=0; i < 100; i++) {
			reps = await getStars({login, after: cursor});
			console.log(reps.nodes.length);
			count += reps.nodes.filter(({owner}) => owner.login === login || orgs.has(owner.login)).length;
			cursor = reps.pageInfo.endCursor;
			if (!reps.pageInfo.hasNextPage) {
				break;
			}
		}
		console.log(count, totalStars);
		output.innerHTML = `
	<strong>${login}</strong>'s self-starring factor: ${count} / ${totalStars} = ${(count / totalStars).toFixed(2)}
`;
	} catch(err) {
		output.innerHTML = `<a href="https://developer.github.com/v4/guides/forming-calls/#authenticating-with-graphql">${err && err.message || 'Create a GH token!'}</a>`
	}
	form.elements[2].disabled = false;
};
const getUser = ({login}) => gql({
	query: `query user($login: String!) { 
	user(login: $login) { 
		organizations(first: 100) {
			nodes {
				login
			}
		}
		starredRepositories {
			totalCount
		}
	}
}`,
	variables: {
		login
	}
})
	.then(d => d.user);

const getStars = ({login, after, first = 100}) => gql({
	query: `query userStars($login: String!, $first: Int, $after: String) { 
	user(login: $login) { 
		starredRepositories(first: $first, after: $after) {
			nodes {
				id
				owner {login}
			}
			pageInfo {
				endCursor
				hasNextPage
			}
		}
	}
}`,
	variables: {
		login, first, after
	}
})
	.then(d => d.user.starredRepositories);

const gql = ({query, variables}) => fetch('https://api.github.com/graphql', {
	method: 'POST',
	headers: {
		Authorization: `bearer ${localStorage.ghToken}`
	},
	body: JSON.stringify({
		query,
		variables
	})
})
	.then(async r => {
		if (!r.ok) {
			const d = await r.json();
			throw new Error(d.message);
		}
		return r.json().then(d => d.data);
	});

if (location.hash.length > 1) {
	form.login.value = location.hash.slice(1);
	submit();
}
</script>