Skip to content

Commit 98eb3b1

Browse files
svekarsfacebook-github-bot
svekars
authored and
facebook-github-bot
committed
Rewrite the Setting Up ExecuTorch doc (#362)
Summary: - 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 - Deleted website/docs/tutorials/00_setting_up_executorch.md Reviewed By: mergennachin, dbort Differential Revision: D49291824
1 parent c19b58f commit 98eb3b1

File tree

12 files changed

+505
-10
lines changed

12 files changed

+505
-10
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ Compared to the legacy Lite Interpreter, there are some major benefits:
3737

3838
## Quick Links for Partners
3939

40-
- [Setting up ExecuTorch from GitHub](/docs/website/docs/tutorials/00_setting_up_executorch.md)
40+
- [Setting up ExecuTorch from GitHub](/docs/source/getting-started-setup.md)
4141
- (Optional) [Building with CMake](/docs/website/docs/tutorials/cmake_build_system.md)
4242
- [Exporting to ExecuTorch](/docs/website/docs/tutorials/exporting_to_executorch.md)
4343
- [EXIR Spec](/docs/website/docs/ir_spec/00_exir.md)

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

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
*/
1111
:root {
1212
--sd-color-info: #ee4c2c;
13-
--sd-color-primary: #6c6c6d;
13+
--sd-color-primary: #f3f4f7;
1414
--sd-color-primary-highlight: #f3f4f7;
1515
--sd-color-card-border-hover: #ee4c2c;
1616
--sd-color-card-border: #f3f4f7;
@@ -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: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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+
36+
h2s.forEach((h2, index) => {
37+
const rect = h2.getBoundingClientRect();
38+
const distanceToTop = Math.abs(rect.top);
39+
if (distanceToTop < closestDistance) {
40+
closestDistance = distanceToTop;
41+
activeIndex = index;
42+
}
43+
});
44+
45+
steps.forEach((step, index) => {
46+
if (index < activeIndex) {
47+
step.classList.remove('active');
48+
step.classList.add('completed');
49+
} else if (index === activeIndex) {
50+
step.classList.add('active');
51+
step.classList.remove('completed');
52+
} else {
53+
step.classList.remove('active', 'completed');
54+
}
55+
}
56+
});
57+
}, 100));
58+
});

‎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 & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,8 @@
119119
# so a file named "default.css" will overwrite the builtin "default.css".
120120
html_static_path = ["_static"]
121121

122-
html_css_files = ["css/custom.css"]
123-
html_js_files = ["js/custom.js"]
122+
html_css_files = ["css/custom.css", "progress-bar.css"]
123+
html_js_files = ["js/progress-bar.js"]
124124

125125

126126
# Example configuration for intersphinx: refer to the Python standard library.

0 commit comments

Comments
 (0)