tl;dr - Would Gatsby benefit from the ability to easily swap the visual part of a Gatsby site?
What does a "theme" mean? Specifically, what does it mean in the context of Gatsby?
In the WordPress world a theme defines how your site should look. How will posts and pages be displayed. You can install multiple themes and switch between them at will. Your content stays the same, but each theme will display that content in a totally different way. Drupal and other CMS systems use this same definition for the term "theme".
Things are a bit different in the Gatsby world. Firstly, themes don't really exist, at least not yet. The Gatsby Manor project has been working on themes. These use the same definition as WordPress.
What does "composable" mean? In simple terms, it means that the config files can be combined. Each one can build upon the one before in a chain. A bit like the
_.merge()function from lodash / underscore.
Let's take a little moment to explore what a Gatsby site is actually made from. It includes a bunch of different pieces.
src/: A template for each page which includes:
When you start from a Gatsby starter, you copy all of these. A Gatsby starter is an entire Gatsby site which you copy completely as a starting point. Content, config, logic, visual appearance, and all.
How do you change the visual appearance of a Gatsby site? You can't simply use a new starter, it would wipe all your data. Instead you need to manually change all of your visual components. There's no way to simply switch from one visual appearance to another.
Each Gatsby template file defines a GraphQL query. That query says which fields are required for the page. That means your pages need to know exactly what data is available. If you change your backend from markdown to WordPress, the list of available fields will change. Now your site will be broken. Gatsby won't even boot until you fix it.
GraphQL is great, and it's part of what makes Gatsby so awesome (and so incredibly fast). However, when it comes to switching visual appearance, it creates some problems.
We could have a standard set of fields that must be available on a Gatsby site. For example, a standard set of fields that make up a "blog post". Then multiple visual components could request whatever data they need from this standardised schema.
Effectively this would split a Gatsby site into 2 parts. The config / node / GraphQL schema part, and the visual appearance part. Then the visual part could be quickly swapped with the same underlying data.
Let's start with the downsides. GraphQL is strongly typed. This proposal essentially says "let's provide a standard schema for data in Gatsby". That would mean additional fields could not be added. This would definitely limit the scope of data available to components.
Being able to easily swap the visual part of your Gatsby site would be the biggest advantage. Assuming that folks actually implement on top of the API of course.
There would be a few pieces to this "specification".
Some way to switch between "themes"
src/theme/is either a symlink (or overwritten on Windows)
Right now this is an idea. Next steps would be:
Feedback welcome. We'll probably push this as a Gatsby RFC once the idea has been refined a bit.
If you'd like to share this post, here are some handy links to make that easier.
Post last updated: October 30, 2018
Feedback? A point to make? Express yourself via the comment form below.
Don't forget to check the captcha. Otherwise we won't receive your comment.
Be the first to post a comment on this post