spec.commonmark.org toc sidebar

extension.js

var main = function () {
    var getElementById = function (id) { var _a; return ((_a = document.getElementById(id)) !== null && _a !== void 0 ? _a : undefined); };
    var tocElem = getElementById("TOC");
    if (!tocElem) {
        throw new Error("TOC element not found");
    }
    document.body.style.margin = "0 auto";
    document.body.style.maxWidth = "68rem";
    // create sidebar div
    var sidebar = document.createElement("div");
    sidebar.id = "toc-sidebar";
    sidebar.style.position = "fixed";
    sidebar.style.top = "0";
    sidebar.style.overflowY = "auto";
    sidebar.style.height = "100vh";
    sidebar.style.width = "20rem";
    sidebar.innerHTML = tocElem.innerHTML;
    // create content div
    var content = document.createElement("div");
    content.id = "toc-content";
    content.style.maxWidth = "100%";
    content.style.marginLeft = "22rem";
    content.innerHTML = document.body.innerHTML;
    // append sidebar and content to body
    document.body.innerHTML = "";
    document.body.appendChild(sidebar);
    document.body.appendChild(content);
};
main();

extension.ts

const main = () => {
  const getElementById = <T extends HTMLElement>(id: string): T | undefined => (document.getElementById(id) ?? undefined) as T | undefined;

  const tocElem = getElementById<HTMLDivElement>("TOC");
  if (!tocElem) { throw new Error("TOC element not found"); }

  document.body.style.margin = "0 auto"
  document.body.style.maxWidth = "68rem"

  // create sidebar div
  const sidebar = document.createElement("div");
  sidebar.id = "toc-sidebar";
  sidebar.style.position = "fixed";
  sidebar.style.top = "0";
  sidebar.style.overflowY = "auto";
  sidebar.style.height = "100vh";
  sidebar.style.width = "20rem";
  sidebar.innerHTML = tocElem.innerHTML;

  // create content div
  const content = document.createElement("div");
  content.id = "toc-content";
  content.style.maxWidth = "100%";
  content.style.marginLeft = "22rem";
  content.innerHTML = document.body.innerHTML;

  // append sidebar and content to body
  document.body.innerHTML = "";
  document.body.appendChild(sidebar);
  document.body.appendChild(content);
}
main()