various tweaks to shared notes

src/public/stylesheets/share.css

@@ -72,6 +72,47 @@ iframe.pdf-view {
     cursor: pointer;
 }
 
+#child-links.grid ul {
+    list-style-type: none;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+}
+
+#child-links.grid ul li {
+    width: 180px;
+    height: 140px;
+    padding: 10px;
+}
+
+#child-links.grid ul li a {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    justify-content: center;
+    align-content: center;
+    text-align: center;
+    font-size: large;
+}
+
+#child-links.grid ul li a:hover {
+    background: #eee;
+}
+
+#child-links.list ul {
+    list-style-type: none;
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding: 0;
+}
+
+#child-links.list ul li {
+    margin-right: 20px;
+}
+
 #menuButton::after {
     position: relative;
     top: -2px;

src/services/date_notes.js

@@ -54,7 +54,7 @@ function getYearNote(dateStr, rootNote) {
         rootNote = getRootCalendarNote();
     }
 
-    const yearStr = dateStr.substr(0, 4);
+    const yearStr = dateStr.trim().substr(0, 4);
 
     let yearNote = attributeService.getNoteWithLabel(YEAR_LABEL, yearStr);
 
@@ -138,6 +138,8 @@ function getDateNoteTitle(rootNote, dayNumber, dateObj) {
 
 /** @returns {Note} */
 function getDateNote(dateStr) {
+    dateStr = dateStr.trim().substr(0, 10);
+
     let dateNote = attributeService.getNoteWithLabel(DATE_LABEL, dateStr);
 
     if (dateNote) {

src/share/content_renderer.js

@@ -1,43 +1,18 @@
 const {JSDOM} = require("jsdom");
-const NO_CONTENT = '<p>This note has no content.</p>';
 const shaca = require("./shaca/shaca");
 
-function getChildrenList(note) {
-    if (note.hasChildren()) {
-        const document = new JSDOM().window.document;
-
-        const ulEl = document.createElement("ul");
-
-        for (const childNote of note.getChildNotes()) {
-            const li = document.createElement("li");
-            const link = document.createElement("a");
-            link.appendChild(document.createTextNode(childNote.title));
-            link.setAttribute("href", childNote.noteId);
-
-            li.appendChild(link);
-            ulEl.appendChild(li);
-        }
-
-        return '<p>Child notes:</p>' + ulEl.outerHTML;
-    }
-    else {
-        return '';
-    }
-}
-
 function getContent(note) {
     let content = note.getContent();
+    let header = '';
+    let isEmpty = false;
 
     if (note.type === 'text') {
         const document = new JSDOM(content || "").window.document;
 
-        const isEmpty = document.body.textContent.trim().length === 0
+        isEmpty = document.body.textContent.trim().length === 0
             && document.querySelectorAll("img").length === 0;
 
-        if (isEmpty) {
-            content = NO_CONTENT;
-        }
-        else {
+        if (!isEmpty) {
             for (const linkEl of document.querySelectorAll("a")) {
                 const href = linkEl.getAttribute("href");
 
@@ -49,6 +24,7 @@ function getContent(note) {
 
                     if (linkedNote) {
                         linkEl.setAttribute("href", linkedNote.shareId);
+                        linkEl.classList.add("type-" + linkedNote.type);
                     }
                     else {
                         linkEl.removeAttribute("href");
@@ -57,28 +33,39 @@ 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>`;
+                header += `
+<script src="../../libraries/katex/katex.min.js"></script>
+<link rel="stylesheet" href="../../libraries/katex/katex.min.css">
+<script src="../../libraries/katex/auto-render.min.js" onload="renderMathInElement(document.getElementById('content'));"></script>
+<script src="../../libraries/katex/mhchem.min.js"></script>`;
             }
         }
     }
     else if (note.type === 'code') {
         if (!content?.trim()) {
-            content = NO_CONTENT;
+            isEmpty = true;
         }
         else {
-            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>`
+            const document = new JSDOM().window.document;
+
+            const preEl = document.createElement('pre');
+            preEl.appendChild(document.createTextNode(content));
+
+            content = preEl.outerHTML;
         }
     }
     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>`
-        }
+        content = `
+<div class="mermaid">${content}</div>
+<hr>
+<details>
+    <summary>Chart source</summary>
+    <pre>${content}</pre>
+</details>`
+        header += `<script src="../../libraries/mermaid.min.js"></script>`;
+    }
     else if (note.type === 'image') {
         content = `<img src="api/images/${note.noteId}/${note.title}?${note.utcDateModified}">`;
     }
@@ -90,13 +77,18 @@ function getContent(note) {
             content = `<button type="button" onclick="location.href='api/notes/${note.noteId}/download'">Download file</button>`;
         }
     }
+    else if (note.type === 'book') {
+        isEmpty = true;
+    }
     else {
         content = '<p>This note type cannot be displayed.</p>';
     }
-    var child = getChildrenList(note);
-    content += child === '' ? '' : `<hr>${child}`;
 
-    return content;
+    return {
+        header,
+        content,
+        isEmpty
+    };
 }
 
 module.exports = {

src/share/routes.js

@@ -29,13 +29,15 @@ function register(router) {
         const note = shaca.aliasToNote[shareId] || shaca.notes[shareId];
 
         if (note) {
-            const content = contentRenderer.getContent(note);
+            const {header, content, isEmpty} = contentRenderer.getContent(note);
 
             const subRoot = getSharedSubTreeRoot(note);
 
             res.render("share/page", {
                 note,
+                header,
                 content,
+                isEmpty,
                 subRoot
             });
         }
@@ -78,7 +80,7 @@ function register(router) {
 
         res.send(note.getContent());
     });
-    
+
     router.get('/share/api/notes/:noteId/view', (req, res, next) => {
         const {noteId} = req.params;
         const note = shaca.getNote(noteId);

src/views/share/page.ejs

@@ -4,49 +4,73 @@
     <meta charset="utf-8">
     <link rel="shortcut icon" href="../favicon.ico">
     <% if (!note.hasLabel("shareOmitDefaultCss")) { %>
-    <link href="../libraries/normalize.min.css" rel="stylesheet">
-    <link href="../stylesheets/share.css" rel="stylesheet">
+        <link href="../libraries/normalize.min.css" rel="stylesheet">
+        <link href="../stylesheets/share.css" rel="stylesheet">
     <% } %>
     <% if (note.type === 'text' || note.type === 'book') { %>
-    <link href="../libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
+        <link href="../libraries/ckeditor/ckeditor-content.css" rel="stylesheet">
     <% } %>
     <% for (const cssRelation of note.getRelations("shareCss")) { %>
-    <link href="api/notes/<%= cssRelation.value %>/download" rel="stylesheet">
+        <link href="api/notes/<%= cssRelation.value %>/download" rel="stylesheet">
     <% } %>
+    <%- header %>
     <title><%= note.title %></title>
 </head>
 <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>
+<div id="layout">
+    <div id="main">
+        <br>
+        <% if (note.parents[0].noteId !== 'share' && note.parents.length !== 0) { %>
+            <nav id="parent-link">
+                Parent note: <a href="<%= note.parents[0].noteId %>" class="type-<% note.type %>"><%= note.parents[0].title %></a>
             </nav>
-            <% } %>
-            <h1 id="title"><%= note.title %></h1>
+        <% } %>
+        <h1 id="title"><%= note.title %></h1>
 
-            <div id="content" class="note-<%= note.type %><% if (note.type === 'text') { %>ck-content<% } %>">
+        <% if (note.type === 'book') { %>
+        <% } else if (isEmpty) { %>
+            <p>This note has no content.</p>
+        <% } else { %>
+            <div id="content" class="type-<%= note.type %><% if (note.type === 'text') { %>ck-content<% } %>">
                 <%- content %>
             </div>
-        </div>
+        <% } %>
 
-        <% if (subRoot.hasChildren()) { %>
+        <% if (note.hasChildren()) { %>
+            <nav id="child-links" class="<% if (isEmpty) { %>grid<% } else { %>list<% } %>">
+                <% if (!isEmpty) { %>
+                    <hr>
+                    <span>Child notes: </span>
+                <% } %>
+
+                <ul>
+                    <% for (const childNote of note.getChildNotes()) { %>
+                        <li>
+                            <a href="<%= childNote.shareId %>"
+                               class="type-<% childNote.type %>"><%= childNote.title %></a>
+                        </li>
+                    <% } %>
+                </ul>
+            </nav>
+        <% } %>
+    </div>
+
+    <% if (subRoot.hasChildren()) { %>
         <button id="menuButton"></button>
 
         <nav id="menu">
             <%- include('tree_item', {note: subRoot, activeNote: note}) %>
         </nav>
-        <% } %>
-    </div>
+    <% } %>
+</div>
 
-    <script>
-        (function () {
-            const menuButton = document.getElementById('menuButton');
-            const layout = document.getElementById('layout');
+<script>
+    (function () {
+        const menuButton = document.getElementById('menuButton');
+        const layout = document.getElementById('layout');
 
-            menuButton.addEventListener('click', () => layout.classList.toggle('navMenu'));
-        }());
-    </script>
+        menuButton.addEventListener('click', () => layout.classList.toggle('navMenu'));
+    }());
+</script>
 </body>
 </html>

src/views/share/tree_item.ejs

@@ -2,7 +2,7 @@
     <% if (activeNote.noteId === note.noteId) { %>
     <strong><%= note.title %></strong>
     <% } else { %>
-    <a href="./<%= note.shareId %>"><%= note.title %></a>
+    <a class="type-<%= note.type %>" href="./<%= note.shareId %>"><%= note.title %></a>
     <% } %>
 </p>