New version

gatsby-config.js

@@ -1,6 +1,6 @@
 module.exports = {
   siteMetadata: {
-    url: 'https://alxshelepenok.github.com/gatsby-starter-lumen',
+    url: 'https://lumen.netlify.com/',
     title: 'Blog by John Doe',
     subtitle: 'Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu.',
     copyright: '© All rights reserved.',
@@ -61,8 +61,7 @@ module.exports = {
                   url: site.siteMetadata.url + edge.node.fields.slug,
                   guid: site.siteMetadata.url + edge.node.fields.slug,
                   custom_elements: [{ 'content:encoded': edge.node.html }]
-                })
+                }))
-              )
             ),
             query: `
               {
@@ -101,15 +100,12 @@ module.exports = {
           {
             resolve: 'gatsby-remark-images',
             options: {
-              maxWidth: 960,
+              maxWidth: 960
-              linkImagesToOriginal: false
             }
           },
           {
             resolve: 'gatsby-remark-responsive-iframe',
-            options: {
+            options: { wrapperStyle: 'margin-bottom: 1.0725rem' }
-              wrapperStyle: 'margin-bottom: 1.0725rem'
-            }
           },
           'gatsby-remark-prismjs',
           'gatsby-remark-copy-linked-files',
@@ -121,9 +117,7 @@ module.exports = {
     'gatsby-plugin-sharp',
     {
       resolve: 'gatsby-plugin-google-analytics',
-      options: {
+      options: { trackingId: '' }
-        trackingId: ''
-      }
     },
     {
       resolve: 'gatsby-plugin-sitemap',

gatsby-node.js

@@ -9,13 +9,12 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
   const { createPage } = boundActionCreators;
 
   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(
         limit: 1000,
@@ -35,8 +34,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
         }
       }
     }
-  `
+  `).then((result) => {
-    ).then((result) => {
       if (result.errors) {
         console.log(result.errors);
         reject(result.errors);
@@ -47,17 +45,13 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           createPage({
             path: edge.node.fields.slug,
             component: slash(pageTemplate),
-            context: {
+            context: { slug: edge.node.fields.slug }
-              slug: edge.node.fields.slug
-            }
           });
         } else if (_.get(edge, 'node.frontmatter.layout') === 'post') {
           createPage({
             path: edge.node.fields.slug,
             component: slash(postTemplate),
-            context: {
+            context: { slug: edge.node.fields.slug }
-              slug: edge.node.fields.slug
-            }
           });
 
           let tags = [];
@@ -71,9 +65,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
             createPage({
               path: tagPath,
               component: tagTemplate,
-              context: {
+              context: { tag }
-                tag
-              }
             });
           });
 
@@ -88,9 +80,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
             createPage({
               path: categoryPath,
               component: categoryTemplate,
-              context: {
+              context: { category }
-                category
-              }
             });
           });
         }
@@ -124,9 +114,7 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
     });
 
     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 });
     }
 

src/components/CategoryTemplateDetails/index.jsx

@@ -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(
+      items.push(<Post data={post} key={post.node.fields.slug} />);
-        <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;

src/components/Disqus/Disqus.jsx

@@ -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 = {
+    this.state = { toasts: [] };
-      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;

src/components/Links/index.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import './style.scss';
 import '../../assets/fonts/fontello-771c82e0/css/fontello.css';
 
@@ -58,8 +57,4 @@ class Links extends React.Component {
   }
 }
 
-Links.propTypes = {
-  data: PropTypes.object.isRequired
-};
-
 export default Links;

src/components/Menu/index.jsx

@@ -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;

src/components/PageTemplateDetails/index.jsx

@@ -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;

src/components/Post/index.jsx

@@ -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 { 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 (
       <div className="post">
         <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>
           <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>
           </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>
+        <p className="post__description">{description}</p>
-        <Link className="post__readmore" to={post.slug}>Read</Link>
+        <Link className="post__readmore" to={slug}>Read</Link>
       </div>
     );
   }
 }
 
-Post.propTypes = {
-  data: PropTypes.object.isRequired
-};
-
 export default Post;

src/components/PostTemplateDetails/index.jsx

@@ -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;

src/components/Sidebar/index.jsx

@@ -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';
@@ -20,7 +19,8 @@ class Sidebar extends React.Component {
           <img
             src={profilePic}
             className="sidebar__author-photo"
-            width="75" height="75"
+            width="75"
+            height="75"
             alt={author.name}
           />
         </Link>
@@ -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;

src/components/TagTemplateDetails/index.jsx

@@ -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(
+      items.push(<Post data={post} key={post.node.fields.slug} />);
-        <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;

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;

src/layouts/index.jsx

@@ -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;

src/pages/categories.jsx

@@ -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`

src/pages/index.jsx

@@ -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(
+      items.push(<Post data={post} key={post.node.fields.slug} />);
-        <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`

src/pages/tags.jsx

@@ -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`

src/templates/category-template.jsx

@@ -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`

src/templates/page-template.jsx

@@ -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;
-
+    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 (
       <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`

src/templates/post-template.jsx

@@ -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;
-
+    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 (
       <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`

src/templates/tag-template.jsx

@@ -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`