Website screenshots in Sanity Studio

1import { createClient } from '@sanity/client';
2
3const sanity = createClient({
4  projectId: process.env.SANITY_PROJECT_ID,
5  dataset: 'production',
6  token: process.env.SANITY_TOKEN,
7  apiVersion: '2024-01-01',
8  useCdn: false,
9});
10
11export async function POST(request) {
12  const { _id, websiteUrl } = await request.json();
13  if (!websiteUrl) return Response.json({ skipped: true });
14
15  // Capture screenshot
16  const response = await fetch(
17    'https://api.allscreenshots.com/v1/screenshot',
18    {
19      method: 'POST',
20      headers: {
21        'Authorization': `Bearer ${process.env.SCREENSHOT_API_KEY}`,
22        'Content-Type': 'application/json',
23      },
24      body: JSON.stringify({ url: websiteUrl, fullPage: false }),
25    }
26  );
27  const { screenshotUrl } = await response.json();
28
29  // Download and upload to Sanity
30  const imageResponse = await fetch(screenshotUrl);
31  const imageBuffer = await imageResponse.arrayBuffer();
32
33  const asset = await sanity.assets.upload(
34    'image',
35    Buffer.from(imageBuffer),
36    { filename: `screenshot-${_id}.png` }
37  );
38
39  // Update the document
40  await sanity.patch(_id)
41    .set({ screenshot: { _type: 'image', asset: { _ref: asset._id } } })
42    .commit();
43
44  return Response.json({ assetId: asset._id });
45}