Move social share avatar to public folder

Author: webstackdev

public/assets/images/kevin-brown.webp

@@ -1,11 +1,17 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { GET } from '@pages/api/social-card'
-
-vi.mock('@assets/images/avatars/kevin-brown.webp', () => ({
-  default: {
-    src: '/_astro/kevin-brown.test.webp',
-    fsPath: '/virtual/assets/kevin-brown.webp',
-  },
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+const accessMock = vi.hoisted(() => vi.fn())
+const mkdirMock = vi.hoisted(() => vi.fn())
+const writeFileMock = vi.hoisted(() => vi.fn())
+const fetchMock = vi.hoisted(() => vi.fn())
+
+vi.mock('node:fs/promises', () => ({
+  access: accessMock,
+  mkdir: mkdirMock,
+  writeFile: writeFileMock,
 }))
 
 type CollectionFixture = Array<{
@@ -73,9 +79,23 @@ const seedCollections = () => {
 }
 
 describe('Social Card API - GET /api/social-card', () => {
+  const expectedAvatarPath = join(tmpdir(), 'webstackbuilders-social-cards', 'kevin-brown.webp')
+
   beforeEach(() => {
     generateOpenGraphImageMock.mockReset()
     generateOpenGraphImageMock.mockResolvedValue(Buffer.from('mock-image'))
+    accessMock.mockReset()
+    mkdirMock.mockReset()
+    writeFileMock.mockReset()
+    fetchMock.mockReset()
+    accessMock.mockRejectedValue(Object.assign(new Error('missing'), { code: 'ENOENT' }))
+    mkdirMock.mockResolvedValue(undefined)
+    writeFileMock.mockResolvedValue(undefined)
+    fetchMock.mockResolvedValue({
+      ok: true,
+      arrayBuffer: vi.fn(async () => Uint8Array.from([1, 2, 3]).buffer),
+    })
+    vi.stubGlobal('fetch', fetchMock)
     seedCollections()
   })
 
@@ -133,10 +153,22 @@ describe('Social Card API - GET /api/social-card', () => {
     expect(generateOpenGraphImageMock).toHaveBeenCalledWith(
       expect.objectContaining({
         logo: expect.objectContaining({
-          path: '/virtual/assets/kevin-brown.webp',
+          path: expectedAvatarPath,
         }),
       })
     )
+
+    expect(fetchMock).toHaveBeenCalledWith(new URL('/assets/images/kevin-brown.webp', 'http://localhost/api/social-card?slug=home'))
+    expect(writeFileMock).toHaveBeenCalledWith(expectedAvatarPath, expect.any(Buffer))
+  })
+
+  it('reuses the cached avatar file when it already exists locally', async () => {
+    accessMock.mockResolvedValueOnce(undefined)
+
+    await buildRequest('http://localhost/api/social-card?slug=home')
+
+    expect(fetchMock).not.toHaveBeenCalled()
+    expect(writeFileMock).not.toHaveBeenCalled()
   })
 
   it('returns an error response when generation fails', async () => {

src/pages/api/social-card/__tests__/index.spec.ts

@@ -1,21 +1,22 @@
 import type { APIRoute } from 'astro'
 import { getCollection } from 'astro:content'
 import { generateOpenGraphImage } from 'astro-og-canvas'
-import kevinBrownAvatar from '@assets/images/avatars/kevin-brown.webp'
+import { access, mkdir, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
 import { buildApiErrorResponse, handleApiFunctionError } from '@pages/api/_utils/errors'
 import { createApiFunctionContext } from '@pages/api/_utils/requestContext'
 
 export const prerender = false
 
 const ROUTE = '/api/social-card'
+const PUBLIC_AVATAR_PATH = '/assets/images/kevin-brown.webp'
+const CACHED_AVATAR_DIRECTORY = join(tmpdir(), 'webstackbuilders-social-cards')
+const CACHED_AVATAR_PATH = join(CACHED_AVATAR_DIRECTORY, 'kevin-brown.webp')
 const DEFAULT_TITLE = 'Platform Engineering by Kevin Brown'
 const DEFAULT_DESCRIPTION =
   'Platform engineer helping teams harden delivery, modernize cloud platforms, and improve developer experience.'
 
-type ImageMetadataWithFsPath = typeof kevinBrownAvatar & {
-  fsPath?: string
-}
-
 type CollectionKey = 'articles' | 'caseStudies' | 'services' | 'downloads'
 type PaletteKey = 'articles' | 'case-studies' | 'services' | 'downloads' | 'default'
 
@@ -60,14 +61,27 @@ const gradientPalette: Record<PaletteKey, [number, number, number][]> = {
   ],
 }
 
-const getAvatarFilePath = (): string => {
-  const avatarFilePath = (kevinBrownAvatar as ImageMetadataWithFsPath).fsPath
+const getAvatarFilePath = async (requestUrl: string): Promise<string> => {
+  try {
+    await access(CACHED_AVATAR_PATH)
+    return CACHED_AVATAR_PATH
+  } catch {
+    // Cache miss; fetch from the public asset URL and persist locally for astro-og-canvas.
+  }
 
-  if (!avatarFilePath) {
-    throw new Error('Kevin Brown avatar asset is missing a local file path')
+  const avatarUrl = new URL(PUBLIC_AVATAR_PATH, requestUrl)
+  const response = await fetch(avatarUrl)
+
+  if (!response.ok) {
+    throw new Error(`Unable to fetch Kevin Brown avatar from ${avatarUrl.toString()}`)
   }
 
-  return avatarFilePath
+  const avatarBuffer = Buffer.from(await response.arrayBuffer())
+
+  await mkdir(CACHED_AVATAR_DIRECTORY, { recursive: true })
+  await writeFile(CACHED_AVATAR_PATH, avatarBuffer)
+
+  return CACHED_AVATAR_PATH
 }
 
 /** Normalize slug parameters to a consistent format */
@@ -133,7 +147,7 @@ export const GET: APIRoute = async ({ request, clientAddress, cookies }) => {
     const slug = normalizeSlug(url.searchParams.get('slug'))
     const titleOverride = url.searchParams.get('title')
     const descriptionOverride = url.searchParams.get('description')
-    const avatarPath = getAvatarFilePath()
+    const avatarPath = await getAvatarFilePath(request.url)
 
     const contentIndex = await buildContentIndex()
     const matchedEntry = contentIndex[slug]