p4nth3rblog VS Blitz

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.

Blitz is also an open-source project that allows users to access the code and allows to contribute. Their community has generated a lot of impact as well, and has grown rapidly over time since the creation in 2020:

Not yet, I actually just whipped it up quickly last week after I was browsing the Notion subreddit and it reminded me of myspace.

These are the tools I used:

* BlitzJS (https://github.com/blitz-js/blitz)

Maybe you could help/join this project? https://github.com/blitz-js/blitz

Hello, I'm the creator of Blitz.js (first announced 2.5 years ago)

Today the Blitz.js 2.0 pivot to a modular Next.js toolkit reached Beta status [1]

Previously Blitz abstracted Next.js, but Blitz 2.0 is now a modular toolkit that plugs into any new or existing Next.js app. Blitz picks up where Next.js leaves off, providing libraries and conventions for shipping and scaling small to large apps.

When I first created Blitz, my aim was to have an all-in-one fullstack framework for Javascript like Ruby on Rails. But that proved to be too difficult. I've decided that achieving an all-in-one framework for JS like Rails is too difficult unless you have a ton of funding and don't have to make meaningful money.

The difference with JS is that client-side frameworks like React have an incredible amount of complexity. Trying to manage all of that and all the other fullstack framework stuff like API layers, auth, file uploads, etc is too large of scope.

So now Blitz is no longer trying to do it all and is focusing on all the non-frontend functionality you need to ship web apps.

Going forward, we want to be the most trusted technical resource for rapidly building and scaling full-stack TypeScript apps.

[1] https://github.com/blitz-js/blitz/releases/tag/v2.0.0-beta.1