Add improved docs

Closes GH-7.

Reviewed-by: Remco Haszing <remcohaszing@gmail.com>
Reviewed-by: with-heart <with.heart+git@pm.me>
Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>

index.js

@@ -13,7 +13,7 @@ const containsImage = 2
 const containsOther = 3
 
 /**
- * Plugin to to remove the wrapping paragraph for images.
+ * Plugin to remove the wrapping paragraph for images.
  *
  * @type {import('unified').Plugin<void[], Root>}
  */

readme.md

@@ -8,56 +8,100 @@
 [![Backers][backers-badge]][collective]
 [![Chat][chat-badge]][chat]
 
-[**remark**][remark] plugin to remove the wrapping paragraph for images.
+**[remark][]** plugin to remove the wrapping paragraph for images.
 
-## Note!
+## Contents
 
-This plugin is ready for the new parser in remark
-([`remarkjs/remark#536`](https://github.com/remarkjs/remark/pull/536)).
-No change is needed: it works exactly the same now as it did before!
+*   [What is this?](#what-is-this)
+*   [When should I use this?](#when-should-i-use-this)
+*   [Install](#install)
+*   [Use](#use)
+*   [API](#api)
+*   [Types](#types)
+*   [Compatibility](#compatibility)
+*   [Security](#security)
+*   [Related](#related)
+*   [Contribute](#contribute)
+*   [License](#license)
 
-## Install
+## What is this?
+
+This package is a [unified][] ([remark][]) plugin that searches for paragraphs
+which contain only images (possibly in links) and nothing else, and then remove
+those surrounding paragraphs.
 
-This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c):
-Node 12+ is needed to use it and it must be `import`ed instead of `require`d.
+**unified** is a project that transforms content with abstract syntax trees
+(ASTs).
+**remark** adds support for markdown to unified.
+**mdast** is the markdown AST that remark uses.
+This is a remark plugin that transforms mdast.
 
-[npm][]:
+## When should I use this?
+
+This project can make it simpler to style images with CSS, for example
+displaying them at the full available width, because paragraph styles no longer
+interfere with them.
+
+## Install
+
+This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
+In Node.js (version 12.20+, 14.14+, or 16.0+), install with [npm][]:
 
 ```sh
 npm install remark-unwrap-images
 ```
 
+In Deno with [Skypack][]:
+
+```js
+import remarkUnwrapImages from 'https://cdn.skypack.dev/remark-unwrap-images@3?dts'
+```
+
+In browsers with [Skypack][]:
+
+```html
+<script type="module">
+  import remarkUnwrapImages from 'https://cdn.skypack.dev/remark-unwrap-images@3?min'
+</script>
+```
+
 ## Use
 
-Say we have the following file, `example.md`.
-Imagine section titles and URLs a bit longer though.
+Say we have the following file `example.md`.
 
 ```markdown
+# Hello world
+
+Lorem ipsum.
+
 ![hi](there.png)
 ```
 
-And our module, `example.js`, looks as follows:
+And our module `example.js` looks as follows:
 
 ```js
-import {readSync} from 'to-vfile'
+import {read} from 'to-vfile'
 import {remark} from 'remark'
 import remarkHtml from 'remark-html'
 import remarkUnwrapImages from 'remark-unwrap-images'
 
-const file = readSync('example.md')
+main()
 
-remark()
-  .use(remarkUnwrapImages)
-  .use(remarkHtml)
-  .process(file)
-  .then((file) => {
-    console.log(String(file))
-  })
+async function main() {
+  const file = await remark()
+    .use(remarkUnwrapImages)
+    .use(remarkHtml)
+    .process(await read('example.md'))
+
+  console.log(String(file))
+}
 ```
 
-Now, running `node example` yields:
+Now running `node example.js` yields:
 
 ```html
+<h1>Hello world</h1>
+<p>Lorem ipsum.</p>
 <img src="there.png" alt="hi">
 ```
 
@@ -68,15 +112,35 @@ The default export is `remarkUnwrapImages`.
 
 #### `unified().use(remarkUnwrapImages)`
 
-Remove the wrapping paragraph for images.
-Supports multiple images, white space around images, and images in links as
-well.
+Plugin to remove the wrapping paragraph for images.
+There are no options.
+
+## Types
+
+This package is fully typed with [TypeScript][].
+There are no extra exported types.
+
+## Compatibility
+
+Projects maintained by the unified collective are compatible with all maintained
+versions of Node.js.
+As of now, that is Node.js 12.20+, 14.14+, and 16.0+.
+Our projects sometimes work with older versions, but this is not guaranteed.
+
+This plugin works with `unified` version 6+ and `remark` version 7+.
 
 ## Security
 
-Use of `remark-unwrap-images` does not involve [**rehype**][rehype]
-([**hast**][hast]) or user content, it only removes some existing nodes, so
-there are no openings for [cross-site scripting (XSS)][xss] attacks.
+Use of `remark-unwrap-images` does not involve **[rehype][]** (**[hast][]**) or
+user content, it only removes some existing nodes, so there are no openings for
+[cross-site scripting (XSS)][xss] attacks.
+
+## Related
+
+*   [`remark-images`](https://github.com/remarkjs/remark-images)
+    — add a simpler image syntax
+*   [`remark-embed-images`](https://github.com/remarkjs/remark-embed-images)
+    — embed local images as data URIs, inlining files as base64-encoded values
 
 ## Contribute
 
@@ -122,6 +186,8 @@ abide by its terms.
 
 [npm]: https://docs.npmjs.com/cli/install
 
+[skypack]: https://www.skypack.dev
+
 [health]: https://github.com/remarkjs/.github
 
 [contributing]: https://github.com/remarkjs/.github/blob/HEAD/contributing.md
@@ -134,8 +200,12 @@ abide by its terms.
 
 [remark]: https://github.com/remarkjs/remark
 
+[unified]: https://github.com/unifiedjs/unified
+
 [xss]: https://en.wikipedia.org/wiki/Cross-site_scripting
 
+[typescript]: https://www.typescriptlang.org
+
 [rehype]: https://github.com/rehypejs/rehype
 
 [hast]: https://github.com/syntax-tree/hast