render () {
const { favicon, body } = this.props
let title = DocumentTitle.rewind()
if (this.props.title) {
title = this.props.title
}
let cssLink
if (process.env.NODE_ENV === 'production') {
cssLink = <link rel="stylesheet" href={link('/styles.css')} />
}
return (
<html lang="en">
<head>
<meta charSet="utf-8"/>
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
<meta
name="viewport"
content="user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0"
/>
<title>{this.props.title}</title>
<link rel="shortcut icon" href={favicon} />
<TypographyStyle/>
{cssLink}
</head>
<body className="landing-page">
<div id="react-mount" dangerouslySetInnerHTML={{ __html: body }} />
<script src={link('/bundle.js')}/>
</body>
</html>
)
}
render () {
const { location, children } = this.props
let header
if (location.pathname === link('/')) {
header = (
<h1
style={{
fontSize: fontSizeToMS(2.5).fontSize,
lineHeight: fontSizeToMS(2.5).lineHeight,
marginBottom: rhythm(1.5),
}}
>
<Link
style={{
textDecoration: 'none',
color: 'inherit',
}}
to={link('/')}
>
{config.blogTitle}
</Link>
</h1>
)
} else {
header = (
<h3>
<Link
style={{
textDecoration: 'none',
color: 'inherit',
}}
to={link('/')}
>
{config.blogTitle}
</Link>
</h3>
)
}
return (
<Container
style={{
maxWidth: rhythm(24),
padding: `${rhythm(2)} ${rhythm(1/2)}`,
}}
>
{header}
{children}
</Container>
)
}
const Logo = () => (
<div className="Logo animate">
<Link to={link('/')}>
<Monogram className="face" />
</Link>
</div>
)
render () {
return (
<div>
<h1>
Hi people
</h1>
<p>Welcome to your new Gatsby site</p>
<h3>Below are some pages showing different capabilities built-in to Gatsby</h3>
<h4>Supported file types</h4>
<ul>
<li>
<Link to={link('/markdown/')}>Markdown</Link>
</li>
<li>
<Link to={link('/react/')}>JSX (React components)</Link>
</li>
<li>
<Link to={link('/coffee-react/')}>CJSX (Coffeescript React components)</Link>
</li>
<li>
<Link to={link('/html/')}>HTML</Link>
</li>
<li>
<Link to={link('/json/')}>JSON</Link>
</li>
<li>
<Link to={link('/yaml/')}>YAML</Link>
</li>
<li>
<Link to={link('/toml/')}>TOML</Link>
</li>
</ul>
<h4>Supported CSS Preprocessors</h4>
<ul>
<li>
<Link to={link('/postcss/')}>PostCSS</Link>
</li>
<li>
<Link to={link('/sass/')}>Sass</Link>
</li>
<li>
<Link to={link('/less/')}>Less</Link>
</li>
</ul>
</div>
)
}
const TitleBar = ({ title = 'håken.no' }) => (
<div className="TitleBar animate">
<Link to={link('/')}>
<Monogram className="face" />
</Link>
<h1>{title}</h1>
</div>
)
const sidebarItems = config.templatePages.map(p => {
const page = props.route.pages.find(_p => _p.path === p);
// const isActive = link(page.path) === props.location.pathname;
return (
<ListItem key={page.path}>
<Link to={link(page.path)}>{page.data.title}</Link>
</ListItem>
);
});
const DocHtml = props => {
const title = props.title
? props.title
: DocumentTitle.rewind();
const cssLink = (process.env.NODE_ENV === 'production')
? <link rel="stylesheet" href={link('/styles.css')} />
: null;
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<title>{title}</title>
{props.favicon && <link rel="shortcut icon" href={props.favicon} />}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script src="https://npmcdn.com/dialog-polyfill/dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="https://npmcdn.com/dialog-polyfill/dialog-polyfill.css" />
{cssLink}
</head>
<body>
<div id="react-mount" dangerouslySetInnerHTML={{ __html: props.body }} />
<script src={link('/bundle.js')} />
<script dangerouslySetInnerHTML={{ __html: `
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-73434705-1', 'auto');
ga('send', 'pageview');` }} />
</body>
</html>
);
};
sortedPages.forEach((page) => {
if (access(page, 'file.ext') === 'md' && page.path !== '/404/') {
const title = access(page, 'data.title') || page.path
pageLinks.push(
<li
key={page.path}
style={{
marginBottom: rhythm(1/4),
}}
>
<Link to={link(page.path)}>{title}</Link>
</li>
)
}
})
sortedPages.forEach((page) => {
if (access(page, 'file.ext') === 'md' && !include(page.path, '/404')) {
const title = access(page, 'data.title') || page.path
const date = access(page, 'data.date')
const html = page.data.body
const body = prune(html.replace(/<[^>]*>/g, ''), 350)
if (pageLinks.length < 3) {
pageLinks.push(
<li
key={page.path}
>
<h3 className="no-margin-padding"><Link to={link(page.path)}>{title}</Link></h3>
<p className="meta">{moment(date).format('dddd | MMMM DD YYYY | hh:mm A')}</p>
<p>{body}</p>
</li>
)
}
}
})
render () {
const { pages, post } = this.props
const { readNext } = post
let nextPost
if (readNext) {
nextPost = find(pages, (page) =>
includes(page.path, readNext)
)
}
if (!nextPost) {
return React.createElement('noscript', null)
} else {
nextPost = find(pages, (page) =>
includes(page.path, readNext.slice(1, -1))
)
// Create pruned version of the body.
const html = nextPost.data.body
const body = prune(html.replace(/<[^>]*>/g, ''), 200)
return (
<div>
<h6>
READ THIS NEXT:
</h6>
<h3>
<Link
to={{
pathname: link(nextPost.path),
query: {
readNext: true,
},
}}
>
{nextPost.data.title}
</Link>
</h3>
<p>{body}</p>
<hr />
</div>
)
}
}
render () {
const { route } = this.props
const post = route.page.data
return (
<DocumentTitle title={`${post.title} | ${config.blogTitle}`}>
<div className="markdown">
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.body }}/>
<em
style={{
display: 'block',
marginBottom: rhythm(2),
}}
>
Posted {moment(post.date).format('MMMM D, YYYY')}
</em>
<hr
style={{
marginBottom: rhythm(2),
}}
/>
<ReadNext post={post} pages={route.pages} />
<p>
<img
src={link('/kyle-round-small-pantheon.jpg')}
style={{
float: 'left',
marginRight: rhythm(1/4),
marginBottom: 0,
width: rhythm(2),
height: rhythm(2),
}}
/>
<strong>{config.authorName}</strong> lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
</p>
</div>
</DocumentTitle>
)
}
module.exports = React.createClass({
propTypes () {
return {
title: React.PropTypes.string,
}
},
render () {
let title = DocumentTitle.rewind()
if (this.props.title) {
title = this.props.title
}
let cssLink
if (process.env.NODE_ENV === 'production') {
cssLink = <link rel="stylesheet" href={link('/styles.css')} />
}
return (
<html lang="en">
<head>
<meta charSet="utf-8"/>
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
<meta
name="viewport"
content="user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0"
/>
<title>{title}</title>
<link rel="shortcut icon" href={this.props.favicon}/>
<TypographyStyle/>
{cssLink}
module.exports = React.createClass({
propTypes () {
return {
title: React.PropTypes.string,
}
},
render () {
let title = DocumentTitle.rewind()
if (this.props.title) {
title = this.props.title
}
let cssLink
if (process.env.NODE_ENV === 'production') {
cssLink = <link rel="stylesheet" href={link('/styles.css')} />
}
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0 maximum-scale=1.0"
/>
<title>{title}</title>
<link rel="shortcut icon" href={this.props.favicon} />
<TypographyStyle />
{cssLink}