feat: compress avater

README.md

@@ -19,6 +19,7 @@ The following parameters are available:
 - space: The spacing between avatars (default: 5)
 - no_bot: Do not show bots (default: false)
 - min_contributions: Only show contributors with at least this number of contributions (default: 0)
+- compress: The height/width of each avatar after compression (default: radius \* 4, 0 to disable)
 
 ## Example
 

app/(empty)/iframe/page.tsx

@@ -37,6 +37,7 @@ export default function Page() {
     users: users,
     no_bot: searchParams.getAll("no_bot").length > 0,
     min_contributions: searchParams.get("min_contributions"),
+    compress: searchParams.get("compress"),
   })
   const usersGroup = params.users.reduce((acc, user) => {
     const index = acc.findIndex((group) => group.length < params.cols)

app/api/github.ts

@@ -43,7 +43,7 @@ const repoNotFoundCache = new LRUCache<string, boolean>({
   ttl: 1000 * 60 * 60 * 12,
 })
 
-const avatarCache = new LRUCache<string, string>({
+const avatarCache = new LRUCache<string, Buffer>({
   max: 2000,
   ttl: 1000 * 60 * 60 * 24,
 })
@@ -136,14 +136,11 @@ export async function fetchRepos(repos: string[], maxPages?: number) {
 }
 
 export async function fetchAvatar(url: string) {
-  if (!url.startsWith("http")) {
-    return url
-  }
   if (avatarCache.has(url)) {
     return avatarCache.get(url)!
   }
   const response = await fetch(url)
-  const res = Buffer.from(await response.arrayBuffer()).toString("base64")
+  const res = Buffer.from(await response.arrayBuffer())
   avatarCache.set(url, res)
   return res
 }

app/api/route.ts

@@ -18,6 +18,7 @@ export async function GET(req: NextRequest): Promise<NextResponse> {
       space: searchParams.get("space"),
       no_bot: searchParams.getAll("no_bot").length > 0,
       min_contributions: searchParams.get("min_contributions"),
+      compress: searchParams.get("compress"),
     })
     return new NextResponse(svg, {
       headers: {

app/api/svg.ts

@@ -32,10 +32,14 @@ export async function generateSVG(
   conf: { repos: string[]; maxPages?: number } & Omit<calParamsArg, "users">
 ) {
   const users = (await fetchRepos(conf.repos, conf.maxPages)) as GhUser[]
+  const params = calParams({ ...conf, users: users })
   const avatars = await Promise.all(
-    users.map(async (user: GhUserUse) => await fetchAvatar(user.avatar_url))
+    params.users.map(async (user: GhUserUse) => {
+      const buf = await fetchAvatar(user.avatar_url)
+      const compressed = await params.compress(buf)
+      return compressed.toString("base64")
+    })
   )
-  const params = calParams({ ...conf, users: users })
   let svg = getHead(params)
   for (let i = 0; i < params.total; i++) {
     svg += getUser(

package.json

@@ -27,6 +27,7 @@
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "sharp": "^0.32.6",
     "swr": "^2.2.4",
     "tailwind-variants": "^0.1.13",
     "tailwindcss": "3.3.3",