Skip to content

Commit 63e0f76

Browse files
svekarsfacebook-github-bot
svekars
authored and
facebook-github-bot
committed
Rewrite the Setting Up ExecuTorch doc (#496)
Summary: Pull Request resolved: #496 Preview: https://deploy-preview-496--resplendent-gnome-14e531.netlify.app/getting-started-setup * Rewrote the 00_setting_up_executorch.md and included into Sphinx build * Added a JS progress bar to the top of the page for better UX * Added custom styles as needed * Added a deprecation notice to website/docs/tutorials/00_setting_up_executorch.md Reviewed By: dbort Differential Revision: D49655628 fbshipit-source-id: 03e0cafe3025f9aeee68e54748cb277b1b650854
1 parent e3ca619 commit 63e0f76

File tree

7 files changed

+506
-5
lines changed

7 files changed

+506
-5
lines changed

‎docs/source/_static/css/custom.css

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,47 @@
7676
.sd-card:hover:after {
7777
transform: scaleX(1);
7878
}
79+
80+
.card-prerequisites:hover {
81+
transition: none;
82+
border: none;
83+
}
84+
85+
.card-prerequisites:hover:after {
86+
transition: none;
87+
transform: none;
88+
}
89+
90+
.card-prerequisites:after {
91+
display: block;
92+
content: '';
93+
border-bottom: none;
94+
background-color: #fff;
95+
transform: none;
96+
transition: none;
97+
transform-origin: none;
98+
}
99+
100+
101+
details.sd-dropdown {
102+
font-weight: 300;
103+
width: auto;
104+
}
105+
106+
details.sd-dropdown:after {
107+
border: none;
108+
transition: none;
109+
}
110+
111+
details.sd-dropdown:hover {
112+
border: none;
113+
transition: none;
114+
}
115+
116+
details.sd-dropdown .sd-summary-content {
117+
font-weight: 300;
118+
}
119+
120+
details.sd-dropdown .highlight .n {
121+
font-weight: normal;
122+
}

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

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
.progress-bar-wrapper {
10+
margin-top: auto;
11+
display: flex;
12+
justify-content: space-between;
13+
margin-bottom: 20px;
14+
position: sticky;
15+
top: 0;
16+
background: white;
17+
padding-top: 20px;
18+
padding-bottom: 20px;
19+
z-index: 1000;
20+
}
21+
22+
.progress-bar-item {
23+
position: relative;
24+
display: flex;
25+
flex-direction: column;
26+
align-items: center;
27+
flex: 1;
28+
29+
@media (max-width: 768px) {
30+
font-size: 12px;
31+
}
32+
}
33+
34+
.progress-bar-item::before {
35+
position: absolute;
36+
content: "";
37+
border-bottom: 2px solid #ccc;
38+
width: 100%;
39+
top: 20px;
40+
left: -50%;
41+
z-index: 2;
42+
}
43+
44+
.progress-bar-item::after {
45+
position: absolute;
46+
content: "";
47+
border-bottom: 2px solid #ccc;
48+
width: 100%;
49+
top: 20px;
50+
left: 50%;
51+
z-index: 2;
52+
}
53+
54+
.progress-bar-item .step-number {
55+
position: relative;
56+
z-index: 5;
57+
display: flex;
58+
justify-content: center;
59+
align-items: center;
60+
width: 40px;
61+
height: 40px;
62+
border-radius: 50%;
63+
border-color: #812CE5;
64+
border-style: solid;
65+
border-width: 1px;
66+
color: #812CE5;
67+
background: #fff;
68+
margin-bottom: 6px;
69+
}
70+
71+
.progress-bar-item.active {
72+
font-weight: bold;
73+
}
74+
75+
.progress-bar-item.completed .step-number {
76+
background-color: #812CE5;
77+
color: white;
78+
}
79+
80+
.progress-bar-item.completed::after {
81+
position: absolute;
82+
content: "";
83+
border-bottom: 2px solid #812CE5;
84+
width: 100%;
85+
top: 20px;
86+
left: 50%;
87+
z-index: 3;
88+
}
89+
90+
.progress-bar-item:first-child::before {
91+
content: none;
92+
}
93+
94+
.progress-bar-item:last-child::after {
95+
content: none;
96+
}
97+
98+
.progress-bar-item a:link {
99+
color: #262626 !important;
100+
}
101+
102+
.step-caption:first-child {
103+
margin-left: 10px;
104+
}
105+
106+
.step-caption {
107+
text-align: center;
108+
}
109+
110+
.step-caption a:link {
111+
color: #262626 !important;
112+
}
113+
114+
.step-caption a:hover {
115+
color: #ee4c2c;
116+
text-decoration: underline;
117+
}

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the BSD-style license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
document.addEventListener("DOMContentLoaded", function() {
10+
const steps = Array.from(document.querySelectorAll('.progress-bar-item'));
11+
const h2s = Array.from(document.querySelectorAll('h2'));
12+
13+
// Populate captions from h2s
14+
h2s.forEach((h2, index) => {
15+
const captionElem = document.getElementById(`caption-${index + 1}`);
16+
if (captionElem) {
17+
captionElem.innerText = h2.innerText;
18+
}
19+
});
20+
21+
// Throttle function to optimize performance
22+
function throttle(func, delay) {
23+
let lastCall = 0;
24+
return function() {
25+
const now = Date.now();
26+
if (now - lastCall < delay) return;
27+
lastCall = now;
28+
func.apply(this, arguments);
29+
}
30+
}
31+
32+
document.addEventListener("scroll", throttle(function() {
33+
let activeIndex = 0;
34+
let closestDistance = Number.MAX_VALUE;
35+
const totalHeight = document.documentElement.scrollHeight;
36+
const viewportHeight = window.innerHeight;
37+
const scrollBottom = window.scrollY + viewportHeight;
38+
const isAtBottom = totalHeight === scrollBottom;
39+
40+
h2s.forEach((h2, index) => {
41+
const rect = h2.getBoundingClientRect();
42+
const distanceToTop = Math.abs(rect.top);
43+
if (distanceToTop < closestDistance) {
44+
closestDistance = distanceToTop;
45+
activeIndex = index;
46+
}
47+
});
48+
49+
steps.forEach((step, index) => {
50+
if (isAtBottom) {
51+
step.classList.remove('active');
52+
step.classList.add('completed');
53+
} else {
54+
if (index < activeIndex) {
55+
step.classList.remove('active');
56+
step.classList.add('completed');
57+
} else if (index === activeIndex) {
58+
step.classList.add('active');
59+
step.classList.remove('completed');
60+
} else {
61+
step.classList.remove('active', 'completed');
62+
}
63+
}
64+
});
65+
}, 100));
66+
});

‎docs/source/_templates/layout.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
{% extends "!layout.html" %}
22

3+
{% block extrahead %}
4+
{% if 'getting-started-setup' in pagename %}
5+
<link rel="stylesheet" href="_static/css/progress-bar.css">
6+
<script src="_static/js/progress-bar.js" defer></script>
7+
{% endif %}
8+
{{ super() }}
9+
{% endblock %}
10+
311
{% block sidebartitle %}
412
{% include "searchbox.html" %}
513
{% endblock %}
@@ -35,6 +43,6 @@
3543
{% block footer %}
3644
{{ super() }}
3745
<script script type="text/javascript">
38-
var collapsedSections = ['Introduction', 'Getting Started', 'Exporting to ExecuTorch', 'Intermediate Representation (IR) Specification','Compiler Entry Points', 'Runtime', 'Quantization', 'Kernel Library', 'SDK', 'Tutorials']
46+
var collapsedSections = ['Introduction', 'Getting Started', 'Exporting to ExecuTorch', 'IR Specification', 'Compiler Entry Points', 'Runtime', 'Quantization', 'Kernel Library', 'SDK', 'Tutorials']
3947
</script>
4048
{% endblock %}

‎docs/source/conf.py

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,8 @@
123123
# so a file named "default.css" will overwrite the builtin "default.css".
124124
html_static_path = ["_static"]
125125

126-
html_css_files = ["css/custom.css"]
127-
html_js_files = ["js/custom.js"]
128-
126+
html_css_files = ["css/custom.css", "progress-bar.css"]
127+
html_js_files = ["js/progress-bar.js"]
129128

130129
# Example configuration for intersphinx: refer to the Python standard library.
131130
intersphinx_mapping = {

0 commit comments

Comments
 (0)