Fix eslint errors
This commit is contained in:
Kyle Mathews
parent
f856fe0060
commit
d0552c19b2
10 changed files with 179 additions and 139 deletions
17
.eslintrc
Normal file
17
.eslintrc
Normal 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
17
app.js
|
|
@ -1,11 +1,10 @@
|
|||
exports.loadContext = function(callback) {
|
||||
var context;
|
||||
context = require.context('./pages', true);
|
||||
exports.loadContext = function (callback) {
|
||||
let context = require.context('./pages', true)
|
||||
if (module.hot) {
|
||||
module.hot.accept(context.id, function() {
|
||||
context = require.context('./pages', true);
|
||||
return callback(context);
|
||||
});
|
||||
module.hot.accept(context.id, () => {
|
||||
context = require.context('./pages', true)
|
||||
return callback(context)
|
||||
})
|
||||
}
|
||||
return callback(context);
|
||||
};
|
||||
return callback(context)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +1,33 @@
|
|||
import React from 'react';
|
||||
import { Link } from 'react-router';
|
||||
import { prune, include as includes } from 'underscore.string';
|
||||
import find from 'lodash/collection/find';
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import { prune, include as includes } from 'underscore.string'
|
||||
import find from 'lodash/collection/find'
|
||||
import { rhythm, fontSizeToMS } from 'utils/typography'
|
||||
import { link } from 'gatsby-helpers'
|
||||
|
||||
export default class extends React.Component {
|
||||
render() {
|
||||
let body, html, nextPost, readNext;
|
||||
readNext = this.props.post.readNext;
|
||||
if (readNext != null) {
|
||||
nextPost = find(this.props.pages, function(page) {
|
||||
return includes(page.path, readNext.slice(1, -1));
|
||||
});
|
||||
export default class ReadNext extends React.Component {
|
||||
propTypes () {
|
||||
return {
|
||||
post: React.PropTypes.object,
|
||||
pages: React.PropTypes.object,
|
||||
}
|
||||
}
|
||||
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) {
|
||||
return React.createElement("noscript", null);
|
||||
return React.createElement('noscript', null)
|
||||
} else {
|
||||
nextPost = find(this.props.pages, function(page) {
|
||||
return includes(page.path, readNext.slice(1, -1));
|
||||
});
|
||||
nextPost = find(this.props.pages, (page) =>
|
||||
includes(page.path, readNext.slice(1, -1))
|
||||
)
|
||||
// Create pruned version of the body.
|
||||
html = nextPost.data.body;
|
||||
body = prune(html.replace(/<[^>]*>/g, ''), 200);
|
||||
const html = nextPost.data.body
|
||||
const body = prune(html.replace(/<[^>]*>/g, ''), 200)
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -31,19 +36,19 @@ export default class extends React.Component {
|
|||
margin: 0,
|
||||
fontSize: fontSizeToMS(-1).fontSize,
|
||||
lineHeight: fontSizeToMS(-1).lineHeight,
|
||||
letterSpacing: -0.5
|
||||
letterSpacing: -0.5,
|
||||
}}
|
||||
>
|
||||
READ THIS NEXT:
|
||||
</h6>
|
||||
<h3
|
||||
style={{
|
||||
marginBottom: rhythm(1/4)
|
||||
marginBottom: rhythm(1/4),
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
to={nextPost.path}
|
||||
query={{readNext: true}}
|
||||
query={{ readNext: true }}
|
||||
>
|
||||
{nextPost.data.title}
|
||||
</Link>
|
||||
|
|
@ -51,7 +56,7 @@ export default class extends React.Component {
|
|||
<p>{body}</p>
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
42
html.jsx
42
html.jsx
|
|
@ -1,15 +1,20 @@
|
|||
import React from 'react';
|
||||
import Typography from 'typography';
|
||||
import DocumentTitle from 'react-document-title';
|
||||
import React from 'react'
|
||||
import DocumentTitle from 'react-document-title'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { TypographyStyle } from 'utils/typography'
|
||||
|
||||
export default class Html extends React.Component {
|
||||
render() {
|
||||
let title;
|
||||
title = DocumentTitle.rewind();
|
||||
propTypes () {
|
||||
return {
|
||||
body: React.PropTypes.string,
|
||||
favicon: React.PropTypes.string,
|
||||
title: React.PropTypes.string,
|
||||
}
|
||||
}
|
||||
render () {
|
||||
let title = DocumentTitle.rewind()
|
||||
if (this.props.title) {
|
||||
title = this.props.title;
|
||||
title = this.props.title
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -17,11 +22,16 @@ export default class Html extends React.Component {
|
|||
<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'/>
|
||||
<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={this.props.favicon}/>
|
||||
<TypographyStyle/>
|
||||
<style dangerouslySetInnerHTML={{__html:
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html:
|
||||
`
|
||||
body {
|
||||
color: rgb(66,66,66);
|
||||
|
|
@ -36,15 +46,17 @@ export default class Html extends React.Component {
|
|||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
`
|
||||
}}/>
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body className="landing-page">
|
||||
<div id="react-mount" dangerouslySetInnerHTML={{__html: this.props.body}} />
|
||||
<script src={link("/bundle.js")}/>
|
||||
<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
|
||||
<script src={link('/bundle.js')}/>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
Html.defaultProps = { body: "" };
|
||||
|
||||
Html.defaultProps = { body: '' }
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"description": "Starter Gatsby Blog",
|
||||
"main": "n/a",
|
||||
"scripts": {
|
||||
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
|
|
@ -27,7 +28,13 @@
|
|||
"react-dom": "^0.14.3",
|
||||
"react-responsive-grid": "^0.3.0",
|
||||
"react-router": "^0.13.5",
|
||||
"safe-access": "^0.1.0",
|
||||
"typography": "^0.6.2",
|
||||
"underscore.string": "^3.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"eslint": "^1.10.3",
|
||||
"eslint-config-airbnb": "^5.0.1",
|
||||
"eslint-plugin-react": "^4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,65 @@
|
|||
import React from 'react';
|
||||
import { RouteHandler, Link } from 'react-router';
|
||||
import { Container, Grid, Breakpoint, Span } from 'react-responsive-grid';
|
||||
import { link } from 'gatsby-helpers';
|
||||
import React from 'react'
|
||||
import { RouteHandler, Link } from 'react-router'
|
||||
import { Container } from 'react-responsive-grid'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { rhythm, fontSizeToMS } from 'utils/typography'
|
||||
import { config } from 'config'
|
||||
|
||||
import '../css/styles.css';
|
||||
import '../css/styles.css'
|
||||
|
||||
export default class extends React.Component {
|
||||
render() {
|
||||
let header;
|
||||
if (this.props.state.path === link('/')) {
|
||||
propTypes () {
|
||||
return {
|
||||
route: React.PropTypes.object,
|
||||
}
|
||||
}
|
||||
render () {
|
||||
let header
|
||||
if (this.props.route.path === link('/')) {
|
||||
header = (
|
||||
<h1
|
||||
style={{
|
||||
fontSize: fontSizeToMS(2.5).fontSize,
|
||||
lineHeight: fontSizeToMS(2.5).lineHeight,
|
||||
marginBottom: rhythm(1.5)
|
||||
marginBottom: rhythm(1.5),
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
color: 'inherit'
|
||||
color: 'inherit',
|
||||
}}
|
||||
to={link('/')}
|
||||
>
|
||||
{this.props.config.blogTitle}
|
||||
{config.blogTitle}
|
||||
</Link>
|
||||
</h1>
|
||||
);
|
||||
)
|
||||
} else {
|
||||
header = (
|
||||
<h3>
|
||||
<Link
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
color: 'inherit'
|
||||
color: 'inherit',
|
||||
}}
|
||||
to={link('/')}
|
||||
>
|
||||
{this.props.config.blogTitle}
|
||||
{config.blogTitle}
|
||||
</Link>
|
||||
</h3>
|
||||
);
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Container
|
||||
style={{
|
||||
maxWidth: rhythm(24),
|
||||
padding: `${rhythm(2)} ${rhythm(1/2)}`
|
||||
padding: `${rhythm(2)} ${rhythm(1/2)}`,
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
<RouteHandler {...this.props}/>
|
||||
</Container>
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
import React from 'react';
|
||||
import { RouteHandler, Link } from 'react-router';
|
||||
import sortBy from 'lodash/collection/sortBy';
|
||||
import DocumentTitle from 'react-document-title';
|
||||
import { link } from 'gatsby-helpers';
|
||||
import { rhythm, fontSizeToMS } from 'utils/typography'
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import sortBy from 'lodash/sortBy'
|
||||
import DocumentTitle from 'react-document-title'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { rhythm } from 'utils/typography'
|
||||
import access from 'safe-access'
|
||||
import { config } from 'config'
|
||||
|
||||
export default class extends React.Component {
|
||||
static data() {
|
||||
propTypes () {
|
||||
return {
|
||||
yo: true
|
||||
route: React.PropTypes.object,
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let i, len, page, pageLinks, ref, ref1, ref2, title;
|
||||
pageLinks = [];
|
||||
ref = sortBy(this.props.pages, (page) => {
|
||||
let ref;
|
||||
return (ref = page.data) != null ? ref.date : void 0;
|
||||
}).reverse();
|
||||
for (i = 0, len = ref.length; i < len; i++) {
|
||||
page = ref[i];
|
||||
title = ((ref1 = page.data) != null ? ref1.title : void 0) || page.path;
|
||||
if (page.path && page.path !== "/" && !((ref2 = page.data) != null ? ref2.draft : void 0)) {
|
||||
render () {
|
||||
const pageLinks = []
|
||||
// Sort pages.
|
||||
const sortedPages = sortBy(this.props.route.pages, (page) =>
|
||||
access(page, 'data.date')
|
||||
).reverse()
|
||||
sortedPages.forEach((page) => {
|
||||
const title = access(page, 'data.title') || page.path
|
||||
if (page.path && page.path !== '/' && access(page, 'file.extension') === '.md') {
|
||||
pageLinks.push(
|
||||
<li
|
||||
key={page.path}
|
||||
style={{
|
||||
marginBottom: rhythm(1/4)
|
||||
marginBottom: rhythm(1/4),
|
||||
}}
|
||||
>
|
||||
<Link to={link(page.path)}>{title}</Link>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
return (
|
||||
<DocumentTitle title={this.props.config.blogTitle}>
|
||||
<DocumentTitle title={config.blogTitle}>
|
||||
<div>
|
||||
<p
|
||||
style={{
|
||||
marginBottom: rhythm(2.5)
|
||||
marginBottom: rhythm(2.5),
|
||||
}}
|
||||
>
|
||||
<img
|
||||
|
|
@ -49,10 +49,10 @@ export default class extends React.Component {
|
|||
marginRight: rhythm(1/4),
|
||||
marginBottom: 0,
|
||||
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>
|
||||
<ul>
|
||||
{pageLinks}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
import Typography from 'typography';
|
||||
import Typography from 'typography'
|
||||
|
||||
const options = {
|
||||
baseFontSize: '18px',
|
||||
baseLineHeight: '27px',
|
||||
modularScales: [
|
||||
{
|
||||
"scale": "minor third"
|
||||
}
|
||||
]
|
||||
scale: 'minor third',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const typography = new Typography(options)
|
||||
|
||||
// Hot reload typography in development.
|
||||
if (process.env.NODE_ENV !== "production") {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
typography.injectStyles()
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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}}/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
@ -1,51 +1,56 @@
|
|||
import React from 'react';
|
||||
import moment from 'moment';
|
||||
import DocumentTitle from 'react-document-title';
|
||||
import { link } from 'gatsby-helpers';
|
||||
import ReadNext from '../components/ReadNext';
|
||||
import { rhythm, fontSizeToMS } from 'utils/typography'
|
||||
import React from 'react'
|
||||
import moment from 'moment'
|
||||
import DocumentTitle from 'react-document-title'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import ReadNext from '../components/ReadNext'
|
||||
import { rhythm } from 'utils/typography'
|
||||
import { config } from 'config'
|
||||
|
||||
import '../css/zenburn.css';
|
||||
import '../css/zenburn.css'
|
||||
|
||||
module.exports = React.createClass({
|
||||
render: function() {
|
||||
var post
|
||||
post = this.props.page.data;
|
||||
propTypes () {
|
||||
return {
|
||||
route: React.PropTypes.object,
|
||||
}
|
||||
},
|
||||
render () {
|
||||
const post = this.props.route.page.data
|
||||
|
||||
return (
|
||||
<DocumentTitle title={`${post.title} | ${this.props.config.blogTitle}`}>
|
||||
<DocumentTitle title={`${post.title} | ${config.blogTitle}`}>
|
||||
<div className="markdown">
|
||||
<h1>{post.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{__html: post.body}}/>
|
||||
<div dangerouslySetInnerHTML={{ __html: post.body }}/>
|
||||
<em
|
||||
style={{
|
||||
display: 'block',
|
||||
marginBottom: rhythm(2)
|
||||
marginBottom: rhythm(2),
|
||||
}}
|
||||
>
|
||||
Posted {moment(post.date).format('MMMM D, YYYY')}
|
||||
</em>
|
||||
<hr
|
||||
style={{
|
||||
marginBottom: rhythm(2)
|
||||
marginBottom: rhythm(2),
|
||||
}}
|
||||
/>
|
||||
<ReadNext post={post} {...this.props}/>
|
||||
<p>
|
||||
<img
|
||||
src={link("/kyle-round-small-pantheon.jpg")}
|
||||
src={link('/kyle-round-small-pantheon.jpg')}
|
||||
style={{
|
||||
float: 'left',
|
||||
marginRight: rhythm(1/4),
|
||||
marginBottom: 0,
|
||||
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>
|
||||
</p>
|
||||
</div>
|
||||
</DocumentTitle>
|
||||
);
|
||||
}
|
||||
});
|
||||
)
|
||||
},
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue