I'm still in the process of rebuilding my blog in GatsbyJS. The project so far is going really well. In last weeks post, I outlined how I was loading data into Gatsby and rendering the basic pages. This week I've been working on rendering the Gists and ExpoSnacks I have embedded in most of my posts.
The data export from my old blog uses a mix of Markdown and HTML. Post content looks like this:
## Creating a navigator We will use a StackNavigator for this example. <script src="https://gist.github.com/brookslyrette/bf3df2ad046a3fa0f464203a6c0b7e2d.js"></script> Above we create a StackNavigator with three screens. We provide it with...
After I finish getting my old posts on the Gatsby version of my blog, I'll want to create new posts. Now I don't want to again use a mix of Markdown and HTML. My hope is to mix Markdown and React. I'm hoping new posts will look something like:
## Creating a navigator We will use a StackNavigator for this example. <Gist id="bf3df2ad046a3fa0f464203a6c0b7e2d" /> Above we create a StackNavigator with three screens. We provide it with...
markdown-to-jsx to render Markdown. This library will let me easily handle both cases. We will use overrides to look for
script tags or
div that should be replaced with a Gist or ExpoSnack to handle old posts. We'll also setup overrides to which will let us use React components in new posts.
First lets look at handling just the case of replacing
script tags that represent a
To handle the case of new blog posts all we have to do is add one more line of configuration. Now, lets set up
Gist as a component override.
If you load a post now you'll see Gists rendered within posts.
Here's the final version which also handles ExpoSnacks and converts
img tags to gatsby images.