render() {
const {frontMatter} = this.props;
return (
<PageShell meta={frontMatter}>
<div className='relative prose'>
<div className='round bg-white'>
<div className='prose'>
<h1 className='mt0-mm txt-fancy'>{frontMatter.title}</h1>
<div className='mb36'>{md(frontMatter.description)}</div>
{!supported() &&
<div id='unsupported' className=''>
<div className='bg-yellow-faint round px12 py12 mb24'>
<div className='txt-bold mb6'><Icon name="alert" inline={true} />Mapbox GL unsupported</div>
<div className=''>Mapbox GL requires <a href='http://caniuse.com/webgl'>WebGL support</a>. Please check that you are using a supported browser and that WebGL is <a href='http://get.webgl.org/'>enabled</a>.</div>
</div>
</div>}
</div>
{supported() &&
<iframe id='demo' style={{ height: 400 }} className='w-full' allowFullScreen={true} mozallowfullscreen='true' webkitallowfullscreen='true'
ref={(iframe) => { this.iframe = iframe; }}/>}
<div className='bg-white'>
<div id='code'>
<CodeSnippet
code={this.displayHTML()}
highlightedCode={Prism.highlight(this.displayHTML(), Prism.languages['markup'])}
highlightThemeCss={highlightTheme}
onCopy={() => { analytics.track('Copied example with clipboard'); }}
/>
</div>
</div>
</div>
</div>
</PageShell>
);
}
render() {
const {frontMatter} = this.props;
const filter = this.state.filter.toLowerCase().trim();
return (
<PageShell meta={frontMatter} onUser={(_, token) => this.setState({token})}>
<LeftNav>
<div className="space-bottom">
<input onChange={e => this.setState({filter: e.target.value})}
type='text' className='space-bottom' name='filter' placeholder='Filter examples' />
</div>
{entries(tags).map(([tag, title], i) =>
<div key={i} className='space-bottom1'>
{!filter && <h3 className='heading'>{title}</h3>}
{examples
.filter(({tags, title}) =>
tags.indexOf(tag) !== -1 && title.toLowerCase().indexOf(filter) !== -1)
.map(({pathname, title}, i) =>
<a key={i} href={prefixUrl(pathname)}
className={`block small truncate ${title === frontMatter.title && 'active'}`}>{title}</a>
)}
</div>
)}
</LeftNav>
<div className='limiter clearfix'>
<TopNav current='examples'/>
<div className='contain margin3 col9'>
<div className='round doc fill-white keyline-all'>
<style>{`
.fill-white pre { background-color:transparent; }
`}</style>
<div className='prose'>
<div className='pad2'><strong>{frontMatter.title}</strong><br/>{md(frontMatter.description)}</div>
{!supported() &&
<div id='unsupported' className='pad2 hidden dark'>
<div className='note error round pad1'>
<div className='strong space-bottom1 icon alert'>Mapbox GL unsupported</div>
<div className='small strong'>Mapbox GL requires <a href='http://caniuse.com/webgl'>WebGL support</a>. Please check that you are using a supported browser and that WebGL is <a href='http://get.webgl.org/'>enabled</a>.</div>
</div>
</div>}
</div>
{supported() &&
<iframe id='demo' className='row10 col12' allowFullScreen='true' mozallowfullscreen='true' webkitallowfullscreen='true'
ref={(iframe) => { this.iframe = iframe; }}/>}
<div className='fill-white js-replace-token keyline-top'>
<div id='code'>{highlightMarkup(this.displayHTML())}</div>
<a className='button icon clipboard col12 round-bottom' href='#' onClick={(e) => this.copyExample(e)}>
{this.state.copied ? 'Copied to clipboard!' : 'Copy example'}
</a>
</div>
</div>
</div>
</div>
</PageShell>
);
}