mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2024-12-26 14:59:14 +01:00
New version
This commit is contained in:
parent
4bab6c4260
commit
35d5d7c244
@ -1,6 +1,6 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
siteMetadata: {
|
siteMetadata: {
|
||||||
url: 'https://alxshelepenok.github.com/gatsby-starter-lumen',
|
url: 'https://lumen.netlify.com/',
|
||||||
title: 'Blog by John Doe',
|
title: 'Blog by John Doe',
|
||||||
subtitle: 'Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.',
|
subtitle: 'Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.',
|
||||||
copyright: '© All rights reserved.',
|
copyright: '© All rights reserved.',
|
||||||
@ -61,8 +61,7 @@ module.exports = {
|
|||||||
url: site.siteMetadata.url + edge.node.fields.slug,
|
url: site.siteMetadata.url + edge.node.fields.slug,
|
||||||
guid: site.siteMetadata.url + edge.node.fields.slug,
|
guid: site.siteMetadata.url + edge.node.fields.slug,
|
||||||
custom_elements: [{ 'content:encoded': edge.node.html }]
|
custom_elements: [{ 'content:encoded': edge.node.html }]
|
||||||
})
|
}))
|
||||||
)
|
|
||||||
),
|
),
|
||||||
query: `
|
query: `
|
||||||
{
|
{
|
||||||
@ -101,15 +100,12 @@ module.exports = {
|
|||||||
{
|
{
|
||||||
resolve: 'gatsby-remark-images',
|
resolve: 'gatsby-remark-images',
|
||||||
options: {
|
options: {
|
||||||
maxWidth: 960,
|
maxWidth: 960
|
||||||
linkImagesToOriginal: false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
resolve: 'gatsby-remark-responsive-iframe',
|
resolve: 'gatsby-remark-responsive-iframe',
|
||||||
options: {
|
options: { wrapperStyle: 'margin-bottom: 1.0725rem' }
|
||||||
wrapperStyle: 'margin-bottom: 1.0725rem'
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
'gatsby-remark-prismjs',
|
'gatsby-remark-prismjs',
|
||||||
'gatsby-remark-copy-linked-files',
|
'gatsby-remark-copy-linked-files',
|
||||||
@ -121,9 +117,7 @@ module.exports = {
|
|||||||
'gatsby-plugin-sharp',
|
'gatsby-plugin-sharp',
|
||||||
{
|
{
|
||||||
resolve: 'gatsby-plugin-google-analytics',
|
resolve: 'gatsby-plugin-google-analytics',
|
||||||
options: {
|
options: { trackingId: '' }
|
||||||
trackingId: ''
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
resolve: 'gatsby-plugin-sitemap',
|
resolve: 'gatsby-plugin-sitemap',
|
||||||
|
@ -9,13 +9,12 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
|
|||||||
const { createPage } = boundActionCreators;
|
const { createPage } = boundActionCreators;
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const postTemplate = path.resolve('./src/templates/post-template.js');
|
const postTemplate = path.resolve('./src/templates/post-template.jsx');
|
||||||
const pageTemplate = path.resolve('./src/templates/page-template.js');
|
const pageTemplate = path.resolve('./src/templates/page-template.jsx');
|
||||||
const tagTemplate = path.resolve('./src/templates/tag-template.js');
|
const tagTemplate = path.resolve('./src/templates/tag-template.jsx');
|
||||||
const categoryTemplate = path.resolve('./src/templates/category-template.js');
|
const categoryTemplate = path.resolve('./src/templates/category-template.jsx');
|
||||||
|
|
||||||
graphql(
|
graphql(`
|
||||||
`
|
|
||||||
{
|
{
|
||||||
allMarkdownRemark(
|
allMarkdownRemark(
|
||||||
limit: 1000,
|
limit: 1000,
|
||||||
@ -35,8 +34,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`).then((result) => {
|
||||||
).then((result) => {
|
|
||||||
if (result.errors) {
|
if (result.errors) {
|
||||||
console.log(result.errors);
|
console.log(result.errors);
|
||||||
reject(result.errors);
|
reject(result.errors);
|
||||||
@ -47,17 +45,13 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
|
|||||||
createPage({
|
createPage({
|
||||||
path: edge.node.fields.slug,
|
path: edge.node.fields.slug,
|
||||||
component: slash(pageTemplate),
|
component: slash(pageTemplate),
|
||||||
context: {
|
context: { slug: edge.node.fields.slug }
|
||||||
slug: edge.node.fields.slug
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
} else if (_.get(edge, 'node.frontmatter.layout') === 'post') {
|
} else if (_.get(edge, 'node.frontmatter.layout') === 'post') {
|
||||||
createPage({
|
createPage({
|
||||||
path: edge.node.fields.slug,
|
path: edge.node.fields.slug,
|
||||||
component: slash(postTemplate),
|
component: slash(postTemplate),
|
||||||
context: {
|
context: { slug: edge.node.fields.slug }
|
||||||
slug: edge.node.fields.slug
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
let tags = [];
|
let tags = [];
|
||||||
@ -71,9 +65,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
|
|||||||
createPage({
|
createPage({
|
||||||
path: tagPath,
|
path: tagPath,
|
||||||
component: tagTemplate,
|
component: tagTemplate,
|
||||||
context: {
|
context: { tag }
|
||||||
tag
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -88,9 +80,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
|
|||||||
createPage({
|
createPage({
|
||||||
path: categoryPath,
|
path: categoryPath,
|
||||||
component: categoryTemplate,
|
component: categoryTemplate,
|
||||||
context: {
|
context: { category }
|
||||||
category
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -124,9 +114,7 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (node.frontmatter.tags) {
|
if (node.frontmatter.tags) {
|
||||||
const tagSlugs = node.frontmatter.tags.map(
|
const tagSlugs = node.frontmatter.tags.map(tag => `/tags/${_.kebabCase(tag)}/`);
|
||||||
tag => `/tags/${_.kebabCase(tag)}/`
|
|
||||||
);
|
|
||||||
createNodeField({ node, name: 'tagSlugs', value: tagSlugs });
|
createNodeField({ node, name: 'tagSlugs', value: tagSlugs });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,16 +1,13 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Post from '../Post';
|
import Post from '../Post';
|
||||||
|
|
||||||
class CategoryTemplateDetails extends React.Component {
|
class CategoryTemplateDetails extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const items = [];
|
const items = [];
|
||||||
const category = this.props.pathContext.category;
|
const { category } = this.props.pathContext;
|
||||||
const posts = this.props.data.allMarkdownRemark.edges;
|
const posts = this.props.data.allMarkdownRemark.edges;
|
||||||
posts.forEach((post) => {
|
posts.forEach((post) => {
|
||||||
items.push(
|
items.push(<Post data={post} key={post.node.fields.slug} />);
|
||||||
<Post data={post} key={post.node.fields.slug} />
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
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;
|
export default CategoryTemplateDetails;
|
||||||
|
@ -1,14 +1,11 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import ReactDisqusComments from 'react-disqus-comments';
|
import ReactDisqusComments from 'react-disqus-comments';
|
||||||
import config from '../../../gatsby-config';
|
import config from '../../../gatsby-config';
|
||||||
|
|
||||||
class Disqus extends Component {
|
class Disqus extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = { toasts: [] };
|
||||||
toasts: []
|
|
||||||
};
|
|
||||||
this.notifyAboutComment = this.notifyAboutComment.bind(this);
|
this.notifyAboutComment = this.notifyAboutComment.bind(this);
|
||||||
this.onSnackbarDismiss = this.onSnackbarDismiss.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;
|
export default Disqus;
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
import '../../assets/fonts/fontello-771c82e0/css/fontello.css';
|
import '../../assets/fonts/fontello-771c82e0/css/fontello.css';
|
||||||
|
|
||||||
@ -19,17 +18,17 @@ class Links extends React.Component {
|
|||||||
<div className="links">
|
<div className="links">
|
||||||
<ul className="links__list">
|
<ul className="links__list">
|
||||||
<li className="links__list-item">
|
<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" />
|
<i className="icon-twitter" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="links__list-item">
|
<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" />
|
<i className="icon-github" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li className="links__list-item">
|
<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" />
|
<i className="icon-vkontakte" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@ -58,8 +57,4 @@ class Links extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Links.propTypes = {
|
|
||||||
data: PropTypes.object.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Links;
|
export default Links;
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Link from 'gatsby-link';
|
import Link from 'gatsby-link';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
|
||||||
@ -9,17 +8,18 @@ class Menu extends React.Component {
|
|||||||
|
|
||||||
const menuBlock = (
|
const menuBlock = (
|
||||||
<ul className="menu__list">
|
<ul className="menu__list">
|
||||||
{menu.map(item =>
|
{menu.map(item => (
|
||||||
<li className="menu__list-item" key={item.path}>
|
<li className="menu__list-item" key={item.path}>
|
||||||
<Link
|
<Link
|
||||||
exact to={item.path}
|
exact
|
||||||
|
to={item.path}
|
||||||
className="menu__list-item-link"
|
className="menu__list-item-link"
|
||||||
activeClassName="menu__list-item-link menu__list-item-link--active"
|
activeClassName="menu__list-item-link menu__list-item-link--active"
|
||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
)}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -31,8 +31,4 @@ class Menu extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Menu.propTypes = {
|
|
||||||
data: PropTypes.array.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Menu;
|
export default Menu;
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Sidebar from '../Sidebar';
|
import Sidebar from '../Sidebar';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
|
||||||
@ -23,10 +22,4 @@ class PageTemplateDetails extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
PageTemplateDetails.propTypes = {
|
|
||||||
data: PropTypes.shape({
|
|
||||||
markdownRemark: PropTypes.object.isRequired
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PageTemplateDetails;
|
export default PageTemplateDetails;
|
||||||
|
@ -1,46 +1,34 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Link from 'gatsby-link';
|
import Link from 'gatsby-link';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import './style.scss';
|
import './style.scss';
|
||||||
|
|
||||||
class Post extends React.Component {
|
class Post extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const data = this.props.data;
|
const { title, date, category, description } = this.props.data.node.frontmatter;
|
||||||
const post = {
|
const { slug, categorySlug } = this.props.data.node.fields;
|
||||||
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
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="post">
|
<div className="post">
|
||||||
<div className="post__meta">
|
<div className="post__meta">
|
||||||
<time className="post__meta-time" dateTime={moment(post.date).format('MMMM D, YYYY')}>
|
<time className="post__meta-time" dateTime={moment(date).format('MMMM D, YYYY')}>
|
||||||
{moment(post.date).format('MMMM YYYY')}
|
{moment(date).format('MMMM YYYY')}
|
||||||
</time>
|
</time>
|
||||||
<span className="post__meta-divider" />
|
<span className="post__meta-divider" />
|
||||||
<span className="post__meta-category" key={post.categorySlug}>
|
<span className="post__meta-category" key={categorySlug}>
|
||||||
<Link to={post.categorySlug} className="post__meta-category-link">
|
<Link to={categorySlug} className="post__meta-category-link">
|
||||||
{post.category}
|
{category}
|
||||||
</Link>
|
</Link>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="post__title">
|
<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>
|
</h2>
|
||||||
<p className="post__description">{post.description}</p>
|
<p className="post__description">{description}</p>
|
||||||
<Link className="post__readmore" to={post.slug}>Read</Link>
|
<Link className="post__readmore" to={slug}>Read</Link>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Post.propTypes = {
|
|
||||||
data: PropTypes.object.isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Post;
|
export default Post;
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Link from 'gatsby-link';
|
import Link from 'gatsby-link';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import Disqus from '../Disqus/Disqus';
|
import Disqus from '../Disqus/Disqus';
|
||||||
@ -20,13 +19,13 @@ class PostTemplateDetails extends React.Component {
|
|||||||
const tagsBlock = (
|
const tagsBlock = (
|
||||||
<div className="post-single__tags">
|
<div className="post-single__tags">
|
||||||
<ul className="post-single__tags-list">
|
<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}>
|
<li className="post-single__tags-list-item" key={tag}>
|
||||||
<Link to={tag} className="post-single__tags-list-item-link">
|
<Link to={tag} className="post-single__tags-list-item-link">
|
||||||
{post.frontmatter.tags[i]}
|
{post.frontmatter.tags[i]}
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
)}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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;
|
export default PostTemplateDetails;
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import get from 'lodash/get';
|
import get from 'lodash/get';
|
||||||
import Link from 'gatsby-link';
|
import Link from 'gatsby-link';
|
||||||
import Menu from '../Menu';
|
import Menu from '../Menu';
|
||||||
@ -13,14 +12,15 @@ class Sidebar extends React.Component {
|
|||||||
const { author, subtitle, copyright, menu } = this.props.data.site.siteMetadata;
|
const { author, subtitle, copyright, menu } = this.props.data.site.siteMetadata;
|
||||||
const isHomePage = get(location, 'pathname', '/') === '/';
|
const isHomePage = get(location, 'pathname', '/') === '/';
|
||||||
|
|
||||||
/* eslint-disable jsx-a11y/img-redundant-alt*/
|
/* eslint-disable jsx-a11y/img-redundant-alt */
|
||||||
const authorBlock = (
|
const authorBlock = (
|
||||||
<div>
|
<div>
|
||||||
<Link to="/">
|
<Link to="/">
|
||||||
<img
|
<img
|
||||||
src={profilePic}
|
src={profilePic}
|
||||||
className="sidebar__author-photo"
|
className="sidebar__author-photo"
|
||||||
width="75" height="75"
|
width="75"
|
||||||
|
height="75"
|
||||||
alt={author.name}
|
alt={author.name}
|
||||||
/>
|
/>
|
||||||
</Link>
|
</Link>
|
||||||
@ -36,7 +36,7 @@ class Sidebar extends React.Component {
|
|||||||
<p className="sidebar__author-subtitle">{subtitle}</p>
|
<p className="sidebar__author-subtitle">{subtitle}</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
/* eslint-enable jsx-a11y/img-redundant-alt*/
|
/* eslint-enable jsx-a11y/img-redundant-alt */
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="sidebar">
|
<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;
|
export default Sidebar;
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Post from '../Post';
|
import Post from '../Post';
|
||||||
|
|
||||||
class TagTemplateDetails extends React.Component {
|
class TagTemplateDetails extends React.Component {
|
||||||
@ -8,9 +7,7 @@ class TagTemplateDetails extends React.Component {
|
|||||||
const tagTitle = this.props.pathContext.tag;
|
const tagTitle = this.props.pathContext.tag;
|
||||||
const posts = this.props.data.allMarkdownRemark.edges;
|
const posts = this.props.data.allMarkdownRemark.edges;
|
||||||
posts.forEach((post) => {
|
posts.forEach((post) => {
|
||||||
items.push(
|
items.push(<Post data={post} key={post.node.fields.slug} />);
|
||||||
<Post data={post} key={post.node.fields.slug} />
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
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;
|
export default TagTemplateDetails;
|
||||||
|
57
src/html.js
57
src/html.js
@ -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;
|
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import 'typeface-roboto';
|
import 'typeface-roboto';
|
||||||
import '../assets/scss/init.scss';
|
import '../assets/scss/init.scss';
|
||||||
@ -17,8 +16,4 @@ class Layout extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Layout.propTypes = {
|
|
||||||
children: PropTypes.func
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Layout;
|
export default Layout;
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Link from 'gatsby-link';
|
import Link from 'gatsby-link';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import kebabCase from 'lodash/kebabCase';
|
import kebabCase from 'lodash/kebabCase';
|
||||||
@ -21,13 +20,13 @@ class CategoriesRoute extends React.Component {
|
|||||||
<div className="page__body">
|
<div className="page__body">
|
||||||
<div className="categories">
|
<div className="categories">
|
||||||
<ul className="categories__list">
|
<ul className="categories__list">
|
||||||
{categories.map(category =>
|
{categories.map(category => (
|
||||||
<li key={category.fieldValue} className="categories__list-item">
|
<li key={category.fieldValue} className="categories__list-item">
|
||||||
<Link to={`/categories/${kebabCase(category.fieldValue)}/`} className="categories__list-item-link">
|
<Link to={`/categories/${kebabCase(category.fieldValue)}/`} className="categories__list-item-link">
|
||||||
{category.fieldValue} ({category.totalCount})
|
{category.fieldValue} ({category.totalCount})
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
)}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</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 default CategoriesRoute;
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
export const pageQuery = graphql`
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import Post from '../components/Post';
|
import Post from '../components/Post';
|
||||||
import Sidebar from '../components/Sidebar';
|
import Sidebar from '../components/Sidebar';
|
||||||
@ -10,9 +9,7 @@ class IndexRoute extends React.Component {
|
|||||||
const { title, subtitle } = this.props.data.site.siteMetadata;
|
const { title, subtitle } = this.props.data.site.siteMetadata;
|
||||||
const posts = this.props.data.allMarkdownRemark.edges;
|
const posts = this.props.data.allMarkdownRemark.edges;
|
||||||
posts.forEach((post) => {
|
posts.forEach((post) => {
|
||||||
items.push(
|
items.push(<Post data={post} key={post.node.fields.slug} />);
|
||||||
<Post data={post} key={post.node.fields.slug} />
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
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 default IndexRoute;
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
export const pageQuery = graphql`
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 721 KiB |
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Link from 'gatsby-link';
|
import Link from 'gatsby-link';
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import kebabCase from 'lodash/kebabCase';
|
import kebabCase from 'lodash/kebabCase';
|
||||||
@ -21,13 +20,13 @@ class TagsRoute extends React.Component {
|
|||||||
<div className="page__body">
|
<div className="page__body">
|
||||||
<div className="tags">
|
<div className="tags">
|
||||||
<ul className="tags__list">
|
<ul className="tags__list">
|
||||||
{tags.map(tag =>
|
{tags.map(tag => (
|
||||||
<li key={tag.fieldValue} className="tags__list-item">
|
<li key={tag.fieldValue} className="tags__list-item">
|
||||||
<Link to={`/tags/${kebabCase(tag.fieldValue)}/`} className="tags__list-item-link">
|
<Link to={`/tags/${kebabCase(tag.fieldValue)}/`} className="tags__list-item-link">
|
||||||
{tag.fieldValue} ({tag.totalCount})
|
{tag.fieldValue} ({tag.totalCount})
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
)}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</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 default TagsRoute;
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
export const pageQuery = graphql`
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import Sidebar from '../components/Sidebar';
|
import Sidebar from '../components/Sidebar';
|
||||||
import CategoryTemplateDetails from '../components/CategoryTemplateDetails';
|
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 default CategoryTemplate;
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
export const pageQuery = graphql`
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import PageTemplateDetails from '../components/PageTemplateDetails';
|
import PageTemplateDetails from '../components/PageTemplateDetails';
|
||||||
|
|
||||||
@ -7,18 +6,13 @@ class PageTemplate extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
const { title, subtitle } = this.props.data.site.siteMetadata;
|
const { title, subtitle } = this.props.data.site.siteMetadata;
|
||||||
const page = this.props.data.markdownRemark;
|
const page = this.props.data.markdownRemark;
|
||||||
|
const { title: pageTitle, description: pageDescription } = page.frontmatter;
|
||||||
let description;
|
const description = pageDescription !== null ? pageDescription : subtitle;
|
||||||
if (page.frontmatter.description !== null) {
|
|
||||||
description = page.frontmatter.description;
|
|
||||||
} else {
|
|
||||||
description = subtitle;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{`${page.frontmatter.title} - ${title}`}</title>
|
<title>{`${pageTitle} - ${title}`}</title>
|
||||||
<meta name="description" content={description} />
|
<meta name="description" content={description} />
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<PageTemplateDetails {...this.props} />
|
<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 default PageTemplate;
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
export const pageQuery = graphql`
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import PostTemplateDetails from '../components/PostTemplateDetails';
|
import PostTemplateDetails from '../components/PostTemplateDetails';
|
||||||
|
|
||||||
@ -7,18 +6,13 @@ class PostTemplate extends React.Component {
|
|||||||
render() {
|
render() {
|
||||||
const { title, subtitle } = this.props.data.site.siteMetadata;
|
const { title, subtitle } = this.props.data.site.siteMetadata;
|
||||||
const post = this.props.data.markdownRemark;
|
const post = this.props.data.markdownRemark;
|
||||||
|
const { title: postTitle, description: postDescription } = post.frontmatter;
|
||||||
let description;
|
const description = postDescription !== null ? postDescription : subtitle;
|
||||||
if (post.frontmatter.description !== null) {
|
|
||||||
description = post.frontmatter.description;
|
|
||||||
} else {
|
|
||||||
description = subtitle;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{`${post.frontmatter.title} - ${title}`}</title>
|
<title>{`${postTitle} - ${title}`}</title>
|
||||||
<meta name="description" content={description} />
|
<meta name="description" content={description} />
|
||||||
</Helmet>
|
</Helmet>
|
||||||
<PostTemplateDetails {...this.props} />
|
<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 default PostTemplate;
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
export const pageQuery = graphql`
|
@ -1,5 +1,4 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Helmet from 'react-helmet';
|
import Helmet from 'react-helmet';
|
||||||
import Sidebar from '../components/Sidebar';
|
import Sidebar from '../components/Sidebar';
|
||||||
import TagTemplateDetails from '../components/TagTemplateDetails';
|
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 default TagTemplate;
|
||||||
|
|
||||||
export const pageQuery = graphql`
|
export const pageQuery = graphql`
|
Loading…
Reference in New Issue
Block a user