|
| 1 | +/* eslint-disable no-mixed-operators */ |
| 2 | +import fs from "node:fs/promises"; |
| 3 | + |
| 4 | +import { createCanvas, loadImage } from "@napi-rs/canvas"; |
| 5 | +import { ofetch } from "ofetch"; |
| 6 | + |
| 7 | +const projects = [ |
| 8 | + "ant-design/ant-design", |
| 9 | + "DimensionDev/Maskbook", |
| 10 | + "dream-num/univer", |
| 11 | + "electric-sql/pglite", |
| 12 | + "ensdomains/ensdomains-landing", |
| 13 | + "flirtual/flirtual", |
| 14 | + "hashintel/hash", |
| 15 | + "npmgraph/npmgraph", |
| 16 | + "react-navigation/react-navigation", |
| 17 | + "refined-github/refined-github", |
| 18 | + "RSSNext/Follow", |
| 19 | + "TanStack/query", |
| 20 | + "toss/suspensive", |
| 21 | + "upleveled/eslint-config-upleveled", |
| 22 | + "XYOracleNetwork/sdk-xyo-react-js", |
| 23 | + "zolplay-cn/config-monorepo", |
| 24 | +]; |
| 25 | + |
| 26 | +interface GitHubRepo { |
| 27 | + owner: { |
| 28 | + avatar_url: string; |
| 29 | + }; |
| 30 | +} |
| 31 | + |
| 32 | +async function fetchGitHubAvatar(repo: string, token?: string): Promise<string> { |
| 33 | + if (token == null) { |
| 34 | + throw new Error("GitHub token is required"); |
| 35 | + } |
| 36 | + const data = await ofetch<GitHubRepo>(`https://api.github.com/repos/${repo}`, { |
| 37 | + headers: { |
| 38 | + Authorization: `token ${token}`, |
| 39 | + }, |
| 40 | + }); |
| 41 | + return data.owner.avatar_url; |
| 42 | +} |
| 43 | + |
| 44 | +async function buildUsedByImage(users: string[]) { |
| 45 | + const gap = 64; |
| 46 | + const width = 3840; |
| 47 | + const height = Math.ceil(users.length / 8) * (width / 8); |
| 48 | + const getItemX = (index: number) => index % 8 * (width / 8) + gap / 2; |
| 49 | + const getItemY = (index: number) => Math.floor(index / 8) * (width / 8) + gap / 2; |
| 50 | + const canvas = createCanvas(width, height); |
| 51 | + const ctx = canvas.getContext("2d", { alpha: true, colorSpace: "srgb" }); |
| 52 | + ctx.fillStyle = "#FFFFFF00"; |
| 53 | + ctx.fillRect(0, 0, width, height); |
| 54 | + for (const [index, avatar] of users.entries()) { |
| 55 | + const x = getItemX(index); |
| 56 | + const y = getItemY(index); |
| 57 | + const image = await loadImage(avatar); |
| 58 | + ctx.save(); |
| 59 | + ctx.beginPath(); |
| 60 | + ctx.arc(x + (width / 8 - gap) / 2, y + (width / 8 - gap) / 2, (width / 8 - gap) / 2, 0, Math.PI * 2); |
| 61 | + ctx.closePath(); |
| 62 | + ctx.clip(); |
| 63 | + ctx.fillStyle = "#ffffff"; |
| 64 | + ctx.fillRect(x, y, width / 8 - gap, width / 8 - gap); |
| 65 | + ctx.drawImage(image, x, y, width / 8 - gap, width / 8 - gap); |
| 66 | + ctx.strokeStyle = "#d1d9e080"; |
| 67 | + ctx.lineWidth = 4; |
| 68 | + ctx.stroke(); |
| 69 | + ctx.restore(); |
| 70 | + } |
| 71 | + const displayWidth = width / 2; |
| 72 | + const displayHeight = height / 2; |
| 73 | + const displayCanvas = createCanvas(displayWidth, displayHeight); |
| 74 | + const displayCtx = displayCanvas.getContext("2d", { alpha: true, colorSpace: "srgb" }); |
| 75 | + displayCtx.drawImage(canvas, 0, 0, displayWidth, displayHeight); |
| 76 | + return displayCanvas.encode("png"); |
| 77 | +} |
| 78 | + |
| 79 | +const token = process.env["GITHUB_TOKEN"]; |
| 80 | +const avatars = await Promise.all(projects.map(async (repo) => fetchGitHubAvatar(repo, token))); |
| 81 | +const avatarsDeDup = Array.from(new Set(avatars)); |
| 82 | +const img = await buildUsedByImage(avatarsDeDup); |
| 83 | +await fs.writeFile("website/assets/used_by.png", img); |
| 84 | +await fs.writeFile("website/public/used_by.png", img); |
0 commit comments