Docs base plate?

docs/_static/codeblocks.css

@@ -0,0 +1,143 @@
+/* light theme: default */
+.highlight .hll { background-color: #ffffcc }
+.highlight  { background: #f0f0f0; }
+.highlight .c { color: #60a0b0; font-style: italic } /* Comment */
+.highlight .err { border: 1px solid #FF0000 } /* Error */
+.highlight .k { color: #007020; font-weight: bold } /* Keyword */
+.highlight .o { color: #666666 } /* Operator */
+.highlight .ch { color: #60a0b0; font-style: italic } /* Comment.Hashbang */
+.highlight .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #007020 } /* Comment.Preproc */
+.highlight .cpf { color: #60a0b0; font-style: italic } /* Comment.PreprocFile */
+.highlight .c1 { color: #60a0b0; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */
+.highlight .gd { color: #A00000 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #FF0000 } /* Generic.Error */
+.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #00A000 } /* Generic.Inserted */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.highlight .gt { color: #0044DD } /* Generic.Traceback */
+.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
+.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
+.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
+.highlight .kp { color: #007020 } /* Keyword.Pseudo */
+.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #902000 } /* Keyword.Type */
+.highlight .m { color: #40a070 } /* Literal.Number */
+.highlight .s { color: #4070a0 } /* Literal.String */
+.highlight .na { color: #4070a0 } /* Name.Attribute */
+.highlight .nb { color: #007020 } /* Name.Builtin */
+.highlight .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
+.highlight .no { color: #60add5 } /* Name.Constant */
+.highlight .nd { color: #555555; font-weight: bold } /* Name.Decorator */
+.highlight .ni { color: #d55537; font-weight: bold } /* Name.Entity */
+.highlight .ne { color: #007020 } /* Name.Exception */
+.highlight .nf { color: #06287e } /* Name.Function */
+.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
+.highlight .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
+.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
+.highlight .nv { color: #bb60d5 } /* Name.Variable */
+.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mb { color: #40a070 } /* Literal.Number.Bin */
+.highlight .mf { color: #40a070 } /* Literal.Number.Float */
+.highlight .mh { color: #40a070 } /* Literal.Number.Hex */
+.highlight .mi { color: #40a070 } /* Literal.Number.Integer */
+.highlight .mo { color: #40a070 } /* Literal.Number.Oct */
+.highlight .sa { color: #4070a0 } /* Literal.String.Affix */
+.highlight .sb { color: #4070a0 } /* Literal.String.Backtick */
+.highlight .sc { color: #4070a0 } /* Literal.String.Char */
+.highlight .dl { color: #4070a0 } /* Literal.String.Delimiter */
+.highlight .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #4070a0 } /* Literal.String.Double */
+.highlight .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
+.highlight .sh { color: #4070a0 } /* Literal.String.Heredoc */
+.highlight .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
+.highlight .sx { color: #c65d09 } /* Literal.String.Other */
+.highlight .sr { color: #235388 } /* Literal.String.Regex */
+.highlight .s1 { color: #4070a0 } /* Literal.String.Single */
+.highlight .ss { color: #517918 } /* Literal.String.Symbol */
+.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #06287e } /* Name.Function.Magic */
+.highlight .vc { color: #bb60d5 } /* Name.Variable.Class */
+.highlight .vg { color: #bb60d5 } /* Name.Variable.Global */
+.highlight .vi { color: #bb60d5 } /* Name.Variable.Instance */
+.highlight .vm { color: #bb60d5 } /* Name.Variable.Magic */
+.highlight .il { color: #40a070 } /* Literal.Number.Integer.Long */
+
+/* dark theme: modified "native" */
+:root[data-theme="dark"] .highlight pre { background-color: #2a2a2e }
+:root[data-theme="dark"] .highlight .hll { background-color: #2a2a2e }
+:root[data-theme="dark"] .highlight .c { color: #999999; font-style: italic } /* Comment */
+:root[data-theme="dark"] .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+:root[data-theme="dark"] .highlight .g { color: #d0d0d0 } /* Generic */
+:root[data-theme="dark"] .highlight .k { color: #6ab825; font-weight: bold } /* Keyword */
+:root[data-theme="dark"] .highlight .l { color: #d0d0d0 } /* Literal */
+:root[data-theme="dark"] .highlight .n { color: #d0d0d0 } /* Name */
+:root[data-theme="dark"] .highlight .o { color: #d0d0d0 } /* Operator */
+:root[data-theme="dark"] .highlight .x { color: #d0d0d0 } /* Other */
+:root[data-theme="dark"] .highlight .p { color: #d0d0d0 } /* Punctuation */
+:root[data-theme="dark"] .highlight .cm { color: #999999; font-style: italic } /* Comment.Multiline */
+:root[data-theme="dark"] .highlight .cp { color: #cd2828; font-weight: bold } /* Comment.Preproc */
+:root[data-theme="dark"] .highlight .c1 { color: #999999; font-style: italic } /* Comment.Single */
+:root[data-theme="dark"] .highlight .cs { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
+:root[data-theme="dark"] .highlight .gd { color: #d22323 } /* Generic.Deleted */
+:root[data-theme="dark"] .highlight .ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */
+:root[data-theme="dark"] .highlight .gr { color: #d22323 } /* Generic.Error */
+:root[data-theme="dark"] .highlight .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
+:root[data-theme="dark"] .highlight .gi { color: #589819 } /* Generic.Inserted */
+:root[data-theme="dark"] .highlight .go { color: #cccccc } /* Generic.Output */
+:root[data-theme="dark"] .highlight .gp { color: #aaaaaa } /* Generic.Prompt */
+:root[data-theme="dark"] .highlight .gs { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
+:root[data-theme="dark"] .highlight .gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
+:root[data-theme="dark"] .highlight .gt { color: #d22323 } /* Generic.Traceback */
+:root[data-theme="dark"] .highlight .kc { color: #6ab825; font-weight: bold } /* Keyword.Constant */
+:root[data-theme="dark"] .highlight .kd { color: #6ab825; font-weight: bold } /* Keyword.Declaration */
+:root[data-theme="dark"] .highlight .kn { color: #6ab825; font-weight: bold } /* Keyword.Namespace */
+:root[data-theme="dark"] .highlight .kp { color: #6ab825 } /* Keyword.Pseudo */
+:root[data-theme="dark"] .highlight .kr { color: #6ab825; font-weight: bold } /* Keyword.Reserved */
+:root[data-theme="dark"] .highlight .kt { color: #6ab825; font-weight: bold } /* Keyword.Type */
+:root[data-theme="dark"] .highlight .ld { color: #d0d0d0 } /* Literal.Date */
+:root[data-theme="dark"] .highlight .m { color: #7fb1d7 } /* Literal.Number */
+:root[data-theme="dark"] .highlight .s { color: #ed9d13 } /* Literal.String */
+:root[data-theme="dark"] .highlight .na { color: #bbbbbb; } /* Name.Attribute */
+:root[data-theme="dark"] .highlight .nb { color: #29a5b3; } /* Name.Builtin */
+:root[data-theme="dark"] .highlight .nc { color: #6494d8;} /* Name.Class */
+:root[data-theme="dark"] .highlight .no { color: #40ffff; } /* Name.Constant */
+:root[data-theme="dark"] .highlight .nd { color: #ffa500; } /* Name.Decorator */
+:root[data-theme="dark"] .highlight .ni { color: #d0d0d0; } /* Name.Entity */
+:root[data-theme="dark"] .highlight .ne { color: #bbbbbb; } /* Name.Exception */
+:root[data-theme="dark"] .highlight .nf { color: #6494d8; } /* Name.Function */
+:root[data-theme="dark"] .highlight .fm { color: #6494d8; } /* Name.Function.Magic */
+:root[data-theme="dark"] .highlight .nl { color: #d0d0d0; } /* Name.Label */
+:root[data-theme="dark"] .highlight .nn { color: #6494d8;} /* Name.Namespace */
+:root[data-theme="dark"] .highlight .nx { color: #d0d0d0; } /* Name.Other */
+:root[data-theme="dark"] .highlight .py { color: #d0d0d0; } /* Name.Property */
+:root[data-theme="dark"] .highlight .nt { color: #6ab825; font-weight: bold } /* Name.Tag */
+:root[data-theme="dark"] .highlight .nv { color: #40ffff; } /* Name.Variable */
+:root[data-theme="dark"] .highlight .ow { color: #6ab825; font-weight: bold } /* Operator.Word */
+:root[data-theme="dark"] .highlight .w  { color: #666666; } /* Text.Whitespace */
+:root[data-theme="dark"] .highlight .mf { color: #7fb1d7; } /* Literal.Number.Float */
+:root[data-theme="dark"] .highlight .mh { color: #7fb1d7; } /* Literal.Number.Hex */
+:root[data-theme="dark"] .highlight .mi { color: #7fb1d7; } /* Literal.Number.Integer */
+:root[data-theme="dark"] .highlight .mo { color: #7fb1d7; } /* Literal.Number.Oct */
+:root[data-theme="dark"] .highlight .sb { color: #ed9d13; } /* Literal.String.Backtick */
+:root[data-theme="dark"] .highlight .sc { color: #ed9d13; } /* Literal.String.Char */
+:root[data-theme="dark"] .highlight .sd { color: #ed9d13; } /* Literal.String.Doc */
+:root[data-theme="dark"] .highlight .s2 { color: #ed9d13; } /* Literal.String.Double */
+:root[data-theme="dark"] .highlight .se { color: #ed9d13; } /* Literal.String.Escape */
+:root[data-theme="dark"] .highlight .sh { color: #ed9d13; } /* Literal.String.Heredoc */
+:root[data-theme="dark"] .highlight .si { color: #ed9d13; } /* Literal.String.Interpol */
+:root[data-theme="dark"] .highlight .sx { color: #ffa500; } /* Literal.String.Other */
+:root[data-theme="dark"] .highlight .sr { color: #ed9d13; } /* Literal.String.Regex */
+:root[data-theme="dark"] .highlight .s1 { color: #ed9d13; } /* Literal.String.Single */
+:root[data-theme="dark"] .highlight .ss { color: #ed9d13; } /* Literal.String.Symbol */
+:root[data-theme="dark"] .highlight .bp { color: #29a5b3; } /* Name.Builtin.Pseudo */
+:root[data-theme="dark"] .highlight .vc { color: #40ffff; } /* Name.Variable.Class */
+:root[data-theme="dark"] .highlight .vg { color: #40ffff; } /* Name.Variable.Global */
+:root[data-theme="dark"] .highlight .vi { color: #40ffff; } /* Name.Variable.Instance */
+:root[data-theme="dark"] .highlight .il { color: #7fb1d7; } /* Literal.Number.Integer.Long */

docs/_static/copy.js

@@ -0,0 +1,34 @@
+const COPY = "content_copy";
+const COPIED = "done";
+
+const copy = async (obj) => {
+  // <span class="copy"><span class="material-icons">{{text}}</span></span>
+  await navigator.clipboard.writeText(obj.children[1].innerText).then(
+    () => {
+      let icon = obj.children[0].children[0];
+      icon.textContent = COPIED;
+      setTimeout(() => (icon.textContent = COPY), 2500);
+    },
+    (r) => alert('Could not copy codeblock:\n' + r.toString())
+  );
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  let allCodeblocks = document.querySelectorAll("div[class='highlight']");
+
+  for (let codeblock of allCodeblocks) {
+    codeblock.parentNode.className += " relative-copy";
+    let copyEl = document.createElement("span");
+    copyEl.addEventListener('click', () => copy(codeblock));
+    copyEl.className = "copy";
+    copyEl.setAttribute("aria-label", "Copy Code");
+    copyEl.setAttribute("title", "Copy Code");
+
+    let copyIcon = document.createElement("span");
+    copyIcon.className = "material-icons";
+    copyIcon.textContent = COPY;
+    copyEl.append(copyIcon);
+
+    codeblock.prepend(copyEl);
+  }
+});

docs/_static/custom.js

@@ -0,0 +1,113 @@
+'use-strict';
+
+let activeModal = null;
+let bottomHeightThreshold, sections;
+let hamburgerToggle;
+let mobileSearch;
+let sidebar;
+let toTop;
+
+class Modal {
+  constructor(element) {
+    this.element = element;
+  }
+
+  close() {
+    activeModal = null;
+    this.element.style.display = 'none'
+  }
+
+  open() {
+    if (activeModal) {
+      activeModal.close();
+    }
+    activeModal = this;
+    this.element.style.display = 'flex'
+  }
+}
+
+class SearchBar {
+
+  constructor() {
+    this.box = document.querySelector('nav.mobile-only');
+    this.bar = document.querySelector('nav.mobile-only input[type="search"]');
+    this.openButton = document.getElementById('open-search');
+    this.closeButton = document.getElementById('close-search');
+  }
+
+  open() {
+    this.openButton.hidden = true;
+    this.closeButton.hidden = false;
+    this.box.style.top = "100%";
+    this.bar.focus();
+  }
+
+  close() {
+    this.openButton.hidden = false;
+    this.closeButton.hidden = true;
+    this.box.style.top = "0";
+  }
+
+}
+
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  mobileSearch = new SearchBar();
+
+  bottomHeightThreshold = document.documentElement.scrollHeight - 30;
+  sections = document.querySelectorAll('section');
+  hamburgerToggle = document.getElementById('hamburger-toggle');
+  
+  toTop = document.getElementById('to-top');
+  toTop.hidden = !(window.scrollY > 0);
+
+  if (hamburgerToggle) {
+    hamburgerToggle.addEventListener('click', (e) => {
+      sidebar.element.classList.toggle('sidebar-toggle');
+      let button = hamburgerToggle.firstElementChild;
+      if (button.textContent == 'menu') {
+        button.textContent = 'close';
+      }
+      else {
+        button.textContent = 'menu';
+      }
+    });
+  }
+
+  const tables = document.querySelectorAll('.py-attribute-table[data-move-to-id]');
+  tables.forEach(table => {
+    let element = document.getElementById(table.getAttribute('data-move-to-id'));
+    let parent = element.parentNode;
+    // insert ourselves after the element
+    parent.insertBefore(table, element.nextSibling);
+  });
+
+  window.addEventListener('scroll', () => {
+    toTop.hidden = !(window.scrollY > 0);
+  });
+});
+
+document.addEventListener('keydown', (event) => {
+  if (event.code == "Escape" && activeModal) {
+    activeModal.close();
+  }
+});
+
+function searchBarClick(event, which) {
+  event.preventDefault();
+
+  if (event.button === 1 || event.buttons === 4) {
+      which.target = "_blank";  // Middle mouse button was clicked. Set our target to a new tab.
+  }
+  else if (event.button === 2) {
+    return  // Right button was clicked... Don't do anything here.
+  }
+  else {
+    which.target = "_self";  // Revert to same window.
+  }
+
+  which.submit();
+}

docs/_static/icons.css

@@ -0,0 +1,10 @@
+@font-face {
+    font-family: 'Custom Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url('icons.woff') format('woff2');
+}
+
+.custom-icons {
+    font-family: 'Custom Icons' !important;
+}

docs/_static/scorer.js

@@ -0,0 +1,83 @@
+'use-strict';
+
+let queryBeingDone = null;
+let pattern = null;
+
+const escapedRegex = /[-\/\\^$*+?.()|[\]{}]/g;
+function escapeRegex(e) {
+    return e.replace(escapedRegex, '\\$&');
+}
+
+// for some reason Sphinx shows some entries twice
+// if something has been scored already I'd rather sort it to the bottom
+const beenScored = new Set();
+
+function __score(haystack, regex) {
+    let match = regex.exec(haystack);
+    if (match == null) {
+        return Number.MAX_VALUE;
+    }
+    let subLength = match[0].length;
+    let start = match.index;
+    return (subLength * 1000 + start) / 1000.0;
+}
+
+// unused for now
+function __cleanNamespaces(query) {
+    return query.replace(/(discord\.(ext\.)?)?(.+)/, '$3');
+}
+
+Scorer = {
+
+    // Implement the following function to further tweak the score for each result
+    // The function takes a result array [filename, title, anchor, descr, score]
+    // and returns the new score.
+    score: (result) => {
+        // only inflate the score of things that are actual API reference things
+        const [, title, , , score] = result;
+
+        if (pattern !== null && title.startsWith('discord.')) {
+            let _score = __score(title, pattern);
+            if (_score === Number.MAX_VALUE) {
+                return score;
+            }
+            if (beenScored.has(title)) {
+                return 0;
+            }
+            beenScored.add(title);
+            let newScore = 100 + queryBeingDone.length - _score;
+            // console.log(`${title}: ${score} -> ${newScore} (${_score})`);
+            return newScore;
+        }
+        return score;
+    },
+
+    // query matches the full name of an object
+    objNameMatch: 15,
+    // or matches in the last dotted part of the object name
+    objPartialMatch: 11,
+    // Additive scores depending on the priority of the object
+    objPrio: {
+        0: 15,  // used to be importantResults
+        1: 7,   // used to be objectResults
+        2: -5   // used to be unimportantResults
+    },
+    //  Used when the priority is not in the mapping.
+    objPrioDefault: 0,
+
+    // query found in title
+    title: 15,
+    partialTitle: 7,
+    // query found in terms
+    term: 5,
+    partialTerm: 2
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+    const params = new URLSearchParams(window.location.search);
+    queryBeingDone = params.get('q');
+    if (queryBeingDone) {
+        let pattern = Array.from(queryBeingDone).map(escapeRegex).join('.*?');
+        pattern = new RegExp(pattern, 'i');
+    }
+});

docs/_static/settings.js

@@ -0,0 +1,106 @@
+'use-strict';
+
+let settingsModal;
+
+class Setting {
+  constructor(name, defaultValue, setter) {
+    this.name = name;
+    this.defaultValue = defaultValue;
+    this.setValue = setter;
+  }
+
+  setElement() {
+    throw new TypeError('Abstract methods should be implemented.');
+  }
+
+  load() {
+    let value = JSON.parse(localStorage.getItem(this.name));
+    this.value = value === null ? this.defaultValue : value;
+    try {
+      this.setValue(this.value);
+    } catch (error) {
+      console.error(`Failed to apply setting "${this.name}" With value:`, this.value);
+      console.error(error);
+    }
+  }
+
+  update() {
+    throw new TypeError('Abstract methods should be implemented.');
+  }
+
+}
+
+class CheckboxSetting extends Setting {
+
+  setElement() {
+    let element = document.querySelector(`input[name=${this.name}]`);
+    element.checked = this.value;
+  }
+
+  update(element) {
+    localStorage.setItem(this.name, element.checked);
+    this.setValue(element.checked);
+  }
+
+}
+
+class RadioSetting extends Setting {
+
+  setElement() {
+    let element = document.querySelector(`input[name=${this.name}][value=${this.value}]`);
+    element.checked = true;
+  }
+
+  update(element) {
+    localStorage.setItem(this.name, `"${element.value}"`);
+    this.setValue(element.value);
+  }
+
+}
+
+function getRootAttributeToggle(attributeName, valueName) {
+  function toggleRootAttribute(set) {
+    if (set) {
+      document.documentElement.setAttribute(`data-${attributeName}`, valueName);
+    } else {
+      document.documentElement.removeAttribute(`data-${attributeName}`);
+    }
+  }
+  return toggleRootAttribute;
+}
+
+function setTheme(value) {
+  if (value === 'automatic') {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+      document.documentElement.setAttribute('data-theme', 'light');
+    }
+  }
+  else {
+    document.documentElement.setAttribute('data-theme', value);
+  }
+}
+
+const settings = [
+  new CheckboxSetting('useSerifFont', false, getRootAttributeToggle('font', 'serif')),
+  new RadioSetting('setTheme', 'automatic', setTheme)
+]
+
+function updateSetting(element) {
+  let setting = settings.find((s) => s.name == element.name);
+  if (setting) {
+    setting.update(element);
+  }
+}
+
+for (const setting of settings) {
+  setting.load();
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  settingsModal = new Modal(document.querySelector('div#settings.modal'));
+  for (const setting of settings) {
+    setting.setElement();
+  }
+});

docs/_static/sidebar.js

@@ -0,0 +1,127 @@
+class Sidebar {
+  constructor(element) {
+    this.element = element;
+    this.activeLink = null;
+
+    this.element.addEventListener('click', (e) => {
+      // If we click a navigation, close the hamburger menu
+      if (e.target.tagName == 'A' && this.element.classList.contains('sidebar-toggle')) {
+        this.element.classList.remove('sidebar-toggle');
+        let button = hamburgerToggle.firstElementChild;
+        button.textContent = 'menu';
+
+        // Scroll a little up to actually see the header
+        // Note: this is generally around ~55px
+        // A proper solution is getComputedStyle but it can be slow
+        // Instead let's just rely on this quirk and call it a day
+        // This has to be done after the browser actually processes
+        // the section movement
+        setTimeout(() => window.scrollBy(0, -100), 75);
+      }
+    });
+  }
+
+  createCollapsableSections() {
+    let toc = this.element.querySelector('ul');
+    if (!toc) {
+      return
+    }
+    let allReferences = toc.querySelectorAll('a.reference.internal:not([href="#"])');
+
+    for (let ref of allReferences) {
+
+      let next = ref.nextElementSibling;
+
+      if (next && next.tagName === "UL") {
+
+        let icon = document.createElement('span');
+        icon.className = 'material-icons collapsible-arrow expanded';
+        icon.innerText = 'expand_more';
+
+        if (next.parentElement.tagName == "LI") {
+          next.parentElement.classList.add('no-list-style')
+        }
+
+        icon.addEventListener('click', () => {
+          if (icon.classList.contains('expanded')) {
+            this.collapseSection(icon);
+          } else {
+            this.expandSection(icon);
+          }
+        })
+
+        ref.classList.add('ref-internal-padding')
+        ref.parentNode.insertBefore(icon, ref);
+      }
+    }
+  }
+
+  resize() {
+    let rect = this.element.getBoundingClientRect();
+    this.element.style.height = `calc(100vh - 1em - ${rect.top + document.body.offsetTop}px)`;
+  }
+
+  collapseSection(icon) {
+    icon.classList.remove('expanded');
+    icon.classList.add('collapsed');
+    let children = icon.nextElementSibling.nextElementSibling;
+    // <arrow><heading>
+    // --> <square><children>
+    setTimeout(() => children.style.display = "none", 75)
+  }
+
+  expandSection(icon) {
+    icon.classList.remove('collapse');
+    icon.classList.add('expanded');
+    let children = icon.nextElementSibling.nextElementSibling;
+    setTimeout(() => children.style.display = "block", 75)
+  }
+
+  setActiveLink(section) {
+    if (this.activeLink) {
+      this.activeLink.parentElement.classList.remove('active');
+    }
+    if (section) {
+      this.activeLink = document.querySelector(`#sidebar a[href="#${section.id}"]`);
+      if (this.activeLink) {
+        let headingChildren = this.activeLink.parentElement.parentElement;
+        let heading = headingChildren.previousElementSibling.previousElementSibling;
+
+        if (heading && headingChildren.style.display === 'none') {
+          this.activeLink = heading;
+        }
+        this.activeLink.parentElement.classList.add('active');
+      }
+    }
+  }
+
+}
+
+function getCurrentSection() {
+  let currentSection;
+  if (window.scrollY + window.innerHeight > bottomHeightThreshold) {
+    currentSection = sections[sections.length - 1];
+  }
+  else {
+    if (sections) {
+      sections.forEach(section => {
+        let rect = section.getBoundingClientRect();
+        if (rect.top + document.body.offsetTop < 1) {
+          currentSection = section;
+        }
+      });
+    }
+  }
+  return currentSection;
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  sidebar = new Sidebar(document.getElementById('sidebar'));
+  sidebar.resize();
+  sidebar.createCollapsableSections();
+
+  window.addEventListener('scroll', () => {
+    sidebar.setActiveLink(getCurrentSection());
+    sidebar.resize();
+  });
+});