support comments in odc

doc/assets/style.css

@@ -1,4 +1,5 @@
-html,body{
+html,
+body {
     margin: 0;
     padding: 0;
     font-family: "Ubuntu";
@@ -61,7 +62,8 @@ div.doc-name a {
     color: #c9c9c9;
 }
 
-a.x-link, a.x-link:hover {
+a.x-link,
+a.x-link:hover {
     text-decoration: none;
     color: #c9c9c9;
     padding-left: 15px;
@@ -187,7 +189,8 @@ div.pagenav {
     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;
 }
@@ -308,3 +310,15 @@ model-viewer{
     width: 100%;
     height: 350px;
 }
+.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;
+}

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,7 +28,8 @@ 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 = apath:gsub(" ", "%%20")
@@ -41,10 +43,12 @@ 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
 
@@ -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

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

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>