From: Ardis Lu <ardisglu@gmail.com>
Date: Fri, 5 Jul 2024 01:05:40 +0000 (-0700)
Subject: Add an example of encrypting an HTML page
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=f22a726d52d1ddbe319faa1dd8f10ebfad5c1688;p=static-encrypt

Add an example of encrypting an HTML page
---

diff --git a/.github/1.png b/.github/1.png
new file mode 100644
index 0000000..c03d314
Binary files /dev/null and b/.github/1.png differ
diff --git a/.github/2.png b/.github/2.png
new file mode 100644
index 0000000..cc33f2c
Binary files /dev/null and b/.github/2.png differ
diff --git a/.github/3.png b/.github/3.png
new file mode 100644
index 0000000..6df2c4d
Binary files /dev/null and b/.github/3.png differ
diff --git a/README.md b/README.md
index 87a79d1..a23ceb0 100644
--- a/README.md
+++ b/README.md
@@ -86,6 +86,20 @@ You can also import the function dynamically (useful for lazy-loading or testing
 const { decrypt } = await import('https://cdn.statically.io/gh/ardislu/static-encrypt/master/decrypt.js');
 ```
 
+### Encrypt an entire HTML page
+
+The generated HTML file uses [`document.write()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/write) to replace the entire document when the correct password is entered. So you can input arbitrary HTML into the "Content" box to simulate a new page loading in:
+
+1. Populate HTML into the "Content" box then encrypt and download the HTML page normally:
+
+![The static-encrypt frontend populate with HTML in the "Content" box.](./.github/1.png)
+
+2. The HTML will be displayed only when the correct password is input:
+
+![The downloaded password-protected HTML page with the correct password input.](./.github/2.png)
+
+![The HTML from the "Content" box rendered correctly.](./.github/3.png)
+
 ### TypeScript
 
 `*.d.ts` files are generated from the [JSDoc](https://jsdoc.app/) comments using `tsc`: