Gatsby starter to kickstart your next front-end project quickly with Gatsby.
This starter supports Typescript and Eslint, Stylelint, Prettier are setup. It uses styled-components for styles, comes with a basic theme and some UI components to get started.
yarn start or yarn dev - run the local server and start developing
yarn lint - run typescript, styled-components code linters and prettier check
yarn lint:ts or yarn lint:css or yarn lint:prettier to run them separately
yarn fix - fix typescript and code styles
yarn fix:ts or yarn fix:prettier to run them separately
yarn build - creates a version of your site with production-ready optimizations
yarn clean - clean folders and files generated by the build script
Theme is available through the whole project from gatsbyRootWrapper.tsx.
It is declare in styles/theme with the types. Make sure to add/remove types in theme.d.ts before modifying the theme object.
TODO: switch theme / add more basics.
Follow those guidelines to add custom fonts from the web -> Using web fonts.
To use local font, add the @font-face declaration in GlobalStyle.ts.
Then, declare it/them in theme/index.ts in the typography object to be able to use it within the theme.
Basic typography components are already implemented, feel free to modify them to suit your needs.
You can find them in src/components/library/typography.
Customize or add breakpoints in src/styles/media.ts.
Easily use media queries in your styled components:
import media from 'styles/media';
export const Container = styled.div`
padding: 2rem;
${media.laptop} {
padding: 4rem;
}
`;Gatsby SEO component is implemented in src/components/SEO.
Modify the gatsby-config site-metedata according to your brand and activities. Use react-helmet to override metadata in specific pages.
Sitemap and robots.txt are automatically generated on build.
TODO: structured data
If you want to us Netlify to deploy your web app, make sure to add those gatsby-plugin-robots-txt options to not reference your development and preview branches.