pytorch · brucejlin1 · Nov 19, 2019 · Nov 1, 2019
diff --git a/_get_started/get-started-locally.md b/_get_started/get-started-locally.md
@@ -6,6 +6,7 @@ background-class: get-started-background
 body-class: get-started
 order: 1
 published: true
+get-started-locally: true
 ---
 
 ## Start Locally
@@ -21,29 +22,14 @@ published: true
 ---
 
 {% capture mac %}
-<nav class="inline_toc" markdown="1">
-* TOC
-{:toc}
-{::options toc_levels="1..3" /}
-</nav>
 {% include_relative installation/mac.md %}
 {% endcapture %}
 
 {% capture linux %}
-<nav class="inline_toc" markdown="1">
-* TOC
-{:toc}
-{::options toc_levels="1..3" /}
-</nav>
 {% include_relative installation/linux.md %}
 {% endcapture %}
 
 {% capture windows %}
-<nav class="inline_toc" markdown="1">
-* TOC
-{:toc}
-{::options toc_levels="1..3" /}
-</nav>
 {% include_relative installation/windows.md %}
 {% endcapture %}
 

diff --git a/_get_started/installation/linux.md b/_get_started/installation/linux.md
@@ -23,6 +23,7 @@ PyTorch is supported on Linux distributions that use [glibc](https://www.gnu.org
 > The install instructions here will generally apply to all supported Linux distributions. An example difference is that your distribution may support `yum` instead of `apt`. The specific examples shown were run on an Ubuntu 18.04 machine.
 
 ### Python
+{: #linux-python}
 
 Python 3.6 or greater is generally installed by default on any of our supported Linux distributions, which meets our recommendation.
 
@@ -44,6 +45,7 @@ sudo apt install python
 > If you use [Anaconda](#anaconda) to install PyTorch, it will install a sandboxed version of Python that will be used for running PyTorch applications.
 
 ### Package Manager
+{: #linux-package-manager}
 
 To install the PyTorch binaries, you will need to use one of two supported package managers: [Anaconda](https://www.anaconda.com/download/#linux) or [pip](https://pypi.org/project/pip/). Anaconda is the recommended package manager as it will provide you all of the PyTorch dependencies in one, sandboxed install, including Python.
 
@@ -84,6 +86,7 @@ sudo apt install python-pip
 {: #linux-installation}
 
 ### Anaconda
+{: #linux-anaconda}
 
 #### No CUDA
 
@@ -97,6 +100,7 @@ Then, run the command that is presented to you.
 
 
 ### pip
+{: #linux-pip}
 
 #### No CUDA
 
@@ -146,6 +150,7 @@ For the majority of PyTorch users, installing from a pre-built binary via a pack
 > You will also need to build from source if you want CUDA support.
 
 ### Prerequisites
+{: #linux-prerequisites-2}
 
 1. Install Anaconda[#anaconda]
 2. Install [CUDA](https://developer.nvidia.com/cuda-downloads), if your machine has a [CUDA-enabled GPU](https://developer.nvidia.com/cuda-gpus).

diff --git a/_get_started/installation/mac.md b/_get_started/installation/mac.md
@@ -13,10 +13,12 @@ PyTorch can be installed and used on macOS. Depending on your system and compute
 PyTorch is supported on macOS 10.10 (Yosemite) or above.
 
 ### Python
+{: #mac-python}
 
 By default, macOS is installed with Python 2.7. PyTorch can be installed with Python 2.7, but it is recommended that you use Python 3.6 or greater, which can be installed either through the Anaconda package manager (see [below](#anaconda)), [Homebrew](https://brew.sh/), or the [Python website](https://www.python.org/downloads/mac-osx/).
 
 ### Package Manager
+{: #mac-package-manager}
 
 To install the PyTorch binaries, you will need to use one of two supported package managers: [Anaconda](https://www.anaconda.com/download/#macos) or [pip](https://pypi.org/project/pip/). Anaconda is the recommended package manager as it will provide you all of the PyTorch dependencies in one, sandboxed install, including Python.
 
@@ -51,6 +53,7 @@ sudo easy_install pip
 {: #mac-installation}
 
 ### Anaconda
+{: #mac-anaconda}
 
 To install PyTorch via Anaconda, use the following conda command:
 
@@ -59,6 +62,7 @@ conda install pytorch torchvision -c pytorch
 ```
 
 ### pip
+{: #mac-anaconda}
 
 To install PyTorch via pip, use one of the following two commands, depending on your Python version:
 
@@ -102,6 +106,7 @@ For the majority of PyTorch users, installing from a pre-built binary via a pack
 > You will also need to build from source if you want CUDA support.
 
 ### Prerequisites
+{: #mac-prerequisites-2}
 
 1. Install [Anaconda](#anaconda)
 2. Install [CUDA](https://developer.nvidia.com/cuda-downloads), if your machine has a [CUDA-enabled GPU](https://developer.nvidia.com/cuda-gpus).

diff --git a/_get_started/installation/windows.md b/_get_started/installation/windows.md
@@ -16,6 +16,7 @@ PyTorch is supported on the following Windows distributions:
 > The install instructions here will generally apply to all supported Windows distributions. The specific examples shown will be run on a Windows 10 Enterprise machine
 
 ### Python
+{: #windows-python}
 
 Currently, PyTorch on Windows only supports Python 3.x; Python 2.x is not supported.
 
@@ -36,6 +37,7 @@ choco install python
 ```
 
 ### Package Manager
+{: #windows-package-manager}
 
 To install the PyTorch binaries, you will need to use at least one of two supported package managers: [Anaconda](https://www.anaconda.com/download/#windows) and [pip](https://pypi.org/project/pip/). Anaconda is the recommended package manager as it will provide you all of the PyTorch dependencies in one, sandboxed install, including Python and `pip.`
 
@@ -51,6 +53,7 @@ If you installed Python by any of the recommended ways above[LINK], `[pip](https
 {: #windows-installation}
 
 ### Anaconda
+{: #windows-anaconda}
 
 To install PyTorch with Anaconda, you will need to open an Anaconda prompt via `Start | Anaconda3 | Anaconda Prompt`.
 
@@ -66,6 +69,7 @@ Then, run the command that is presented to you.
 
 
 ### pip
+{: #windows-pip}
 
 #### No CUDA
 
@@ -121,6 +125,7 @@ torch.cuda.is_available()
 For the majority of PyTorch users, installing from a pre-built binary via a package manager will provide the best experience. However, there are times when you may want to install the bleeding edge PyTorch code, whether for testing or actual development on the PyTorch core. To install the latest PyTorch code, you will need to [build PyTorch from source](https://github.com/pytorch/pytorch#from-source).
 
 ### Prerequisites
+{: #windows-prerequisites-2}
 
 1. Install [Anaconda](#anaconda)
 2. Install [CUDA](https://developer.nvidia.com/cuda-downloads), if your machine has a [CUDA-enabled GPU](https://developer.nvidia.com/cuda-gpus).

diff --git a/_includes/get_started_locally.html b/_includes/get_started_locally.html
@@ -0,0 +1,12 @@
+<div class="row">
+  <div class="col-md-3">
+    {% include get_started_locally_side_nav.html %}
+  </div>
+  <div class="col-md-8 offset-md-1">
+    <div class="article-wrapper" data-id="{{ item.slug }}">
+      <article class="pytorch-article">
+        {{ content }}
+      </article>
+    </div>
+  </div>
+</div>
diff --git a/_includes/get_started_locally_side_nav.html b/_includes/get_started_locally_side_nav.html
@@ -0,0 +1,5 @@
+<div class="sticky-top get-started-locally-sidebar">
+  <p id="get-started-shortcuts-menu">Shortcuts</p>
+  <ul id="get-started-locally-sidebar-list"></ul>
+</div>
+
diff --git a/_layouts/get_started.html b/_layouts/get_started.html
@@ -18,31 +18,42 @@ <h1>Get Started</h1>
 
     <div class="main-content-wrapper">
       <div class="main-content">
-          <div class="container-fluid nav-menu-wrapper">
-            <div class="container">
-              <nav class="navbar navbar-expand-lg navbar-light main-content-menu">
-                <ul class="navbar-nav">
-                  {% for item in items %}
-                    <li class="nav-item nav-select">
-                      <a class="nav-link" data-id="{{ item.slug }}" href="{{ site.baseurl }}{{ item.permalink }}">{{ item.title }}</a>
-                    </li>
-                  {% endfor %}
-                </ul>
-              </nav>
-            </div>
+        <div class="container-fluid nav-menu-wrapper">
+          <div class="container">
+            <nav class="navbar navbar-expand-lg navbar-light main-content-menu">
+              <ul class="navbar-nav">
+                {% for item in items %}
+                  <li class="nav-item nav-select">
+                    <a class="nav-link get-started-nav-link" data-id="{{ item.slug }}" href="{{ site.baseurl }}{{ item.permalink }}">{{ item.title }}</a>
+                  </li>
+                {% endfor %}
+              </ul>
+            </nav>
           </div>
+        </div>
 
         <div class="container">
+          {% if page.get-started-locally == true %}
+
+            {% include get_started_locally.html %}
+
+          {% else %}
+
             <div class="article-wrapper" data-id="{{ item.slug }}">
               <article class="pytorch-article">
                 {{ content }}
               </article>
             </div>
-          </div>
+
+          {% endif %}
         </div>
       </div>
     </div>
 
     {% include footer.html %}
   </body>
 </html>
+
+{% if page.get-started-locally == true %}
+  <script src="{{ site.baseurl }}/assets/get-started-sidebar.js"></script>
+{% endif %}
diff --git a/_sass/get-started.scss b/_sass/get-started.scss
@@ -74,6 +74,16 @@
     }
   }
 
+  .get-started-nav-link {
+    padding-left: rem(20px);
+    padding-right: rem(20px);
+
+    @include desktop {
+      padding-left: rem(30px);
+      padding-right: rem(30px);
+    }
+  }
+
   .nav-item {
     padding-top: rem(15px);
     padding-bottom: rem(15px);
@@ -193,3 +203,38 @@
     }
   }
 }
+
+.get-started .get-started-locally-sidebar {
+  padding-top: rem(40px);
+  padding-bottom: rem(40px);
+  top: 15%;
+
+  @include desktop {
+    padding-top: 0;
+  }
+
+  ul {
+    padding-left: 0;
+  }
+
+  li {
+    list-style-type: none;
+    line-height: 36px;
+
+    a {
+      color: #8c8c8c;
+      &.active,
+      &:hover {
+        color: $orange;
+      }
+    }
+
+    .subitem {
+      padding-left: rem(20px);
+    }
+  }
+
+  li.subitem {
+    padding-left: rem(20px);
+  }
+}
diff --git a/assets/get-started-sidebar.js b/assets/get-started-sidebar.js
@@ -0,0 +1,78 @@
+// Create the sidebar menus for each OS
+
+$([".macos", ".linux", ".windows"]).each(function(index, osClass) {
+  buildSidebarMenu(osClass);
+});
+
+// On page load initially show the Mac OS menu
+
+showSidebar("macos");
+
+$("#macos").on("click", function() {
+  showSidebar("macos");
+});
+
+$("#linux").on("click", function() {
+  showSidebar("linux");
+});
+
+$("#windows").on("click", function() {
+  showSidebar("windows");
+});
+
+function buildSidebarMenu(osClass) {
+  $(osClass + " > h2," + osClass + " > h3").each(function(index, element) {
+    osClass = osClass.replace(".", "");
+
+    // If the menu item is an H3 tag then it should be indented
+    var indentMenuItem = $(element).get(0).tagName == "H3" ? "subitem" : "";
+
+    // Combine the menu item classes
+    var menuItemClasses = [osClass, indentMenuItem].join(" ");
+
+    $("#get-started-locally-sidebar-list").append(
+      "<li class='" +
+        menuItemClasses +
+        "' style='display:none'><a href=#" +
+        this.id +
+        ">" +
+        this.textContent +
+        "</a></li>"
+    );
+  });
+}
+
+function showSidebar(osClass) {
+  // Hide all of the menu items at first
+  // Then filter for the selected OS
+
+  $(".get-started-locally-sidebar li")
+    .hide()
+    .filter(function() {
+      return $(this)
+        .attr("class")
+        .includes(osClass);
+    })
+    .show();
+}
+
+$(".get-started-locally-sidebar li").on("click", function() {
+  removeActiveClass();
+  addActiveClass(this);
+});
+
+function removeActiveClass() {
+  $(".get-started-locally-sidebar li a").each(function() {
+    $(this).removeClass("active");
+  });
+}
+
+function addActiveClass(element) {
+  $(element)
+    .find("a")
+    .addClass("active");
+}
+
+if ($("#get-started-locally-sidebar-list").text() == "") {
+  $("#get-started-shortcuts-menu").hide();
+}