Pair with Dan Mayer

Dan Mayer(@danmayer) and I met each other on the internet when he had planned to visit Cambodia. He pinged me on twitter, then we setup a plan to meet when he was going to be here. We had a great lunch together as we had planned and talked about many different things from people to programming.

This week, we had a chance to have a #pairwithme session together. We looked at few ideas to do in the session, then we decided to pick one idea is to do a spike to create table of contents of a project’s readme on Github. The idea is pretty simple. Everyone loves good documentations. For me whenever I come to a project’s readme that includes installation, Examples, Features, Development …, I feel it’s a good readme and it serves as a good documentation.

One problem that we usually face with a long good project’s readme is when we have to scroll up and down again and again when we want to navigate in different sections on the page which make me feel not good. What we are trying to solve is to grap all anchor links in readme and list them all on the page, then it helps us be able to click on it to jump to that section easily. Dan posted about our pairing as well.

Below is the result from our spike or you get our bookmarklet(Readme TOC):

Github's Readme TOC

function tocLink(heading, title, href) {
  var ele = '<li class="tooltipped tooltipped-w" aria-label="'+title+'">'+
    '<a href="'+href+'" aria-label="'+title+'"'+
    'class="js-selected-navigation-item sunken-menu-item">'+
    '<span class="full-word">'+title+'</span></a></li>'
   return ele;
}

var header = "<li class='tooltipped tooltipped-w'><strong>&nbsp;Table of Contents</strong></li>"
var rows = [];

$('a[class=anchor]').each(function(i, anchor) {
  $anchor = $(anchor);
  $heading = $anchor.parent();
  rows.push(
    tocLink(
      $heading.prop("tagName").toLowerCase(),
      $heading.text(),
      $anchor.attr('href')
    )
  );
})

var template = "<div class='repository-sidebar'><nav class='sunken-menu repo-nav' role='navigation'><div class='sunken-menu-separator'></div><ul class='sunken-menu-group'>"+
  header+rows.join('')+"</ul></nav></div>"

$($('.repository-with-sidebar.with-full-navigation .repository-sidebar')[0]).append(template);