From 7c6c0c155d9aeb80fcdcee3e56dfafcd2a37847a Mon Sep 17 00:00:00 2001
From: Andres <andres99.dev@gmail.com>
Date: Fri, 11 Apr 2025 17:34:09 +0200
Subject: [PATCH] add image optimization

---
 src/app/docs/[[...slug]]/page.tsx  | 21 ++++++++++++++++++++-
 src/components/optimized-image.tsx | 14 ++++++++++++++
 src/shared/constants.ts            |  2 ++
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/components/optimized-image.tsx

diff --git a/src/app/docs/[[...slug]]/page.tsx b/src/app/docs/[[...slug]]/page.tsx
index 78f6cdf..4e6a60d 100644
--- a/src/app/docs/[[...slug]]/page.tsx
+++ b/src/app/docs/[[...slug]]/page.tsx
@@ -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)} />,
diff --git a/src/components/optimized-image.tsx b/src/components/optimized-image.tsx
new file mode 100644
index 0000000..4911a63
--- /dev/null
+++ b/src/components/optimized-image.tsx
@@ -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} />
+}
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
index 571f192..38626f0 100644
--- a/src/shared/constants.ts
+++ b/src/shared/constants.ts
@@ -1,2 +1,4 @@
 export const RANKED_CHANNEL = '1352157545547960350'
 export const VANILLA_CHANNEL = '1341599300022567014'
+
+export const CDN_URL = 'https://balatromp.b-cdn.net'