perf: use team avatars from local (#793)

components/help/HelpPreview.vue

@@ -32,7 +32,7 @@ const emit = defineEmits<{
     <p flex="~ gap-2 wrap" mxa>
       <template v-for="team of teams" :key="team.github">
         <a :href="`https://github.com/sponsors/${team.github}`" target="_blank" rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
-          <img :src="`https://github.com/${team.github}.png?size=60`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
+          <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
         </a>
       </template>
     </p>

package.json

@@ -21,6 +21,7 @@
     "test:unit": "vitest",
     "test:typecheck": "vue-tsc --noEmit && vue-tsc --noEmit --project service-worker/tsconfig.json",
     "test": "nr test:unit",
+    "update:team:avatars": "esno scripts/avatars.ts",
     "postinstall": "nuxi prepare && simple-git-hooks",
     "release": "bumpp && esno scripts/release.ts"
   },

pages/settings/about/index.vue

@@ -91,7 +91,7 @@ const handleShowCommit = () => {
         external target="_blank"
       >
         <template #icon>
-          <img :src="`https://github.com/${team.github}.png?size=100`" :alt="team.display" rounded-full w-8 h-8 height="32" width="32">
+          <img :src="`/avatars/${team.github}-60x60.png`" :alt="team.display" rounded-full w-8 h-8 height="32" width="32">
         </template>
       </SettingsItem>
     </template>

scripts/avatars.ts

@@ -0,0 +1,31 @@
+import { join, resolve } from 'pathe'
+import fs from 'fs-extra'
+import { $fetch } from 'ohmyfetch'
+import { teams } from '../composables/about'
+
+const avatarsDir = resolve('./public/avatars/')
+
+const sizes = [60, 100]
+
+async function download(url: string, fileName: string) {
+  if (fs.existsSync(fileName))
+    return
+
+  console.log('downloading', fileName)
+  try {
+    const image = await $fetch(url, { responseType: 'arrayBuffer' })
+    await fs.writeFile(fileName, Buffer.from(image))
+  }
+  catch {}
+}
+
+async function fetchAvatars() {
+  await fs.ensureDir(avatarsDir)
+
+  await Promise.all(teams.reduce((acc, { github }) => {
+    acc.push(...sizes.map(s => download(`https://github.com/${github}.png?size=${s}`, join(avatarsDir, `${github}-${s}x${s}.png`))))
+    return acc
+  }, [] as Promise<void>[]))
+}
+
+fetchAvatars()