Learn what Gatsby Themes are and why you should use them!

1. GatsbyThemes
Better,Faster,Flexible‑er

2. WhatareThemes?

3. Themes?
TokenSwaps
CSSZenGarden

4. Wordpress/Hugo/etc
SingleTheme
Comeswithavisualstyle
AddsFunctionality

5. Whatare(Gatsby)Themes?
Anewabstraction

6. (Gatsby)Themes?
TokenSwaps
CSSZenGarden++

7. WordPress/Hugo/etc++
SingleThemes
Comeswithavisualstyle
AddscomposesFunctionality

8. Whythemes?
Easeofuse&higherlevelabstractions

9. Lifecycle&ActionAPIs
onCreateNode
createPage
sourceNodes
createTypes
wrapRootElement
etc...

10. Issues
Pluginscan'taddplugins
Lowlevelabstractions

11. Whoarethemesfor?
PeoplenewtoGatsby
Peoplewithcommonusecases
Entrepreneurs
Designers

12. Sebastian McKenzie
@sebmck
I want to make a really basic docs website. Ideally I just want to
write
markdown and CSS. Nothing fancy, everything static. Trying out
@gatsbyjs but feel intimidated with the usage of GraphQL in the
boilerplate project and having to use JS to write everything up.
140 4:55 PM - Jan 15, 2019
74 people are talking about this

13. UseCases
1.IwantaBlog
2.DocumentationandaBlog
3.Customizethebranding
4.BuildThemestosell
5.InternalCreateReactApp
6.DataSourcing

14. IwantaBlog
yarnyarn init -yinit -y
yarnyarn addadd gatsby-theme-bloggatsby-theme-blog
// gatsby-config.js// gatsby-config.js
modulemodule..exportsexports == {{
__experimentalThemes__experimentalThemes:: [[`gatsby-theme-blog``gatsby-theme-blog`]]
}}

15. DocsandaBlog
yarnyarn init -yinit -y
yarnyarn addadd gatsby-theme-blog gatsby-theme-doczgatsby-theme-blog gatsby-theme-docz

16. DocsandaBlog
// gatsby-config.js// gatsby-config.js
modulemodule..exportsexports == {{
__experimentalThemes__experimentalThemes:: [[
`gatsby-theme-blog``gatsby-theme-blog`,,
`gatsby-theme-docz``gatsby-theme-docz`
]]
}}

17. // gatsby-config.js// gatsby-config.js
modulemodule..exportsexports == {{
__experimentalThemes__experimentalThemes:: [[{{
resolveresolve:: `gatsby-theme-blog``gatsby-theme-blog`,,
optionsoptions:: {{
colorscolors:: {{
blackblack:: '#000e1a''#000e1a',,
whitewhite:: '#fff''#fff',,
blueblue:: '#007ce0''#007ce0',,
navynavy:: '#004175''#004175'
}}
}}
}}]]
}}

18. HowdoThemeswork?
gatsby‑config.js
OverridesandConfiguration
Data

19. // gatsby-config.js// gatsby-config.js
modulemodule..exportsexports == {{
pluginsplugins:: [[
`gatsby-plugin-mdx``gatsby-plugin-mdx`,,
`gatsby-plugin-emotion``gatsby-plugin-emotion`,,
{{
resolveresolve:: `gatsby-source-filesystem``gatsby-source-filesystem`,,
optionsoptions:: {{
namename:: `pages``pages`,,
pathpath:: `src/pages/``src/pages/`,,
}},,
}},,
`gatsby-source-airtable``gatsby-source-airtable`,,
]]
}}

20. // gatsby-config.js// gatsby-config.js
modulemodule..exportsexports == {{
__experimentalThemes__experimentalThemes:: [[`gatsby-theme-superawesome``gatsby-theme-superawesome`]],,
pluginsplugins:: [[
`gatsby-source-airtable``gatsby-source-airtable`,,
]]
}}

21. // gatsby-theme-superawesome's gatsby-config.js// gatsby-theme-superawesome's gatsby-config.js
modulemodule..exportsexports == {{
pluginsplugins:: [[
`gatsby-plugin-mdx``gatsby-plugin-mdx`,,
`gatsby-plugin-emotion``gatsby-plugin-emotion`,,
{{
resolveresolve:: `gatsby-source-filesystem``gatsby-source-filesystem`,,
optionsoptions:: {{
namename:: `pages``pages`,,
pathpath:: `src/pages/``src/pages/`,,
}},,
}},,
]]
}}

22. OverridesandConfiguration
ConfiguringThemes
Replacingcomponents
Extendingcomponents

23. ConfigurableGatsbyConfig
// gatsby-config.js// gatsby-config.js
modulemodule..exportsexports == {{
__experimentalThemes__experimentalThemes:: [[{{
resolveresolve:: `gatsby-theme-superblog``gatsby-theme-superblog`,,
optionsoptions:: {{ tagstags:: [[`mdx``mdx`,, `gatsby``gatsby`,, `pizza``pizza`]] }}
}}]]
}}

24. // A theme's gatsby-config.js// A theme's gatsby-config.js
modulemodule..exportsexports == optionsoptions =>=> {{
constconst optionalPluginsoptionalPlugins == [[]]
ifif((optionsoptions..tagstags)) {{
optionalPluginsoptionalPlugins..pushpush(({{
resolveresolve:: `gatsby-plugin-validate-blogpost``gatsby-plugin-validate-blogpost`,,
optionsoptions:: {{ tagstags:: optionsoptions..tagstags }}
}}))
}}
returnreturn {{
pluginsplugins
}}
}}

25. // a theme's gatsby-node.js// a theme's gatsby-node.js
exportsexports..sourceNodessourceNodes == (({{actionsactions}},, themeOptionsthemeOptions)) =>=> {{
actionsactions..createTypescreateTypes(('enum Tag {''enum Tag {'
++ themeOptionsthemeOptions..tagstags..joinjoin(('n''n'))
++ '}''}'
))
}}
// the generated code// the generated code
enumenum TagTag {{
mdxmdx
gatsbygatsby
pizzapizza
}}

26. ExpectedExpected a valuea value ofof typetype "Tag""Tag" but receivedbut received:: "milk-duds""milk-duds"

27. Shadowing
..
└──└── sitesite
├── gatsby├── gatsby--configconfig..jsjs
├──├── packagepackage..jsonjson
├── node_modules├── node_modules
│ └── gatsby│ └── gatsby--themetheme--superawesomesuperawesome
│ └── src│ └── src
│ └── components│ └── components
│ └── blog│ └── blog--postpost--itemitem..jsjs
└── src└── src
└── gatsby└── gatsby--themetheme--superawesomesuperawesome
└── components└── components
└── blog└── blog--postpost--itemitem..jsjs

28. Shadowing
Worksforanywebpack'dfileinsrc/
Directreplacementoffile

29. // this file is our shadow file in our site// this file is our shadow file in our site
// site/src/gatsby-theme-superawesome/components/blog-post-item.js// site/src/gatsby-theme-superawesome/components/blog-post-item.js
// import original component// import original component
importimport BlogPostItemBlogPostItem fromfrom
'gatsby-theme-superawesome/src/components/blog-post-item.js''gatsby-theme-superawesome/src/components/blog-post-item.js'
// don't show excerpts// don't show excerpts
exportexport defaultdefault propsprops =>=> ((
<<BlogPostItemBlogPostItem {{......propsprops}} excerptexcerpt=="""" //>>
))

30. LatentShadowing
1.Multiplethemes
2.Shadowing
3.Shadowingthemesthatcouldbeinstalled

31. Whenallelsefails
LowlevelAPIs

32. ThemesRoadmap
andOtherProjects
DataAbstraction
SystemUI
DesignQL
ThemeUI
Blocks
CLIimprovements

33. DataAbstraction
Beabletousethemesacrosssources
BuildsonSchemaCustomizationAPIs
Isstillearly

34. Warning:ExperimentalAhead
Themescoreisprettystable
Shadowingisprettystable
DataAbstractionsarenew
EverythingI'mabouttoshowyoubeyondthisslideisnotreadyfor
production

35. SystemUI
Designtokenformatspec

36. DesignQL
ReferenceimplementationofSystemUISpec
GeneratesDocumentation
Abaseforfuturework

37. ThemeUI
ComponentLibrary
ImplementsSystemUI/DesignQLstandards
WillbeusedforGatsbyofficialthemes
Currentlyusedongatsby‑theme‑digital‑garden
Comeswithsolutionsforscoping,documentation,etc

38. Blocks
OpenSourceBlockEditor
BackedbyMDX,anauthorableformat
Partnerwiththirdparties(designtools,CMSs,etc)

39. CLIImprovements
Shadowejectionandintrospection

40. GatsbyThemes
Composablegatsby‑configs
ConfigurableandShadowable
NPMinstallable
Asmodularormonolithicasyouwant

41. GatsbyThemes
AhigherlevelofabstractionforGatsbyprojects