mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2025-02-24 19:21:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #33 from abisz/linting

Browse Source 
Linting
This commit is contained in:
Alexander S 2017-03-08 22:49:29 +02:00 committed by GitHub
commit c8e68a2138
16 changed files with 413 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
.eslintrc Normal file
View File

@ -0,0 +1,19 @@
{
"extends": "airbnb",
"plugins": [
"react",
"jsx-a11y",
"import"
],
"rules": {
"global-require": [0],
"react/jsx-filename-extension": [0],
"react/prefer-es6-class": [0],
"react/prefer-stateless-function": [0],
"react/forbid-prop-types": [0],
/* to allow importing 'gatsby-helpers' */
"import/no-extraneous-dependencies": [0],
"import/no-unresolved": [0],
"import/extensions": [0]
}
}

4
.gitignore vendored
View File

@ -1,4 +1,8 @@
node_modules/
npm-debug.log
.eslintcache
public
.gatsby-context.js

74
components/ReadNext/index.jsx
View File

@ -1,44 +1,48 @@
import React from 'react'
import { Link } from 'react-router'
import { prune, include as includes } from 'underscore.string'
import find from 'lodash/find'
import React from 'react';
import { Link } from 'react-router';
import { include as includes } from 'underscore.string';
import find from 'lodash/find';
import './style.css'
import './style.css';
class ReadNext extends React.Component {
render() {
const {post} = this.props
const {pages} = this.props.route
const {readNext} = post
render() {
const { post } = this.props;
const { pages } = this.props.route;
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))
)
const description = nextPost.data.description
return (
<div>
<h6 style={ { fontSize: '16px', margin: '20px 0 0'} }>READ THIS NEXT:</h6>
<h3 style={ { margin: '5px 0 0'} }><Link to={ nextPost.path } query={ { readNext: true} } > { nextPost.data.title } </Link></h3>
<p className='description'>
{ description }
</p>
</div>
);
}
let nextPost;
if (readNext) {
nextPost = find(pages, page => includes(page.path, readNext));
}
if (!nextPost) {
return React.createElement('noscript', null);
}
nextPost = find(pages, page => includes(page.path, readNext.slice(1, -1)));
const description = nextPost.data.description;
return (
<div>
<h6 style={{ fontSize: '16px', margin: '20px 0 0' }}>READ THIS NEXT:</h6>
<h3 style={{ margin: '5px 0 0' }}>
<Link to={nextPost.path} query={{ readNext: true }}>
{nextPost.data.title}
</Link>
</h3>
<p className="description">
{description}
</p>
</div>
);
}
}
ReadNext.propTypes = {
post: React.PropTypes.object.isRequired,
pages: React.PropTypes.array,
}
post: React.PropTypes.object.isRequired,
pages: React.PropTypes.array,
route: React.PropTypes.object,
};
export default ReadNext;
export default ReadNext

111
components/SiteLinks/index.jsx
View File

@ -1,62 +1,59 @@
import React from 'react'
import { RouteHandler, Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'
import { config } from 'config'
import './style.css'
import '../../static/fonts/fontawesome/style.css'
import React from 'react';
import { config } from 'config';
import './style.css';
import '../../static/fonts/fontawesome/style.css';
class SiteLinks extends React.Component {
render () {
return (
<div className="blog-links">
<ul>
{config.siteTwitterUrl && (
<li>
<a href={config.siteTwitterUrl}>
<i className="fa fa-twitter" />
</a>
</li>
)}
{config.siteGithubUrl && (
<li>
<a href={config.siteGithubUrl}>
<i className="fa fa-github-alt" />
</a>
</li>
)}
{config.siteVkUrl && (
<li>
<a href={config.siteVkUrl}><i className="fa fa-vk" /></a>
</li>
)}
</ul>
<ul>
{config.siteEmailUrl && (
<li>
<a href={`mailto:${config.siteEmailUrl}`}>
<i className="fa fa-envelope-o" />
</a>
</li>
)}
{config.siteTelegramUrl && (
<li>
<a href={config.siteTelegramUrl}>
<i className="fa fa-paper-plane" />
</a>
</li>
)}
</ul>
<ul>
{config.siteRssUrl && (
<li>
<a href={config.siteRssUrl}><i className="fa fa-rss" /></a>
</li>
)}
</ul>
</div>
)
render() {
return (
<div className="blog-links">
<ul>
{config.siteTwitterUrl && (
<li>
<a href={config.siteTwitterUrl}>
<i className="fa fa-twitter" />
</a>
</li>
)}
{config.siteGithubUrl && (
<li>
<a href={config.siteGithubUrl}>
<i className="fa fa-github-alt" />
</a>
</li>
)}
{config.siteVkUrl && (
<li>
<a href={config.siteVkUrl}><i className="fa fa-vk" /></a>
</li>
)}
</ul>
<ul>
{config.siteEmailUrl && (
<li>
<a href={`mailto:${config.siteEmailUrl}`}>
<i className="fa fa-envelope-o" />
</a>
</li>
)}
{config.siteTelegramUrl && (
<li>
<a href={config.siteTelegramUrl}>
<i className="fa fa-paper-plane" />
</a>
</li>
)}
</ul>
<ul>
{config.siteRssUrl && (
<li>
<a href={config.siteRssUrl}><i className="fa fa-rss" /></a>
</li>
)}
</ul>
</div>
);
}
}
export default SiteLinks
export default SiteLinks;

55
components/SiteNav/index.jsx
View File

@ -1,34 +1,29 @@
import React from 'react'
import { RouteHandler, Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'
import './style.css'
import React from 'react';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';
import './style.css';
class SiteNav extends React.Component {
render() {
const {location} = this.props
return (
<nav className='blog-nav'>
<ul>
<li>
<Link to={ prefixLink('/')} activeClassName="current" onlyActiveOnIndex> Articles
</Link>
</li>
<li>
<Link to={ prefixLink('/about/')} activeClassName="current"> About me
</Link>
</li>
<li>
<Link to={ prefixLink('/contact/')} activeClassName="current"> Contact me
</Link>
</li>
</ul>
</nav>
);
}
render() {
return (
<nav className="blog-nav">
<ul>
<li>
<Link to={prefixLink('/')} activeClassName="current" onlyActiveOnIndex> Articles
</Link>
</li>
<li>
<Link to={prefixLink('/about/')} activeClassName="current"> About me
</Link>
</li>
<li>
<Link to={prefixLink('/contact/')} activeClassName="current"> Contact me
</Link>
</li>
</ul>
</nav>
);
}
}
SiteNav.propTypes = {
location: React.PropTypes.object,
}
export default SiteNav
export default SiteNav;

51
components/SitePage/index.jsx
View File

@ -1,39 +1,34 @@
import React from 'react'
import moment from 'moment'
import { RouteHandler, Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'
import access from 'safe-access'
import { config } from 'config'
import SiteSidebar from '../SiteSidebar'
import React from 'react';
import SiteSidebar from '../SiteSidebar';
import './style.css';
class SitePage extends React.Component {
render() {
const {route} = this.props
const post = route.page.data
render() {
const { route } = this.props;
const post = route.page.data;
return (
<div>
<SiteSidebar {...this.props}/>
<div className='content'>
<div className='main'>
<div className='main-inner'>
<div className='blog-page'>
<div className='text'>
<h1>{ post.title }</h1>
<div dangerouslySetInnerHTML={ { __html: post.body} } />
</div>
</div>
</div>
return (
<div>
<SiteSidebar {...this.props} />
<div className="content">
<div className="main">
<div className="main-inner">
<div className="blog-page">
<div className="text">
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.body }} />
</div>
</div>
</div>
);
}
</div>
</div>
</div>
);
}
}
SitePage.propTypes = {
route: React.PropTypes.object.isRequired,
}
route: React.PropTypes.object.isRequired,
};
export default SitePage
export default SitePage;

87
components/SitePost/index.jsx
View File

@ -1,52 +1,51 @@
import React from 'react'
import moment from 'moment'
import { RouteHandler, Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'
import access from 'safe-access'
import { config } from 'config'
import ReadNext from '../ReadNext'
import './style.css'
import '../../static/css/highlight.css'
import React from 'react';
import moment from 'moment';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';
import { config } from 'config';
import ReadNext from '../ReadNext';
import './style.css';
import '../../static/css/highlight.css';
class SitePost extends React.Component {
render() {
const {route} = this.props
const post = route.page.data
const home = (
<div>
<Link className='gohome' to={ prefixLink('/') }> All Articles
</Link>
</div>
)
render() {
const { route } = this.props;
const post = route.page.data;
const home = (
<div>
<Link className="gohome" to={prefixLink('/')}>All Articles</Link>
</div>
);
return (
<div>
{ home }
<div className='blog-single'>
<div className='text'>
<h1>{ post.title }</h1>
<div dangerouslySetInnerHTML={ { __html: post.body} } />
<div className='date-published'>
<em>Published { moment(post.date).format('D MMM YYYY') }</em>
</div>
</div>
<div className='footer'>
<ReadNext post={ post } {...this.props}/>
<hr></hr>
<p>
{ config.siteDescr }
<a href={ config.siteTwitterUrl }>
<br></br> <strong>{ config.siteAuthor }</strong> on Twitter</a>
</p>
</div>
</div>
return (
<div>
{home}
<div className="blog-single">
<div className="text">
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.body }} />
<div className="date-published">
<em>Published {moment(post.date).format('D MMM YYYY')}</em>
</div>
);
}
</div>
<div className="footer">
<ReadNext post={post} {...this.props} />
<hr />
<p>
{config.siteDescr}
<a href={config.siteTwitterUrl}>
<br /> <strong>{config.siteAuthor}</strong> on Twitter
</a>
</p>
</div>
</div>
</div>
);
}
}
SitePost.propTypes = {
route: React.PropTypes.object.isRequired
}
route: React.PropTypes.object.isRequired,
};
export default SitePost
export default SitePost;

106
components/SiteSidebar/index.jsx
View File

@ -1,58 +1,64 @@
import React from 'react'
import { RouteHandler, Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'
import { config } from 'config'
import SiteNav from '../SiteNav'
import SiteLinks from '../SiteLinks'
import './style.css'
import profilePic from '../../pages/photo.jpg'
import React from 'react';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';
import { config } from 'config';
import SiteNav from '../SiteNav';
import SiteLinks from '../SiteLinks';
import './style.css';
import profilePic from '../../pages/photo.jpg';
class SiteSidebar extends React.Component {
render() {
const {location, children} = this.props
const isHome = location.pathname === prefixLink('/')
render() {
const { location } = this.props;
const isHome = location.pathname === prefixLink('/');
let header = (
<header>
<Link style={ { textDecoration: 'none', borderBottom: 'none', outline: 'none'} } to={ prefixLink('/') }>
<img src={profilePic} width='75' height='75' />
</Link>
{ isHome ? (
<h1><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ prefixLink('/') }> { config.siteAuthor } </Link></h1>
) :
<h2><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ prefixLink('/') }> { config.siteAuthor } </Link></h2> }
<p>
{ config.siteDescr }
</p>
</header>
)
/* eslint-disable jsx-a11y/img-redundant-alt*/
const header = (
<header>
<Link style={{ textDecoration: 'none', borderBottom: 'none', outline: 'none' }} to={prefixLink('/')}>
<img
src={profilePic}
width="75" height="75"
alt="Profile picture of the author"
/>
</Link>
{ isHome ? (
<h1><Link style={{ textDecoration: 'none', borderBottom: 'none', color: 'inherit' }} to={prefixLink('/')}> {config.siteAuthor}</Link></h1>
) :
<h2><Link style={{ textDecoration: 'none', borderBottom: 'none', color: 'inherit' }} to={prefixLink('/')}> {config.siteAuthor}</Link></h2> }
<p>
{config.siteDescr}
</p>
</header>
);
/* eslint-enable jsx-a11y/img-redundant-alt*/
return (
<div className='sidebar'>
<div className='sidebar-inner'>
<div className='blog-details'>
<header>
{ header }
</header>
</div>
<div className='blog-options'>
<SiteNav {...this.props}/>
<footer>
<SiteLinks {...this.props}/>
<p className='copyright'>
&copy; All rights reserved.
</p>
</footer>
</div>
</div>
</div>
);
}
return (
<div className="sidebar">
<div className="sidebar-inner">
<div className="blog-details">
<header>
{header}
</header>
</div>
<div className="blog-options">
<SiteNav {...this.props} />
<footer>
<SiteLinks {...this.props} />
<p className="copyright">
&copy; All rights reserved.
</p>
</footer>
</div>
</div>
</div>
);
}
}
SiteSidebar.propTypes = {
children: React.PropTypes.any,
location: React.PropTypes.object,
}
location: React.PropTypes.object,
};
export default SiteSidebar;
export default SiteSidebar

8
gatsby-browser.js
View File

@ -1,8 +1,8 @@
import ReactGA from 'react-ga'
import {config} from 'config'
import ReactGA from 'react-ga';
import { config } from 'config';
ReactGA.initialize(config.googleAnalyticsId);
exports.onRouteUpdate = (state, page, pages) => {
exports.onRouteUpdate = (state) => {
ReactGA.pageview(state.pathname);
};
};

38
gatsby-node.js
View File

@ -1,22 +1,22 @@
var rucksack = require('rucksack-css')
var lost = require("lost")
var cssnext = require("postcss-cssnext")
const rucksack = require('rucksack-css');
const lost = require('lost');
const cssnext = require('postcss-cssnext');
exports.modifyWebpackConfig = function(config, env) {
config.merge({
postcss: [
lost(),
rucksack(),
cssnext({
browsers: ['>1%', 'last 2 versions']
})
]
})
exports.modifyWebpackConfig = function (config) {
config.merge({
postcss: [
lost(),
rucksack(),
cssnext({
browsers: ['>1%', 'last 2 versions'],
}),
],
});
config.loader('svg', {
test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
})
config.loader('svg', {
test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader',
});
return config
};
return config;
};

69
html.js
View File

@ -1,38 +1,39 @@
import React from 'react'
import Helmet from 'react-helmet'
import { prefixLink } from 'gatsby-helpers'
import React from 'react';
import Helmet from 'react-helmet';
import { prefixLink } from 'gatsby-helpers';
const BUILD_TIME = new Date().getTime()
const BUILD_TIME = new Date().getTime();
module.exports = React.createClass({
displayName: 'HTML',
propTypes: {
body: React.PropTypes.string,
},
render() {
const {body, route} = this.props
const {title} = Helmet.rewind()
const font = <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,700&subset=latin,cyrillic' rel='stylesheet' type='text/css' />
let css
if (process.env.NODE_ENV === 'production') {
css = <style dangerouslySetInnerHTML={ { __html: require('!raw!./public/styles.css')} } />
}
displayName: 'HTML',
propTypes: {
body: React.PropTypes.string,
},
render() {
const { body } = this.props;
const { title } = Helmet.rewind();
const font = <link href="https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,700&subset=latin,cyrillic" rel="stylesheet" type="text/css" />;
let css;
if (process.env.NODE_ENV === 'production') {
// eslint-disable-next-line import/no-webpack-loader-syntax
css = <style dangerouslySetInnerHTML={{ __html: require('!raw!./public/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=5.0" />
{ title.toComponent() }
{ font }
{ css }
</head>
<body>
<div id="react-mount" dangerouslySetInnerHTML={ { __html: this.props.body} } />
<script src={ prefixLink(`/bundle.js?t=${BUILD_TIME}`) } />
</body>
</html>
)
},
})
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=5.0" />
{ title.toComponent() }
{ font }
{ css }
</head>
<body>
<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
<script src={prefixLink(`/bundle.js?t=${BUILD_TIME}`)} />
</body>
</html>
);
},
});

2
package.json
View File

@ -10,7 +10,7 @@
"clean": "npm run clean:public",
"copy:files": "find ./pages -maxdepth 1 -type f -regextype posix-extended -regex '.+\\.(pdf|txt|png|jpg|jpeg|gif)$' -exec cp -v {} ./public ';'",
"copy": "npm run copy:files",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
"lint": "./node_modules/.bin/eslint --cache --ext .js,.jsx --ignore-pattern public .",
"test": "echo \"Error: no test specified\" && exit 1",
"deploy": "gatsby build --prefix-links && gh-pages -d public"
},

35
pages/_template.jsx
View File

@ -1,28 +1,23 @@
import React from 'react'
import { Link } from 'react-router'
import { prefixLink } from 'gatsby-helpers'
import { config } from 'config'
import React from 'react';
import '../static/css/reset.css'
import '../static/css/typography.css'
import '../static/css/base.css'
import '../static/css/reset.css';
import '../static/css/typography.css';
import '../static/css/base.css';
class Template extends React.Component {
render() {
const {location, children} = this.props
render() {
const { children } = this.props;
return (
<div className='wrapper'>
{ children }
</div>
);
}
return (
<div className="wrapper">
{children}
</div>
);
}
}
Template.propTypes = {
children: React.PropTypes.any,
location: React.PropTypes.object,
route: React.PropTypes.object,
}
children: React.PropTypes.any,
};
export default Template
export default Template;

1
pages/articles/2015-05-06-my-second-post/index.md
View File

@ -3,6 +3,7 @@ title: My Second Post!
date: "2015-05-06T23:46:37.121Z"
layout: post
path: "/my-second-post/"
readNext: "/hi-folks/"
category: "FrontEnd"
description: "Civil society; save lives pathway to a better life public-private partnerships solution, tackle, protect UNHCR social movement Jane Addams sustainable campaign respond equality."
---

101
pages/index.jsx
View File

@ -1,61 +1,58 @@
import React from 'react'
import { Link } from 'react-router'
import sortBy from 'lodash/sortBy'
import moment from 'moment'
import Helmet from 'react-helmet'
import { prefixLink } from 'gatsby-helpers'
import access from 'safe-access'
import { config } from 'config'
import SitePost from '../components/SitePost'
import SiteSidebar from '../components/SiteSidebar'
import React from 'react';
import { Link } from 'react-router';
import sortBy from 'lodash/sortBy';
import moment from 'moment';
import Helmet from 'react-helmet';
import { prefixLink } from 'gatsby-helpers';
import access from 'safe-access';
import { config } from 'config';
import SiteSidebar from '../components/SiteSidebar';
class SiteIndex extends React.Component {
render() {
const pageLinks = []
// Sort pages.
const sortedPages = sortBy(this.props.route.pages, (page) => access(page, 'data.date')
).reverse()
sortedPages.forEach((page) => {
if (access(page, 'file.ext') === 'md' && access(page, 'data.layout') === 'post') {
const title = access(page, 'data.title') || page.path
const description = access(page, 'data.description')
const datePublished = access(page, 'data.date')
const category = access(page, 'data.category')
render() {
const pageLinks = [];
// Sort pages.
const sortedPages = sortBy(this.props.route.pages, page => access(page, 'data.date')).reverse();
sortedPages.forEach((page) => {
if (access(page, 'file.ext') === 'md' && access(page, 'data.layout') === 'post') {
const title = access(page, 'data.title') || page.path;
const description = access(page, 'data.description');
const datePublished = access(page, 'data.date');
const category = access(page, 'data.category');
pageLinks.push(
<div className='blog-post' key={ title }>
<time dateTime={ moment(datePublished).format('MMMM D, YYYY') }>
{ moment(datePublished).format('MMMM YYYY') }
</time>
<span style={ { padding: '5px'} }></span>
<span className='blog-category'>{ category }</span>
<h2><Link style={ { borderBottom: 'none',} } to={ prefixLink(page.path) } > { title } </Link></h2>
<p dangerouslySetInnerHTML={ { __html: description} } />
<Link className='readmore' to={ prefixLink(page.path) }> Read
</Link>
</div>
)
}
})
pageLinks.push((
<div className="blog-post" key={title}>
<time dateTime={moment(datePublished).format('MMMM D, YYYY')}>
{moment(datePublished).format('MMMM YYYY')}
</time>
<span style={{ padding: '5px' }} />
<span className="blog-category">{category}</span>
<h2><Link style={{ borderBottom: 'none' }} to={prefixLink(page.path)}>{title}</Link></h2>
<p dangerouslySetInnerHTML={{ __html: description }} />
<Link className="readmore" to={prefixLink(page.path)}>Read</Link>
</div>
));
}
});
return (
<div>
<Helmet title={ config.siteTitle }/>
<SiteSidebar {...this.props}/>
<div className='content'>
<div className='main'>
<div className='main-inner'>
{ pageLinks }
</div>
</div>
</div>
return (
<div>
<Helmet title={config.siteTitle} />
<SiteSidebar {...this.props} />
<div className="content">
<div className="main">
<div className="main-inner">
{pageLinks}
</div>
)
}
</div>
</div>
</div>
);
}
}
SiteIndex.propTypes = {
route: React.PropTypes.object,
}
route: React.PropTypes.object,
};
export default SiteIndex
export default SiteIndex;

52
wrappers/md.jsx
View File

@ -1,34 +1,34 @@
import React from 'react'
import Helmet from 'react-helmet'
import SitePost from '../components/SitePost'
import SitePage from '../components/SitePage'
import { config } from 'config'
import React from 'react';
import Helmet from 'react-helmet';
import { config } from 'config';
import SitePost from '../components/SitePost';
import SitePage from '../components/SitePage';
class MarkdownWrapper extends React.Component {
render() {
const {route} = this.props
const post = route.page.data
let layout, template
render() {
const { route } = this.props;
const post = route.page.data;
const layout = post.layout;
let template;
layout = post.layout
if (layout != 'page') {
template = <SitePost {...this.props}/>
} else {
template = <SitePage {...this.props}/>
}
return (
<div>
<Helmet title={ `${post.title} - ${config.siteTitle}` }/>
{ template }
</div>
);
if (layout !== 'page') {
template = <SitePost {...this.props} />;
} else {
template = <SitePage {...this.props} />;
}
return (
<div>
<Helmet title={`${post.title} - ${config.siteTitle}`} />
{template}
</div>
);
}
}
MarkdownWrapper.propTypes = {
route: React.PropTypes.object,
}
route: React.PropTypes.object,
};
export default MarkdownWrapper
export default MarkdownWrapper;