New version

This commit is contained in:
wpioneer
2018-01-21 03:03:59 +03:00
parent 4bab6c4260
commit 35d5d7c244
21 changed files with 54 additions and 333 deletions

View File

@@ -1,16 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import Post from '../Post';
class CategoryTemplateDetails extends React.Component {
render() {
const items = [];
const category = this.props.pathContext.category;
const { category } = this.props.pathContext;
const posts = this.props.data.allMarkdownRemark.edges;
posts.forEach((post) => {
items.push(
<Post data={post} key={post.node.fields.slug} />
);
items.push(<Post data={post} key={post.node.fields.slug} />);
});
return (
@@ -30,15 +27,4 @@ class CategoryTemplateDetails extends React.Component {
}
}
CategoryTemplateDetails.propTypes = {
data: PropTypes.shape({
allMarkdownRemark: PropTypes.shape({
edges: PropTypes.array.isRequired
})
}),
pathContext: PropTypes.shape({
category: PropTypes.string.isRequired
})
};
export default CategoryTemplateDetails;

View File

@@ -1,14 +1,11 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDisqusComments from 'react-disqus-comments';
import config from '../../../gatsby-config';
class Disqus extends Component {
constructor(props) {
super(props);
this.state = {
toasts: []
};
this.state = { toasts: [] };
this.notifyAboutComment = this.notifyAboutComment.bind(this);
this.onSnackbarDismiss = this.onSnackbarDismiss.bind(this);
}
@@ -42,8 +39,4 @@ class Disqus extends Component {
}
}
Disqus.propTypes = {
postNode: PropTypes.object.isRequired
};
export default Disqus;

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import './style.scss';
import '../../assets/fonts/fontello-771c82e0/css/fontello.css';
@@ -19,17 +18,17 @@ class Links extends React.Component {
<div className="links">
<ul className="links__list">
<li className="links__list-item">
<a href={ `https://www.twitter.com/${links.twitter}` } target="_blank" >
<a href={`https://www.twitter.com/${links.twitter}`} target="_blank" >
<i className="icon-twitter" />
</a>
</li>
<li className="links__list-item">
<a href={ `https://www.github.com/${links.github}` } target="_blank" >
<a href={`https://www.github.com/${links.github}`} target="_blank" >
<i className="icon-github" />
</a>
</li>
<li className="links__list-item">
<a href={ `https://www.vk.com/${links.vk}`} target="_blank" >
<a href={`https://www.vk.com/${links.vk}`} target="_blank" >
<i className="icon-vkontakte" />
</a>
</li>
@@ -58,8 +57,4 @@ class Links extends React.Component {
}
}
Links.propTypes = {
data: PropTypes.object.isRequired
};
export default Links;

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';
import './style.scss';
@@ -9,17 +8,18 @@ class Menu extends React.Component {
const menuBlock = (
<ul className="menu__list">
{menu.map(item =>
{menu.map(item => (
<li className="menu__list-item" key={item.path}>
<Link
exact to={item.path}
exact
to={item.path}
className="menu__list-item-link"
activeClassName="menu__list-item-link menu__list-item-link--active"
>
{item.label}
</Link>
</li>
)}
))}
</ul>
);
@@ -31,8 +31,4 @@ class Menu extends React.Component {
}
}
Menu.propTypes = {
data: PropTypes.array.isRequired
};
export default Menu;

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Sidebar from '../Sidebar';
import './style.scss';
@@ -23,10 +22,4 @@ class PageTemplateDetails extends React.Component {
}
}
PageTemplateDetails.propTypes = {
data: PropTypes.shape({
markdownRemark: PropTypes.object.isRequired
})
};
export default PageTemplateDetails;

View File

@@ -1,46 +1,34 @@
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';
import moment from 'moment';
import './style.scss';
class Post extends React.Component {
render() {
const data = this.props.data;
const post = {
title: data.node.frontmatter.title,
slug: data.node.fields.slug,
description: data.node.frontmatter.description,
date: data.node.frontmatter.date,
category: data.node.frontmatter.category,
categorySlug: data.node.fields.categorySlug
};
const { title, date, category, description } = this.props.data.node.frontmatter;
const { slug, categorySlug } = this.props.data.node.fields;
return (
<div className="post">
<div className="post__meta">
<time className="post__meta-time" dateTime={moment(post.date).format('MMMM D, YYYY')}>
{moment(post.date).format('MMMM YYYY')}
<time className="post__meta-time" dateTime={moment(date).format('MMMM D, YYYY')}>
{moment(date).format('MMMM YYYY')}
</time>
<span className="post__meta-divider" />
<span className="post__meta-category" key={post.categorySlug}>
<Link to={post.categorySlug} className="post__meta-category-link">
{post.category}
<span className="post__meta-category" key={categorySlug}>
<Link to={categorySlug} className="post__meta-category-link">
{category}
</Link>
</span>
</div>
<h2 className="post__title">
<Link className="post__title-link" to={post.slug}>{post.title}</Link>
<Link className="post__title-link" to={slug}>{title}</Link>
</h2>
<p className="post__description">{post.description}</p>
<Link className="post__readmore" to={post.slug}>Read</Link>
<p className="post__description">{description}</p>
<Link className="post__readmore" to={slug}>Read</Link>
</div>
);
}
}
Post.propTypes = {
data: PropTypes.object.isRequired
};
export default Post;

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';
import moment from 'moment';
import Disqus from '../Disqus/Disqus';
@@ -20,13 +19,13 @@ class PostTemplateDetails extends React.Component {
const tagsBlock = (
<div className="post-single__tags">
<ul className="post-single__tags-list">
{tags && tags.map((tag, i) =>
{tags && tags.map((tag, i) => (
<li className="post-single__tags-list-item" key={tag}>
<Link to={tag} className="post-single__tags-list-item-link">
{post.frontmatter.tags[i]}
</Link>
</li>
)}
))}
</ul>
</div>
);
@@ -65,16 +64,4 @@ class PostTemplateDetails extends React.Component {
}
}
PostTemplateDetails.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
subtitle: PropTypes.string.isRequired,
author: PropTypes.object.isRequired
})
}),
markdownRemark: PropTypes.object.isRequired
})
};
export default PostTemplateDetails;

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import get from 'lodash/get';
import Link from 'gatsby-link';
import Menu from '../Menu';
@@ -13,14 +12,15 @@ class Sidebar extends React.Component {
const { author, subtitle, copyright, menu } = this.props.data.site.siteMetadata;
const isHomePage = get(location, 'pathname', '/') === '/';
/* eslint-disable jsx-a11y/img-redundant-alt*/
/* eslint-disable jsx-a11y/img-redundant-alt */
const authorBlock = (
<div>
<Link to="/">
<img
src={profilePic}
className="sidebar__author-photo"
width="75" height="75"
width="75"
height="75"
alt={author.name}
/>
</Link>
@@ -36,7 +36,7 @@ class Sidebar extends React.Component {
<p className="sidebar__author-subtitle">{subtitle}</p>
</div>
);
/* eslint-enable jsx-a11y/img-redundant-alt*/
/* eslint-enable jsx-a11y/img-redundant-alt */
return (
<div className="sidebar">
@@ -57,18 +57,4 @@ class Sidebar extends React.Component {
}
}
Sidebar.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
subtitle: PropTypes.string.isRequired,
author: PropTypes.object.isRequired,
copyright: PropTypes.string.isRequired,
menu: PropTypes.array.isRequired
})
})
}),
location: PropTypes.object
};
export default Sidebar;

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Post from '../Post';
class TagTemplateDetails extends React.Component {
@@ -8,9 +7,7 @@ class TagTemplateDetails extends React.Component {
const tagTitle = this.props.pathContext.tag;
const posts = this.props.data.allMarkdownRemark.edges;
posts.forEach((post) => {
items.push(
<Post data={post} key={post.node.fields.slug} />
);
items.push(<Post data={post} key={post.node.fields.slug} />);
});
return (
@@ -30,15 +27,4 @@ class TagTemplateDetails extends React.Component {
}
}
TagTemplateDetails.propTypes = {
data: PropTypes.shape({
allMarkdownRemark: PropTypes.shape({
edges: PropTypes.array.isRequired
})
}),
pathContext: PropTypes.shape({
tag: PropTypes.string.isRequired
})
};
export default TagTemplateDetails;

View File

@@ -1,57 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
class HTML extends React.Component {
render() {
const { postBodyComponents, headComponents, body } = this.props;
let styles;
if (process.env.NODE_ENV === 'production') {
try {
// eslint-disable-next-line import/no-webpack-loader-syntax
styles = require('!raw-loader!../public/styles.css');
} catch (e) {
console.log(e);
}
}
let css;
if (process.env.NODE_ENV === 'production') {
css = (
<style
id="gatsby-inlined-css"
dangerouslySetInnerHTML={{ __html: styles }}
/>
);
}
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"
/>
{headComponents}
{css}
</head>
<body>
<div
id="___gatsby"
dangerouslySetInnerHTML={{ __html: body }}
/>
{postBodyComponents}
</body>
</html>
);
}
}
HTML.propTypes = {
postBodyComponents: PropTypes.node.isRequired,
headComponents: PropTypes.node.isRequired,
body: PropTypes.node.isRequired
};
export default HTML;

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import 'typeface-roboto';
import '../assets/scss/init.scss';
@@ -17,8 +16,4 @@ class Layout extends React.Component {
}
}
Layout.propTypes = {
children: PropTypes.func
};
export default Layout;

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';
import Helmet from 'react-helmet';
import kebabCase from 'lodash/kebabCase';
@@ -21,13 +20,13 @@ class CategoriesRoute extends React.Component {
<div className="page__body">
<div className="categories">
<ul className="categories__list">
{categories.map(category =>
{categories.map(category => (
<li key={category.fieldValue} className="categories__list-item">
<Link to={`/categories/${kebabCase(category.fieldValue)}/`} className="categories__list-item-link">
{category.fieldValue} ({category.totalCount})
</Link>
</li>
)}
))}
</ul>
</div>
</div>
@@ -39,19 +38,6 @@ class CategoriesRoute extends React.Component {
}
}
CategoriesRoute.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
title: PropTypes.string.isRequired
})
}),
allMarkdownRemark: PropTypes.shape({
group: PropTypes.array.isRequired
})
})
};
export default CategoriesRoute;
export const pageQuery = graphql`

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import Post from '../components/Post';
import Sidebar from '../components/Sidebar';
@@ -10,9 +9,7 @@ class IndexRoute extends React.Component {
const { title, subtitle } = this.props.data.site.siteMetadata;
const posts = this.props.data.allMarkdownRemark.edges;
posts.forEach((post) => {
items.push(
<Post data={post} key={post.node.fields.slug} />
);
items.push(<Post data={post} key={post.node.fields.slug} />);
});
return (
@@ -32,20 +29,6 @@ class IndexRoute extends React.Component {
}
}
IndexRoute.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
title: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired
})
}),
allMarkdownRemark: PropTypes.shape({
edges: PropTypes.array.isRequired
})
})
};
export default IndexRoute;
export const pageQuery = graphql`

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 721 KiB

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Link from 'gatsby-link';
import Helmet from 'react-helmet';
import kebabCase from 'lodash/kebabCase';
@@ -21,13 +20,13 @@ class TagsRoute extends React.Component {
<div className="page__body">
<div className="tags">
<ul className="tags__list">
{tags.map(tag =>
{tags.map(tag => (
<li key={tag.fieldValue} className="tags__list-item">
<Link to={`/tags/${kebabCase(tag.fieldValue)}/`} className="tags__list-item-link">
{tag.fieldValue} ({tag.totalCount})
</Link>
</li>
)}
))}
</ul>
</div>
</div>
@@ -39,19 +38,6 @@ class TagsRoute extends React.Component {
}
}
TagsRoute.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
title: PropTypes.string.isRequired
})
}),
allMarkdownRemark: PropTypes.shape({
group: PropTypes.array.isRequired
})
})
};
export default TagsRoute;
export const pageQuery = graphql`

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import Sidebar from '../components/Sidebar';
import CategoryTemplateDetails from '../components/CategoryTemplateDetails';
@@ -19,19 +18,6 @@ class CategoryTemplate extends React.Component {
}
}
CategoryTemplate.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
title: PropTypes.string.isRequired
})
})
}),
pathContext: PropTypes.shape({
category: PropTypes.string.isRequired
})
};
export default CategoryTemplate;
export const pageQuery = graphql`

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import PageTemplateDetails from '../components/PageTemplateDetails';
@@ -7,18 +6,13 @@ class PageTemplate extends React.Component {
render() {
const { title, subtitle } = this.props.data.site.siteMetadata;
const page = this.props.data.markdownRemark;
let description;
if (page.frontmatter.description !== null) {
description = page.frontmatter.description;
} else {
description = subtitle;
}
const { title: pageTitle, description: pageDescription } = page.frontmatter;
const description = pageDescription !== null ? pageDescription : subtitle;
return (
<div>
<Helmet>
<title>{`${page.frontmatter.title} - ${title}`}</title>
<title>{`${pageTitle} - ${title}`}</title>
<meta name="description" content={description} />
</Helmet>
<PageTemplateDetails {...this.props} />
@@ -27,18 +21,6 @@ class PageTemplate extends React.Component {
}
}
PageTemplate.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
title: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired
})
}),
markdownRemark: PropTypes.object.isRequired
})
};
export default PageTemplate;
export const pageQuery = graphql`

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import PostTemplateDetails from '../components/PostTemplateDetails';
@@ -7,18 +6,13 @@ class PostTemplate extends React.Component {
render() {
const { title, subtitle } = this.props.data.site.siteMetadata;
const post = this.props.data.markdownRemark;
let description;
if (post.frontmatter.description !== null) {
description = post.frontmatter.description;
} else {
description = subtitle;
}
const { title: postTitle, description: postDescription } = post.frontmatter;
const description = postDescription !== null ? postDescription : subtitle;
return (
<div>
<Helmet>
<title>{`${post.frontmatter.title} - ${title}`}</title>
<title>{`${postTitle} - ${title}`}</title>
<meta name="description" content={description} />
</Helmet>
<PostTemplateDetails {...this.props} />
@@ -27,18 +21,6 @@ class PostTemplate extends React.Component {
}
}
PostTemplate.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
title: PropTypes.string.isRequired,
subtitle: PropTypes.string.isRequired
})
}),
markdownRemark: PropTypes.object.isRequired
})
};
export default PostTemplate;
export const pageQuery = graphql`

View File

@@ -1,5 +1,4 @@
import React from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import Sidebar from '../components/Sidebar';
import TagTemplateDetails from '../components/TagTemplateDetails';
@@ -19,19 +18,6 @@ class TagTemplate extends React.Component {
}
}
TagTemplate.propTypes = {
data: PropTypes.shape({
site: PropTypes.shape({
siteMetadata: PropTypes.shape({
title: PropTypes.string.isRequired
})
})
}),
pathContext: PropTypes.shape({
tag: PropTypes.string.isRequired
})
};
export default TagTemplate;
export const pageQuery = graphql`