waylon/gatsby-starter-blog-forestry
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix eslint errors

Browse source
This commit is contained in:
Kyle Mathews 2016-02-20 12:31:34 -08:00
parent f856fe0060
commit d0552c19b2
10 changed files with 179 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

17
.eslintrc Normal file
View file

@ -0,0 +1,17 @@
{
"extends": "eslint-config-airbnb",
"rules": {
"indent": [2, 2, {"SwitchCase": 1}],
"no-console": [0],
"func-names": [0],
"semi": [2, "never"],
"no-extra-semi": [2],
"space-before-function-paren": [2, "always"],
"no-else-return": [0],
"space-infix-ops": [0],
"react/prefer-es6-class": [0],
},
"globals": {
"__PREFIX_LINKS__": true,
},
}

17
app.js
View file

@ -1,11 +1,10 @@
exports.loadContext = function(callback) { exports.loadContext = function (callback) {
var context; let context = require.context('./pages', true)
context = require.context('./pages', true);
if (module.hot) { if (module.hot) {
module.hot.accept(context.id, function() { module.hot.accept(context.id, () => {
context = require.context('./pages', true); context = require.context('./pages', true)
return callback(context); return callback(context)
}); })
} }
return callback(context); return callback(context)
}; }

51
components/ReadNext.jsx
View file

@ -1,28 +1,33 @@
import React from 'react'; import React from 'react'
import { Link } from 'react-router'; import { Link } from 'react-router'
import { prune, include as includes } from 'underscore.string'; import { prune, include as includes } from 'underscore.string'
import find from 'lodash/collection/find'; import find from 'lodash/collection/find'
import { rhythm, fontSizeToMS } from 'utils/typography' import { rhythm, fontSizeToMS } from 'utils/typography'
import { link } from 'gatsby-helpers'
export default class extends React.Component { export default class ReadNext extends React.Component {
render() { propTypes () {
let body, html, nextPost, readNext; return {
readNext = this.props.post.readNext; post: React.PropTypes.object,
if (readNext != null) { pages: React.PropTypes.object,
nextPost = find(this.props.pages, function(page) { }
return includes(page.path, readNext.slice(1, -1)); }
}); render () {
const readNext = this.props.post.readNext
let nextPost
if (readNext !== null) {
nextPost = find(this.props.pages, (page) =>
includes(page.path, readNext.slice(1, -1))
)
} }
if (!nextPost) { if (!nextPost) {
return React.createElement("noscript", null); return React.createElement('noscript', null)
} else { } else {
nextPost = find(this.props.pages, function(page) { nextPost = find(this.props.pages, (page) =>
return includes(page.path, readNext.slice(1, -1)); includes(page.path, readNext.slice(1, -1))
}); )
// Create pruned version of the body. // Create pruned version of the body.
html = nextPost.data.body; const html = nextPost.data.body
body = prune(html.replace(/<[^>]*>/g, ''), 200); const body = prune(html.replace(/<[^>]*>/g, ''), 200)
return ( return (
<div> <div>
@ -31,19 +36,19 @@ export default class extends React.Component {
margin: 0, margin: 0,
fontSize: fontSizeToMS(-1).fontSize, fontSize: fontSizeToMS(-1).fontSize,
lineHeight: fontSizeToMS(-1).lineHeight, lineHeight: fontSizeToMS(-1).lineHeight,
letterSpacing: -0.5 letterSpacing: -0.5,
}} }}
> >
READ THIS NEXT: READ THIS NEXT:
</h6> </h6>
<h3 <h3
style={{ style={{
marginBottom: rhythm(1/4) marginBottom: rhythm(1/4),
}} }}
> >
<Link <Link
to={nextPost.path} to={nextPost.path}
query={{readNext: true}} query={{ readNext: true }}
> >
{nextPost.data.title} {nextPost.data.title}
</Link> </Link>
@ -51,7 +56,7 @@ export default class extends React.Component {
<p>{body}</p> <p>{body}</p>
<hr /> <hr />
</div> </div>
); )
} }
} }
} }

70
html.jsx
View file

@ -1,15 +1,20 @@
import React from 'react'; import React from 'react'
import Typography from 'typography'; import DocumentTitle from 'react-document-title'
import DocumentTitle from 'react-document-title';
import { link } from 'gatsby-helpers' import { link } from 'gatsby-helpers'
import { TypographyStyle } from 'utils/typography' import { TypographyStyle } from 'utils/typography'
export default class Html extends React.Component { export default class Html extends React.Component {
render() { propTypes () {
let title; return {
title = DocumentTitle.rewind(); body: React.PropTypes.string,
favicon: React.PropTypes.string,
title: React.PropTypes.string,
}
}
render () {
let title = DocumentTitle.rewind()
if (this.props.title) { if (this.props.title) {
title = this.props.title; title = this.props.title
} }
return ( return (
@ -17,34 +22,41 @@ export default class Html extends React.Component {
<head> <head>
<meta charSet="utf-8"/> <meta charSet="utf-8"/>
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/> <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'/> <meta
name="viewport"
content="user-scalable=no width=device-width, initial-scale=1.0 maximum-scale=1.0"
/>
<title>{this.props.title}</title> <title>{this.props.title}</title>
<link rel="shortcut icon" href={this.props.favicon}/> <link rel="shortcut icon" href={this.props.favicon}/>
<TypographyStyle/> <TypographyStyle/>
<style dangerouslySetInnerHTML={{__html: <style
` dangerouslySetInnerHTML={{
body { __html:
color: rgb(66,66,66); `
} body {
h1,h2,h3,h4,h5,h6 { color: rgb(66,66,66);
color: rgb(44,44,44); }
} h1,h2,h3,h4,h5,h6 {
a { color: rgb(44,44,44);
color: rgb(42,93,173); }
text-decoration: none; a {
} color: rgb(42,93,173);
a:hover { text-decoration: none;
text-decoration: underline; }
} a:hover {
` text-decoration: underline;
}}/> }
`,
}}
/>
</head> </head>
<body className="landing-page"> <body className="landing-page">
<div id="react-mount" dangerouslySetInnerHTML={{__html: this.props.body}} /> <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
<script src={link("/bundle.js")}/> <script src={link('/bundle.js')}/>
</body> </body>
</html> </html>
); )
} }
} }
Html.defaultProps = { body: "" };
Html.defaultProps = { body: '' }

7
package.json
View file

@ -4,6 +4,7 @@
"description": "Starter Gatsby Blog", "description": "Starter Gatsby Blog",
"main": "n/a", "main": "n/a",
"scripts": { "scripts": {
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },
"repository": { "repository": {
@ -27,7 +28,13 @@
"react-dom": "^0.14.3", "react-dom": "^0.14.3",
"react-responsive-grid": "^0.3.0", "react-responsive-grid": "^0.3.0",
"react-router": "^0.13.5", "react-router": "^0.13.5",
"safe-access": "^0.1.0",
"typography": "^0.6.2", "typography": "^0.6.2",
"underscore.string": "^3.2.2" "underscore.string": "^3.2.2"
},
"devDependencies": {
"eslint": "^1.10.3",
"eslint-config-airbnb": "^5.0.1",
"eslint-plugin-react": "^4.0.0"
} }
} }

40
pages/_template.jsx
View file

@ -1,59 +1,65 @@
import React from 'react'; import React from 'react'
import { RouteHandler, Link } from 'react-router'; import { RouteHandler, Link } from 'react-router'
import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid'; import { Container } from 'react-responsive-grid'
import { link } from 'gatsby-helpers'; import { link } from 'gatsby-helpers'
import { rhythm, fontSizeToMS } from 'utils/typography' import { rhythm, fontSizeToMS } from 'utils/typography'
import { config } from 'config'
import '../css/styles.css'; import '../css/styles.css'
export default class extends React.Component { export default class extends React.Component {
render() { propTypes () {
let header; return {
if (this.props.state.path === link('/')) { route: React.PropTypes.object,
}
}
render () {
let header
if (this.props.route.path === link('/')) {
header = ( header = (
<h1 <h1
style={{ style={{
fontSize: fontSizeToMS(2.5).fontSize, fontSize: fontSizeToMS(2.5).fontSize,
lineHeight: fontSizeToMS(2.5).lineHeight, lineHeight: fontSizeToMS(2.5).lineHeight,
marginBottom: rhythm(1.5) marginBottom: rhythm(1.5),
}} }}
> >
<Link <Link
style={{ style={{
textDecoration: 'none', textDecoration: 'none',
color: 'inherit' color: 'inherit',
}} }}
to={link('/')} to={link('/')}
> >
{this.props.config.blogTitle} {config.blogTitle}
</Link> </Link>
</h1> </h1>
); )
} else { } else {
header = ( header = (
<h3> <h3>
<Link <Link
style={{ style={{
textDecoration: 'none', textDecoration: 'none',
color: 'inherit' color: 'inherit',
}} }}
to={link('/')} to={link('/')}
> >
{this.props.config.blogTitle} {config.blogTitle}
</Link> </Link>
</h3> </h3>
); )
} }
return ( return (
<Container <Container
style={{ style={{
maxWidth: rhythm(24), maxWidth: rhythm(24),
padding: `${rhythm(2)} ${rhythm(1/2)}` padding: `${rhythm(2)} ${rhythm(1/2)}`,
}} }}
> >
{header} {header}
<RouteHandler {...this.props}/> <RouteHandler {...this.props}/>
</Container> </Container>
); )
} }
} }

52
pages/index.jsx
View file

@ -1,45 +1,45 @@
import React from 'react'; import React from 'react'
import { RouteHandler, Link } from 'react-router'; import { Link } from 'react-router'
import sortBy from 'lodash/collection/sortBy'; import sortBy from 'lodash/sortBy'
import DocumentTitle from 'react-document-title'; import DocumentTitle from 'react-document-title'
import { link } from 'gatsby-helpers'; import { link } from 'gatsby-helpers'
import { rhythm, fontSizeToMS } from 'utils/typography' import { rhythm } from 'utils/typography'
import access from 'safe-access'
import { config } from 'config'
export default class extends React.Component { export default class extends React.Component {
static data() { propTypes () {
return { return {
yo: true route: React.PropTypes.object,
} }
} }
render() { render () {
let i, len, page, pageLinks, ref, ref1, ref2, title; const pageLinks = []
pageLinks = []; // Sort pages.
ref = sortBy(this.props.pages, (page) => { const sortedPages = sortBy(this.props.route.pages, (page) =>
let ref; access(page, 'data.date')
return (ref = page.data) != null ? ref.date : void 0; ).reverse()
}).reverse(); sortedPages.forEach((page) => {
for (i = 0, len = ref.length; i < len; i++) { const title = access(page, 'data.title') || page.path
page = ref[i]; if (page.path && page.path !== '/' && access(page, 'file.extension') === '.md') {
title = ((ref1 = page.data) != null ? ref1.title : void 0) || page.path;
if (page.path && page.path !== "/" && !((ref2 = page.data) != null ? ref2.draft : void 0)) {
pageLinks.push( pageLinks.push(
<li <li
key={page.path} key={page.path}
style={{ style={{
marginBottom: rhythm(1/4) marginBottom: rhythm(1/4),
}} }}
> >
<Link to={link(page.path)}>{title}</Link> <Link to={link(page.path)}>{title}</Link>
</li> </li>
); )
} }
} })
return ( return (
<DocumentTitle title={this.props.config.blogTitle}> <DocumentTitle title={config.blogTitle}>
<div> <div>
<p <p
style={{ style={{
marginBottom: rhythm(2.5) marginBottom: rhythm(2.5),
}} }}
> >
<img <img
@ -49,10 +49,10 @@ export default class extends React.Component {
marginRight: rhythm(1/4), marginRight: rhythm(1/4),
marginBottom: 0, marginBottom: 0,
width: rhythm(2), width: rhythm(2),
height: rhythm(2) height: rhythm(2),
}} }}
/> />
Written by <strong>{this.props.config.authorName}</strong> who lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a> Written by <strong>{config.authorName}</strong> who lives and works in San Francisco building useful things. <a href="https://twitter.com/kylemathews">You should follow him on Twitter</a>
</p> </p>
<ul> <ul>
{pageLinks} {pageLinks}

10
utils/typography.js
View file

@ -1,19 +1,19 @@
import Typography from 'typography'; import Typography from 'typography'
const options = { const options = {
baseFontSize: '18px', baseFontSize: '18px',
baseLineHeight: '27px', baseLineHeight: '27px',
modularScales: [ modularScales: [
{ {
"scale": "minor third" scale: 'minor third',
} },
] ],
} }
const typography = new Typography(options) const typography = new Typography(options)
// Hot reload typography in development. // Hot reload typography in development.
if (process.env.NODE_ENV !== "production") { if (process.env.NODE_ENV !== 'production') {
typography.injectStyles() typography.injectStyles()
} }

11
wrappers/html.jsx
View file

@ -1,11 +0,0 @@
import React from 'react';
module.exports = React.createClass({
render: function() {
var html;
html = "<div>fix me</div>";
return (
<div dangerouslySetInnerHTML={{__html: html}}/>
);
}
});

43
wrappers/md.jsx
View file

@ -1,51 +1,56 @@
import React from 'react'; import React from 'react'
import moment from 'moment'; import moment from 'moment'
import DocumentTitle from 'react-document-title'; import DocumentTitle from 'react-document-title'
import { link } from 'gatsby-helpers'; import { link } from 'gatsby-helpers'
import ReadNext from '../components/ReadNext'; import ReadNext from '../components/ReadNext'
import { rhythm, fontSizeToMS } from 'utils/typography' import { rhythm } from 'utils/typography'
import { config } from 'config'
import '../css/zenburn.css'; import '../css/zenburn.css'
module.exports = React.createClass({ module.exports = React.createClass({
render: function() { propTypes () {
var post return {
post = this.props.page.data; route: React.PropTypes.object,
}
},
render () {
const post = this.props.route.page.data
return ( return (
<DocumentTitle title={`${post.title} | ${this.props.config.blogTitle}`}> <DocumentTitle title={`${post.title} | ${config.blogTitle}`}>
<div className="markdown"> <div className="markdown">
<h1>{post.title}</h1> <h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{__html: post.body}}/> <div dangerouslySetInnerHTML={{ __html: post.body }}/>
<em <em
style={{ style={{
display: 'block', display: 'block',
marginBottom: rhythm(2) marginBottom: rhythm(2),
}} }}
> >
Posted {moment(post.date).format('MMMM D, YYYY')} Posted {moment(post.date).format('MMMM D, YYYY')}
</em> </em>
<hr <hr
style={{ style={{
marginBottom: rhythm(2) marginBottom: rhythm(2),
}} }}
/> />
<ReadNext post={post} {...this.props}/> <ReadNext post={post} {...this.props}/>
<p> <p>
<img <img
src={link("/kyle-round-small-pantheon.jpg")} src={link('/kyle-round-small-pantheon.jpg')}
style={{ style={{
float: 'left', float: 'left',
marginRight: rhythm(1/4), marginRight: rhythm(1/4),
marginBottom: 0, marginBottom: 0,
width: rhythm(2), width: rhythm(2),
height: rhythm(2) height: rhythm(2),
}} }}
/> />
<strong>{this.props.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> <strong>{this.props.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> </p>
</div> </div>
</DocumentTitle> </DocumentTitle>
); )
} },
}); })