mirror of
https://github.com/google/comprehensive-rust.git
synced 2024-11-21 13:25:53 +02:00
Add a dev theme to help with slide aspect ratio (#1842)
Added a dev theme to help with slide aspect ratio while updating content or for reviewing PRs. Fixes #1796. --------- Co-authored-by: Dustin J. Mitchell <djmitche@google.com> Co-authored-by: Martin Geisler <martin@geisler.net>
This commit is contained in:
Manichand Kondapaka
GitHub
parent
c509dbd9e4
commit
0761f936ca
4
.github/workflows/build.sh
vendored
4
.github/workflows/build.sh
vendored
@ -37,6 +37,10 @@ else
|
||||
fi
|
||||
|
||||
mdbook build -d "$dest_dir"
|
||||
|
||||
# Disable the redbox button in built versions of the course
|
||||
echo '// Disabled in published builds, see build.sh' > "${dest_dir}/html/theme/redbox.js"
|
||||
|
||||
mv "$dest_dir/pandoc/pdf/comprehensive-rust.pdf" "$dest_dir/html/"
|
||||
(cd "$dest_dir/exerciser" && zip --recurse-paths ../html/comprehensive-rust-exercises.zip comprehensive-rust-exercises/)
|
||||
|
||||
|
||||
11
STYLE.md
11
STYLE.md
@ -15,14 +15,9 @@ important to keep this in mind when adding content: we only have limited
|
||||
vertical space. Scrolling up and down should be avoided since it is very jarring
|
||||
for people who attend the class.
|
||||
|
||||
You can test the amount of space available using a simple tool. Uncomment these
|
||||
lines in the `book.toml` file to have a red rectangle rendered on top of all
|
||||
pages:
|
||||
|
||||
```toml
|
||||
[preprocessor.aspect-ratio-helper]
|
||||
command = "./aspect-ratio-helper.py"
|
||||
```
|
||||
You can test the amount of space available using a simple tool. This tool can be
|
||||
used by clicking a toggle button next to the search button on left side of the
|
||||
navbar.
|
||||
|
||||
The rectangle has an aspect ratio similar to what you can see when you share
|
||||
your screen on a 16:9 display or projector.
|
||||
|
||||
@ -1,85 +0,0 @@
|
||||
#!/usr/bin/env python3
|
||||
|
||||
# Copyright 2023 Google LLC
|
||||
#
|
||||
# Licensed under the Apache License, Version 2.0 (the "License");
|
||||
# you may not use this file except in compliance with the License.
|
||||
# You may obtain a copy of the License at
|
||||
#
|
||||
# http://www.apache.org/licenses/LICENSE-2.0
|
||||
#
|
||||
# Unless required by applicable law or agreed to in writing, software
|
||||
# distributed under the License is distributed on an "AS IS" BASIS,
|
||||
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
# See the License for the specific language governing permissions and
|
||||
# limitations under the License.
|
||||
"""mdbook preprocessor which will help show the presentation aspect ratio.
|
||||
|
||||
The preprocessor adds a large red rectangle on every page. The
|
||||
rectangle has an aspect ratio of 16 to 8.5, meaning that it is
|
||||
slightly smaller than a standard 16/9 monitor.
|
||||
|
||||
The idea is that this approximates what the course participants can
|
||||
see at once during a class. This in turn will help you estimate when
|
||||
the slides are too large to be seen without scrolling.
|
||||
|
||||
Enable it in book.toml.
|
||||
"""
|
||||
|
||||
import json
|
||||
import sys
|
||||
import textwrap
|
||||
|
||||
|
||||
def update_book_items(items):
|
||||
aspect_ratio_helper = textwrap.dedent("""
|
||||
<style>
|
||||
div#aspect-ratio-helper {
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
div#aspect-ratio-helper div {
|
||||
outline: 3px dashed red;
|
||||
margin: 0 auto;
|
||||
/* At this width, the theme fonts are readable in a 16
|
||||
person conference room. If the browser is wider, the
|
||||
text becomes too small to be legible. */
|
||||
max-width: 980px;
|
||||
/* On a standard 16/9 monitor, we expect to lose a bit
|
||||
of vertical space to borders. */
|
||||
aspect-ratio: 16/8.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="aspect-ratio-helper">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
""")
|
||||
|
||||
for item in items:
|
||||
if type(item) != dict:
|
||||
continue
|
||||
|
||||
chapter = item.get('Chapter')
|
||||
if not chapter:
|
||||
continue
|
||||
|
||||
chapter['content'] = aspect_ratio_helper + chapter['content']
|
||||
update_book_items(chapter['sub_items'])
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
if len(sys.argv) > 1:
|
||||
if sys.argv[1] == "supports":
|
||||
sys.exit(0)
|
||||
|
||||
context, book = json.load(sys.stdin)
|
||||
update_book_items(book['sections'])
|
||||
print(json.dumps(book))
|
||||
10
book.toml
10
book.toml
@ -22,13 +22,6 @@ class = "bob"
|
||||
[preprocessor.course]
|
||||
verbose = false # Report timing information.
|
||||
|
||||
# Enable this preprocessor to overlay a large red rectangle on the
|
||||
# pages. This will show you an estimate of what the course
|
||||
# participants can see during the presentation.
|
||||
#
|
||||
# [preprocessor.aspect-ratio-helper]
|
||||
# command = "./aspect-ratio-helper.py"
|
||||
|
||||
[output.pandoc]
|
||||
optional = true
|
||||
hosted-html = "https://google.github.io/comprehensive-rust/"
|
||||
@ -47,9 +40,10 @@ urlcolor = "red"
|
||||
|
||||
[output.html]
|
||||
curly-quotes = true
|
||||
additional-js = ["theme/speaker-notes.js"]
|
||||
additional-js = ["theme/speaker-notes.js", "theme/redbox.js"]
|
||||
additional-css = [
|
||||
"theme/css/svgbob.css",
|
||||
"theme/css/redbox.css",
|
||||
"theme/css/speaker-notes.css",
|
||||
"theme/css/language-picker.css",
|
||||
"theme/css/rtl.css",
|
||||
|
||||
20
theme/css/redbox.css
Normal file
20
theme/css/redbox.css
Normal file
@ -0,0 +1,20 @@
|
||||
div#aspect-ratio-helper {
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
div#aspect-ratio-helper div {
|
||||
outline: 3px dashed red;
|
||||
margin: 0 auto;
|
||||
/* At this width, the theme fonts are readable in a 16
|
||||
person conference room. If the browser is wider, the
|
||||
text becomes too small to be legible. */
|
||||
max-width: 980px;
|
||||
/* On a standard 16/9 monitor, we expect to lose a bit
|
||||
of vertical space to borders. */
|
||||
aspect-ratio: 16/8.5;
|
||||
}
|
||||
38
theme/redbox.js
Normal file
38
theme/redbox.js
Normal file
@ -0,0 +1,38 @@
|
||||
(function redBoxButton() {
|
||||
// Create a new div element
|
||||
var newDiv = document.createElement("div");
|
||||
// Set the id attribute of the new div
|
||||
newDiv.id = "aspect-ratio-helper";
|
||||
// Create a nested div inside the new div
|
||||
var nestedDiv = document.createElement("div");
|
||||
// Append the nested div to the new div
|
||||
newDiv.appendChild(nestedDiv, newDiv.firstChild);
|
||||
// Get the parent element where you want to append the new div
|
||||
var parentElement = document.body; // Change this to your desired parent element
|
||||
// Append the new div to the parent element
|
||||
parentElement.insertBefore(newDiv, parentElement.firstChild);
|
||||
// Create the button element
|
||||
var hideShowButton = document.createElement("button");
|
||||
hideShowButton.innerHTML = '<i class="fa fa-square-o"></i>';
|
||||
hideShowButton.className = "icon-button";
|
||||
hideShowButton.type = "button";
|
||||
hideShowButton.title =
|
||||
"Outline the area that fits on one screen while teaching the course.";
|
||||
hideShowButton.id = "Dev";
|
||||
var navbarButtons = document.getElementsByClassName("left-buttons");
|
||||
navbarButtons[0].insertBefore(hideShowButton, navbarButtons.firstChild);
|
||||
//Default hiding the redbox
|
||||
document.getElementById("aspect-ratio-helper").style.display = "none";
|
||||
//Add Event listener to button to perform on click action.
|
||||
hideShowButton.addEventListener("click", function () {
|
||||
if (
|
||||
document.getElementById("aspect-ratio-helper").style.display === "none"
|
||||
) {
|
||||
document.getElementById("aspect-ratio-helper").style.display = "block";
|
||||
hideShowButton.innerHTML = '<i class="fa fa-square"></i>';
|
||||
} else {
|
||||
document.getElementById("aspect-ratio-helper").style.display = "none";
|
||||
hideShowButton.innerHTML = '<i class="fa fa-square-o"></i>';
|
||||
}
|
||||
});
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user