The site is now available opensource on Github.
Improvements #
Google Lighthouse #
Performance: 100% Accessibility: 100% Best Practices: 100% SEO: 100% PWA
Frontmatter #
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 content/
.
The node
folder has gatsby-node.js
functions seperated into files.
Images & media for posts are kept in static/media/
.
Components #
Components are each in a single .js
file in src/components/
Re-usable micro components are located in src/components/common/
Component specific styles are located in their own .scss
files in src/assets/scss/components/
Conditional rendering is done at a component level without any dependance on CSS.
Components use 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 postbuild
script.
Main cms component src/cms/index.js
Main Features #
Development Features #
Eslint config #
The source for the site is available on github.
Webmentions
No Comments Yet