Add pages navigation

Author: reakaleek

docs/docset.yml

@@ -105,3 +105,11 @@ toc:
         children:
           - file: first-page.md
           - file: second-page.md
+      - folder: deeply-nested
+        children:
+          - file: index.md
+          - file: foo.md 
+          - file: bar.md
+          - folder: baz
+            children:
+              - file: qux.md

docs/testing/deeply-nested/bar.md

@@ -0,0 +1 @@
+# Bar

docs/testing/deeply-nested/baz/qux.md

@@ -0,0 +1 @@
+# Qux

docs/testing/deeply-nested/foo.md

@@ -0,0 +1 @@
+# Foo

docs/testing/deeply-nested/index.md

@@ -0,0 +1 @@
+# Deeply Nested

src/Elastic.Markdown/Assets/fonts.css

@@ -1,7 +1,22 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@font-face {
+	font-family: "Inter";
+	src: url("./fonts/InterVariable.woff2") format("woff2");
+}
 
+@font-face {
+	font-family: "Mier B";
+	src: url("./fonts/MierB-Regular.woff2") format("woff2");
+	font-weight: normal;
+}
+
+@font-face {
+	font-family: "Mier B";
+	src: url("./fonts/MierB-Bold.woff2") format("woff2");
+	font-weight: bold;
+}
 
 @font-face {
 	font-family: "Mier B";
-	src: url("./fonts/MierB-Regular.woff2") format("woff2")
+	src: url("./fonts/MierB-Demi.woff2") format("woff2");
+	font-weight: 600;
 }

src/Elastic.Markdown/Assets/fonts/InterVariable.woff2

@@ -1,5 +1,6 @@
 import hljs from "highlight.js";
 import {mergeHTMLPlugin} from "./hljs-merge-html-plugin";
+import {$, $$} from 'select-dom/strict.js'
 
 hljs.registerLanguage('apiheader', function() {
     return {
@@ -16,3 +17,41 @@ hljs.registerLanguage('apiheader', function() {
 
 hljs.addPlugin(mergeHTMLPlugin);
 hljs.highlightAll();
+
+
+type NavState = { [key: string]: boolean };
+
+
+function keepNavState(element: HTMLElement) {
+    const inputs = $$('input[type="checkbox"]', element);
+    const sessionState = JSON.parse(sessionStorage.getItem('pagesNavState')) as NavState
+    if (sessionState) {
+        inputs.forEach(input => {
+            const key = input.id;
+            input.checked = input.checked || sessionState[key];
+        });
+    }
+    window.addEventListener('beforeunload', () => {
+        const state = inputs.reduce((state: NavState, input) => {
+            const key = input.id;
+            const value = input.checked;
+            return { ...state, [key]: value};
+        }, {});
+        sessionStorage.setItem('pagesNavState', JSON.stringify(state));
+    });
+}
+
+function keepNavPosition(element: HTMLElement) {
+    const scrollPosition = sessionStorage.getItem('pagesNavScrollPosition');
+    if (scrollPosition) {
+        element.scrollTop = parseInt(scrollPosition);
+    }
+    window.addEventListener('beforeunload', () => {
+        sessionStorage.setItem('pagesNavScrollPosition', element.scrollTop.toString());
+    });
+}
+
+const pagesNav = $('#pages-nav');
+
+keepNavState(pagesNav);
+keepNavPosition(pagesNav);