Imeplement Gatsby

[anitsh]

• [x] Review Gatsby. Separate task is going at https://github.com/codeanit/til/issues/29

Why Gatsby

• Opensource
• Great community

• Commonly used technical stack GraphQL + React + Webpack = Gatsby

  • And plethora of plugins to make the development faster.
  • Static site with Markdown content is made easier.
  • Build to a Progressive Web Apps.

[anitsh]

GatsbyJS Implementation.

Many references taken among which listed below were useful:

• https://github.com/GatsbyCheatsheet/blog.maximeheckel.com and its theme For theme, TypeScript implementation
• https://github.com/GatsbyCheatsheet/system-ui.com For design
• https://github.com/GatsbyCheatsheet/kentcdodds.com For design, code examples
• https://github.com/GatsbyCheatsheet/police-brutality-site Found this at last but the enjoyed going through the code as it shows an example from scratch. From data design to code implementation.

The first step should have been designing the data. I started with the code directly. police-brutality-site gave good reference on that. The reason for not going through was that the Gatsby tutorials did not focus from this perspective. The plugin to create data source from markdown files skipped that part. And also other reference sites did not showed it probably they did not need it. So the link below might be very much helpful: https://www.gatsbyjs.org/docs/schema-customization

As I needed the system to be in TypeScript, Maximeheckel's Blog and Theme were a great reference. Although I liked the orgzantions of the code, while running Theme in the Blog was taking a lot of time, hence decide to merge the theme in the blog itself and so the the website's included theme.

system-ui.com code is also a good reference for design. It shows great example of theme-ui implemented in Gatsby theme using theme-ui.