Development stack

• Gatsby (static site generator)
• React (templating)
• Styled Components (styling)

Folder structure

.
├── data                          // website data (included into graphQL)
│   ├── authors.json              // list of blog authors
│   ├── avatars                   // authors avatars
│   └── posts                     // all blog data (posts, images)
├── src                           // sources
│   ├── components                // all react components
│   ├── layouts                   // layouts
│   │   └── index.js              // default layout, used for all pages (contains header, footer etc.)
│   ├── pages                     // all pages
│   ├── templates                 // all templates (used for procedural page creation, such as posts)
│   ├── utils                     // contains utility functions
│   ├── global-styles.js          // contains global styles
│   └── theme.js                  // contains theme variables
└── static                        // moved to the root on build, contains fonts, favicon, robots.txt etc.

React

Props

Learn more about props: https://codepen.io/timonvs/post/using-props-in-react

(will update to use ES6 syntax)

Styled Components

Props

Theme variables

Learn more about Styled Components: https://www.styled-components.com/docs/basics