Skip to content

Commit 3d8d664

Browse files
brucejlin1brucejlin1
authored
Merge pull request pytorch#304 from shiftlab/update-get-started-nav-sidebar
Update Get Started Locally sidebar
2 parents ad4ccbf + 797c415 commit 3d8d664

File tree

9 files changed

+180
-28
lines changed

9 files changed

+180
-28
lines changed

‎_get_started/get-started-locally.md

+1-15
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ background-class: get-started-background
66
body-class: get-started
77
order: 1
88
published: true
9+
get-started-locally: true
910
---
1011

1112
## Start Locally
@@ -21,29 +22,14 @@ published: true
2122
---
2223

2324
{% capture mac %}
24-
<nav class="inline_toc" markdown="1">
25-
* TOC
26-
{:toc}
27-
{::options toc_levels="1..3" /}
28-
</nav>
2925
{% include_relative installation/mac.md %}
3026
{% endcapture %}
3127

3228
{% capture linux %}
33-
<nav class="inline_toc" markdown="1">
34-
* TOC
35-
{:toc}
36-
{::options toc_levels="1..3" /}
37-
</nav>
3829
{% include_relative installation/linux.md %}
3930
{% endcapture %}
4031

4132
{% capture windows %}
42-
<nav class="inline_toc" markdown="1">
43-
* TOC
44-
{:toc}
45-
{::options toc_levels="1..3" /}
46-
</nav>
4733
{% include_relative installation/windows.md %}
4834
{% endcapture %}
4935

‎_get_started/installation/linux.md

+5
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ PyTorch is supported on Linux distributions that use [glibc](https://www.gnu.org
2323
> 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.
2424
2525
### Python
26+
{: #linux-python}
2627

2728
Python 3.6 or greater is generally installed by default on any of our supported Linux distributions, which meets our recommendation.
2829

@@ -44,6 +45,7 @@ sudo apt install python
4445
> If you use [Anaconda](#anaconda) to install PyTorch, it will install a sandboxed version of Python that will be used for running PyTorch applications.
4546
4647
### Package Manager
48+
{: #linux-package-manager}
4749

4850
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.
4951

@@ -84,6 +86,7 @@ sudo apt install python-pip
8486
{: #linux-installation}
8587

8688
### Anaconda
89+
{: #linux-anaconda}
8790

8891
#### No CUDA
8992

@@ -97,6 +100,7 @@ Then, run the command that is presented to you.
97100

98101

99102
### pip
103+
{: #linux-pip}
100104

101105
#### No CUDA
102106

@@ -146,6 +150,7 @@ For the majority of PyTorch users, installing from a pre-built binary via a pack
146150
> You will also need to build from source if you want CUDA support.
147151
148152
### Prerequisites
153+
{: #linux-prerequisites-2}
149154

150155
1. Install Anaconda[#anaconda]
151156
2. Install [CUDA](https://developer.nvidia.com/cuda-downloads), if your machine has a [CUDA-enabled GPU](https://developer.nvidia.com/cuda-gpus).

‎_get_started/installation/mac.md

+5
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@ PyTorch can be installed and used on macOS. Depending on your system and compute
1313
PyTorch is supported on macOS 10.10 (Yosemite) or above.
1414

1515
### Python
16+
{: #mac-python}
1617

1718
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/).
1819

1920
### Package Manager
21+
{: #mac-package-manager}
2022

2123
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.
2224

@@ -51,6 +53,7 @@ sudo easy_install pip
5153
{: #mac-installation}
5254

5355
### Anaconda
56+
{: #mac-anaconda}
5457

5558
To install PyTorch via Anaconda, use the following conda command:
5659

@@ -59,6 +62,7 @@ conda install pytorch torchvision -c pytorch
5962
```
6063

6164
### pip
65+
{: #mac-anaconda}
6266

6367
To install PyTorch via pip, use one of the following two commands, depending on your Python version:
6468

@@ -102,6 +106,7 @@ For the majority of PyTorch users, installing from a pre-built binary via a pack
102106
> You will also need to build from source if you want CUDA support.
103107
104108
### Prerequisites
109+
{: #mac-prerequisites-2}
105110

106111
1. Install [Anaconda](#anaconda)
107112
2. Install [CUDA](https://developer.nvidia.com/cuda-downloads), if your machine has a [CUDA-enabled GPU](https://developer.nvidia.com/cuda-gpus).

‎_get_started/installation/windows.md

+5
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ PyTorch is supported on the following Windows distributions:
1616
> 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
1717
1818
### Python
19+
{: #windows-python}
1920

2021
Currently, PyTorch on Windows only supports Python 3.x; Python 2.x is not supported.
2122

@@ -36,6 +37,7 @@ choco install python
3637
```
3738

3839
### Package Manager
40+
{: #windows-package-manager}
3941

4042
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.`
4143

@@ -51,6 +53,7 @@ If you installed Python by any of the recommended ways above[LINK], `[pip](https
5153
{: #windows-installation}
5254

5355
### Anaconda
56+
{: #windows-anaconda}
5457

5558
To install PyTorch with Anaconda, you will need to open an Anaconda prompt via `Start | Anaconda3 | Anaconda Prompt`.
5659

@@ -66,6 +69,7 @@ Then, run the command that is presented to you.
6669

6770

6871
### pip
72+
{: #windows-pip}
6973

7074
#### No CUDA
7175

@@ -121,6 +125,7 @@ torch.cuda.is_available()
121125
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).
122126

123127
### Prerequisites
128+
{: #windows-prerequisites-2}
124129

125130
1. Install [Anaconda](#anaconda)
126131
2. Install [CUDA](https://developer.nvidia.com/cuda-downloads), if your machine has a [CUDA-enabled GPU](https://developer.nvidia.com/cuda-gpus).

‎_includes/get_started_locally.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="row">
2+
<div class="col-md-3">
3+
{% include get_started_locally_side_nav.html %}
4+
</div>
5+
<div class="col-md-8 offset-md-1">
6+
<div class="article-wrapper" data-id="{{ item.slug }}">
7+
<article class="pytorch-article">
8+
{{ content }}
9+
</article>
10+
</div>
11+
</div>
12+
</div>

‎_includes/get_started_locally_side_nav.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="sticky-top get-started-locally-sidebar">
2+
<p id="get-started-shortcuts-menu">Shortcuts</p>
3+
<ul id="get-started-locally-sidebar-list"></ul>
4+
</div>
5+

‎_layouts/get_started.html

+24-13
Original file line numberDiff line numberDiff line change
@@ -18,31 +18,42 @@ <h1>Get Started</h1>
1818

1919
<div class="main-content-wrapper">
2020
<div class="main-content">
21-
<div class="container-fluid nav-menu-wrapper">
22-
<div class="container">
23-
<nav class="navbar navbar-expand-lg navbar-light main-content-menu">
24-
<ul class="navbar-nav">
25-
{% for item in items %}
26-
<li class="nav-item nav-select">
27-
<a class="nav-link" data-id="{{ item.slug }}" href="{{ site.baseurl }}{{ item.permalink }}">{{ item.title }}</a>
28-
</li>
29-
{% endfor %}
30-
</ul>
31-
</nav>
32-
</div>
21+
<div class="container-fluid nav-menu-wrapper">
22+
<div class="container">
23+
<nav class="navbar navbar-expand-lg navbar-light main-content-menu">
24+
<ul class="navbar-nav">
25+
{% for item in items %}
26+
<li class="nav-item nav-select">
27+
<a class="nav-link get-started-nav-link" data-id="{{ item.slug }}" href="{{ site.baseurl }}{{ item.permalink }}">{{ item.title }}</a>
28+
</li>
29+
{% endfor %}
30+
</ul>
31+
</nav>
3332
</div>
33+
</div>
3434

3535
<div class="container">
36+
{% if page.get-started-locally == true %}
37+
38+
{% include get_started_locally.html %}
39+
40+
{% else %}
41+
3642
<div class="article-wrapper" data-id="{{ item.slug }}">
3743
<article class="pytorch-article">
3844
{{ content }}
3945
</article>
4046
</div>
41-
</div>
47+
48+
{% endif %}
4249
</div>
4350
</div>
4451
</div>
4552

4653
{% include footer.html %}
4754
</body>
4855
</html>
56+
57+
{% if page.get-started-locally == true %}
58+
<script src="{{ site.baseurl }}/assets/get-started-sidebar.js"></script>
59+
{% endif %}

‎_sass/get-started.scss

+45
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,16 @@
7474
}
7575
}
7676

77+
.get-started-nav-link {
78+
padding-left: rem(20px);
79+
padding-right: rem(20px);
80+
81+
@include desktop {
82+
padding-left: rem(30px);
83+
padding-right: rem(30px);
84+
}
85+
}
86+
7787
.nav-item {
7888
padding-top: rem(15px);
7989
padding-bottom: rem(15px);
@@ -193,3 +203,38 @@
193203
}
194204
}
195205
}
206+
207+
.get-started .get-started-locally-sidebar {
208+
padding-top: rem(40px);
209+
padding-bottom: rem(40px);
210+
top: 15%;
211+
212+
@include desktop {
213+
padding-top: 0;
214+
}
215+
216+
ul {
217+
padding-left: 0;
218+
}
219+
220+
li {
221+
list-style-type: none;
222+
line-height: 36px;
223+
224+
a {
225+
color: #8c8c8c;
226+
&.active,
227+
&:hover {
228+
color: $orange;
229+
}
230+
}
231+
232+
.subitem {
233+
padding-left: rem(20px);
234+
}
235+
}
236+
237+
li.subitem {
238+
padding-left: rem(20px);
239+
}
240+
}

‎assets/get-started-sidebar.js

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// Create the sidebar menus for each OS
2+
3+
$([".macos", ".linux", ".windows"]).each(function(index, osClass) {
4+
buildSidebarMenu(osClass);
5+
});
6+
7+
// On page load initially show the Mac OS menu
8+
9+
showSidebar("macos");
10+
11+
$("#macos").on("click", function() {
12+
showSidebar("macos");
13+
});
14+
15+
$("#linux").on("click", function() {
16+
showSidebar("linux");
17+
});
18+
19+
$("#windows").on("click", function() {
20+
showSidebar("windows");
21+
});
22+
23+
function buildSidebarMenu(osClass) {
24+
$(osClass + " > h2," + osClass + " > h3").each(function(index, element) {
25+
osClass = osClass.replace(".", "");
26+
27+
// If the menu item is an H3 tag then it should be indented
28+
var indentMenuItem = $(element).get(0).tagName == "H3" ? "subitem" : "";
29+
30+
// Combine the menu item classes
31+
var menuItemClasses = [osClass, indentMenuItem].join(" ");
32+
33+
$("#get-started-locally-sidebar-list").append(
34+
"<li class='" +
35+
menuItemClasses +
36+
"' style='display:none'><a href=#" +
37+
this.id +
38+
">" +
39+
this.textContent +
40+
"</a></li>"
41+
);
42+
});
43+
}
44+
45+
function showSidebar(osClass) {
46+
// Hide all of the menu items at first
47+
// Then filter for the selected OS
48+
49+
$(".get-started-locally-sidebar li")
50+
.hide()
51+
.filter(function() {
52+
return $(this)
53+
.attr("class")
54+
.includes(osClass);
55+
})
56+
.show();
57+
}
58+
59+
$(".get-started-locally-sidebar li").on("click", function() {
60+
removeActiveClass();
61+
addActiveClass(this);
62+
});
63+
64+
function removeActiveClass() {
65+
$(".get-started-locally-sidebar li a").each(function() {
66+
$(this).removeClass("active");
67+
});
68+
}
69+
70+
function addActiveClass(element) {
71+
$(element)
72+
.find("a")
73+
.addClass("active");
74+
}
75+
76+
if ($("#get-started-locally-sidebar-list").text() == "") {
77+
$("#get-started-shortcuts-menu").hide();
78+
}

0 commit comments

Comments
 (0)