Gatsby, the open source app and website framework based on React, celebrated the stable release of Gatsby themes by launching a Theme Jam contest. Participants were invited to create their own Gatsby Themes and submit them for an opportunity to win swag or the grand prize: an all-expenses-paid trip to the Gatsby Days event of their choosing. Submissions closed yesterday and winners will be announced on August 7, 2019.
Gatsby themes include a site or app’s configuration as an installable package, which can then be versioned and managed as a dependency and easily updated. They were designed to make Gatsby-based projects more extensible, allowing developers to reuse site configurations, plugins, styles, and components across multiple sites.
Looking through the contest’s showcase of submissions, I found two that were created for sites that are using WordPress. Both rely on the WPGraphQL plugin to source WordPress content.
Alexandra Spalato created a theme called Gatsby Theme WordPress Starter that allows developers to build a standard blog. It has styles for all the standard features, such as featured images, lists, categories, and pagination support. Setup instructions are on GitHub and a demo site shows the theme in action.
Spalato plans to create some video tutorials to demonstrate how to customize the theme. She also recommends using it with the Deploy Netlify Webhook plugin to automatically rebuild the site after publishing new posts.
Andrey Shalashov created a theme called WordPress source theme for Gastby that he intends to be “a one-stop solution for a WordPress blog owner who wants to switch to Gatsby powered frontend.” For most simple sites, the only thing developers have to configure is the source url and the menu location slug.
The theme supports using a WordPress menu from a defined location but only displays first level items. It also supports post categories. It automatically downloads images embedded in posts, pages, and custom post types and converts their tags to the Gatsby img component. Links embedded in posts that lead to other pages are converted to the Link component. Check out a demo to see it in action.
So far, the Theme Jam contest seems to have been a successful strategy for Gatsby to quickly expand developer’s knowledge of creating Gatsby themes, as well as multiple their availability in the ecosystem. The showcase displays 112 themes that have been submitted for the contest.
Submissions are being judged on code quality, accessibility, performance, the availability of a live demo, documentation, and other criteria. They are also judged on having accurate metadata for showing up in searches, with certain keywords in the package.json file that enable the theme to show up in both the Gatsby showcase and npm searches.
React = nope. Every time.