Add TOC listing + more section/lang select back into a nav menu

www/index.pl

@@ -560,42 +560,60 @@ sub man_redir {
 };
 
 
-sub _man_langsect {
-  my($self, $man) = @_;
+sub _man_nav {
+  my($self, $man, $toc) = @_;
+
+  my @sect = $self->dbManSections($man->{name});
+  my @lang = $self->dbManLanguages($man->{name}, $man->{section});
+  return if !@sect && !@lang && !@$toc;
 
   # TODO: This is ugly, especially because clicking on a translation or
   # section, you can end up with a man page that is nowhere close to the man
   # page you're currently reading. Opening a version selector box might be a
   # better alternative.
 
-  my @sect = $self->dbManSections($man->{name});
-  if(@sect > 1) {
-    div id => 'sectionselect', class => 'hidden';
-     for (@sect) {
-       if($man->{section} eq $_) {
-         i $_;
-       } else {
-         a href => "/$man->{name}.$_", $_;
-       }
-       txt ' ';
-     }
-    end;
-  }
+  div id => 'nav';
 
-  my @lang = $self->dbManLanguages($man->{name}, $man->{section});
-  if(@lang > 1) {
-    div id => 'langselect', class => 'hidden';
-     (my $cur = $man->{locale}||'') =~ s/\..*//;
-     for (@lang) {
-       if(($_||'') eq $cur) {
-         i $_ || 'default';
-       } else {
-         a href => $_ ? "/lang/$_/$man->{name}.$man->{section}" : "/$man->{name}.$man->{section}", $_ || 'default';
-       }
-       txt ' ';
-     }
-    end;
-  }
+   if(@sect > 1) {
+     b 'Sections';
+     p;
+      for (@sect) {
+        if($man->{section} eq $_) {
+          i $_;
+        } else {
+          a href => "/$man->{name}.$_", $_;
+        }
+        txt ' ';
+      }
+     end;
+   }
+
+   if(@lang > 1) {
+     b 'Languages';
+     p;
+      (my $cur = $man->{locale}||'') =~ s/\..*//;
+      for (@lang) {
+        if(($_||'') eq $cur) {
+          i $_ || 'default';
+        } else {
+          a href => $_ ? "/lang/$_/$man->{name}.$man->{section}" : "/$man->{name}.$man->{section}", $_ || 'default';
+        }
+        txt ' ';
+      }
+     end;
+   }
+
+   if(@$toc > 1) {
+     b 'Table of Contents';
+     ul;
+      for (0..$#$toc) {
+        li;
+         a href => sprintf('#head%d', $_+1), lc $toc->[$_];
+        end;
+      }
+     end;
+   }
+  end;
 }
 
 
@@ -634,12 +652,21 @@ sub man {
    end;
   end;
   div id => 'manres', class => 'hidden';
-   _man_langsect($self, $man);
   end;
 
+  my $c = $self->dbManContent($man->{hash});
+  my $fmt = ManUtils::html(ManUtils::fmt_block $c);
+  my @toc;
+  $fmt =~ s{\n<b>(.+?)<\/b>\n}{
+    push @toc, $1;
+    my $c = @toc;
+    qq{\n<a href="#head$c" id="head$c">$1</a>\n}
+  }eg;
+
+  _man_nav($self, $man, \@toc);
+
   div id => 'contents';
-   my $c = $self->dbManContent($man->{hash});
-   pre; lit ManUtils::html(ManUtils::fmt_block $c); end;
+   pre; lit $fmt; end;
   end;
   $self->htmlFooter();
 }

www/man.css

@@ -104,8 +104,13 @@ i.grayedout { color: #aaa; font-size: 13px; }
 #manres table { margin: 2px 10px; }
 #manres table tr td:nth-child(1) { min-width: 80px }
 
-#langselect, #sectionselect { padding-left: 50px }
-#langselect a, #sectionselect a, #langselect i, #sectionselect i { padding: 3px 5px }
+#nav { background: #f0f8ff; color: #036; float: right; padding: 8px; width: 250px; margin-bottom: 10px; border-radius: 8px; }
+#nav b { text-transform: uppercase; font-size: 13px }
+#nav p { margin: 3px 5px 20px 5px }
+#nav p a, #nav p i { padding: 3px 5px; font-size: 13px; font-style: normal; text-decoration: none;}
+#nav p a:hover, #nav p i {  background: #cde; border-radius: 5px }
+#nav ul { list-style-type: none; margin: 3px 10px 0 20px }
+#nav ul li a { overflow: hidden; margin-left: -10px; text-decoration: none; text-transform: capitalize }
 
 #contents { margin: 10px 0 0 0 }
 
@@ -115,7 +120,7 @@ i.grayedout { color: #aaa; font-size: 13px; }
 #footer a:hover { background: none; }
 
 pre, pre * { font-family: "Lucida Console", Monospace; font-size: 15px }
-pre b { color: #369; font-weight: normal; }
+pre b, pre a { color: #369; font-weight: normal; text-decoration: none }
 
 #ds_box { position: absolute; top: 0; border: 1px solid $border$; border-top: none; background: #f0f8ff; cursor: pointer; z-index: 2 }
 #ds_box b { padding: 2px 0 0 10px; font-size: 12px; }

www/man.js

@@ -445,16 +445,6 @@ function dsResults(hr, obj) {
     var section = ul.getAttribute('data-section');
     var locale = ul.getAttribute('data-locale');
 
-    ul.appendChild(tag('li', byId('sectionselect')
-      ? tag('a', {href:'#', onclick: buttonclick, 'data-obj': byId('sectionselect')}, 'sections')
-      : tag('i', 'sections')
-    ));
-
-    ul.appendChild(tag('li', byId('langselect')
-      ? tag('a', {href:'#', onclick: buttonclick, 'data-obj': byId('langselect')}, 'translations')
-      : tag('i', 'translations')
-    ));
-
     ul.appendChild(tag('li', ul.getAttribute('data-hasversions') > 0
       ? tag('a', {href:'#', onclick: buttonclick,
           'data-url': '/json/tree.json?name='+name+';section='+section+';locale='+locale+';cur='+hash,