hankxu / gatsby-starter-ts-mdx

gatsby/typescript/rebass/netlify starter

Erik's Gatsby 2019 setup

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.

Steps

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.

1. Introduce Rebass and re-implement most of the original site using its layout components
2. Set up markdown sources using gatsby-transformer-remark
3. Set up netlify-cms
4. Set up mdx sources using gatsby-mdx
5. 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.

TODOs:

• 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