Prettify docs (#4500)

docs/en_US/nnSpider/cut.rst

+:orphan:
+
+
+.. raw:: html
+
+    <h2>Cut</h2>
+    <div class="details-container">
+        <img src="../_static/img/Cut.png" alt="Cut" />
+    </div>

docs/en_US/nnSpider/errorEmotion.rst

+:orphan:
+
+
+.. raw:: html
+
+    <h2>Error</h2>
+    <div class="details-container">
+        <img src="../_static/img/Error.png" alt="Error" />
+    </div>

docs/en_US/nnSpider/holiday.rst

+:orphan:
+
+
+.. raw:: html
+
+    <h2>Holiday</h2>
+    <div class="details-container">
+        <img src="../_static/img/Holiday.png" alt="NoBug" />
+    </div>

docs/en_US/nnSpider/nobug.rst

+:orphan:
+
+
+.. raw:: html
+
+    <h2>NoBug</h2>
+    <div class="details-container">
+        <img src="../_static/img/NoBug.png" alt="NoBug" />
+    </div>

docs/en_US/nnSpider/sign.rst

+:orphan:
+
+
+.. raw:: html
+
+    <h2>Sign</h2>
+    <div class="details-container">
+        <img src="../_static/img/Sign.png" alt="Sign" />
+    </div>

docs/en_US/nnSpider/sweat.rst

+:orphan:
+
+
+.. raw:: html
+
+    <h2>Sweat</h2>
+    <div class="details-container">
+        <img src="../_static/img/Sweat.png" alt="Sweat" />
+    </div>

docs/en_US/nnSpider/weaving.rst

+:orphan:
+
+
+.. raw:: html
+
+    <h2>Weaving</h2>
+    <div class="details-container">
+        <img src="../_static/img/Weaving.png" alt="Weaving" />
+    </div>

docs/en_US/nnSpider/working.rst

+:orphan:
+
+
+.. raw:: html
+
+    <h2>Working</h2>
+    <div class="details-container">
+        <img src="../_static/img/Working.png" alt="Working" />
+    </div>

docs/img/nni_icon.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 84">
+  <polygon fill="#ffffff" points="0,84 12,84 34,18 56,84 68,84 87,27 75,27 62,66 40,0 28,0 0,84"/>
+  <polygon fill="#ffffff" points="94,84 106,84 125,27 113,27 100,66 90,36 84,54 94,84"/>
+  <polygon fill="#ffffff" points="122,0 128,18 140,18 134,0 122,0"/>
+  <polygon fill="#ffffff" points="131,27 150,84 162,84 143,27 131,27"/>
+</svg>

docs/requirements.txt

@@ -28,3 +28,4 @@ https://download.pytorch.org/whl/cpu/torch-1.7.1%2Bcpu-cp37-cp37m-linux_x86_64.w
 https://download.pytorch.org/whl/cpu/torchvision-0.8.2%2Bcpu-cp37-cp37m-linux_x86_64.whl
 pytorch-lightning
 onnx
+git+https://github.com/bashtage/sphinx-material.git

docs/static/css/custom.css → docs/static/css/index_page.css

-.wy-table-responsive table td, .wy-table-responsive table th{
-    white-space:normal
+/* The following are for index.html */
+
+.wy-table-responsive table td, .wy-table-responsive table th {
+    white-space: normal
 }
 
-.gap{
-    margin-top: 24px; 
+.gap {
+    margin-top: 24px;
 }
 
-.gap2{
-    margin-top: 12px; 
+.gap2 {
+    margin-top: 12px;
 }
 
-.rowHeight{
+.rowHeight {
     line-height: 24px;
 }
 
@@ -19,9 +21,10 @@
     border-bottom: 1px solid #ccc;
 }
 
-.second-title{
+.second-title {
     margin-top: 24px;
 }
+
 /* command style */
 .command {
     background-color: #f8f8f8;
@@ -32,73 +35,73 @@
     padding-left: 10px;
 }
 
-.command-intro {
-    line-height: 48px;
-}
-
-.code{
+.main-code {
     background-color: #f8f8f8;
     padding: 15px 20px;
 }
 
+.command-intro {
+    line-height: 48px;
+}
+
 /* document body width */
-.wy-nav-content{
+.wy-nav-content {
     max-width: 100% !important;
     background-color: #fff;
 }
 
 /* nni logo bgcolor */
-.wy-side-nav-search{
+.wy-side-nav-search {
     background-color: black;
 }
 
 /* document body font-family */
-.wy-body-for-nav, h1, h2, h3, h4, h5, h6, div, p, ul, li, a{
-    font-family: "Lato", segoe ui, "proxima-nova","Helvetica Neue",Arial,sans-serif;
-}
 
-.wy-nav-content ul li{
+.wy-nav-content ul li {
     list-style: disc;
     margin-bottom: 12px;
     margin-left: 24px;
 }
 
-.list, .list tr, .list td{
+.main-table, .main-table tr, .main-table td {
     border: 1px solid #ccc;
 }
 
-.column b{
+.column b {
     padding-bottom: 4px;
     border-bottom: 2px solid blue;
 }
-.column td{
+
+.column td {
     width: 200px;
     text-align: center;
     line-height: 36px;
 }
-td.framework{
-    width:300px;
+
+td.framework {
+    width: 300px;
     -webkit-width: 220px;
 }
-.list .circle li{
+
+.main-table .circle li {
     list-style-type: circle;
 }
 
-.list .firstUl, .circle{
+.main-table .firstUl, .circle {
     padding-left: 20px;
 }
 
-.list .verticalMiddle{
+.main-table .verticalMiddle {
     vertical-align: middle !important;
     text-align: center;
 }
 
-.inline img, .inline h2{
+.inline img, .inline h2 {
     display: inline-block;
     margin-bottom: 0px;
 }
 
-inline hr{
+.inline hr {
     margin-top: 0px;
 }
 
@@ -106,28 +109,28 @@ inline hr{
     margin-top: -20px;
 }
 
-.ui-img img{
+.ui-img img {
     height: 350px;
 }
 
-.wy-side-nav-search>div.version{
-    color: #fff !important;
+.wy-side-nav-search>div.version {
+    color: #fff !important;
 }
 
-.list{
+.main-table {
     width: 90%;
     margin: 0 auto;
 }
 
-.chinese{
+.chinese {
     margin-bottom: 16px;
 }
 
-.QR{
+.QR {
     width: 180px;
 }
 
-.or{
+.or {
     vertical-align: middle;
 }
 
@@ -146,23 +149,23 @@ inline hr{
     list-style: none;
 }
 
-.emotion li div{
+.emotion li div {
     transition: 0.2s;
     text-align: center;
     vertical-align: middle;
 }
 
-.emotion li div:hover{
+.emotion li div:hover {
     transform: translate(1.1);
     box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
 }
 
-.center{
+.center {
     line-height: 54px;
     text-align: center;
 }
 
-.emotion img{
+.emotion img {
     width: 250px;
 }
 
@@ -170,47 +173,47 @@ inline hr{
     margin: 50px 24px;
 }
 
-.emotion .second .working{
+.emotion .second .working {
     margin: 67px 24px;
 }
 
-.emotion .second .sign{
+.emotion .second .sign {
     margin: 77px 24px;
 }
 
-.emotion .second .crying{
+.emotion .second .crying {
     margin: 80px 24px;
 }
 
-.emotion .three img{
+.emotion .three img {
     margin: 66px 24px;
 }
 
-.emotion .three .weaving{
+.emotion .three .weaving {
     margin: 75px 24px;
 }
 
-.three .comfort img{
+.three .comfort img {
     margin: 92px 24px;
 }
 
-.emotion .four img{
+.emotion .four img {
     margin: 81px 24px;
 }
 
-.details-container{
+.details-container {
     text-align: center;
 }
 
-.clear{
+.clear {
     clear: both;
 }
 
-.whatNew{
+.whatNew {
     margin-top: 6px;
 }
 
-.pipeline tr, .pipeline td, .pipeline th{
+.pipeline tr, .pipeline td, .pipeline th {
     width: 248px;
     line-height: 26px;
     text-align: center;

docs/static/css/material_custom.css

+/* viewcode link should have left padding */
+span.viewcode-link {
+    padding-left: 0.6rem;
+}
+
+/* adding an eyebrow for API references */
+dt.sig-object {
+    position: relative;
+    background: #f4f5f7;
+    padding: 0.5rem;
+    border-left: 0.2rem solid #ec407a;  /* this should be matched with theme color. */
+    word-wrap: break-word;
+}
+
+/* logo is too large */
+a.md-logo img {
+    padding: 3px;
+}
+
+/* Add split for navigation */
+nav.md-tabs .md-tabs__item:not(:last-child) {
+    padding-right: 0;
+}
+
+nav.md-tabs .md-tabs__item:not(:last-child) .md-tabs__link:after {
+    content: "»";
+    font-family: "Material Icons";
+    padding-left: 0.6rem;    
+}
+
+/* hide the floating button generated by readthedocs */
+.rst-versions.rst-badge {
+    display: none !important;
+}
+
+/* Add some margin between main content and footer */
+.md-footer {
+    margin-top: 1rem;
+}
+
+/* make footer appearing inline */
+.md-footer-copyright__highlight {
+    display: inline;
+}

docs/static/css/material_dropdown.css

+/* https://codepen.io/mildrenben/pen/RPwQEY */
+
+.drop {
+    width: 125px;
+    vertical-align: middle;
+}
+
+.drop button {
+    color: inherit;
+    font-weight: 700;
+    font-size: .65rem;
+    cursor: pointer;
+}
+
+.drop button:after {
+    content: "\e5c5";
+    padding: 0 0 0.3rem 0.2rem;
+    font-size: 0.5rem;
+    font-family: "Material Icons";
+    display: inline-block;
+    transition: all 0.2s ease;
+    transform: rotate(0);
+    transform-origin: 65% 30%;
+}
+
+.drop button.active:after {
+    transform: rotate(180deg);
+}
+
+.drop ul {
+    position: absolute;
+    left: 0;
+    top: 6em;
+    transition: all 0.1s ease;
+    padding: .625em 0;
+    margin-top: -0.9rem;
+    transform: scale(0);
+    transform-origin: 0 0;
+    background: #fcfcfc;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
+}
+
+.drop ul.active {
+    transform: scale(1);
+}
+
+.drop ul li {
+    display: block;
+    width: 100%;
+}
+
+.drop ul li a.md-nav__link {
+    width: 100%;
+    padding: .4rem 1em;
+    display: inline-block;
+    white-space: pre;
+    box-sizing: border-box;
+    color: rgba(0, 0, 0, .87);
+    margin-top: 0;
+    font-size: .75rem;
+}

docs/static/img/README.md

+This folder is deprecated. Please do not put files here in future!

docs/static/js/github.js

+function add_descriptive_text(texts) {
+    const d = $('*[data-md-source="nni"]');
+    // clear first
+    d.find("ul").remove();
+
+    let s = "";
+    for (const text of texts) {
+        s += '<li class="md-source__fact">' + text + '</li>';
+    }
+    d.find(".md-source__repository").append('<ul class="md-source__facts">' + s + '</ul>');
+}
+
+function kFormatter(num) {
+    // https://stackoverflow.com/questions/9461621/format-a-number-as-2-5k-if-a-thousand-or-more-otherwise-900
+    return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num);
+}
+
+$(document).ready(function() {
+    add_descriptive_text(["View on GitHub"]);
+    $.getJSON("https://api.github.com/repos/microsoft/nni", function (data) {
+        add_descriptive_text([
+            kFormatter(data["stargazers_count"]) + " stars",
+            kFormatter(data["forks"]) + " forks",
+        ]);
+    });
+});

docs/static/js/version.js

+// Uncomment the following for debug
+// READTHEDOCS_DATA = {
+//     "ad_free": false,
+//     "api_host": "https://readthedocs.org",
+//     "build_date": "2022-01-25T06:27:55Z",
+//     "builder": "sphinx",
+//     "canonical_url": null,
+//     "commit": "ca66e346",
+//     "docroot": "/docs/en_US/",
+//     "features": { "docsearch_disabled": false },
+//     "global_analytics_code": "UA-17997319-1",
+//     "language": "en",
+//     "page": "Tutorial",
+//     "programming_language": "words",
+//     "project": "nni",
+//     "proxied_api_host": "/_",
+//     "source_suffix": ".rst",
+//     "subprojects": { "nni-zh": "https://nni.readthedocs.io/zh/stable/" },
+//     "theme": "sphinx_material",
+//     "user_analytics_code": "UA-136029994-1",
+//     "version": "latest"
+// };
+
+// READTHEDOCS_VERSIONS = [
+//     ["latest", "/en/latest/"],
+//     ["stable", "/en/stable/"],
+//     ["v2.6", "/en/v2.6/"],
+//     ["v2.5", "/en/v2.5/"],
+//     ["v2.4", "/en/v2.4/"],
+//     ["v2.3", "/en/v2.3/"]
+// ];
+// The above code is injected by readthedocs in production.
+
+
+function create_dropdown(button_text, items) {
+    const dropdown = document.createElement("div");
+    dropdown.className = "md-flex__cell md-flex__cell--shrink drop";
+    const button = document.createElement("button");
+    button.innerHTML = button_text;
+    const content = document.createElement("ul");
+    // content.className = "dropdown-content md-hero";
+    dropdown.appendChild(button);
+    dropdown.appendChild(content);
+
+    for (const key in items) {
+        if (items.hasOwnProperty(key)) {
+            const li = document.createElement("li");
+            const a = document.createElement("a");
+            a.className = "md-nav__link"
+            a.innerHTML = key;
+            a.title = key;
+            a.href = items[key];
+            li.appendChild(a);
+            content.appendChild(li);
+        }
+    }
+
+    $(button).click(function (e) {
+        // first close all others.
+        $(".drop").find(".active").removeClass("active");
+        $(dropdown).find("ul").addClass("active");
+        $(dropdown).find("button").addClass("active");
+        e.stopPropagation();
+    })
+    $(document).click(function () {
+        $(".drop").find(".active").removeClass("active");
+    })
+    return dropdown;
+}
+
+function remove_version_dropdown() {
+    $(".navheader").children().last().remove();
+}
+
+function add_version_dropdown() {
+    const prev_versions = Object.assign({}, ...READTHEDOCS_VERSIONS.map(([k, v]) => ({ [k]: v })));
+
+    const current_version = 'v: ' + READTHEDOCS_DATA["version"];
+    $(".navheader").append(create_dropdown(current_version, prev_versions));
+}
+
+function add_language_dropdown() {
+    const language_dropdown = {
+        'en': 'English',
+        'zh': '简体中文'
+    };
+    let current_language = 'en';
+    const pathname_prefix = window.location.pathname.split('/');
+    if (pathname_prefix.length > 1 && language_dropdown.hasOwnProperty(pathname_prefix[1])) {
+        current_language = pathname_prefix[1];
+    }
+
+    function get_dropdown_href(lang) {
+        let pathname = window.location.pathname.split('/');
+        if (pathname.length > 1) {
+            pathname[1] = lang;
+        }
+        return pathname.join('/');
+    }
+
+    $(".navheader").append(create_dropdown(language_dropdown[current_language], {
+        [language_dropdown['en']]: get_dropdown_href('en'),
+        [language_dropdown['zh']]: get_dropdown_href('zh')
+    }))
+}
+
+$(document).ready(function () {
+    remove_version_dropdown();
+    add_language_dropdown();
+    add_version_dropdown();
+});

docs/templates/layout.html

+{% extends "!layout.html" %}
+
+{#- TO INJECT INFORMATION FROM READTHEDOCS HERE #}
+{% block scripts %}
+  {{ super() }}
+  {% if versions %}
+  <script type="text/javascript">
+    READTHEDOCS_VERSIONS = {{ versions | tojson }}
+  </script>
+  {% endif %}
+{% endblock %}
+
+{#- REPLACE ATTRIBUTES INSTANTLY TO DISABLE SOME HOOKS #}
+{% block footer_scripts %}
+<script type="text/javascript">
+  // try to disable original hook for md-source.
+  $('*[data-md-source="github"]').attr("data-md-source", "nni");
+</script>
+{{ super() }}
+{% endblock %}

docs/tools/chineselink.py

@@ -27,7 +27,7 @@ def walk(path):
 # Not the recommended way of sphinx though: https://docs.readthedocs.io/en/stable/guides/manage-translations-sphinx.html
 
 whitelist = [
-    '_templates/index.html',  # I think no one ever remembers to update this file. Might need to rethink about this.
+    'index.rst',  # I think no one ever remembers to update this file. Might need to rethink about this.
     'Overview.rst',
     'installation.rst',
     'Tutorial/InstallationLinux.rst',