diff --git a/docs/contributing/docs-and-blog-components.md b/docs/contributing/docs-and-blog-components.md index 6dace3dd1257a..2c9274a8ed3cc 100644 --- a/docs/contributing/docs-and-blog-components.md +++ b/docs/contributing/docs-and-blog-components.md @@ -354,4 +354,4 @@ plugins: [ ] ``` -Line numbers and line highlighting can be added to code blocks as well, and is explained in detail in the [`gatsby-remark-prismjs` README](/packages/gatsby-remark-prismjs/?=remark#optional-add-line-highlighting-styles). +Line numbers and line highlighting can be added to code blocks as well, and is explained in detail in the [`gatsby-remark-prismjs` README](/plugins/gatsby-remark-prismjs/?=remark#optional-add-line-highlighting-styles). diff --git a/docs/contributing/gatsby-style-guide.md b/docs/contributing/gatsby-style-guide.md index b52849e6817c1..c993a1329baeb 100644 --- a/docs/contributing/gatsby-style-guide.md +++ b/docs/contributing/gatsby-style-guide.md @@ -29,7 +29,7 @@ examples: - [Reference guide overviews](/docs/styling/) - [Recipes](/docs/recipes/) - [Tutorials](/docs/tutorial/part-one/) -- [Plugin README](/packages/gatsby-source-filesystem/) +- [Plugin README](/plugins/gatsby-source-filesystem/) - [Starter README](https://github.com/gatsbyjs/gatsby-starter-default) Please see the [Docs templates](/contributing/docs-templates/) for guidelines on how to format the above kinds of documents, as well as tips for different types of guide articles. diff --git a/docs/contributing/how-to-make-a-reproducible-test-case.md b/docs/contributing/how-to-make-a-reproducible-test-case.md index c44a335f5a181..defc714664ca9 100644 --- a/docs/contributing/how-to-make-a-reproducible-test-case.md +++ b/docs/contributing/how-to-make-a-reproducible-test-case.md @@ -17,7 +17,7 @@ A reproducible test case is a great way to share a specific environment that cau ## Steps to create a reproducible test case - Create a new Gatsby site with a starter, the official `hello-world` starter is a great 'barebones' starting point here: `gatsby new bug-repro https://github.com/gatsbyjs/gatsby-starter-hello-world` -- Add any Gatsby plugins that relate to the issue. For example, if you're having problems with Gatsby MDX you should install and configure [`gatsby-plugin-mdx`](/packages/gatsby-plugin-mdx/). Only add plugins that are needed to demonstrate the problem. +- Add any Gatsby plugins that relate to the issue. For example, if you're having problems with Gatsby MDX you should install and configure [`gatsby-plugin-mdx`](/plugins/gatsby-plugin-mdx/). Only add plugins that are needed to demonstrate the problem. - Add the code needed to recreate the error you've seen. - Publish the code (your GitHub account is a good place to do this) and then link to it when [creating an issue](/contributing/how-to-file-an-issue/). diff --git a/docs/contributing/how-to-write-a-plugin-readme.md b/docs/contributing/how-to-write-a-plugin-readme.md index 966e334437121..a4c6c70b29c14 100644 --- a/docs/contributing/how-to-write-a-plugin-readme.md +++ b/docs/contributing/how-to-write-a-plugin-readme.md @@ -5,7 +5,7 @@ issue: https://github.com/gatsbyjs/gatsby/issues/21599 ## Near-perfect example of a plugin README -[`gatsby-source-filesystem`](/packages/gatsby-source-filesystem/) +[`gatsby-source-filesystem`](/plugins/gatsby-source-filesystem/) ```markdown ## Description diff --git a/docs/contributing/translation/sync-guide.md b/docs/contributing/translation/sync-guide.md index 73160e7076b9e..f6f7569ec8cea 100644 --- a/docs/contributing/translation/sync-guide.md +++ b/docs/contributing/translation/sync-guide.md @@ -126,7 +126,7 @@ The only necessary change is to ensure the translated content carries over these These changes involve updating the URL of a link: ```diff -- Please see our [plugins page](/packages). +- Please see our [plugins page](/plugins). + Please see our [plugins page](/plugins). ``` diff --git a/docs/docs/add-page-metadata.md b/docs/docs/add-page-metadata.md index a0cb3c3a23ed4..3824ab097cf39 100644 --- a/docs/docs/add-page-metadata.md +++ b/docs/docs/add-page-metadata.md @@ -8,7 +8,7 @@ Adding metadata to pages (such as a title or description) is key in helping sear [React Helmet](https://github.com/nfl/react-helmet) is a package that provides a React component interface for you to manage your [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head). -Gatsby's [react helmet plugin](/packages/gatsby-plugin-react-helmet/) provides drop-in support for server rendering data added with React Helmet. Using the plugin, attributes you add to React Helmet will be added to the static HTML pages that Gatsby builds. +Gatsby's [react helmet plugin](/plugins/gatsby-plugin-react-helmet/) provides drop-in support for server rendering data added with React Helmet. Using the plugin, attributes you add to React Helmet will be added to the static HTML pages that Gatsby builds. ## Using `React Helmet` and `gatsby-plugin-react-helmet` diff --git a/docs/docs/adding-a-shopping-cart-with-snipcart.md b/docs/docs/adding-a-shopping-cart-with-snipcart.md index c506bf51ad7f1..30d92417961d1 100644 --- a/docs/docs/adding-a-shopping-cart-with-snipcart.md +++ b/docs/docs/adding-a-shopping-cart-with-snipcart.md @@ -10,7 +10,7 @@ Combine it with a source of products (like a CMS or an e-commerce platform such To get started, you'll need to have the following set up: -- A Gatsby site with [`gatsby-plugin-snipcart`](/packages/gatsby-plugin-snipcart/) installed +- A Gatsby site with [`gatsby-plugin-snipcart`](/plugins/gatsby-plugin-snipcart/) installed - A [Snipcart](https://snipcart.com/) account - A Snipcart test API key - A list of products to sell @@ -186,7 +186,7 @@ The following quote is from the Snipcart [payment gateway page](https://app.snip ## Other resources - [Build an E-commerce Site with Gatsby, DatoCMS, and Snipcart](/tutorial/e-commerce-with-datocms-and-snipcart/) tutorial -- [`gatsby-plugin-snipcart`](/packages/gatsby-plugin-snipcart/) +- [`gatsby-plugin-snipcart`](/plugins/gatsby-plugin-snipcart/) - [OneShopper Gatsby starter](/starters/rohitguptab/OneShopper/) - Reference guide on [sourcing from Etsy](/docs/sourcing-from-etsy/) - Reference guide on [processing payments with Stripe](/docs/how-to/adding-common-features/processing-payments-with-stripe/) diff --git a/docs/docs/adding-search-with-algolia.md b/docs/docs/adding-search-with-algolia.md index fc4bc45a2ba2d..9d7fefde6cf39 100644 --- a/docs/docs/adding-search-with-algolia.md +++ b/docs/docs/adding-search-with-algolia.md @@ -191,7 +191,7 @@ The guide will use the following frameworks: - [React InstantSearch](https://community.algolia.com/react-instantsearch), a component library provided by Algolia for easily building search interfaces. - [Algolia Search](https://www.npmjs.com/package/algoliasearch) provides the API client for calling Algolia. -- [Styled Components](https://styled-components.com) for embedding the CSS in the code, integrated using the [Gatsby styled component plugin](/packages/gatsby-plugin-styled-components/). +- [Styled Components](https://styled-components.com) for embedding the CSS in the code, integrated using the [Gatsby styled component plugin](/plugins/gatsby-plugin-styled-components/). - [Styled Icons](https://styled-icons.js.org/) provides the magnifying glass icon for the search bar. Styled Components can also be replaced by any other CSS solution you prefer. diff --git a/docs/docs/api-specification.md b/docs/docs/api-specification.md index 80518bf159ace..c7e874d051f0d 100644 --- a/docs/docs/api-specification.md +++ b/docs/docs/api-specification.md @@ -21,13 +21,13 @@ Plugins can extend Gatsby in many ways: - Adding things to the rendered HTML (e.g. meta tags, analytics JS snippets like Google Analytics) - Writing out things to build directory based on site data (e.g. service worker, sitemap, RSS feed) -A single plugin can use multiple APIs to accomplish its purpose. E.g. the plugin for the CSS-in-JS library [Glamor](/packages/gatsby-plugin-glamor/): +A single plugin can use multiple APIs to accomplish its purpose. E.g. the plugin for the CSS-in-JS library [Glamor](/plugins/gatsby-plugin-glamor/): 1. modifies the webpack config to add its plugin 2. adds a Babel plugin to replace React's default createElement 3. modifies server rendering to extract out the critical CSS for each rendered page and inline the CSS in the `` of that HTML page. -Plugins can also depend on other plugins. [The Sharp plugin](/packages/gatsby-plugin-sharp/) exposes a number of high-level APIs for transforming images that several other Gatsby image plugins depend on. [gatsby-transformer-remark](/packages/gatsby-transformer-remark/) does basic markdown->HTML transformation but exposes an API to allow other plugins to intervene in the conversion process e.g. [gatsby-remark-prismjs](/packages/gatsby-remark-prismjs/) which adds highlighting to code blocks. +Plugins can also depend on other plugins. [The Sharp plugin](/plugins/gatsby-plugin-sharp/) exposes a number of high-level APIs for transforming images that several other Gatsby image plugins depend on. [gatsby-transformer-remark](/plugins/gatsby-transformer-remark/) does basic markdown->HTML transformation but exposes an API to allow other plugins to intervene in the conversion process e.g. [gatsby-remark-prismjs](/plugins/gatsby-remark-prismjs/) which adds highlighting to code blocks. Transformer plugins are decoupled from source plugins. Transformer plugins look at the media type of new nodes created by source plugins to decide if they can transform it or not. Which means that a markdown transformer plugin can transform markdown from any source without any other configuration e.g. from a file, a code comment, or external service like Trello which supports markdown in some of its data fields. diff --git a/docs/docs/building-an-e-commerce-site.md b/docs/docs/building-an-e-commerce-site.md index bf4bc0d56b7b1..410fc1a00cd24 100644 --- a/docs/docs/building-an-e-commerce-site.md +++ b/docs/docs/building-an-e-commerce-site.md @@ -2,7 +2,7 @@ title: Building an E-commerce Site --- -The speed and performance of sites built with Gatsby make it a great tool for building e-commerce sites. There are existing plugins for connecting services like [Shopify](/packages/gatsby-source-shopify/) and [Snipcart](/packages/gatsby-plugin-snipcart/) to Gatsby, and this section contains reference guides to help get things setup. +The speed and performance of sites built with Gatsby make it a great tool for building e-commerce sites. There are existing plugins for connecting services like [Shopify](/plugins/gatsby-source-shopify/) and [Snipcart](/plugins/gatsby-plugin-snipcart/) to Gatsby, and this section contains reference guides to help get things setup. To see examples of e-commerce sites built with Gatsby, check out the [showcase](/showcase/?filters%5B0%5D=E-commerce). diff --git a/docs/docs/building-an-ecommerce-site-with-shopify.md b/docs/docs/building-an-ecommerce-site-with-shopify.md index 3244cda2d2aa3..7dd11c62648db 100644 --- a/docs/docs/building-an-ecommerce-site-with-shopify.md +++ b/docs/docs/building-an-ecommerce-site-with-shopify.md @@ -17,7 +17,7 @@ If you are already comfortable with Gatsby and Shopify, you might want to check 1. If you do not already have one ready, [create a Gatsby site](/docs/quick-start). -2. Install the [`gatsby-source-shopify`](/packages/gatsby-source-shopify/) plugin and [`shopify-buy`](https://github.com/Shopify/js-buy-sdk) package. +2. Install the [`gatsby-source-shopify`](/plugins/gatsby-source-shopify/) plugin and [`shopify-buy`](https://github.com/Shopify/js-buy-sdk) package. ```shell npm install gatsby-source-shopify shopify-buy diff --git a/docs/docs/caching.md b/docs/docs/caching.md index 3d7a9a30d2a8f..58a88d24dd564 100644 --- a/docs/docs/caching.md +++ b/docs/docs/caching.md @@ -44,7 +44,7 @@ How you setup your caching depends on how you host your site. We encourage peopl The following plugins have been created: -- [gatsby-plugin-netlify](/packages/gatsby-plugin-netlify/) +- [gatsby-plugin-netlify](/plugins/gatsby-plugin-netlify/) - [gatsby-plugin-s3](https://github.com/jariz/gatsby-plugin-s3) When deploying with Vercel, follow the instructions in the [Vercel documentation](https://vercel.com/guides/deploying-gatsby-with-vercel#bonus:-cache-your-gatsby-assets). diff --git a/docs/docs/conceptual/graphql-concepts.md b/docs/docs/conceptual/graphql-concepts.md index 98f9e0e24e0e6..01e28103dc345 100644 --- a/docs/docs/conceptual/graphql-concepts.md +++ b/docs/docs/conceptual/graphql-concepts.md @@ -182,7 +182,7 @@ See the full list of formatting options by viewing our [GraphQL reference page]( ### Markdown -Gatsby has _transformer_ plugins which can transform data from one form to another. A common example is markdown. If you install [`gatsby-transformer-remark`](/packages/gatsby-transformer-remark/), then in your queries, you can specify if you want the transformed HTML version instead of markdown: +Gatsby has _transformer_ plugins which can transform data from one form to another. A common example is markdown. If you install [`gatsby-transformer-remark`](/plugins/gatsby-transformer-remark/), then in your queries, you can specify if you want the transformed HTML version instead of markdown: ```graphql markdownRemark { @@ -192,9 +192,9 @@ markdownRemark { ### Images -Gatsby has rich support for processing images. Responsive images are a big part of the modern web and typically involve creating 5+ sized thumbnails per photo. With Gatsby's [`gatsby-transformer-sharp`](/packages/gatsby-transformer-sharp/), you can _query_ your images for responsive versions. The query automatically creates all the needed responsive thumbnails and returns `src` and `srcSet` fields to add to your image element. +Gatsby has rich support for processing images. Responsive images are a big part of the modern web and typically involve creating 5+ sized thumbnails per photo. With Gatsby's [`gatsby-transformer-sharp`](/plugins/gatsby-transformer-sharp/), you can _query_ your images for responsive versions. The query automatically creates all the needed responsive thumbnails and returns `src` and `srcSet` fields to add to your image element. -Combined with a special Gatsby image component, [gatsby-image](/packages/gatsby-image/), you have a very powerful set of primitives for building sites with images. +Combined with a special Gatsby image component, [gatsby-image](/plugins/gatsby-image/), you have a very powerful set of primitives for building sites with images. This is what a component using `gatsby-image` looks like: diff --git a/docs/docs/conceptual/making-your-site-accessible.md b/docs/docs/conceptual/making-your-site-accessible.md index 763936fc786d9..56914cb25f290 100644 --- a/docs/docs/conceptual/making-your-site-accessible.md +++ b/docs/docs/conceptual/making-your-site-accessible.md @@ -49,7 +49,7 @@ For more on supported rules, check out the docs for [`eslint-plugin-jsx-a11y`](h } ``` -Note: Including a local `.eslintrc` file will [override](/docs/how-to/custom-configuration/eslint/#configuring-eslint) all of Gatsby's default linting and disable the built-in `eslint-loader`, meaning your tweaked rules won't make it to your browser's developer console or your terminal window but will still be displayed if you have ESLint plugins enabled in your IDE. If you would like to change this behavior and make sure the `eslint-loader` pulls in your customizations, you'll need to enable the loader yourself. One way to do this is by using the Community plugin [`gatsby-plugin-eslint`](/packages/gatsby-plugin-eslint/). Additionally, if you would still like to take advantage of some subset of the default [ESLint config Gatsby ships with](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.ts), you'll need to copy them manually to your local `.eslintrc` file. +Note: Including a local `.eslintrc` file will [override](/docs/how-to/custom-configuration/eslint/#configuring-eslint) all of Gatsby's default linting and disable the built-in `eslint-loader`, meaning your tweaked rules won't make it to your browser's developer console or your terminal window but will still be displayed if you have ESLint plugins enabled in your IDE. If you would like to change this behavior and make sure the `eslint-loader` pulls in your customizations, you'll need to enable the loader yourself. One way to do this is by using the Community plugin [`gatsby-plugin-eslint`](/plugins/gatsby-plugin-eslint/). Additionally, if you would still like to take advantage of some subset of the default [ESLint config Gatsby ships with](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/eslint-config.ts), you'll need to copy them manually to your local `.eslintrc` file. This is a start to testing for accessibility: [further recommendations](#how-to-improve-accessibility) can be found below. diff --git a/docs/docs/conceptual/plugins-themes-and-starters.md b/docs/docs/conceptual/plugins-themes-and-starters.md index 2f55f0721bb68..28dbe81c31378 100644 --- a/docs/docs/conceptual/plugins-themes-and-starters.md +++ b/docs/docs/conceptual/plugins-themes-and-starters.md @@ -92,7 +92,7 @@ Plugins and themes both allow options to be passed in when installed in the plug Theme [shadowing](/docs/how-to/plugins-and-themes/shadowing/) exists to allow users to override or otherwise extend individual components provided by a theme. For example, a plugin or theme can provide a specific path to `gatsby-config` so the plugin knows where to build pages from, but the user wouldn't be able adjust _how_ those pages are built, only from what path. Theme shadowing allows users to replace a file with their own version of it, allowing them to rewrite that logic to use the path in a different way. -An example of a plugin that uses shadowing is [`gatsby-plugin-theme-ui`](/packages/gatsby-plugin-theme-ui/?=theme-ui#customizing-the-theme) which allows you to shadow a theme file to use in your own theme. +An example of a plugin that uses shadowing is [`gatsby-plugin-theme-ui`](/plugins/gatsby-plugin-theme-ui/?=theme-ui#customizing-the-theme) which allows you to shadow a theme file to use in your own theme. Starters aren't capable of shadowing (and they don't need to be), because a user of a starter can adjust any file by editing it directly. @@ -104,7 +104,7 @@ Themes are intended to abstract several plugins into one, by making a `gatsby-co Custom components are most traditionally distributed as packages in the React ecosystem. Components don't need to hook into the Gatsby build system, so if shipped with a plugin they don't need to be included in a `gatsby-config`'s plugin array. This is the case with `gatsby-image` which is a React component. It doesn't need to be included in the plugins array because it is merely a component. -Some plugins ship with components you can use in a Gatsby site. An example is the [`` component from `gatsby-plugin-google-analytics`](/packages/gatsby-plugin-google-analytics/?=#outboundlink-component). Other plugins, like [`gatsby-plugin-react-helmet`](/packages/gatsby-plugin-react-helmet), require you to install components from other libraries. +Some plugins ship with components you can use in a Gatsby site. An example is the [`` component from `gatsby-plugin-google-analytics`](/plugins/gatsby-plugin-google-analytics/?=#outboundlink-component). Other plugins, like [`gatsby-plugin-react-helmet`](/plugins/gatsby-plugin-react-helmet), require you to install components from other libraries. Themes by convention are more suited to ship with components that could then be shadowed for customization. diff --git a/docs/docs/conceptual/security-in-gatsby.md b/docs/docs/conceptual/security-in-gatsby.md index 5efb0f555c05d..2f735154435a6 100644 --- a/docs/docs/conceptual/security-in-gatsby.md +++ b/docs/docs/conceptual/security-in-gatsby.md @@ -148,8 +148,8 @@ Sometimes in your Gatsby website, you will need display sensitive data or handle Content Security Policy is a security layer added in web applications to detect and prevent attacks, e.g. the XSS attack mentioned above. -To add it to your Gatsby website, add [gatsby-plugin-csp](/packages/gatsby-plugin-csp/) to your `gatsby-config.js` with the desired configuration. Note that -currently there is a [compatibility issue](https://github.com/gatsbyjs/gatsby/issues/10890) between [gatsby-plugin-csp](/packages/gatsby-plugin-csp/) and other plugins that generate hashes in inline styles, including [gatsby-image](/packages/gatsby-image). +To add it to your Gatsby website, add [gatsby-plugin-csp](/plugins/gatsby-plugin-csp/) to your `gatsby-config.js` with the desired configuration. Note that +currently there is a [compatibility issue](https://github.com/gatsbyjs/gatsby/issues/10890) between [gatsby-plugin-csp](/plugins/gatsby-plugin-csp/) and other plugins that generate hashes in inline styles, including [gatsby-image](/plugins/gatsby-image). > Note that not all browsers support CSP, check [can-i-use](https://caniuse.com/#feat=mdn-http_headers_csp_content-security-policy) for more information. diff --git a/docs/docs/creating-a-source-plugin.md b/docs/docs/creating-a-source-plugin.md index 45e9def00f4f6..7adc803b8677b 100644 --- a/docs/docs/creating-a-source-plugin.md +++ b/docs/docs/creating-a-source-plugin.md @@ -305,7 +305,7 @@ This loose coupling between the data source and the transformer plugins allow Ga #### Sourcing and optimizing images from remote locations -A common use case for source plugins is pulling images from a remote location and optimizing them for use with [Gatsby Image](/packages/gatsby-image/). An API may return a URL for an image on a CDN, which could be further optimized by Gatsby at build time. +A common use case for source plugins is pulling images from a remote location and optimizing them for use with [Gatsby Image](/plugins/gatsby-image/). An API may return a URL for an image on a CDN, which could be further optimized by Gatsby at build time. This can be achieved by the following steps: diff --git a/docs/docs/creating-and-modifying-pages.md b/docs/docs/creating-and-modifying-pages.md index 44e639dc014a8..9478bceba8c85 100644 --- a/docs/docs/creating-and-modifying-pages.md +++ b/docs/docs/creating-and-modifying-pages.md @@ -207,7 +207,7 @@ trailing slashes. To do this, in your site's `gatsby-node.js` add code similar to the following: _Note: There's also a plugin that will remove all trailing slashes from pages automatically: -[gatsby-plugin-remove-trailing-slashes](/packages/gatsby-plugin-remove-trailing-slashes/)_. +[gatsby-plugin-remove-trailing-slashes](/plugins/gatsby-plugin-remove-trailing-slashes/)_. _Note: If you need to perform an asynchronous action within `onCreatePage` you can return a promise or use an `async` function._ diff --git a/docs/docs/creating-prefixed-404-pages-for-different-languages.md b/docs/docs/creating-prefixed-404-pages-for-different-languages.md index 92cd92fda7e24..84ad1d1432797 100644 --- a/docs/docs/creating-prefixed-404-pages-for-different-languages.md +++ b/docs/docs/creating-prefixed-404-pages-for-different-languages.md @@ -58,4 +58,4 @@ exports.onCreatePage = async ({ page, actions }) => { Now, whenever Gatsby creates a page, it will check if the page is a localized 404 with a path in the format of `/XX/404/`. If this is the case, then it will get the language code, and match all paths starting with this code, apart from other valid paths. This means that whenever you visit a non-existent page on your site, whose path starts with `/en/` or `/de/` (e.g. `/en/this-does-not-exist`), your localized 404 page will be displayed instead. -For best results, you should configure your server to serve these 404 pages in the same manner - i.e. for `/en/`, your server should serve the page `/en/404/`. Otherwise, you'll briefly see the default 404 page until the Gatsby runtime loads. If you're using Netlify, you can use [`gatsby-plugin-netlify`](/packages/gatsby-plugin-netlify/) to do this automatically. Note that you should still create a default 404 page (usually at `src/pages/404.js`) to handle non-prefixed paths, e.g. `https://example.com/this-does-not-exist`. +For best results, you should configure your server to serve these 404 pages in the same manner - i.e. for `/en/`, your server should serve the page `/en/404/`. Otherwise, you'll briefly see the default 404 page until the Gatsby runtime loads. If you're using Netlify, you can use [`gatsby-plugin-netlify`](/plugins/gatsby-plugin-netlify/) to do this automatically. Note that you should still create a default 404 page (usually at `src/pages/404.js`) to handle non-prefixed paths, e.g. `https://example.com/this-does-not-exist`. diff --git a/docs/docs/custom-html.md b/docs/docs/custom-html.md index 46e9ee5dc5a84..b4a92afb84f62 100644 --- a/docs/docs/custom-html.md +++ b/docs/docs/custom-html.md @@ -30,7 +30,7 @@ Note: the various props that are rendered into pages _are_ required e.g. Anything you render in the `html.js` component will _not_ be made "live" in the client like other components. If you want to dynamically update your `` we recommend using -[React Helmet](/packages/gatsby-plugin-react-helmet/) +[React Helmet](/plugins/gatsby-plugin-react-helmet/) ## Inserting HTML into the `