diff --git a/CODEOWNERS b/CODEOWNERS new file mode 100644 index 0000000000000..35ca87584b213 --- /dev/null +++ b/CODEOWNERS @@ -0,0 +1 @@ +packages/gatsby/src/utils/source-nodes-api-runner.ts @gatsbyjs/integrations-collaboration diff --git a/packages/gatsby-plugin-remove-trailing-slashes/.babelrc b/deprecated-packages/gatsby-plugin-remove-trailing-slashes/.babelrc similarity index 100% rename from packages/gatsby-plugin-remove-trailing-slashes/.babelrc rename to deprecated-packages/gatsby-plugin-remove-trailing-slashes/.babelrc diff --git a/packages/gatsby-plugin-remove-trailing-slashes/.gitignore b/deprecated-packages/gatsby-plugin-remove-trailing-slashes/.gitignore similarity index 100% rename from packages/gatsby-plugin-remove-trailing-slashes/.gitignore rename to deprecated-packages/gatsby-plugin-remove-trailing-slashes/.gitignore diff --git a/packages/gatsby-plugin-remove-trailing-slashes/.npmignore b/deprecated-packages/gatsby-plugin-remove-trailing-slashes/.npmignore similarity index 100% rename from packages/gatsby-plugin-remove-trailing-slashes/.npmignore rename to deprecated-packages/gatsby-plugin-remove-trailing-slashes/.npmignore diff --git a/packages/gatsby-plugin-remove-trailing-slashes/CHANGELOG.md b/deprecated-packages/gatsby-plugin-remove-trailing-slashes/CHANGELOG.md similarity index 100% rename from packages/gatsby-plugin-remove-trailing-slashes/CHANGELOG.md rename to deprecated-packages/gatsby-plugin-remove-trailing-slashes/CHANGELOG.md diff --git a/packages/gatsby-plugin-remove-trailing-slashes/README.md b/deprecated-packages/gatsby-plugin-remove-trailing-slashes/README.md similarity index 91% rename from packages/gatsby-plugin-remove-trailing-slashes/README.md rename to deprecated-packages/gatsby-plugin-remove-trailing-slashes/README.md index 7a7bf42f62a42..de2dd6b142789 100644 --- a/packages/gatsby-plugin-remove-trailing-slashes/README.md +++ b/deprecated-packages/gatsby-plugin-remove-trailing-slashes/README.md @@ -1,6 +1,6 @@ # gatsby-plugin-remove-trailing-slashes -**Please Note:** This plugin will soon be **deprecated**, please use Gatsby's `trailingSlash` option. Read the [documentation](https://gatsby.dev/trailing-slash) to learn more. +**Please Note:** This plugin is **deprecated**, please use Gatsby's `trailingSlash` option. Read the [documentation](https://gatsby.dev/trailing-slash) to learn more. This plugin removes trailing slashes from your project's paths. For example, `yoursite.com/about/` becomes `yoursite.com/about`. diff --git a/packages/gatsby-plugin-remove-trailing-slashes/index.js b/deprecated-packages/gatsby-plugin-remove-trailing-slashes/index.js similarity index 100% rename from packages/gatsby-plugin-remove-trailing-slashes/index.js rename to deprecated-packages/gatsby-plugin-remove-trailing-slashes/index.js diff --git a/packages/gatsby-plugin-remove-trailing-slashes/package.json b/deprecated-packages/gatsby-plugin-remove-trailing-slashes/package.json similarity index 100% rename from packages/gatsby-plugin-remove-trailing-slashes/package.json rename to deprecated-packages/gatsby-plugin-remove-trailing-slashes/package.json diff --git a/packages/gatsby-plugin-remove-trailing-slashes/src/__tests__/gatsby-node.js b/deprecated-packages/gatsby-plugin-remove-trailing-slashes/src/__tests__/gatsby-node.js similarity index 100% rename from packages/gatsby-plugin-remove-trailing-slashes/src/__tests__/gatsby-node.js rename to deprecated-packages/gatsby-plugin-remove-trailing-slashes/src/__tests__/gatsby-node.js diff --git a/packages/gatsby-plugin-remove-trailing-slashes/src/gatsby-node.js b/deprecated-packages/gatsby-plugin-remove-trailing-slashes/src/gatsby-node.js similarity index 100% rename from packages/gatsby-plugin-remove-trailing-slashes/src/gatsby-node.js rename to deprecated-packages/gatsby-plugin-remove-trailing-slashes/src/gatsby-node.js diff --git a/docs/docs/debugging-html-builds.md b/docs/docs/debugging-html-builds.md index 6833c58aa146d..915980b30cabf 100644 --- a/docs/docs/debugging-html-builds.md +++ b/docs/docs/debugging-html-builds.md @@ -50,7 +50,7 @@ const isBrowser = typeof window !== "undefined" export default function MyComponent() { let loggedIn = false if (isBrowser) { - window.localstorage.getItem("isLoggedIn") === "true" + window.localStorage.getItem("isLoggedIn") === "true" } return
Am I logged in? {loggedIn}
diff --git a/docs/docs/how-to/styling/using-local-fonts.md b/docs/docs/how-to/styling/using-local-fonts.md index dc45361dbb157..160ad93962f51 100644 --- a/docs/docs/how-to/styling/using-local-fonts.md +++ b/docs/docs/how-to/styling/using-local-fonts.md @@ -12,7 +12,7 @@ This guide uses the Gatsby [default starter](https://github.com/gatsbyjs/gatsby- Get started by using local fonts by adding them to your project. Copy the font file into your Gatsby project, for example, `src/fonts/fontname.woff2`. -**NOTE:** It’s recommended to limit custom font usage to only the essential needed for performance. +**NOTE:** For performance reasons, it’s recommended to limit the number of custom fonts added. The Gatsby default starter project adds [browser safe font](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Default_fonts) styling in the `layout.css` file. diff --git a/docs/docs/how-to/testing/end-to-end-testing.md b/docs/docs/how-to/testing/end-to-end-testing.md index 61aaaa64e3070..fa2c422a2447c 100644 --- a/docs/docs/how-to/testing/end-to-end-testing.md +++ b/docs/docs/how-to/testing/end-to-end-testing.md @@ -13,15 +13,20 @@ To run Gatsby's development server and Cypress at the same time, you'll use the npm install --save-dev cypress start-server-and-test ``` -We also want the URLs used by `cy.visit()` or `cy.request()` to be prefixed, hence you have to create the file `cypress.json` at the root of your project with the following content: +You need to create a config file for Cypress at the root of the project called `cypress.config.js`. You can use it to preface the URLs used by `cy.visit()` or `cy.request` as well as set the folder the tests are in by adding the following: -```json:title=cypress.json -{ - "baseUrl": "http://localhost:8000/" -} +```js:title=cypress.config.js +const { defineConfig } = require('cypress') + +module.exports = defineConfig({ + e2e: { + baseUrl: 'http://localhost:8000', + specPattern: "cypress/e2e" + } +}) ``` -Last but not least you add additional scripts to your `package.json` to run Cypress: +You also need to add additional scripts to your `package.json` to run Cypress: ```json:title=package.json { @@ -37,7 +42,7 @@ Last but not least you add additional scripts to your `package.json` to run Cypr Type `npm run test:e2e` in your command line and see Cypress running for the first time. A folder named `cypress` will be created at the root of your project and a new application window will pop up. [Cypress' getting started guide](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#) is a good start to learn how to write tests! -_Important note_: If you are running Gatsby with the `--https` flag, whether using your own or automatically generated certificates, you will also need to tell `start-server-and-test` to disable HTTPS certificate checks (otherwise it will wait forever and never actually launch Cypress. You do this by passing in an environmental variable: `START_SERVER_AND_TEST_INSECURE=1`. [start-server-and-test docs](https://github.com/bahmutov/start-server-and-test#disable-https-certificate-checks)). +**Please note:** If you are running Gatsby with the `--https` flag, whether using your own or automatically generated certificates, you will also need to tell `start-server-and-test` to disable HTTPS certificate checks (otherwise it will wait forever and never actually launch Cypress. You do this by passing in an environmental variable: `START_SERVER_AND_TEST_INSECURE=1`. [start-server-and-test docs](https://github.com/bahmutov/start-server-and-test#disable-https-certificate-checks)). This means your `test:e2e` script would look like this: @@ -75,26 +80,16 @@ To use cypress-axe, you have to install the `cypress-axe` and [axe-core](https:/ npm install --save-dev cypress-axe axe-core @testing-library/cypress ``` -Then you add the `cypress-axe` and `@testing-library/cypress` commands in `cypress/support/index.js`: +Then you add the `cypress-axe` and `@testing-library/cypress` commands in `cypress/support/e2e.js`: -```js:title=cypress/support/index.js -import "./commands" +```js:title=cypress/support/e2e.js //highlight-start import "cypress-axe" import "@testing-library/cypress/add-commands" //highlight-end ``` -Cypress will look for tests inside the `cypress/integration` folder, but you can change the default test folder if you want. Because you're writing end-to-end tests, create a new folder called `cypress/e2e`, and use it as your `integrationFolder` in your `cypress.json`: - -```json:title=cypress.json -{ - "baseUrl": "http://localhost:8000/", - "integrationFolder": "cypress/e2e" // highlight-line -} -``` - -Create a new file inside `cypress/e2e` folder and name it `accessibility.test.js`. +Create a folder inside the cypress folder and a new file inside `cypress/e2e` folder and name it `accessibility.test.js`. You'll use the `beforeEach` hook to run some commands before each test. This is what they do: @@ -109,7 +104,8 @@ Finally, inside the first test, you'll use the `checkA11y` command from `cypress describe("Accessibility tests", () => { beforeEach(() => { - cy.visit("/").get("main").injectAxe() + cy.visit("/").get("main") + cy.injectAxe() }) it("Has no detectable accessibility violations on load", () => { cy.checkA11y() @@ -132,7 +128,8 @@ The following test is for the [gatsby-default-starter](https://github.com/gatsby describe("Accessibility tests", () => { beforeEach(() => { - cy.visit("/").get("main").injectAxe() + cy.visit("/").get("main") + cy.injectAxe() }) it("Has no detectable accessibility violations on load", () => { cy.checkA11y() @@ -156,11 +153,13 @@ You'll now write another test for the `gatsby-default-starter` homepage. In this describe("Accessibility tests", () => { beforeEach(() => { - cy.visit("/").get("main").injectAxe() + cy.visit("/").get("main") + cy.injectAxe() }) it("Has no detectable accessibility violations on load", () => { cy.checkA11y() }) + it("Navigates to page 2 and checks for accessibility violations", () => { cy.findByText(/go to page 2/i) .click() diff --git a/docs/docs/how-to/testing/unit-testing.md b/docs/docs/how-to/testing/unit-testing.md index 1f7582bb464b7..5505169e71539 100644 --- a/docs/docs/how-to/testing/unit-testing.md +++ b/docs/docs/how-to/testing/unit-testing.md @@ -237,7 +237,7 @@ If you are using TypeScript, you need to install typings packages and make two changes to your config. ```shell -npm install --save-dev @types/jest @types/react-test-renderer +npm install --save-dev @types/jest @types/react-test-renderer @babel/preset-typescript ``` Update the transform in `jest.config.js` to run `jest-preprocess` on files in your project's root directory. diff --git a/docs/docs/reference/built-in-components/gatsby-head.md b/docs/docs/reference/built-in-components/gatsby-head.md index 1b0c7abbf356d..5304406ba5915 100644 --- a/docs/docs/reference/built-in-components/gatsby-head.md +++ b/docs/docs/reference/built-in-components/gatsby-head.md @@ -88,6 +88,7 @@ You'll need to be aware of these things when using Gatsby Head: - The `Head` function needs to return valid JSX. - Valid tags inside the `Head` function are: `link`, `meta`, `style`, `title`, `base`, `script`, and `noscript`. - Data block `