refactor: include hash for discord cdn routing

This commit is contained in:
skinmaker1345 2024-12-30 01:56:29 +09:00
parent 351d9b9ec3
commit cf9e7ca770
18 changed files with 39 additions and 27 deletions

View File

@ -34,6 +34,7 @@ const BotCard: React.FC<BotCardProps> = ({ manage = false, bot }) => {
<DiscordAvatar
size={128}
userID={bot.id}
hash={bot.avatar}
alt='Avatar'
className='absolute -left-2 -top-8 mx-auto h-32 w-32 rounded-full bg-white'
/>

View File

@ -11,10 +11,12 @@ const DiscordAvatar: React.FC<DiscordAvatarProps> = (props) => {
src={KoreanbotsEndPoints.CDN.avatar(props.userID, {
format: 'webp',
size: props.size ?? 256,
hash: props.hash,
})}
fallbackSrc={KoreanbotsEndPoints.CDN.avatar(props.userID, {
format: 'png',
size: props.size ?? 256,
hash: props.hash,
})}
/>
)
@ -25,6 +27,7 @@ interface DiscordAvatarProps {
userID: string
className?: string
size?: 128 | 256 | 512
hash?: string
}
interface ImageEvent extends Event {

View File

@ -138,7 +138,7 @@ const Search: React.FC = () => {
data.data.bots.map((el) => (
<Link key={el.id} href={makeBotURL(el)} legacyBehavior>
<li className='h-15 flex cursor-pointer px-3 py-2'>
<DiscordAvatar className='mt-1 h-12 w-12' size={128} userID={el.id} />
<DiscordAvatar className='mt-1 h-12 w-12' size={128} userID={el.id} hash={el.avatar}/>
<div className='ml-2'>
<h1 className='text-lg text-black dark:text-gray-100'>{el.name}</h1>
<p className='text-sm text-gray-400'>{el.intro}</p>
@ -156,7 +156,7 @@ const Search: React.FC = () => {
data.data.servers.map((el) => (
<Link key={el.id} href={makeServerURL(el)} legacyBehavior>
<li className='h-15 flex cursor-pointer px-3 py-2'>
<ServerIcon className='mt-1 h-12 w-12' size={128} id={el.id} />
<ServerIcon className='mt-1 h-12 w-12' size={128} id={el.id} hash={el.icon} />
<div className='ml-2'>
<h1 className='text-lg text-black dark:text-gray-100'>{el.name}</h1>
<p className='text-sm text-gray-400'>{el.intro}</p>

View File

@ -43,7 +43,7 @@ const ServerCard: React.FC<BotCardProps> = ({ type, server }) => {
<ServerIcon
size={128}
id={server.id}
hash={type === 'add' && server.icon}
hash={server.icon}
alt='Icon'
className='absolute -left-2 -top-8 mx-auto h-32 w-32 rounded-full bg-white'
/>

View File

@ -1,6 +1,6 @@
import { SyntheticEvent } from 'react'
import dynamic from 'next/dynamic'
import { DiscordEnpoints, KoreanbotsEndPoints } from '@utils/Constants'
import { KoreanbotsEndPoints } from '@utils/Constants'
const Image = dynamic(() => import('@components/Image'))
@ -9,16 +9,8 @@ const ServerIcon: React.FC<ServerIconProps> = ({ id, size, className, alt, hash
<Image
className={className}
alt={alt}
src={
hash
? DiscordEnpoints.CDN.guild(id, hash, { format: 'webp', size: size ?? 256 })
: KoreanbotsEndPoints.CDN.icon(id, { format: 'webp', size: size ?? 256 })
}
fallbackSrc={
hash
? DiscordEnpoints.CDN.guild(id, hash, { format: 'png', size: size ?? 256 })
: KoreanbotsEndPoints.CDN.icon(id, { format: 'png', size: size ?? 256 })
}
src={KoreanbotsEndPoints.CDN.icon(id, { format: 'webp', size: size ?? 256, hash })}
fallbackSrc={KoreanbotsEndPoints.CDN.icon(id, { format: 'png', size: size ?? 256, hash })}
/>
)
}

View File

@ -25,6 +25,7 @@ import {
} from '@utils/Tools'
import { discordLog, getMainGuild, webhookClients } from '@utils/DiscordBot'
import { KoreanbotsEndPoints } from '@utils/Constants'
import { userInfo } from 'os'
const patchLimiter = rateLimit({
windowMs: 2 * 60 * 1000,
@ -127,7 +128,7 @@ const Bots = RequestHandler()
: `${userinfo.username}#${userinfo.tag}`,
iconURL:
KoreanbotsEndPoints.URL.root +
KoreanbotsEndPoints.CDN.avatar(userinfo.id, { format: 'png', size: 256 }),
KoreanbotsEndPoints.CDN.avatar(userinfo.id, { format: 'png', size: 256, hash: userinfo.avatar }),
url: KoreanbotsEndPoints.URL.user(userinfo.id),
})
.setTitle('대기 중')

View File

@ -95,7 +95,7 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
{({ errors, touched, values, setFieldTouched, setFieldValue }) => (
<Form>
<div className='text-center md:flex md:text-left'>
<DiscordAvatar userID={bot.id} className='mx-auto rounded-full md:mx-1' />
<DiscordAvatar userID={bot.id} className='mx-auto rounded-full md:mx-1' hash={bot.avatar}/>
<div className='px-8 py-6 md:w-2/3'>
<h1 className='text-3xl font-bold'>
{bot.name}#{bot.tag}
@ -344,6 +344,7 @@ const ManageBotPage: NextPage<ManageBotProps> = ({ bot, user, csrfToken, theme }
<DiscordAvatar
userID={el.id}
size={128}
hash={el.avatar}
className='mr-1 h-6 w-6 rounded-full'
/>{' '}
{el.tag === '0'

View File

@ -122,7 +122,7 @@ const Bots: NextPage<BotsProps> = ({ data, desc, date, user, theme, csrfToken })
</div>
<div className='w-full lg:flex'>
<div className='w-full text-center lg:w-2/12'>
<DiscordAvatar userID={data.id} size={256} className='w-full rounded-full' />
<DiscordAvatar userID={data.id} size={256} className='w-full rounded-full' hash={data.avatar}/>
</div>
<div className='w-full grow px-5 py-12 text-center lg:w-5/12 lg:text-left'>
<Tag

View File

@ -92,6 +92,7 @@ const VoteBot: NextPage<VoteBotProps> = ({ data, user, theme, csrfToken }) => {
<div className='text-center'>
<DiscordAvatar
userID={data.id}
hash={data.avatar}
className='mx-auto mb-4 h-52 w-52 rounded-full bg-white'
/>
<Tag

View File

@ -70,7 +70,7 @@ const BotApplication: NextPage<BotApplicationProps> = ({ user, spec, bot, theme,
</p>
<div className='pt-6 lg:flex'>
<div className='lg:w-1/5'>
<DiscordAvatar userID={bot.id} />
<DiscordAvatar userID={bot.id} hash={bot.avatar} />
</div>
<div className='relative lg:w-4/5'>
<div className='mt-4'>

View File

@ -77,7 +77,7 @@ const ServerApplication: NextPage<ServerApplicationProps> = ({
<>
<div className='pt-6 lg:flex'>
<div className='lg:w-1/5'>
<ServerIcon id={server.id} />
<ServerIcon id={server.id} hash={server.icon} />
</div>
<div className='relative lg:w-4/5'>
<div className='mt-4'>

View File

@ -64,7 +64,7 @@ const Security: NextPage<SecurityProps> = ({ bugReports }) => {
.filter((el) => el)
.map((u) => (
<div key={u.id} className='mr-2.5 flex items-center'>
<DiscordAvatar userID={u.id} size={128} className='mr-1 h-6 w-6 rounded-full' />
<DiscordAvatar userID={u.id} size={128} className='mr-1 h-6 w-6 rounded-full' hash={u.avatar} />
<span className='text-base font-semibold dark:text-gray-300'>
{u.globalName} {`(@${u.username})`}
</span>

View File

@ -87,7 +87,11 @@ const ManageServerPage: NextPage<ManageServerProps> = ({
{({ errors, touched, values, setFieldTouched, setFieldValue }) => (
<Form>
<div className='text-center md:flex md:text-left'>
<ServerIcon id={server.id} className='mx-auto rounded-full md:mx-1' />
<ServerIcon
id={server.id}
className='mx-auto rounded-full md:mx-1'
hash={server.icon}
/>
<div className='px-8 py-6 md:w-2/3'>
<h1 className='text-3xl font-bold'>{server.name}</h1>
<h2>ID: {server.id}</h2>

View File

@ -143,7 +143,7 @@ const Servers: NextPage<ServersProps> = ({ data, desc, date, user, theme }) => {
</div>
<div className='w-full lg:flex'>
<div className='w-full text-center lg:w-2/12'>
<ServerIcon id={data.id} size={256} className='w-full rounded-full' />
<ServerIcon id={data.id} size={256} className='w-full rounded-full' hash={data.icon} />
</div>
<div className='w-full grow px-5 py-12 text-center lg:w-5/12 lg:text-left'>
<h1 className='mb-2 mt-3 text-4xl font-bold' style={bg ? { color: 'white' } : {}}>

View File

@ -90,7 +90,7 @@ const VoteServer: NextPage<VoteServerProps> = ({ data, user, theme, csrfToken })
</Link>
<Segment className='mb-16 py-8'>
<div className='text-center'>
<ServerIcon id={data.id} className='mx-auto mb-4 h-52 w-52 rounded-full bg-white' />
<ServerIcon id={data.id} className='mx-auto mb-4 h-52 w-52 rounded-full bg-white' hash={data.icon} />
<Tag
text={
<span>

View File

@ -55,7 +55,7 @@ const Users: NextPage<UserProps> = ({ user, data }) => {
/>
<div className='lg:flex'>
<div className='mx-auto w-3/5 text-center lg:w-1/6'>
<DiscordAvatar size={512} userID={data.id} className='w-full rounded-full' />
<DiscordAvatar size={512} userID={data.id} className='w-full rounded-full' hash={data.avatar} />
</div>
<div className='w-full grow px-5 py-10 text-center lg:w-5/12 lg:text-left'>
<div>

View File

@ -350,6 +350,7 @@ export interface ImageOptions {
export interface KoreanbotsImageOptions {
format?: 'webp' | 'png' | 'gif'
size?: 128 | 256 | 512
hash?: string;
}
export enum DiscordImageType {

View File

@ -334,12 +334,20 @@ export const KoreanbotsEndPoints = {
}
},
CDN: class {
static root = '//cdn.koreanbots.dev'
static root = '/api/image'
static cdn = '//cdn.koreanbots.dev'
static avatar(id: string, options: KoreanbotsImageOptions) {
return makeImageURL(`${this.root}/avatars/${id}`, options)
if (options.hash) {
return makeImageURL(`${this.cdn}/avatars/${id}/${options.hash}`, options)
}
return makeImageURL(`${this.root}/discord/avatars/${id}`, options)
}
static icon(id: string, options: KoreanbotsImageOptions) {
return makeImageURL(`${this.root}/icons/${id}`, options)
if (options.hash) {
return makeImageURL(`${this.cdn}/icons/${id}/${options.hash}`, options)
}
return makeImageURL(`${this.root}/discord/icons/${id}`, options)
}
},
URL: class {