feat(baseline): add link to developer-signals repo

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);
+    }
   }
 
   /**

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 {

components/baseline-indicator/server.js

@@ -47,6 +47,18 @@
 const SURVEY_URL =
   "https://survey.alchemer.com/s3/7634825/MDN-baseline-feedback";
 
+/** @type {Record<string, { url: string, votes: number }>} */
+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 @@
 
     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 @@
         }
       };
 
+    const openByDefault = Boolean(signalsLink);
+
     return html`<details
       class="baseline-indicator ${level}"
       data-glean-toggle-open="baseline_toggle_open"
+      ?open=${openByDefault}
+      ?data-open-by-default=${openByDefault}
     >
       <summary>
         <span
@@ -183,6 +201,21 @@
         <span class="icon icon-chevron"></span>
       </summary>
       <div class="extra">
+        ${signalsLink
+          ? html`<p>
+              ${context.l10n.raw({
+                id: "baseline-signals",
+                elements: {
+                  link: {
+                    tag: "a",
+                    href: signalsLink,
+                    target: "_blank",
+                    "data-glean-id": "baseline_link_signals",
+                  },
+                },
+              })}
+            </p>`
+          : nothing}
         ${level === "high" && low_date
           ? html`<p>
               ${context.l10n.raw({

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? <a data-l10n-name="link">Tell us why!</a>
 
 homepage-hero-title = Resources for Developers,<br> by Developers
 homepage-hero-description = Documenting <a data-l10n-name="css">CSS</a>, <a data-l10n-name="html">HTML</a>, and <a data-l10n-name="js">JavaScript</a>, since 2005.