pytorch · brucejlin1 · Sep 26, 2019 · Sep 11, 2019
diff --git a/_config.yml b/_config.yml
@@ -59,6 +59,8 @@ collections:
     output: false
   courses:
     output: false
+  mobile:
+    output: true
 
 pagination:
   enabled: true

diff --git a/_features/mobile.md b/_features/mobile.md
@@ -0,0 +1,12 @@
+---
+title: Mobile
+order: 3
+snippet: >
+  ```python
+    print('Hello World!')
+  ```
+
+summary-home: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+featured-home: true
+
+---
diff --git a/_features/python-first.md b/_features/python-first.md
diff --git a/_get_started/get-started-locally.md b/_get_started/get-started-locally.md
@@ -54,10 +54,6 @@ published: true
   <div class="os windows">{{ windows | markdownify }}</div>
 </div>
 
-<script type="text/javascript">
-  var pageId = "get-started-locally"; // TBD: Make this programmatic
-  $(".main-content-menu .nav-item").removeClass("nav-select");
-  $(".main-content-menu .nav-link[data-id='" + pageId + "']").parent(".nav-item").addClass("nav-select");
-</script>
+<script page-id="get-started-locally" src="{{ site.baseurl }}/assets/menu-tab-selection.js"></script>
 <script src="{{ site.baseurl }}/assets/quick-start-module.js"></script>
-<script src="{{ site.baseurl }}/assets/show-screencast.js"></script>
+<script src="{{ site.baseurl }}/assets/show-screencast.js"></script>
diff --git a/_get_started/get-started-via-cloud-partners.md b/_get_started/get-started-via-cloud-partners.md
@@ -50,10 +50,6 @@ published: true
   <div class="platform microsoft-azure">{{azure | markdownify }}</div>
 </div>
 
-<script type="text/javascript">
-  var pageId = "get-started-via-cloud-partners"; // TBD: Make this programmatic
-  $(".main-content-menu .nav-item").removeClass("nav-select");
-  $(".main-content-menu .nav-link[data-id='" + pageId + "']").parent(".nav-item").addClass("nav-select");
-</script>
+<script page-id="get-started-via-cloud-partners" src="{{ site.baseurl }}/assets/menu-tab-selection.js"></script>
 <script src="{{ site.baseurl }}/assets/quick-start-module.js"></script>
-<script src="{{ site.baseurl }}/assets/show-screencast.js"></script>
+<script src="{{ site.baseurl }}/assets/show-screencast.js"></script>
diff --git a/_get_started/get-started-via-colab.md b/_get_started/get-started-via-colab.md
@@ -42,11 +42,6 @@ print()
 
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
-
-<script type="text/javascript">
-  var pageId = "get-started-via-colab"; // TBD: Make this programmatic
-  $(".main-content-menu .nav-item").removeClass("nav-select");
-  $(".main-content-menu .nav-link[data-id='" + pageId + "']").parent(".nav-item").addClass("nav-select");
-</script>
+<script page-id="get-started-via-colab" src="{{ site.baseurl }}/assets/menu-tab-selection.js"></script>
 <script src="{{ site.baseurl }}/assets/quick-start-module.js"></script>
-<script src="{{ site.baseurl }}/assets/show-screencast.js"></script>
+<script src="{{ site.baseurl }}/assets/show-screencast.js"></script>
diff --git a/_get_started/mobile.md b/_get_started/mobile.md
@@ -0,0 +1,13 @@
+---
+layout: get_started
+title: Mobile
+permalink: /get-started/mobile/
+background-class: get-started-background
+body-class: get-started
+order: 5
+published: true
+---
+
+## Mobile
+
+<script page-id="mobile" src="{{ site.baseurl }}/assets/menu-tab-selection.js"></script>
diff --git a/_get_started/previous-versions.md b/_get_started/previous-versions.md
@@ -227,10 +227,6 @@ e.g.,
 - [torch_cuda80-0.1.6.post17-cp35-cp35m-linux_x86_64.whl](https://download.pytorch.org/whl/torch_cuda80-0.1.6.post17-cp35-cp35m-linux_x86_64.whl)
 - [torch_cuda80-0.1.6.post17-cp27-cp27mu-linux_x86_64.whl](https://download.pytorch.org/whl/torch_cuda80-0.1.6.post17-cp27-cp27mu-linux_x86_64.whl)
 
-<script type="text/javascript">
-  var pageId = "previous-versions"; // TBD: Make this programmatic
-  $(".main-content-menu .nav-item").removeClass("nav-select");
-  $(".main-content-menu .nav-link[data-id='" + pageId + "']").parent(".nav-item").addClass("nav-select");
-</script>
+<script page-id="previous-versions" src="{{ site.baseurl }}/assets/menu-tab-selection.js"></script>
 <script src="{{ site.baseurl }}/assets/quick-start-module.js"></script>
 <script src="{{ site.baseurl }}/assets/show-screencast.js"></script>
diff --git a/_includes/footer_scripts.html b/_includes/footer_scripts.html
@@ -15,7 +15,7 @@
 
   scrollToAnchor.bind();
 
-  var hasStaticHeader = $(".blog-header, .blog-detail-header, .resources-header, .get-started-header, .features-header, .ecosystem-header, .hub-header").length > 0;
+  var hasStaticHeader = $(".blog-header, .blog-detail-header, .resources-header, .get-started-header, .features-header, .ecosystem-header, .hub-header, .mobile-header").length > 0;
 
   if (!hasStaticHeader) {
     $(window).on("scroll", function() {

diff --git a/_includes/main_menu.html b/_includes/main_menu.html
@@ -4,29 +4,29 @@
       <a href="{{ site.baseurl }}/get-started">Get Started</a>
     </li>
 
-    <li class="main-menu-item {% if current[1] == 'features' %}active{% endif %}">
-      <a href="{{ site.baseurl }}/features">Features</a>
-    </li>
-
     <li class="main-menu-item {% if current[1] == 'ecosystem' or current[1] == 'hub' %}active{% endif %}">
 
       <div class="ecosystem-dropdown">
         <a id="dropdownMenuButton" data-toggle="ecosystem-dropdown">
           Ecosystem
         </a>
         <div class="ecosystem-dropdown-menu">
-          <a class="ecosystem-dropdown-item" href="{{ site.baseurl }}/hub">
+          <a class="nav-dropdown-item" href="{{ site.baseurl }}/hub">
             <span class=dropdown-title>Models (Beta)</span>
             <p>Discover, publish, and reuse pre-trained models</p>
           </a>
-          <a class="ecosystem-dropdown-item" href="{{ site.baseurl }}/ecosystem">
+          <a class="nav-dropdown-item" href="{{ site.baseurl }}/ecosystem">
             <span class=dropdown-title>Tools & Libraries</span>
             <p>Explore the ecosystem of tools and libraries</p>
           </a>
         </div>
       </div>
     </li>
 
+    <li class="main-menu-item {% if current[1] == 'mobile' %}active{% endif %}">
+      <a href="{{ site.baseurl }}/mobile">Mobile</a>
+    </li>
+
     <li class="main-menu-item {% if current[1] == 'blog' %}active{% endif %}">
       <a href="{{ site.baseurl }}/blog">Blog</a>
     </li>
@@ -39,8 +39,23 @@
       <a href="{{ site.baseurl }}/docs">Docs</a>
     </li>
 
-    <li class="main-menu-item {% if current[1] == 'resources' %}active{% endif %}">
-      <a href="{{ site.baseurl }}/resources">Resources</a>
+    <li class="main-menu-item {% if current[1] == 'resources' or current[1] == 'features' %}active{% endif %}">
+
+      <div class="resources-dropdown">
+        <a id="resourcesDropdownButton" data-toggle="resources-dropdown">
+          Resources
+        </a>
+        <div class="resources-dropdown-menu">
+          <a class="nav-dropdown-item" href="{{ site.baseurl }}/resources">
+            <span class=dropdown-title>Developer Resources</span>
+            <p>Find resources and get questions answered</p>
+          </a>
+          <a class="nav-dropdown-item" href="{{ site.baseurl }}/features">
+            <span class=dropdown-title>About</span>
+            <p>Learn about PyTorch’s features and capabilities</p>
+          </a>
+        </div>
+      </div>
     </li>
 
     <li class="main-menu-item">
@@ -61,16 +76,4 @@
   </ul>
 </div>
 
-<script>
-  var menu = ".ecosystem-dropdown-menu";
-  var showMenuClass = "show-menu";
-
-$("[data-toggle='ecosystem-dropdown']").on("click", function(e) {
-  if ($(menu).hasClass(showMenuClass)) {
-    $(menu).removeClass(showMenuClass);
-  } else {
-    $("[data-toggle='ecosystem-dropdown'].show-menu").removeClass(showMenuClass);
-    $(menu).addClass(showMenuClass);
-  }
-});
-</script>
+<script src="{{ site.baseurl }}/assets/main-menu-dropdown.js"></script>
diff --git a/_includes/mobile_menu.html b/_includes/mobile_menu.html
@@ -35,6 +35,10 @@
           <a href="{{ site.baseurl }}/ecosystem">Ecosystem</a>
         </li>
 
+        <li class="{% if current[1] == 'mobile' %}active{% endif %}">
+          <a href="{{ site.baseurl }}/mobile">Mobile</a>
+        </li>
+
         <li class="{% if current[1] == 'hub' %}active{% endif %}">
           <a href="{{ site.baseurl }}/hub">PyTorch Hub</a>
         </li>

diff --git a/_includes/mobile_page_side_nav.html b/_includes/mobile_page_side_nav.html
@@ -0,0 +1,5 @@
+<div class="sticky-top mobile-page-sidebar">
+  <p>Shortcuts</p>
+  <ul id="mobile-page-sidebar-list"></ul>
+</div>
+
diff --git a/_layouts/mobile.html b/_layouts/mobile.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include head.html %}
+  <body class="{{ page.body-class }}">
+    {% include header.html %}
+
+    <div class="main-background {{ page.background-class }}"></div>
+
+    {% assign mobile_items = site.mobile | where: "published",true | sort: "order" %}
+
+    <div class="jumbotron jumbotron-fluid on-dark-background">
+      <div class="container">
+        <h1>PyTorch Mobile</h1>
+
+        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+      </div>
+    </div>
+
+    <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 mobile_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>
+
+        <div class="container">
+          <div class="row">
+            <div class="col-md-3">
+              {% include mobile_page_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>
+        </div>
+      </div>
+    </div>
+
+    {% include footer.html %}
+  </body>
+</html>
+
+<script src="{{ site.baseurl }}/assets/mobile-page-sidebar.js"></script>
diff --git a/_mobile/android.md b/_mobile/android.md
@@ -0,0 +1,20 @@
+---
+layout: mobile
+title: Android
+permalink: /mobile/android/
+background-class: mobile-background
+body-class: mobile
+order: 3
+published: true
+---
+
+# Android
+
+{% highlight python %}
+
+  #!/usr/bin/python3
+  print('Hello World!')
+
+{% endhighlight %}
+
+<script page-id="android" src="{{ site.baseurl }}/assets/menu-tab-selection.js"></script>
diff --git a/_mobile/home.md b/_mobile/home.md
@@ -0,0 +1,48 @@
+---
+layout: mobile
+title: Home
+permalink: /mobile/home/
+background-class: mobile-background
+body-class: mobile
+order: 1
+published: true
+---
+
+# Home
+
+## Lorem Ipsum
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
+
+Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
+
+## Binaries
+
+Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
+
+## Build Scripts
+
+Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
+
+Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
+
+## Objective C Walkthrough Cocopods Walkthrough Tutorials
+
+Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu placerat odio, nec tristique sem. Ut sed vehicula tellus. Morbi facilisis rutrum quam. Suspendisse quis lacus finibus, lobortis justo in, aliquet velit. Vestibulum ultrices dignissim felis, in fermentum mauris ullamcorper molestie. Quisque faucibus ac enim eu dignissim. Nullam sit amet nibh eleifend, semper nisi et, scelerisque ex. Integer a mauris diam.
+
+## How To
+
+Morbi luctus, metus non porttitor vestibulum, arcu dui rhoncus velit, sollicitudin efficitur augue augue ac neque. Vestibulum at nisl nec velit fermentum tristique. Sed pharetra sit amet justo vitae mattis. Sed dolor elit, rhoncus in eleifend convallis, facilisis vel mauris. Morbi mattis metus enim, in fermentum ipsum malesuada vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+## Dolor Sit Amet
+
+Aliquam quis lobortis felis. Nunc dignissim ipsum ante, nec finibus quam facilisis maximus. Donec fermentum consectetur elementum. Quisque ac maximus ex. Nunc rutrum orci sed felis viverra cursus.
+
+<script page-id="home" src="{{ site.baseurl }}/assets/menu-tab-selection.js"></script>