<!DOCTYPE html>
<html>
<head>
  <title>{{ site.title }}</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700|Source+Code+Pro:400" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="/assets/normalize.css">
  <link rel="stylesheet" type="text/css" href="/assets/tocbot.css">
  <link rel="stylesheet" type="text/css" href="/assets/style.css">
  <link rel="stylesheet" type="text/css" href="/assets/print.css" media="print">
</head>
<body>

  <main>
    <h1>LBRY: A Decentralized Digital Content Marketplace</h1>
    <div class="byline">
      Alex Grintsvayg (<a href="mailto:grin@lbry.com">grin@lbry.com</a>), Jeremy Kauffman (<a href="mailto:jeremy@lbry.com">jeremy@lbry.com</a>)
    </div>
    <a href="/lbry-spec.pdf" class="pdf-hide" target="_blank" rel="noopener">PDF Version</a>
    <div class="toc-menu pdf-hide">Menu</div>
    <nav class="toc pdf-hide"></nav>
    <div id="content">
        {{ content }}
    </div>
  </main>

  <script src="/assets/tocbot.min.js"></script>
  <script>
    function ready(fn) {
      if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }

    function toggleClass(el, className) {
      if (el.classList) {
        el.classList.toggle(className);
      } else {
        var classes = el.className.split(' ');
        var existingIndex = classes.indexOf(className);

        if (existingIndex >= 0)
          classes.splice(existingIndex, 1);
        else
          classes.push(className);

        el.className = classes.join(' ');
      }
    }

    ready(function() {
      // Handle external links
      const links = document.links;
      for (var i = 0; i < links.length; i++) {
        if (links[i].hostname != window.location.hostname && !links[i].href.startsWith("javascript:") && !links[i].href.startsWith("mailto:")) {
          links[i].target = '_blank';
          links[i].className += ' external-link';
          links[i].rel = "noopener";
        }
      }


      // TOCbot
      var options = {
        tocSelector: '.toc',
        contentSelector: '#content',
        headingSelector: 'h2, h3, h4, h5, h6',
        collapseDepth: 3,
        positionFixedSelector: ".toc",
        onClick: (e) => {  // put anchor into url on toc link click, and send to parent window if this is iframed
          history.replaceState(null,null,e.target.href);
          if (window.parent) {
            window.parent.postMessage(e.target.href.substr(e.target.href.lastIndexOf('#')+1), "*");
          }
        },
      };

      tocbot.init(options);

      document.querySelector('.toc-menu').addEventListener("click", function() {
        toggleClass(document.querySelector('.toc'), "open");
      });

      document.querySelectorAll('pre').forEach((e) => {
        if (e.scrollWidth > e.clientWidth /* && e.clientHeight < 30*/) {
          toggleClass(e, "has-scroll");
        }
      });


      // need this part to fix toc offset height if content above toc changes height
      var resizeTimer;
      window.addEventListener('resize', function(e) {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
          o = options;
          o.fixedSidebarOffset = "auto";
          tocbot.refresh(o);
        }, 250);
      });
    })
  </script>
</body>
</html>