gatsby-starter-modern's Introduction

⚠️ DEPRECATED

This project has been superseded by gatsby-starter-strict.

⚛️ gatsby-starter-modern

A modern Gatsby starter with strict linting and auto-formatting rules.

🚀 Getting started

Clone this project and install all the required dependencies (e.g. with gatsby new gatsby-example-site https://github.com/kripod/gatsby-starter-modern after making sure that Gatsby CLI is installed globally with npm install --global gatsby-cli)
Start a development server with yarn develop or npm run develop
- Other scripts like build, format and lint are also available

Deploy

💅 Style management

Rebass, a React UI component library & design system, is used for styling components. Based on styled-components and styled-system, it provides a delightful way for managing styles.

✨ Developer experience

Automatic code formatting

Prettier is an opinionated code formatter aiming to provide codebase consistency when multiple developers work on the same project. The main reason behind adopting Prettier is to stop all the on-going debates over coding styles.

Linting

Linters are tools that analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs.

JavaScript is linted by ESLint, enforcing the Airbnb JavaScript Style Guide through an overridable set of rules provided by eslint-config-airbnb-base.
Styles are linted by stylelint, adhering to the rules specified in stylelint-config-recommended.

gatsby-starter-modern's People

Stargazers

Watchers

gatsby-starter-modern's Issues

Instruction on using SASS instead of Rebass

Hi!

Thanks for the amazing starter pack, this is my favorite so far!

I just found out that you've updated it to use Rebass instead of SASS for styling. But I prefer SASS and it's what my project requires. I'm relatively new to this. Could you please guide me to any instruction or something to understand how I could replace Rebass with SASS?
Thanks! 🙂

Simplify ESLint configuration

The following parts of .eslintrc.json should be removed on the long term:

"settings": {
  "import/core-modules": ["gatsby"]
}

Related issue: gatsbyjs/gatsby#5410

"rules": {
  "jsx-a11y/anchor-is-valid": [
    "error",
    {
      "components": ["Link"],
      "specialLink": ["to"],
      "aspects": ["noHref", "invalidHref", "preferButton"]
    }
  ]
}

Related PR: airbnb/javascript#1648

Add gatsby-plugin-react-helmet to gatsby-config.json

Blocking issue: gatsbyjs/gatsby#5412

Dependabot can't resolve your JavaScript dependency files

Dependabot can't resolve your JavaScript dependency files.

As a result, Dependabot couldn't update your dependencies.

The error Dependabot encountered was:

Error while updating /yarn.lock:
Couldn't find any versions for "scheduler" that matches "^16.6.2"

If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.

You can mention @dependabot in the comments below to contact the Dependabot team.

Use CSS Blocks instead of CSS Modules

CSS Blocks offers nice optimizations over CSS Modules with a similar concept.

Blocking issue: gatsbyjs/gatsby#5120

Definition for rule 'jsx-a11y/href-no-hash' was not found

During development, the warning in the title is shown for every page component.

Blocking issue: gatsbyjs/gatsby#5411

Recommend Projects

kripod / gatsby-starter-modern Goto Github PK