diff options
| author | bors <bors@rust-lang.org> | 2015-07-27 21:20:11 +0000 |
|---|---|---|
| committer | bors <bors@rust-lang.org> | 2015-07-27 21:20:11 +0000 |
| commit | 75e4a78d15a837675eb6795b5afe4e1e3d27166c (patch) | |
| tree | ef9d732963978c49af8e5ab6815f2e4da103226b | |
| parent | 3e6b03c2d87a1f54bfde2ea82b1f85aa4df04909 (diff) | |
| parent | f6e9240a99e86d2c799dc29f179dd2870e51f71d (diff) | |
| download | rust-75e4a78d15a837675eb6795b5afe4e1e3d27166c.tar.gz rust-75e4a78d15a837675eb6795b5afe4e1e3d27166c.zip | |
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

| -rw-r--r-- | src/rustbook/build.rs | 15 | ||||
| -rw-r--r-- | src/rustbook/javascript.rs | 63 | ||||
| -rw-r--r-- | src/rustbook/main.rs | 1 | ||||
| -rw-r--r-- | src/rustbook/static/rustbook.css (renamed from src/rustbook/css.rs) | 73 | ||||
| -rw-r--r-- | src/rustbook/static/rustbook.js | 73 |
5 files changed, 135 insertions, 90 deletions
diff --git a/src/rustbook/build.rs b/src/rustbook/build.rs index a7a6ed3bfe7..3ac71c167cd 100644 --- a/src/rustbook/build.rs +++ b/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| { - f.write_all(css::STYLE.as_bytes()) - })); + // Copy static files + 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) { diff --git a/src/rustbook/javascript.rs b/src/rustbook/javascript.rs index 8e530bee39a..beddc23fe2b 100644 --- a/src/rustbook/javascript.rs +++ b/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"> -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="rust-book.js"></script> <script type="text/javascript" src="playpen.js"></script> "#; diff --git a/src/rustbook/main.rs b/src/rustbook/main.rs index acb1c5cbd90..81f8c8c40fd 100644 --- a/src/rustbook/main.rs +++ b/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; diff --git a/src/rustbook/css.rs b/src/rustbook/static/rustbook.css index aae5f21a73d..3e0537c5551 100644 --- a/src/rustbook/css.rs +++ b/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 -// 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. - -// The rust-book CSS in string form. - -pub static STYLE: &'static str = r#" +/** + * Copyright 2013 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. + */ + @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; - background: none repeat scroll 0% 0% #FFF; + font-size: 14px; 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; - font-weight: bold; + color: #008cff; +} + +.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; } -"#; diff --git a/src/rustbook/static/rustbook.js b/src/rustbook/static/rustbook.js new file mode 100644 index 00000000000..fdefab28759 --- /dev/null +++ b/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; + } + } + +}); |
