From 0890a5cf2c881b49193113a1e1bd5fe13a2c328f Mon Sep 17 00:00:00 2001 From: LekoArts Date: Fri, 1 Jul 2022 09:13:01 +0200 Subject: [PATCH] chore: Update READMEs for better instructions --- packages/gatsby-codemods/README.md | 16 ++++----- packages/gatsby-design-tokens/README.md | 4 --- packages/gatsby-plugin-flow/README.md | 14 ++++---- .../gatsby-plugin-google-analytics/README.md | 6 ++-- packages/gatsby-plugin-google-gtag/README.md | 6 ++-- packages/gatsby-plugin-sitemap/README.md | 6 ++-- .../gatsby-plugin-styled-components/README.md | 4 ++- packages/gatsby-plugin-typography/README.md | 4 ++- packages/gatsby-remark-images/README.md | 4 ++- packages/gatsby-remark-katex/README.md | 4 ++- packages/gatsby-source-contentful/README.md | 6 ---- packages/gatsby-source-faker/README.md | 33 ++++++++++--------- packages/gatsby-source-mongodb/README.md | 6 ++++ packages/gatsby-telemetry/README.md | 2 +- .../gatsby-transformer-asciidoc/README.md | 4 ++- packages/gatsby-transformer-sharp/README.md | 4 ++- packages/gatsby-transformer-sqip/README.md | 2 -- 17 files changed, 71 insertions(+), 54 deletions(-) diff --git a/packages/gatsby-codemods/README.md b/packages/gatsby-codemods/README.md index 533b633265544..0d624ce7bc95b 100644 --- a/packages/gatsby-codemods/README.md +++ b/packages/gatsby-codemods/README.md @@ -1,10 +1,10 @@ -## gatsby-codemods +# gatsby-codemods A collection of codemod scripts for use with [JSCodeshift](https://github.com/facebook/jscodeshift) that help migrate to newer versions of Gatsby. > **Note:** Codemods are designed to rewrite your project's files. Ensure you have a backup before going any further. -### Setup & Run +## Setup & Run There are two ways to run codemods on this package. @@ -49,9 +49,9 @@ Structure of a jscodeshift call: - use the `--extensions` option if your files have different extensions than `.js` (for example, `--extensions js,jsx`) - see all available [jscodeshift options](https://github.com/facebook/jscodeshift#usage-cli). -### Included scripts +## Included scripts -#### `global-graphql-calls` +### `global-graphql-calls` Add a `graphql` import to modules that use the `graphql` tag function without an import. This was supported in Gatsby v1 and deprecated for Gatsby v2. @@ -82,7 +82,7 @@ export const query = graphql` ` ``` -#### `import-link` +### `import-link` Import `Link` from `gatsby` instead of `gatsby-link` and remove the `gatsby-link` import. @@ -103,7 +103,7 @@ export default props => ( ) ``` -#### `navigate-calls` +### `navigate-calls` Change the deprecated `navigateTo` method from `gatsby-link` to `navigate` from the `gatsby` module. @@ -128,7 +128,7 @@ export default props => ( ) ``` -#### `rename-bound-action-creators` +### `rename-bound-action-creators` Rename `boundActionCreators` to `actions`. `boundActionCreators` has been deprecated in Gatsby v2 @@ -158,7 +158,7 @@ Example result: } ``` -### More scripts +## More scripts Check out [issue 5038 in the Gatsby repo for additional codemod ideas](https://github.com/gatsbyjs/gatsby/issues/5038#issuecomment-411516865). diff --git a/packages/gatsby-design-tokens/README.md b/packages/gatsby-design-tokens/README.md index 8b859b86f19a1..a74fdb59e24fc 100644 --- a/packages/gatsby-design-tokens/README.md +++ b/packages/gatsby-design-tokens/README.md @@ -1,7 +1,3 @@ -rebeccapurple dot -
-
- # gatsby-design-tokens diff --git a/packages/gatsby-plugin-flow/README.md b/packages/gatsby-plugin-flow/README.md index 6616405885418..25401d6060edc 100644 --- a/packages/gatsby-plugin-flow/README.md +++ b/packages/gatsby-plugin-flow/README.md @@ -4,15 +4,17 @@ Provides drop-in support for Flow by adding `@babel/preset-flow`. ## Install -`npm install gatsby-plugin-flow` +```shell +npm install gatsby-plugin-flow +``` ## How to use -1. Include the plugin in your `gatsby-config.js` file. -1. You're good to go. - -`gatsby-config.js` +Add the plugin to your `gatsby-config.js` file: ```javascript -plugins: [`gatsby-plugin-flow`] +// In your gatsby-config.js +module.exports = { + plugins: [`gatsby-plugin-flow`], +} ``` diff --git a/packages/gatsby-plugin-google-analytics/README.md b/packages/gatsby-plugin-google-analytics/README.md index ea72dbf97d3d2..a37c219af8c32 100644 --- a/packages/gatsby-plugin-google-analytics/README.md +++ b/packages/gatsby-plugin-google-analytics/README.md @@ -2,13 +2,15 @@ Easily add Google Analytics to your Gatsby site. -## Upgrade note +## Deprecation Notice This plugin uses Google's `analytics.js` file under the hood. Google has a [guide recommending users upgrade to `gtag.js` instead](https://developers.google.com/analytics/devguides/collection/upgrade/analyticsjs). There is another plugin [`gatsby-plugin-gtag`](https://gatsbyjs.com/plugins/gatsby-plugin-google-gtag/) which uses `gtag.js` and we recommend it. ## Install -`npm install gatsby-plugin-google-analytics` +```shell +npm install gatsby-plugin-google-analytics +``` ## How to use diff --git a/packages/gatsby-plugin-google-gtag/README.md b/packages/gatsby-plugin-google-gtag/README.md index 51e7649570b0a..81c8bdfab3e12 100644 --- a/packages/gatsby-plugin-google-gtag/README.md +++ b/packages/gatsby-plugin-google-gtag/README.md @@ -10,11 +10,13 @@ For more general information on gtag you can read Google's official documentatio If you're migrating from analytics.js (gatsby-plugin-google-analytics) you can read about the subtle API differences in more depth at: https://developers.google.com/analytics/devguides/migration/ua/analyticsjs-to-gtagjs. -NOTE: This plugin only works in production mode! To test your Global Site Tag is installed and firing events correctly run: `gatsby build && gatsby serve.` +**Please note:** This plugin only works in production mode! To test your Global Site Tag is installed and firing events correctly run: `gatsby build && gatsby serve.` ## Install -`npm install gatsby-plugin-google-gtag` +```shell +npm install gatsby-plugin-google-gtag +``` ## How to use diff --git a/packages/gatsby-plugin-sitemap/README.md b/packages/gatsby-plugin-sitemap/README.md index 85976a381439e..2a833e8699a14 100644 --- a/packages/gatsby-plugin-sitemap/README.md +++ b/packages/gatsby-plugin-sitemap/README.md @@ -2,11 +2,13 @@ Create a sitemap for your Gatsby site. -_NOTE: This plugin only generates output when run in `production` mode! To test your sitemap, run: `gatsby build && gatsby serve`_ +**Please note:** This plugin only generates output when run in `production` mode! To test your sitemap, run: `gatsby build && gatsby serve`. ## Install -`npm install gatsby-plugin-sitemap` +```shell +npm install gatsby-plugin-sitemap +``` ## How to Use diff --git a/packages/gatsby-plugin-styled-components/README.md b/packages/gatsby-plugin-styled-components/README.md index d6498da8adcdf..c41d60d499549 100644 --- a/packages/gatsby-plugin-styled-components/README.md +++ b/packages/gatsby-plugin-styled-components/README.md @@ -6,7 +6,9 @@ built-in server-side rendering support. ## Install -`npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components` +```shell +npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components +``` ## How to use diff --git a/packages/gatsby-plugin-typography/README.md b/packages/gatsby-plugin-typography/README.md index bb3fcfe448258..40fcfcdbc934d 100644 --- a/packages/gatsby-plugin-typography/README.md +++ b/packages/gatsby-plugin-typography/README.md @@ -4,7 +4,9 @@ A Gatsby plugin for utilizing the [Typography](https://kyleamathews.github.io/ty ## Install -`npm install gatsby-plugin-typography react-typography typography` +```shell +npm install gatsby-plugin-typography react-typography typography +``` ## Why to use diff --git a/packages/gatsby-remark-images/README.md b/packages/gatsby-remark-images/README.md index f34c9a50de3c0..22b5440b54904 100644 --- a/packages/gatsby-remark-images/README.md +++ b/packages/gatsby-remark-images/README.md @@ -15,7 +15,9 @@ In the processing, it makes images responsive by: ## Install -`npm install gatsby-remark-images gatsby-plugin-sharp` +```shell +npm install gatsby-remark-images gatsby-plugin-sharp +``` ## How to use diff --git a/packages/gatsby-remark-katex/README.md b/packages/gatsby-remark-katex/README.md index 82d41e0139e32..abbd8aaa4a2bf 100644 --- a/packages/gatsby-remark-katex/README.md +++ b/packages/gatsby-remark-katex/README.md @@ -5,7 +5,9 @@ ## Install -`npm install gatsby-transformer-remark gatsby-remark-katex katex` +```shell +npm install gatsby-transformer-remark gatsby-remark-katex katex +``` ## How to use diff --git a/packages/gatsby-source-contentful/README.md b/packages/gatsby-source-contentful/README.md index 82f2d49c515a3..9e6cec80170e4 100644 --- a/packages/gatsby-source-contentful/README.md +++ b/packages/gatsby-source-contentful/README.md @@ -1,11 +1,5 @@ # gatsby-source-contentful -> Source plugin for pulling content types, entries, and assets into Gatsby from -> Contentful spaces. It creates links between entry types and asset so they can be -> queried in Gatsby using GraphQL. -> -> An example site for using this plugin is at https://using-contentful.gatsbyjs.org/ -
Table of contents diff --git a/packages/gatsby-source-faker/README.md b/packages/gatsby-source-faker/README.md index b53a0584059f2..ec814204325db 100644 --- a/packages/gatsby-source-faker/README.md +++ b/packages/gatsby-source-faker/README.md @@ -2,30 +2,33 @@ This is a plugin that allows you to use [faker.js](https://github.com/marak/Faker.js/) to generate fake data for Gatsby sites. This could come in handy for creating example sites, documentation, or just to experiment with Gatsby. -## How to use it - -Install `gatsby-source-faker` +## Installation ```shell npm install gatsby-source-faker ``` -Add `gatsby-source-faker` to the `gatsby-config.js` as follows +## How to use it + +Add `gatsby-source-faker` to the `gatsby-config.js` as following: ```javascript -plugins: [ - { - resolve: `gatsby-source-faker`, - // derive schema from faker's options - options: { - schema: { - name: ["firstName", "lastName"], +// In your gatsby-config.js +module.exports = { + plugins: [ + { + resolve: `gatsby-source-faker`, + // derive schema from faker's options + options: { + schema: { + name: ["firstName", "lastName"], + }, + count: 3, // how many fake objects you need + type: "NameData", // Name of the graphql query node }, - count: 3, // how many fake objects you need - type: "NameData", // Name of the graphql query node }, - }, -] + ], +} ``` Example: [Using Faker](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-faker) diff --git a/packages/gatsby-source-mongodb/README.md b/packages/gatsby-source-mongodb/README.md index 8a3b4a7a3525e..5ea35720b1043 100644 --- a/packages/gatsby-source-mongodb/README.md +++ b/packages/gatsby-source-mongodb/README.md @@ -2,6 +2,12 @@ Source plugin for pulling data into Gatsby from MongoDB collections. +## Installation + +```shell +npm install gatsby-source-mongodb +``` + ## How to use ```javascript diff --git a/packages/gatsby-telemetry/README.md b/packages/gatsby-telemetry/README.md index 0819b2d44db25..c8de982955954 100644 --- a/packages/gatsby-telemetry/README.md +++ b/packages/gatsby-telemetry/README.md @@ -1,6 +1,6 @@ # gatsby-telemetry -Check out: [gatsby.dev/telemetry](https://gatsby.dev/telemetry) +Check out [gatsby.dev/telemetry](https://gatsby.dev/telemetry) for more information. ## API diff --git a/packages/gatsby-transformer-asciidoc/README.md b/packages/gatsby-transformer-asciidoc/README.md index f4a6a61d9fa1b..5ba107ac3aa1c 100644 --- a/packages/gatsby-transformer-asciidoc/README.md +++ b/packages/gatsby-transformer-asciidoc/README.md @@ -4,7 +4,9 @@ Parses AsciiDoc files using [Asciidoctor.js](https://asciidoctor.org/docs/asciid ## Install -`npm install gatsby-transformer-asciidoc` +```shell +npm install gatsby-transformer-asciidoc +``` ## How to use diff --git a/packages/gatsby-transformer-sharp/README.md b/packages/gatsby-transformer-sharp/README.md index 05474cc9db7ea..ad6e4882c6ed3 100644 --- a/packages/gatsby-transformer-sharp/README.md +++ b/packages/gatsby-transformer-sharp/README.md @@ -10,7 +10,9 @@ including resizing, cropping, and creating responsive images. ## Install -`npm install gatsby-transformer-sharp gatsby-plugin-sharp` +```shell +npm install gatsby-transformer-sharp gatsby-plugin-sharp +``` ## How to use diff --git a/packages/gatsby-transformer-sqip/README.md b/packages/gatsby-transformer-sqip/README.md index b1ab08eb7d038..f8fb2727e382c 100644 --- a/packages/gatsby-transformer-sqip/README.md +++ b/packages/gatsby-transformer-sqip/README.md @@ -22,8 +22,6 @@ This project can create beautiful results, but this comes with the cost of processing power. It may take several seconds on your machine to generate the preview. **Make sure to invest some time and to cache your `public` folder to avoid regeneration of the previews on every build.** -Netlify users might use [gatsby-plugin-netlify-cache](https://github.com/axe312ger/gatsby-plugin-netlify-cache). -
Table of contents: