post.js

import React from 'react'
import Gist from 'react-gist'
import Markdown from 'markdown-to-jsx'

import Layout from '../components/layout'
import SEO from '../components/seo'

const ScriptHandler = (props) => {
  // if the script is a gist override it with our react component.
  if (props.src && props.src.includes('gist.github.com')) {
    return <Gist id={props.src.split('/')[4].split('.')[0]}/>
  }
  return null
}

export default ({ pageContext }) => {
  const { post } = pageContext
  return (
    <Layout>
      <SEO title={post.title} keywords={[`gatsby`, `application`, `react`]} />
      <h1> {post.title} </h1>
      <Markdown options={{
        overrides: {
          script: {
            component: ScriptHandler
          },
          Gist: Gist,
        },
      }}
      >
        {post.markdown}
      </Markdown>
    </Layout>
  )
}