Work in progress on using perl6.org design for docs

Unfortunately I can't go much further without making Pod::To::HTML more flexible. Right now it hard-codes too much HTML.
Raku · Dec 25, 2015 · 440fa4c · 440fa4c
1 parent e15d434
commit 440fa4c
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 44 deletions.
diff --git a/htmlify.p6 b/htmlify.p6
@@ -45,45 +45,46 @@ my @menu =
 #    ('formalities',''      ) => ();
 ;
 
-my $head   = slurp 'template/head.html';
-sub header-html ($current-selection = 'nothing selected') is cached {
+my $head = slurp 'template/head.html';
+
+sub header-html ($selection) is cached {
     state $header = slurp 'template/header.html';
+    my $with-active = $header.subst(
+        /\<(li id="nav-$selection")\>/, 
+        { "<$/[0] class="active">" });
+
+    state $sub-menu-pos = ($header ~~ /SUBMENU/).from;
+    if $sub-menu-pos >= 0 {
+        my $sub-menu-items = '';
+        state %sub-menus = @menu>>.key>>[0] Z=> @menu>>.value;
+        if %sub-menus{$current-selection} -> $_ {
+            $sub-menu-items = [~]
+                q[<div class="menu-items darker-green">],
+                qq[<a class="menu-item" href="/$current-selection.html">All</a>],
+                .map({qq[
+                    <a class="menu-item" href="/$current-selection\-$_.html">
+                        {.wordcase}
+                    </a>
+                ]}),
+                q[</div>];
+        }
 
-    my $menu-items = [~]
-        q[<div class="menu-items dark-green">],
-        @menu>>.key.map(-> ($dir, $name) {qq[
-            <a class="menu-item {$dir eq $current-selection ?? "selected darker-green" !! ""}"
-                href="/$dir.html">
-                { $name || $dir.wordcase }
-            </a>
-        ]}), #"
-        q[</div>];
-
-    my $sub-menu-items = '';
-    state %sub-menus = @menu>>.key>>[0] Z=> @menu>>.value;
-    if %sub-menus{$current-selection} -> $_ {
-        $sub-menu-items = [~]
-            q[<div class="menu-items darker-green">],
-            qq[<a class="menu-item" href="/$current-selection.html">All</a>],
-            .map({qq[
-                <a class="menu-item" href="/$current-selection\-$_.html">
-                    {.wordcase}
-                </a>
-            ]}),
-            q[</div>]
-    }
-
-    state $menu-pos = ($header ~~ /MENU/).from;
-    $header.subst('MENU', :p($menu-pos), $menu-items ~ $sub-menu-items);
+        $header.subst('SUBMENU', :p($sub-menu), $sub-menu-items);
+    }
 }
 
 sub p2h($pod, $selection = 'nothing selected', :$pod-path = 'unknown') {
-    pod2html $pod,
+    my $html = pod2html $pod,
         :url(&url-munge),
         :$head,
-        :header(header-html $selection),
+        :header(header-html($selection)),
         :footer(footer-html($pod-path)),
-        :default-title("Perl 6 Documentation"),
+        :default-title("Perl 6 Documentation");
+
+    # Pod::To::HTML should really not be injecting styles/classes/etc without
+    # any way to override them but it does :(
+    $html.subst(rx{class="pod"}, q{class="bg"});
+    return $html;
 }
 
 sub recursive-dir($dir) {
@@ -643,6 +644,7 @@ sub write-index-files () {
     say 'Writing html/index.html ...';
     spurt 'html/index.html',
         p2h(EVAL(slurp('doc/HomePage.pod') ~ "\n\$=pod"),
+            selected => 'home',
             pod-path => 'HomePage.pod');
 
     say 'Writing html/language.html ...';

diff --git a/template/head.html b/template/head.html
@@ -1,6 +1,10 @@
 <meta name=viewport content="width=device-width, initial-scale=1">
 <link rel="icon" href="/favicon.ico" type="image/x-icon" />
-<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" title="default" />
+
+<link rel="stylesheet" type="text/css" href="http://perl6.org/bootstrap/css/bootstrap.min.css">
+<link rel="stylesheet" type="text/css" href="http://perl6.org/bootstrap/css/bootstrap-theme.min.css">
+<link rel="stylesheet" type="text/css" href="http://perl6.org/style.css">
+
 <link type="text/css" href="/css/custom-theme/jquery-ui.css" rel="stylesheet" />
 <link type="text/css" href="/css/pygments.css" rel="stylesheet" />
 <noscript> <style> #search { visibility: hidden; } </style> </noscript>
diff --git a/template/header.html b/template/header.html
@@ -1,14 +1,27 @@
-<div id="header" class="pretty-box green">
-    <a href="/"
-        ><img src="/images/camelia-small.png" alt="Camelia" id="logo"
-        >&nbsp;Perl 6 Documentation</a
-    >
-    <div id="search" class="ui-widget">
-        <div class="green"><input placeholder="Search" autofocus id="query" title="Enter Perl 6 document to search for"></div>
+<nav class="navbar navbar-fixed-top navbar-inverse">
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed"
+        data-toggle="collapse" data-target="#navbar"
+        aria-expanded="false" aria-controls="navbar">
+          <span class="sr-only">Toggle navigation</span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+          <span class="icon-bar"></span>
+      </button>
     </div>
-    <div class="menu">
-      MENU
+    <div id="navbar" class="collapse navbar-collapse">
+      <ul class="nav navbar-nav">
+         <li id="nav-home"><a href="/">Home</a></li>
+         <li id="nav-language"><a href="/language.html">Language</a></li>
+         <li id="nav-types" class="active"><a href="/types.html">Types</a></li>
+         <li id="nav-routines"><a href="/routines.html">Routines</a></li>
+      </ul>
+      <form class="navbar-form navbar-right" role="search">
+        <div class="form-group">
+          <input type="text" class="form-control" placeholder="Search" id="query" title="Enter Perl 6 document to search for" autofocus>
+        </div>
+      </form>
     </div>
-</div>
-<div id="content-wrapper">
-<div id="content" class="pretty-box yellow">
+  </div>
+</nav>