fix: navbar Tutorial link now respects current locale and version

Author: Madoshakalaka

tools/website-e2e/src/lib.rs

@@ -86,6 +86,16 @@ pub async fn assert_nav_button(client: &fantoccini::Client, text: &str) {
     find_nav_button(client, text).await;
 }
 
+pub async fn click_nav_link(client: &fantoccini::Client, text: &str) {
+    let xpath = format!("//nav//a[normalize-space(text())='{text}']");
+    let link = client
+        .find(Locator::XPath(&xpath))
+        .await
+        .unwrap_or_else(|_| panic!("nav link '{text}' not found"));
+    link.click().await.unwrap();
+    tokio::time::sleep(Duration::from_millis(800)).await;
+}
+
 pub fn page_looks_japanese(text: &str) -> bool {
     let kana_count = text
         .chars()

tools/website-e2e/tests/navigation.rs

@@ -2,8 +2,8 @@ use std::time::Duration;
 
 use fantoccini::Locator;
 use website_e2e::{
-    assert_nav_button as assert_version_selector, assert_path, build_dir, make_client,
-    page_looks_chinese, page_looks_japanese, start_file_server,
+    assert_nav_button as assert_version_selector, assert_path, build_dir, click_nav_link,
+    make_client, page_looks_chinese, page_looks_japanese, start_file_server,
 };
 
 async fn assert_lang_selector(client: &fantoccini::Client, expected: &str) {
@@ -1501,3 +1501,29 @@ async fn dropdowns_close_on_outside_click() {
 
     client.close().await.unwrap();
 }
+
+#[tokio::test]
+async fn nav_tutorial_link_version_and_locale_aware() {
+    let addr = start_file_server(&build_dir()).await;
+    let base = format!("http://{addr}");
+    let client = make_client().await;
+
+    let cases: &[(&str, &str)] = &[
+        ("/0.22/", "/0.22/tutorial"),
+        ("/ja/0.21/", "/ja/0.21/tutorial"),
+        ("/ja/docs/getting-started/editor-setup", "/ja/tutorial"),
+    ];
+
+    for &(start, expected) in cases {
+        client.goto(&format!("{base}{start}")).await.unwrap();
+        tokio::time::sleep(Duration::from_millis(500)).await;
+
+        click_nav_link(&client, "Tutorial").await;
+        tokio::time::sleep(Duration::from_millis(500)).await;
+
+        let url = client.current_url().await.unwrap();
+        assert_path(&url, expected);
+    }
+
+    client.close().await.unwrap();
+}

yew-rs/lib/src/components/navbar.rs

@@ -245,21 +245,26 @@ pub fn Navbar(
                         }
                     </div>
                     for (label, href, _) in nav_items {
-                        <a class={{
-                            let color = if *label == active_nav_label { "var(--color-primary)" } else { "var(--color-text)" };
-                            css!(
-                                color: ${color};
-                                text-decoration: none;
-                                padding: 0.5rem 0.75rem;
-                                font-size: 0.875rem;
-                                font-weight: 500;
-                                display: inline-flex;
-                                align-items: center;
-                                gap: 0.25rem;
-                                &:hover { color: var(--color-primary); text-decoration: none; }
-                                @media (max-width: 700px) { display: none; }
-                            )
-                        }} href={*href} onclick={crate::nav_onclick(&nav_ctx, href)}>{label}</a>
+                        {
+                            {
+                                let url = compute_nav_href(href, lang.as_str(), doc_version.as_str());
+                                let color = if *label == active_nav_label { "var(--color-primary)" } else { "var(--color-text)" };
+                                html! {
+                                    <a class={css!(
+                                        color: ${color};
+                                        text-decoration: none;
+                                        padding: 0.5rem 0.75rem;
+                                        font-size: 0.875rem;
+                                        font-weight: 500;
+                                        display: inline-flex;
+                                        align-items: center;
+                                        gap: 0.25rem;
+                                        &:hover { color: var(--color-primary); text-decoration: none; }
+                                        @media (max-width: 700px) { display: none; }
+                                    )} href={url.clone()} onclick={crate::nav_onclick(&nav_ctx, &url)}>{label}</a>
+                                }
+                            }
+                        }
                     }
                     <a class={css!(
                         color: var(--color-text);
@@ -416,16 +421,23 @@ pub fn Navbar(
                     -webkit-overflow-scrolling: touch;
                 )}>
                     for (label, href, _) in nav_items {
-                        <a class={css!(
-                            color: var(--color-text);
-                            text-decoration: none;
-                            padding: 0.75rem 0;
-                            font-size: 0.875rem;
-                            font-weight: 500;
-                            display: inline-flex;
-                            align-items: center;
-                            &:hover { color: var(--color-primary); text-decoration: none; }
-                        )} href={*href} onclick={crate::nav_onclick(&nav_ctx, href)}>{label}</a>
+                        {
+                            {
+                                let url = compute_nav_href(href, lang.as_str(), doc_version.as_str());
+                                html! {
+                                    <a class={css!(
+                                        color: var(--color-text);
+                                        text-decoration: none;
+                                        padding: 0.75rem 0;
+                                        font-size: 0.875rem;
+                                        font-weight: 500;
+                                        display: inline-flex;
+                                        align-items: center;
+                                        &:hover { color: var(--color-primary); text-decoration: none; }
+                                    )} href={url.clone()} onclick={crate::nav_onclick(&nav_ctx, &url)}>{label}</a>
+                                }
+                            }
+                        }
                     }
                     <a class={css!(
                         color: var(--color-text);
@@ -561,6 +573,31 @@ fn DropdownItem(href: AttrValue, active: bool, children: Html) {
     }
 }
 
+fn compute_nav_href(base_href: &str, lang: &str, doc_version: &str) -> String {
+    let prefix = crate::lang_prefix(lang);
+    let version_slug = VERSION_SLUGS
+        .iter()
+        .find(|(label, _)| *label == doc_version)
+        .map(|(_, slug)| *slug)
+        .unwrap_or("");
+
+    if base_href.starts_with("/tutorial") {
+        if version_slug.is_empty() {
+            return format!("{prefix}/tutorial");
+        }
+        return format!("{prefix}/{version_slug}/tutorial");
+    }
+
+    if let Some(doc_path) = base_href.strip_prefix("/docs/") {
+        if version_slug.is_empty() {
+            return format!("{prefix}/docs/{doc_path}");
+        }
+        return format!("{prefix}/docs/{version_slug}/{doc_path}");
+    }
+
+    format!("{prefix}{base_href}")
+}
+
 fn compute_version_url(
     current_path: &str,
     current_lang: &str,