The Power of Gatsby Themes
By Nick DeJesus
@dayhaysoos
Resilient Coders
Takeaways
Please go make a theme
- Themes are useful
- They increase your productivity
- Structuring themes
Themes Are Versatile af
- Whole Entire Websites
- Specific Components
- UI Libraries
- Data Layers
- All of the above at once
They can be:
Data Layer
Themes don't have to be about the rendering UI. You can create a theme strictly for data.
The magic happens with gatsby-node.js
Life Cycle Methods
gatsby-node.js
- Sourcing data
- API Calls
- Markdown Files
- Excel Spreadsheets
- Literally anything
- Create GraphQL Nodes
Pretend Live-Coding
gatsby-node.js
exports.sourceNodes = ({actions}) => {
API CALL MADE HERE
actions.createNode(DATA FROM API CALL)
}
exports.createSchemaCustomization = ({actions}) => {
CREATE GRAPHQL DATA TYPES
}SHIP THAT
npm publish <ENTER> <ENTER> <ENTER>
UI Parent Theme
gatsby-config.js
yarn add the-thing-i-published
module.exports = {
plugins: ['the-thing-i-published']
}Create Pages
UI Parent theme > gatsby-node.js
exports.createPages = ({actions}) => {
const { createPage } = actions
const itemQuery = await graphql(`
{
allItem {
nodes {
description
}
}
}
`)
const items = itemQuery.data.allItem.nodes
// FOR EACH ITEM CREATE A PAGE
items.forEach(item => createPage(item))
}Composibility
Theme Relationships
- Parallel to each other
- Parent-child relationship (consumption)
- They can be added to any gatsby site
You can even combine themes and make that a theme on its own!
Component Shadowing
Anything inside the "src" directory can be shadowed
Shadowing
You can shadow a component, add props to it and extend it as well
JSX Pragmas
Pragmas tell the compiler how to handle the contents of a file
const element = <h1 className="greeting">Hello, world!</h1>
const element = React.createElement(
"h1",
{ className: "greeting" },
"Hello, world!"
)Theme-ui
/** @jsx jsx */
import { jsx } from "theme-ui"<button sx={{color: 'primary'}}>Some Button</button>// theme.js
const theme = {
colors: {
primary: 'blue'
}
}Stripe Theme
M O N O R E P O
Starter
Come hang out!
Discord:
https://discord.gg/5Ts2Pkr
Links/Reference
Fin
