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;