Gatsby themes as atomic infrastructure pieces for super agility in creating Gatsby sites
MIT License
This project is about exploring the new feature from Gatsby called Themes
. A detailed POV is also available here.
The idea is the explore the possibility to break down the gatsby site creating into the smallest maintainable atomic component or components so that there is a clear separation of concerns from the project configuration to the actual application being built.
This project demonstrates the following
Core Infrastructure
- Core Gatsby Infrastructure pieces like SEO, Image Optimization, AnalyticsComponent Libraries
which are part of the Gatsby infrastructure - Material-UI and Emotion Component LibrariesTemplate Libraries
these are component libraries which also include page templates for a specific use case - Material-UI and Emotion Component LibrariesPre-configured libraries
, plugins and setup components - Material-UI, Emotion JS , DrupalExtendability and Atomic themes
which can build on top of other themes either by composition or extension of other themes.Shadowing Components
- while we extend themes , but still have the ability to override or customize components that are derived from themesSeparation of concerns using shadowing
- exciting and un-documented feature of being able to separate GraphQL queries from the implementation using component shadowing.The demo sites built using this monorepo are available
core
& mui
is available here. The source for the same is the site App
GATSBY RECIPEZE
is a Drupal site which depicts all the above mentioned uses cases is available here
Yarn workspaces used so that we are able to maintain the Gatsby infrastructure pieces as atomic themes all in one place. This also gives us the ability to see the changes like using the application workspaces without having to go through the entire process of publishing the npm module and then testing whether it works.
Themes:
@gatsby-themes/core
Core Infrastructure
@gatsby-themes/mui
Component Libraries
,Pre-configured libraries
@gatsby-themes/emotion
Component Libraries
,Pre-configured libraries
theme-ui
as the theming style systemAbout
@gatsby-themes/tailwind
Pre-configured libraries
,@gatsby-themes/emotion-recipe-theme
Component Libraries
,Pre-configured libraries
,Extendability and Atomic themes
,Template Libraries
@gatsby-themes/emotion
theme and provides a UI component library and templates for building recipe pages.Name: @gatsby-themes/drupal
Usecase(s): Pre-configured libraries
,Separation of concerns using shadowing
The drupal theme sets up the configuration for drupal
This is also based on the Gatsby DEMO Drupal CMS site for recipes
It takes care of not only the drupal gatsby plugin configuration but also sets up all the queries that are needed for the building the recipe app.
Currently there are two template page queries available
As part of this we also have proptype definitions that can be imported into the template that wants to use the query. In the above mentioned GraphQL queries the prop type definition files
You can then use the proptypes directly in the template implementation by importing them
import { AllRecipesPropTypes } from '@gatsby-themes/drupal';
IndexPage.propTypes = {
data: AllRecipesPropTypes, // Query prop types
theme: PropTypes.object.isRequired
};
Also take advantage of knowing what to expect in terms of the query output
Separation of GraphQL Queries from the component rendering
@gatsby-themes/okta
Pre-configured libraries
,demo-app
Shadowing Components
,Extendability and Atomic themes
Demo application based on Gatsby Themes that mimics the Gatsby Starter plus uses the core, material-ui (mui) and emotion themes to demonstrate composition and component shadowing.
drupal-app
Shadowing Components
,Extendability and Atomic themes
This is the main showcase application based on based on Gatsby Themes, Drupal and Emotion. This leverages all the above mentioned themes and uses all the theme concepts. This application also has got 100% results in Lighthouse and this demo site is PWA enabled.
For more information please see the respective README files of each project under this workspace.
yarn workspace demo-app develop
yarn workspace drupal-app develop
Each of the component library projects (mui, emotion, emotion-recipe-theme) are also integrated with storybook as part of the infrastructure.
yarn workspace @gatsby-themes/mui storybook
yarn workspace @gatsby-themes/emotion storybook
yarn workspace @gatsby-themes/tailwind storybook
yarn workspace @gatsby-themes/emotion-recipe-theme storybook
While the workspace is fine , but we need to make sure the themes work outside the workspace and can be used as part of an external gatsby site. For this a Gatsby application is created in the folder site
is created outside the workspace. This depends on the @gatsby-themes
packages that are published on npm. All we need to do is to add the dependencies for these packages as well as the peer dependencies which they depend on.
In order to run the external Gatsby site
cd site
yarn
yarn develop
The themes are published here https://www.npmjs.com/search?q=%40gatsby-themes
MIT