Various share page improvements (#2471)

* Add clientside mermaid chart rendering

Merry Christmas :)

* Add katex math rendering client-side

* Update page.ejs

* Revert (wrong branch)

* Add children nodes to all notes under hr

* Add parent note button

* Add note type in child note info

* Fix parent, relative paths

* Add code rendering, fix space in HTML class
This commit is contained in:
Matt 2021-12-27 12:27:00 +00:00 committed by GitHub
parent f56123b864
commit 8366a94bde
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 14 deletions

View file

@ -35,7 +35,7 @@ function getContent(note) {
&& document.querySelectorAll("img").length === 0;
if (isEmpty) {
content = NO_CONTENT + getChildrenList(note);
content = NO_CONTENT;
}
else {
for (const linkEl of document.querySelectorAll("a")) {
@ -57,21 +57,28 @@ function getContent(note) {
}
content = document.body.innerHTML;
if (content.includes(`<span class="math-tex">`)) {
content += `<script src="../../libraries/katex/katex.min.js"></script>`;
content += `<link rel="stylesheet" href="../../libraries/katex/katex.min.css">`;
content += `<script src="../../libraries/katex/auto-render.min.js" onload="renderMathInElement(document.getElementById('content'));"></script>`;
content += `<script src="../../libraries/katex/mhchem.min.js"></script>`;
}
}
}
else if (note.type === 'code' || note.type === 'mermaid') {
else if (note.type === 'code') {
if (!content?.trim()) {
content = NO_CONTENT + getChildrenList(note);
content = NO_CONTENT;
}
else {
const document = new JSDOM().window.document;
const preEl = document.createElement('pre');
preEl.appendChild(document.createTextNode(content));
content = preEl.outerHTML;
content = `<textarea style="width:100px;" id="code">${content}</textarea>`
content += `<link rel="stylesheet" href="../../libraries/codemirror/codemirror.css">`
content += `<script src="../../libraries/codemirror/codemirror.js" onload="var editor = CodeMirror.fromTextArea(document.getElementById('code'), {lineNumbers: true, lineWrapping: true});"></script>`
}
}
else if (note.type === 'mermaid') {
content = `<div class=\"mermaid\">${content}</div><script src=\"../../libraries/mermaid.min.js\"></script><hr><details><summary>Chart source</summary><pre>${content}</pre></details>`
}
else if (note.type === 'image') {
content = `<img src="api/images/${note.noteId}/${note.title}?${note.utcDateModified}">`;
}
@ -83,12 +90,11 @@ function getContent(note) {
content = `<button type="button" onclick="location.href='api/notes/${note.noteId}/download'">Download file</button>`;
}
}
else if (note.type === 'book') {
content = getChildrenList(note);
}
else {
content = '<p>This note type cannot be displayed.</p>' + getChildrenList(note);
content = '<p>This note type cannot be displayed.</p>';
}
var child = getChildrenList(note);
content += child === '' ? '' : `<hr>${child}`;
return content;
}
@ -96,3 +102,5 @@ function getContent(note) {
module.exports = {
getContent
};

View file

@ -18,9 +18,15 @@
<body>
<div id="layout">
<div id="main">
<br>
<% if (note.parents[0].noteId !== 'share' && note.parents.length != 0) { %>
<nav class="parent-link">
<a href="<%= note.parents[0].noteId %>">&lt; Parent note (<%= note.parents[0].title %>)</a>
</nav>
<% } %>
<h1 id="title"><%= note.title %></h1>
<div id="content" class="note-<%= note.type %> <% if (note.type === 'text') { %>ck-content<% } %>">
<div id="content" class="note-<%= note.type %><% if (note.type === 'text') { %>ck-content<% } %>">
<%- content %>
</div>
</div>