Skip to content

Instantly share code, notes, and snippets.

@brookslyrette
Created January 5, 2019 14:32
Show Gist options
  • Save brookslyrette/e088b1375fafc136fd0c2bf2084f9824 to your computer and use it in GitHub Desktop.
Save brookslyrette/e088b1375fafc136fd0c2bf2084f9824 to your computer and use it in GitHub Desktop.
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>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment