├── .gitattributes ├── .huskyrc.json ├── .prettierrc.json ├── src ├── gatsby-plugin-chakra-ui │ └── theme.ts ├── assets │ └── favicon.png ├── emotion.d.ts ├── pages │ ├── index.tsx │ └── 404.tsx ├── declarations.d.ts └── components │ └── Layout.tsx ├── .gitignore ├── .lintstagedrc.json ├── jest.config.js ├── .vscode ├── extensions.json └── settings.json ├── tsconfig.json ├── .editorconfig ├── gatsby-config.js ├── .eslintrc.json ├── LICENSE ├── README.md └── package.json /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | -------------------------------------------------------------------------------- /.huskyrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "hooks": { 3 | "pre-commit": "lint-staged" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } 5 | -------------------------------------------------------------------------------- /src/gatsby-plugin-chakra-ui/theme.ts: -------------------------------------------------------------------------------- 1 | export { theme as default } from '@chakra-ui/core'; 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.log* 2 | .cache/ 3 | .env* 4 | .eslintcache 5 | coverage/ 6 | node_modules/ 7 | public/ 8 | -------------------------------------------------------------------------------- /src/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kripod/gatsby-starter-strict/HEAD/src/assets/favicon.png -------------------------------------------------------------------------------- /.lintstagedrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "*.{ts,tsx,js}": "eslint --fix", 3 | "*.{json,yml,md}": "prettier --write" 4 | } 5 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | rootDir: 'src', 4 | snapshotSerializers: ['jest-emotion'], 5 | }; 6 | -------------------------------------------------------------------------------- /src/emotion.d.ts: -------------------------------------------------------------------------------- 1 | import theme from './gatsby-plugin-chakra-ui/theme'; 2 | 3 | declare module '@emotion/core' { 4 | export type Theme = typeof theme; 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "editorconfig.editorconfig", 5 | "esbenp.prettier-vscode", 6 | "prisma.vscode-graphql" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "noEmit": true, 4 | "strict": true, 5 | "esModuleInterop": true, 6 | "isolatedModules": true, 7 | "jsx": "react" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // Enable automatic file formatting and fixing 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", 4 | "editor.formatOnSave": true, 5 | "editor.codeActionsOnSave": { 6 | "source.fixAll.eslint": true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { Layout } from '../components/Layout'; 4 | 5 | export default function IndexPage(): JSX.Element { 6 | return ( 7 | 8 |

Hello, world!

9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | // This file is used to hold ambient type declarations, as well as type shims 2 | // for npm module without type declarations, and assets files. 3 | 4 | // For example, to shim modules without declarations, use: 5 | // declare module 'package-without-declarations'; 6 | 7 | // And to shim assets, use (one file extension per `declare`): 8 | // declare module '*.png'; 9 | -------------------------------------------------------------------------------- /src/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Helmet } from 'react-helmet'; 3 | 4 | import { Layout } from '../components/Layout'; 5 | 6 | export default function NotFoundPage(): JSX.Element { 7 | return ( 8 | 9 | 10 | Page not found 11 | 12 | 13 |

Page not found

14 |

The requested page is unavailable.

15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | const siteMetadata = { 2 | name: 'Gatsby Strict Starter', 3 | description: 4 | 'Demo for a Gatsby starter with strict linting and auto-formatting rules.', 5 | }; 6 | 7 | module.exports = { 8 | siteMetadata, 9 | plugins: [ 10 | 'gatsby-plugin-chakra-ui', 11 | 'gatsby-plugin-emotion', 12 | { 13 | resolve: 'gatsby-plugin-manifest', 14 | options: { 15 | ...siteMetadata, 16 | display: 'minimal-ui', 17 | theme_color: '#663399', 18 | background_color: 'white', 19 | icon: 'src/assets/favicon.png', 20 | lang: 'en-US', 21 | start_url: '/', 22 | }, 23 | }, 24 | 'gatsby-plugin-react-helmet', 25 | 'gatsby-plugin-typescript', 26 | ], 27 | }; 28 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { "browser": true }, 4 | "parserOptions": { "project": "./tsconfig.json" }, 5 | "extends": [ 6 | "airbnb-typescript", 7 | "airbnb/hooks", 8 | "plugin:@typescript-eslint/eslint-recommended", 9 | "plugin:@typescript-eslint/recommended", 10 | "plugin:jest/recommended", 11 | "plugin:testing-library/recommended", 12 | "plugin:testing-library/react", 13 | "prettier", 14 | "prettier/@typescript-eslint", 15 | "prettier/react" 16 | ], 17 | "plugins": ["simple-import-sort"], 18 | 19 | "rules": { 20 | // Auto-sort imports 21 | "sort-imports": "off", 22 | "import/order": "off", 23 | "simple-import-sort/sort": "error", 24 | 25 | // Using a type system makes it safe enough to spread props 26 | "react/jsx-props-no-spreading": "off" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/components/Layout.tsx: -------------------------------------------------------------------------------- 1 | import { graphql, useStaticQuery } from 'gatsby'; 2 | import React from 'react'; 3 | import { Helmet } from 'react-helmet'; 4 | 5 | export interface LayoutProps { 6 | children: React.ReactNode; 7 | } 8 | 9 | export function Layout({ children }: LayoutProps): JSX.Element { 10 | const data = useStaticQuery(graphql` 11 | { 12 | site { 13 | siteMetadata { 14 | name 15 | description 16 | } 17 | } 18 | } 19 | `); 20 | 21 | return ( 22 | 23 | 27 | 28 | 29 | 30 |
{/* TODO */}
31 | 32 |
{children}
33 | 34 | 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018-2020 Kristóf Poduszló 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚛️ gatsby-starter-strict 2 | 3 | A Gatsby starter with strict linting and auto-formatting rules. 4 | 5 | ## 🚀 Getting started 6 | 7 | - Clone this project and install all the required dependencies _(e.g. with `npx gatsby new gatsby-example-site https://github.com/kripod/gatsby-starter-strict`)_ 8 | - Start a development server with `yarn develop` or `npm run develop` 9 | - _Other scripts like `build`, [`format`](#automatic-code-formatting), [`type-check`](#static-type-checking) and [`lint`](#linting) are also available_ 10 | 11 | ### Deploy 12 | 13 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kripod/gatsby-starter-strict) 14 | 15 | ## ✨ Developer experience 16 | 17 | ### Automatic code formatting 18 | 19 | [Prettier][] aims to provide codebase consistency when multiple developers work on the same project. The main reason behind adopting it is to [stop all the on-going debates over coding styles][]. 20 | 21 | [prettier]: https://prettier.io/ 22 | [stop all the on-going debates over coding styles]: https://prettier.io/docs/en/why-prettier.html 23 | 24 | ### Static type checking 25 | 26 | [TypeScript][] adds optional types to JavaScript, preventing several programming mistakes. For a quick guide about using React with it, please refer to the [React TypeScript Cheatsheet][]. 27 | 28 | [typescript]: https://www.typescriptlang.org/ 29 | [react typescript cheatsheet]: https://github.com/sw-yx/react-typescript-cheatsheet 30 | 31 | ### Linting 32 | 33 | Source code is linted by [ESLint][], enforcing the [Airbnb JavaScript Style Guide][] through an overridable set of rules provided by [eslint-config-airbnb][]. 34 | 35 | [eslint]: https://eslint.org/ 36 | [airbnb javascript style guide]: https://github.com/airbnb/javascript 37 | [eslint-config-airbnb]: https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-strict", 3 | "private": true, 4 | "scripts": { 5 | "build": "gatsby build", 6 | "clean": "gatsby clean", 7 | "develop": "gatsby develop", 8 | "format": "prettier --ignore-path .gitignore --write .", 9 | "lint": "eslint --ignore-path .gitignore \"**/*.{ts,tsx,js}\"", 10 | "serve": "gatsby serve", 11 | "test": "jest", 12 | "type-check": "tsc" 13 | }, 14 | "dependencies": { 15 | "@chakra-ui/core": "^0.8.0", 16 | "@emotion/core": "^10.0.28", 17 | "@emotion/styled": "^10.0.27", 18 | "@types/react": "^16.9.44", 19 | "@types/react-helmet": "^5.0.15", 20 | "emotion-theming": "^10.0.27", 21 | "gatsby": "^2.24.23", 22 | "gatsby-plugin-chakra-ui": "^0.1.4", 23 | "gatsby-plugin-emotion": "^4.3.6", 24 | "gatsby-plugin-manifest": "^2.4.21", 25 | "gatsby-plugin-react-helmet": "^3.3.10", 26 | "gatsby-plugin-typescript": "^2.4.16", 27 | "react": "^16.13.1", 28 | "react-dom": "^16.13.1", 29 | "react-helmet": "^6.1.0", 30 | "typescript": "^3.9.7" 31 | }, 32 | "devDependencies": { 33 | "@testing-library/react": "^10.4.7", 34 | "@testing-library/react-hooks": "^3.4.1", 35 | "@types/jest": "^26.0.8", 36 | "@typescript-eslint/eslint-plugin": "^2.30.0", 37 | "@typescript-eslint/parser": "^2.26.0", 38 | "eslint": "^6.8.0", 39 | "eslint-config-airbnb-typescript": "^7.2.1", 40 | "eslint-config-prettier": "^6.11.0", 41 | "eslint-plugin-import": "^2.22.0", 42 | "eslint-plugin-jest": "^23.20.0", 43 | "eslint-plugin-jsx-a11y": "^6.3.1", 44 | "eslint-plugin-react": "^7.20.3", 45 | "eslint-plugin-react-hooks": "^4.0.8", 46 | "eslint-plugin-simple-import-sort": "^5.0.3", 47 | "eslint-plugin-testing-library": "^3.4.0", 48 | "husky": "^4.2.5", 49 | "jest": "^25.5.4", 50 | "jest-emotion": "^10.0.32", 51 | "lint-staged": "^10.2.11", 52 | "prettier": "^2.0.5", 53 | "react-test-renderer": "^16.13.1", 54 | "ts-jest": "^25.5.1" 55 | } 56 | } 57 | --------------------------------------------------------------------------------