puppeteer-demo VS p4nth3rblog

Harness the magic of Puppeteer in three ways: on the command line, as a serverless function in the background, or in a front-end application. Explore and fork this puppeteer-demo repository to see Puppeteer in action — and have fun creating dynamic Open Graph images for your websites or finding new ways to use Puppeteer!

If you’d like to see the final code example as a React component in the code for my personal blog site, check it out on GitHub, and if you have any questions about responsive images and how you can make the best of the Contentful Images API, find me on Twitter!

// https://github.com/whitep4nth3r/p4nth3rblog/blob/main/contentful/Events.js import ContentfulApi from "@contentful/Api"; const defaultOptions = { future: true, }; /* * Get all events -- future by default */ static async getEvents(options = defaultOptions) { // Calculate date_ASC for future events, or date_DESC for past events const order = options.future ? "date_ASC" : "date_DESC"; // Generate today's date const date = new Date(); // And format it to an ISO String const formattedDate = date.toISOString(); // Decide on the date filter to pass in as a string const dateFilter = options.future ? "date_gt" : "date_lt"; // Construct variables object to send with the HTTP POST request const variables = { date: formattedDate, order }; // Build the query const query = `query GetEvents($date: DateTime!, $order: [EventOrder]!) { eventCollection(where: {${dateFilter}: $date}, order: $order) { items { sys { id } date name link description timeTbc isVirtual image { url description height width } } } }`; // Call out to the base API call const response = await this.callContentful(query, variables); const eventCollection = response.data.eventCollection.items ? response.data.eventCollection.items : []; return eventCollection; }

Fetch your data however you need to. View the full build-search.js file on GitHub to check out how I used the Contentful GraphQL API and node-fetch to grab my data for processing.

If you’d like to see the complete query for my topics pages, take a look at this file in the code for my personal blog site. The statically generated page is available to view here.

The URL parameters in the request hold the key to the magic being performed here. Here’s a look at the code that generates my dynamic Open Graph images in the head of my web pages, which you can find in full here.