From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 2 Oct 2023 02:06:46 +0000 (-0700)
Subject: Add "Example usage" section
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=a67373dca5f70c172cf605acea500f26c6d7b890;p=zip-page

Add "Example usage" section
---

diff --git a/.github/textarea.png b/.github/textarea.png
new file mode 100644
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
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
index 0000000..5e6293f
Binary files /dev/null and b/.github/zip-page.png differ
diff --git a/README.md b/README.md
index be988a9..3d86ffc 100644
--- 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)