📑 Adding Markdown Pages

1. Read files into Gatsby from the filesystem: gatsby-source-filesystem
2. Transform Markdown to HTML and frontmatter to data: gatsby-transformer-remark
3. Add a Markdown file: src/markdowns/post.md
4. Create a page component for the Markdown files: src/templates/post.js, dangerouslySetInnerHTML
5. Create static pages using Gatsby’s Node.js createPage API: gatsby-node.js

📑 Adding a List of Markdown Blog Posts

1. Creating posts: post.md
2. Creating page list: src/pages/index.js: pageQuery=graphql...
3. Creating PostLink component: src/components/post-link.js

📑 gatsby-transformer-remark

gatsby-transformer-remark does basic markdown -> HTML transformation but exposes an API to allow other plugins to intervene in the conversion process e.g. gatsby-remark-prismjs which adds highlighting to code blocks.

📑 my-blog, tags

• templates/tags, template/tag no need query graphql, can inherit from createPage({context: {...}})

• when query using graphql, all feilds are available inside frontmatter

  {
  	allMarkdownRemark {
  		group(field: frontmatter___tags) {
  			tag: fieldValue
  			totalCount
  		}
  	}
  }

• _allMarkdownRemark_ fields

  • totalCount
  • edges
  • nodes
  • pageInfo
  • distinct(field)
  • group(field, limit, skip)

  export const pageQuery = graphql`
  	query($tag: String) {
  		allMarkdownRemark(
  			limit: 2000
  			sort: { fields: [frontmatter___date], order: DESC }
  			filter: { frontmatter: { tags: { in: [$tag] } } }
  		) {
  			totalCount
  			edges {
  				node {
  					fields {
  						slug
  					}
  					frontmatter {
  						title
  					}
  				}
  			}
  		}
  	}
  `;

📑 mdx, rebass

• mdx: markdown + jsx
• rebass: React Primitive UI components, built with Emotion, Styled Components, and styled system
• styled-component: css-in-js
• How to use styled components with Material UI in a React app