gatsby-transformer-screenshot
Plugin for creating screenshots of website URLs using an AWS Lambda
Function. This plugin looks for SitesYaml
nodes with a url
property, and creates Screenshot
child nodes with a screenshotFile
field.
Data should be in a YAML file named sites.yml
and look like:
- url: https://reactjs.org/
name: React
- url: https://about.sourcegraph.com/
name: Sourcegraph
- url: https://simply.co.za/
name: Simply
Install
npm install gatsby-transformer-screenshot
How to use
module.exports = {
plugins: [
{
resolve: `gatsby-transformer-screenshot`,
options: {
// See "Lambda setup" below to see how to create an endpoint
screenshotEndpoint: `your-aws-endpoint`,
}
}
],
}
By default, the plugin will target nodes sourced from a YAML file named sites.yml
.
To source additional node types, supply an array of the types to a nodeTypes
option on the plugin.
module.exports = {
plugins: [
{
resolve: `gatsby-transformer-screenshot`,
options: {
nodeTypes: [`StartersYaml`, `WhateverType`],
},
},
],
}
How to query
You can query for screenshot files as shown below:
{
allSitesYaml {
edges {
node {
url
childScreenshot {
screenshotFile {
id
}
}
}
}
}
}
screenshotFile is a PNG file like any other loaded from your filesystem, so you can use this plugin in combination with gatsby-plugin-image
.
Lambda setup
You need to run a screenshot service on AWS Lamdba yourself.
AWS Lambda is a "serverless" computing platform that lets you run code in response to events, without needing to set up a server. This plugin uses a Lambda function to take screenshots and store them in an AWS S3 bucket.
First, you will need to create a S3 bucket for storing screenshots. Once you have done that, create a Lifecycle Policy for the bucket that sets a number of days before files in the bucket expire. Screenshots will be cached until this date.
To build the Lambda package, run npm run build-lambda-package
in this directory. A file called lambda-package.zip
will be generated - upload this as the source of your AWS Lambda. Finally, you will need to set S3_BUCKET
as an environment variable for the lambda inside AWS.
To set up the HTTP interface, you will need to use AWS API Gateway. Create a new API, create a new resource under /
, select "Configure as proxy resource", and leave all the settings with their defaults. Create a method on the new resource, selecting "Lambda Function Proxy" as the integration type, and fill in the details of your lambda.
Placeholder image
If your site pulls a lot of screenshots it might be beneficial to use placeholder image instead of downloading and processing all the screenshots. It will help with data sourcing and query running times.
You can use placeholder image by setting GATSBY_SCREENSHOT_PLACEHOLDER
environment variable when running npm run develop
:
GATSBY_SCREENSHOT_PLACEHOLDER=true gatsby develop
or by using dotenv
in your gatsby-config.js
and adding GATSBY_SCREENSHOT_PLACEHOLDER
to .env.development
file in root of your project:
GATSBY_SCREENSHOT_PLACEHOLDER=true