stefanjudis / goofy-postcard

Generate virtual postcards using Contentful and Netlify.

The Goofy Postcard

The Goofy Postcard shows how to use the Contentful GraphQL API and Netlify On-demand builders.

This code of this repository was created in the webinar "Stop playing cache-up: How to render content on the fly for faster builds with Jamstack"

Site & project structure

The built site provides two routes:

1. / to display a formular that allows you to pick a character and define a message
2. /postcard/:id/message/:msg to render and cache a virtual postcard on demand

/ - a static HTML file with a sprinkle of JavaScript

The index route is a static HTML file that fetches Contentful data client side to show postcard options. It leverages good old fetch to make the HTTP request.

/postcard/:id/message/:msg - a redirected serverless function

The function endpoint leverages Netlify redirects to map URL query parameters to URL paths.

/generated/postcard type=:type message=:message /postcard/:type/message/:message 301!
/postcard/:type/message/:message /.netlify/builders/postcard 200

To make HTTP requests the function uses cross-fetch and accesses the needed Contentful credentials via environment variables defined at Netlify.

The virtual postcards are rendered and cached using the @netlify/functions package, which is part of On-demand Builders.