Site Updates & Opensource

gatsby logo

graphql logo react logo netlify logo


The site is now available opensource on Github.

Improvements

  • JAMstack with Netlify CMS
  • Netlify Continuous Deployment
  • Git Hooks Using Husky
  • ESlint Updates
  • Checks js,jsx,ts,tsx pre-commit
  • Postbuild Script
  • Browser Caching for Fonts

Google Lighthouse

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

  • PWA
  • Google Workbox Service Worker
  • Sitemap
  • OpenGraph & Twitter Meta Tags
  • Feature Image
  • RSS Feed
  • Disqus Comments
  • Gitalk Comments
  • Syntax Highlighting with prismjs
  • Pagination
  • Netlify CMS
  • Github Pages
  • Netlify

Development Features

  • ESLint with plugins
  • Uses SASS for styles
  • Bulma flex grid
  • postcss with plugins
  • PurgeCSS on build
  • Uses gatsby-image
  • Uses react prop-types
  • Uses react hooks
  • Uses react-helmet
  • Uses GraphQL
  • Husky Git Hooks
  • Checks js,jsx,ts,tsx pre-commit
  • Postbuild Script

Eslint config

  • Lints JavaScript based on ES6
  • Fixes issues using Prettier
  • Fixes formatting errors using Prettier
  • Lints + Fixes inside of html script tags
  • Lints + Fixes React
  • Extends airbnb rules
  • Checks for react prop-types

The source for the site is available on github.

equk-gatsby