kwixand / gatsby-starter-typescript-scss-modules

A no-fluff, minimal Gatsby starter with a clear separation of concerns.

TypeScript & SCSS Modules Gatsby Starter

Install

gatsby new SITE_NAME https://github.com/kwixand/gatsby-starter-typescript-scss-modules

Features

• Gatsby Configuration contains a block for copyright values. The year is automatically set to the current year new Date().getFullYear() and the text can be the organization name, or whatever is needed. This is made available globally now through the <StaticQuery /> component.

• React Helmet is included for SEO. Helper components to simplify this (somewhat) are on my mental roadmap. Please post an issue if it's something you'd like to see. The default title is defined in the custom <Layout> wrapper component. It will include the title and description in the <title> tag, and just the description in the <meta name="description"> tag.

• TypeScript. The bread and butter of this starter, includes a Layout component, example Card component and page setup using .tsx. Additionally there's also a globals.d.ts type definition file that silences a module not declared issue for all image filetypes, and actually defines a generic type setup for importing SCSS modules.

• (S)CSS Modules are included, SCSS Specifically is being used. Any file using .module.scss can be imported and referenced. These are run through autoprefixer automatically and the browserslist configuration matches the default Create-React-App values.

Planned

The roadmap is largely based on my own needs, wants and nice-to-have priority list. Feel free to post a new issue if there's something you need or would like to see implemented. There's even a label for issues of confirmed upcoming changes. Check out the Planned label

gatsby-starter-typescript-scss-modules's Issues

HTML5 Elements

The Layout uses the <main> tag, this shouldn't be the case unless the element in predefined for safety, this is relevant specifically for IE.

document.createElement('main')

Header & Header Navigation

Not sure how I want to go about implementing this yet. Should work with IE9+ and include a complete mobile navigation option.

Footer

Must included the copyright StaticQuery already defined.

Prettier Updates

The prettier configuration has been updated to include semicolons. This codebase should be updated too.

Also a prettier script command should be added that hits all of the appropriate files for testing in the future.