mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-08-07 09:58:01 +02:00
New version
This commit is contained in:
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
Reference in New Issue
Block a user