Back to project
Setting Up Automatic Project Screenshots
I’m starting to share my latest project with people and one thing that stands out to me is that the Projects List page is a bit plain. As a starting point, here is what the profile page looks like right now.
The first thing I notice is we could have images for the projects. We allow you to upload screenshots after you import your project, but people might be likely to miss that. What if we made it automagic?
I’ve done this sort of thing before. We can use Puppeteer (and a special fork of chromium) to capture a screenshot of a specified webpage by navigating to its URL and rendering it in a headless browser. I make a simple utility function to do this:
Then I use the utility function in my createProject server action to capture the screenshot and upload it to S3 at a url keyed to the username and project id.
// Generate and upload screenshot if homepage URL exists
if (repo.homepage) {
try {
const screenshotUrl = await generateAndUploadScreenshot({
url: repo.homepage,
key: `/screenshots/${username}/${slug}.png`,
})
// Update project with screenshot URL
const { error: updateError } = await supabase
.from("projects")
.update({ screenshot_url: screenshotUrl })
.eq("id", project.id)
if (updateError) {
console.error("Failed to update project with screenshot URL:", updateError)
}
} catch (screenshotError) {
console.error("Failed to generate and upload screenshot:", screenshotError)
}
}
As a bonus, I added a button to the EditProjectForm to allow people to easily generate a new screenshot for their project using this same function.
And with that, our projects page looks much nicer!
