post.js

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

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

const ScriptHandler = (props) => {
  if (props.src && props.src.includes('gist.github.com')) {
    return <Gist id={props.src.split('/')[4].split('.')[0]}/>
  }
  return null
}

const ImageHandler = ({ src }) => {
  return <Image src={src} />
}

const DivHandler = ({ children, ...props }) => {
  if (props['data-snack-id']) {
    return <ExpoSnack id={props['data-snack-id']} />
  }
  return <div {...props}>{children}</div>
}

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
          },
          img: {
            component: ImageHandler
          },
          div: {
            component: DivHandler
          },
          Gist: Gist,
          ExpoSnack: ExpoSnack
        },
      }}
      >
        {post.markdown}
      </Markdown>
    </Layout>
  )
}