The site is now available opensource on Github.
Google Lighthouse #
Performance: 100% Accessibility: 100% Best Practices: 100% SEO: 100% PWA
Structured around my old site, some fields are optional.
slug: -optional- title: -required- date: -required- draft: -required- author: -required- tags: -optional- image: -optional-
Post URLs are created automatically with
/YYYY/MM/DD/ & Pages extend from
Project Structure #
This is the base folder structure.
├── content │ ├── pages │ └── posts ├── node ├── src │ ├── assets │ ├── components │ ├── hooks │ ├── icon │ └── templates └── static └── media
Markdown files with frontmatter for posts & pages are located in
node folder has
gatsby-node.js functions seperated into files.
Images & media for posts are kept in
Components are each in a single
.js file in
Re-usable micro components are located in
Component specific styles are located in their own
.scss files in
Conditional rendering is done at a component level without any dependance on CSS.
prop-types where required (this is also checked with eslint).
Netlify CMS #
The site uses netlify cms & has custom preview components.
Styles are provided by the
Main cms component
Main Features #
Development Features #
Eslint config #
The source for the site is available on github.