HTML build step (#239)

HTML build step

.gitignore

@@ -103,10 +103,12 @@ venv.bak/
 # Jekyll
 _site/
 .sass-cache
+Gemfile.lock
 
 # Test builds
 scripts/tests/site/_build
 scripts/tests/site/content/LICENSE.md
 
 # Template build
-jupyter_book/book_template/_build
+jupyter_book/book_template/_build
+

jupyter_book/book_template/_includes/head.html

@@ -54,6 +54,9 @@
   <script src="{{ site.js_url | relative_url }}/turbolinks.js" async></script>
   <meta name="turbolinks-cache-control" content="no-cache">
 
+  <!-- Selectors for elements on the page -->
+  {% include js/documentSelectors.html %}
+
   <!-- Load nbinteract for widgets -->
   {% include js/nbinteract.html %}
 
@@ -70,12 +73,6 @@
   <!-- Clipboard copy button -->
   <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" async></script>
 
-  <!-- Load JS that depends on site variables -->
-  {% include js/copy-button.html %}
-
-  <!-- Hide cell code -->
-  {% include js/hide-cell.html %}
-
   <!-- Load custom website scripts -->
   <script src="{{ site.js_url | relative_url }}/scripts.js" async></script>
 
@@ -89,4 +86,10 @@
   <!-- Lunr search code - will only be executed on the /search page -->
   <script src="{{ '/assets/js/lunr/lunr.min.js' | relative_url }}" type="text/javascript"></script>
   <script>{% include search/lunr/lunr-en.js %}</script>
+
+  <!-- Load JS that depends on site variables -->
+  {% include js/copy-button.html %}
+
+  <!-- Hide cell code -->
+  {% include js/hide-cell.html %}
 </head>

jupyter_book/book_template/_includes/js/copy-button.html

@@ -2,8 +2,6 @@
 /**
  * Set up copy/paste for code blocks
  */
-const codeCellId = index => `codecell${index}`
-
 const clipboardButton = id =>
   `<a id="copy-button-${id}" class="btn copybtn o-tooltip--left" data-tooltip="Copy" data-clipboard-target="#${id}">
     <img src="{{ site.images_url | relative_url }}/copy-button.svg" alt="Copy to clipboard">
@@ -33,10 +31,8 @@
     return
   }
 
-  const codeCells = document.querySelectorAll('div.c-textbook__content > div.highlighter-rouge > div.highlight > pre, div.input_area pre')
-  codeCells.forEach((codeCell, index) => {
-    const id = codeCellId(index)
-    codeCell.setAttribute('id', id)
+  pageElements['codeCells'].forEach((codeCell) => {
+    const id = codeCell.getAttribute('id')
     if (document.getElementById("copy-button" + id) == null) {
       codeCell.insertAdjacentHTML('afterend', clipboardButton(id));
     }

jupyter_book/book_template/_includes/js/documentSelectors.html

@@ -0,0 +1,37 @@
+<script>
+/**
+ * Select various elements on the page for later use
+ */
+
+// IDs we'll attach to cells
+const codeCellId = index => `codecell${index}`
+const inputCellId = index => `inputcell${index}`
+
+pageElements = {}
+
+// All code cells
+findCodeCells = function() {
+    var codeCells = document.querySelectorAll('div.c-textbook__content > div.highlighter-rouge > div.highlight > pre, div.input_area pre, div.text_cell_render div.highlight pre')
+    pageElements['codeCells'] = codeCells;
+
+    codeCells.forEach((codeCell, index) => {
+      const id = codeCellId(index)
+      codeCell.setAttribute('id', id)
+    })
+};
+
+initFunction(findCodeCells);
+
+
+findInputCells = function() {
+    var inputCells = document.querySelectorAll('div.jb_input')
+    pageElements['inputCells'] = inputCells;
+
+    inputCells.forEach((inputCell, index) => {
+        const id = inputCellId(index)
+        inputCell.setAttribute('id', id)
+    })
+};
+
+initFunction(findInputCells);
+</script>

jupyter_book/book_template/_includes/js/hide-cell.html

@@ -45,19 +45,18 @@
         }
 
         // Find the input cells and add a hide button
-        document.querySelectorAll('div.input_area').forEach(function (item, index) {
-            if (!item.classList.contains("hidecode")) {
+        pageElements['inputCells'].forEach(function (inputCell) {
+            if (!inputCell.classList.contains("hidecode")) {
                 // Skip the cell if it doesn't have a hidecode class
                 return;
             }
+            const id = inputCell.getAttribute('id')
 
-            const id = codeCellId(index)
-            item.setAttribute('id', id);
             // Insert the button just inside the end of the next div
-            item.querySelector('div').insertAdjacentHTML('beforeend', hideCodeButton(id))
+            inputCell.querySelector('div.input').insertAdjacentHTML('beforeend', hideCodeButton(id))
 
             // Set up the visibility toggle
-            hideLink = document.querySelector(`#${id} div.highlight + input + label`);
+            hideLink = document.querySelector(`#${id} div.inner_cell + input + label`);
             hideLink.addEventListener('click', toggleCodeCellVisibility)
         });
     }

jupyter_book/book_template/_includes/js/thebelab-cell-button.html

@@ -12,7 +12,7 @@
 
 const addThebelabButtonToCodeCells =  () => {
 
-  const codeCells = document.querySelectorAll('div.input_area > div.highlighter-rouge:not(.output) pre')
+  const codeCells = document.querySelectorAll('div.input_area > div.highlight:not(.output) pre')
   codeCells.forEach((codeCell, index) => {
     const id = codeCellId(index)
     codeCell.setAttribute('id', id)

jupyter_book/book_template/_sass/components/_components.textbook__page.scss

@@ -43,8 +43,8 @@ div.highlighter-rouge {
   position: relative;
 }
 
-div.c-textbook__content > div.highlighter-rouge > div.highlight pre,
-div.input_area > div.highlighter-rouge > div.highlight > pre,
+div.inner_cell div.highlight > pre,
+div.highlighter-rouge > div.highlight > pre,
 div.output_wrapper pre {
   background-color: $color-light-gray;
   font-size: 0.9em;

jupyter_book/book_template/_sass/objects/_objects.copy-button.scss

@@ -10,6 +10,6 @@
   padding: 0 4px 2px;
 }
 
-.input_area .highlight {
+.input_area .highlight, .text_cell_render .highlight {
   position: relative;
 }

jupyter_book/book_template/_sass/objects/_objects.thebelab-in-cell-button.scss

@@ -13,3 +13,8 @@
 .input_area .highlight {
   position: relative;
 }
+
+// Hide code buttons
+div.jb_input div.input {
+  position: relative;
+}

jupyter_book/book_template/assets/js/scripts.js

@@ -148,3 +148,4 @@ highlightRightSidebar = function() {
 };
 
 initFunction(highlightRightSidebar);
+

jupyter_book/book_template/content/features/hiding.ipynb

@@ -291,5 +291,5 @@
   }
  },
  "nbformat": 4,
- "nbformat_minor": 2
+ "nbformat_minor": 4
 }

jupyter_book/book_template/content/features/notebooks.ipynb

@@ -152,7 +152,11 @@
   {
    "cell_type": "code",
    "execution_count": 4,
-   "metadata": {},
+   "metadata": {
+    "tags": [
+     "hide_input"
+    ]
+   },
    "outputs": [
     {
      "data": {
@@ -166,7 +170,6 @@
     }
    ],
    "source": [
-    "# NO CODE\n",
     "thisvariable = \"this plot *will* show up in the textbook.\"\n",
     "\n",
     "fig, ax = plt.subplots()\n",
@@ -188,7 +191,11 @@
   {
    "cell_type": "code",
    "execution_count": 5,
-   "metadata": {},
+   "metadata": {
+    "tags": [
+     "hide_input"
+    ]
+   },
    "outputs": [
     {
      "data": {
@@ -248,7 +255,6 @@
     }
    ],
    "source": [
-    "# NO CODE\n",
     "import pandas as pd\n",
     "pd.DataFrame([['hi', 'there'], ['this', 'is'], ['a', 'DataFrame']], columns=['Word A', 'Word B'])"
    ]
@@ -453,5 +459,5 @@
   }
  },
  "nbformat": 4,
- "nbformat_minor": 2
+ "nbformat_minor": 4
 }

jupyter_book/book_template/scripts/templates/html.tpl

@@ -0,0 +1,31 @@
+{% extends 'basic.tpl' %}
+
+{% block codecell %}
+{% if 'remove_cell' not in cell.metadata.tags and 'removecell' not in cell.metadata.tags %}
+{{ super() }}
+{% endif %}
+{%- endblock codecell %}
+
+{% block markdowncell %}
+{% if 'remove_cell' not in cell.metadata.tags and 'removecell' not in cell.metadata.tags %}
+{{ super() }}
+{% endif %}
+{%- endblock markdowncell %}
+
+<!-- Remove input cells if they're empty. Same as nbconvert basic w/ the extra class -->
+{% block input_group %}
+{%- if 'remove_input' not in cell.metadata.tags %}
+{%- if cell.source != '' %}
+<div class="jb_input{% if 'hide_input' in cell.metadata.tags or 'hidecode' in cell.metadata.tags %} hidecode{% endif %}" >
+{{ super() }}
+</div>
+{% endif %}
+{% endif %}
+{% endblock input_group %}
+
+
+{% block output %}
+<div class="jb_output_wrapper{% if 'interactive' in cell.metadata.tags %} output_widget_view{% endif %}">
+{{- super() -}}
+</div>
+{%- endblock output %}