Add "Example usage" section

diff --git a/.github/textarea.png b/.github/textarea.png
new file mode 100644 (file)
index 0000000..4cc130d
Binary files /dev/null and b/.github/textarea.png differ

diff --git a/.github/url.png b/.github/url.png
new file mode 100644 (file)
index 0000000..417a94f
Binary files /dev/null and b/.github/url.png differ

diff --git a/.github/zip-page.png b/.github/zip-page.png
new file mode 100644 (file)
index 0000000..5e6293f
Binary files /dev/null and b/.github/zip-page.png differ

diff --git a/README.md b/README.md
index be988a96e9b020b4758ce999195d4e8021f8c543..3d86ffc73b9167149cd56a0a6e44c6771f575b40 100644 (file)
--- a/README.md
+++ b/README.md
@@ -4,6 +4,41 @@ Minimal utility for zipping entire web pages into a URL.
 
 Uses the [Compression Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API) for `gzip`.
 
+## Example usage
+
+1. Copy the HTML for a web page you want to share:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Hello, world!</title>
+</head>
+
+<body>
+  <main>
+    <p>This is a whole HTML page!</p>
+  </main>
+</body>
+
+</html>
+```
+
+2. Paste the entire HTML code into the text area:
+
+![HTML copied verbatim into the text area](./.github/textarea.png)
+
+3. Click "Get zip-page URL" to compress and encode the HTML into a URL:
+
+![URL with the compressed HTML encoded into the hash](./.github/url.png)
+
+4. Open the URL in any web browser to view your zip-page:
+
+![Web browser displaying the zip-page](./.github/zip-page.png)
+
 ## Similar projects
 
 - [Netlify Drop](https://app.netlify.com/drop)