extends layout

block title
  title Documentation - Umbrella JS

block content
  main.documentation#home
    section.flex.five
      aside.full.fifth-1000
        h2 Contents
        div.links.flex.two.three-500.five-800.one-1000
        a.top.pseudo.button(href="#home" tabindex="-1") ▲ Up you go ▲
      article.full.four-fifth-1000
        include:markdown ../documentation.md
  
  script(src="https://unpkg.com/umbrellajs")
  script.
    u('h2[id]').each(function(node){
      u(node).attr('id', u(node).attr('id').replace(/-/g, ''));
    });
    
    u('aside .links').append(function(node){
      return u('<div>').append(u('<a>')
        .addClass('pseudo button')
        .attr('href', '#' + node.id)
        .html(node.innerHTML));
    }, u('article h2'));
    
    u('aside a').on('click', function(e){
      try {
        var to = u(e.currentTarget).attr('href');
        u(to).first().scrollIntoView({behavior: "smooth"});
        e.preventDefault();
        history.replaceState(null, '', to);
      } catch(err) {}
    });
    
    u([window]).on('scroll', function(){
      var top = this.scrollY || document.documentElement.scrollTop;
      u('.top').toggleClass('visible', top > 1000);
    }).trigger('scroll');