@mdn/fred 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [1.1.0](https://github.com/mdn/fred/compare/v1.0.0...v1.1.0) (2025-08-25)
+
+
+### Features
+
+* better print/pdf support for docs and observatory ([#561](https://github.com/mdn/fred/issues/561)) ([aa37d1d](https://github.com/mdn/fred/commit/aa37d1d4411413403ed386afbf4be4f5803ef5ca))
+* **placement:** playground placement on right side ([#554](https://github.com/mdn/fred/issues/554)) ([5cc2e69](https://github.com/mdn/fred/commit/5cc2e69b6681d51b0a86a6b46d4e62c6e39673b2))
+* **sidebar-filter:** refactor, always expand, increase font-size ([#588](https://github.com/mdn/fred/issues/588)) ([01c6f12](https://github.com/mdn/fred/commit/01c6f127287742b0ae431ae2c8c04faa72125a91))
+* **writer-mode:** reload when content edited ([#620](https://github.com/mdn/fred/issues/620)) ([06854ca](https://github.com/mdn/fred/commit/06854caec5894df74ca181ac0fc85b73a4f488fd))
+
+
+### Bug Fixes
+
+* **baseline-indicator:** remove asterisk artifact ([#596](https://github.com/mdn/fred/issues/596)) ([dee9843](https://github.com/mdn/fred/commit/dee9843ff7ee9b531807f6388585b89ebe80b0cc))
+* **build:** add public assets, respect BUILD_OUT_ROOT ([#592](https://github.com/mdn/fred/issues/592)) ([f98e655](https://github.com/mdn/fred/commit/f98e6557072171945afc4abfdd850b18cc5f5156))
+* **interactive-examples:** improve a11y + fix unsupported icon ([#542](https://github.com/mdn/fred/issues/542)) ([dbab195](https://github.com/mdn/fred/commit/dbab1955ea13c19763e99de44f040632f4732505))
+* **language-switcher:** add query string ([#618](https://github.com/mdn/fred/issues/618)) ([8427ea2](https://github.com/mdn/fred/commit/8427ea23c253eda95a571016c132b93a33b44524))
+* **placement:** fallback rendering on home page ([#589](https://github.com/mdn/fred/issues/589)) ([c999265](https://github.com/mdn/fred/commit/c9992656d38bd9ae038a06c1576b61ce25043d40))
+* **play-runner:** internal state could clobber runner state ([#625](https://github.com/mdn/fred/issues/625)) ([8ed1c89](https://github.com/mdn/fred/commit/8ed1c890f366d713fa394670582773c589e21524))
+* **play:** add aria-live to runner/console ([dbab195](https://github.com/mdn/fred/commit/dbab1955ea13c19763e99de44f040632f4732505))
+* **playground:** couldn't undo after formatting ([30efd45](https://github.com/mdn/fred/commit/30efd45eb377152ce5d3d9173372e3851b614118))
+* **playground:** dispatch editor changes to support undo ([#607](https://github.com/mdn/fred/issues/607)) ([30efd45](https://github.com/mdn/fred/commit/30efd45eb377152ce5d3d9173372e3851b614118))
+* **search-modal:** handle modifier keys ([#597](https://github.com/mdn/fred/issues/597)) ([8b3e7d4](https://github.com/mdn/fred/commit/8b3e7d4483f14e87c0265b3c5d3f2d4bd7cf772c))
+* **search:** remove broken sort by options ([#615](https://github.com/mdn/fred/issues/615)) ([1b6d4aa](https://github.com/mdn/fred/commit/1b6d4aa89e97963af4760f86ac2f3004bc5b25ee))
+* **sidebar-filter:** increase contrast of matches ([#598](https://github.com/mdn/fred/issues/598)) ([872bc47](https://github.com/mdn/fred/commit/872bc47420353ef2ce732fd5ce272e7aebdbc6d8))
+
+
+### Miscellaneous
+
+* **article-footer:** point "Learn how to contribute" link to "Getting started" page ([#564](https://github.com/mdn/fred/issues/564)) ([4fa9da7](https://github.com/mdn/fred/commit/4fa9da77f9ae064c4e41d81f23b1cc1b4b075637))
+* **deps-dev:** bump @mdn/browser-compat-data from 6.1.4 to 7.0.0 ([#629](https://github.com/mdn/fred/issues/629)) ([10dee0b](https://github.com/mdn/fred/commit/10dee0b05d10ce162760379152c8b9d15d873ab3))
+* **deps-dev:** bump @rsdoctor/rspack-plugin from 1.2.2 to 1.2.3 in the dev group ([#600](https://github.com/mdn/fred/issues/600)) ([ebd1fc1](https://github.com/mdn/fred/commit/ebd1fc1ecca81091e5136efbee3a51a7a002cedd))
+* **deps-dev:** bump the dev group with 4 updates ([#628](https://github.com/mdn/fred/issues/628)) ([9e01660](https://github.com/mdn/fred/commit/9e01660b205caa4697029b3d99c4dde98a70d08c))
+
 ## [1.0.0](https://github.com/mdn/fred/compare/v0.3.0...v1.0.0) (2025-08-20)
 
 

package/build/env.js

@@ -0,0 +1,3 @@
+import path from "node:path";
+export const BUILD_OUT_ROOT =
+  process.env.BUILD_OUT_ROOT || path.join(import.meta.dirname, "..", "out");

package/build/render.js

@@ -1,23 +1,28 @@
 import { readFile } from "node:fs/promises";
 
 import path from "node:path";
-import { fileURLToPath } from "node:url";
 
-import { render as distRender } from "../dist/ssr/index.js";
+// TODO: this should respect process.env.BUILD_OUT_ROOT at runtime
+// but when we package it into an npm package, it needs to be a relative path
+// based on the value of BUILD_OUT_ROOT at that point in time
+// https://github.com/mdn/fred/issues/594
+const BUILD_OUT_ROOT = path.resolve(import.meta.dirname, "..", "out");
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const { render: distRender } = /** @type {import("../entry.ssr.js")} */ (
+  await import(path.resolve(BUILD_OUT_ROOT, "static", "ssr", "index.js"))
+);
 
 /** @type {import("@rspack/core").StatsCompilation} */
 const clientManifest = JSON.parse(
   await readFile(
-    path.join(__dirname, "..", "dist", "client", "stats.json"),
+    path.join(BUILD_OUT_ROOT, "static", "client", "stats.json"),
     "utf8",
   ),
 );
 /** @type {import("@rspack/core").StatsCompilation} */
 const legacyManifest = JSON.parse(
   await readFile(
-    path.join(__dirname, "..", "dist", "legacy", "stats.json"),
+    path.join(BUILD_OUT_ROOT, "static", "legacy", "stats.json"),
     "utf8",
   ),
 );

package/build/ssr.js

@@ -2,10 +2,9 @@ import { readFile, writeFile } from "node:fs/promises";
 
 import { fdir } from "fdir";
 
+import { BUILD_OUT_ROOT } from "./env.js";
 import { render } from "./render.js";
 
-const BUILD_OUT_ROOT = "./out";
-
 /**
  * @template T
  * @param {T[]} array

package/build.sh

@@ -7,9 +7,7 @@ if [ -z "$CONTENT_ROOT" ]; then
 fi
 
 npm install
-mkdir -p out/static
 export BUILD_OUT_ROOT=out
 npm run rari build
 npm run build
-node build/ssr.js
-cp -r dist/* out/static/
+npm run ssr

package/components/article-footer/server.js

@@ -36,11 +36,8 @@ export class ArticleFooter extends ServerComponent {
  */
 function Contribute(context) {
   return html`<a
-    class="article-footer__contribute external"
-    href="https://github.com/mdn/content/blob/main/CONTRIBUTING.md"
-    title=${context.l10n`This will take you to our contribution guidelines on GitHub.`}
-    target="_blank"
-    rel="noopener noreferrer"
+    class="article-footer__contribute"
+    href=${`/${context.locale}/docs/MDN/Community/Getting_started`}
     >${context.l10n`Learn how to contribute`}</a
   >`;
 }

package/components/baseline-indicator/server.js

@@ -204,7 +204,7 @@ export class BaselineIndicator extends ServerComponent {
               </p>`
             : html`<p>${context.l10n("baseline-not-extra")}</p>`}
         ${status.asterisk
-          ? html`<p>{"* "}${context.l10n("baseline-asterisk")}</p>`
+          ? html`<p>* ${context.l10n("baseline-asterisk")}</p>`
           : nothing}
         <ul>
           <li>

package/components/code-example/element.css

@@ -12,3 +12,10 @@
     }
   }
 }
+
+@media print {
+  mdn-copy-button,
+  mdn-button {
+    display: none !important;
+  }
+}

package/components/compat-table/element.js

@@ -132,7 +132,7 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
 
       for (const browser of browsers) {
         const browserSupport = feature.compat.support[browser] ?? {
-          version_added: null,
+          version_added: false,
         };
 
         if (HIDDEN_BROWSERS.includes(browser)) {
@@ -435,7 +435,7 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
           return nothing;
         }
         const support = compat.support[browserName] ?? {
-          version_added: null,
+          version_added: false,
         };
 
         const supportClassName = getSupportClassName(support, browser);
@@ -805,10 +805,6 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
         status = { isSupported: "unknown" };
         break;
       }
-      case true: {
-        status = { isSupported: lastVersion ? "no" : "yes" };
-        break;
-      }
       case false: {
         status = { isSupported: "no" };
         break;

package/components/compat-table/index-common.css

@@ -276,6 +276,12 @@ table {
   font-style: italic;
 }
 
+@media print {
+  .bc-legend-tip {
+    display: none !important;
+  }
+}
+
 .bc-legend-item {
   display: flex;
   gap: 0.5rem;

package/components/env/index.js

@@ -9,6 +9,7 @@ export const PLAYGROUND_BASE_HOST = parseString(
   "PLAYGROUND_BASE_HOST",
   "mdnplay.dev",
 );
+export const PLAYGROUND_LOCAL = parseBool("PLAYGROUND_LOCAL", false);
 
 export const FXA_SIGNIN_URL = parseString(
   "FXA_SIGNIN_URL",

package/components/interactive-example/element.css

@@ -273,25 +273,21 @@ mdn-ix-tab-wrapper {
       }
 
       &.unsupported {
+        --color-unsupported: light-dark(
+          var(--color-yellow-50),
+          var(--color-yellow-80)
+        );
+
         mdn-play-editor {
-          border-color: light-dark(
-            var(--color-yellow-50),
-            var(--color-yellow-80)
-          );
+          border-color: var(--color-unsupported);
         }
 
         &::after {
-          width: 1rem;
-          height: 1rem;
-
-          content: "";
+          background-color: var(--color-unsupported);
 
-          background-image: url("../icon/triangle-alert.svg");
-          background-repeat: no-repeat;
-          background-position: center center;
-          background-size: 1rem;
-
-          opacity: 1;
+          mask-image: url("../icon/triangle-alert.svg");
+          mask-repeat: no-repeat;
+          mask-size: contain;
 
           transition: none;
         }
@@ -313,3 +309,9 @@ mdn-ix-tab-wrapper {
     overflow: hidden;
   }
 }
+
+@media print {
+  mdn-button {
+    display: none !important;
+  }
+}

package/components/interactive-example/with-choices.js

@@ -1,9 +1,11 @@
 import { decode } from "he";
 import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { ref } from "lit/directives/ref.js";
 
 import { L10nMixin } from "../../l10n/mixin.js";
 import { MDNPlayEditor } from "../play-editor/element.js";
+import { randomIdString } from "../utils/index.js";
 
 import { isCSSSupported } from "./utils.js";
 
@@ -23,6 +25,7 @@ export const InteractiveExampleWithChoices = (Base) =>
     static properties = {
       __choiceSelected: { state: true },
       __choiceUnsupported: { state: true },
+      __choiceUpdated: { state: true },
     };
 
     /** @param {any[]} _args  */
@@ -32,6 +35,8 @@ export const InteractiveExampleWithChoices = (Base) =>
       this.__choiceSelected = -1;
       /** @type {boolean[]} */
       this.__choiceUnsupported = [];
+      /** @type {boolean} */
+      this.__choiceUpdated = false;
     }
 
     /** @param {MouseEvent} event  */
@@ -56,11 +61,13 @@ export const InteractiveExampleWithChoices = (Base) =>
         if (this.__choiceSelected === this.#getIndex(target)) {
           this.#selectChoice(target);
         }
+        this.__choiceUpdated = true;
       }
     }
 
     #resetChoices() {
       this.__choiceSelected = -1;
+      this.__choiceUpdated = false;
 
       const editorNodes = [
         ...(this.shadowRoot?.querySelectorAll("mdn-play-editor") || []),
@@ -104,23 +111,30 @@ export const InteractiveExampleWithChoices = (Base) =>
     }
 
     #render() {
+      const id = randomIdString();
+
       return html`
-        <div class="template-choices">
+        <div class="template-choices" aria-labelledby=${id}>
           <header>
-            <h4>${decode(this.name)}</h4>
-            <mdn-button id="reset" @click=${this._reset} variant="secondary"
+            <h4 id=${id}>${decode(this.name)}</h4>
+            <mdn-button
+              id="reset"
+              @click=${this._reset}
+              variant="secondary"
+              .disabled=${!this.__choiceUpdated}
               >${this.l10n`Reset`}</mdn-button
             >
           </header>
-          <div
+          <ul
             class="choice-wrapper"
             @click=${this.#choiceFocus}
             @focus=${this.#choiceSelect}
             @update=${this.#choiceUpdate}
+            aria-label=${this.l10n`Value select`}
           >
             ${this._choices?.map(
               (code, index) => html`
-                <div
+                <li
                   class=${[
                     "choice",
                     ...(index === this.__choiceSelected ? ["selected"] : []),
@@ -133,11 +147,17 @@ export const InteractiveExampleWithChoices = (Base) =>
                     minimal="true"
                     .delay=${100}
                     .value=${code?.trim()}
+                    aria-label=${ifDefined(
+                      this.__choiceUnsupported[index]
+                        ? this
+                            .l10n`The current value is not supported by your browser.`
+                        : undefined,
+                    )}
                   ></mdn-play-editor>
-                </div>
+                </li>
               `,
             )}
-          </div>
+          </ul>
           <div class="output-wrapper">
             <mdn-play-controller ${ref(this._controller)} run-on-start>
               <mdn-play-runner

package/components/interactive-example/with-console.js

@@ -11,6 +11,7 @@ import "../ix-tab/element.js";
 import "../ix-tab-panel/element.js";
 import "../ix-tab-wrapper/element.js";
 import { L10nMixin } from "../../l10n/mixin.js";
+import { randomIdString } from "../utils/index.js";
 
 /**
  * @import { InteractiveExampleBase } from "./element.js";
@@ -23,11 +24,13 @@ import { L10nMixin } from "../../l10n/mixin.js";
 export const InteractiveExampleWithConsole = (Base) =>
   class extends L10nMixin(Base) {
     #render() {
+      const id = randomIdString();
+
       return html`
         <mdn-play-controller ${ref(this._controller)}>
-          <div class="template-console">
+          <div class="template-console" aria-labelledby=${id}>
             <header>
-              <h4>${decode(this.name)}</h4>
+              <h4 id=${id}>${decode(this.name)}</h4>
             </header>
             ${this._languages.length === 1
               ? html`<mdn-play-editor

package/components/interactive-example/with-tabs.js

@@ -9,6 +9,7 @@ import "../ix-tab/element.js";
 import "../ix-tab-panel/element.js";
 import "../ix-tab-wrapper/element.js";
 import { L10nMixin } from "../../l10n/mixin.js";
+import { randomIdString } from "../utils/index.js";
 
 /**
  * @import { InteractiveExampleBase } from "./element.js";
@@ -21,15 +22,17 @@ import { L10nMixin } from "../../l10n/mixin.js";
 export const InteractiveExampleWithTabs = (Base) =>
   class extends L10nMixin(Base) {
     #render() {
+      const id = randomIdString();
+
       return html`
         <mdn-play-controller
           ${ref(this._controller)}
           run-on-start
           run-on-change
         >
-          <div class="template-tabbed">
+          <div class="template-tabbed" aria-labelledby=${id}>
             <header>
-              <h4>${decode(this.name)}</h4>
+              <h4 id=${id}>${decode(this.name)}</h4>
               <mdn-button id="reset" @click=${this._reset} variant="secondary"
                 >${this.l10n`Reset`}</mdn-button
               >

package/components/language-switcher/element.js

@@ -52,6 +52,9 @@ export class MDNLanguageSwitcher extends L10nMixin(LitElement) {
 
   firstUpdated() {
     this._preferredLocale = getPreferredLocale();
+    if (location.search) {
+      this.url += location.search;
+    }
   }
 
   get _isLocalePreferred() {

package/components/left-sidebar/server.css

@@ -127,7 +127,7 @@
   mark {
     /* Sidebar filter highlight */
     color: unset;
-    background-color: var(--color-background-blue);
+    background-color: var(--color-background-yellow);
   }
 }
 

package/components/live-sample-result/element.css

@@ -7,3 +7,13 @@
     padding-right: 0.5rem;
   }
 }
+
+@media print {
+  .example-header {
+    display: none !important;
+  }
+
+  mdn-button {
+    display: none !important;
+  }
+}

package/components/observatory-rescan-button/element.js

@@ -21,7 +21,7 @@ export class MDNObservatoryRescanButton extends L10nMixin(LitElement) {
     this.duration = 60;
     /** @type {number} */
     this._remainingTime = 0;
-    /** @type {NodeJS.Timer | null} */
+    /** @type {NodeJS.Timeout | null} */
     this._interval = null;
   }
 

package/components/observatory-results/element.css

@@ -466,38 +466,40 @@ mdn-observatory-rescan-button {
     }
   }
 
-  @media (--screen-medium-and-narrower) {
-    /* responsive table */
-    min-width: 0;
+  @media not print {
+    @media (--screen-medium-and-narrower) {
+      /* responsive table */
+      min-width: 0;
 
-    thead {
-      display: none;
-    }
+      thead {
+        display: none;
+      }
 
-    tbody {
-      display: block;
-    }
+      tbody {
+        display: block;
+      }
 
-    tr {
-      display: grid;
-      grid-template-columns: max-content auto;
-    }
+      tr {
+        display: grid;
+        grid-template-columns: max-content auto;
+      }
 
-    tr:nth-of-type(odd) {
-      background: var(--observatory-table-header-bg);
-    }
+      tr:nth-of-type(odd) {
+        background: var(--observatory-table-header-bg);
+      }
 
-    td {
-      display: grid;
+      td {
+        display: grid;
 
-      grid-template-columns: subgrid;
-      grid-column: span 2;
-      grid-auto-flow: column;
+        grid-template-columns: subgrid;
+        grid-column: span 2;
+        grid-auto-flow: column;
 
-      column-gap: 2em;
+        column-gap: 2em;
 
-      .humanized-duration {
-        display: none;
+        .humanized-duration {
+          display: none;
+        }
       }
     }
 
@@ -678,3 +680,64 @@ ol.tabs-list {
     }
   }
 }
+
+@media print {
+  .scan-result {
+    grid-template-columns: 1fr 3fr !important;
+    padding: 0.5rem !important;
+  }
+
+  .obs-pass-icon svg {
+    width: 1.5em !important;
+    height: 1.5em !important;
+  }
+
+  .scroll-container {
+    overflow: hidden !important;
+  }
+
+  /* Show all tab content in print */
+  ol.tabs-list input[type="radio"]:not(:checked) ~ .tab-content {
+    display: block !important;
+  }
+
+  ol.tabs-list input[type="radio"]:not(:checked) ~ .tab-content {
+    display: block !important;
+  }
+
+  /* Hide the radio inputs but show labels as headings */
+  ol.tabs-list input[type="radio"] {
+    display: none !important;
+  }
+
+  li.tabs-list-item {
+    input:checked + label,
+    input:checked + label:hover,
+    input:checked:focus-visible + label,
+    input:not(:checked) + label,
+    input:not(:checked) + label:hover {
+      display: block !important;
+
+      font-size: 1.5rem !important;
+      font-weight: bold !important;
+
+      color: var(--color-text-primary) !important;
+
+      text-decoration: none !important;
+    }
+  }
+
+  /* Stack tab content vertically */
+  ol.tabs-list {
+    display: block !important;
+  }
+
+  ol.tabs-list li.tabs-list-item {
+    display: block !important;
+  }
+
+  th,
+  td {
+    padding: 0.5rem !important;
+  }
+}

package/components/observatory-results/element.js

@@ -5,6 +5,7 @@ import { nothing } from "lit";
 import { OBSERVATORY_API_URL } from "../env/index.js";
 
 import styles from "./element.css?lit";
+import printStyles from "./print.css?lit";
 import { Rating } from "./rating.js";
 import { Tabs } from "./tabs.js";
 
@@ -13,7 +14,7 @@ import "../../components/observatory-comparison-table/element.js";
 import "../../components/observatory-human-duration/element.js";
 
 export class MDNObservatoryResults extends LitElement {
-  static styles = styles;
+  static styles = [styles, printStyles];
 
   constructor() {
     super();

package/components/observatory-results/print.css

@@ -0,0 +1,21 @@
+/* Print styles for Observatory Results */
+@media print {
+  .observatory-results-wrapper {
+    grid-template-columns: [full-start] minmax(0, 1fr) [full-end] !important;
+    background-color: white !important;
+  }
+
+  .observatory-results {
+    grid-area: full !important;
+  }
+
+  /* Hide non-essential elements */
+  .observatory-results-toc,
+  .actions,
+  .rescan-button,
+  .page_layout__banner,
+  .page-layout__header,
+  .button-wrap {
+    display: none !important;
+  }
+}

package/components/observatory-results/server.css

@@ -1,5 +1,6 @@
 @import url("../observatory/colors.css");
 @import url("../observatory/common.css");
+@import url("./print.css");
 
 .observatory-results-wrapper {
   display: grid;

package/components/outer-layout/server.js

@@ -110,6 +110,20 @@ export class OuterLayout extends ServerComponent {
             rel="canonical"
             href=${`https://developer.mozilla.org${context.url}`}
           />
+          <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+          <link rel="manifest" href="/manifest.json" />
+          <link
+            rel="search"
+            type="application/opensearchdescription+xml"
+            href="/opensearch.xml"
+            title="MDN Web Docs"
+          />
+          <link
+            rel="alternate"
+            type="application/rss+xml"
+            title="MDN Blog RSS Feed"
+            href="https://developer.mozilla.org/en-US/blog/rss.xml"
+          />
         </head>
         ${markup}
       </html>

package/components/placement-sidebar/element.js

@@ -66,15 +66,8 @@ export class MDNPlacementSidebar extends PlacementMixin(LitElement) {
       ].filter(([_, v]) => Boolean(v)),
     );
 
-    // skyscraper format is not suitable for horizontal layout
-    if (imageFormat === "skyscraper" && this.horizontal) {
-      return nothing;
-    }
-
     return imageFormat === "skyscraper"
-      ? html`<section
-          class=${`sidebar-placement-skyscraper ${this.horizontal ? "horizontal" : ""}`}
-        >
+      ? html`<section class="sidebar-placement-skyscraper">
           <div
             ${ref(this._placementRef)}
             class="placement-container"