Auto merge of #26216 - azerupi:doc-experiments, r=steveklabnik

So I have tried to improve the rustbook engine:

- The sidebar now looks a lot more like gitbook (I thinks it cleaner)
- Added the Open Sans font, in my opinion more readable for prolonged periods of time
- Changed the style for code blocks a little

I encountered 1 problem. In `build.rs` I added this google font url (I commented out the non-relevant parts for clarity) 

```rust
let rustdoc_args: &[String] = &[
    //"".to_string(),
    //preprocessed_path.display().to_string(),
    //format!("-o{}", out_path.display()),
    //format!("--html-before-content={}", prelude.display()),
    //format!("--html-after-content={}", postlude.display()),
    //format!("--markdown-playground-url=http://play.rust-lang.org"),
    //format!("--markdown-css={}", item.path_to_root.join("rust-book.css").display()),
    format!("--markdown-css=http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700"),
    //"--markdown-no-toc".to_string(),
];
``` 
As you can see, I had to escape `=` with `=` because the string would get truncated if I didn't. Is that normal behaviour? Is that for security measures? If it is, isn't it a little weak if you can circumvent it by escaped characters? I don't know the reason behind, but I thought it was at least worth mentioning :)

Take your time for this PR, I still want to add multiple improvements:

- Like gitbook, possibility to change font by user
- Put `css` and `js` in their respective files (not hardcoded in rust)
- button to hide sidebar
- ...

So I'm not in a hurry to get this merged ;) But if you think it's good enough to be merged, go ahead. I will make another PR when I have other improvements.

In the image below is a screen of the improvements

![rustbook](https://cloud.githubusercontent.com/assets/7647338/8105345/bf545c74-1038-11e5-962e-b04ebfaf8257.png)

src/rustbook/build.rs

@@ -22,7 +22,7 @@ use term::Term;
 use error::{err, CliResult, CommandResult};
 use book;
 use book::{Book, BookItem};
-use css;
+
 use javascript;
 
 use rustdoc;
@@ -195,9 +195,16 @@ impl Subcommand for Build {
         }
         try!(fs::create_dir(&tgt));
 
-        try!(File::create(&tgt.join("rust-book.css")).and_then(|mut f| {
+        // Copy static files
-            f.write_all(css::STYLE.as_bytes())
+        let css = include_bytes!("static/rustbook.css");
-        }));
+        let js = include_bytes!("static/rustbook.js");
+
+        let mut css_file = try!(File::create(tgt.join("rust-book.css")));
+        try!(css_file.write_all(css));
+
+        let mut js_file = try!(File::create(tgt.join("rust-book.js")));
+        try!(js_file.write_all(js));
+
 
         let mut summary = try!(File::open(&src.join("SUMMARY.md")));
         match book::parse_summary(&mut summary, &src) {

src/rustbook/javascript.rs

@@ -11,67 +11,6 @@
 // The rust-book JavaScript in string form.
 
 pub static JAVASCRIPT: &'static str = r#"
-<script type="text/javascript">
+<script type="text/javascript" src="rust-book.js"></script>
-document.addEventListener("DOMContentLoaded", function(event) {
-  document.getElementById("toggle-nav").onclick = toggleNav;
-  function toggleNav() {
-    var toc = document.getElementById("toc");
-    var pagewrapper = document.getElementById("page-wrapper");
-    toggleClass(toc, "mobile-hidden");
-    toggleClass(pagewrapper, "mobile-hidden");
-  };
-
-  function toggleClass(el, className) {
-     // from http://youmightnotneedjquery.com/
-     if (el.classList) {
-       el.classList.toggle(className);
-     } else {
-       var classes = el.className.split(' ');
-       var existingIndex = classes.indexOf(className);
-
-       if (existingIndex >= 0) {
-         classes.splice(existingIndex, 1);
-       } else {
-         classes.push(className);
-       }
-
-       el.className = classes.join(' ');
-     }
-  }
-
-  // The below code is used to add prev and next navigation links to the bottom
-  // of each of the sections.
-  // It works by extracting the current page based on the url and iterates over
-  // the menu links until it finds the menu item for the current page. We then
-  // create a copy of the preceding and following menu links and add the
-  // correct css class and insert them into the bottom of the page.
-  var toc = document.getElementById('toc').getElementsByTagName('a');
-  var href = document.location.pathname.split('/').pop();
-  if (href === 'index.html' || href === '') {
-    href = 'README.html';
-  }
-
-  for (var i = 0; i < toc.length; i++) {
-    if (toc[i].attributes['href'].value.split('/').pop() === href) {
-      var nav = document.createElement('p');
-      if (i > 0) {
-        var prevNode = toc[i-1].cloneNode(true);
-        prevNode.className = 'left';
-        prevNode.setAttribute('rel', 'prev');
-        nav.appendChild(prevNode);
-      }
-      if (i < toc.length - 1) {
-        var nextNode = toc[i+1].cloneNode(true);
-        nextNode.className = 'right';
-        nextNode.setAttribute('rel', 'next');
-        nav.appendChild(nextNode);
-      }
-      document.getElementById('page').appendChild(nav);
-      break;
-    }
-  }
-
-});
-</script>
 <script type="text/javascript" src="playpen.js"></script>
 "#;

src/rustbook/main.rs

@@ -35,7 +35,6 @@ mod build;
 mod serve;
 mod test;
 
-mod css;
 mod javascript;
 
 static EXIT_STATUS: AtomicIsize = ATOMIC_ISIZE_INIT;

src/rustbook/static/rustbook.css

@@ -1,20 +1,28 @@
-// Copyright 2014 The Rust Project Developers. See the COPYRIGHT
+/**
-// file at the top-level directory of this distribution and at
+ * Copyright 2013 The Rust Project Developers. See the COPYRIGHT
-// http://rust-lang.org/COPYRIGHT.
+ * file at the top-level directory of this distribution and at
-//
+ * http://rust-lang.org/COPYRIGHT.
-// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
+ *
-// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
+ * Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
-// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
+ * http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
-// option. This file may not be copied, modified, or distributed
+ * <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
-// except according to those terms.
+ * option. This file may not be copied, modified, or distributed
+ * except according to those terms.
+ */
 
-// The rust-book CSS in string form.
-
-pub static STYLE: &'static str = r#"
 @import url("../rust.css");
 
 body {
     max-width:none;
+    font: 16px/1.4 'Source Serif Pro', Georgia, Times, 'Times New Roman', serif;
+    line-height: 1.6;
+    color: #333;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Open Sans', 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: bold;
+    color: #333;
 }
 
 @media only screen {
@@ -23,20 +31,21 @@ body {
         left: 0px;
         top: 0px;
         bottom: 0px;
-        width: 250px;
+        width: 300px;
         overflow-y: auto;
         border-right: 1px solid rgba(0, 0, 0, 0.07);
         padding: 10px 10px;
-        font-size: 16px;
+        font-size: 14px;
-        background: none repeat scroll 0% 0% #FFF;
         box-sizing: border-box;
         -webkit-overflow-scrolling: touch;
+        background-color: #fafafa;
+        color: #364149;
     }
 
     #page-wrapper {
         position: absolute;
         overflow-y: auto;
-        left: 260px;
+        left: 310px;
         right: 0px;
         top: 0px;
         bottom: 0px;
@@ -47,7 +56,7 @@ body {
 }
 
 @media only print {
-    #toc, #nav {
+    #toc, #nav, #menu-bar {
         display: none;
     }
 }
@@ -84,7 +93,7 @@ body {
 .section {
     list-style: none outside none;
     padding-left: 20px;
-    line-height: 30px;
+    line-height: 40px;
 }
 
 .section li {
@@ -94,12 +103,17 @@ body {
 }
 
 .chapter li a {
-    color: #000000;
+    color: #333;
+    padding: 5px 0;
 }
 
 .chapter li a.active {
-    text-decoration: underline;
+    color: #008cff;
-    font-weight: bold;
+}
+
+.chapter li a:hover {
+    color: #008cff;
+    text-decoration: none;
 }
 
 #toggle-nav {
@@ -138,6 +152,20 @@ body {
     padding: 0;
 }
 
+pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #f7f7f7;
+    border: 0;
+    border-radius: 3px;
+}
+
+.nav-previous-next {
+    margin-top: 60px;
+}
+
 .left {
     float: left;
 }
@@ -145,4 +173,3 @@ body {
 .right {
     float: right;
 }
-"#;

src/rustbook/static/rustbook.js

@@ -0,0 +1,73 @@
+// Copyright 2014 The Rust Project Developers. See the COPYRIGHT
+// file at the top-level directory of this distribution and at
+// http://rust-lang.org/COPYRIGHT.
+//
+// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
+// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
+// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
+// option. This file may not be copied, modified, or distributed
+// except according to those terms.
+
+
+document.addEventListener("DOMContentLoaded", function(event) {
+
+  document.getElementById("toggle-nav").onclick = toggleNav;
+
+  function toggleNav() {
+    var toc = document.getElementById("toc");
+    var pagewrapper = document.getElementById("page-wrapper");
+    toggleClass(toc, "mobile-hidden");
+    toggleClass(pagewrapper, "mobile-hidden");
+  }
+
+  function toggleClass(el, className) {
+     // from http://youmightnotneedjquery.com/
+     if (el.classList) {
+       el.classList.toggle(className);
+     } else {
+       var classes = el.className.split(' ');
+       var existingIndex = classes.indexOf(className);
+
+       if (existingIndex >= 0) {
+         classes.splice(existingIndex, 1);
+       } else {
+         classes.push(className);
+       }
+
+       el.className = classes.join(' ');
+     }
+  }
+
+  // The below code is used to add prev and next navigation links to the bottom
+  // of each of the sections.
+  // It works by extracting the current page based on the url and iterates over
+  // the menu links until it finds the menu item for the current page. We then
+  // create a copy of the preceding and following menu links and add the
+  // correct css class and insert them into the bottom of the page.
+  var toc = document.getElementById('toc').getElementsByTagName('a');
+  var href = document.location.pathname.split('/').pop();
+  if (href === 'index.html' || href === '') {
+    href = 'README.html';
+  }
+
+  for (var i = 0; i < toc.length; i++) {
+    if (toc[i].attributes.href.value.split('/').pop() === href) {
+      var nav = document.createElement('p');
+      if (i > 0) {
+        var prevNode = toc[i-1].cloneNode(true);
+        prevNode.className = 'left';
+        prevNode.setAttribute('rel', 'prev');
+        nav.appendChild(prevNode);
+      }
+      if (i < toc.length - 1) {
+        var nextNode = toc[i+1].cloneNode(true);
+        nextNode.className = 'right';
+        nextNode.setAttribute('rel', 'next');
+        nav.appendChild(nextNode);
+      }
+      document.getElementById('page').appendChild(nav);
+      break;
+    }
+  }
+
+});