@mdn/fred 2.4.2 → 2.5.0

package/.nvmrc

@@ -1 +1 @@
-v24
+v24.15.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # Changelog
 
+## [2.5.0](https://github.com/mdn/fred/compare/v2.4.3...v2.5.0) (2026-04-23)
+
+
+### Features
+
+* **baseline-indicator:** add renderSimplified method ([#1500](https://github.com/mdn/fred/issues/1500)) ([556412d](https://github.com/mdn/fred/commit/556412d6ac6b5398e773eedd89fa4ae710ad6f43))
+* **bcd:** render links to JSON in simplified HTML ([#1502](https://github.com/mdn/fred/issues/1502)) ([d82fd33](https://github.com/mdn/fred/commit/d82fd33921bea39e23c2b1aae3123848ddae0b5c))
+* **specifications:** render a list in simplified mode ([#1504](https://github.com/mdn/fred/issues/1504)) ([abf1784](https://github.com/mdn/fred/commit/abf17843f6dc0f6a18f6bff6f523255ed74e37b2))
+
+
+### Bug Fixes
+
+* **sidebar-filter:** remove only highlight spans on reset ([#1496](https://github.com/mdn/fred/issues/1496)) ([c647e79](https://github.com/mdn/fred/commit/c647e794552c08f1574545378ba5986699633e7f))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @codemirror/view from 6.41.0 to 6.41.1 in the npm-dev group ([#1494](https://github.com/mdn/fred/issues/1494)) ([06be168](https://github.com/mdn/fred/commit/06be168411bf3efe7a38bc6a291e9a91b1b6c309))
+* **deps-dev:** bump @codemirror/view in the npm-dev group ([06be168](https://github.com/mdn/fred/commit/06be168411bf3efe7a38bc6a291e9a91b1b6c309))
+* **deps-dev:** bump npm from 11.6.2 to 11.12.1 ([#1490](https://github.com/mdn/fred/issues/1490)) ([fbc5e9a](https://github.com/mdn/fred/commit/fbc5e9a78d5332ade4f99d931011fc681c653f77))
+* **deps-dev:** bump stylelint from 17.8.0 to 17.9.0 in the npm-dev group ([#1514](https://github.com/mdn/fred/issues/1514)) ([87617be](https://github.com/mdn/fred/commit/87617be8e0f3c712385ccce424edf07756b9bf8c))
+* **deps-dev:** bump stylelint in the npm-dev group ([87617be](https://github.com/mdn/fred/commit/87617be8e0f3c712385ccce424edf07756b9bf8c))
+* **deps-dev:** bump typescript-eslint from 8.58.2 to 8.59.0 in the npm-dev group ([#1499](https://github.com/mdn/fred/issues/1499)) ([b25912c](https://github.com/mdn/fred/commit/b25912ceb942de26ac5df8153317b8de172a4e2c))
+* **deps-dev:** bump typescript-eslint in the npm-dev group ([b25912c](https://github.com/mdn/fred/commit/b25912ceb942de26ac5df8153317b8de172a4e2c))
+* **deps:** bump @mdn/rari from 0.2.19 to 0.2.20 ([#1515](https://github.com/mdn/fred/issues/1515)) ([d292b8a](https://github.com/mdn/fred/commit/d292b8aedf464a17ab7f5a3224fbeaef330ade2e))
+* **transcend:** use TRANSCEND_AIRGAP_URL ([#1497](https://github.com/mdn/fred/issues/1497)) ([5e8a62a](https://github.com/mdn/fred/commit/5e8a62a1437718631ca1ee010e53cda377126a1b))
+
+## [2.4.3](https://github.com/mdn/fred/compare/v2.4.2...v2.4.3) (2026-04-17)
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.3.11 to 7.3.12 ([#1491](https://github.com/mdn/fred/issues/1491)) ([c135a83](https://github.com/mdn/fred/commit/c135a83e2732bc9342a18ae67f07065a6f9b17cb))
+* **deps-dev:** bump the npm-dev group with 2 updates ([#1484](https://github.com/mdn/fred/issues/1484)) ([f7f1096](https://github.com/mdn/fred/commit/f7f1096c93bfd978176c0edcec9f53d90b66f0e2))
+* **deps-dev:** bump the npm-dev group with 2 updates ([#1489](https://github.com/mdn/fred/issues/1489)) ([f2e1e39](https://github.com/mdn/fred/commit/f2e1e394c7dc1d6be60d9601a5a7bcfaf2ea8b8b))
+* **deps:** bump @mdn/rari from 0.2.17 to 0.2.19 ([#1492](https://github.com/mdn/fred/issues/1492)) ([7693845](https://github.com/mdn/fred/commit/76938450156aea8657f74dfa6d6662fd86950b5e))
+* **media:** reorder width-first in two-part queries ([#1464](https://github.com/mdn/fred/issues/1464)) ([c808c41](https://github.com/mdn/fred/commit/c808c4119d9e08b84fb95ff7da2a53dafc5767e2))
+* **menu:** update menu entries ([#1487](https://github.com/mdn/fred/issues/1487)) ([2065f38](https://github.com/mdn/fred/commit/2065f3885866a63d9007649d7489fa3a346ab3e2))
+
 ## [2.4.2](https://github.com/mdn/fred/compare/v2.4.1...v2.4.2) (2026-04-15)
 
 

package/README.md

@@ -172,6 +172,8 @@ This issue is tracked upstream: https://github.com/lit/lit/issues/1434
 
 Any server component can define a `renderSimplified` method to define the simplified form of that component. When in the top-level `renderSimplified` context, any calls of `ServerComponent.render()` will automatically call the `renderSimplified` method of that component, falling back to the `render` method. This is so we can nest components with a `renderSimplified` method ("simplified components") within ones without.
 
+Server components also have a `simplifiedMode` property set, which is `true` when rendered from the top-level `renderSimplified` function: this allows a small tweak within a `render` method without having to totally re-implement logic in the `renderSimplified` method.
+
 There shouldn't be standalone simplified components: the nesting of components should be defined by the requirements of the `render` method. `renderSimplified` should only be added to a component which already exists with a `render` method to give a simplified view of it. This is especially important as, in the future, we may need to add options of what is/isn't rendered within `renderSimplified` for use in different contexts (one context may require a sidebar, another may not, for instance).
 
 You can preview the rendering locally by setting `FRED_SIMPLE_HTML`:

package/components/baseline-indicator/server.js

@@ -51,7 +51,43 @@ export class BaselineIndicator extends ServerComponent {
   static inlineScript = inlineScript;
 
   /**
-   *
+   * @param {string | null | undefined} date
+   */
+  parseDate(date) {
+    const lowDateRange = date?.match(/^([^0-9])/)?.[0];
+    return date ? new Date(date.slice(lowDateRange ? 1 : 0)) : undefined;
+  }
+
+  /**
+   * @param {import("@fred").Context<import("@rari").DocPage>} context
+   * @param {string} level
+   * @param {Date} [lowDate]
+   */
+  getExtraText(context, level, lowDate) {
+    return level === "high" && lowDate
+      ? context.l10n.raw({
+          id: "baseline-high-extra",
+          args: {
+            date: lowDate.toLocaleDateString(context.locale, {
+              year: "numeric",
+              month: "long",
+            }),
+          },
+        })
+      : level === "low" && lowDate
+        ? context.l10n.raw({
+            id: "baseline-low-extra",
+            args: {
+              date: lowDate.toLocaleDateString(DEFAULT_LOCALE, {
+                year: "numeric",
+                month: "long",
+              }),
+            },
+          })
+        : context.l10n("baseline-not-extra");
+  }
+
+  /**
    * @param {import("@fred").Context<import("@rari").DocPage>} context
    */
   render(context) {
@@ -71,11 +107,7 @@ export class BaselineIndicator extends ServerComponent {
       LOCALIZED_BCD_IDS[context.locale] || LOCALIZED_BCD_IDS[DEFAULT_LOCALE]
     }`;
 
-    const low_date_range = status.baseline_low_date?.match(/^([^0-9])/)?.[0];
-    const low_date = status.baseline_low_date
-      ? new Date(status.baseline_low_date.slice(low_date_range ? 1 : 0))
-      : undefined;
-
+    const lowDate = this.parseDate(status.baseline_low_date);
     const level = status.baseline || "not";
 
     const feedbackLink = `${SURVEY_URL}?page=${encodeURIComponent(context.url)}&level=${level}`;
@@ -154,7 +186,7 @@ export class BaselineIndicator extends ServerComponent {
                     ? context.l10n(
                         "baseline-indicator-widely-available",
                       )`Widely available`
-                    : low_date?.getFullYear()}
+                    : lowDate?.getFullYear()}
                 </span>
                 ${status.asterisk && " *"}
               `}
@@ -191,31 +223,7 @@ export class BaselineIndicator extends ServerComponent {
         <span class="icon icon-chevron"></span>
       </summary>
       <div class="extra">
-        ${level === "high" && low_date
-          ? html`<p>
-              ${context.l10n.raw({
-                id: "baseline-high-extra",
-                args: {
-                  date: low_date.toLocaleDateString(context.locale, {
-                    year: "numeric",
-                    month: "long",
-                  }),
-                },
-              })}
-            </p>`
-          : level === "low" && low_date
-            ? html`<p>
-                ${context.l10n.raw({
-                  id: "baseline-low-extra",
-                  args: {
-                    date: low_date.toLocaleDateString(DEFAULT_LOCALE, {
-                      year: "numeric",
-                      month: "long",
-                    }),
-                  },
-                })}
-              </p>`
-            : html`<p>${context.l10n("baseline-not-extra")}</p>`}
+        <p>${this.getExtraText(context, level, lowDate)}</p>
         ${status.asterisk
           ? html`<p>* ${context.l10n("baseline-asterisk")}</p>`
           : nothing}
@@ -254,4 +262,50 @@ export class BaselineIndicator extends ServerComponent {
       </div>
     </details>`;
   }
+
+  /**
+   * @param {import("@fred").Context<import("@rari").DocPage>} context
+   */
+  renderSimplified(context) {
+    const { doc } = context;
+
+    if (!doc) {
+      return nothing;
+    }
+
+    const status = doc.baseline;
+
+    if (!status) {
+      return nothing;
+    }
+
+    const lowDate = this.parseDate(status.baseline_low_date);
+    const level = status.baseline || "not";
+
+    return html`<p>
+      <strong>
+        ${level === "not"
+          ? context.l10n(
+              "baseline-indicator-limited-availability",
+            )`Limited availability`
+          : context.l10n("baseline-indicator-baseline")`Baseline`}
+        ${level === "high"
+          ? context.l10n(
+              "baseline-indicator-widely-available",
+            )`Widely available`
+          : level === "low"
+            ? html`${lowDate?.getFullYear()}
+              ${context.l10n(
+                "baseline-indicator-newly-available",
+              )`Newly available`}`
+            : nothing}
+        ${status.asterisk ? " *" : nothing}
+      </strong>
+      <br />
+      ${this.getExtraText(context, level, lowDate)}
+      ${status.asterisk
+        ? html`<br />* ${context.l10n("baseline-asterisk")}`
+        : nothing}
+    </p>`;
+  }
 }

package/components/compat-section/server.js

@@ -0,0 +1,45 @@
+import { html } from "@lit-labs/ssr";
+import { nothing } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { queryToUrl } from "../compat-table/utils.js";
+import { HeadingAnchor } from "../heading-anchor/server.js";
+import { ServerComponent } from "../server/index.js";
+
+export class CompatSection extends ServerComponent {
+  /**
+   * @param {import("@fred").Context} _context
+   * @param {import("@rari").Compat} section
+   */
+  render(_context, { id, title, query, isH3 }) {
+    const level = isH3 ? 3 : 2;
+    return html`<section
+      class="content-section"
+      aria-labelledby=${ifDefined(id ?? undefined)}
+    >
+      ${HeadingAnchor.render(level, id ? String(id) : null, String(title))}
+      <mdn-compat-table-lazy
+        locale="en-US"
+        query=${query}
+      ></mdn-compat-table-lazy>
+    </section>`;
+  }
+
+  /**
+   * @param {import("@fred").Context} _context
+   * @param {import("@rari").Compat} section
+   */
+  renderSimplified(_context, { id, title, query, isH3 }) {
+    return html`<section
+      class="content-section"
+      aria-labelledby=${ifDefined(id ?? undefined)}
+    >
+      ${isH3
+        ? nothing
+        : HeadingAnchor.render(2, id ? String(id) : null, String(title))}
+      <a href=${queryToUrl(query)} target="_blank" rel="noopener"
+        ><code>${query}</code></a
+      >
+    </section>`;
+  }
+}

package/components/compat-table/utils.js

@@ -1,3 +1,5 @@
+import { BCD_BASE_URL } from "../env/index.js";
+
 /**
  * A list of browsers to be hidden.
  * @constant {string[]}
@@ -293,3 +295,11 @@ export function getCurrentSupport(support) {
   // Default (likely never reached).
   return getFirst(support);
 }
+
+/**
+ * Get the URL to the JSON file for a given BCD key
+ * @param {string} query
+ */
+export function queryToUrl(query) {
+  return `${BCD_BASE_URL}/bcd/api/v0/current/${query}.json`;
+}

package/components/compat-table-lazy/element.js

@@ -8,7 +8,7 @@ import {
   DEFAULT_LOCALE,
   ISSUE_METADATA_TEMPLATE,
 } from "../compat-table/constants.js";
-import { BCD_BASE_URL } from "../env/index.js";
+import { queryToUrl } from "../compat-table/utils.js";
 
 import styles from "./element.css?lit";
 
@@ -76,10 +76,7 @@ export class MDNCompatTableLazy extends L10nMixin(LitElement) {
   _dataTask = new Task(this, {
     args: () => [this.query],
     task: async ([query], { signal }) => {
-      const response = await fetch(
-        `${BCD_BASE_URL}/bcd/api/v0/current/${query}.json`,
-        { signal },
-      );
+      const response = await fetch(queryToUrl(query), { signal });
       if (!response.ok) {
         console.error("Failed to fetch BCD data:", response);
 

package/components/content-section/server.js

@@ -2,20 +2,20 @@ import { html } from "@lit-labs/ssr";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
+import { CompatSection } from "../compat-section/server.js";
 import { HeadingAnchor } from "../heading-anchor/server.js";
 import { ServerComponent } from "../server/index.js";
-import { SpecificationsList } from "../specifications-list/index.js";
+import { SpecificationsList } from "../specifications-list/server.js";
 
 export class ContentSection extends ServerComponent {
   /**
    * @param {import("@fred").Context} context
    * @param {import("@rari").Section} section
-   * @returns {import("@lit").TemplateResult}
    */
   render(context, { type, value }) {
     switch (type) {
       case "browser_compatibility": {
-        return BCD(value);
+        return CompatSection.render(context, value);
       }
       case "specifications": {
         return SpecificationsSection(context, value);
@@ -43,24 +43,6 @@ function Prose({ id, title, content, isH3 }) {
   </section>`;
 }
 
-/**
- * @param {import("@rari").Compat} section
- * @returns {import("@lit").TemplateResult}
- */
-function BCD({ id, title, query, isH3 }) {
-  const level = isH3 ? 3 : 2;
-  return html`<section
-    class="content-section"
-    aria-labelledby=${ifDefined(id ?? undefined)}
-  >
-    ${HeadingAnchor.render(level, id ? String(id) : null, String(title))}
-    <mdn-compat-table-lazy
-      locale="en-US"
-      query=${query}
-    ></mdn-compat-table-lazy>
-  </section>`;
-}
-
 /**
  * @param {import("@fred").Context} context
  * @param {import("@rari").SpecificationSection} section
@@ -72,6 +54,6 @@ function SpecificationsSection(context, { id, title, specifications, isH3 }) {
     aria-labelledby=${ifDefined(id ?? undefined)}
   >
     ${HeadingAnchor.render(level, id ? String(id) : null, String(title))}
-    ${SpecificationsList(context, specifications)}
+    ${SpecificationsList.render(context, specifications)}
   </section>`;
 }

package/components/curriculum/sidebar.css

@@ -78,7 +78,7 @@
   }
 
   a,
-  span:not(.highlight-container) {
+  span:not(.sidebar-filter-mark-container) {
     display: inline-flex;
     padding-block: 0.25rem;
   }

package/components/env/index.js

@@ -50,4 +50,4 @@ export const OBSERVATORY_API_URL = parseString(
 );
 
 // Transcend Consent Management - https://docs.transcend.io/docs/consent
-export const TRANSCEND_BUNDLE_ID = parseString("TRANSCEND_BUNDLE_ID", "");
+export const TRANSCEND_AIRGAP_URL = parseString("TRANSCEND_AIRGAP_URL", "");

package/components/left-sidebar/server.css

@@ -115,7 +115,7 @@
   }
 
   a,
-  span:not(.highlight-container) {
+  span:not(.sidebar-filter-mark-container) {
     display: inline-block;
     padding-block: 0.25rem;
     vertical-align: middle;

package/components/media/index.css

@@ -2,23 +2,23 @@
 
 @custom-media --screen-xsmall (width <= 426px);
 
-@custom-media --screen-small-and-wider (426px < width);
+@custom-media --screen-small-and-wider (width > 426px);
 @custom-media --screen-small-only (426px < width <= 769px);
 @custom-media --screen-small-and-narrower (width <= 769px);
 
-@custom-media --screen-medium-and-wider (769px < width);
+@custom-media --screen-medium-and-wider (width > 769px);
 @custom-media --screen-medium-only (769px < width <= 992px);
 @custom-media --screen-medium-and-narrower (width <= 992px);
 
-@custom-media --screen-large-and-wider (992px < width);
+@custom-media --screen-large-and-wider (width > 992px);
 @custom-media --screen-large-only (992px < width <= 1200px);
 @custom-media --screen-large-and-narrower (width <= 1200px);
 
-@custom-media --screen-xlarge-and-wider (1200px < width);
+@custom-media --screen-xlarge-and-wider (width > 1200px);
 @custom-media --screen-xlarge-only (1200px < width <= 1441px);
 @custom-media --screen-xlarge-and-narrower (width <= 1441px);
 
-@custom-media --screen-xxlarge (1441px < width);
+@custom-media --screen-xxlarge (width > 1441px);
 
 @custom-media --screen-menu-full (width > 1044px);
 @custom-media --screen-menu-hamburger (width <= 1044px);

package/components/menu/missing-docs.json

@@ -1,7 +1,6 @@
 {
   "es": [
     "Web/API/Web_Animations_API/Using_the_Web_Animations_API",
-    "Web/CSS/Guides",
     "Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator",
     "Web/CSS/Guides/Colors/Applying_color",
     "Web/CSS/Guides/Colors/Color_mixer",

package/components/outer-layout/server.js

@@ -6,7 +6,7 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import inlineScript from "../../entry.inline.js?source&csp=true";
 import {
   ROBOTS_GLOBAL_ALLOW,
-  TRANSCEND_BUNDLE_ID,
+  TRANSCEND_AIRGAP_URL,
   WRITER_MODE,
 } from "../env/index.js";
 import { RUNTIME_ENV, runtimeVariables } from "../env/runtime.js";
@@ -116,12 +116,12 @@ export class OuterLayout extends ServerComponent {
                 fetchpriority="low"
               />`,
           )}
-          ${TRANSCEND_BUNDLE_ID &&
+          ${TRANSCEND_AIRGAP_URL &&
           html`<script
             data-cfasync="false"
             data-report-only="on"
             data-prompt="0"
-            src=${`https://transcend-cdn.com/cm/${TRANSCEND_BUNDLE_ID}/airgap.js`}
+            src=${TRANSCEND_AIRGAP_URL}
           ></script>`}
           ${scripts?.map(
             (path) => html`<script src=${path} type="module"></script>`,

package/components/server/index.js

@@ -13,6 +13,9 @@ export class ServerComponent {
   /** @type {string | undefined} */
   static inlineScript;
 
+  /** `true` if we're rendering in a renderSimplified context */
+  simplifiedMode = false;
+
   /**
    * @template {typeof ServerComponent} T
    * @this {T}
@@ -28,6 +31,7 @@ export class ServerComponent {
     const component = new this();
 
     if ("renderSimplified" in asyncStore) {
+      component.simplifiedMode = true;
       return component.renderSimplified(...args);
     }
 

package/components/sidebar-filter/sidebar-filterer.js

@@ -154,7 +154,9 @@ export class SidebarFilterer {
    * @param {HTMLAnchorElement} link The link element to reset.
    */
   resetHighlighting(link) {
-    const nodes = [...link.querySelectorAll("span, mark")];
+    const nodes = [
+      ...link.querySelectorAll("span.sidebar-filter-mark-container, mark"),
+    ];
     const parents = new Set();
     for (const node of nodes) {
       const parent = node.parentElement;
@@ -250,7 +252,7 @@ export class SidebarFilterer {
       );
 
       const span = this.replaceChildNode(node, "span");
-      span.className = "highlight-container";
+      span.className = "sidebar-filter-mark-container";
 
       /** @type {Text|undefined} */
       const initialRest = [...span.childNodes].find(

package/components/specifications-list/server.js

@@ -0,0 +1,72 @@
+import { html } from "@lit-labs/ssr";
+import { join } from "lit/directives/join.js";
+
+import { ServerComponent } from "../server/index.js";
+
+export class SpecificationsList extends ServerComponent {
+  /**
+   * @param {import("@fred").Context} context
+   * @param {import("@rari").Specification[]} specifications
+   */
+  render(context, specifications) {
+    if (specifications.length === 0) {
+      return html`${context.l10n(
+        "specifications-list-this-feature-does-not-appear-to",
+      )`This feature does not appear to be defined in any specification.`}`;
+    }
+
+    /** @type {Map<string, string[]>} */
+    const urlsByTitle = new Map();
+    for (const { title, bcdSpecificationURL: url } of specifications) {
+      const urls = urlsByTitle.get(title) ?? [];
+      urls.push(url);
+      urlsByTitle.set(title, urls);
+    }
+    const links = urlsByTitle
+      .entries()
+      .flatMap(([title, urls]) =>
+        urls.map((url) => this.renderLink(url, title)),
+      );
+
+    if (this.simplifiedMode) {
+      return html`<ul>
+        ${links.map((link) => html`<li>${link}</li>`)}
+      </ul>`;
+    }
+    return html`<table>
+      <thead>
+        <tr>
+          <th scope="col">
+            ${context.l10n("specifications-list-specification")`Specification`}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        ${links.map(
+          (link) =>
+            html`<tr>
+              <td>${link}</td>
+            </tr>`,
+        )}
+      </tbody>
+    </table>`;
+  }
+
+  /**
+   * @param {string} url
+   * @param {string} [title]
+   */
+  renderLink(url, title) {
+    const hash = url.split("#")[1];
+
+    const label = [
+      title && html`${title}`,
+      title && hash && html`<br />`,
+      hash && html`# ${hash}`,
+    ].filter(Boolean);
+
+    return html`<a class="external" href=${url} rel="noopener" target="_blank"
+      >${join(label, "")}</a
+    >`;
+  }
+}