chore: fixes and toc rewrite

Author: Madoshakalaka

yew-rs/docs-ja/src/lib.rs

@@ -24,7 +24,7 @@ macro_rules! doc_page {
                     sidebar={docs_sidebar()}
                     active_sidebar_path={$path}
                     active_nav="Docs"
-                    doc_version="next"
+                    doc_version="Next"
                     lang="ja"
                     markdown={markdown}
                     toc={toc}

yew-rs/lib/Cargo.toml

@@ -13,7 +13,7 @@ ssr = ["yew/ssr", "stylist/ssr"]
 yew = "0.23"
 stylist = { version = "0.15", features = ["yew_integration", "parser"] }
 syntect = { git = "https://github.com/Madoshakalaka/syntect.git", branch = "line-highlighting", default-features = false, features = ["parsing", "html", "default-syntaxes", "dump-load", "regex-fancy"] }
-web-sys = { workspace = true, features = ["Window", "Document", "Element", "EventTarget", "HtmlElement", "HtmlHeadElement", "MediaQueryList", "Navigator", "Node", "Clipboard"], optional = true }
+web-sys = { workspace = true, features = ["Window", "Document", "DomRect", "Element", "EventTarget", "HtmlElement", "HtmlHeadElement", "Location", "MediaQueryList", "Navigator", "Node", "Clipboard"], optional = true }
 wasm-bindgen = { workspace = true, optional = true }
 wasm-bindgen-futures = { workspace = true, optional = true }
 js-sys = { workspace = true, optional = true }

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

@@ -1,4 +1,6 @@
 use stylist::yew::styled_component;
+#[cfg(feature = "csr")]
+use wasm_bindgen::JsCast;
 use yew::prelude::*;
 
 use crate::components::footer::Footer;
@@ -45,7 +47,14 @@ fn version_slug(doc_version: &str) -> &str {
 }
 
 pub fn rewrite_doc_href(href: &str, lang: &str, doc_version: &str) -> String {
-    if let Some(rest) = href.strip_prefix("/docs/") {
+    let after_lang = if lang.is_empty() {
+        href
+    } else {
+        let prefix = format!("/{lang}");
+        href.strip_prefix(&prefix).unwrap_or(href)
+    };
+
+    if let Some(rest) = after_lang.strip_prefix("/docs/") {
         let lang_p = if lang.is_empty() {
             String::new()
         } else {
@@ -62,6 +71,34 @@ pub fn rewrite_doc_href(href: &str, lang: &str, doc_version: &str) -> String {
     }
 }
 
+fn edit_page_url(active_path: &str, lang: &str) -> String {
+    const BASE: &str = "https://github.com/yewstack/yew/blob/master/yew-rs";
+
+    let crate_dir = if lang.is_empty() {
+        "docs".to_string()
+    } else {
+        format!("docs-{}", lang.to_lowercase())
+    };
+
+    let bare = if lang.is_empty() {
+        active_path
+    } else {
+        let pfx = format!("/{lang}");
+        active_path.strip_prefix(&pfx).unwrap_or(active_path)
+    };
+
+    let Some(page_path) = bare.strip_prefix("/docs/") else {
+        return String::new();
+    };
+    let file_path: String = page_path
+        .split('/')
+        .map(|seg| seg.replace('-', "_"))
+        .collect::<Vec<_>>()
+        .join("/");
+
+    format!("{BASE}/{crate_dir}/src/pages/{file_path}.rs")
+}
+
 fn build_breadcrumbs(
     entries: &[SidebarEntry],
     active_path: &str,
@@ -306,6 +343,28 @@ pub fn Layout(props: &LayoutProps) -> Html {
             color: var(--color-primary);
         }
 
+        .edit-page {
+            margin-top: 2rem;
+        }
+
+        .edit-page-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.375rem;
+            color: var(--color-text-secondary);
+            font-size: 0.875rem;
+            text-decoration: none;
+            transition: color 0.2s;
+        }
+
+        .edit-page-link:hover {
+            color: var(--color-primary);
+        }
+
+        .edit-page-icon {
+            flex-shrink: 0;
+        }
+
         .toc-column {
             width: 250px;
             flex-shrink: 0;
@@ -434,6 +493,12 @@ pub fn Layout(props: &LayoutProps) -> Html {
         (prev, next)
     });
 
+    let edit_url = if has_sidebar {
+        edit_page_url(props.active_sidebar_path.as_str(), props.lang.as_str())
+    } else {
+        String::new()
+    };
+
     #[cfg(feature = "csr")]
     let copy_md_button = if !props.full_width && !props.markdown.is_empty() {
         html! {
@@ -529,6 +594,16 @@ pub fn Layout(props: &LayoutProps) -> Html {
                         <h1 class="page-title">{&props.title}</h1>
                     }
                     {props.children.clone()}
+                    if !edit_url.is_empty() {
+                        <div class="edit-page">
+                            <a class="edit-page-link" href={edit_url.clone()} target="_blank" rel="noopener noreferrer">
+                                <svg viewBox="0 0 24 24" width="16" height="16" class="edit-page-icon">
+                                    <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+                                </svg>
+                                {"Edit this page"}
+                            </a>
+                        </div>
+                    }
                     if let Some((prev, next)) = &pagination {
                         <nav class="pagination" aria-label="Docs pages">
                             if let Some((label, href)) = prev {
@@ -549,25 +624,7 @@ pub fn Layout(props: &LayoutProps) -> Html {
                     }
                 </main>
                 if has_sidebar && !props.toc.is_empty() {
-                    <aside class="toc-column">
-                        <nav class="toc-container">
-                            <ul class="toc-list">
-                                { for props.toc.iter().map(|entry| {
-                                    let pad = match entry.level {
-                                        3 => "padding-left:1rem",
-                                        4 => "padding-left:2rem",
-                                        _ => "",
-                                    };
-                                    let href = format!("#{}", entry.id);
-                                    html! {
-                                        <li style={pad}>
-                                            <a class="toc-link" href={href}>{&entry.text}</a>
-                                        </li>
-                                    }
-                                })}
-                            </ul>
-                        </nav>
-                    </aside>
+                    <Toc entries={props.toc.clone()} />
                 }
             </div>
             <Footer />
@@ -577,37 +634,157 @@ pub fn Layout(props: &LayoutProps) -> Html {
 
 #[cfg(feature = "csr")]
 fn init_page_features() {
-    let _ = js_sys::eval(PAGE_FEATURES_JS);
+    let window = match web_sys::window() {
+        Some(w) => w,
+        None => return,
+    };
+    let hash = window.location().hash().unwrap_or_default();
+    if !hash.is_empty() {
+        let document = match window.document() {
+            Some(d) => d,
+            None => return,
+        };
+        if let Some(el) = document.get_element_by_id(&hash[1..]) {
+            gloo::timers::callback::Timeout::new(100, move || {
+                el.scroll_into_view();
+            })
+            .forget();
+        }
+    }
 }
 
 #[cfg(not(feature = "csr"))]
 fn init_page_features() {}
 
+#[derive(Clone, PartialEq, Properties)]
+struct TocProps {
+    entries: Vec<TocEntry>,
+}
+
 #[cfg(feature = "csr")]
-const PAGE_FEATURES_JS: &str = r#"
-(function() {
-    var content = document.querySelector('.doc-content');
-    if (!content) return;
-
-    var headings = content.querySelectorAll('h2.anchor, h3.anchor, h4.anchor');
-    var tc = document.querySelector('.toc-container');
-    if (tc && headings.length > 0) {
-        var links = tc.querySelectorAll('.toc-link');
-        var obs = new IntersectionObserver(function(entries) {
-            entries.forEach(function(e) {
-                if (e.isIntersecting) {
-                    links.forEach(function(l) {
-                        l.classList.toggle('toc-link--active', l.getAttribute('href') === '#' + e.target.id);
-                    });
+#[function_component]
+fn Toc(props: &TocProps) -> Html {
+    let active_id = use_state(|| Option::<AttrValue>::None);
+
+    {
+        let active_id = active_id.clone();
+        let entries = props.entries.clone();
+        use_effect_with(entries.clone(), move |_| {
+            let window = web_sys::window().unwrap();
+            let document = window.document().unwrap();
+
+            let navbar_height: f64 = document
+                .query_selector(".navbar")
+                .ok()
+                .flatten()
+                .map(|el| {
+                    let html: web_sys::HtmlElement = el.unchecked_into();
+                    html.client_height() as f64
+                })
+                .unwrap_or(60.0);
+
+            let ids: Vec<AttrValue> = entries.iter().map(|e| e.id.clone()).collect();
+
+            let compute = {
+                let ids = ids.clone();
+                let active_id = active_id.clone();
+                let document = document.clone();
+                let window = window.clone();
+                move || {
+                    let mut active: Option<AttrValue> = None;
+                    let mut next_visible_idx: Option<usize> = None;
+
+                    for (i, id) in ids.iter().enumerate() {
+                        if let Some(el) = document.get_element_by_id(id.as_str()) {
+                            let rect = el.get_bounding_client_rect();
+                            if rect.top() >= navbar_height {
+                                next_visible_idx = Some(i);
+                                break;
+                            }
+                        }
+                    }
+
+                    if let Some(idx) = next_visible_idx {
+                        if let Some(el) = document.get_element_by_id(ids[idx].as_str()) {
+                            let rect = el.get_bounding_client_rect();
+                            let vh = window
+                                .inner_height()
+                                .ok()
+                                .and_then(|v| v.as_f64())
+                                .unwrap_or(800.0);
+                            if rect.top() > 0.0 && rect.bottom() < vh / 2.0 {
+                                active = Some(ids[idx].clone());
+                            } else if idx > 0 {
+                                active = Some(ids[idx - 1].clone());
+                            }
+                        }
+                    } else if !ids.is_empty() {
+                        active = Some(ids[ids.len() - 1].clone());
+                    }
+
+                    active_id.set(active);
                 }
-            });
-        }, { rootMargin: '-60px 0px -66% 0px', threshold: 0 });
-        headings.forEach(function(h) { obs.observe(h); });
+            };
+
+            compute();
+
+            let compute_scroll = compute.clone();
+            let scroll_listener =
+                gloo::events::EventListener::new(&document, "scroll", move |_| compute_scroll());
+
+            let resize_listener =
+                gloo::events::EventListener::new(&window, "resize", move |_| compute());
+
+            move || drop((scroll_listener, resize_listener))
+        });
+    }
+
+    html! {
+        <aside class="toc-column">
+            <nav class="toc-container">
+                <ul class="toc-list">
+                    { for props.entries.iter().map(|entry| {
+                        let pad = match entry.level {
+                            3 => "padding-left:1rem",
+                            4 => "padding-left:2rem",
+                            _ => "",
+                        };
+                        let href = format!("#{}", entry.id);
+                        let is_active = *active_id == Some(entry.id.clone());
+                        html! {
+                            <li style={pad}>
+                                <a class={classes!("toc-link", is_active.then_some("toc-link--active"))} href={href}>{&entry.text}</a>
+                            </li>
+                        }
+                    })}
+                </ul>
+            </nav>
+        </aside>
     }
+}
 
-    if (location.hash) {
-        var el = document.getElementById(location.hash.slice(1));
-        if (el) setTimeout(function() { el.scrollIntoView(); }, 100);
+#[cfg(not(feature = "csr"))]
+#[function_component]
+fn Toc(props: &TocProps) -> Html {
+    html! {
+        <aside class="toc-column">
+            <nav class="toc-container">
+                <ul class="toc-list">
+                    { for props.entries.iter().map(|entry| {
+                        let pad = match entry.level {
+                            3 => "padding-left:1rem",
+                            4 => "padding-left:2rem",
+                            _ => "",
+                        };
+                        let href = format!("#{}", entry.id);
+                        html! {
+                            <li style={pad}>
+                                <a class="toc-link" href={href}>{&entry.text}</a>
+                            </li>
+                        }
+                    })}
+                </ul>
+            </nav>
+        </aside>
     }
-})();
-"#;
+}