@mdn/fred 1.5.0 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## [1.6.1](https://github.com/mdn/fred/compare/v1.6.0...v1.6.1) (2025-10-03)
+
+
+### Bug Fixes
+
+* **menu:** update Color format converter link (Color picker) ([#816](https://github.com/mdn/fred/issues/816)) ([7422d4b](https://github.com/mdn/fred/commit/7422d4b024967a5cd0765a8a546e27a381541c73))
+
+
+### Miscellaneous
+
+* **deps:** bump @codemirror/lang-html from 6.4.10 to 6.4.11 in the prod group ([#854](https://github.com/mdn/fred/issues/854)) ([3e8572c](https://github.com/mdn/fred/commit/3e8572cad623795fd12facc043c421a9850fe9b4))
+* **menu:** update missing docs ([#860](https://github.com/mdn/fred/issues/860)) ([212bfbc](https://github.com/mdn/fred/commit/212bfbca3b522f7c624674bc80641974d674c251))
+* **survey:** add developer survey 2025 ([#853](https://github.com/mdn/fred/issues/853)) ([71acaf1](https://github.com/mdn/fred/commit/71acaf165f8b1136a1c92990b70a6e55b990fd34))
+
+## [1.6.0](https://github.com/mdn/fred/compare/v1.5.0...v1.6.0) (2025-10-01)
+
+
+### Features
+
+* **writer-mode:** add recently visited list to homepage ([#821](https://github.com/mdn/fred/issues/821)) ([19d36f2](https://github.com/mdn/fred/commit/19d36f2748f735e838c6825f505ededa6c0db167))
+
+
+### Bug Fixes
+
+* **placement-top:** show fallback if unfilled ([#838](https://github.com/mdn/fred/issues/838)) ([61e2025](https://github.com/mdn/fred/commit/61e20255ac5b942e405f6697a47d0fba504bd7e2))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.6 to 7.1.8 ([#836](https://github.com/mdn/fred/issues/836)) ([a08b60f](https://github.com/mdn/fred/commit/a08b60f5e6adce641862416bdf0d3c95ee25eb7d))
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.8 to 7.1.9 ([#844](https://github.com/mdn/fred/issues/844)) ([446f19b](https://github.com/mdn/fred/commit/446f19b225d62611575d5bfa8fe67dbc23b00ed6))
+* **deps-dev:** bump the dev group with 3 updates ([#824](https://github.com/mdn/fred/issues/824)) ([50bc063](https://github.com/mdn/fred/commit/50bc063d14612c78c2800701fa1268427cd4eb2d))
+* **deps:** bump @mdn/rari from 0.1.50 to 0.1.51 ([#841](https://github.com/mdn/fred/issues/841)) ([1609bb0](https://github.com/mdn/fred/commit/1609bb010a2335f5d8c6f90973f1b35ccce9056e))
+* **deps:** promote source-map-support ([#846](https://github.com/mdn/fred/issues/846)) ([467d496](https://github.com/mdn/fred/commit/467d496ac1f22b8d67953d4f607812d6ea9cecbd))
+
 ## [1.5.0](https://github.com/mdn/fred/compare/v1.4.0...v1.5.0) (2025-09-24)
 
 

package/components/homepage-body/server.js

@@ -1,5 +1,7 @@
 import { html } from "@lit-labs/ssr";
+import { nothing } from "lit";
 
+import { WRITER_MODE } from "../env/index.js";
 import { FeaturedArticles } from "../featured-articles/server.js";
 
 import { LatestNews } from "../latest-news/server.js";
@@ -12,6 +14,9 @@ export class HomepageBody extends ServerComponent {
    */
   render(context) {
     return html`<div class="homepage-body">
+      ${WRITER_MODE && context.localServer
+        ? html`<mdn-recently-visited></mdn-recently-visited>`
+        : nothing}
       <section>
         <h2>${context.l10n`Featured articles`}</h2>
         ${FeaturedArticles.render(context.hyData.featuredArticles)}

package/components/menu/constants.js

@@ -7,14 +7,13 @@
  */
 export const MISSING_DOCS = {
   es: [
-    "Web/API/File_System_API",
     "Web/API/HTML_DOM_API",
     "Web/API/History_API/Working_with_the_History_API",
     "Web/API/Web_Animations_API/Using_the_Web_Animations_API",
+    "Web/CSS/CSS_Values_and_Units",
     "Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator",
     "Web/CSS/CSS_colors/Color_mixer",
     "Web/CSS/CSS_shapes/Shape_generator",
-    "Web/CSS/CSS_Values_and_Units",
     "Web/CSS/Guides",
     "Web/CSS/Layout_cookbook/Card",
     "Web/CSS/Layout_cookbook/Center_an_element",
@@ -30,22 +29,8 @@ export const MISSING_DOCS = {
     "Web/WebDriver",
   ],
   fr: [
-    "Learn_web_development/Getting_started",
-    "Web/API/File_System_API",
-    "Web/API/HTML_DOM_API",
-    "Web/API/Web_Animations_API/Using_the_Web_Animations_API",
     "Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model",
-    "Web/CSS/CSS_colors/Color_mixer",
-    "Web/CSS/CSS_colors/Color_picker",
     "Web/CSS/CSS_shapes/Shape_generator",
-    "Web/CSS/Guides",
-    "Web/CSS/Properties",
-    "Web/HTML/Guides",
-    "Web/JavaScript/Guide/Using_classes",
-    "Web/Media",
-    "Web/Privacy",
-    "Web/URI",
-    "Web/WebDriver",
   ],
   ja: ["Web/CSS/CSS_colors/Color_mixer", "Web/CSS/CSS_shapes/Shape_generator"],
   ko: [
@@ -93,14 +78,15 @@ export const MISSING_DOCS = {
     "Web/Privacy",
     "Web/URI",
     "Web/WebDriver",
+    "Web/XML",
   ],
   ru: [
     "Learn_web_development/Getting_started",
     "Web/API/HTML_DOM_API",
     "Web/CSS/CSS_Values_and_Units",
-    "Web/CSS/Guides",
     "Web/CSS/CSS_colors/Color_mixer",
     "Web/CSS/CSS_shapes/Shape_generator",
+    "Web/CSS/Guides",
     "Web/CSS/Layout_cookbook/Card",
     "Web/CSS/Layout_cookbook/Center_an_element",
     "Web/CSS/Layout_cookbook/Column_layouts",
@@ -115,9 +101,9 @@ export const MISSING_DOCS = {
     "Web/WebDriver",
   ],
   "zh-CN": [
-    "Web/CSS/Properties",
     "Web/CSS/CSS_colors/Color_mixer",
     "Web/CSS/CSS_shapes/Shape_generator",
+    "Web/CSS/Properties",
   ],
   "zh-TW": [
     "Learn_web_development/Getting_started",
@@ -129,14 +115,14 @@ export const MISSING_DOCS = {
     "Web/API/Service_Worker_API",
     "Web/API/Web_Animations_API/Using_the_Web_Animations_API",
     "Web/API/Web_Speech_API/Using_the_Web_Speech_API",
-    "Web/CSS/CSS_colors/Color_mixer",
-    "Web/CSS/CSS_shapes/Shape_generator",
     "Web/CSS/CSS_Values_and_Units",
     "Web/CSS/CSS_backgrounds_and_borders/Border-image_generator",
     "Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator",
     "Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator",
     "Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model",
     "Web/CSS/CSS_colors",
+    "Web/CSS/CSS_colors/Color_mixer",
+    "Web/CSS/CSS_shapes/Shape_generator",
     "Web/CSS/CSS_syntax/At-rule",
     "Web/CSS/Guides",
     "Web/CSS/Layout_cookbook",
@@ -146,6 +132,7 @@ export const MISSING_DOCS = {
     "Web/CSS/Properties",
     "Web/CSS/Reference",
     "Web/HTML/Guides",
+    "Web/HTML/Guides/Cheatsheet",
     "Web/HTML/Guides/Date_and_time_formats",
     "Web/HTML/Guides/Responsive_images",
     "Web/HTML/How_to/Add_JavaScript_to_your_web_page",
@@ -159,5 +146,6 @@ export const MISSING_DOCS = {
     "Web/Privacy",
     "Web/URI",
     "Web/WebDriver",
+    "Web/XML",
   ],
 };

package/components/menu/server.js

@@ -618,10 +618,13 @@ export class Menu extends ServerComponent {
                     )}
                   </li>
                   <li>
-                    ${link("Web/CSS/CSS_colors/Color_mixer", "Color mixer")}
+                    ${link(
+                      "Web/CSS/CSS_colors/Color_format_converter",
+                      "Color format converter",
+                    )}
                   </li>
                   <li>
-                    ${link("Web/CSS/CSS_colors/Color_picker", "Color picker")}
+                    ${link("Web/CSS/CSS_colors/Color_mixer", "Color mixer")}
                   </li>
                   <li>
                     ${link(

package/components/placement-top/element.js

@@ -14,8 +14,6 @@ import styles from "./element.css?lit";
  * @import { TemplateResult } from "lit";
  */
 
-const EMPTY = html`<div class="top-placement empty"></div>`;
-
 export class MDNPlacementTop extends PlacementMixin(LitElement) {
   static styles = styles;
 
@@ -24,7 +22,7 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) {
    * @returns {TemplateResult | symbol}
    */
   renderInitial() {
-    return EMPTY;
+    return html`<div class="top-placement empty"></div>`;
   }
 
   renderFallback() {
@@ -58,7 +56,7 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) {
 
     const data = placementContext?.hpTop || placementContext?.top;
     if (!data) {
-      return EMPTY;
+      return this.renderFallback();
     }
     const {
       status,
@@ -73,7 +71,7 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) {
       version,
     } = data;
     if (status !== "success") {
-      return EMPTY;
+      return this.renderFallback();
     }
     if (!this._viewedUrl) {
       this._viewedUrl = view;

package/components/recently-visited/element.css

@@ -0,0 +1,35 @@
+@import url("../global/global.css");
+
+h2 {
+  font-size: var(--font-size-large);
+  font-weight: 500;
+}
+
+ul {
+  padding: 0;
+
+  overflow: hidden;
+
+  list-style: none;
+
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.5rem;
+}
+
+li {
+  border-top: 1px solid var(--color-border-primary);
+
+  &:first-child {
+    border-top: none;
+  }
+}
+
+a {
+  display: block;
+  padding: 1rem;
+  color: var(--color-text-primary);
+
+  &:not(:hover) {
+    text-decoration: none;
+  }
+}

package/components/recently-visited/element.js

@@ -0,0 +1,26 @@
+import { LitElement, html } from "lit";
+
+import styles from "./element.css?lit";
+
+import { RecentlyVisitedPages } from "./index.js";
+
+export class MDNRecentlyVisited extends LitElement {
+  static ssr = false;
+  static styles = styles;
+
+  constructor() {
+    super();
+    this._pages = new RecentlyVisitedPages();
+  }
+
+  render() {
+    return html`<h2>Recently visited</h2>
+      <ul>
+        ${this._pages.map(
+          ({ path, title }) => html`<li><a href=${path}>${title}</a></li>`,
+        )}
+      </ul>`;
+  }
+}
+
+customElements.define("mdn-recently-visited", MDNRecentlyVisited);

package/components/recently-visited/index.js

@@ -0,0 +1,64 @@
+export class RecentlyVisitedPages {
+  static #key = "recently-visited";
+  #pages;
+
+  constructor() {
+    this.#pages = this.#getFromStorage();
+  }
+
+  #getFromStorage() {
+    const storage = localStorage.getItem(RecentlyVisitedPages.#key);
+    if (storage) {
+      let pages;
+      try {
+        pages = JSON.parse(storage);
+        if (Array.isArray(pages)) {
+          return pages.map((page) => new RecentlyVisitedPage(page));
+        }
+      } catch {
+        console.error(`Parsing ${RecentlyVisitedPages.#key} failed`);
+      }
+    }
+    return [];
+  }
+
+  #saveToStorage() {
+    localStorage.setItem(
+      RecentlyVisitedPages.#key,
+      JSON.stringify(this.#pages),
+    );
+  }
+
+  /**
+   * @template T
+   * @param {(value: RecentlyVisitedPage, index: number, array: RecentlyVisitedPage[]) => T} callback
+   * @returns {T[]}
+   */
+  map(callback) {
+    return this.#pages.map(callback);
+  }
+
+  /**
+   * @param {RecentlyVisitedPage} page
+   */
+  add(page) {
+    this.#pages = [
+      ...new Map([page, ...this.#pages].map((p) => [p.path, p])).values(),
+    ].slice(0, 10);
+    this.#saveToStorage();
+  }
+}
+
+export class RecentlyVisitedPage {
+  title = "";
+  path = "";
+
+  /**
+   * @param {object} data
+   * @param {string} data.title
+   * @param {string} data.path
+   */
+  constructor(data) {
+    Object.assign(this, data);
+  }
+}

package/components/record-visit/element.js

@@ -0,0 +1,34 @@
+import { LitElement } from "lit";
+
+import {
+  RecentlyVisitedPage,
+  RecentlyVisitedPages,
+} from "../recently-visited/index.js";
+
+export class MDNRecordVisit extends LitElement {
+  static ssr = false;
+  static properties = {
+    pageTitle: { type: String, attribute: "page-title" },
+  };
+
+  constructor() {
+    super();
+    /** @type {string | undefined} */
+    this.pageTitle;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.pageTitle) {
+      const visited = new RecentlyVisitedPages();
+      visited.add(
+        new RecentlyVisitedPage({
+          title: this.pageTitle,
+          path: location.pathname,
+        }),
+      );
+    }
+  }
+}
+
+customElements.define("mdn-record-visit", MDNRecordVisit);

package/components/reference-layout/server.css

@@ -6,7 +6,7 @@
   grid-template-areas:
     "sidebar . header . toc"
     "sidebar . body   . toc";
-  grid-template-rows: min-content auto;
+  grid-template-rows: min-content 1fr;
   grid-template-columns: var(--layout-2-sidebars);
 
   justify-content: space-between;

package/components/reference-layout/server.js

@@ -27,14 +27,15 @@ export class ReferenceLayout extends ServerComponent {
             ${WRITER_MODE ? WriterToolbar.render(context) : nothing}
             ${TranslationBanner.render(context)}
             <h1>${doc.title}</h1>
-            ${BaselineIndicator.render(context)} ${description}
+            ${BaselineIndicator.render(context)}
+            <mdn-survey></mdn-survey>
+            ${description}
           </div>
           <aside class="reference-layout__toc">
             ${ReferenceToc.render(context)}
             <mdn-placement-sidebar></mdn-placement-sidebar>
           </aside>
           <div class="reference-layout__body">
-            <mdn-survey></mdn-survey>
             ${sections} ${ArticleFooter.render(context)}
           </div>
         </main>

package/components/survey/README.md

@@ -0,0 +1,5 @@
+# Surveys
+
+You can force show a survey by appending `?force_survey` to the URL of any doc page.
+
+If multiple surveys are configured, this will only show the first in the array: you can force a particular survey by appending `?force_survey=SURVEY_KEY` to the URL.

package/components/survey/element.css

@@ -1,3 +1,5 @@
+@import url("../external-link/global.css");
+
 :host {
   display: block;
 }
@@ -53,6 +55,14 @@ summary {
   cursor: pointer;
 }
 
+a {
+  color: var(--color-text-purple);
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
 iframe {
   width: 100%;
   height: 500px;

package/components/survey/element.js

@@ -4,6 +4,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 
 import "../button/element.js";
 import { L10nMixin } from "../../l10n/mixin.js";
+import { gleanClick } from "../../utils/glean.js";
 import closeIcon from "../icon/cancel.svg?lit";
 
 import styles from "./element.css?lit";
@@ -48,18 +49,13 @@ export class MDNSurvey extends L10nMixin(LitElement) {
   }
 
   #checkForSurvey() {
-    if (globalThis.window === undefined) return;
-
-    const FORCE_SURVEY_PREFIX = "#FORCE_SURVEY=";
-    this._force = globalThis.location.hash.startsWith(FORCE_SURVEY_PREFIX);
-
     this._survey = this.#findSurvey();
 
     if (this._survey) {
       this._surveyState = getSurveyState(this._survey.bucket);
       this._source =
         typeof this._survey.src === "function"
-          ? this._survey.src(globalThis.location.pathname)
+          ? this._survey.src(location.pathname)
           : this._survey.src;
 
       this.#markAsSeen();
@@ -70,20 +66,16 @@ export class MDNSurvey extends L10nMixin(LitElement) {
    * @returns {Survey.Survey | undefined}
    */
   #findSurvey() {
+    const forcedSurvey = new URLSearchParams(location.search).get(
+      "force_survey",
+    );
+    this._force = forcedSurvey !== null;
     return SURVEYS.find((survey) => {
       if (this._force) {
-        const FORCE_SURVEY_PREFIX = "#FORCE_SURVEY=";
-        return (
-          survey.key ===
-          globalThis.location.hash.slice(FORCE_SURVEY_PREFIX.length)
-        );
-      }
-
-      if (globalThis.window === undefined) {
-        return false;
+        return forcedSurvey ? survey.key === forcedSurvey : true;
       }
 
-      if (!survey.show(globalThis.location.pathname)) {
+      if (!survey.show(location.pathname)) {
         return false;
       }
 
@@ -121,22 +113,32 @@ export class MDNSurvey extends L10nMixin(LitElement) {
     this.requestUpdate();
   }
 
+  #onLinkClick() {
+    this.#markOpened();
+  }
+
   #onToggle() {
     if (!this._survey || !this._surveyState || this._isOpen) return;
 
     const details = this._detailsRef.value;
     if (details && details.open) {
-      this._surveyState = {
-        ...this._surveyState,
-        opened_at: Date.now(),
-      };
-      writeSurveyState(this._survey.bucket, this._surveyState);
-      this.#measure("opened");
+      this.#markOpened();
       this._isOpen = true;
       this.requestUpdate();
     }
   }
 
+  #markOpened() {
+    if (!this._survey || !this._surveyState) return;
+
+    this._surveyState = {
+      ...this._surveyState,
+      opened_at: Date.now(),
+    };
+    writeSurveyState(this._survey.bucket, this._surveyState);
+    this.#measure("opened");
+  }
+
   #onSubmitted() {
     if (!this._survey || !this._surveyState) return;
 
@@ -155,8 +157,7 @@ export class MDNSurvey extends L10nMixin(LitElement) {
   #measure(action) {
     if (!this._survey) return;
 
-    // TODO: GLEAN
-    console.log(`Survey: ${action} ${this._survey.bucket}`);
+    gleanClick(`survey: ${action} ${this._survey.bucket}`);
   }
 
   #setupMessageListener() {
@@ -208,17 +209,26 @@ export class MDNSurvey extends L10nMixin(LitElement) {
             @click=${this.#dismiss}
           ></mdn-button>
         </header>
-        <details ${ref(this._detailsRef)} @toggle=${this.#onToggle}>
-          <summary>${this._survey.question}</summary>
-          ${this._isOpen && this._source
-            ? html`
-                <iframe
-                  title=${ifDefined(this._survey.question)}
-                  src=${this._source}
-                ></iframe>
-              `
-            : nothing}
-        </details>
+        ${this._survey.link
+          ? html`<a
+              class="external"
+              href=${this._source}
+              target="_blank"
+              title=${this.l10n`Take survey (Opens in a new tab)`}
+              @click=${this.#onLinkClick}
+              >${this._survey.question}</a
+            >`
+          : html`<details ${ref(this._detailsRef)} @toggle=${this.#onToggle}>
+              <summary>${this._survey.question}</summary>
+              ${this._isOpen && this._source
+                ? html`
+                    <iframe
+                      title=${ifDefined(this._survey.question)}
+                      src=${this._source}
+                    ></iframe>
+                  `
+                : nothing}
+            </details>`}
         ${this._survey.footnote
           ? html` <footer>(${this._survey.footnote})</footer> `
           : nothing}

package/components/survey/surveys.js

@@ -29,6 +29,7 @@ export const SurveyBucket = Object.freeze({
   HOUSE_SURVEY_2025: "HOUSE_SURVEY_2025",
   JS_PROPOSALS_2025: "JS_PROPOSALS_2025",
   FIRST_FRED_2025: "FIRST_FRED_2025",
+  DEVELOPER_SURVEY_2025: "DEVELOPER_SURVEY_2025",
 });
 
 /**
@@ -43,25 +44,28 @@ export const SurveyBucket = Object.freeze({
  * @type {Survey.Survey[]}
  */
 export const SURVEYS = [
-  // {
-  //   key: "something unique in the current surveys",
-  //   bucket: SurveyBucket.FIRST_FRED_2025,
-  //   show: (mdn_url) => {
-  //     return /^\/[a-z]{2}(-[A-Z]{2})?\/docs\/Web\/CSS/.test(mdn_url);
-  //   },
-  //   src: (mdn_url) => {
-  //     const url = new URL(
-  //       "https://survey.alchemer.com/s3/8385674/MDN-short-survey-Fred",
-  //     );
-  //     url.searchParams.set("referrer", mdn_url);
-  //     return url.toString();
-  //   },
-  //   teaser: html`Fred is <strong>MDN</strong>'s shiny new frontend!`,
-  //   question: "How satisfied are you with this new MDN frontend?",
-  //   footnote: "fred = fr(ont)e(n)d",
-  //   rateFrom: 0,
-  //   rateTill: 1,
-  //   start: 0,
-  //   end: Infinity,
-  // },
+  {
+    key: SurveyBucket.DEVELOPER_SURVEY_2025,
+    bucket: SurveyBucket.DEVELOPER_SURVEY_2025,
+    show: (mdn_url) => {
+      return /^\/[a-z]{2}(-[A-Z]{2})?\/docs\/(Glossary|Learn|Web)/.test(
+        mdn_url,
+      );
+    },
+    src: (mdn_url) => {
+      const url = new URL(
+        "https://survey.alchemer.com/s3/8409929/MDN-Developer-Survey",
+      );
+      url.searchParams.set("referrer", mdn_url);
+      return url.toString();
+    },
+    teaser:
+      "We’re running a survey to understand how you use MDN in your web development work.",
+    question: "We’d love for you to take 10 minutes to share your feedback.",
+    link: true,
+    rateFrom: 0,
+    rateTill: 0.3,
+    start: Date.parse("2025-10-06"),
+    end: Date.parse("2025-10-20"),
+  },
 ];

package/components/survey/types.d.ts

@@ -23,6 +23,8 @@ export interface Survey {
   question: TemplateResult | string;
   /** Optional footer HTML displayed below the survey */
   footnote?: TemplateResult | string;
+  /** Link to the survey instead of embedding it */
+  link?: boolean;
 }
 
 export interface SurveyState {

package/components/writer-toolbar/server.js

@@ -24,6 +24,9 @@ export class WriterToolbar extends ServerComponent {
               filepath=${`${folder}/${filename}`}
             ></mdn-writer-open-editor>
             <mdn-writer-reload></mdn-writer-reload>
+            <mdn-record-visit
+              page-title=${context.doc.title}
+            ></mdn-record-visit>
           `
         : nothing}
     </div>`;