add image optimization

This commit is contained in:
2025-04-11 17:34:09 +02:00
parent 2ccc56c1de
commit 7c6c0c155d
3 changed files with 36 additions and 1 deletions

View File

@@ -7,6 +7,7 @@ import { Mult } from '@/app/_components/mult'
import { Spectral } from '@/app/_components/spectral'
import { Xmult } from '@/app/_components/xmult'
import { Button } from '@/components/ui/button'
import { CDN_URL } from '@/shared/constants'
import { ImageZoom } from 'fumadocs-ui/components/image-zoom'
import defaultMdxComponents from 'fumadocs-ui/mdx'
import {
@@ -42,7 +43,25 @@ export default async function Page(props: {
<MDX
components={{
...defaultMdxComponents,
img: (props) => <ImageZoom {...(props as any)} />,
img: (props) => {
const isDev =
process.env.NODE_ENV === 'development' ||
process.env.IS_PREVIEW === 'true'
if (isDev) {
return <ImageZoom {...props} />
}
return (
<ImageZoom
{...(props as any)}
src={
props.src.startsWith('/')
? `${CDN_URL}${props.src}`
: props.src
}
/>
)
},
Button: (props) => <Button {...(props as any)} />,
JokerCard: (props) => <JokerCard {...(props as any)} />,
Chips: (props) => <Chips {...(props as any)} />,

View File

@@ -0,0 +1,14 @@
'use client'
import { CDN_URL } from '@/shared/constants'
import type { ComponentPropsWithoutRef } from 'react'
export function OptimizedImage(props: ComponentPropsWithoutRef<'img'>) {
const isDev = process.env.NODE_ENV === 'development'
if (isDev) {
return <img {...props} />
}
return <img {...props} src={`${CDN_URL}${props.src}`} alt={props.alt} />
}

View File

@@ -1,2 +1,4 @@
export const RANKED_CHANNEL = '1352157545547960350'
export const VANILLA_CHANNEL = '1341599300022567014'
export const CDN_URL = 'https://balatromp.b-cdn.net'