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...I'm using 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 Gist.
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.