gatsbyjs: Add comments

Author: ajayns

gatsbyjs-markdown-blog/gatsby-config.js

@@ -1,3 +1,7 @@
+// Configure plugins used
+// gatsby-source-filesystem is pointed to /src to look for files
+// typography.js is configured using /utils/typography
+
 module.exports = {
     siteMetadata: {
         title: `Pandas Eating Lots`,

gatsbyjs-markdown-blog/gatsby-node.js

@@ -1,6 +1,9 @@
 const path = require(`path`);
 const { createFilePath } = require(`gatsby-source-filesystem`);
 
+// onCreateNode is called for every node created
+// markdown nodes are filtered and createNodeField adds a field slug which holds value of the filePath
+
 exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
     const { createNodeField } = boundActionCreators
     if (node.internal.type === `MarkdownRemark`) {
@@ -13,6 +16,10 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
     }
 };
 
+
+// createPages creates a page for each markdown node
+// createPage uses path from slug queried, blog-post.js as template to create page
+// Everything in context is passed into individual pages
 exports.createPages = ({ graphql, boundActionCreators }) => {
     const { createPage } = boundActionCreators
     return new Promise((resolve, reject) => {

gatsbyjs-markdown-blog/src/layouts/index.js

@@ -1,5 +1,8 @@
 import React from 'react';
 
+// Layout encloses everything else in itself for all pages
+// children is a function that contains all the pages
+// so all basically all pages follow this layout now
 export default ({children}) => (
     <div>
         <h3 style={{textAlign: `center`, margin: `1em`, padding: `1em`, borderBottom: `1px solid lightgrey`}}>Panda Blog</h3>

gatsbyjs-markdown-blog/src/pages/blog.js

@@ -4,12 +4,13 @@ import Link from "gatsby-link";
 
 import { rhythm } from "../utils/typography";
 
+// Displays list of blog posts (i.e markdown files)
 export default ({ data }) => {
     return (
         <div>
             <g.H1 display={"inline-block"} borderBottom={"1px solid"}>
                 Amazing Pandas Eating Things
-      </g.H1>
+            </g.H1>
             <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
             {data.allMarkdownRemark.edges.map(({ node }) => (
                 <div key={node.id}>
@@ -31,6 +32,8 @@ export default ({ data }) => {
     );
 };
 
+// gatsby-transformer-remark converts each markdown file into JSON data with content as HTML
+// GraphQL queries for the list of such files
 export const query = graphql`
   query IndexQuery {
     allMarkdownRemark {

gatsbyjs-markdown-blog/src/pages/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "gatsby-link";
 
+// Basic boilerplate code for content to display
 export default () => (
     <div>
         <h1>Hi! I'm building a fake Gatsby site as part of a tutorial!</h1>

gatsbyjs-markdown-blog/src/templates/blog-post.js

@@ -1,5 +1,6 @@
 import React from "react";
 
+// data is returned from GraphQL query
 export default ({ data }) => {
     const post = data.markdownRemark;
     return (
@@ -10,6 +11,7 @@ export default ({ data }) => {
     );
 };
 
+// slug passed in from context, used to find current post
 export const query = graphql`
   query BlogPostQuery($slug: String!) {
     markdownRemark(fields: { slug: { eq: $slug } }) {