 Courses from Monica Powell

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

When maintaining a blog in Gatsby you might want to give readers heads up of approximately how much time is required to read a post. This lesson will walk through how to get the estimated reading time for each post. We'll examine the Gatsby GraphQL playground to see what data is available from gatsby-transformer-remark and write a GraphQL query to retrieve the estimated reading time for a given post. 

Display Reading Time for Gatsby Blog Posts Using gatsby-transformer-remark

This lesson will walk through how to format estimated reading time in a more visually engaging way with emojis. In this method we'll use array methods like `.fill()` and `.join()` format the estimated reading time to return a formatted string with emojis representing the total reading time. 

The result of this lesson is transforming the reading time for articles from appearing like "15 min read" to "🍿🍿🍿 15 min read"

Format Reading Time with Emojis on a Gatsby Page

This lesson walks through how to update and query frontmatter data for Gatsby blog posts in order to display featured articles separately from recent articles.

Display Featured Articles through Frontmatter Properties on a Gatsby Blog

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



Monica Powell, creator of React Ladies, talks through why someone would migrate from Remark to MDX before going into how to do that and what problems you might run into.

Monica Powell

Search Results

Display Reading Time for Gatsby Blog Posts Using gatsby-transformer-remark

Format Reading Time with Emojis on a Gatsby Page

Display Featured Articles through Frontmatter Properties on a Gatsby Blog

Migrating to MDX