From d555e35e19fee2e205a2cf3ec1410bf9bd3c9d21 Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Fri, 6 Dec 2024 12:17:19 +0800
Subject: doc: improve usage

---
 bin/mail/comment.sh | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/bin/mail/comment.sh b/bin/mail/comment.sh
index f13b03d..6c95dc3 100755
--- a/bin/mail/comment.sh
+++ b/bin/mail/comment.sh
@@ -2,7 +2,22 @@
 
 # Save incoming mail as comment
 # Usage:
-#   echo '|<PATH_TO_THIS_SCRIPT> --output_dir=<PATH_OF_HTML_FILES>' >>~/.forward
+#   Step1. Add script into forward(5) for MDA
+#     echo '|<PATH_TO_THIS_SCRIPT> --output_dir=<PATH_OF_HTML_FILES>' >>~/.forward
+#
+#   Step2. Insert related html file into target page, the following example use <object> element
+#          Please replace <PATH> for your target page:
+#     <div style="border-radius: 6px; background: lightyellow">
+#       <a style="display: inline-block; margin: 0.5em 0.5em 0 0; float: right" href="mailto:comment@topo.tw?subject=Comment on page: ${path}">[Comment on this page]</a>
+#       <object type="text/html" data="/<PATH>.comment.html" onload="observeResize(this)" style="width: 100%;"></object>
+#       <script>
+#         function observeResize(commentBlock) {
+#           new ResizeObserver((entries) => {
+#             commentBlock.style.height = entries[-1].clientHeight + 'px';
+#           }).observe(commentBlock.contentDocument.documentElement);
+#         }
+#       </script>
+#     </div>
 
 # 1. Check mail is for comment {{{
 
-- 
cgit v1.2.3-70-g09d2