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>

.github/workflows/build.sh

@@ -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/)
 

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
+You can test the amount of space available using a simple tool. This tool can be
-lines in the `book.toml` file to have a red rectangle rendered on top of all
+used by clicking a toggle button next to the search button on left side of the
-pages:
+navbar.
-
-```toml
-[preprocessor.aspect-ratio-helper]
-command = "./aspect-ratio-helper.py"
-```
 
 The rectangle has an aspect ratio similar to what you can see when you share
 your screen on a 16:9 display or projector.

aspect-ratio-helper.py

@@ -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))

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",

theme/css/redbox.css

@@ -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;
+}

theme/redbox.js

@@ -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>';
+    }
+  });
+})();