From 610f76a329e1b29787e8619837afa7b693fd4486 Mon Sep 17 00:00:00 2001 From: Weihnachtsbaum <140716472+Weihnachtsbaum@users.noreply.github.com> Date: Mon, 17 Mar 2025 18:54:01 +0100 Subject: [PATCH 1/5] Add tooltip for component tag on docs.rs --- docs-rs/trait-tags.html | 61 +++++++++++++++++++++++++++++++++++++---- 1 file changed, 56 insertions(+), 5 deletions(-) diff --git a/docs-rs/trait-tags.html b/docs-rs/trait-tags.html index bdd7ba1fb2..c52a6bb068 100644 --- a/docs-rs/trait-tags.html +++ b/docs-rs/trait-tags.html @@ -39,13 +39,13 @@ const isImmutable = [...associatedTypeHeader].some(el => el.innerText.includes('type Mutability = Immutable')); // Create a tag for each implemented trait. - for (let [tagName, href] of implementedBevyTraits) { + for (let [tagName, [href, requiredComponents]] of implementedBevyTraits) { if (tagName == 'Component' & isImmutable) { tagName = 'Immutable Component'; } // Create the tag and append it to the container. - tagContainer.appendChild(createBevyTag(tagName, href)); + tagContainer.appendChild(createBevyTag(tagName, href, requiredComponents)); } } @@ -64,12 +64,31 @@ // This results in ['impl', 'TraitName', 'for', 'TypeName']. const traitName = removeGenerics(header.innerText).split(' ')[1].trim(); + let requiredComponents = []; + if (traitName === `Component`) { + const docblock = Array.from(header.parentNode.children) + .find(child => child.classList.contains('docblock')); + if (docblock) { + for (const el of docblock.children[0].children) { + let code; + if (el.nodeName === `A`) { + code = el.children[0]; + } else if (el.nodeName === `CODE`) { + code = el; + } else { + continue; + } + requiredComponents.push(code.innerText); + } + } + } + // Find the link to the trait if the anchor element exists. // Otherwise, the trait is just in plain text. const traitLinkEl = [...header.children].find(el => el.getAttribute('href')?.includes(`trait.${traitName}.html`)); const href = traitLinkEl?.getAttribute('href'); - implementedTraits.set(traitName, href); + implementedTraits.set(traitName, [href, requiredComponents]); } const implementedBevyTraits = new Map( @@ -96,7 +115,7 @@ // Helper function to create a tag element with the given name and href, // if available. - function createBevyTag(tagName, href) { + function createBevyTag(tagName, href, requiredComponents) { const el = document.createElement('a'); const kebabCaseName = tagName.toLowerCase().replace(' ', '-'); @@ -106,6 +125,23 @@ el.innerText = tagName; el.className = `bevy-tag ${kebabCaseName}-tag`; + + if (requiredComponents.length > 0) { + const tooltip = document.createElement('span'); + tooltip.innerText = `Required Components:`; + tooltip.className = `bevy-tooltip`; + + const ul = document.createElement('ul'); + for (const component of requiredComponents) { + const li = document.createElement('li'); + li.innerText = component; + ul.appendChild(li); + } + + tooltip.appendChild(ul); + el.appendChild(tooltip); + } + return el; } @@ -130,6 +166,21 @@ color: white; } + .bevy-tooltip { + visibility: hidden; + position: absolute; + top: 5.5rem; + align-items: center; + justify-items: center; + background-color: BLACK; + border-radius: 10%; + padding: 0 0.5rem; + } + + .bevy-tag:hover .bevy-tooltip { + visibility: visible; + } + .bevy-tag { background-color: var(--tag-color); } @@ -169,4 +220,4 @@ .relationshiptarget-tag { --tag-color: oklch(50% 27% 150); } - \ No newline at end of file + From d79ed358afbc6db7a7d497329459177865bd7429 Mon Sep 17 00:00:00 2001 From: Weihnachtsbaum <140716472+Weihnachtsbaum@users.noreply.github.com> Date: Mon, 17 Mar 2025 20:45:59 +0100 Subject: [PATCH 2/5] Add links to required components in tooltip --- docs-rs/trait-tags.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/docs-rs/trait-tags.html b/docs-rs/trait-tags.html index c52a6bb068..02f3c21a00 100644 --- a/docs-rs/trait-tags.html +++ b/docs-rs/trait-tags.html @@ -73,12 +73,10 @@ let code; if (el.nodeName === `A`) { code = el.children[0]; + requiredComponents.push([code.innerText, el.getAttribute('href')]); } else if (el.nodeName === `CODE`) { - code = el; - } else { - continue; + requiredComponents.push([el.innerText]); } - requiredComponents.push(code.innerText); } } } @@ -132,9 +130,14 @@ tooltip.className = `bevy-tooltip`; const ul = document.createElement('ul'); - for (const component of requiredComponents) { + for (const [component, componentHref] of requiredComponents) { const li = document.createElement('li'); - li.innerText = component; + const a = document.createElement('a'); + if (componentHref) { + a.setAttribute('href', componentHref); + } + a.innerText = component; + li.appendChild(a); ul.appendChild(li); } From b1dbe74e11d75452a5f52d0b95eee7d0c5958d6f Mon Sep 17 00:00:00 2001 From: Weihnachtsbaum <140716472+Weihnachtsbaum@users.noreply.github.com> Date: Mon, 17 Mar 2025 21:19:17 +0100 Subject: [PATCH 3/5] Improve tooltip style --- docs-rs/trait-tags.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs-rs/trait-tags.html b/docs-rs/trait-tags.html index 02f3c21a00..31e34dbd43 100644 --- a/docs-rs/trait-tags.html +++ b/docs-rs/trait-tags.html @@ -173,10 +173,8 @@ visibility: hidden; position: absolute; top: 5.5rem; - align-items: center; - justify-items: center; background-color: BLACK; - border-radius: 10%; + border-radius: 10px; padding: 0 0.5rem; } From 81f804fcd261a6b3714dabcabdfeb765595e93f1 Mon Sep 17 00:00:00 2001 From: Weihnachtsbaum <140716472+Weihnachtsbaum@users.noreply.github.com> Date: Mon, 17 Mar 2025 21:22:34 +0100 Subject: [PATCH 4/5] Replace unnecessary backticks with quotes --- docs-rs/trait-tags.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs-rs/trait-tags.html b/docs-rs/trait-tags.html index 31e34dbd43..7853b085f7 100644 --- a/docs-rs/trait-tags.html +++ b/docs-rs/trait-tags.html @@ -65,16 +65,16 @@ const traitName = removeGenerics(header.innerText).split(' ')[1].trim(); let requiredComponents = []; - if (traitName === `Component`) { + if (traitName === 'Component') { const docblock = Array.from(header.parentNode.children) .find(child => child.classList.contains('docblock')); if (docblock) { for (const el of docblock.children[0].children) { let code; - if (el.nodeName === `A`) { + if (el.nodeName === 'A') { code = el.children[0]; requiredComponents.push([code.innerText, el.getAttribute('href')]); - } else if (el.nodeName === `CODE`) { + } else if (el.nodeName === 'CODE') { requiredComponents.push([el.innerText]); } } @@ -126,8 +126,8 @@ if (requiredComponents.length > 0) { const tooltip = document.createElement('span'); - tooltip.innerText = `Required Components:`; - tooltip.className = `bevy-tooltip`; + tooltip.innerText = 'Required Components:'; + tooltip.className = 'bevy-tooltip'; const ul = document.createElement('ul'); for (const [component, componentHref] of requiredComponents) { From 3102d673bd44eebd4d07ecc5e6f983bc5e3b86ab Mon Sep 17 00:00:00 2001 From: Weihnachtsbaum <140716472+Weihnachtsbaum@users.noreply.github.com> Date: Mon, 17 Mar 2025 22:18:44 +0100 Subject: [PATCH 5/5] Increase z-index of tooltip --- docs-rs/trait-tags.html | 1 + 1 file changed, 1 insertion(+) diff --git a/docs-rs/trait-tags.html b/docs-rs/trait-tags.html index 7853b085f7..da2203ad33 100644 --- a/docs-rs/trait-tags.html +++ b/docs-rs/trait-tags.html @@ -176,6 +176,7 @@ background-color: BLACK; border-radius: 10px; padding: 0 0.5rem; + z-index: 1; } .bevy-tag:hover .bevy-tooltip {