Hỏi & Đáp
@@ -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;
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 1d654a4..aadef9e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -723,7 +723,7 @@ useHead({
class="h-12 w-8 shrink-0 rounded object-cover ring-1 ring-white/10">
@@ -767,7 +767,7 @@ useHead({
class="h-12 w-8 shrink-0 rounded object-cover ring-1 ring-white/10">
@@ -807,7 +807,8 @@ useHead({
: 'text-red-400'" class="size-3.5 shrink-0" />
-
+
{{ genre.name }}
diff --git a/server/api/image-proxy.get.ts b/server/api/image-proxy.get.ts
index 4a72295..20e7a8c 100644
--- a/server/api/image-proxy.get.ts
+++ b/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
{
- try {
- const cached = await redis.getBuffer(key)
- return cached || null
- } catch {
- return null
- }
-}
-
-async function setCachedWebP(redis: any, key: string, data: Buffer): Promise {
- 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 quality = getQuery(event).q ? parseInt(getQuery(event).q as string) : DEFAULT_QUALITY
+ const width = getQuery(event).w ? parseInt(getQuery(event).w as string) : undefined
+ 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
- const cached = await getCachedWebP(redis, cacheKey)
- if (cached) {
- setResponseHeader(event, 'cache-control', 'public, max-age=604800, immutable')
- setResponseHeader(event, 'content-type', 'image/webp')
- setResponseHeader(event, 'x-cache', 'HIT')
- setResponseHeader(event, 'access-control-allow-origin', '*')
- return cached
+ // Check Redis cache
+ try {
+ const cached = await redis.getBuffer(cacheKey)
+ if (cached) {
+ setResponseHeader(event, 'cache-control', `public, max-age=${BROWSER_TTL}, stale-while-revalidate=86400, immutable`)
+ setResponseHeader(event, 'content-type', 'image/webp')
+ setResponseHeader(event, 'x-cache', 'HIT')
+ 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')
+ setResponseHeader(event, 'x-cache', 'MISS (fallback)')
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