Rewrite the Setting Up ExecuTorch doc

docs/source/_static/css/custom.css

@@ -10,7 +10,7 @@
 */
 :root {
     --sd-color-info: #ee4c2c;
-    --sd-color-primary: #6c6c6d;
+    --sd-color-primary: #f3f4f7;
     --sd-color-primary-highlight: #f3f4f7;
     --sd-color-card-border-hover: #ee4c2c;
     --sd-color-card-border: #f3f4f7;
@@ -76,3 +76,47 @@
 .sd-card:hover:after {
     transform: scaleX(1);
 }
+
+.card-prerequisites:hover {
+    transition: none;
+    border: none;
+}
+
+.card-prerequisites:hover:after {
+    transition: none;
+    transform: none;
+}
+
+.card-prerequisites:after {
+    display: block;
+    content: '';
+    border-bottom: none;
+    background-color: #fff;
+    transform: none;
+    transition: none;
+    transform-origin: none;
+}
+
+
+details.sd-dropdown {
+    font-weight: 300;
+    width: auto;
+}
+
+details.sd-dropdown:after {
+    border: none;
+    transition: none;
+}
+
+details.sd-dropdown:hover {
+    border: none;
+    transition: none;
+}
+
+details.sd-dropdown .sd-summary-content {
+    font-weight: 300;
+}
+
+details.sd-dropdown .highlight .n {
+    font-weight: normal;
+}

docs/source/_static/css/progress-bar.css

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.progress-bar-wrapper {
+  margin-top: auto;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  position: sticky;
+  top: 0;
+  background: white;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  z-index: 1000;
+}
+
+.progress-bar-item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+
+  @media (max-width: 768px) {
+     font-size: 12px;
+   }
+}
+
+.progress-bar-item::before {
+  position: absolute;
+  content: "";
+  border-bottom: 2px solid #ccc;
+  width: 100%;
+  top: 20px;
+  left: -50%;
+  z-index: 2;
+}
+
+.progress-bar-item::after {
+  position: absolute;
+  content: "";
+  border-bottom: 2px solid #ccc;
+  width: 100%;
+  top: 20px;
+  left: 50%;
+  z-index: 2;
+}
+
+.progress-bar-item .step-number {
+  position: relative;
+  z-index: 5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border-color: #812CE5;
+  border-style: solid;
+  border-width: 1px;
+  color: #812CE5;
+  background: #fff;
+  margin-bottom: 6px;
+}
+
+.progress-bar-item.active {
+  font-weight: bold;
+}
+
+.progress-bar-item.completed .step-number {
+  background-color: #812CE5;
+  color: white;
+}
+
+.progress-bar-item.completed::after {
+  position: absolute;
+  content: "";
+  border-bottom: 2px solid #812CE5;
+  width: 100%;
+  top: 20px;
+  left: 50%;
+  z-index: 3;
+}
+
+.progress-bar-item:first-child::before {
+  content: none;
+}
+
+.progress-bar-item:last-child::after {
+  content: none;
+}
+
+.progress-bar-item a:link {
+    color: #262626 !important;
+}
+
+.step-caption:first-child {
+    margin-left: 10px;
+}
+
+.step-caption {
+    text-align: center;
+}
+
+.step-caption a:link {
+    color: #262626 !important;
+}
+
+.step-caption a:hover {
+    color: #ee4c2c;
+    text-decoration: underline;
+}

docs/source/_static/js/progress-bar.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+document.addEventListener("DOMContentLoaded", function() {
+  const steps = Array.from(document.querySelectorAll('.progress-bar-item'));
+  const h2s = Array.from(document.querySelectorAll('h2'));
+
+  // Populate captions from h2s
+  h2s.forEach((h2, index) => {
+    const captionElem = document.getElementById(`caption-${index + 1}`);
+    if (captionElem) {
+      captionElem.innerText = h2.innerText;
+    }
+  });
+
+  // Throttle function to optimize performance
+  function throttle(func, delay) {
+    let lastCall = 0;
+    return function() {
+      const now = Date.now();
+      if (now - lastCall < delay) return;
+      lastCall = now;
+      func.apply(this, arguments);
+    }
+  }
+
+  document.addEventListener("scroll", throttle(function() {
+    let activeIndex = 0;
+    let closestDistance = Number.MAX_VALUE;
+
+    h2s.forEach((h2, index) => {
+      const rect = h2.getBoundingClientRect();
+      const distanceToTop = Math.abs(rect.top);
+      if (distanceToTop < closestDistance) {
+        closestDistance = distanceToTop;
+        activeIndex = index;
+      }
+    });
+
+    steps.forEach((step, index) => {
+        if (index < activeIndex) {
+          step.classList.remove('active');
+          step.classList.add('completed');
+        } else if (index === activeIndex) {
+          step.classList.add('active');
+          step.classList.remove('completed');
+        } else {
+          step.classList.remove('active', 'completed');
+        }
+      }
+    });
+  }, 100));
+});

docs/source/_templates/layout.html

@@ -1,5 +1,13 @@
 {% extends "!layout.html" %}
 
+{% block extrahead %}
+    {% if 'getting-started-setup' in pagename %}
+    <link rel="stylesheet" href="_static/css/progress-bar.css">
+    <script src="_static/js/progress-bar.js" defer></script>
+    {% endif %}
+    {{ super() }}
+{% endblock %}
+
 {% block sidebartitle %}
     {% include "searchbox.html" %}
 {% endblock %}
@@ -35,6 +43,6 @@
 {% block footer %}
 {{ super() }}
 <script script type="text/javascript">
-    var collapsedSections = ['Introduction', 'Getting Started', 'Exporting to ExecuTorch', 'Intermediate Representation (IR) Specification','Compiler Entry Points', 'Runtime', 'Quantization', 'Kernel Library', 'SDK', 'Tutorials']
+    var collapsedSections = ['Introduction', 'Getting Started', 'Exporting to ExecuTorch', 'IR Specification', 'Compiler Entry Points', 'Runtime', 'Quantization', 'Kernel Library', 'SDK', 'Tutorials']
 </script>
 {% endblock %}

docs/source/conf.py

@@ -123,8 +123,8 @@
 # so a file named "default.css" will overwrite the builtin "default.css".
 html_static_path = ["_static"]
 
-html_css_files = ["css/custom.css"]
-html_js_files = ["js/custom.js"]
+html_css_files = ["css/custom.css", "progress-bar.css"]
+html_js_files = ["js/progress-bar.js"]
 
 
 # Example configuration for intersphinx: refer to the Python standard library.