Render jupyter-notebook in documentation

Signed-off-by: Kim, Vinnam <vinnam.kim@intel.com>

.github/workflows/github_pages.yml

@@ -30,12 +30,10 @@ jobs:
         run: |
           npm ci
 
-      # The pip upgrade must be in a separate step, because otherwise bash will
-      # remember where the system-installed pip was, and will use it in any following
-      # commands instead of the newly-installed pip.
-      - name: Upgrade pip
-        run: |
-          pip install --upgrade pip
+      - name: Set up Python 3.9
+        uses: actions/setup-python@v2
+        with:
+          python-version: 3.9
 
       # click>=8.1.0 fails https://github.com/streamlit/streamlit/issues/4555
       - name: Build docs

.gitignore

@@ -65,6 +65,7 @@ site/public/
 site/resources/
 site/node_modules/
 site/tech-doc-hugo
+site/**/nb_htmls/*.html
 
 # Temporary sphinx files
 site/static/api

requirements.txt

@@ -20,3 +20,5 @@ black>=22.1.0
 
 # docs
 markupsafe==2.0.1
+nbconvert>=7.2.3
+ipython>=8.4.0

site/build_docs.py

@@ -4,6 +4,7 @@
 #
 # SPDX-License-Identifier: MIT
 
+import os
 import shutil
 import subprocess
 import tarfile
@@ -75,8 +76,30 @@ def generate_docs(repo, output_dir, tags):
     with tempfile.TemporaryDirectory() as temp_dir:
         content_loc = Path(temp_dir, "site")
         shutil.copytree(repo_root / "site", content_loc, symlinks=True)
+        nb_loc = content_loc / "notebooks"
+        shutil.copytree(repo_root / "notebooks", nb_loc, symlinks=True)
 
         def run_hugo(destination_dir):
+            nb_out_dir = os.path.join(
+                str(content_loc),
+                "content",
+                "en",
+                "docs",
+                "python-api",
+                "python-api-examples",
+                "nb_htmls",
+            )
+            for f in os.listdir(str(nb_loc)):
+                ext = os.path.splitext(f)[-1]
+                if ext != ".ipynb":
+                    continue
+                nb_path = str(nb_loc / f)
+                subprocess.run(
+                    ["jupyter", "nbconvert", "--to", "html", nb_path, "--output-dir", nb_out_dir],
+                    cwd=content_loc,
+                    check=True,
+                )
+
             subprocess.run(  # nosec B603, B607
                 [
                     "hugo",

site/content/en/docs/python-api/python-api-examples/visualizer.md

@@ -7,4 +7,5 @@ description: ''
 Need to update the description.
 
 Jupyter Notebook Examples:
-Need to update the description.
+({{ .Site.Params.github_repo }})
+{{< blocks/notebook 03_visualize >}}

site/layouts/shortcodes/blocks/notebook.html

@@ -0,0 +1,13 @@
+<!--notebook.html--> 
+<iframe
+    id="notebook_iframe"
+    src="../nb_htmls/{{ index .Params 0 }}.html"
+    style="height:100%;width:100%;border:none;overflow:hidden;"
+    scrolling="no"
+    onload="resizeIframe(this)"></iframe>
+
+<script>
+    function resizeIframe(obj) {
+        obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
+    }
+</script>