feat(share): integrate prev/next navigation

packages/share-theme/src/styles/content-footer.css

@@ -0,0 +1,70 @@
+#content-footer .navigation {
+    display: grid;
+    grid-template-columns: repeat(2,1fr);
+    gap: 1rem;
+    margin-top: 3rem;
+}
+
+#content-footer .navigation a {
+    border-radius: 3px;
+    border: 2px solid #ffffff0d;
+    color: var(--text-primary);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    overflow: hidden;
+    padding: 8px 12px;
+    user-select: none;
+    transform: translateY(0);
+    transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
+}
+
+#content-footer .navigation a:hover {
+    background: var(--background-active);
+    color: var(--background-secondary);
+    text-decoration: none;
+    transform: translateY(-2px);
+}
+
+#content-footer .navigation a.previous {
+    justify-self: flex-start;
+}
+
+#content-footer .navigation a.next {
+    justify-self: flex-end;
+    grid-column: 2/3;
+}
+
+#content-footer .navigation a.previous::before {
+    content: "« ";
+}
+
+#content-footer .navigation a.next::after {
+    content: " »";
+}
+
+#content-footer .navigation + #childLinks {
+    margin-top: 3rem;
+}
+
+
+
+#content-footer {
+    display: flex;
+    flex-direction: column;
+    margin-top: 3rem;
+}
+
+#content-footer .updated {
+    display: flex;
+    justify-content: flex-end;
+    gap: 5px;
+    font-style: italic;
+    font-size: smaller;
+}
+
+#content-footer .updated time {
+    font-weight: bold;
+    
+}

packages/share-theme/src/styles/index.css

@@ -9,6 +9,7 @@
 
 @import "./layout.css";
 @import "./content.css";
+@import "./content-footer.css";
 
 @import "./mobile.css";
 

packages/share-theme/src/templates/page.ejs

@@ -187,6 +187,10 @@ content = content.replaceAll(headingRe, (...match) => {
                     </ul>
                 </nav>
             <% } %>
+
+            <footer id="content-footer">
+                <%- include("prev_next", { note: note, subRoot: subRoot }) %>
+            </footer>
         </div>
         <%
         if (headingMatches.length > 1) {

packages/share-theme/src/templates/prev_next.ejs

@@ -0,0 +1,58 @@
+<%
+    // TODO: code cleanup + putting this behind a toggle/attribute
+    const previousNote = (() => {
+        // If we are at the subRoot, there is no previous
+        if (note.noteId === subRoot.note.noteId) return null;
+
+        const parent = note.getParentNotes()[0];
+        const children = parent.getChildNotes();
+        const index = children.findIndex(n => n.noteId === note.noteId);
+
+        // If we are the first child, previous goes up a level
+        // this is already protected by the first if statement
+        if (index === 0) return parent;
+
+        // We are not the first child at this level so previous
+        // should go to the end of the previous tree
+        let candidate = children[index - 1];
+        while (candidate.hasChildren()) {
+            const children = candidate.getChildNotes();
+            const lastChild = children[children.length - 1];
+            candidate = lastChild;
+        }
+
+        return candidate;
+    })();
+
+    const nextNote = (() => {
+        // If this currently active note has children, next
+        // should be the first child
+        if (note.hasChildren()) return note.getChildNotes()[0];
+
+        let parent = note.getParentNotes()[0];
+        let children = parent.getChildNotes();
+        let index = children.findIndex(n => n.noteId === note.noteId);
+
+        // If we are not the last of the current level, just go
+        // to the next sibling note
+        if (index !== children.length - 1) return children[index + 1];
+
+        // We are the last sibling, we need to find the next ancestral note
+        while (index === children.length - 1) {
+            // If we are already at subRoot level, no reason trying to go higher
+            if (parent.noteId === subRoot.note.noteId) return null;
+
+            const originalParent = parent;
+            parent = parent.getParentNotes()[0];
+            children = parent.getChildNotes();
+            index = children.findIndex(n => n.noteId === originalParent.noteId);
+        }
+
+        return children[index + 1];
+    })();
+%>
+
+<div class="navigation">
+    <% if (previousNote) { %><a class="previous" href="./<%- previousNote.shareId %>"><%- previousNote.title %></a><% } %>
+    <% if (nextNote) { %><a class="next" href="./<%- nextNote.shareId %>"><%- nextNote.title %></a><% } %>
+</div>