From 25e75badc1df50d0713ea37a938b03bac63d2455 Mon Sep 17 00:00:00 2001
From: lxsang <xsang.le@gmail.com>
Date: Tue, 22 Sep 2020 17:58:37 +0200
Subject: [PATCH] support comments in odc

---
 doc/assets/style.css              | 114 +++++++++++++++++-------------
 doc/controllers/doccontroller.lua |  21 ++++--
 doc/views/default/index/index.ls  |  13 ++++
 doc/views/default/layout.ls       |  34 +++++++++
 4 files changed, 126 insertions(+), 56 deletions(-)

diff --git a/doc/assets/style.css b/doc/assets/style.css
index e56b454..9e7d1b7 100644
--- a/doc/assets/style.css
+++ b/doc/assets/style.css
@@ -1,4 +1,5 @@
-html,body{
+html,
+body {
     margin: 0;
     padding: 0;
     font-family: "Ubuntu";
@@ -8,7 +9,7 @@ html,body{
     height: 100%;
     overflow: hidden;
 }
-#top{
+#top {
     background-color: #2c2c2c;
     color: white;
     font-weight: bold;
@@ -17,79 +18,80 @@ html,body{
     height: 30px;
 }
 
-#bottom{
+#bottom {
     position: fixed;
     bottom: 0;
     height: 20px;
     text-align: center;
-    color:#878887;
+    color: #878887;
     background-color: white;
     font-size: 13px;
     width: 100%;
-    padding:5px;
+    padding: 5px;
     border-top: 1px solid #878887;
 }
 
-#cover{
+#cover {
     height: calc(100% - 50px);
     overflow-x: hidden;
     overflow-y: auto;
 }
-#navbar{
-    margin:0 auto;
+#navbar {
+    margin: 0 auto;
     max-width: 80%;
     display: flex;
-    justify-content:flex-end;
+    justify-content: flex-end;
     flex-direction: row;
 }
-#book{
-    margin:0 auto;
+#book {
+    margin: 0 auto;
     max-width: 80%;
     max-height: 100%;
     display: block;
-    justify-content:flex-end;
+    justify-content: flex-end;
     flex-direction: row;
     text-align: justify;
     height: 100%;
 }
 div.doc-name {
     text-align: left;
-    padding-top:3px;
+    padding-top: 3px;
 }
 div.doc-name a {
     text-decoration: none;
     color: #c9c9c9;
 }
 
-a.x-link, a.x-link:hover {
+a.x-link,
+a.x-link:hover {
     text-decoration: none;
     color: #c9c9c9;
     padding-left: 15px;
     padding-top: 7px;
 }
-a.x-link::before{
+a.x-link::before {
     content: "\f08e";
-    color:#c9c9c9;
-    width:20px;
+    color: #c9c9c9;
+    width: 20px;
     height: 25px;
     font-family: "FontAwesome";
     font-size: 15px;
 }
-div.doc-name a::before{
+div.doc-name a::before {
     /* padding-top:13px; */
     content: "\f015";
-    color:#c9c9c9;
-    width:20px;
+    color: #c9c9c9;
+    width: 20px;
     height: 25px;
     font-family: "FontAwesome";
     font-size: 18px;
 }
-input.search-box{
+input.search-box {
     outline: none;
     border: 0;
-    flex:1;
-    padding:0;
-    margin:0;
+    flex: 1;
+    padding: 0;
+    margin: 0;
     margin-left: 10px;
     /* padding-top:13px; */
     height: 25px;
@@ -100,12 +102,12 @@ input.search-box{
     line-height: 0.5;
     color: #878887;
 }
-div.search-icon:before{
+div.search-icon:before {
     /* padding-top:13px; */
     content: "\f002";
-    color:#878887;
+    color: #878887;
     display: block;
-    width:20px;
+    width: 20px;
     height: 25px;
     font-family: "FontAwesome";
     font-size: 18px;
@@ -165,7 +167,7 @@ div.doc-toc .caret-down::before {
     font-family: "FontAwesome";
     margin-right: 5px;
 }
-div.doc-toc  .active {
+div.doc-toc .active {
     display: block;
     padding-left: 20px;
 }
@@ -182,12 +184,13 @@ div.doc-content {
 }
 div.pagenav {
     display: flex;
-    justify-content:flex-end;
+    justify-content: flex-end;
     flex-direction: row;
     width: 100%;
 }
 
-div.pagenav a.go_next, div.pagenav a.go_prev {
+div.pagenav a.go_next,
+div.pagenav a.go_prev {
     display: block;
     flex: 1;
     text-decoration: none;
@@ -199,13 +202,12 @@ div.pagenav a.go_next, div.pagenav a.go_prev {
     padding-bottom: 3px;
     margin-bottom: 10px;
 }
-div.pagenav a.go_next:hover, div.pagenav a.go_prev:hover
-{
+div.pagenav a.go_next:hover,
+div.pagenav a.go_prev:hover {
     background-color: #e6e8e8;
 }
 
-div.pagenav a.go_next
-{
+div.pagenav a.go_next {
     padding-right: 5px;
     text-align: center;
 }
@@ -253,7 +255,7 @@ div.md-content p.result-content span.pattern {
     padding-right: 3px;
     border-radius: 2px;
 }
-div.md-content p.result-header a::before{
+div.md-content p.result-header a::before {
     content: "\f002";
     color: #333f67;
     display: inline-block;
@@ -264,7 +266,7 @@ div.md-content p.result-header a::before{
 	padding-left: 10px;
 } */
 #renderer img {
-    max-width:100%;
+    max-width: 100%;
     display: block;
     margin-left: auto;
     margin-right: auto;
@@ -275,7 +277,7 @@ a {
     text-decoration: none;
 }
 
-a:hover{
+a:hover {
     text-decoration: underline;
 }
 
@@ -284,27 +286,39 @@ form.search-form {
 }
 
 td.hljs-ln-numbers {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 
-	text-align: center;
-	color: #ccc;
-	vertical-align: top;
+    text-align: center;
+    color: #ccc;
+    vertical-align: top;
     font-size: 13;
-	/* your custom style here */
+    /* your custom style here */
 }
 
 /* for block of code */
 .hljs-ln td.hljs-ln-code {
-	padding-left: 10px;
+    padding-left: 10px;
 }
 
-model-viewer{
+model-viewer {
     /*border: 1px solid #333f67;*/
     width: 100%;
     height: 350px;
-}
\ No newline at end of file
+}
+.commentsec {
+    padding: 15px;
+    display: block;
+}
+.commentsec .comment-header {
+    text-align: center;
+    border-top: 1px dashed #3170b2;
+    color: #3170b2;
+    margin: 0;
+    padding-top: 10px;
+    padding-bottom: 0px;
+}
diff --git a/doc/controllers/doccontroller.lua b/doc/controllers/doccontroller.lua
index be4f09c..9535df4 100644
--- a/doc/controllers/doccontroller.lua
+++ b/doc/controllers/doccontroller.lua
@@ -9,7 +9,8 @@ local pre_process_md = function(str, obj)
     local content = str
     for capture in str:gmatch("(%[%[@book:image:[^\n%]]*%]%])") do
         local apath = capture:match("%[%[@book:image:([^\n%]]*)%]%]")
-        local pattern = capture:gsub("%[", "%%["):gsub("%]", "%%]"):gsub("%-", "%%-")
+        local pattern = capture:gsub("%[", "%%["):gsub("%]", "%%]"):gsub("%-",
+                                                                         "%%-")
         if apath then
             apath = apath:gsub(" ", "%%%%20")
             print(apath)
@@ -27,9 +28,10 @@ local post_process_md = function(str, obj)
     -- 3D model
     for capture in str:gmatch("(%[%[@book:3dmodel:[^\n%]]*%]%])") do
         local apath = capture:match("%[%[@book:3dmodel:([^\n%]]*)%]%]")
-        local pattern = capture:gsub("%[", "%%["):gsub("%]", "%%]"):gsub("%-", "%%-")
+        local pattern = capture:gsub("%[", "%%["):gsub("%]", "%%]"):gsub("%-",
+                                                                         "%%-")
         if apath then
-            --apath = utils.urlencode(apath):gsub("%%", "%%%%")
+            -- apath = utils.urlencode(apath):gsub("%%", "%%%%")
             apath = apath:gsub(" ", "%%20")
             content = str:gsub(pattern,
                                "<model-viewer src=\"" .. HTTP_ROOT .. "/" ..
@@ -41,12 +43,14 @@ local post_process_md = function(str, obj)
     -- Youtube video
     for capture in str:gmatch("(%[%[youtube:[^\n%]]*%]%])") do
         local apath = capture:match("%[%[youtube:([^\n%]]*)%]%]")
-        local pattern = capture:gsub("%[", "%%["):gsub("%]", "%%]"):gsub("%-", "%%-")
+        local pattern = capture:gsub("%[", "%%["):gsub("%]", "%%]"):gsub("%-",
+                                                                         "%%-")
         if apath then
             content = content:gsub(pattern,
-                "<iframe style='width:100%%;height: auto;min-height: 400px;' src=\"https://www.youtube.com/embed/"..apath.."\"> </iframe>")
+                                   "<iframe style='width:100%%;height: auto;min-height: 400px;' src=\"https://www.youtube.com/embed/" ..
+                                       apath .. "\"> </iframe>")
         end
-end
+    end
 
     return content, has_model
 end
@@ -146,6 +150,11 @@ function DocController:index(...)
             if p then
                 toc.cpath = p
                 path = getpath(p, self)
+                if path and ulib.exists(path) then
+                    self.template:set("url", HTTP_ROOT .. '/' .. self.name ..
+                                          '/' ..
+                                          std.b64encode(toc.cpath):gsub("=", ""))
+                end
             end
         end
     else
diff --git a/doc/views/default/index/index.ls b/doc/views/default/index/index.ls
index de42c6a..2b83b4f 100644
--- a/doc/views/default/index/index.ls
+++ b/doc/views/default/index/index.ls
@@ -92,6 +92,19 @@
         echo(data)
     ?>
 </div>
+<?lua
+    if url then
+?>
+<div class = "commentsec">
+<h3 class = "comment-header">Comments</h1>
+<div>
+The comment editor supports <b>Markdown</b> document format. Your email is necessary to notify you of further updates on the discussion. It will be hidden from the public.
+</div>
+<div id="quick_talk_comment_thread"></div>
+</div>
+<?lua
+    end
+?>
 <div class = "pagenav">
     <?lua
         if prev_entry then
diff --git a/doc/views/default/layout.ls b/doc/views/default/layout.ls
index 66a3826..941f2e4 100644
--- a/doc/views/default/layout.ls
+++ b/doc/views/default/layout.ls
@@ -2,6 +2,7 @@
 local tocdata = __main__:get("toc")
 local elinks = __main__:get("elinks")
 local has_3d = __main__:get("has_3d")
+local url = __main__:get("url")
 ?>
 <!DOCTYPE html>
 <html>
@@ -14,6 +15,7 @@ local has_3d = __main__:get("has_3d")
             rel="stylesheet"
             type="text/css"
             href="<?=HTTP_ROOT?>/rst/katex/katex.min.css" />
+        <script src="<?=HTTP_ROOT?>/rst/gscripts/jquery-3.2.1.min.js"> </script>
         <?lua
             if has_3d then
         ?>
@@ -28,7 +30,19 @@ local has_3d = __main__:get("has_3d")
         <script
             src="<?=HTTP_ROOT?>/rst/hljs/highlightjs-line-numbers.min.js"
         ></script>
+
+        <?lua
+            if url then
+        ?>
+        <link rel="stylesheet" type="text/css" href="https://chat.iohub.dev/assets/quicktalk.css" />
+        <script src="https://chat.iohub.dev/assets/quicktalk.js"> </script>
+        <?lua
+            else
+        ?>
         <script>hljs.initHighlightingOnLoad();</script>
+        <?lua
+            end
+        ?>
         <script
             src="<?=HTTP_ROOT?>/rst/katex/katex.min.js"
         ></script>
@@ -128,7 +142,27 @@ local has_3d = __main__:get("has_3d")
                     if( val === "" || val == "\n") return false;
                     return true;
                 }
+        <?lua
+            if url then
+        ?>
+                var options = {
+                    target: "quick_talk_comment_thread",
+                    api_uri: "https://chat.iohub.dev/comment",
+                    uri: "<?=url?>",
+                    onload: function(){
+                        renderMathInElement($("#book")[0]);
+                        $('pre code').each(function(i, block) {
+                            hljs.highlightBlock(block);
+                            hljs.lineNumbersBlock(block);
+                        });
+                    }
+                };
+                new QuickTalk(options);
+        <?lua
+            end
+        ?>
             });
+        
         </script>
     </body>
 </html>