Enable multi-level nav in the left nav bar (#3125)

* Enable multi-level nav in the left nav bar
* Update .lycheeignore
* Add beginner_source/introyt/introy_index.html to validate_tutorial_built.py to skip building since there is no code
* Add .js to keep left nav expanded
* Expand only Learn the Basics
* Remember user selection for collapsed/uncollapsed content
* emove the bullet from the list

---------

Co-authored-by: Jane (Yuan) Xu <[email protected]>

Author: svekars

.jenkins/validate_tutorials_built.py

@@ -10,6 +10,7 @@
 
 NOT_RUN = [
     "beginner_source/basics/intro",  # no code
+    "beginner_source/introyt/introyt_index", # no code
     "beginner_source/onnx/intro_onnx",
     "beginner_source/profiler",
     "beginner_source/saving_loading_models",

.lycheeignore

@@ -6,3 +6,6 @@ file:///f:/libtmp/some_file
 
 #Ignore links with "file:///" to catch any other example links
 file:\/\/\/.*
+
+# Ignore colab link in the setting of conf.py
+https://pytorch.org/tutorials/beginner/colab/n

_static/css/custom2.css

@@ -17,3 +17,21 @@
     margin-bottom: 5px;
   }
 }
+
+/* Left nav for 2nd level nav */
+
+.pytorch-left-menu li.toctree-l2 {
+  padding-left: 10px;
+}
+
+.pytorch-left-menu li.toctree-l2.current > a, {
+   color: #ee4c2c;
+}
+
+.pytorch-left-menu li.toctree-l2.current a:link.reference.internal {
+   color: #ee4c2c;
+}
+
+.pytorch-left-menu li.toctree-l1.current > a:before {
+   content: "";
+}

_static/js/custom.js

@@ -0,0 +1,52 @@
+document.addEventListener("DOMContentLoaded", function() {
+  // Select all <li> elements with the class "toctree-l1"
+  var toctreeItems = document.querySelectorAll('li.toctree-l1');
+
+  toctreeItems.forEach(function(item) {
+    // Find the link within the item
+    var link = item.querySelector('a');
+    var nestedList = item.querySelector('ul');
+
+    if (link && nestedList) {
+      // Create a span element for the "[+]" or "[-]" sign
+      var expandSign = document.createElement('span');
+      expandSign.style.cursor = 'pointer'; // Make it look clickable
+
+      // Use the link text as a unique key for localStorage
+      var sectionKey = 'section_' + link.textContent.trim().replace(/\s+/g, '_');
+
+      // Retrieve the saved state from localStorage
+      var isExpanded = localStorage.getItem(sectionKey);
+
+      // If no state is saved, default to expanded for "Learn the Basics" and collapsed for others
+      if (isExpanded === null) {
+        isExpanded = (link.textContent.trim() === 'Learn the Basics') ? 'true' : 'false';
+        localStorage.setItem(sectionKey, isExpanded);
+      }
+
+      if (isExpanded === 'true') {
+        nestedList.style.display = 'block'; // Expand the section
+        expandSign.textContent = '[-] '; // Show "[-]" since it's expanded
+      } else {
+        nestedList.style.display = 'none'; // Collapse the section
+        expandSign.textContent = '[+] '; // Show "[+]" since it's collapsed
+      }
+
+      // Add a click event to toggle the nested list
+      expandSign.addEventListener('click', function() {
+        if (nestedList.style.display === 'none') {
+          nestedList.style.display = 'block';
+          expandSign.textContent = '[-] '; // Change to "[-]" when expanded
+          localStorage.setItem(sectionKey, 'true'); // Save state
+        } else {
+          nestedList.style.display = 'none';
+          expandSign.textContent = '[+] '; // Change back to "[+]" when collapsed
+          localStorage.setItem(sectionKey, 'false'); // Save state
+        }
+      });
+
+      // Insert the sign before the link
+      link.parentNode.insertBefore(expandSign, link);
+    }
+  });
+});

_templates/layout.html

@@ -1,5 +1,23 @@
 {% extends "!layout.html" %}
 
+
+<!-- Overrides needed for the multilevel nav -->
+{% block menu %}
+    {% if 'singlehtml' not in builder %}
+        {% set global_toc = toctree(collapse=theme_collapse_navigation|tobool,
+                                    includehidden=theme_includehidden|tobool,
+                                    titles_only=True) %}
+    {% endif %}
+    {% if global_toc %}
+        {{ global_toc }}
+    {% else %}
+        <!-- Local TOC -->
+        <div class="local-toc">{{ toc }}</div>
+    {% endif %}
+{% endblock %}
+ <!-- End of overrides needed for the multilevel nav -->
+
+
 {%- block content %}
 {{ super() }}
 <script>
@@ -29,6 +47,7 @@
     </div>
 {% endblock %}
 
+
 {% block footer %}
 {{ super() }}
 <script>

beginner_source/basics/intro.py

@@ -13,9 +13,9 @@
 ===================
 
 Authors:
-`Suraj Subramanian <https://github.com/suraj813>`_,
+`Suraj Subramanian <https://github.com/subramen>`_,
 `Seth Juarez <https://github.com/sethjuarez/>`_,
-`Cassie Breviu <https://github.com/cassieview/>`_,
+`Cassie Breviu <https://github.com/cassiebreviu/>`_,
 `Dmitry Soshnikov <https://soshnikov.com/>`_,
 `Ari Bornstein <https://github.com/aribornstein/>`_
 
@@ -49,6 +49,16 @@
 .. include:: /beginner_source/basics/qs_toc.txt
 
 .. toctree::
+   :maxdepth: 2
    :hidden:
 
+   quickstart_tutorial
+   tensorqs_tutorial
+   data_tutorial
+   transforms_tutorial
+   buildmodel_tutorial
+   autogradqs_tutorial
+   optimization_tutorial
+   saveloadrun_tutorial
+
 """

beginner_source/introyt.rst

@@ -1,29 +1,10 @@
-`Introduction <introyt/introyt1_tutorial.html>`_ ||
-`Tensors <introyt/tensors_deeper_tutorial.html>`_ ||
-`Autograd <introyt/autogradyt_tutorial.html>`_ ||
-`Building Models <introyt/modelsyt_tutorial.html>`_ ||
-`TensorBoard Support <introyt/tensorboardyt_tutorial.html>`_ ||
-`Training Models <introyt/trainingyt.html>`_ ||
-`Model Understanding <introyt/captumyt.html>`_
-
 Introduction to PyTorch - YouTube Series
 ========================================
 
-Authors: 
-`Brad Heintz <https://github.com/fbbradheintz>`_
-
-This tutorial follows along with the `PyTorch Beginner Series <https://www.youtube.com/playlist?list=PL_lsbAsL_o2CTlGHgMxNrKhzP97BaG9ZN>`_ on YouTube.
-
-`This tutorial assumes a basic familiarity with Python and Deep Learning concepts.`
-
-Running the Tutorial Code
--------------------------
-You can run this tutorial in a couple of ways:
+This page has been moved.
 
-- **In the cloud**: This is the easiest way to get started! Each section has a Colab link at the top, which opens a notebook with the code in a fully-hosted environment. Pro tip: Use Colab with a GPU runtime to speed up operations *Runtime > Change runtime type > GPU*
-- **Locally**: This option requires you to setup PyTorch and torchvision first on your local machine (`installation instructions <https://pytorch.org/get-started/locally/>`_). Download the notebook or copy the code into your favorite IDE.
+Redirecting now...
 
-.. include:: /beginner_source/introyt/tocyt.txt
+.. raw:: html
 
-.. toctree::
-   :hidden:
+   <meta http-equiv="Refresh" content="0; url='https://pytorch.org/tutorials/beginner/introyt/introyt_index.html'" />

beginner_source/introyt/README.txt

@@ -1,7 +1,7 @@
 Introduction to PyTorch on YouTube
 ----------------------------------
 
-1. introyt.rst
+1. introyt.py
     Introduction to PyTorch - Youtube Series
     https://pytorch.org/tutorials/beginner/introyt/introyt.html
 

beginner_source/introyt/introyt_index.py

@@ -0,0 +1,38 @@
+"""
+`Introduction <introyt/introyt1_tutorial.html>`_ ||
+`Tensors <introyt/tensors_deeper_tutorial.html>`_ ||
+`Autograd <introyt/autogradyt_tutorial.html>`_ ||
+`Building Models <introyt/modelsyt_tutorial.html>`_ ||
+`TensorBoard Support <introyt/tensorboardyt_tutorial.html>`_ ||
+`Training Models <introyt/trainingyt.html>`_ ||
+`Model Understanding <introyt/captumyt.html>`_
+
+Introduction to PyTorch - YouTube Series
+========================================
+
+Authors:
+`Brad Heintz <https://github.com/fbbradheintz>`_
+
+This tutorial follows along with the `PyTorch Beginner Series <https://www.youtube.com/playlist?list=PL_lsbAsL_o2CTlGHgMxNrKhzP97BaG9ZN>`_ on YouTube.
+
+`This tutorial assumes a basic familiarity with Python and Deep Learning concepts.`
+
+Running the Tutorial Code
+-------------------------
+You can run this tutorial in a couple of ways:
+
+- **On the cloud**: This is the easiest way to get started! Each section has a Colab link at the top, which opens a notebook with the code in a fully-hosted environment. Pro tip: Use Colab with a GPU runtime to speed up operations *Runtime > Change runtime type > GPU*
+- **Locally**: This option requires you to set up PyTorch and torchvision on your local machine (`installation instructions <https://pytorch.org/get-started/locally/>`_). Download the notebook or copy the code into your favorite IDE.
+
+.. toctree::
+   :maxdepth: 2
+   :hidden:
+
+   introyt1_tutorial
+   tensors_deeper_tutorial
+   autogradyt_tutorial
+   modelsyt_tutorial
+   tensorboardyt_tutorial
+   trainingyt
+   captumyt
+"""

conf.py

@@ -304,6 +304,10 @@ def reset_seeds(gallery_conf, fname):
         'css/custom2.css'
     ]
 
+html_js_files = [
+    "js/custom.js",
+]
+
 def setup(app):
     # NOTE: in Sphinx 1.8+ `html_css_files` is an official configuration value
     # and can be moved outside of this function (and the setup(app) function

index.rst

@@ -71,7 +71,7 @@ Welcome to PyTorch Tutorials
    :header: Introduction to PyTorch on YouTube
    :card_description: An introduction to building a complete ML workflow with PyTorch. Follows the PyTorch Beginner Series on YouTube.
    :image: _static/img/thumbnails/cropped/generic-pytorch-logo.png
-   :link: beginner/introyt.html
+   :link: beginner/introyt/introyt_index.html
    :tags: Getting-Started
 
 .. customcarditem::
@@ -906,7 +906,7 @@ Additional Resources
 .. Page TOC
 .. -----------------------------------------
 .. toctree::
-   :maxdepth: 2
+   :maxdepth: 1
    :hidden:
    :includehidden:
    :caption: PyTorch Recipes
@@ -915,39 +915,15 @@ Additional Resources
    See All Prototype Recipes <prototype/prototype_index>
 
 .. toctree::
-   :maxdepth: 2
    :hidden:
    :includehidden:
    :caption: Introduction to PyTorch
 
    beginner/basics/intro
-   beginner/basics/quickstart_tutorial
-   beginner/basics/tensorqs_tutorial
-   beginner/basics/data_tutorial
-   beginner/basics/transforms_tutorial
-   beginner/basics/buildmodel_tutorial
-   beginner/basics/autogradqs_tutorial
-   beginner/basics/optimization_tutorial
-   beginner/basics/saveloadrun_tutorial
-   advanced/custom_ops_landing_page
+   beginner/introyt/introyt_index
 
 .. toctree::
-   :maxdepth: 2
-   :hidden:
-   :includehidden:
-   :caption: Introduction to PyTorch on YouTube
-
-   beginner/introyt
-   beginner/introyt/introyt1_tutorial
-   beginner/introyt/tensors_deeper_tutorial
-   beginner/introyt/autogradyt_tutorial
-   beginner/introyt/modelsyt_tutorial
-   beginner/introyt/tensorboardyt_tutorial
-   beginner/introyt/trainingyt
-   beginner/introyt/captumyt
-
-.. toctree::
-   :maxdepth: 2
+   :maxdepth: 1
    :hidden:
    :includehidden:
    :caption: Learning PyTorch
@@ -960,7 +936,7 @@ Additional Resources
    intermediate/pinmem_nonblock
 
 .. toctree::
-   :maxdepth: 2
+   :maxdepth: 1
    :includehidden:
    :hidden:
    :caption: Image and Video
@@ -991,7 +967,7 @@ Additional Resources
    intermediate/forced_alignment_with_torchaudio_tutorial
 
 .. toctree::
-   :maxdepth: 2
+   :maxdepth: 1
    :includehidden:
    :hidden:
    :caption: Backends
@@ -1010,7 +986,7 @@ Additional Resources
    advanced/pendulum
 
 .. toctree::
-   :maxdepth: 2
+   :maxdepth: 1
    :includehidden:
    :hidden:
    :caption: Deploying PyTorch Models in Production