feat: cập nhật lại cache image

.env.example

@@ -1,3 +1,4 @@
-SUPABASE_URL=
+DATABASE_URL=
-SUPABASE_KEY=
+REDIS_URL=
-GIPHY_API_KEY=
+GIPHY_API_KEY=
+IMAGE_CACHE_TTL=604800

app/components/CommentReplies.vue

@@ -30,7 +30,7 @@ function handleVote(replyId: number, vote: number) {
 
 function formatMentions(content: string) {
   let html = content.replace(/@(\S+)/g, '<span class="text-cinek-400 font-medium">@$1</span>')
-  html = html.replace(/!\[GIF\]\((https?:\/\/[^\s)]+)\)/g, '<img src="$1" alt="GIF" class="max-w-[150px] rounded-lg mt-1" loading="lazy" />')
+  html = html.replace(/!\[GIF\]\((https?:\/\/[^\s)]+)\)/g, '<img src="/api/image-proxy?url=$1" alt="GIF" class="max-w-[150px] rounded-lg mt-1" loading="lazy" />')
   return html
 }
 </script>

app/pages/hoi-dap.vue

@@ -47,7 +47,7 @@ function toggle(category: string, index: number) {
   <main class="min-h-screen bg-[#0f111a] text-white">
     <AppHeader />
 
-    <section class="mx-auto max-w-[800px] px-4 pt-24 pb-16 sm:px-6 lg:px-8 xl:px-10">
+    <section class="mx-auto max-w-200 px-4 pt-24 pb-16 sm:px-6 lg:px-8 xl:px-10">
       <div class="mb-8">
         <h1 class="text-3xl font-black text-white sm:text-4xl">Hỏi & Đáp</h1>
         <p class="mt-2 text-slate-400">
@@ -86,6 +86,7 @@ function toggle(category: string, index: number) {
 .faq-leave-active {
   transition: opacity 0.2s ease, max-height 0.2s ease;
 }
+
 .faq-enter-from,
 .faq-leave-to {
   opacity: 0;

app/pages/index.vue

@@ -723,7 +723,7 @@ useHead({
                   class="h-12 w-8 shrink-0 rounded object-cover ring-1 ring-white/10">
 
                 <div class="min-w-0 flex-1">
-                  <p class="truncate text-[13px] font-bold text-white group-hover:text-yellow-300">
+                  <p class="truncate text-[13px] text-white group-hover:text-yellow-300">
                     {{ movie.name }}
                   </p>
                 </div>
@@ -767,7 +767,7 @@ useHead({
                   class="h-12 w-8 shrink-0 rounded object-cover ring-1 ring-white/10">
 
                 <div class="min-w-0 flex-1">
-                  <p class="truncate text-[13px] font-bold text-white group-hover:text-yellow-300">
+                  <p class="truncate text-[13px] text-white group-hover:text-yellow-300">
                     {{ movie.name }}
                   </p>
                 </div>
@@ -807,7 +807,8 @@ useHead({
                         : 'text-red-400'" class="size-3.5 shrink-0" />
 
                 <div class="flex h-12 items-center">
-                  <span class="rounded-xl px-4 py-2 text-[10px] font-black text-white" :class="genreTagColor(index)">
+                  <span class="text-[12px] font-semibold px-4 py-1.5 rounded-full bg-amber-500/90 text-white shadow-sm"
+                    :class="genreTagColor(index)">
                     {{ genre.name }}
                   </span>
                 </div>

server/api/image-proxy.get.ts

@@ -1,27 +1,9 @@
 import { createHash } from 'crypto'
 import { useRedis } from '../utils/redis'
 
-const CACHE_TTL = 604800 // 7 ngày
+const CACHE_TTL = 604800 // 7 ngày (Redis)
+const BROWSER_TTL = 31536000 // 1 năm (browser immutable cache)
 const CACHE_PREFIX = 'img:'
-const DEFAULT_WIDTH = null
-const DEFAULT_QUALITY = 85
-
-async function getCachedWebP(redis: any, key: string): Promise<Buffer | null> {
-  try {
-    const cached = await redis.getBuffer(key)
-    return cached || null
-  } catch {
-    return null
-  }
-}
-
-async function setCachedWebP(redis: any, key: string, data: Buffer): Promise<void> {
-  try {
-    await redis.set(key, data, 'EX', CACHE_TTL)
-  } catch {
-    // Ignore cache write errors
-  }
-}
 
 export default defineEventHandler(async (event) => {
   const url = getQuery(event).url as string
@@ -34,23 +16,27 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 400, message: 'Invalid URL protocol' })
   }
 
-  const width = getQuery(event).w ? parseInt(getQuery(event).w as string) : DEFAULT_WIDTH
+  const width = getQuery(event).w ? parseInt(getQuery(event).w as string) : undefined
-  const quality = getQuery(event).q ? parseInt(getQuery(event).q as string) : DEFAULT_QUALITY
+  const quality = getQuery(event).q ? parseInt(getQuery(event).q as string) : 85
+  
   const cacheKey = CACHE_PREFIX + createHash('md5').update(`${url}|${width}|${quality}`).digest('hex')
-
   const redis = useRedis()
 
-  // Check cache
+  // Check Redis cache
-  const cached = await getCachedWebP(redis, cacheKey)
+  try {
-  if (cached) {
+    const cached = await redis.getBuffer(cacheKey)
-    setResponseHeader(event, 'cache-control', 'public, max-age=604800, immutable')
+    if (cached) {
-    setResponseHeader(event, 'content-type', 'image/webp')
+      setResponseHeader(event, 'cache-control', `public, max-age=${BROWSER_TTL}, stale-while-revalidate=86400, immutable`)
-    setResponseHeader(event, 'x-cache', 'HIT')
+      setResponseHeader(event, 'content-type', 'image/webp')
-    setResponseHeader(event, 'access-control-allow-origin', '*')
+      setResponseHeader(event, 'x-cache', 'HIT')
-    return cached
+      setResponseHeader(event, 'access-control-allow-origin', '*')
+      return cached
+    }
+  } catch {
+    // Redis might be down, continue to fetch
   }
 
-  // Fetch original image
+  // Fetch from upstream
   let response: Response
   try {
     response = await fetch(url, {
@@ -59,6 +45,7 @@ export default defineEventHandler(async (event) => {
         'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8',
         'Referer': new URL(url).origin,
         'Origin': new URL(url).origin,
+        'Cache-Control': 'no-cache',
       },
       signal: AbortSignal.timeout(15000),
     })
@@ -72,40 +59,44 @@ export default defineEventHandler(async (event) => {
 
   const contentType = response.headers.get('content-type') || ''
   
-  // Skip non-image content types
   if (!contentType.startsWith('image/')) {
     throw createError({ statusCode: 400, message: 'Not an image' })
   }
 
   const buffer = Buffer.from(await response.arrayBuffer())
   
-  // Convert to WebP with optional resizing (dynamic import to avoid ESM resolution in dev)
+  // Convert to WebP
   let webpBuffer: Buffer
+  let converted = true
   try {
     const { default: sharp } = await import('sharp')
-    let transform = sharp(buffer)      .webp({ quality, effort: 4 })
+    let transform = sharp(buffer).webp({ quality, effort: 4 })
     
     if (width) {
       transform = transform.resize(width, null, { withoutEnlargement: true })
     }
     
     webpBuffer = await transform.toBuffer()
-  } catch (error: any) {
+  } catch {
     // If conversion fails, return original
+    setResponseHeader(event, 'cache-control', `public, max-age=3600, stale-while-revalidate=300`)
     setResponseHeader(event, 'content-type', contentType)
-    setResponseHeader(event, 'cache-control', 'public, max-age=3600')
+    setResponseHeader(event, 'x-cache', 'MISS (fallback)')
-    setResponseHeader(event, 'x-cache', 'MISS')
     setResponseHeader(event, 'access-control-allow-origin', '*')
     return buffer
   }
 
   // Cache in Redis
-  await setCachedWebP(redis, cacheKey, webpBuffer)
+  try {
+    await redis.set(cacheKey, webpBuffer, 'EX', CACHE_TTL)
+  } catch {
+    // Ignore cache write errors
+  }
 
-  setResponseHeader(event, 'cache-control', 'public, max-age=604800, immutable')
+  setResponseHeader(event, 'cache-control', `public, max-age=${BROWSER_TTL}, stale-while-revalidate=86400, immutable`)
   setResponseHeader(event, 'content-type', 'image/webp')
   setResponseHeader(event, 'content-length', webpBuffer.length.toString())
-  setResponseHeader(event, 'x-cache', 'MISS')
+  setResponseHeader(event, 'x-cache', converted ? 'MISS (converted)' : 'MISS')
   setResponseHeader(event, 'access-control-allow-origin', '*')
   
   return webpBuffer