From e46cfab03cc1cb0f7ab15bc391353636ee891276 Mon Sep 17 00:00:00 2001
From: Sebastiaan van Stijn <github@gone.nl>
Date: Wed, 14 Oct 2020 01:00:21 +0200
Subject: [PATCH] Load toc.js asynchronously as JSON

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
---
 _includes/body.html  |  1 -
 js/docs.js           | 28 ++++++++++++++++------------
 js/theme-switcher.js |  8 ++++++++
 js/toc.js            |  5 -----
 js/toc.json          |  4 ++++
 5 files changed, 28 insertions(+), 18 deletions(-)
 delete mode 100644 js/toc.js
 create mode 100644 js/toc.json

diff --git a/_includes/body.html b/_includes/body.html
index 75620019ee..6e90eeda18 100644
--- a/_includes/body.html
+++ b/_includes/body.html
@@ -79,7 +79,6 @@
     <script src="/js/bootstrap.min.js"></script>
     <script defer src="/js/metadata.js"></script>
     <script defer src="/js/docs.js"></script>
-    <script defer src="/js/toc.js"></script>
     <script defer src="/js/search.js"></script>
     {%- include analytics/polldaddy.html -%}
 </body>
diff --git a/js/docs.js b/js/docs.js
index 06f5213368..c58973cb0a 100644
--- a/js/docs.js
+++ b/js/docs.js
@@ -82,19 +82,21 @@ function walkTree(tree) {
     }
 }
 
-function renderNav(docstoc) {
-    for (let i = 0; i < docstoc.horizontalnav.length; i++) {
-        if (docstoc.horizontalnav[i].path === pageURL || pageIsInSection(docstoc[docstoc.horizontalnav[i].node])) {
-            // This is the current section. Set the corresponding header-nav link
-            // to active, and build the left-hand (vertical) navigation
-            document.getElementById(docstoc.horizontalnav[i].node).closest("li").classList.add("active")
-            walkTree(docstoc[docstoc.horizontalnav[i].node]);
-            document.getElementById("jsTOCLeftNav").innerHTML = outputLetNav.join("");
+function renderNav() {
+    getJSON( "/js/toc.json", function( data ) {
+        for (const item of data.horizontalnav) {
+            if (item.path === pageURL || pageIsInSection(data[item.node])) {
+                // This is the current section. Set the corresponding header-nav link
+                // to active, and build the left-hand (vertical) navigation
+                _('#'+item.node).closest("li").classList.add("active")
+                walkTree(data[item.node]);
+                _("#jsTOCLeftNav").innerHTML = outputLetNav.join("");
+            }
         }
-    }
-    // Scroll the current menu item into view. We actually pick the item *above*
-    // the current item to give some headroom above
-    scrollMenuItem("#jsTOCLeftNav a.currentPage")
+        // Scroll the current menu item into view. We actually pick the item *above*
+        // the current item to give some headroom above
+        scrollMenuItem("#jsTOCLeftNav a.currentPage")
+    });
 }
 
 // Scroll the given menu item into view. We actually pick the item *above*
@@ -256,3 +258,5 @@ window.onload = function () {
         $('.nav-tabs > li > a[data-group="' + group + '"]').tab("show");
     });
 };
+
+ready(renderNav);
diff --git a/js/theme-switcher.js b/js/theme-switcher.js
index 77327ccabf..bce65e16cd 100644
--- a/js/theme-switcher.js
+++ b/js/theme-switcher.js
@@ -2,6 +2,14 @@
 const _ = s => document.querySelector(s);
 const ready = f => document.readyState !== 'loading' ? f() : document.addEventListener('DOMContentLoaded', f)
 
+function getJSON(url, fn) {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.responseType = 'json';
+    xhr.onload = () => xhr.status === 200 ? fn(xhr.response) : null;
+    xhr.send();
+}
+
 const darkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
 const selectedTheme = window.localStorage ? localStorage.getItem("theme") : null;
 
diff --git a/js/toc.js b/js/toc.js
deleted file mode 100644
index e2738475b7..0000000000
--- a/js/toc.js
+++ /dev/null
@@ -1,5 +0,0 @@
----
-layout: null
----
-var docstoc = {{ site.data.toc | jsonify }}
-renderNav(docstoc);
diff --git a/js/toc.json b/js/toc.json
new file mode 100644
index 0000000000..8d338bf0d7
--- /dev/null
+++ b/js/toc.json
@@ -0,0 +1,4 @@
+---
+layout: null
+---
+{{ site.data.toc | jsonify }}