feat: switch avatar provider from Crafatar to VZGE (#1762)

Crafatar has become unreliable. VZGE (vzge.me) is a well-established
alternative that has been running since 2015 with support for optimized
formats (WebP/JXL), 3D renders, and proper caching.

- Replace all Crafatar URLs with VZGE equivalents (face/full endpoints)
- Add `unoptimized` to Next.js Image to bypass server-side fetching,
  since VZGE already serves optimized formats and requires non-generic
  User-Agent headers for server-side requests
- Add custom User-Agent header to the server-side OG card avatar fetch
- Adjust body render dimensions to match VZGE's 8:13 aspect ratio
- Remove unused `scale` prop from Avatar component
- Fix docker-compose.yml for MySQL 8.4 compatibility
  (default-authentication-plugin removed in 8.4)
- Fix seed script to encrypt server password before inserting

Author: confuser

components/Avatar.js

@@ -1,14 +1,14 @@
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 
-const Avatar = ({ height, width, scale = '6', uuid, className = '', type = 'avatar' }) => {
+const Avatar = ({ height, width, uuid, className = '', type = 'avatar' }) => {
   const [error, setError] = useState(null)
-  let url = 'https://crafatar.com/'
+  let url = 'https://vzge.me/'
 
   if (type === 'avatar') {
-    url += `avatars/${uuid}?size=${width}&overlay=true`
+    url += `face/${width}/${uuid}.png`
   } else if (type === 'body') {
-    url += `renders/body/${uuid}?scale=${scale}&overlay=true`
+    url += `full/${height}/${uuid}.png`
   }
 
   let fallbackSrc = (process.env.BASE_PATH || '') + '/images/'
@@ -22,6 +22,7 @@ const Avatar = ({ height, width, scale = '6', uuid, className = '', type = 'avat
 
   return (
     <Image
+      unoptimized
       width={width}
       height={height}
       onError={setError}

components/home/AccountPanel.js

@@ -20,7 +20,7 @@ const AccountPanel = () => {
         {user
           ? (
             <div className='flex flex-col items-center w-full gap-2'>
-              <Avatar type='body' height='148' width='66' uuid={user.id} />
+              <Avatar type='body' height='148' width='91' uuid={user.id} />
               <Link href='/dashboard' passHref>
                 <Button>My Dashboard</Button>
               </Link>

components/player/PlayerAvatar.js

@@ -6,7 +6,7 @@ import { usePalette } from '@universemc/react-palette'
 const fullConfig = resolveConfig(tailwindConfig)
 
 const PlayerAvatar = ({ id }) => {
-  const { data: colourData } = usePalette(!id ? null : `https://crafatar.com/renders/body/${id}?scale=10&overlay=true`)
+  const { data: colourData } = usePalette(!id ? null : `https://vzge.me/full/384/${id}.png`)
 
   const backgroundStyle = {
     backgroundImage: `linear-gradient(-45deg, ${colourData.vibrant || fullConfig.theme.colors.accent['700']}, ${colourData.darkVibrant || fullConfig.theme.colors.accent['900']}, ${fullConfig.theme.colors.primary['500']})`,
@@ -16,7 +16,7 @@ const PlayerAvatar = ({ id }) => {
 
   return (
     <div className='relative w-20 md:w-60 mx-auto flex justify-center'>
-      <Avatar className='z-10 relative drop-shadow-[1rem_1rem_1rem_rgba(0,0,0,0.9)]' scale='5' uuid={id} type='body' height='225' width='100' />
+      <Avatar className='z-10 relative drop-shadow-[1rem_1rem_1rem_rgba(0,0,0,0.9)]' uuid={id} type='body' height='225' width='138' />
       <div className='absolute hidden md:block top-0 left-0 h-full w-full translate-x-1/4'>
         <div className='block absolute top-0 left-0 bottom-0 right-0 z-10'>
           <div className='block rounded-3xl before:rounded-l-3xl absolute bottom-0 left-16 w-5/12 h-full -translate-x-1/2 -skew-x-10 before:contents before:absolute before:top-0 before:w-1/2 before:right-1/2 before:bottom-0 before:mix-blend-overlay before:bg-opacity-20 before:bg-white' style={backgroundStyle} />

docker-compose.yml

@@ -20,7 +20,7 @@ services:
     command:
       - --character-set-server=utf8mb4
       - --collation-server=utf8mb4_unicode_ci
-      - --default-authentication-plugin=mysql_native_password
+      - --mysql-native-password=ON
       - --sql-require-primary-key=ON
 
 volumes:

next.config.js

@@ -45,7 +45,7 @@ const nextConfig = (phase) => {
       remotePatterns: [
         {
           protocol: 'https',
-          hostname: 'crafatar.com',
+          hostname: 'vzge.me',
           pathname: '**'
         }
       ]

public/sw.js

@@ -5,7 +5,7 @@ self.addEventListener('push', function (event) {
     body: data.body,
     data: data.data,
     tag: `bm-web-notification-${data.data.notificationId}`,
-    icon: `https://crafatar.com/avatars/${data.data.actorId}?size=${256}&overlay=true`
+    icon: `https://vzge.me/face/256/${data.data.actorId}.png`
   }))
 })
 

scripts/seed.js

@@ -22,6 +22,7 @@ const {
 } = require('../server/test/fixtures')
 const createAppealComment = require('../server/test/fixtures/appeal-comment')
 const { hash } = require('../server/data/hash')
+const { encrypt } = require('../server/data/crypto')
 
 const DB_NAME = process.env.DB_NAME || 'bm_local_dev'
 const FORCE = process.argv.includes('--force')
@@ -166,6 +167,11 @@ async function seed () {
 
   // Create server
   const server = await createServer(playerConsole.id, DB_NAME)
+
+  if (server.password) {
+    server.password = await encrypt(process.env.ENCRYPTION_KEY, server.password)
+  }
+
   await dbPool('bm_web_servers').insert(server)
   console.log('  - Created server connection')
 

server/routes/opengraph/player.js

@@ -90,7 +90,7 @@ module.exports = async function (ctx) {
         gravity: 'northwest'
       },
       {
-        input: avatar,
+        input: await sharp(avatar).resize(256, 416).toBuffer(),
         top: 109,
         left: 60,
         gravity: 'northwest'
@@ -103,7 +103,13 @@ module.exports = async function (ctx) {
 
 const fetchAvatar = async function (id) {
   return new Promise((resolve, reject) => {
-    const req = https.get(`https://crafatar.com/renders/body/${id}?scale=10&overlay=true&w=256`, res => {
+    const options = {
+      headers: {
+        'User-Agent': 'BanManager-WebUI/1.0 (+https://banmanagement.com)'
+      }
+    }
+
+    const req = https.get(`https://vzge.me/full/416/${id}.png`, options, res => {
       if (res.statusCode < 200 || res.statusCode >= 300) {
         return reject(new Error(`Status Code: ${res.statusCode}`))
       }