Skip to content
This repository has been archived by the owner on Nov 17, 2023. It is now read-only.

[Website 2.0] General Version Dropdown #17948

Merged
merged 33 commits into from
Apr 9, 2020
Merged

[Website 2.0] General Version Dropdown #17948

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
cee4319
Added instructions for pulling & decompressing artifacts for static d…
connorgoggins Mar 18, 2020
7ca2ea2
Added master dropdown to header HTML
connorgoggins Mar 20, 2020
199b642
Added CSS content to style master dropdown
connorgoggins Mar 20, 2020
6d81012
Using full path for wget for Jenkins
connorgoggins Mar 20, 2020
da51752
Added install command for wget
connorgoggins Mar 20, 2020
f80a04a
Using sudo w/apt
connorgoggins Mar 20, 2020
2007cd2
Switching to git clone to satisfy Jenkins
connorgoggins Mar 23, 2020
12768ce
Added step to archive artifacts
connorgoggins Mar 23, 2020
afd89dd
Reverting Jekyll Jenkinsfile
connorgoggins Mar 23, 2020
e1706d5
Switching to non-restricted nodes for dev Jenkins build
connorgoggins Mar 23, 2020
43aab2e
Final restricted change
connorgoggins Mar 23, 2020
5f4bc4d
Fixed styling for dropdown
connorgoggins Mar 23, 2020
8fc1cb8
Adding dropdown to Python docs header
connorgoggins Mar 23, 2020
355e837
Adding CSS for Python docs header version dropdown
connorgoggins Mar 23, 2020
450b2a9
Fixed text alignment for hamburger menu
connorgoggins Mar 23, 2020
93814b6
Trying to get styling working for Python docs api dropdown
connorgoggins Mar 24, 2020
2d78232
Trying to add css at _root
connorgoggins Mar 24, 2020
40524fd
Trying to add styling to fonts, added inline styling
connorgoggins Mar 24, 2020
eac354f
Trying style tags in layout
connorgoggins Mar 24, 2020
0890b52
Changed font weight
connorgoggins Mar 24, 2020
6bb717e
Added missing semicolon in inline styling
connorgoggins Mar 24, 2020
e64e3b9
Switched header to be consistent with older versions
connorgoggins Mar 25, 2020
9432f41
Changed header in master
connorgoggins Mar 25, 2020
fb59212
Switching hrefs to point to HTML files
connorgoggins Mar 27, 2020
9b69be0
Added 1.6 link to master
connorgoggins Mar 31, 2020
3aabc7e
Dropping unnecessary changes
connorgoggins Mar 31, 2020
fdf6e5e
Revert _root.scss
connorgoggins Mar 31, 2020
5431ce0
Fixed routing bug
connorgoggins Mar 31, 2020
b190a2e
Reverting Jenkinsfile_website_full for PR
connorgoggins Apr 1, 2020
229c676
Switching from git clone to wget on S3
connorgoggins Apr 2, 2020
e954894
Adding relevant build dependencies, fixing ruby version for Jekyll
connorgoggins Apr 2, 2020
371094d
Added caret for dropdown
connorgoggins Apr 2, 2020
57a7a53
Consolidating CSS into one file for general, one for Python API
connorgoggins Apr 3, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions ci/docker/Dockerfile.build.ubuntu_cpu_jekyll
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,9 @@ RUN apt-get update && apt-get install -y \
git \
zlib1g-dev \
gnupg2 \
curl
curl \
wget \
unzip

# Always last, except here to prevent conflicts with rvm
ARG USER_ID=0
Expand All @@ -43,7 +45,7 @@ RUN curl -sSL https://rvm.io/mpapis.asc | gpg2 --import - && \

RUN source /etc/profile.d/rvm.sh && \
rvm requirements && \
rvm install 2.6 && \
rvm install 2.6.3 && \
rvm use 2.6.3 --default

ENV BUNDLE_HOME=/work/deps/bundle
Expand Down
17 changes: 17 additions & 0 deletions docs/python_docs/themes/mx-theme/mxtheme/header_top.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,23 @@
<a class="page-link" href="{{theme_relative_url}}ecosystem">Ecosystem</a>
<a class="page-link page-current" href="{{theme_relative_url}}api">Docs & Tutorials</a>
<a class="page-link" href="https://github.com/apache/incubator-mxnet">GitHub</a>
<div class="dropdown">
<span class="dropdown-header">master
<svg class="dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true"><path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path></svg>
</span>
<div class="dropdown-content">
<a class="dropdown-option-active" href="/">master</a><br>
<a class="dropdown-option" href="/versions/1.6/">1.6</a><br>
<a class="dropdown-option" href="/versions/1.5.0/">1.5.0</a><br>
<a class="dropdown-option" href="/versions/1.4.1/">1.4.1</a><br>
<a class="dropdown-option" href="/versions/1.3.1/">1.3.1</a><br>
<a class="dropdown-option" href="/versions/1.2.1/">1.2.1</a><br>
<a class="dropdown-option" href="/versions/1.1.0/">1.1.0</a><br>
<a class="dropdown-option" href="/versions/1.0.0/">1.0.0</a><br>
<a class="dropdown-option" href="/versions/0.12.1/">0.12.1</a><br>
<a class="dropdown-option" href="/versions/0.11.0/">0.11.0</a>
</div>
</div>
</div>
</nav>
</div>
Expand Down
48 changes: 48 additions & 0 deletions docs/python_docs/themes/mx-theme/mxtheme/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,54 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<style>
.dropdown {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you make sure all of the style stuff is documented - so we know what it does and how it interacts with all of the other pieces? Like how does this interact with this?
https://github.com/apache/incubator-mxnet/blob/master/docs/python_docs/_static/mxnet.css

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I'll create a document/wiki page with styling info once the design is finalized.

position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
text-align: left;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown-option:hover {
color: #FF4500;
}

.dropdown-option-active {
color: #FF4500;
font-weight: lighter;
}

.dropdown-option {
color: #000000;
font-weight: lighter;
}

.dropdown-header {
color: #FFFFFF;
display: inline-flex;
}

.dropdown-caret {
width: 18px;
}

.dropdown-caret-path {
fill: #FFFFFF;
}
</style>
{{ super() }}
{% endblock %}

Expand Down
2 changes: 1 addition & 1 deletion docs/static_site/Makefile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ all: html
html:
mkdir -p build
cd src && bundle install && JEKYLL_ENV=production bundle exec jekyll build --config _config_prod.yml -d ../build/html && cd ..

wget https://mxnet-static-artifacts.s3.amazonaws.com/versions.zip && unzip versions.zip -d build/html && rm -rf build/html/__MACOSX && rm versions.zip
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where does that come from? It seems like we're breaking out of a context here. S3 should not be the method how multiple Jenkins jobs exchange data

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your question, @marcoabreu. The content for the static artifacts is managed in this repository. Originally this line was a call to directly clone the repository, but based on feedback it was decided that it would be better to not rely on external repositories and pull the artifacts from an S3 bucket instead.

Here, S3 isn't being used as the way multiple Jenkins jobs exchange data per se. There are many older static artifacts in the ZIP that have gone through multiple rounds of changes which are tracked in the aforementioned repository, rather than simply being built by another Jenkins pipeline.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's an idea: add this to the Dockerfile so that it gets cached as part of the image and we don't have to grab that zip every time there's a test or build.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

But how would you invalidate that cache?

I think it's important to have continuity to allow a contributor to understand and also reproduce how our website gets created. As it stands right now, people would not be able to facilitate this.

What happened to the idea with the Jenkins jobs creating artifacts and another job consuming these artifacts to then assemble the website?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed, this is a static artifact that can't be directly updated by the community. For a complete solution, we definitely need them to be generated.

On the other hand, the lack of website versioning is such a pressing issue that it has come up multiple times, even in past release votes, and is still actively causing confusion for many current and prospective users. We must be losing user base because of this.

If the contributors could come up with a plan for a solution that's based on automatically generated content, and execute the plan before any of our next releases, I think we should accept this solution for now to address the immediate need for avoiding confusion.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that @connorgoggins is already contributing other PRs in this direction (#17956 #17957), I trust that the contributor has the intention to make the generation automated. @connorgoggins @sandeep-krishnamurthy contingent on if you could spell out a plan for automated generation for the website, I support accepting this patch.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed @szha. The priority right now should be getting the working version dropdown in this PR into the production site as soon as possible.

@marcoabreu, I have created a confluence page so that all contributors can understand and reproduce the steps to add additional releases to the website. In the future, we will move towards creating dynamic pipelines to automatically generate and integrate new releases of MXNet into the website, but for now I believe the static artifact solution + master integration in this PR serves its purpose.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@marcoabreu Thanks for your feedback and I fully agree that if generation of web content happens through Jenkins in an automated way, all community members can participate in the updates. In that direction, @connorgoggins already has PRs to make 1.x and 2.x branches auto builds. The fix here is very critical for MXNet community. Without this change, users are unable to use MXNet website. One concern would be if there is a patch release on 1.6.x then someone needs to regenerate static artifacts. Given that @connorgoggins already documented steps for the same and his other contributions I see this as a non-blocking issue that will not leave MXNet community in limbo.
What do you think?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good to me. Thanks


clean:
rm -rf build
39 changes: 39 additions & 0 deletions docs/static_site/src/_includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,43 @@

<script src="{{'/assets/js/clipboard.js'|relative_url}}"></script>
<script src="{{'/assets/js/copycode.js'|relative_url}}"></script>
<style>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicated in layout.html. Should be abstracted to a single source so it's easier to manage.

.dropdown-option-active {
color: #FF4500 !important;
font-weight: lighter;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
text-align: left;
}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown-header {
color: #FFFFFF;
display: inline-flex;
}

.dropdown-caret {
width: 18px;
}

.dropdown-caret-path {
fill: #FFFFFF;
}
</style>
</head>
17 changes: 17 additions & 0 deletions docs/static_site/src/_includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,23 @@
<a class="page-link" href="{{'/ecosystem' | relative_url }}">Ecosystem</a>
<a class="page-link" href="{{'/api' | relative_url }}">Docs & Tutorials</a>
<a class="page-link" href="https://github.com/apache/incubator-mxnet">GitHub</a>
<div class="dropdown">
<span class="dropdown-header">master
<svg class="dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true"><path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path></svg>
</span>
<div class="dropdown-content">
<a class="dropdown-option-active" href="/">master</a>
<a href="/versions/1.6/">1.6</a>
<a href="/versions/1.5.0/">1.5.0</a>
<a href="/versions/1.4.1/">1.4.1</a>
<a href="/versions/1.3.1/">1.3.1</a>
<a href="/versions/1.2.1/">1.2.1</a>
<a href="/versions/1.1.0/">1.1.0</a>
<a href="/versions/1.0.0/">1.0.0</a>
<a href="/versions/0.12.1/">0.12.1</a>
<a href="/versions/0.11.0/">0.11.0</a>
</div>
</div>
</div>
</nav>
</div>
Expand Down