frictionless-browser/js/app.js

let area = document.querySelector('#area-main');
let entries = [];
let users = {};
let fetchData;
let sum = 0;
let doThings = false;
let i = 0;

async function genTree(treeId) {
	let entry = treeId;

	while (true) {
		let entryDat = fetchData[entry];

		entries.push(entry);

		if (!entryDat) break;

		let us = users[entryDat.username];

		let s = 1 / ((new Date() - new Date(entryDat.datetime_created.$date)) + 1000 * 60 * 60);
		sum += s;
		users[entryDat.username] = (us ? us : 0) + s;
		entry = entryDat.parent_id;
	}

	return entry;
}

async function main() {
	fetchData = await fetch(`https://scratch.mit.edu/projects/328479256/remixtree/bare/`).then(x => x.json());

	let latestData = await fetch(`https://hf.zenoverse.net/api/`).then(x => x.json());

	let lid = latestData[0].id;
	let i = 0;
	while (!fetchData[lid]) {
		i++;
		lid = latestData[i].id;
	}

	while (fetchData[lid].children.length > 0) {
		let ch = fetchData[lid].children;
		let ch2 = ch.filter(x => fetchData[x].children.length > 0);
		lid = ch2[0] || ch[0];
	}
	await genTree(lid); // latest project
	for (let gap of treeGaps) {
		await genTree(gap); // tree bug here, unavoidable without jank
	}

	let params = new URL(window.location).searchParams;

	entries.forEach((x, i) => x && fetchData[x] ? (fetchData[x].id = entries.length - i - 2) : null);

	let start = params.get('start') * 1;
	let end = params.get('end') * 1;

	end = Math.min(end,entries.length-2);

	if (start && end) {
		entries = entries.splice(entries.length - end - 2, end - start + 1);
	}

	doThings = true;
	document.querySelector('.contributors').innerHTML = Object.keys(users)
		.sort((x, y) => users[y] - users[x])
		.map(x => `<a href='https://scratch.mit.edu/users/${x}'>${x}</a> <sub>${Math.trunc(users[x] / sum * 100000) / 1000}%</sub>`)
		.join(', '); // Doesn't need to be sanitized (hopefully)

	let newEras = importedEras.split('\n').map(x => x.split('-')).map(x => ({ start: x[0] * 1, end: x[1] * 1, name: x[2].slice(1) }));

	eras = [...eras, ...newEras];

	document.querySelector('.eras').innerHTML = eras.map(x => `<a href='?start=${x.start}&end=${x.end}'>${x.name}`).join(', ');
	setInterval(function () {
		if (doThings && (window.innerHeight + window.scrollY) >= document.body.scrollHeight - 25)
			scroller();
	}, 500)

}

function sanitize(content) {
	const decoder = document.createElement('div');
	decoder.textContent = content;
	return decoder.innerHTML;
}

function scroller() {
	let h = '';
	for (let j = 0; j < 35; j++) {
		let entry = entries[i];
		if (!entry || !(entry in fetchData)) break;
		h += `<div class='proj'><a href="https://scratch.mit.edu/projects/${entry}"><img src='https://uploads.scratch.mit.edu/get_image/project/${entry}_1920x1080.png'>${sanitize(fetchData[entry].title)}</a> <sub>#${fetchData[entry].id} by ${fetchData[entry].username}</sub></div>`;
		i++;
	}
	area.innerHTML += h;
}

main();