Explosion-Scratch/stars.js

## stars.js
let repos = [...document.querySelectorAll("#readme a")]
  .map((i) => i.href)
  .filter((i) => !i.includes(location.host + location.pathname))
  .filter((i) => i.includes("github.com/"))
  .map((i) => i.split("/"))
  .filter((i) => i.length === 5);

fetch("https://api.github.com/graphql", {
  body: JSON.stringify({
    query: `query repos {\n${repos
      .map(
        (i, idx) =>
          `\trepo${idx + 1}: repository(owner: ${JSON.stringify(
            i[3]
          )}, name: ${JSON.stringify(i[4])}){stargazerCount}`
      )
      .join("\n")}\n}`,
  }),
  headers: {
    Authorization: "bearer TOKEN_GOES_HERE",
    "Content-Type": "application/x-www-form-urlencoded",
  },
  method: "POST",
})
  .then((r) => r.json())
  .then((j) => {
    return Object.fromEntries(
      Object.values(j.data)
        .map((i) => i?.stargazerCount)
        .map((i, idx) => [repos[idx][3] + "/" + repos[idx][4], i])
        .filter((i) => i[1])
    );
  })
  .then((a) => {
    window.fetched_stars = a;
    const html = Object.entries(a)
      .sort((a, b) => b[1] - a[1])
      .map(
        (i) =>
          `<li><a href=${JSON.stringify(
            `https://github.com/${i[0]}`
          )}>⭐${new Intl.NumberFormat("en-US", { notation: "compact" }).format(
            i[1]
          )} - ${
            [...document.querySelectorAll("a")].find((j) =>
              j.href.includes(i[0])
            )?.innerText || i[0]
          }</a><i> - ${i[0]}</i></li>`
      )
      .join("\n");
    const url = URL.createObjectURL(
      new Blob(
        [
          `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub Stargazers</title>
    <style>body,
ul {
  margin: 0;
  padding: 0;
}
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
}
.container {
  width: 80%;
  max-width: 800px;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  padding: 2rem;
  margin-top: 2rem;
}
ul {
  list-style-type: none;
}
ul li {
  padding: 0.5rem 0;
}
h1 {
  display: block;
  font-weight: 100;
  text-align: center;
  color: #444;
}
a {
  box-shadow: inset 0 0 0 0 #54b3d6;
  color: #54b3d6;
  margin: 0 -0.25rem;
  padding: 0 0.25rem;
  transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
a:hover {
  box-shadow: inset 400px 0 0 0 #54b3d6;
  color: white;
}
i {color: #888}
</style>
</head>
<body>
    <div class='container'><h1>⭐ Top Stars ⭐</h1><ul>${html}</ul>
</body>
</html>
`,
        ],
        { type: "text/html" }
      )
    );
    console.log(url);
    window.open(url, "_blank");
  });
	let repos = [...document.querySelectorAll("#readme a")]
	.map((i) => i.href)
	.filter((i) => !i.includes(location.host + location.pathname))
	.filter((i) => i.includes("github.com/"))
	.map((i) => i.split("/"))
	.filter((i) => i.length === 5);

	fetch("https://api.github.com/graphql", {
	body: JSON.stringify({
	query: `query repos {\n${repos
	.map(
	(i, idx) =>
	`\trepo${idx + 1}: repository(owner: ${JSON.stringify(
	i[3]
	)}, name: ${JSON.stringify(i[4])}){stargazerCount}`
	)
	.join("\n")}\n}`,
	}),
	headers: {
	Authorization: "bearer TOKEN_GOES_HERE",
	"Content-Type": "application/x-www-form-urlencoded",
	},
	method: "POST",
	})
	.then((r) => r.json())
	.then((j) => {
	return Object.fromEntries(
	Object.values(j.data)
	.map((i) => i?.stargazerCount)
	.map((i, idx) => [repos[idx][3] + "/" + repos[idx][4], i])
	.filter((i) => i[1])
	);
	})
	.then((a) => {
	window.fetched_stars = a;
	const html = Object.entries(a)
	.sort((a, b) => b[1] - a[1])
	.map(
	(i) =>
	`<li><a href=${JSON.stringify(
	`https://github.com/${i[0]}`
	)}>⭐${new Intl.NumberFormat("en-US", { notation: "compact" }).format(
	i[1]
	)} - ${
	[...document.querySelectorAll("a")].find((j) =>
	j.href.includes(i[0])
	)?.innerText \|\| i[0]
	}</a><i> - ${i[0]}</i></li>`
	)
	.join("\n");
	const url = URL.createObjectURL(
	new Blob(
	[
	`<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GitHub Stargazers</title>
	<style>body,
	ul {
	margin: 0;
	padding: 0;
	}
	body {
	font-family: Arial, sans-serif;
	background-color: #f5f5f5;
	display: flex;
	justify-content: center;
	}
	.container {
	width: 80%;
	max-width: 800px;
	background-color: #fff;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
	padding: 2rem;
	margin-top: 2rem;
	}
	ul {
	list-style-type: none;
	}
	ul li {
	padding: 0.5rem 0;
	}
	h1 {
	display: block;
	font-weight: 100;
	text-align: center;
	color: #444;
	}
	a {
	box-shadow: inset 0 0 0 0 #54b3d6;
	color: #54b3d6;
	margin: 0 -0.25rem;
	padding: 0 0.25rem;
	transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
	}
	a:hover {
	box-shadow: inset 400px 0 0 0 #54b3d6;
	color: white;
	}
	i {color: #888}
	</style>
	</head>
	<body>
	<div class='container'><h1>⭐ Top Stars ⭐</h1><ul>${html}</ul>
	</body>
	</html>
	`,
	],
	{ type: "text/html" }
	)
	);
	console.log(url);
	window.open(url, "_blank");
	});