Features

Dark Mode

Dark Mode using gatsby-plugin-use-dark-mode and react-toggle-dark-mode.

CSS variables

Existing styles in this website are implemented with the simplest setup, CSS Variables injected globally at gatsby-browser.js. All color styles have already compartmentalised for easier updating color. Color tokens can be found in src/utils/styles/color.css.

Components are created using styled-components together with a mediaQuery function for a standard breakpoints.

MDX

Gatsby Advance Starter was still using Markdown, I have updated it to support MDX with all basic dependencies, you can create a new page in src/pages folder and start writing in Markdown instantly.

Table Of Content

Minimal Table of Content Component that will subtlely hinted the length of the articles, with headings displaying on hover. Available on screens larger than tablet only.

Update the navigation menu in static/SiteConfig.js to customize your menu.