Dang it - A blog by Kien Dang

✍ Gatsby Blog

My blog is inspired by Dan Abramov's blog which is forked from the Gatsby Starter Blog by Kyle Matthews.

I loved the simplicity of Dan's blog and added a bunch of features below during my journey in learning React and Gatsby.

The starter blog didn't have the features that I was looking for so I did some research and found resources to guide me in adding the features below:

Added extra pages

Added about me and now page in Bio component by following Gatsby guide here
Added reading time and tea icons

Added number of teas based on the length of the blog post. Followed Gatsby documentation here
Added tags page

Followed Gatsby documentation here. Also added clickable tags on each post page by querying from GraphQL.
Pagination

Followed Gatsby documentation here. Gatsby starter blog had previous and next page but did not have pagination set-up, I also followed this guide here to complete pagination.
Dark mode toggle

Followed Gatsby blog tutorial here. Used <ThemeContext.Provider> in React to toggle dark and light mode with React Switch
Added Font Awesome

Added React Font Awesome using react-icons library, specifically for my Github and LinkedIn and Twitter logo.
Prismjs

To allow for code syntax highlighting based on language. Gatsby documentation here and followed external post here
Added Algolia's Search

Installed Algolia's search functionality. Instructions on how I did this on this blog here
Added MDX support for blog posts

Followed this guide here to integrate MDX which allows for React components in Markdown files.

Please feel free to fork this repo and make it your own!

Give me a tweet @ k1dang: I would love to see what other features are added and customized to this template blog!

Blog hosted on Netlify and deployed via link below: