Load release list only when needed

Author: GuillaumeGomez

src/web/crate_details.rs

@@ -373,6 +373,38 @@ pub(crate) async fn crate_details_handler(
     Ok(res.into_response())
 }
 
+#[tracing::instrument]
+pub(crate) async fn get_all_releases(
+    Path(params): Path<CrateDetailHandlerParams>,
+    Extension(pool): Extension<Pool>,
+) -> AxumResult<axum::extract::Json<Vec<Release>>> {
+    let releases: Vec<Release> = spawn_blocking({
+        let pool = pool.clone();
+        let params = params.clone();
+        move || {
+            let mut conn = pool.get()?;
+            let query = "
+            SELECT
+                crates.id AS crate_id
+            FROM crates
+            WHERE crates.name = $1;";
+
+            let rows = conn.query(query, &[&params.name])?;
+
+            let result = if rows.is_empty() {
+                return Ok(Vec::new());
+            } else {
+                &rows[0]
+            };
+            // get releases, sorted by semver
+            releases_for_crate(&mut *conn, result.get("crate_id"))
+        }
+    })
+    .await?;
+
+    Ok(axum::extract::Json(releases))
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;

src/web/routes.rs

@@ -167,6 +167,10 @@ pub(super) fn build_axum_routes() -> AxumRouter {
             "/crate/:name",
             get_internal(super::crate_details::crate_details_handler),
         )
+        .route(
+            "/:name/releases",
+            get_internal(super::crate_details::get_all_releases),
+        )
         .route_with_tsr(
             "/crate/:name/:version",
             get_internal(super::crate_details::crate_details_handler),

static/menu.js

@@ -5,6 +5,88 @@ const updateMenuPositionForSubMenu = (currentMenuSupplier) => {
     subMenu?.style.setProperty('--menu-x', `${currentMenu.getBoundingClientRect().x}px`);
 }
 
+function generateReleaseList(data, crateName) {
+    const currentPath = window.location.pathname.split('/');
+    const releaseData = document.getElementById('release-data');
+    const innerPath = releaseData.getAttribute("data-inner-path");
+    const target = releaseData.getAttribute("data-target");
+    const releases = [];
+
+    for (const release of data) {
+        let url;
+        let retainFragment = "";
+
+        if (innerPath.length === "") {
+            url = `/crate/${crateName}/${release.version}`;
+        } else {
+            url = `/crate/${crateName}/${release.version}/target-redirect/${target}${innerPath}`;
+            retainFragment = `\ndata-fragment="retain"`;
+        }
+        let releaseName = `${crateName} - ${release.version}`
+        let warning = null;
+
+        if (!release.is_library) {
+            // If the release isn't a library, then display that warning.
+            warning = `${releaseName} is not a library`;
+        } else if (release.yanked && release.build_status !== null) {
+            // If the release has been yanked and failed to build, display a warning.
+            warning = `${releaseName} is yanked`;
+        } else if (release.yanked) {
+            // If the release has been yanked and failed to build, display a warning.
+            warning = `${releaseName} is yanked and docs.rs failed to build it`;
+        } else if (release.build_status === null) {
+            // If the release failed to build, display a warning.
+            warning = `docs.rs failed to build ${releaseName}`;
+        }
+
+        let extraClass = "";
+        let title = "";
+        let extraText = "";
+
+        if (warning !== null) {
+            extraClass = " warn";
+            title = `\ntitle="${warning}"`;
+            extraText = `\
+<span class="fa-svg fa-svg-fw " aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" \
+viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 \
+40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 \
+256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 \
+24-24V184c0-13.3-10.7-24-24-24zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 \
+32-32z"></path></svg></span> `;
+        }
+
+        releases.push(`\
+<li class="pure-menu-item">
+<a href="${url}"
+    rel="nofollow"
+    class="pure-menu-link${extraClass}"${retainFragment}${title}
+>${extraText}${release["version"]}</a>
+</li>`);
+    }
+    document.getElementById('releases-list').innerHTML = `\
+<ul class="pure-menu-list">${releases.join('')}</ul>`;
+}
+
+let loadReleases = function() {
+    const crateName = window.location.pathname.split('/')[1];
+    const xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+        if (xhttp.readyState !== XMLHttpRequest.DONE) {
+          return;
+        }
+        if (xhttp.status === 200) {
+            generateReleaseList(JSON.parse(xhttp.responseText), crateName);
+        } else {
+            console.error(`Failed to load release list: [${xhttp.status}] ${xhttp.responseText}`);
+            document.getElementById('releases-list').innerHTML = "Failed to load release list";
+        }
+    };
+    xhttp.open("GET", `/${crateName}/releases`, true);
+    xhttp.send();
+    // To prevent reloading the list unnecessarily.
+    loadReleases = function() {};
+};
+
 // Allow menus to be open and used by keyboard.
 (function() {
     var currentMenu;
@@ -53,6 +135,7 @@ const updateMenuPositionForSubMenu = (currentMenuSupplier) => {
         currentMenu = newMenu;
         newMenu.className += " pure-menu-active";
         backdrop.style.display = "block";
+        loadReleases();
     }
     function menuOnClick(e) {
         if (this.getAttribute("href") != "#") {

templates/rustdoc/topbar.html

@@ -134,11 +134,9 @@
                             <li class="pure-menu-heading">Versions</li>
 
                             <li class="pure-menu-item">
-                                <div class="pure-menu pure-menu-scrollable sub-menu" tabindex="-1">
-                                    <ul class="pure-menu-list">
-                                        {# Display all releases of this crate #}
-                                        {{ macros::releases_list(name=krate.name, releases=krate.releases, target=target, inner_path=inner_path) }}
-                                    </ul>
+                                <div class="pure-menu pure-menu-scrollable sub-menu" id="releases-list" tabindex="-1">
+                                    <div class="hidden" id="release-data" data-inner-path="{{inner_path}}" data-target="{{target}}" ></div>
+                                    <span class="rotate">↻</span>
                                 </div>
                             </li>
                         </ul>

templates/style/_navbar.scss

@@ -15,6 +15,15 @@ body {
     padding: 0;
 }
 
+@keyframes rotating_text {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 div.nav-container {
     // Nothing is supposed to be over or hovering the top navbar. Maybe add a few others '('? :)
     z-index: 999;
@@ -324,6 +333,14 @@ div.nav-container {
             }
         }
     }
+
+    #releases-list {
+        .rotate {
+            display: inline-block;
+            font-size: 30px;
+            animation: rotating_text 2s linear infinite;
+        }
+    }
 }
 
 #nav-search {