chore: Update READMEs for better instructions

gatsbyjs · Jul 1, 2022 · 0890a5c · 0890a5c
1 parent 48a64f6
commit 0890a5c
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 54 deletions.
diff --git 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
@@ -1,7 +1,3 @@
-<img src="https://user-images.githubusercontent.com/21834/74070062-35b91980-4a00-11ea-93a8-b77bde7b4c37.png" width="48" height="48" alt="rebeccapurple dot" />
-<br>
-<br>
-
 # gatsby-design-tokens
 
 <a href="https://www.npmjs.org/package/gatsby-design-tokens">

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/
-
 <details>
 <summary><strong>Table of contents</strong></summary>
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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).
-
 <details>
 <summary><strong>Table of contents:</strong></summary>