1
0
mirror of https://github.com/lxsang/antd-web-apps synced 2024-11-20 02:18:20 +01:00

Merge pull request #22 from lxsang/master

support comments in odc
This commit is contained in:
Xuan Sang LE 2020-09-22 17:59:22 +02:00 committed by GitHub
commit acbbe8f0a2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 126 additions and 56 deletions

View File

@ -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;
}
}
.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;
}

View File

@ -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

View File

@ -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

View File

@ -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>