├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .prettierrc.json ├── .stylelintrc.json ├── .vscode ├── extensions.json ├── launch.json └── settings.json ├── LICENSE ├── README.md ├── gatsby-config.js ├── package.json ├── src ├── components │ ├── Footer.jsx │ ├── Header.jsx │ └── Layout.jsx └── pages │ ├── 404.jsx │ ├── index.jsx │ └── page-2.jsx └── yarn.lock /.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 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": ["airbnb", "plugin:prettier/recommended", "prettier/react"], 4 | "env": { 5 | "browser": true 6 | }, 7 | "rules": { 8 | "no-unused-expressions": ["error", { "allowTaggedTemplates": true }] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Build output 2 | public/ 3 | .cache/ 4 | 5 | # Dependencies 6 | node_modules/ 7 | 8 | # Logs 9 | *.log* 10 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "all" 4 | } 5 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "processors": ["stylelint-processor-styled-components"], 3 | "extends": [ 4 | "stylelint-config-recommended", 5 | "stylelint-config-styled-components", 6 | "stylelint-config-prettier" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "EditorConfig.EditorConfig", 5 | "esbenp.prettier-vscode", 6 | "jpoissonnier.vscode-styled-components", 7 | "prisma.vscode-graphql", 8 | "shinnn.stylelint" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Gatsby develop", 6 | "type": "node", 7 | "request": "launch", 8 | "protocol": "inspector", 9 | "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby", 10 | "args": ["develop"], 11 | "stopOnEntry": false, 12 | "runtimeArgs": ["--nolazy"], 13 | "sourceMaps": false 14 | }, 15 | { 16 | "name": "Gatsby build", 17 | "type": "node", 18 | "request": "launch", 19 | "protocol": "inspector", 20 | "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby", 21 | "args": ["build"], 22 | "stopOnEntry": false, 23 | "runtimeArgs": ["--nolazy"], 24 | "sourceMaps": false 25 | } 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // Enable automatic file formatting and fixing 3 | "editor.formatOnSave": true, 4 | "eslint.autoFixOnSave": true, 5 | 6 | // Using Prettier for JS is unnecessary as ESLint already handles formatting 7 | "prettier.disableLanguages": ["javascript", "javascriptreact"], 8 | 9 | // Disable built-in tools for which there are better alternatives available 10 | "javascript.format.enable": false, 11 | "javascript.validate.enable": false 12 | } 13 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 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 | > ## ⚠️ _DEPRECATED_ 2 | > 3 | > _This project has been superseded by [gatsby-starter-strict](https://github.com/kripod/gatsby-starter-strict)._ 4 | 5 | # ⚛️ gatsby-starter-modern 6 | 7 | A modern Gatsby starter with strict linting and auto-formatting rules. 8 | 9 | ## 🚀 Getting started 10 | 11 | - 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`)_ 12 | - Start a development server with `yarn develop` or `npm run develop` 13 | - _Other scripts like `build`, [`format`](#automatic-code-formatting) and [`lint`](#linting) are also available_ 14 | 15 | ### Deploy 16 | 17 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/kripod/gatsby-starter-modern) 18 | 19 | ## 💅 Style management 20 | 21 | [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. 22 | 23 | [rebass]: https://jxnblk.com/rebass/ 24 | [styled-components]: https://www.styled-components.com/ 25 | [styled-system]: https://jxnblk.com/styled-system/ 26 | 27 | ## ✨ Developer experience 28 | 29 | ### Automatic code formatting 30 | 31 | [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][]. 32 | 33 | [prettier]: https://prettier.io/ 34 | [stop all the on-going debates over coding styles]: https://prettier.io/docs/en/why-prettier.html 35 | 36 | ### Linting 37 | 38 | [Linters][lint] are tools that analyze source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. 39 | 40 | - JavaScript is linted by [ESLint][], enforcing the [Airbnb JavaScript Style Guide][] through an overridable set of rules provided by [eslint-config-airbnb-base][]. 41 | - Styles are linted by [stylelint][], adhering to the rules specified in [stylelint-config-recommended][]. 42 | 43 | [lint]: https://en.wikipedia.org/wiki/Lint_(software) 44 | [eslint]: https://eslint.org/ 45 | [airbnb javascript style guide]: https://github.com/airbnb/javascript 46 | [eslint-config-airbnb-base]: https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb-base 47 | [stylelint]: https://stylelint.io/ 48 | [stylelint-config-recommended]: https://github.com/stylelint/stylelint-config-recommended 49 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: 'Gatsby Modern Starter', 4 | language: 'en', 5 | }, 6 | plugins: ['gatsby-plugin-react-helmet', 'gatsby-plugin-styled-components'], 7 | }; 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "build": "gatsby build", 5 | "develop": "gatsby develop", 6 | "format": "prettier --ignore-path .gitignore --write \"**/*.{js,jsx,json,md,yml}\"", 7 | "lint": "npm run lint:es && npm run lint:style", 8 | "lint:es": "eslint --ignore-path .gitignore \"**/*.{js,jsx}\"", 9 | "lint:style": "stylelint \"src/**/*.{js,jsx}\"" 10 | }, 11 | "dependencies": { 12 | "babel-plugin-styled-components": "^1.10.0", 13 | "gatsby": "^2.4.2", 14 | "gatsby-plugin-react-helmet": "^3.0.12", 15 | "gatsby-plugin-styled-components": "^3.0.7", 16 | "prop-types": "^15.7.2", 17 | "react": "^16.8.6", 18 | "react-dom": "^16.8.6", 19 | "react-helmet": "^5.2.1", 20 | "rebass": "^2.3.3", 21 | "styled-components": "^3.4.10" 22 | }, 23 | "devDependencies": { 24 | "eslint": "^5.16.0", 25 | "eslint-config-airbnb": "^17.1.0", 26 | "eslint-config-prettier": "^4.2.0", 27 | "eslint-plugin-import": "^2.17.2", 28 | "eslint-plugin-jsx-a11y": "^6.2.1", 29 | "eslint-plugin-prettier": "^3.0.1", 30 | "eslint-plugin-react": "^7.13.0", 31 | "prettier": "^1.17.0", 32 | "stylelint": "^9.10.1", 33 | "stylelint-config-prettier": "^4.0.0", 34 | "stylelint-config-recommended": "^2.2.0", 35 | "stylelint-config-styled-components": "^0.1.1", 36 | "stylelint-processor-styled-components": "^1.6.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import React from 'react'; 3 | import { Box, Container } from 'rebass'; 4 | 5 | const Footer = ({ children, ...props }) => ( 6 | 7 | {children} 8 | 9 | ); 10 | 11 | Footer.propTypes = { 12 | children: PropTypes.node.isRequired, 13 | }; 14 | 15 | export default Footer; 16 | -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import { Link as GatsbyLink } from 'gatsby'; 2 | import PropTypes from 'prop-types'; 3 | import React from 'react'; 4 | import { Box, Container, NavLink } from 'rebass'; 5 | 6 | const Header = ({ brand, ...props }) => ( 7 | 8 | 9 | 10 | {brand} 11 | 12 | 13 | 14 | ); 15 | 16 | Header.propTypes = { 17 | brand: PropTypes.node.isRequired, 18 | }; 19 | 20 | export default Header; 21 | -------------------------------------------------------------------------------- /src/components/Layout.jsx: -------------------------------------------------------------------------------- 1 | import { graphql, StaticQuery } from 'gatsby'; 2 | import PropTypes from 'prop-types'; 3 | import React from 'react'; 4 | import Helmet from 'react-helmet'; 5 | import { Box, Flex, Heading, Provider as RebassProvider, Text } from 'rebass'; 6 | import { injectGlobal } from 'styled-components'; 7 | import Footer from './Footer'; 8 | import Header from './Header'; 9 | 10 | injectGlobal` 11 | body { 12 | margin: 0; 13 | text-size-adjust: 100%; 14 | } 15 | `; 16 | 17 | const Layout = ({ children }) => ( 18 | 19 | ( 31 | 35 | 36 | 37 | )} 38 | /> 39 | 40 |
Gatsby} /> 41 | 42 | 43 | {children} 44 | 45 | 46 |
47 | Sticky footer 48 |
49 | 50 | ); 51 | 52 | Layout.propTypes = { 53 | children: PropTypes.node.isRequired, 54 | }; 55 | 56 | export default Layout; 57 | -------------------------------------------------------------------------------- /src/pages/404.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Helmet } from 'react-helmet'; 3 | import { Container, Heading, Text } from 'rebass'; 4 | import Layout from '../components/Layout'; 5 | 6 | const NotFoundPage = () => ( 7 | 8 | 9 | 10 | Page not found 11 | 12 | 13 | Page not found 14 | 15 | The requested page is unavailable. 16 | 17 | 18 | 19 | ); 20 | 21 | export default NotFoundPage; 22 | -------------------------------------------------------------------------------- /src/pages/index.jsx: -------------------------------------------------------------------------------- 1 | import { Link as GatsbyLink } from 'gatsby'; 2 | import React from 'react'; 3 | import { Container, Heading, Link, Text } from 'rebass'; 4 | import Layout from '../components/Layout'; 5 | 6 | const IndexPage = () => ( 7 | 8 | 9 | Hi people 10 | Welcome to your new Gatsby site. 11 | Now go build something great. 12 | 13 | 14 | Go to page 2 15 | 16 | 17 | 18 | 19 | ); 20 | 21 | export default IndexPage; 22 | -------------------------------------------------------------------------------- /src/pages/page-2.jsx: -------------------------------------------------------------------------------- 1 | import { Link as GatsbyLink } from 'gatsby'; 2 | import React from 'react'; 3 | import { Container, Heading, Link, Text } from 'rebass'; 4 | import Layout from '../components/Layout'; 5 | 6 | const SecondPage = () => ( 7 | 8 | 9 | Hi from the second page 10 | Welcome to page 2 11 | 12 | 13 | Go back to the homepage 14 | 15 | 16 | 17 | 18 | ); 19 | 20 | export default SecondPage; 21 | --------------------------------------------------------------------------------