@mdn/fred 1.6.0 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
 
 

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/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 {