Improve page performance and rendering

- Moves expanding the tree navigation to the template so the rendering is already done before page load
- Adds a way to explicitly set the logo size to prevent the page moving after it loads in

src/scripts/modules/expanders.ts

@@ -1,15 +1,15 @@
 // In case a linked article lead to a new tree
-const activeLink = document.querySelector("#menu a.active");
+// const activeLink = document.querySelector("#menu a.active");
-if (activeLink) {
+// if (activeLink) {
-    let parent = activeLink.parentElement;
+//     let parent = activeLink.parentElement;
-    const mainMenu = document.getElementById("#menu");
+//     const mainMenu = document.getElementById("#menu");
-    while (parent && parent !== mainMenu) {
+//     while (parent && parent !== mainMenu) {
-        if (parent.matches(".submenu-item") && !parent.classList.contains("expanded")) {
+//         if (parent.matches(".submenu-item") && !parent.classList.contains("expanded")) {
-            parent.classList.add("expanded");
+//             parent.classList.add("expanded");
-        }
+//         }
-        parent = parent.parentElement;
+//         parent = parent.parentElement;
-    }
+//     }
-}
+// }
 
 export default function setupExpanders() {
     const expanders = Array.from(document.querySelectorAll("#menu .submenu-item"));

src/templates/page.ejs

@@ -67,7 +67,7 @@ const customServerYml = `- url: "{protocol}://{domain}:{port}/etapi"
         let openGraphImage = subRoot.note.getLabelValue("shareOpenGraphImage");
         // Relation takes priority and requires some altering
         if (subRoot.note.hasRelation("shareOpenGraphImage")) {
-            openGraphImage = `api/images/${subRoot.note.getRelation("shareOpenGraphImage").value}/download`;
+            openGraphImage = `api/images/${subRoot.note.getRelation("shareOpenGraphImage").value}/image.png`;
         }
     %>
     <title><%= pageTitle %></title>
@@ -90,6 +90,9 @@ const customServerYml = `- url: "{protocol}://{domain}:{port}/etapi"
     <meta name="theme-color" content="<%= openGraphColor %>">
 </head>
 <%
+const logoWidth = subRoot.note.getLabelValue("shareLogoWidth");
+const logoHeight = subRoot.note.getLabelValue("shareLogoHeight");
+const mobileLogoHeight = logoHeight && logoWidth ? 32 / (logoWidth / logoHeight) : "";
 const shareRootLink = subRoot.note.hasLabel("shareRootLink") ? subRoot.note.getLabelValue("shareRootLink") : `./${subRoot.note.noteId}`;
 const currentTheme = note.getLabel("shareTheme") === "light" ? "light" : "dark";
 const themeClass = currentTheme === "light" ? " theme-light" : " theme-dark";
@@ -105,7 +108,7 @@ content = content.replaceAll(headingRe, (...match) => {
 <div id="mobile-header">
     <a href="<%= shareRootLink %>">
         <% if (subRoot.note.hasRelation("shareLogo")) { %>
-            <img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/download" alt="Logo" />
+            <img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/image.png" width="<%= logoWidth %>" height="<%= mobileLogoHeight %>" alt="Logo" />
         <% } %>
         <%= subRoot.note.title %>
     </a>
@@ -117,7 +120,7 @@ content = content.replaceAll(headingRe, (...match) => {
             <div id="site-header">
                 <a href="<%= shareRootLink %>">
                     <% if (subRoot.note.hasRelation("shareLogo")) { %>
-                        <img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/download" alt="Logo" />
+                        <img src="api/images/<%= subRoot.note.getRelation("shareLogo").value %>/image.png" width="<%= logoWidth %>" height="<%= logoHeight %>" alt="Logo" />
                     <% } %>
                     <%= subRoot.note.title %>
                 </a>
@@ -137,7 +140,16 @@ content = content.replaceAll(headingRe, (...match) => {
             </div>
         <% if (subRoot.note.hasVisibleChildren()) { %>
             <nav id="menu">
-                <%- include("tree_item", {note: subRoot.note, activeNote: note, subRoot: subRoot}) %>
+                <%
+                const ancestors = [];
+                let notePointer = note;
+                while (notePointer.parents[0].noteId !== "_share") {
+                    const pointerParent = notePointer.parents[0];
+                    ancestors.push(pointerParent.noteId);
+                    notePointer = pointerParent;
+                }
+                %>
+                <%- include("tree_item", {note: subRoot.note, activeNote: note, subRoot: subRoot, ancestors: ancestors}) %>
             </nav>
         <% } %>   
         </div>

src/templates/tree_item.ejs

@@ -16,8 +16,12 @@ const target = isExternalLink ? ` target="_blank" rel="noopener noreferrer"` : "
 <% if (note.hasVisibleChildren()) { %>
 <ul>
     <% note.getVisibleChildNotes().forEach(function (childNote) { %>
-        <% const hasChildren = childNote.hasVisibleChildren(); %>
+    <%
-        <li class="<% if (hasChildren) { %>submenu-<% } %>item">
+        const hasChildren = childNote.hasVisibleChildren();
+        const isAncestorOfActive = ancestors.some(p => p === childNote.noteId);
+        const expandedClass = isAncestorOfActive ? " expanded" : "";
+    %>
+        <li class="<% if (hasChildren) { %>submenu-<% } %>item<%= expandedClass %>">
             <%- include('tree_item', {note: childNote, subRoot: subRoot}) %>
         </li>
     <% }) %>