22 |
34 | 23 | 30 | {siteTitle} 31 | 32 |
33 |Not Found
21 |You just hit a route that doesn't exist... the sadness.
22 |
43 | {children}
44 |
49 |
50 |
51 | )
52 | }
53 |
54 | export default Layout
55 |
--------------------------------------------------------------------------------
/packages/gatsby-starter-ts/src/components/image.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { useStaticQuery, graphql } from 'gatsby'
3 | import Img from 'gatsby-image'
4 | import ensureKeys from '../helpers/ensure-keys'
5 | import { ImageQuery } from '../../graphql-types'
6 |
7 | /*
8 | * This component is built using `gatsby-image` to automatically serve optimized
9 | * images with lazy loading and reduced file sizes. The image is loaded using a
10 | * `useStaticQuery`, which allows us to load the image from directly within this
11 | * component, rather than having to pass the image data down from pages.
12 | *
13 | * For more information, see the docs:
14 | * - `gatsby-image`: https://gatsby.dev/gatsby-image
15 | * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
16 | */
17 |
18 | const Image: React.FC = () => {
19 | const data = useStaticQuery
26 |
48 | )
49 | }}
50 | />
51 | )
52 |
53 | const bioQuery = graphql`
54 | query BioQuery {
55 | avatar: file(absolutePath: { regex: "/profile-pic.jpg/" }) {
56 | childImageSharp {
57 | fixed(width: 50, height: 50) {
58 | ...GatsbyImageSharpFixed
59 | }
60 | }
61 | }
62 | site {
63 | siteMetadata {
64 | author
65 | social {
66 | twitter
67 | }
68 | }
69 | }
70 | }
71 | `
72 |
73 | export default Bio
74 |
--------------------------------------------------------------------------------
/packages/gatsby-starter-blog-ts/src/components/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from 'gatsby'
3 |
4 | import { rhythm, scale } from '../utils/typography'
5 |
6 | interface ILayoutProps {
7 | location: Location
8 | title: string
9 | }
10 |
11 | class Layout extends React.Component40 | Written by {author} who lives and works in San 41 | Francisco building useful things. 42 | {` `} 43 | 44 | You should follow him on Twitter 45 | 46 |
47 |26 | 34 | {title} 35 | 36 |
37 | ) 38 | } else { 39 | header = ( 40 |46 | 54 | {title} 55 | 56 |
57 | ) 58 | } 59 | return ( 60 |
68 | {header}
69 | {children}
70 |
75 |
76 | )
77 | }
78 | }
79 |
80 | export default Layout
81 |
--------------------------------------------------------------------------------
/packages/gatsby-starter-blog-ts/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gatsby-starter-blog-ts",
3 | "private": true,
4 | "description": "A starter for a blog powered by Gatsby, Markdown & Typescript",
5 | "version": "3.1.1",
6 | "author": "Kyle Mathews {post.frontmatter.title}
29 |37 | {post.frontmatter.date} 38 |
39 | 40 |45 |
-
56 |
- 57 | {previous && ( 58 | 59 | ← {previous.frontmatter.title} 60 | 61 | )} 62 | 63 |
- 64 | {next && ( 65 | 66 | {next.frontmatter.title} → 67 | 68 | )} 69 | 70 |
48 |
64 | )
65 | })}
66 | 53 | 54 | {title} 55 | 56 |
57 | {node.frontmatter.date} 58 | 63 |
3 |
4 | 
5 |
6 |
8 | Gatsby's default starter 9 |
10 | 11 | Kick off your project with this default boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. 12 | 13 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._ 14 | 15 | ## 🚀 Quick start 16 | 17 | 1. **Create a Gatsby site.** 18 | 19 | Use the Gatsby CLI to create a new site, specifying the default starter. 20 | 21 | ```shell 22 | # create a new Gatsby site using the default starter 23 | gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default 24 | ``` 25 | 26 | 1. **Start developing.** 27 | 28 | Navigate into your new site’s directory and start it up. 29 | 30 | ```shell 31 | cd my-default-starter/ 32 | gatsby develop 33 | ``` 34 | 35 | 1. **Open the source code and start editing!** 36 | 37 | Your site is now running at `http://localhost:8000`! 38 | 39 | _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ 40 | 41 | Open the `my-default-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 42 | 43 | ## 🧐 What's inside? 44 | 45 | A quick look at the top-level files and directories you'll see in a Gatsby project. 46 | 47 | . 48 | ├── node_modules 49 | ├── src 50 | ├── .gitignore 51 | ├── .prettierrc 52 | ├── gatsby-browser.js 53 | ├── gatsby-config.js 54 | ├── gatsby-node.js 55 | ├── gatsby-ssr.js 56 | ├── LICENSE 57 | ├── package-lock.json 58 | ├── package.json 59 | └── README.md 60 | 61 | 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 62 | 63 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. 64 | 65 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 66 | 67 | 4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 68 | 69 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 70 | 71 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). 72 | 73 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 74 | 75 | 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 76 | 77 | 9. **`LICENSE`**: Gatsby is licensed under the MIT license. 78 | 79 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** 80 | 81 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 82 | 83 | 12. **`README.md`**: A text file containing useful reference information about your project. 84 | 85 | ## 🎓 Learning Gatsby 86 | 87 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: 88 | 89 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. 90 | 91 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. 92 | 93 | ## 💫 Deploy 94 | 95 | [](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-default) 96 | 97 | 98 | -------------------------------------------------------------------------------- /packages/gatsby-plugin-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 5 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | "lib": ["dom", "es2017"], /* Specify library files to be included in the compilation. */ 7 | // "allowJs": true, /* Allow javascript files to be compiled. */ 8 | // "checkJs": true, /* Report errors in .js files. */ 9 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 10 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 11 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 12 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 13 | // "outFile": "./", /* Concatenate and emit output to single file. */ 14 | "outDir": "./", /* Redirect output structure to the directory. */ 15 | "rootDir": "src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 16 | // "composite": true, /* Enable project compilation */ 17 | // "removeComments": true, /* Do not emit comments to output. */ 18 | // "noEmit": true, /* Do not emit outputs. */ 19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 21 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 22 | 23 | /* Strict Type-Checking Options */ 24 | "strict": true, /* Enable all strict type-checking options. */ 25 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 26 | // "strictNullChecks": true, /* Enable strict null checks. */ 27 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 28 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 29 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 30 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 31 | 32 | /* Additional Checks */ 33 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 34 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 35 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 36 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 37 | "skipLibCheck": true, /* Skip type checking of declaration files */ 38 | 39 | /* Module Resolution Options */ 40 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 41 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 42 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 43 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 44 | // "typeRoots": [], /* List of folders to include type definitions from. */ 45 | // "types": [], /* Type declaration files to be included in compilation. */ 46 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 47 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 48 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 49 | 50 | /* Source Map Options */ 51 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 52 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 53 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 54 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 55 | 56 | /* Experimental Options */ 57 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 58 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 59 | }, 60 | "include": ["src", "../../types"], 61 | "exclude": ["node_modules"] 62 | } -------------------------------------------------------------------------------- /packages/gatsby-starter-blog-ts/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "ESNext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 5 | "module": "ESNext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | "lib": ["dom", "esnext"], /* Specify library files to be included in the compilation. */ 7 | // "allowJs": true, /* Allow javascript files to be compiled. */ 8 | // "checkJs": true, /* Report errors in .js files. */ 9 | "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 10 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 11 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 12 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 13 | // "outFile": "./", /* Concatenate and emit output to single file. */ 14 | "outDir": "./dist", /* Redirect output structure to the directory. */ 15 | // "rootDir": "./src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 16 | // "composite": true, /* Enable project compilation */ 17 | // "removeComments": true, /* Do not emit comments to output. */ 18 | // "noEmit": true, /* Do not emit outputs. */ 19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 21 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 22 | 23 | /* Strict Type-Checking Options */ 24 | "strict": true, /* Enable all strict type-checking options. */ 25 | "noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */ 26 | // "strictNullChecks": true, /* Enable strict null checks. */ 27 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 28 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 29 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 30 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 31 | 32 | /* Additional Checks */ 33 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 34 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 35 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 36 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 37 | "skipLibCheck": true, /* Skip type checking of declaration files */ 38 | 39 | /* Module Resolution Options */ 40 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 41 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 42 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 43 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 44 | "typeRoots": [ "./types", "../../node_modules/@types"], /* List of folders to include type definitions from. */ 45 | // "types": [], /* Type declaration files to be included in compilation. */ 46 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 47 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 48 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 49 | 50 | /* Source Map Options */ 51 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 52 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 53 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 54 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 55 | 56 | /* Experimental Options */ 57 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 58 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 59 | }, 60 | "exclude": ["node_modules", "./types"] 61 | } -------------------------------------------------------------------------------- /packages/gatsby-starter-blog-ts/README.md: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |
6 |
8 | Typescript blog starter 9 |
10 | 11 | Gatsby's blog starter, typescript-ifed with [`gatsby-plugin-ts`](https://github.com/d4rekanguok/gatsby-plugin-ts). 12 | 13 | --- 14 | 15 | Kick off your project with this blog boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. 16 | 17 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._ 18 | 19 | ## 🚀 Quick start 20 | 21 | 1. **Create a Gatsby site.** 22 | 23 | Use the Gatsby CLI to create a new site, specifying the blog starter. 24 | 25 | ```sh 26 | # create a new Gatsby site using the blog starter 27 | gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog 28 | ``` 29 | 30 | 1. **Start developing.** 31 | 32 | Navigate into your new site’s directory and start it up. 33 | 34 | ```sh 35 | cd my-blog-starter/ 36 | gatsby develop 37 | ``` 38 | 39 | 1. **Open the source code and start editing!** 40 | 41 | Your site is now running at `http://localhost:8000`! 42 | 43 | _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ 44 | 45 | Open the `my-blog-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 46 | 47 | ## 🧐 What's inside? 48 | 49 | A quick look at the top-level files and directories you'll see in a Gatsby project. 50 | 51 | . 52 | ├── node_modules 53 | ├── src 54 | ├── .gitignore 55 | ├── .prettierrc 56 | ├── gatsby-browser.js 57 | ├── gatsby-config.js 58 | ├── gatsby-node.js 59 | ├── gatsby-ssr.js 60 | ├── LICENSE 61 | ├── package-lock.json 62 | ├── package.json 63 | └── README.md 64 | 65 | 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 66 | 67 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. 68 | 69 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 70 | 71 | 4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 72 | 73 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 74 | 75 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). 76 | 77 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 78 | 79 | 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 80 | 81 | 9. **`LICENSE`**: Gatsby is licensed under the MIT license. 82 | 83 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** 84 | 85 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 86 | 87 | 12. **`README.md`**: A text file containing useful reference information about your project. 88 | 89 | ## 🎓 Learning Gatsby 90 | 91 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: 92 | 93 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. 94 | 95 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. 96 | 97 | ## 💫 Deploy 98 | 99 | [](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-blog) 100 | 101 | 102 | -------------------------------------------------------------------------------- /packages/gatsby-plugin-graphql-codegen/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 5 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | "lib": ["dom", "esnext"], /* Specify library files to be included in the compilation. */ 7 | // "allowJs": true, /* Allow javascript files to be compiled. */ 8 | // "checkJs": true, /* Report errors in .js files. */ 9 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 10 | "declaration": true, /* Generates corresponding '.d.ts' file. */ 11 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 12 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 13 | // "outFile": "./", /* Concatenate and emit output to single file. */ 14 | "outDir": "./", /* Redirect output structure to the directory. */ 15 | "rootDir": "src", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 16 | // "composite": true, /* Enable project compilation */ 17 | // "removeComments": true, /* Do not emit comments to output. */ 18 | // "noEmit": true, /* Do not emit outputs. */ 19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 21 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 22 | 23 | /* Strict Type-Checking Options */ 24 | "strict": true, /* Enable all strict type-checking options. */ 25 | // remove this flag when graphql-codegen fix @graphql-codegen/visitor-plugin-common/client-side-base-visitor.d.ts:111:17 26 | "noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */ 27 | // "strictNullChecks": true, /* Enable strict null checks. */ 28 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 29 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 30 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 31 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 32 | 33 | /* Additional Checks */ 34 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 35 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 36 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 37 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 38 | "skipLibCheck": true, /* Skip type checking of declaration files */ 39 | 40 | /* Module Resolution Options */ 41 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 42 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 43 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 44 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 45 | // "typeRoots": [], /* List of folders to include type definitions from. */ 46 | // "types": [], /* Type declaration files to be included in compilation. */ 47 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 48 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 49 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 50 | 51 | /* Source Map Options */ 52 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 53 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 54 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 55 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 56 | 57 | /* Experimental Options */ 58 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 59 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 60 | }, 61 | "include": ["src", "../../types"], 62 | "exclude": ["node_modules"] 63 | } -------------------------------------------------------------------------------- /packages/gatsby-starter-blog-ts/content/blog/hi-folks/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: New Beginnings 3 | date: "2015-05-28T22:40:32.169Z" 4 | description: This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter. 5 | --- 6 | 7 | Far far away, behind the word mountains, far from the countries Vokalia and 8 | Consonantia, there live the blind texts. Separated they live in Bookmarksgrove 9 | right at the coast of the Semantics, a large language ocean. A small river named 10 | Duden flows by their place and supplies it with the necessary regelialia. 11 | 12 | ## On deer horse aboard tritely yikes and much 13 | 14 | The Big Oxmox advised her not to do so, because there were thousands of bad 15 | Commas, wild Question Marks and devious Semikoli, but the Little Blind Text 16 | didn’t listen. She packed her seven versalia, put her initial into the belt and 17 | made herself on the way. 18 | 19 | - This however showed weasel 20 | - Well uncritical so misled 21 | - this is very interesting 22 | - Goodness much until that fluid owl 23 | 24 | When she reached the first hills of the **Italic Mountains**, she had a last 25 | view back on the skyline of her hometown _Bookmarksgrove_, the headline of 26 | [Alphabet Village](http://google.com) and the subline of her own road, the Line 27 | Lane. Pityful a rethoric question ran over her cheek, then she continued her 28 | way. On her way she met a copy. 29 | 30 | ### Overlaid the jeepers uselessly much excluding 31 | 32 | But nothing the copy said could convince her and so it didn’t take long until a 33 | few insidious Copy Writers ambushed her, made her drunk with 34 | [Longe and Parole](http://google.com) and dragged her into their agency, where 35 | they abused her for their projects again and again. And if she hasn’t been 36 | rewritten, then they are still using her. 37 | 38 | > Far far away, behind the word mountains, far from the countries Vokalia and 39 | > Consonantia, there live the blind texts. Separated they live in Bookmarksgrove 40 | > right at the coast of the Semantics, a large language ocean. 41 | 42 | It is a paradisematic country, in which roasted parts of sentences fly into your 43 | mouth. Even the all-powerful Pointing has no control about the blind texts it is 44 | an almost unorthographic life One day however a small line of blind text by the 45 | name of Lorem Ipsum decided to leave for the far World of Grammar. 46 | 47 | ### According a funnily until pre-set or arrogant well cheerful 48 | 49 | The Big Oxmox advised her not to do so, because there were thousands of bad 50 | Commas, wild Question Marks and devious Semikoli, but the Little Blind Text 51 | didn’t listen. She packed her seven versalia, put her initial into the belt and 52 | made herself on the way. 53 | 54 | 1. So baboon this 55 | 2. Mounted militant weasel gregariously admonishingly straightly hey 56 | 3. Dear foresaw hungry and much some overhung 57 | 4. Rash opossum less because less some amid besides yikes jeepers frenetic 58 | impassive fruitlessly shut 59 | 60 | When she reached the first hills of the Italic Mountains, she had a last view 61 | back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet 62 | Village and the subline of her own road, the Line Lane. Pityful a rethoric 63 | question ran over her cheek, then she continued her way. On her way she met a 64 | copy. 65 | 66 | > The copy warned the Little Blind Text, that where it came from it would have 67 | > been rewritten a thousand times and everything that was left from its origin 68 | > would be the word "and" and the Little Blind Text should turn around and 69 | > return to its own, safe country. 70 | 71 | But nothing the copy said could convince her and so it didn’t take long until a 72 | few insidious Copy Writers ambushed her, made her drunk with Longe and Parole 73 | and dragged her into their agency, where they abused her for their projects 74 | again and again. And if she hasn’t been rewritten, then they are still using 75 | her. Far far away, behind the word mountains, far from the countries Vokalia and 76 | Consonantia, there live the blind texts. 77 | 78 | #### Silent delightfully including because before one up barring chameleon 79 | 80 | Separated they live in Bookmarksgrove right at the coast of the Semantics, a 81 | large language ocean. A small river named Duden flows by their place and 82 | supplies it with the necessary regelialia. It is a paradisematic country, in 83 | which roasted parts of sentences fly into your mouth. 84 | 85 | Even the all-powerful Pointing has no control about the blind texts it is an 86 | almost unorthographic life One day however a small line of blind text by the 87 | name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox 88 | advised her not to do so, because there were thousands of bad Commas, wild 89 | Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. 90 | 91 | ##### Wherever far wow thus a squirrel raccoon jeez jaguar this from along 92 | 93 | She packed her seven versalia, put her initial into the belt and made herself on 94 | the way. When she reached the first hills of the Italic Mountains, she had a 95 | last view back on the skyline of her hometown Bookmarksgrove, the headline of 96 | Alphabet Village and the subline of her own road, the Line Lane. Pityful a 97 | rethoric question ran over her cheek, then she continued her way. On her way she 98 | met a copy. 99 | 100 | ###### Slapped cozy a that lightheartedly and far 101 | 102 | The copy warned the Little Blind Text, that where it came from it would have 103 | been rewritten a thousand times and everything that was left from its origin 104 | would be the word "and" and the Little Blind Text should turn around and return 105 | to its own, safe country. But nothing the copy said could convince her and so it 106 | didn’t take long until a few insidious Copy Writers ambushed her, made her drunk 107 | with Longe and Parole and dragged her into their agency, where they abused her 108 | for their projects again and again. 109 | -------------------------------------------------------------------------------- /packages/gatsby-plugin-graphql-codegen/src/graphql-codegen.config.test.js: -------------------------------------------------------------------------------- 1 | import * as fs from 'fs-extra' 2 | import * as path from 'path' 3 | import { buildSchema } from 'graphql' 4 | import { loadDocuments } from '@graphql-tools/load' 5 | import { generateWithConfig, mapCodegenPlugins } from './graphql-codegen.config' 6 | 7 | jest.mock('fs-extra', () => ({ 8 | ensureDir: jest.fn(), 9 | writeFile: jest.fn(), 10 | })) 11 | 12 | jest.mock('@graphql-tools/load', () => ({ 13 | loadDocuments: jest.fn(), 14 | })) 15 | 16 | it('takes in options and returns a function that runs codegen for the schema', async () => { 17 | loadDocuments.mockReturnValueOnce(Promise.resolve([])) 18 | 19 | const mockReporter = { 20 | warn: jest.fn(), 21 | } 22 | 23 | const generateFromSchema = await generateWithConfig({ 24 | directory: './example-directory', 25 | documentPaths: ['./src/**/*.{ts,tsx}'], 26 | fileName: 'example-types.ts', 27 | reporter: mockReporter, 28 | codegenPlugins: [], 29 | codegenConfig: {}, 30 | }) 31 | 32 | const mockSchema = buildSchema(` 33 | type Query { 34 | example: String 35 | } 36 | `) 37 | 38 | expect(mockSchema).toMatchInlineSnapshot(` 39 | GraphQLSchema { 40 | "__validationErrors": undefined, 41 | "_directives": Array [ 42 | "@include", 43 | "@skip", 44 | "@deprecated", 45 | "@specifiedBy", 46 | ], 47 | "_implementationsMap": Object {}, 48 | "_mutationType": undefined, 49 | "_queryType": "Query", 50 | "_subTypeMap": Object {}, 51 | "_subscriptionType": undefined, 52 | "_typeMap": Object { 53 | "Boolean": "Boolean", 54 | "Query": "Query", 55 | "String": "String", 56 | "__Directive": "__Directive", 57 | "__DirectiveLocation": "__DirectiveLocation", 58 | "__EnumValue": "__EnumValue", 59 | "__Field": "__Field", 60 | "__InputValue": "__InputValue", 61 | "__Schema": "__Schema", 62 | "__Type": "__Type", 63 | "__TypeKind": "__TypeKind", 64 | }, 65 | "astNode": undefined, 66 | "description": undefined, 67 | "extensionASTNodes": Array [], 68 | "extensions": undefined, 69 | } 70 | `) 71 | 72 | await generateFromSchema(mockSchema) 73 | 74 | expect(fs.ensureDir).toMatchInlineSnapshot(` 75 | [MockFunction] { 76 | "calls": Array [ 77 | Array [ 78 | "example-directory", 79 | ], 80 | ], 81 | "results": Array [ 82 | Object { 83 | "type": "return", 84 | "value": undefined, 85 | }, 86 | ], 87 | } 88 | `) 89 | 90 | expect(fs.writeFile.mock.calls[0]).toBeDefined() 91 | expect(fs.writeFile.mock.calls[0][0]).toBe( 92 | path.join('example-directory', 'example-types.ts') 93 | ) 94 | expect(fs.writeFile.mock.calls[0][1]).toMatchInlineSnapshot(` 95 | "export type Maybe['./src/**/*.{ts,tsx}',
'./.cache/fragments/*.js',
'./node_modules/gatsby-*/**/*.js'] | The paths to files containing graphql queries. ⚠️ The default paths will be overwritten by the `documentPaths` you pass in, so please make sure to include *all* necessary paths ⚠️ 28 | |options.fileName| `graphql-type.ts` | path to the generated file. By default, it's placed at the project root directory & it should not be placed into `src`, since this will create an infinite loop| 29 | |options.codegenDelay| `200` | amount of delay from file change to codegen| 30 | |options.pluckConfig|
{ globalGqlIdentifierName: "graphql", modules: [ { name: 'gatsby', identifier: 'graphql' } ] } | options passed to [graphql-tag-pluck](https://github.com/ardatan/graphql-toolkit/tree/master/packages/graphql-tag-pluck) when extracting queries and fragments from documents |
31 | |options.failOnError (^2.5.0)| `process.env.NODE_ENV === 'production'` | Throw error if the codegen fails. By default only apply to production builds.
32 | |options.codegenConfig (^2.7.0)| `{}` | Add config directly to `graphql-codegen`. These key-value config will be applied to every `graphql-codegen` plugins. See [graphql-codegen docs on the config field](https://graphql-code-generator.com/docs/getting-started/config-field) |
33 | |options.codegenPlugins (^2.7.0)| `[]` | Add additional plugins to `graphql-codegen`. We use the same format as Gatsby's. See example usage below.
34 | |options.additionalSchemas (^2.6.0)| []| array of additional schemas (other than the schema used by gatsby queries) for which types should be generated for. This is useful when you use client-side queries (e.g. with apollo-client) where you are querying another schema/endpoint | 35 | 36 | #### Additional Schema Options (for `options.additionalSchemas`) 37 | |key | default | value | 38 | |---|---|---| 39 | |key| - | an unique key used internally by this plugin to identify different schemas| 40 | |fileName| graphql-types-${key}.ts | path to the generated file for this schema. By default, it's placed at the project root directory & it should not be placed into `src`, since this will create an infinite loop | 41 | |documentPaths| value of `options.documentPaths` | The paths to files containing graphql queries. See also `options.documentPaths` | 42 | |pluckConfig| - | options passed to [graphql-tag-pluck](https://github.com/ardatan/graphql-toolkit/tree/master/packages/graphql-tag-pluck) when extracting queries and fragments from documents | 43 | |schema| - | additional schema to process. Can either be an url, a path to a local schema definition (both `.json` and `.graphql` are supported) or an inline definition. See also https://github.com/ardatan/graphql-toolkit#-schema-loading | 44 | |codegenConfig (^2.7.0)| `{}` | See `codegenConfig` above 45 | |codegenPlugin (^2.7.0)| `{}` | See `codegenPlugin` above 46 | 47 | ## Example Setups 48 | 49 | ### Normal Usecase 50 | Set it & forget it 51 | 52 | ```js 53 | exports.default = { 54 | plugins: [ 55 | `gatsby-plugin-graphql-codegen`, 56 | ] 57 | } 58 | ``` 59 | 60 | ### Custom Filename & Location 61 | 62 | ```js 63 | exports.default = { 64 | plugins: [{ 65 | resolve: `gatsby-plugin-graphql-codegen`, 66 | options: { 67 | fileName: `./gatsby-graphql.ts`, 68 | } 69 | }] 70 | } 71 | ``` 72 | 73 | ### Gatsby-node.ts 74 | You have queries in your gatsby-node? We can take care of that. The experience is not 100% right now, but that'll change soon! 75 | 76 | ```js 77 | exports.default = { 78 | plugins: [{ 79 | resolve: `gatsby-plugin-graphql-codegen`, 80 | options: { 81 | fileName: `./gatsby-graphql.ts`, 82 | documentPaths: [ 83 | './src/**/*.{ts,tsx}', 84 | './node_modules/gatsby-*/**/*.js', 85 | './gatsby-node.ts', 86 | ], 87 | } 88 | }] 89 | } 90 | ``` 91 | 92 | ### Customize Graphql Codegen 93 | You want to pass additional config to `graphql-codegen`: 94 | 95 | ```js 96 | // additional plugins 97 | import { plugin as resolverPlugin } from '@graphql-codegen/typescript-resolvers' 98 | 99 | exports.default = { 100 | plugins: [{ 101 | resolve: `gatsby-plugin-graphql-codegen`, 102 | options: { 103 | codegenConfig: { 104 | // key-value configs that will be applied to every plugins. 105 | // Note: The example below is completely unnecessary, just a demonstration. 106 | typesPrefix: 'Hi' // -> import { HiImageQuery } from '../../graphql-types' 107 | }, 108 | codegenPlugins: [{ 109 | // built-in plugin. 110 | // Use `typescript` for `@graphql-codegen/typescript` 111 | // and `operations` for `@graphql-codegen/typescript-operations` 112 | resolve: 'typescript', 113 | options: { 114 | namingConvention: `lower-case#lowerCase`, 115 | } 116 | },{ 117 | // additional plugin 118 | resolve: resolverPlugin, 119 | options: { 120 | typesPrefix: 'I' 121 | } 122 | }] 123 | } 124 | }] 125 | } 126 | ``` 127 | 128 | ### Dual-Schema Setup 129 | If you use `graphql` on the client side, this is for you. 130 | 131 | ```js 132 | exports.default = { 133 | plugins: [{ 134 | resolve: `gatsby-plugin-graphql-codegen`, 135 | options: { 136 | additionalSchemas: [{ 137 | key: 'pokemon', 138 | fileName: './graphql-pokemon.ts', 139 | schema: 'https://graphql-pokemon.now.sh/', 140 | pluckConfig: { 141 | // config to ensure only queries using the `gql` tag are used for this schema 142 | globalGqlIdentifierName: 'gql', 143 | modules: [ 144 | { 145 | name: 'graphql-tag', 146 | identifier: 'gql', 147 | }, 148 | ], 149 | }, 150 | }], 151 | } 152 | }] 153 | } 154 | ``` 155 | 156 | ## Code generation 157 | 158 | By default, this plugin will build typing for your queries automatically to `graphql-types.d.ts` on every edit. Please note that the definition file **should not** be placed inside `src` since this triggers a never ending loop during development. 159 | 160 | In order to take advantage of the generated code, user needs to name their query: 161 | 162 | ```js 163 | // src/pages/index.tsx 164 | 165 | export const pageQuery = graphql` 166 | - query { 167 | + query BlogIndex { 168 | site { 169 | siteMetadata { 170 | title 171 | } 172 | } 173 | ... 174 | ``` 175 | 176 | ...and import it from the generated type file: 177 | 178 | ```js 179 | // src/pages/index.tsx 180 | 181 | import { PageProps } from "gatsby"; 182 | import { BlogIndexQuery } from '../graphqlTypes' 183 | 184 | const BlogIndex: React.FC
By default type checking is disabled in production mode (during `gatsby build`). Set this to `true` to enable type checking in production as well | 56 | |options.typeCheck | `true` | Enable / disable type checking with `fork-ts-checker-webpack-plugin`. | 57 | |options.forkTsCheckerPlugin | `{}` | Options that'll be passed to `fork-ts-checker-webpack-plugin`. For all options, please see [their docs](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options) 58 | |**codegen options**||| 59 | |options.codegen| `true` | enable / disable generating definitions for graphql queries| 60 | |options.documentPaths|
['./src/**/*.{ts,tsx}',
'./.cache/fragments/*.js',
'./node_modules/gatsby-*/**/*.js'] | The paths to files containing graphql queries. ⚠️ The default paths will be overwritten by the `documentPaths` you pass in, so please make sure to include *all* necessary paths ⚠️ 61 | |options.fileName| `graphql-type.ts` | path to the generated file. By default, it's placed at the project root directory & it should not be placed into `src`, since this will create an infinite loop| 62 | |options.codegenDelay| `200` | amount of delay from file change to codegen| 63 | |options.pluckConfig|
{ globalGqlIdentifierName: "graphql", modules: [ { name: 'gatsby', identifier: 'graphql' } ] } | options passed to [graphql-tag-pluck](https://github.com/ardatan/graphql-toolkit/tree/master/packages/graphql-tag-pluck) when extracting queries and fragments from documents |
64 | |options.failOnError (2.5.0)| `process.env.NODE_ENV === 'production'` | Throw error if the codegen fails. By default only apply to production builds.
65 | |options.codegenConfig (^2.7.0)| `{}` | Add config directly to `graphql-codegen`. These key-value config will be applied to every `graphql-codegen` plugins. See [graphql-codegen docs on the config field](https://graphql-code-generator.com/docs/getting-started/config-field) |
66 | |options.codegenPlugins (^2.7.0)| `[]` | Add additional plugins to `graphql-codegen`. We use the same format as Gatsby's. See example usage below.
67 | |options.additionalSchemas (^2.6.0)| []| array of additional schemas (other than the schema used by gatsby queries) for which types should be generated for. This is useful when you use client-side queries (e.g. with apollo-client) where you are querying another schema/endpoint | 68 | 69 | ## Example Setup 70 | 71 | ### Basic 72 | 73 | ```js 74 | module.exports = { 75 | plugins: [ 76 | `gatsby-plugin-ts`, 77 | ] 78 | } 79 | ``` 80 | 81 | ### Custom Output Path 82 | 83 | ```js 84 | module.exports = { 85 | plugins: [ 86 | { 87 | resolve: `gatsby-plugin-ts`, 88 | options: { 89 | fileName: `gen/graphql-types.ts`, 90 | } 91 | } 92 | ] 93 | } 94 | ``` 95 | 96 | ### I need to change everything 97 | 98 | ```js 99 | // gatsby-config.js 100 | { 101 | resolve: `gatsby-plugin-ts`, 102 | options: { 103 | tsLoader: { 104 | logLevel: 'warn', 105 | }, 106 | forkTsCheckerPlugin: { 107 | eslint: true, 108 | }, 109 | fileName: `types/graphql-types.ts`, 110 | codegen: true, 111 | codegenDelay: 250, 112 | typeCheck: false, 113 | pluckConfig: { 114 | // this is the default config 115 | globalGqlIdentifierName: 'graphql', 116 | modules: [ 117 | { name: 'gatsby', identifier: 'graphql' }, 118 | ], 119 | }, 120 | additionalSchemas: [ 121 | { 122 | key: 'example', 123 | fileName: 'graphql-types-example.ts', 124 | schema: 'https://example.com/graphql', 125 | pluckConfig: { 126 | // config to ensure only queries using the `gql` tag are used for this schema 127 | globalGqlIdentifierName: 'gql', 128 | modules: [ 129 | { 130 | name: 'graphql-tag', 131 | identifier: 'gql', 132 | }, 133 | ], 134 | }, 135 | } 136 | ], 137 | }, 138 | } 139 | ``` 140 | 141 | ### Gatsby files 142 | 143 | - `gatsby-config` has to be a `.js` file 144 | - `gatsby-node` is run directly by `node`, so it has to be a .js file as well. It is a shame, because in a complicated Gatsby app it is where a lot of logic live & will benefit from ts. As a work around, it can be built with `tsc` independently, in a script in `package.json` or somehow in gatsby's pre-init hook. 145 | - Gatsby's global variable like `__PATH_PREFIX__` can be handled by declaring this code somewhere: 146 | 147 | ```ts 148 | // src/global.d.ts 149 | declare const __PATH_PREFIX__: string 150 | ``` 151 | 152 | ## Code generation 153 | 154 | By default, this plugin will build typing for your queries automatically to `graphql-types.d.ts` on every edit. Please note that the definition file **should not** be placed inside `src` since this triggers a never ending loop during development. 155 | 156 | In order to take advantage of the generated code, user needs to name their query: 157 | 158 | ```js 159 | // src/pages/index.tsx 160 | 161 | export const pageQuery = graphql` 162 | - query { 163 | + query BlogIndex { 164 | site { 165 | siteMetadata { 166 | title 167 | } 168 | } 169 | ... 170 | ``` 171 | 172 | ...and import it from the generated type file: 173 | 174 | ```js 175 | // src/pages/index.tsx 176 | 177 | import { BlogIndexQuery } from '../graphqlTypes' 178 | 179 | interface IBlogIndexProps { 180 | data: BlogIndexQuery; 181 | location: Location; 182 | } 183 | 184 | const BlogIndex: React.FC
90 |
91 | Why use
93 |
94 | Gatsby use `babel-preset-typescript` which strips type information out of your code without doing typecheck. `gatsby-plugin-ts` use `ts-loader`, so you don't have to (1) worry about the [caveats](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats) of `babel-preset-typescript` or (2) use an IDE / code editor that can typecheck for you.
95 |
96 | It also generate typings for your graphql queries, make it easier to strengthen your code.
97 |
98 | If you're already using something like VSCode and/or don't want to do typecheck in production, you can toggle off the typecheck option.
99 |
100 |
101 |
91 | Why use gatsby-plugin-ts?
92 |
93 |
94 | Gatsby use `babel-preset-typescript` which strips type information out of your code without doing typecheck. `gatsby-plugin-ts` use `ts-loader`, so you don't have to (1) worry about the [caveats](https://babeljs.io/docs/en/babel-plugin-transform-typescript#caveats) of `babel-preset-typescript` or (2) use an IDE / code editor that can typecheck for you.
95 |
96 | It also generate typings for your graphql queries, make it easier to strengthen your code.
97 |
98 | If you're already using something like VSCode and/or don't want to do typecheck in production, you can toggle off the typecheck option.
99 |
102 |
103 | What's the difference between
105 |
106 | Originally belong to the same plugin, the codegen portion was extracted to `gatsby-plugin-graphql-codegen` so it can be used with the official typescript plugin. If you are already using `gatsby-plugin-ts`, you don't need `gatsby-plugin-graphql-codegen`.
107 |
108 |
109 |
103 | What's the difference between gatsby-plugin-ts and gatsby-plugin-graphql-codegen?
104 |
105 |
106 | Originally belong to the same plugin, the codegen portion was extracted to `gatsby-plugin-graphql-codegen` so it can be used with the official typescript plugin. If you are already using `gatsby-plugin-ts`, you don't need `gatsby-plugin-graphql-codegen`.
107 |
110 |
116 |
117 | 111 | Should I check the generated type definition into git? 112 |
113 | 114 | It's up to your preference. 115 |
118 |
119 | What is up with all the
121 |
122 | It's due to Gatsby internal. There's an effort to [make typing more strict here](https://github.com/gatsbyjs/gatsby/issues/20069).
123 |
124 | You also may find the new optional chaining & nullish coalescing operator in typescript 3.7 helpful to deal with this.
125 |
126 |
127 |
119 | What is up with all the Maybe<T>?
120 |
121 |
122 | It's due to Gatsby internal. There's an effort to [make typing more strict here](https://github.com/gatsbyjs/gatsby/issues/20069).
123 |
124 | You also may find the new optional chaining & nullish coalescing operator in typescript 3.7 helpful to deal with this.
125 |
128 |
148 |
149 | 129 | Can I turn off type checking and/or type generating? 130 |
131 | 132 | Yes! You can also use node env to determine whether to enable these features. 133 | 134 | ```js 135 | // gatsby-config.js 136 | { 137 | resolve: `gatsby-plugin-ts`, 138 | options: { 139 | codegen: false, 140 | typeCheck: process.env.NODE_ENV === 'development', 141 | } 142 | }, 143 | ``` 144 | 145 | 146 | 147 |
150 |
151 | My graphql queries returns
153 |
154 | Gatsby extract graphql queries statically and it only understand queries inside template literal. It's possible that tsc is transpiling your template literal to string concat quivalent. Check your `tsconfig.json` & make sure you have a setting similar to this:
155 |
156 | ```js
157 | "compilerOptions": {
158 | "target": "ES2018", /* or at least ES2015 */
159 | "module": "ESNext", /* or at least ES2015 */
160 | "lib": ["dom"], /* <-- required! */
161 | "jsx": "preserve", /* <-- required! */
162 | "moduleResolution": "node", /* <-- required! */
163 | /* other options... */
164 | }
165 | ```
166 |
167 |
168 |
169 |
151 | My graphql queries returns null
152 |
153 |
154 | Gatsby extract graphql queries statically and it only understand queries inside template literal. It's possible that tsc is transpiling your template literal to string concat quivalent. Check your `tsconfig.json` & make sure you have a setting similar to this:
155 |
156 | ```js
157 | "compilerOptions": {
158 | "target": "ES2018", /* or at least ES2015 */
159 | "module": "ESNext", /* or at least ES2015 */
160 | "lib": ["dom"], /* <-- required! */
161 | "jsx": "preserve", /* <-- required! */
162 | "moduleResolution": "node", /* <-- required! */
163 | /* other options... */
164 | }
165 | ```
166 |
167 |
170 |
184 |
185 | 171 | What if I have a mixed ts/js codebase? 172 |
173 | 174 | You'd have to update your `tsconfig` with the below options: 175 | 176 | ```json 177 | "allowJs": true, 178 | "outDir": "./build" 179 | ``` 180 | 181 | The `outDir` option won't be used by ts-loader, but you may need it to satisfy vscode. 182 | 183 |
186 |
195 |
196 | 187 | Babel doesn't understand the new optional chaining & nullish coalescing syntax even though my IDE shows no errors 188 |
189 | 190 | If you are using `gatsby-plugin-ts`, before you go off and install a bunch of babel plugins like a lot of tutorials suggest, check if your compilation `target` in `tsconfig.json` is too high (`ESNext` or `ES2019`). 191 | 192 | With these targets, tsc will leave the new syntax as-is, which babel might not understand. Downgrade them to `ES2018` should fix the issue; also make sure _your_ IDE's typescript version is the same as the one listed in your `package.json` dependency. 193 | 194 |
197 |
204 |
205 | 198 | Can I write `gatsby-node` in typescript & have its queries typing generated as well? 199 |
200 | 201 | Yes, but it's not easy at the moment. We're working on it; stay tuned! 202 | 203 |
206 |
213 |
214 | ### Common warning & errors
215 | Gatsby recently moved plugins' fragments from `.cache` to `node_modules`. We currently support both paths, but sometimes it may cause conflict warnings & errors:
216 |
217 | 207 | Typechecking causes `gatsby develop` to crash. 208 |
209 | 210 | We're trying to pin down why this happens, please share your experience in [#36](https://github.com/d4rekanguok/gatsby-typescript/issues/36) 211 | 212 |
218 |
242 |
243 | 219 | `warning: Unable to find any GraphQL type definitions for the following pointers ...` 220 |
221 | 222 | If you are annoyed by this warning, set the `documentPaths` options as below: 223 | 224 | ```js 225 | // gatsby-config.js 226 | { 227 | resolve: 'gatsby-plugin-graphql-codegen', 228 | options: { 229 | documentPaths: [ 230 | './src/**/*.{ts,tsx}', 231 | './node_modules/gatsby-*/**/*.js', 232 | ], 233 | } 234 | }, 235 | ``` 236 | 237 | ~~We will remove the `.cache/fragments` path and bump gatsby peer dependency version in a later release.~~ 238 | 239 | **Update**: Since 2.4.0, we've removed `.cache/fragments` & bump up gatsby peer dep. 240 | 241 |
244 |
245 | Duplicate identifier error:
247 |
248 | If you see this error please run a `gatsby clean` to remove fragments in `.cache`, or set the `documentPaths` options as below:
249 |
250 | ```js
251 | // gatsby-config.js
252 | {
253 | resolve: 'gatsby-plugin-graphql-codegen',
254 | options: {
255 | documentPaths: [
256 | './src/**/*.{ts,tsx}',
257 | './node_modules/gatsby-*/**/*.js',
258 | ],
259 | }
260 | },
261 | ```
262 |
263 |
264 |
245 | Duplicate identifier error: Duplicate identifier 'GatsbyImageSharpFixedFragment'
246 |
247 |
248 | If you see this error please run a `gatsby clean` to remove fragments in `.cache`, or set the `documentPaths` options as below:
249 |
250 | ```js
251 | // gatsby-config.js
252 | {
253 | resolve: 'gatsby-plugin-graphql-codegen',
254 | options: {
255 | documentPaths: [
256 | './src/**/*.{ts,tsx}',
257 | './node_modules/gatsby-*/**/*.js',
258 | ],
259 | }
260 | },
261 | ```
262 |
265 |
266 | Missing definition
268 |
269 | Are you using a monorepo? It's possible that the missing fragment's plugin is 'hoisted' (moved to workspace root's `node_modules`). A simple fix is use a `nohoist` config, supported by both lerna & yarn. Here's an example with yarn workspace, where `gatsby-transformer-sharp` is always installed in its project's `node_modules`.
270 |
271 | in your root's `package.json`
272 | ```json
273 | "workspaces": {
274 | "packages": ["packages/*"],
275 | "nohoist": [
276 | "**/gatsby-transformer-sharp"
277 | ]
278 | }
279 | ```
280 |
281 |
282 |
283 | ## Contribute to this repo
284 |
285 | All PRs / issues are welcomed.
286 |
287 | Steps to run in development:
288 |
289 | ```bash
290 | # 0
291 | git clone https://github.com/d4rekanguok/gatsby-typescript.git && cd gatsby-typescript
292 |
293 | # 1 Install deps
294 | yarn
295 |
296 | # 2 Hook up dependencies
297 | yarn bootstrap
298 |
299 | # 3 Build binaries
300 | lerna run build
301 |
302 | # 4 Run test
303 | yarn test
304 | ```
305 |
306 | You can test your code against the starters inside the repo. Don't forget to checkout the changes in those repo before sending a PR. Alternatively, use [yalc](https://github.com/whitecolor/yalc) to test the plugins in your own Gatsby project:
307 |
308 | ```bash
309 | # 1 Install yalc
310 | npm i yalc -G
311 |
312 | # 2 cd into, say, gatsby-plugin-ts
313 | cd packages/gatsby-plugin-ts
314 |
315 | # 3 Publish to yalc
316 | yalc publish
317 |
318 | # 4 cd into your gatsby project
319 | cd ../../my-gatsby-project
320 |
321 | # 5 Install yalc & re-install deps
322 | npm uninstall gatsby-plugin-ts && yalc add gatsby-plugin-ts
323 |
324 | npm install
325 |
326 | # 6 Subsequent update
327 | yalc update
328 |
329 | # 7 Done? remove yalc deps
330 | yalc remove --all
331 | ```
332 |
--------------------------------------------------------------------------------
/packages/gatsby-starter-ts/src/components/layout.css:
--------------------------------------------------------------------------------
1 | html {
2 | font-family: sans-serif;
3 | -ms-text-size-adjust: 100%;
4 | -webkit-text-size-adjust: 100%;
5 | }
6 | body {
7 | margin: 0;
8 | -webkit-font-smoothing: antialiased;
9 | -moz-osx-font-smoothing: grayscale;
10 | }
11 | article,
12 | aside,
13 | details,
14 | figcaption,
15 | figure,
16 | footer,
17 | header,
18 | main,
19 | menu,
20 | nav,
21 | section,
22 | summary {
23 | display: block;
24 | }
25 | audio,
26 | canvas,
27 | progress,
28 | video {
29 | display: inline-block;
30 | }
31 | audio:not([controls]) {
32 | display: none;
33 | height: 0;
34 | }
35 | progress {
36 | vertical-align: baseline;
37 | }
38 | [hidden],
39 | template {
40 | display: none;
41 | }
42 | a {
43 | background-color: transparent;
44 | -webkit-text-decoration-skip: objects;
45 | }
46 | a:active,
47 | a:hover {
48 | outline-width: 0;
49 | }
50 | abbr[title] {
51 | border-bottom: none;
52 | text-decoration: underline;
53 | text-decoration: underline dotted;
54 | }
55 | b,
56 | strong {
57 | font-weight: inherit;
58 | font-weight: bolder;
59 | }
60 | dfn {
61 | font-style: italic;
62 | }
63 | h1 {
64 | font-size: 2em;
65 | margin: 0.67em 0;
66 | }
67 | mark {
68 | background-color: #ff0;
69 | color: #000;
70 | }
71 | small {
72 | font-size: 80%;
73 | }
74 | sub,
75 | sup {
76 | font-size: 75%;
77 | line-height: 0;
78 | position: relative;
79 | vertical-align: baseline;
80 | }
81 | sub {
82 | bottom: -0.25em;
83 | }
84 | sup {
85 | top: -0.5em;
86 | }
87 | img {
88 | border-style: none;
89 | }
90 | svg:not(:root) {
91 | overflow: hidden;
92 | }
93 | code,
94 | kbd,
95 | pre,
96 | samp {
97 | font-family: monospace, monospace;
98 | font-size: 1em;
99 | }
100 | figure {
101 | margin: 1em 40px;
102 | }
103 | hr {
104 | box-sizing: content-box;
105 | height: 0;
106 | overflow: visible;
107 | }
108 | button,
109 | input,
110 | optgroup,
111 | select,
112 | textarea {
113 | font: inherit;
114 | margin: 0;
115 | }
116 | optgroup {
117 | font-weight: 700;
118 | }
119 | button,
120 | input {
121 | overflow: visible;
122 | }
123 | button,
124 | select {
125 | text-transform: none;
126 | }
127 | [type="reset"],
128 | [type="submit"],
129 | button,
130 | html [type="button"] {
131 | -webkit-appearance: button;
132 | }
133 | [type="button"]::-moz-focus-inner,
134 | [type="reset"]::-moz-focus-inner,
135 | [type="submit"]::-moz-focus-inner,
136 | button::-moz-focus-inner {
137 | border-style: none;
138 | padding: 0;
139 | }
140 | [type="button"]:-moz-focusring,
141 | [type="reset"]:-moz-focusring,
142 | [type="submit"]:-moz-focusring,
143 | button:-moz-focusring {
144 | outline: 1px dotted ButtonText;
145 | }
146 | fieldset {
147 | border: 1px solid silver;
148 | margin: 0 2px;
149 | padding: 0.35em 0.625em 0.75em;
150 | }
151 | legend {
152 | box-sizing: border-box;
153 | color: inherit;
154 | display: table;
155 | max-width: 100%;
156 | padding: 0;
157 | white-space: normal;
158 | }
159 | textarea {
160 | overflow: auto;
161 | }
162 | [type="checkbox"],
163 | [type="radio"] {
164 | box-sizing: border-box;
165 | padding: 0;
166 | }
167 | [type="number"]::-webkit-inner-spin-button,
168 | [type="number"]::-webkit-outer-spin-button {
169 | height: auto;
170 | }
171 | [type="search"] {
172 | -webkit-appearance: textfield;
173 | outline-offset: -2px;
174 | }
175 | [type="search"]::-webkit-search-cancel-button,
176 | [type="search"]::-webkit-search-decoration {
177 | -webkit-appearance: none;
178 | }
179 | ::-webkit-input-placeholder {
180 | color: inherit;
181 | opacity: 0.54;
182 | }
183 | ::-webkit-file-upload-button {
184 | -webkit-appearance: button;
185 | font: inherit;
186 | }
187 | html {
188 | font: 112.5%/1.45em georgia, serif;
189 | box-sizing: border-box;
190 | overflow-y: scroll;
191 | }
192 | * {
193 | box-sizing: inherit;
194 | }
195 | *:before {
196 | box-sizing: inherit;
197 | }
198 | *:after {
199 | box-sizing: inherit;
200 | }
201 | body {
202 | color: hsla(0, 0%, 0%, 0.8);
203 | font-family: georgia, serif;
204 | font-weight: normal;
205 | word-wrap: break-word;
206 | font-kerning: normal;
207 | -moz-font-feature-settings: "kern", "liga", "clig", "calt";
208 | -ms-font-feature-settings: "kern", "liga", "clig", "calt";
209 | -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
210 | font-feature-settings: "kern", "liga", "clig", "calt";
211 | }
212 | img {
213 | max-width: 100%;
214 | margin-left: 0;
215 | margin-right: 0;
216 | margin-top: 0;
217 | padding-bottom: 0;
218 | padding-left: 0;
219 | padding-right: 0;
220 | padding-top: 0;
221 | margin-bottom: 1.45rem;
222 | }
223 | h1 {
224 | margin-left: 0;
225 | margin-right: 0;
226 | margin-top: 0;
227 | padding-bottom: 0;
228 | padding-left: 0;
229 | padding-right: 0;
230 | padding-top: 0;
231 | margin-bottom: 1.45rem;
232 | color: inherit;
233 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
234 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
235 | font-weight: bold;
236 | text-rendering: optimizeLegibility;
237 | font-size: 2.25rem;
238 | line-height: 1.1;
239 | }
240 | h2 {
241 | margin-left: 0;
242 | margin-right: 0;
243 | margin-top: 0;
244 | padding-bottom: 0;
245 | padding-left: 0;
246 | padding-right: 0;
247 | padding-top: 0;
248 | margin-bottom: 1.45rem;
249 | color: inherit;
250 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
251 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
252 | font-weight: bold;
253 | text-rendering: optimizeLegibility;
254 | font-size: 1.62671rem;
255 | line-height: 1.1;
256 | }
257 | h3 {
258 | margin-left: 0;
259 | margin-right: 0;
260 | margin-top: 0;
261 | padding-bottom: 0;
262 | padding-left: 0;
263 | padding-right: 0;
264 | padding-top: 0;
265 | margin-bottom: 1.45rem;
266 | color: inherit;
267 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
268 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
269 | font-weight: bold;
270 | text-rendering: optimizeLegibility;
271 | font-size: 1.38316rem;
272 | line-height: 1.1;
273 | }
274 | h4 {
275 | margin-left: 0;
276 | margin-right: 0;
277 | margin-top: 0;
278 | padding-bottom: 0;
279 | padding-left: 0;
280 | padding-right: 0;
281 | padding-top: 0;
282 | margin-bottom: 1.45rem;
283 | color: inherit;
284 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
285 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
286 | font-weight: bold;
287 | text-rendering: optimizeLegibility;
288 | font-size: 1rem;
289 | line-height: 1.1;
290 | }
291 | h5 {
292 | margin-left: 0;
293 | margin-right: 0;
294 | margin-top: 0;
295 | padding-bottom: 0;
296 | padding-left: 0;
297 | padding-right: 0;
298 | padding-top: 0;
299 | margin-bottom: 1.45rem;
300 | color: inherit;
301 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
302 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
303 | font-weight: bold;
304 | text-rendering: optimizeLegibility;
305 | font-size: 0.85028rem;
306 | line-height: 1.1;
307 | }
308 | h6 {
309 | margin-left: 0;
310 | margin-right: 0;
311 | margin-top: 0;
312 | padding-bottom: 0;
313 | padding-left: 0;
314 | padding-right: 0;
315 | padding-top: 0;
316 | margin-bottom: 1.45rem;
317 | color: inherit;
318 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
319 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
320 | font-weight: bold;
321 | text-rendering: optimizeLegibility;
322 | font-size: 0.78405rem;
323 | line-height: 1.1;
324 | }
325 | hgroup {
326 | margin-left: 0;
327 | margin-right: 0;
328 | margin-top: 0;
329 | padding-bottom: 0;
330 | padding-left: 0;
331 | padding-right: 0;
332 | padding-top: 0;
333 | margin-bottom: 1.45rem;
334 | }
335 | ul {
336 | margin-left: 1.45rem;
337 | margin-right: 0;
338 | margin-top: 0;
339 | padding-bottom: 0;
340 | padding-left: 0;
341 | padding-right: 0;
342 | padding-top: 0;
343 | margin-bottom: 1.45rem;
344 | list-style-position: outside;
345 | list-style-image: none;
346 | }
347 | ol {
348 | margin-left: 1.45rem;
349 | margin-right: 0;
350 | margin-top: 0;
351 | padding-bottom: 0;
352 | padding-left: 0;
353 | padding-right: 0;
354 | padding-top: 0;
355 | margin-bottom: 1.45rem;
356 | list-style-position: outside;
357 | list-style-image: none;
358 | }
359 | dl {
360 | margin-left: 0;
361 | margin-right: 0;
362 | margin-top: 0;
363 | padding-bottom: 0;
364 | padding-left: 0;
365 | padding-right: 0;
366 | padding-top: 0;
367 | margin-bottom: 1.45rem;
368 | }
369 | dd {
370 | margin-left: 0;
371 | margin-right: 0;
372 | margin-top: 0;
373 | padding-bottom: 0;
374 | padding-left: 0;
375 | padding-right: 0;
376 | padding-top: 0;
377 | margin-bottom: 1.45rem;
378 | }
379 | p {
380 | margin-left: 0;
381 | margin-right: 0;
382 | margin-top: 0;
383 | padding-bottom: 0;
384 | padding-left: 0;
385 | padding-right: 0;
386 | padding-top: 0;
387 | margin-bottom: 1.45rem;
388 | }
389 | figure {
390 | margin-left: 0;
391 | margin-right: 0;
392 | margin-top: 0;
393 | padding-bottom: 0;
394 | padding-left: 0;
395 | padding-right: 0;
396 | padding-top: 0;
397 | margin-bottom: 1.45rem;
398 | }
399 | pre {
400 | margin-left: 0;
401 | margin-right: 0;
402 | margin-top: 0;
403 | margin-bottom: 1.45rem;
404 | font-size: 0.85rem;
405 | line-height: 1.42;
406 | background: hsla(0, 0%, 0%, 0.04);
407 | border-radius: 3px;
408 | overflow: auto;
409 | word-wrap: normal;
410 | padding: 1.45rem;
411 | }
412 | table {
413 | margin-left: 0;
414 | margin-right: 0;
415 | margin-top: 0;
416 | padding-bottom: 0;
417 | padding-left: 0;
418 | padding-right: 0;
419 | padding-top: 0;
420 | margin-bottom: 1.45rem;
421 | font-size: 1rem;
422 | line-height: 1.45rem;
423 | border-collapse: collapse;
424 | width: 100%;
425 | }
426 | fieldset {
427 | margin-left: 0;
428 | margin-right: 0;
429 | margin-top: 0;
430 | padding-bottom: 0;
431 | padding-left: 0;
432 | padding-right: 0;
433 | padding-top: 0;
434 | margin-bottom: 1.45rem;
435 | }
436 | blockquote {
437 | margin-left: 1.45rem;
438 | margin-right: 1.45rem;
439 | margin-top: 0;
440 | padding-bottom: 0;
441 | padding-left: 0;
442 | padding-right: 0;
443 | padding-top: 0;
444 | margin-bottom: 1.45rem;
445 | }
446 | form {
447 | margin-left: 0;
448 | margin-right: 0;
449 | margin-top: 0;
450 | padding-bottom: 0;
451 | padding-left: 0;
452 | padding-right: 0;
453 | padding-top: 0;
454 | margin-bottom: 1.45rem;
455 | }
456 | noscript {
457 | margin-left: 0;
458 | margin-right: 0;
459 | margin-top: 0;
460 | padding-bottom: 0;
461 | padding-left: 0;
462 | padding-right: 0;
463 | padding-top: 0;
464 | margin-bottom: 1.45rem;
465 | }
466 | iframe {
467 | margin-left: 0;
468 | margin-right: 0;
469 | margin-top: 0;
470 | padding-bottom: 0;
471 | padding-left: 0;
472 | padding-right: 0;
473 | padding-top: 0;
474 | margin-bottom: 1.45rem;
475 | }
476 | hr {
477 | margin-left: 0;
478 | margin-right: 0;
479 | margin-top: 0;
480 | padding-bottom: 0;
481 | padding-left: 0;
482 | padding-right: 0;
483 | padding-top: 0;
484 | margin-bottom: calc(1.45rem - 1px);
485 | background: hsla(0, 0%, 0%, 0.2);
486 | border: none;
487 | height: 1px;
488 | }
489 | address {
490 | margin-left: 0;
491 | margin-right: 0;
492 | margin-top: 0;
493 | padding-bottom: 0;
494 | padding-left: 0;
495 | padding-right: 0;
496 | padding-top: 0;
497 | margin-bottom: 1.45rem;
498 | }
499 | b {
500 | font-weight: bold;
501 | }
502 | strong {
503 | font-weight: bold;
504 | }
505 | dt {
506 | font-weight: bold;
507 | }
508 | th {
509 | font-weight: bold;
510 | }
511 | li {
512 | margin-bottom: calc(1.45rem / 2);
513 | }
514 | ol li {
515 | padding-left: 0;
516 | }
517 | ul li {
518 | padding-left: 0;
519 | }
520 | li > ol {
521 | margin-left: 1.45rem;
522 | margin-bottom: calc(1.45rem / 2);
523 | margin-top: calc(1.45rem / 2);
524 | }
525 | li > ul {
526 | margin-left: 1.45rem;
527 | margin-bottom: calc(1.45rem / 2);
528 | margin-top: calc(1.45rem / 2);
529 | }
530 | blockquote *:last-child {
531 | margin-bottom: 0;
532 | }
533 | li *:last-child {
534 | margin-bottom: 0;
535 | }
536 | p *:last-child {
537 | margin-bottom: 0;
538 | }
539 | li > p {
540 | margin-bottom: calc(1.45rem / 2);
541 | }
542 | code {
543 | font-size: 0.85rem;
544 | line-height: 1.45rem;
545 | }
546 | kbd {
547 | font-size: 0.85rem;
548 | line-height: 1.45rem;
549 | }
550 | samp {
551 | font-size: 0.85rem;
552 | line-height: 1.45rem;
553 | }
554 | abbr {
555 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
556 | cursor: help;
557 | }
558 | acronym {
559 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
560 | cursor: help;
561 | }
562 | abbr[title] {
563 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
564 | cursor: help;
565 | text-decoration: none;
566 | }
567 | thead {
568 | text-align: left;
569 | }
570 | td,
571 | th {
572 | text-align: left;
573 | border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
574 | font-feature-settings: "tnum";
575 | -moz-font-feature-settings: "tnum";
576 | -ms-font-feature-settings: "tnum";
577 | -webkit-font-feature-settings: "tnum";
578 | padding-left: 0.96667rem;
579 | padding-right: 0.96667rem;
580 | padding-top: 0.725rem;
581 | padding-bottom: calc(0.725rem - 1px);
582 | }
583 | th:first-child,
584 | td:first-child {
585 | padding-left: 0;
586 | }
587 | th:last-child,
588 | td:last-child {
589 | padding-right: 0;
590 | }
591 | tt,
592 | code {
593 | background-color: hsla(0, 0%, 0%, 0.04);
594 | border-radius: 3px;
595 | font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
596 | "Liberation Mono", Menlo, Courier, monospace;
597 | padding: 0;
598 | padding-top: 0.2em;
599 | padding-bottom: 0.2em;
600 | }
601 | pre code {
602 | background: none;
603 | line-height: 1.42;
604 | }
605 | code:before,
606 | code:after,
607 | tt:before,
608 | tt:after {
609 | letter-spacing: -0.2em;
610 | content: " ";
611 | }
612 | pre code:before,
613 | pre code:after,
614 | pre tt:before,
615 | pre tt:after {
616 | content: "";
617 | }
618 | @media only screen and (max-width: 480px) {
619 | html {
620 | font-size: 100%;
621 | }
622 | }
623 |
--------------------------------------------------------------------------------