Merge pull request #29 from FormidableLabs/v1-readme

V1 Readme

README.md

@@ -1,51 +1,46 @@
 <div align="center">
-  <img alt="logo" src="https://raw.githubusercontent.com/FormidableLabs/urql-devtools/master/src/assets/icon.svg?sanitize=true" />
-  <h1>urql devtools exchange</h1>
-
+  <img alt="logo" width=200 src="https://raw.githubusercontent.com/FormidableLabs/urql-devtools/master/src/assets/icon.svg?sanitize=true" />
+  <h1>Urql Devtools Exchange</h1>
+  <p>The official devtools exchange for use with the <a href="https://github.com/FormidableLabs/urql-devtools">Urql Devtools</a> browser extension</p>
+  <a href="https://circleci.com/gh/FormidableLabs/workflows/urql-devtools-exchange">
+    <img alt="CircleCI Build Status" src="https://badgen.net/circleci/github/FormidableLabs/urql-devtools-exchange?label=build" />
+  </a>
+  <a href="https://www.npmjs.com/package/@urql/devtools">
+    <img alt="NPM Release" src="https://badgen.net/npm/v/@urql/devtools" />
+  </a>
   <a href="https://spectrum.chat/urql">
-    <img alt="Spectrum badge" src="https://withspectrum.github.io/badge/badge.svg" />
+    <img alt="Spectrum badge" src="https://badgen.net/badge/chat/spectrum/purple" />
+  </a>
+  <a href="https://github.com/FormidableLabs/urql-devtools-exchange/blob/master/LICENSE">
+    <img alt="Licence MIT" src="https://badgen.net/github/license/FormidableLabs/urql-devtools-exchange" />
   </a>
-
-  <br />
-  <br />
 </div>
 
-The official devtools exchange for use with [urql devtools chrome extension](https://github.com/FormidableLabs/urql-devtools).
-
-### Requirements
+## About
 
-- [urql](https://github.com/FormidableLabs/urql) _v1.2.0_ (or later)
-- [urql devtools chrome extension](https://github.com/FormidableLabs/urql-devtools)
+A first-party exchange for [Urql](https://github.com/FormidableLabs/urql) which interfaces with the [Urql Devtools](https://github.com/FormidableLabs/urql-devtools) browser extension.
 
-### Usage
+## Usage
 
-Install the devtools exchange
+Install this package
 
 ```sh
-# yarn
-yarn add -D @urql/devtools
-
 # npm
 npm i -D @urql/devtools
+
+# yarn
+yarn add -D @urql/devtools
 ```
 
-Add the devtools exchange to your urql client
+Add the exchange to your Urql client
 
-```tsx
-// ...
-import { defaultExchanges, createClient } from '@urql/core';
+```js
+import { createClient, defaultExchanges } from 'urql';
 import { devtoolsExchange } from '@urql/devtools';
 
-// ...
 const client = createClient({
   url: 'http://localhost:3001/graphql',
-  exchanges: [
-    // replacing devtools with a passthrough exchange for production environments
-    process.env.NODE_ENV !== 'production'
-      ? devtoolsExchange
-      : ({ forward }) => forward,
-    ...defaultExchanges,
-  ],
+  exchanges: [devtoolsExchange, ...defaultExchanges],
 });
 ```