70 lines
1.3 KiB
JavaScript
70 lines
1.3 KiB
JavaScript
import React, {Component, Fragment} from 'react';
|
|
import {object} from 'prop-types';
|
|
import injectSheet from 'react-jss';
|
|
|
|
class Example extends Component {
|
|
render() {
|
|
const example = this.props.data.sitePage.context;
|
|
|
|
return (
|
|
<Fragment>
|
|
<h1>{example.frontmatter.title}</h1>
|
|
<iframe
|
|
className={this.props.classes.embed}
|
|
src={example.embedUrl}
|
|
frameBorder="0"
|
|
/>
|
|
<h3>script</h3>
|
|
<pre>
|
|
<code>{example.js}</code>
|
|
</pre>
|
|
<h3>markup</h3>
|
|
<pre>
|
|
<code>{example.html}</code>
|
|
</pre>
|
|
{example.css && (
|
|
<Fragment>
|
|
<h3>style</h3>
|
|
<pre>
|
|
<code>{example.css}</code>
|
|
</pre>
|
|
</Fragment>
|
|
)}
|
|
</Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
Example.propTypes = {
|
|
data: object.isRequired,
|
|
classes: object.isRequired
|
|
};
|
|
|
|
export const query = graphql`
|
|
query ExampleQuery($slug: String!) {
|
|
sitePage(context: {slug: {eq: $slug}}) {
|
|
context {
|
|
slug
|
|
frontmatter {
|
|
title
|
|
}
|
|
embedUrl
|
|
html
|
|
js
|
|
css
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const styles = {
|
|
embed: {
|
|
margin: 0,
|
|
padding: 0,
|
|
height: 350,
|
|
width: '100%'
|
|
}
|
|
};
|
|
|
|
export default injectSheet(styles)(Example);
|