Skip to content

Commit

Permalink
Merge branch 'master' into k-develop-ssr
Browse files Browse the repository at this point in the history
  • Loading branch information
KyleAMathews committed Nov 17, 2020
2 parents 67e0d0c + 6858f22 commit 02dceb9
Show file tree
Hide file tree
Showing 157 changed files with 1,730 additions and 1,083 deletions.
1 change: 1 addition & 0 deletions benchmarks/source-contentful/gatsby-config.js
Expand Up @@ -27,6 +27,7 @@ module.exports = {
{
resolve: "gatsby-source-contentful",
options: contentfulConfig,
pageLimit: 1000,
},
],
}
2 changes: 1 addition & 1 deletion benchmarks/source-strapi/package.json
Expand Up @@ -14,7 +14,7 @@
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"sharp": "^0.25.4"
"sharp": "^0.26.3"
},
"devDependencies": {
"prettier": "2.0.5"
Expand Down
26 changes: 16 additions & 10 deletions docs/docs/recipes/styling-css.md
Expand Up @@ -395,35 +395,41 @@ Hosting your own [Google Fonts](https://fonts.google.com/) locally within a proj

- A [Gatsby site](/docs/quick-start)
- The [Gatsby CLI](/docs/gatsby-cli/) installed
- Choosing a font package from [the typefaces project](https://github.com/KyleAMathews/typefaces)
- A chosen font package from [Fontsource](https://github.com/fontsource/fontsource)

### Directions

1. Run `npm install typeface-your-chosen-font`, replacing `your-chosen-font` with the name of the font you want to install from [the typefaces project](https://github.com/KyleAMathews/typefaces).
This example shows how to set up the [Open Sans](https://fonts.google.com/specimen/Open+Sans) font. If you have a different Google Font you want to use, you can find the corresponding package in [NPM](https://www.npmjs.com/search?q=fontsource) or the [packages directory in the Fontsource repository](https://github.com/fontsource/fontsource/tree/master/packages).

An example to load the popular 'Source Sans Pro' font would be: `npm install typeface-source-sans-pro`.
1. Run `npm install fontsource-open-sans` to download the necessary package files.

2. Add `import "typeface-your-chosen-font"` to a layout template, page component, or `gatsby-browser.js`.
2. Then within your app entry file or site component, import the font package. It is recommended you import it via the layout template (`layout.js`). However, importing via page component (`index.js`), or `gatsby-browser.js` are viable alternatives.

```jsx:title=src/components/layout.js
import "typeface-your-chosen-font"
import "fontsource-open-sans" // Defaults to weight 400 with all styles included.
```

If you wish to select a particular weight or style, you may specify it by changing the import path.

```jsx:title=src/components/layout.js
import "fontsource-open-sans/500.css" // Weight 500 with all styles included.
import "fontsource-open-sans/900-normal.css" // Select either normal or italic.
```

**Note**: The range of supported weights and styles a font may support is shown in each package's README file.

3. Once it's imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.

```css:title=src/components/layout.css
body {
font-family: "Your Chosen Font";
font-family: "Open Sans";
}
```

_NOTE: So for the above example, the relevant CSS declaration would be `font-family: 'Source Sans Pro';`_

### Additional resources

- [Fontsource repo on GitHub](https://github.com/fontsource/fontsource)
- [Typography.js](/docs/typography-js/) - Another option for using Google fonts on a Gatsby site
- [The Typefaces Project Docs](https://github.com/KyleAMathews/typefaces/blob/master/README.md)
- [Live example on Kyle Mathews' blog](https://www.bricolage.io/typefaces-easiest-way-to-self-host-fonts/)

## Using Font Awesome

Expand Down
30 changes: 13 additions & 17 deletions docs/docs/using-web-fonts.md
Expand Up @@ -18,36 +18,32 @@ Some examples of web font services include [Google Fonts](https://fonts.google.c

### Using Google Fonts

The fastest way to get started using Google Fonts is by choosing a font from [the typefaces project](https://github.com/KyleAMathews/typefaces). This example shows how you can add Open Sans to your project.
The fastest way to get started using Google Fonts is by choosing a font from [Fontsource](https://github.com/fontsource/fontsource).

First, install the typeface package with npm:
This example shows how to set up the [Open Sans](https://fonts.google.com/specimen/Open+Sans) font. If you have a different Google Font you want to use, you can find the corresponding package in [NPM](https://www.npmjs.com/search?q=fontsource) or the [packages directory in the Fontsource repository](https://github.com/fontsource/fontsource/tree/master/packages).

```bash
npm install --save typeface-open-sans
```
1. Run `npm install fontsource-open-sans` to download the necessary package files.

Or with yarn:
2. Then within your app entry file or site component, import the font package. It is recommended you import it via the layout template (`layout.js`). However, importing via page component (`index.js`), or `gatsby-browser.js` are viable alternatives.

```bash
yarn add typeface-open-sans
```jsx:title=src/components/layout.js
import "fontsource-open-sans" // Defaults to weight 400 with all styles included.
```

In your `layout.js` file, import the typeface.
If you wish to select a particular weight or style, you may specify it by changing the import path.

```jsx:title=src/components/layout.js
import "typeface-open-sans"
import "fontsource-open-sans/500.css" // Weight 500 with all styles included.
import "fontsource-open-sans/900-normal.css" // Select either normal or italic.
```

Next, add the typeface name to the appropriate place in your CSS. In this case, you will override the `body` element's `font-family` default values.
**Note**: The range of supported weights and styles a font may support is shown in each package's README file.

3. Once it's imported, you can reference the font name in a CSS stylesheet, CSS Module, or CSS-in-JS.

```css:title=src/components/layout.css
body {
color: hsla(0, 0%, 0%, 0.8);
// highlight-next-line
font-family: "Open Sans", georgia, serif;
font-weight: normal;
word-wrap: break-word;
font-kerning: normal;
font-family: "Open Sans";
}
```

Expand Down
2 changes: 1 addition & 1 deletion e2e-tests/development-runtime/cypress.json
Expand Up @@ -2,5 +2,5 @@
"baseUrl": "http://localhost:8000",
"failOnStatusCode": false,
"chromeWebSecurity": false,
"defaultCommandTimeout": 10000
"defaultCommandTimeout": 30000
}
9 changes: 3 additions & 6 deletions lerna.json
Expand Up @@ -4,13 +4,10 @@
"license": "MIT"
},
"publish": {
"allowBranch": ["master", "release/*"],
"bump": "prerelease",
"allowBranch": "release/*",
"bump": "patch",
"conventionalCommits": true,
"message": "chore(release): Publish pre-release",
"preid": "next",
"preDistTag": "next",
"noChangelog": true
"message": "chore(release): Publish"
},
"bootstrap": {
"ignore": ["**/gatsby-admin"]
Expand Down
19 changes: 12 additions & 7 deletions package.json
@@ -1,9 +1,9 @@
{
"devDependencies": {
"@babel/core": "^7.11.6",
"@babel/node": "^7.10.5",
"@babel/plugin-transform-typescript": "^7.11.0",
"@babel/runtime": "^7.11.2",
"@babel/core": "^7.12.3",
"@babel/node": "^7.12.6",
"@babel/plugin-transform-typescript": "^7.12.1",
"@babel/runtime": "^7.12.5",
"@lerna/prompt": "3.18.5",
"@types/babel__code-frame": "^7.0.2",
"@types/better-queue": "^3.8.2",
Expand Down Expand Up @@ -94,7 +94,7 @@
},
"resolutions": {
"theme-ui": "0.4.0-rc.8",
"csstype": "2.6.13"
"csstype": "2.6.14"
},
"engines": {
"yarn": "^1.17.3",
Expand Down Expand Up @@ -140,9 +140,14 @@
"plop": "plop",
"prebootstrap": "yarn",
"prettier": "prettier \"**/*.{md,css,scss,yaml,yml}\"",
"publish": "node scripts/check-publish-access && node scripts/clear-package-dir --verbose && lerna publish",
"prepublishOnly": "node scripts/check-publish-access",
"prepack": "node scripts/clear-package-dir --verbose",
"publish": "echo \"Use `yarn publish-next` or `yarn publish-release` instead of `yarn run publish`\"",
"publish-canary": "lerna publish --canary --yes",
"publish-next": "lerna publish --npm-tag=next --bump=prerelease",
"publish-preminor": "lerna publish preminor --pre-dist-tag=next --preid=next --force-publish --allow-branch=master --message=\"chore(release): Publish next pre-minor\"",
"publish-next": "lerna publish prerelease --pre-dist-tag=next --preid=next --allow-branch=master --message=\"chore(release): Publish next\"",
"publish-rc": "lerna publish prerelease --pre-dist-tag=rc --preid=rc --message=\"chore(release): Publish rc\"",
"publish-release": "lerna publish",
"test": "npm-run-all -s lint jest test:peril",
"test:coverage": "jest --coverage",
"test:update": "jest --updateSnapshot",
Expand Down
4 changes: 2 additions & 2 deletions packages/babel-plugin-remove-graphql-queries/package.json
Expand Up @@ -9,8 +9,8 @@
},
"homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/babel-plugin-remove-graphql-queries#readme",
"devDependencies": {
"@babel/cli": "^7.11.6",
"@babel/core": "^7.11.6",
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"babel-preset-gatsby-package": "^0.7.0-next.0",
"cross-env": "^7.0.2"
},
Expand Down
8 changes: 6 additions & 2 deletions packages/babel-plugin-remove-graphql-queries/src/index.ts
Expand Up @@ -166,8 +166,12 @@ function isGraphqlTag(tag: NodePath, tagName: string = `graphql`): boolean {
return (tag.get(`property`) as NodePath<Identifier>).node.name === tagName
}

if (importPath.isImportSpecifier())
return importPath.node.imported.name === tagName
if (importPath.isImportSpecifier()) {
if (importPath.node.imported.type === `Identifier`) {
return importPath.node.imported.name === tagName
}
return false
}

if (importPath.isObjectProperty())
return (importPath.get(`key`) as NodePath<Identifier>).node.name === tagName
Expand Down
14 changes: 7 additions & 7 deletions packages/babel-preset-gatsby-package/package.json
Expand Up @@ -9,14 +9,14 @@
},
"homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/babel-preset-gatsby-package#readme",
"dependencies": {
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-optional-chaining": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.11.5",
"@babel/plugin-transform-typescript": "^7.11.0",
"@babel/preset-env": "^7.11.5",
"@babel/preset-flow": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/plugin-transform-typescript": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-flow": "^7.12.1",
"@babel/preset-react": "^7.12.5",
"babel-plugin-dynamic-import-node": "^2.3.3",
"core-js": "^3.7.0"
},
Expand Down
18 changes: 9 additions & 9 deletions packages/babel-preset-gatsby/package.json
Expand Up @@ -9,15 +9,15 @@
},
"homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/babel-preset-gatsby#readme",
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
"@babel/plugin-proposal-optional-chaining": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.11.5",
"@babel/plugin-transform-spread": "^7.11.0",
"@babel/preset-env": "^7.11.5",
"@babel/preset-react": "^7.10.4",
"@babel/runtime": "^7.11.2",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/plugin-transform-spread": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-react": "^7.12.5",
"@babel/runtime": "^7.12.5",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-plugin-macros": "^2.8.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
Expand All @@ -36,7 +36,7 @@
"watch": "babel -w src --out-dir . --ignore \"**/__tests__\" --ignore \"**/utils/path-serializer.ts\" --extensions \".ts,.js\""
},
"devDependencies": {
"@babel/cli": "^7.11.6",
"@babel/cli": "^7.12.1",
"babel-preset-gatsby-package": "^0.7.0-next.0",
"cross-env": "^7.0.2",
"slash": "^3.0.0"
Expand Down
8 changes: 5 additions & 3 deletions packages/create-gatsby/package.json
Expand Up @@ -17,24 +17,26 @@
],
"devDependencies": {
"@ascorbic/worker-threads-shim": "^1.0.0",
"@babel/runtime": "^7.12.1",
"@babel/runtime": "^7.12.5",
"@types/configstore": "^4.0.0",
"@types/fs-extra": "^9.0.2",
"@types/node": "^14.14.5",
"ansi-wordwrap": "^1.0.2",
"common-tags": "^1.8.0",
"enquirer": "^2.3.6",
"eslint": "^7.12.1",
"execa": "^4.0.3",
"execa": "^4.1.0",
"fs-extra": "^9.0.1",
"gatsby-plugin-utils": "^0.4.0-next.0",
"joi": "^17.2.1",
"microbundle": "^0.12.4",
"node-fetch": "^2.6.1",
"prettier": "^2.1.2",
"string-length": "^4.0.1",
"terminal-link": "^2.1.1",
"tiny-spin": "^1.0.2",
"typescript": "^4.0.5"
"typescript": "^4.0.5",
"uuid": "3.4.0"
},
"repository": {
"type": "git",
Expand Down
3 changes: 2 additions & 1 deletion packages/create-gatsby/src/cmses.json
Expand Up @@ -3,5 +3,6 @@
"gatsby-source-contentful": { "message": "Contentful" },
"gatsby-source-sanity": { "message": "Sanity" },
"gatsby-source-datocms": { "message": "DatoCMS" },
"gatsby-source-shopify": { "message": "Shopify" }
"gatsby-source-shopify": { "message": "Shopify" },
"gatsby-plugin-netlify-cms": {"message": "Netlify CMS", "dependencies": ["netlify-cms-app"]}
}

0 comments on commit 02dceb9

Please sign in to comment.