Style up Haddocks to look like haskell-lang

Handler/Haddock.hs

@@ -26,20 +26,37 @@ getHaddockR slug rest
 
       let stylesheet = render' $ StaticR haddock_style_css
           script = render' $ StaticR haddock_script_js
+          bootstrap = render' $ StaticR haddock_bootstrap_css
+          jquery = render' $ StaticR haddock_jquery_js
           render' = return . ContentText . render
 
           addExtra t@(EventEndElement "head") =
             [ EventBeginElement "link"
                 [ ("rel", [ContentText "stylesheet"])
-                , ("href", stylesheet)
+                , ("href", bootstrap)
                 ]
             , EventEndElement "link"
+            , EventBeginElement "link"
+                 [ ("rel", [ContentText "stylesheet"])
+                 , ("href", [ContentText "https://fonts.googleapis.com/css?family=Open+Sans"])
+                 ]
+            , EventEndElement "link"
+            , EventBeginElement "link"
+                 [ ("rel", [ContentText "stylesheet"])
+                 , ("href", stylesheet)
+                 ]
+            , EventEndElement "link"
+            , EventBeginElement "script"
+                [ ("src", jquery)
+                ]
+            , EventEndElement "script"
             , EventBeginElement "script"
                 [ ("src", script)
                 ]
             , EventEndElement "script"
             , t
             ]
+          addExtra t@(EventBeginElement "body" _) = [t] ++ nav
           addExtra t = [t]
 
       req <- parseUrl $ unpack $ makeURL slug rest
@@ -54,6 +71,34 @@ getHaddockR slug rest
       sendResponse $ toHtml doc
   | otherwise = redirect $ makeURL slug rest
 
+nav :: [Event]
+nav =
+  el "nav"
+     [("class","navbar navbar-default")]
+     (el "div"
+         [("class","container")]
+         (el "div"
+             [("class","navbar-header")]
+             (el "a"
+                 [("href","https://haskell-lang.org/packages")
+                 ,("class","navbar-brand")]
+                 (el "span" [("class","logo")] [] ++ text "Haskell")) ++
+          el "div"
+             [("class","navbar-collapse")]
+             (el "ul"
+                 [("id","bootstrap-nav"),
+                  ("class","nav navbar-nav")]
+                 (concat [el "li" [] (el "a" [] (text "Source"))
+                         ,el "li" [] (el "a" [] (text "Contents"))
+                         ,el "li" [] (el "a" [] (text "Index"))
+                         ]))))
+  where text x = [EventContent (ContentText x)]
+        el name props inner = open ++ inner ++ close
+          where open =
+                  [EventBeginElement name
+                                     (map (\(k,v) -> (k,[ContentText v])) props)]
+                close = [EventEndElement name]
+
 getHaddockBackupR :: [Text] -> Handler ()
 getHaddockBackupR rest = redirect $ concat
     $ "https://s3.amazonaws.com/haddock.stackage.org"

static/haddock/script.js

@@ -1 +1,26 @@
 // FIXME add something here later
+document.styleSheets[0].disabled = true;
+
+$(function(){
+  var $page_menu = $('#page-menu li');
+  var $module_header = $('#module-header');
+  $('#bootstrap-nav').empty().append($page_menu.clone());
+  $('#package-header').addClass('container');
+  $('#content').addClass('container');
+  $('#footer').addClass('container footer');
+  $module_header.append($('#description .doc'));
+  $('.collapser').click(function(){
+    $(this).toggleClass('active');
+    var $el = $(this).next('.show,.hide,.togglable');
+    if ($el.hasClass('hide')) {
+      $el.show();
+      $el.removeClass('hide');
+      $el.addClass('togglable');
+    }
+    else if ($el.hasClass('show')) {
+      $el.removeClass('show');
+      $el.addClass('togglable');
+    }
+    else { $el.toggle(); }
+  });
+});

static/haddock/style.css

@@ -1 +1,386 @@
-/* FIXME add something here later */
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   Global styles
+*/
+
+html {
+  position:relative;
+  min-height:100%;
+}
+
+body {
+  background:#fff;
+  font-family: "Open Sans", sans-serif;
+  font-size:14px;
+  margin:0 0 6em;
+  padding:0;
+  overflow-y:scroll;
+}
+
+pre {
+  font-family: ubuntu mono, monospace;
+}
+
+code {
+  background: #eee;
+  color: #4F4371;
+  font-family: ubuntu mono, monospace;
+}
+
+.wrap {
+  background:#fff;
+  padding-bottom:2em;
+}
+
+p,ul,li {
+  font-size:15px;
+}
+
+h1 {
+  margin-top:.1em;
+  margin-left:0;
+  text-indent:-.05em;
+}
+
+h2 {
+  color:#6e618d;
+}
+
+.muted {
+  opacity: 0.6;
+}
+
+.footer {
+  background-color:#323232;
+  color:#999;
+  position:absolute;
+  bottom:0;
+  width:100%;
+  height:4em;
+  overflow: hidden;
+  line-height:2em;
+}
+
+.footer p {
+  margin-top:1em;
+  font-size:13px;
+  height: 30px;
+  overflow: hidden;
+}
+
+.footer a {
+  color: #fff;
+}
+
+.footer .item + .item {
+  margin-left: 2em;
+}
+
+.logo {
+  background-image: url(/static/img/haskell-logo.png);
+  background-size: 21px auto;
+  background-repeat: no-repeat;
+  background-position: center;
+  padding: 10px;
+}
+
+.span12 ul li + li {
+  margin-top: 0.5em;
+}
+
+.api-docs, .api-docs:hover {
+             font-size: 15px;
+             padding-left: 0.25em;
+             padding-right: 0.25em;
+             padding-bottom: 0.125em;
+             border-radius: 0.125em;
+             background: #4f4371;
+             color: #fff;
+             text-decoration: none;
+           }
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   Syntax highlighting (hscolour)
+*/
+
+pre .hs-comment        { color:#555 }
+pre .hs-keyword        { color:#397460 }
+pre .hs-str            { color:#366354 }
+pre .hs-conid          { color:#4F4371 }
+pre .hs-varop, pre .hs-keyglyph          { color:#8f4e8b }
+pre .hs-varid          { color:#333 }
+pre .hs-num            { color:#4F4371 }
+pre .hs-definition     { color: #2e659c }
+pre .diff              { color:#555 }
+pre code .title        { color:#333 }
+pre code .string       { color:#366354 }
+pre code .built_in     { color:#397460 }
+pre code .preprocessor { color:#4F4371 }
+pre code .comment      { color:#555 }
+pre code .command      { color:#397460 }
+pre code .special      { color:#333 }
+pre code .formula      { color:#4F4371 }
+pre code .keyword      { color:#397460 }
+pre code .number       { color:#4F4371 }
+pre code .header       { color:#555 }
+pre code .deletion     { background-color:#FDD; color:#695B5B }
+pre code .addition     { background-color:#DFD; color:#000 }
+
+code .hs-definition     { color: #2e659c }
+code .hs-comment        { color:#555 }
+code .hs-keyword        { color:#397460 }
+code .hs-str            { color:#366354 }
+code .hs-conid          { color:#4F4371 }
+code .hs-varop, code .hs-keyglyph          { color:#8f4e8b }
+code .hs-varid          { color:#333 }
+code .hs-num            { color:#4F4371 }
+code .diff              { color:#555 }
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   Navigation
+*/
+
+.mobile > .navbar {
+  display: none;
+}
+.navbar {
+  background-color:#352f44;
+  border-radius:0;
+  border:0;
+}
+
+.navbar-brand {
+  color:#fff;
+  font-size:inherit;
+  font-weight:700;
+  margin-left: 0 !important;
+  padding-left:0;
+}
+
+.navbar-default .navbar-brand {
+  color:#fff;
+}
+
+.navbar-brand .logo {
+  margin-right:.5em;
+  color:#fff;
+}
+
+.navbar-default .navbar-nav > .active > a {
+  color:#d1cddc!important;
+  background-color:#312b3f;
+  border-bottom:.3em solid #465787;
+}
+
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus {
+  color:#fff;
+}
+
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+  color:#fff!important;
+  background-color:#312b3f;
+}
+
+.navbar-default .navbar-nav > li > a {
+  color:#d1cddc!important;
+  background-color:inherit;
+}
+
+.navbar a:hover {
+  color: #c3a6e0;
+}
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   Template
+*/
+
+.template .navbar {
+  margin-bottom:.5em;
+}
+
+.template code {
+  background-color:#f5f5f5;
+  color:#366354;
+}
+
+.template pre {
+  font-size:14px;
+  word-wrap: normal;
+}
+
+.template .container > .row {
+  max-width:none;
+}
+
+.template .breadcrumb {
+  padding-left:0;
+  background-color:inherit;
+  margin-bottom:0;
+}
+
+.template .breadcrumb li {
+  margin-right: 5px;
+}
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   Haddock-specific CSS
+*/
+
+#package-header {
+}
+
+#page-menu {
+  display: none;
+}
+
+#table-of-contents a code {
+  background: inherit;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+}
+
+#table-of-contents .caption {
+  font-weight: bold;
+}
+
+#module-header .caption {
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+  font-size: 36px;
+  margin-top: .1em;
+  margin-left: 0;
+  text-indent: -.05em;
+}
+
+/* Who really reads this info? */
+#module-header .info {
+  display: none;
+}
+
+#description .caption {
+  display: none;
+}
+
+#synopsis {
+  display: none;
+}
+
+.top {
+  margin-top: 1em;
+  padding-top: 1em;
+}
+.top > .src {
+  background: #efefef;
+  margin-left: -5px;
+  margin-right: -5px;
+  padding: 5px;
+  border-radius: 3px;
+}
+
+.src { font-family: monospace; padding: 0; }
+.src .keyword, .src .keyword:hover { color:#397460; text-decoration: none; }
+.src .def, .src .def:hover, .src a { color:#4F4371; text-decoration: none;}
+.src a[href]:hover { text-decoration: underline; }
+
+.top > .src > .link {
+  float: right;
+  font-family: "Open Sans", sans-serif;
+  color: #428bca;
+}
+
+.subs .caption {
+  margin-top: 0.5em;
+  font-weight: bold;
+}
+
+body > pre {
+  background: #fff;
+  border: 0;
+  padding-top: 0;
+}
+
+nav + pre {
+  margin-top: -5px;
+}
+
+.src .fixity {
+  color: #888;
+}
+
+.src .fixity:before {
+  content: " (";
+  color: #888;
+}
+.src .fixity:after {
+  content: ")";
+  color: #888;
+}
+
+.doc code a {
+  color: #4F4371 !important;
+}
+
+.instances td.src {
+  width: 50%;
+  vertical-align: top;
+}
+
+h4 { margin-top: 1em; }
+
+.hide,.show {display: none !important;}
+
+.collapser { cursor: pointer }
+.collapser:before {
+  content:"\25B6  ";
+  font-size: 0.6em;
+  color: #666;
+}
+.collapser.active:before {
+  content: "\25BC  ";
+  font-size: 0.6em;
+  color: #666;
+}
+
+code code { padding: 0; margin: 0; }
+
+h4.collapser { font-size: 15px; font-weight: bold }
+
+.subs > .src {
+  background: #f5f5f5;
+  padding: 5px;
+  border-radius: 3px;
+  min-width: 50%;
+}
+
+.subs > .src > .link {
+  float: right;
+  font-family: "Open Sans", sans-serif;
+  color: #428bca;
+}
+
+.subs .arguments td.doc {
+  padding-left: 1em;
+}
+
+.constructors table {
+  border-collapse: separate;
+  border-spacing: 3px;
+}
+.constructors td.src {
+  background: #f5f5f5;
+  padding: 5px 6px 5px 6px;
+  border-radius: 3px;
+  font-weight: bold;
+}
+
+.top > .doc, .top > .subs {
+  margin-left: 1em;
+}
+
+.doc.empty { display: none; }