diff --git a/components/baseline-indicator/hook.js b/components/baseline-indicator/hook.js index 80e336cad..42a71e595 100644 --- a/components/baseline-indicator/hook.js +++ b/components/baseline-indicator/hook.js @@ -1,10 +1,13 @@ try { const indicator = document.querySelector(".baseline-indicator"); if (indicator instanceof HTMLDetailsElement) { - indicator.addEventListener("toggle", () => { + const { openByDefault } = indicator.dataset; + if (openByDefault === undefined) { + indicator.addEventListener("toggle", () => { + saveState(indicator.open); + }); saveState(indicator.open); - }); - saveState(indicator.open); + } } /** diff --git a/components/baseline-indicator/server.css b/components/baseline-indicator/server.css index b92475065..c82f7dcb9 100644 --- a/components/baseline-indicator/server.css +++ b/components/baseline-indicator/server.css @@ -213,6 +213,10 @@ padding-right: 1rem; padding-bottom: 1.5rem; + a { + font-weight: 500; + } + p { margin-top: 0; margin-bottom: 1rem; @@ -231,7 +235,6 @@ li { margin: 0; - font-weight: 500; list-style: none; a.learn-more { diff --git a/components/baseline-indicator/server.js b/components/baseline-indicator/server.js index 9d9c8897d..6df002683 100644 --- a/components/baseline-indicator/server.js +++ b/components/baseline-indicator/server.js @@ -47,6 +47,18 @@ const LOCALIZED_BCD_IDS = { const SURVEY_URL = "https://survey.alchemer.com/s3/7634825/MDN-baseline-feedback"; +/** @type {Record} */ +let signalsData = {}; + +try { + const signalsRes = await fetch( + "https://web-platform-dx.github.io/developer-signals/web-features-signals.json", + ); + signalsData = await signalsRes.json(); +} catch { + // noop +} + export class BaselineIndicator extends ServerComponent { static inlineScript = inlineScript; @@ -80,6 +92,8 @@ export class BaselineIndicator extends ServerComponent { const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent(context.url)}&level=${level}`; + const signalsLink = signalsData[status.feature.id]?.url; + const isBrowserSupported = /** @param {import("./types.js").BrowserGroup} browser */ (browser) => { return browser.ids.map((id) => status.support?.[id]).every(Boolean); @@ -128,9 +142,13 @@ export class BaselineIndicator extends ServerComponent { } }; + const openByDefault = Boolean(signalsLink); + return html`
+ ${signalsLink + ? html`

+ ${context.l10n.raw({ + id: "baseline-signals", + elements: { + link: { + tag: "a", + href: signalsLink, + target: "_blank", + "data-glean-id": "baseline_link_signals", + }, + }, + })} +

` + : nothing} ${level === "high" && low_date ? html`

${context.l10n.raw({ diff --git a/l10n/en-US.ftl b/l10n/en-US.ftl index dad8a2089..e9380f142 100644 --- a/l10n/en-US.ftl +++ b/l10n/en-US.ftl @@ -11,6 +11,7 @@ baseline-not-extra = This feature is not Baseline because it does not work in so baseline-supported-in = Supported in { $browsers } baseline-unsupported-in = Not widely supported in { $browsers } baseline-supported-and-unsupported-in = Supported in { $supported }, but not widely supported in { $unsupported } +baseline-signals = Want more support for this feature? Tell us why! homepage-hero-title = Resources for Developers,
by Developers homepage-hero-description = Documenting CSS, HTML, and JavaScript, since 2005.