Heavily inspired by https://github.com/damassi/gatsby-starter-typescript-rebass-netlifycms
I've done my best to keep commits for this setup step-by-step in hope others might understand the process better and avoid some of the endless faffing I went through.
These intermediate PRs worked at the time I did them but as some versions upgraded bugs were introduced and fixed. They now exist mainly as documentation of what changes I made for each step.
The steps begin from a working typescript + styled-components setup on top of the default gatsby starter.
- Introduce Rebass and re-implement most of the original site using its layout components
- Set up markdown sources using
gatsby-transformer-remark - Set up netlify-cms
- Set up mdx sources using
gatsby-mdx - Cleanup & most caveats for the above
By default this starter has both mdx and markdown/remark extensions. MDX seems a
better fit for styled-components, so compare the
disable-remark
branch for a rough diff on how to unwind that.
- Netlify CMS is broken - see gatsbyjs/gatsby#12776 . I'll update when there is a more durable fix but for now pinning to netlify-cms 2.6 (2.6.0 works for me) should fix it.
- Relative imports for MDX Global Scoped components not working from gatsby-config