Refactor prose

readme.md

@@ -3,40 +3,36 @@
 [![Build][build-badge]][build]
 [![Coverage][coverage-badge]][coverage]
 [![Downloads][downloads-badge]][downloads]
+[![Size][size-badge]][size]
+[![Sponsors][sponsors-badge]][collective]
+[![Backers][backers-badge]][collective]
 [![Chat][chat-badge]][chat]
 
-Transform markdown to React with **[remark][]**, an extensively tested and
-pluggable parser.
+[**remark**][remark] plugin to transform Markdown to React.
 
-**Why?**  Using innerHTML and [dangerouslySetInnerHTML][] in [React][] is a
+**Why?**
+Using `innerHTML` and [`dangerouslySetInnerHTML`][dangerous] in [React][] is a
 common cause of [XSS][] attacks: user input can include script tags and other
 kinds of active content that reaches across domains and harms security.
-**remark-react** builds a DOM in React, using [React.createElement][h]: this
-means that you can display parsed & formatted Markdown content in an
+`remark-react` builds a DOM in React, using [React.createElement][h]: this
+means that you can display parsed and formatted Markdown content in an
 application without using `dangerouslySetInnerHTML`.
 
-## Installation
+## Install
 
 [npm][]:
 
-```bash
+```sh
 npm install remark-react
 ```
 
-## Table of Contents
-
-*   [Usage](#usage)
-*   [API](#api)
-    *   [remark().use(react\[, options\])](#remarkusereact-options)
-*   [Integrations](#integrations)
-*   [License](#license)
-
-## Usage
+## Use
 
 ```js
 import React from 'react'
 import ReactDOM from 'react-dom'
-import remark from 'remark'
+import unified from 'unified'
+import parse from 'remark-parse'
 import remark2react from 'remark-react'
 
 class App extends React.Component {
@@ -54,7 +50,8 @@ class App extends React.Component {
         <textarea value={this.state.text} onChange={this.onChange} />
         <div id="preview">
           {
-            remark()
+            unified()
+              .use(parse)
               .use(remark2react)
               .processSync(this.state.text).contents
           }
@@ -71,9 +68,9 @@ ReactDOM.render(<App />, document.getElementById('root'))
 
 ### `remark().use(react[, options])`
 
-Transform markdown to React.
+Transform Markdown to React.
 
-##### Options
+##### `options`
 
 ###### `options.createElement`
 
@@ -89,23 +86,24 @@ Default: `require('react').Fragment`
 
 Sanitation schema to use (`object` or `boolean`, default: `undefined`).
 Passed to [`hast-util-sanitize`][sanitize].
-The default schema, if none or `true` is passed, adheres to GitHub’s
-sanitation rules.
-Setting this to `false` is just as bad as using `dangerouslySetInnerHTML`.
+The default schema, if none or `true` is passed, adheres to GitHub’s sanitation
+rules.
+Setting this to `false` is just as bad as using
+[`dangerouslySetInnerHTML`][dangerous].
 
 ###### `options.prefix`
 
 React key (default: `h-`).
 
 ###### `options.remarkReactComponents`
 
-Override default elements, such as `<a>`, `<p>`, etc by defining an object
-comprised of `element: Component` key-value pairs (`object`, default:
+Override default elements (such as `<a>`, `<p>`, etc) by defining an object
+comprised of `element: Component` key-value pairs (`Object`, default:
 `undefined`).
 For example, to output `<MyLink>` components instead of `<a>`, and
 `<MyParagraph>` instead of `<p>`:
 
-```javascript
+```js
 remarkReactComponents: {
   a: MyLink,
   p: MyParagraph
@@ -114,20 +112,33 @@ remarkReactComponents: {
 
 ###### `options.toHast`
 
-Configure how to transform [mdast][] to [hast][] (`object`, default: `{}`).
-Passed to [mdast-util-to-hast][to-hast].
+Configure how to transform [**mdast**][mdast] to [**hast**][hast] (`object`,
+default: `{}`).
+Passed to [`mdast-util-to-hast`][to-hast].
 
 ## Integrations
 
 See how to integrate with other remark plugins in the [Integrations][] section
 of `remark-html`.
 
+## Contribute
+
+See [`contributing.md`][contributing] in [`remarkjs/.github`][health] for ways
+to get started.
+See [`support.md`][support] for ways to get help.
+
+This project has a [Code of Conduct][coc].
+By interacting with this repository, organisation, or community you agree to
+abide by its terms.
+
 ## License
 
 [MIT][license] © [Titus Wormer][author], modified by [Tom MacWright][tom] and
 [Mapbox][].
 
-[build-badge]: https://img.shields.io/travis/remarkjs/remark-react.svg
+<!-- Definitions -->
+
+[build-badge]: https://img.shields.io/travis/remarkjs/remark-react/master.svg
 
 [build]: https://travis-ci.org/remarkjs/remark-react
 
@@ -139,12 +150,30 @@ of `remark-html`.
 
 [downloads]: https://www.npmjs.com/package/remark-react
 
+[size-badge]: https://img.shields.io/bundlephobia/minzip/remark-react.svg
+
+[size]: https://bundlephobia.com/result?p=remark-react
+
+[sponsors-badge]: https://opencollective.com/unified/sponsors/badge.svg
+
+[backers-badge]: https://opencollective.com/unified/backers/badge.svg
+
+[collective]: https://opencollective.com/unified
+
 [chat-badge]: https://img.shields.io/badge/join%20the%20community-on%20spectrum-7b16ff.svg
 
 [chat]: https://spectrum.chat/unified/remark
 
 [npm]: https://docs.npmjs.com/cli/install
 
+[health]: https://github.com/remarkjs/.github
+
+[contributing]: https://github.com/remarkjs/.github/blob/master/contributing.md
+
+[support]: https://github.com/remarkjs/.github/blob/master/support.md
+
+[coc]: https://github.com/remarkjs/.github/blob/master/code-of-conduct.md
+
 [license]: license
 
 [author]: https://wooorm.com
@@ -163,7 +192,7 @@ of `remark-html`.
 
 [react]: http://facebook.github.io/react/
 
-[dangerouslysetinnerhtml]: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
+[dangerous]: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
 
 [xss]: https://en.wikipedia.org/wiki/Cross-site_scripting