@mdn/fred 1.6.2 → 1.7.0

package/.env-dist

@@ -25,6 +25,10 @@ RARI_URL="http://localhost:8083"
 # FRED_GLEAN_ENABLED=true
 # FRED_GLEAN_DEBUG=true
 
+# uncomment to enable Google Analytics 4
+# FRED_GA_ENABLED=true
+# FRED_GA_MEASUREMENT_ID=G-XXXXXXXXXX
+
 # legacy react-specific environment variables
 REACT_APP_KUMA_HOST="localhost:3000"
 REACT_APP_FXA_SIGNIN_URL="/users/fxa/login/authenticate/"

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [1.7.0](https://github.com/mdn/fred/compare/v1.6.2...v1.7.0) (2025-10-21)
+
+
+### Features
+
+* **menu:** convert content to data + manage missing with script ([#861](https://github.com/mdn/fred/issues/861)) ([e9be891](https://github.com/mdn/fred/commit/e9be891e1972ebecd4160e6e6b9f6e34aa491616))
+* **telemetry:** port Google Analytics ([#905](https://github.com/mdn/fred/issues/905)) ([e88d977](https://github.com/mdn/fred/commit/e88d977effe722f5619aebd9cdac64e796ceb530))
+
+
+### Bug Fixes
+
+* **live-sample-result:** use code hash as subdomain ([#922](https://github.com/mdn/fred/issues/922)) ([db48f7b](https://github.com/mdn/fred/commit/db48f7b8f9a858a2c85b6ea3727d9e6468374b49))
+* **windows:** remove fdir from ssr bundle ([#926](https://github.com/mdn/fred/issues/926)) ([f724bff](https://github.com/mdn/fred/commit/f724bff89278402e958da1a7a90e5d4a5e2dcb6b))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.12 to 7.1.13 ([#916](https://github.com/mdn/fred/issues/916)) ([81b9966](https://github.com/mdn/fred/commit/81b99662edbdd0abb1da8641a6491d7010a3adf0))
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.13 to 7.1.14 ([#938](https://github.com/mdn/fred/issues/938)) ([411240f](https://github.com/mdn/fred/commit/411240f96714cf6c5404645cdc913e637ed72809))
+* **deps-dev:** bump the dev group across 1 directory with 6 updates ([#943](https://github.com/mdn/fred/issues/943)) ([2911855](https://github.com/mdn/fred/commit/29118556f9d618fa41c860de781d54064a03d34e))
+* **deps:** bump @mdn/rari from 0.1.52 to 0.1.53 ([#932](https://github.com/mdn/fred/issues/932)) ([42d79e4](https://github.com/mdn/fred/commit/42d79e42187698697d080d2d5d7de721e96220e8))
+* **l10n:** update french localization strings for various features ([#767](https://github.com/mdn/fred/issues/767)) ([be247ea](https://github.com/mdn/fred/commit/be247eafcbf5dc48dc300919c8bd5be6fac846d5))
+* **menu:** adjust case of "CSS values and units" links ([#910](https://github.com/mdn/fred/issues/910)) ([236a727](https://github.com/mdn/fred/commit/236a7275dcaf3e98a657674f72b8628743774338))
+* update ill cased links ([236a727](https://github.com/mdn/fred/commit/236a7275dcaf3e98a657674f72b8628743774338))
+
 ## [1.6.2](https://github.com/mdn/fred/compare/v1.6.1...v1.6.2) (2025-10-13)
 
 

package/build/eslint-fred.js

@@ -1,6 +1,6 @@
 import path from "node:path";
 
-import { toCamelCase } from "./utils.js";
+import { camelToKebabCase } from "../utils/name-transformation.js";
 
 /** @type {import("eslint").ESLint.Plugin} */
 export default {
@@ -26,7 +26,9 @@ export default {
                 });
               }
 
-              const expectedDir = toCamelCase(className.replace(/^MDN/, ""));
+              const expectedDir = camelToKebabCase(
+                className.replace(/^MDN/, ""),
+              );
               const expectedPath = path.join(
                 "components",
                 expectedDir,
@@ -57,7 +59,7 @@ export default {
             const [className, superClassName] = getClassNames(node);
 
             if (superClassName === "ServerComponent") {
-              const expectedDir = toCamelCase(className);
+              const expectedDir = camelToKebabCase(className);
               const expectedPath = path.join(
                 "components",
                 expectedDir,
@@ -95,7 +97,7 @@ export default {
                 });
               }
 
-              const expectedDir = toCamelCase(
+              const expectedDir = camelToKebabCase(
                 className.replace(/Sandbox$/, ""),
               );
               const expectedPath = path.join(

package/build/plugins/generate-element-map.js

@@ -1,7 +1,8 @@
 import fs from "node:fs/promises";
 import path from "node:path";
 
-import { crawl, toPascalCase } from "../utils.js";
+import { kebabToPascalCase } from "../../utils/name-transformation.js";
+import { crawl } from "../utils.js";
 
 /**
  * @import { Compiler } from "@rspack/core"
@@ -26,7 +27,7 @@ export class GenerateElementMapPlugin {
             path.relative(compiler.context, filePath).replaceAll("\\", "/");
           const folderName = relPath.split("/").at(-2);
           const tagName = `mdn-${folderName}`;
-          const className = toPascalCase(tagName);
+          const className = kebabToPascalCase(tagName);
           return `"${tagName}": import("${relPath}").${className};`;
         });
 

package/build/utils.js

@@ -1,28 +1,5 @@
 import { fdir } from "fdir";
 
-const ACRONYMS = new Set(["MDN", "IX"]);
-
-/** @param {string} name */
-export function toPascalCase(name) {
-  return name
-    .split("-")
-    .map((word) => {
-      if (ACRONYMS.has(word.toUpperCase())) {
-        return word.toUpperCase();
-      }
-      return word.charAt(0).toUpperCase() + word.slice(1);
-    })
-    .join("");
-}
-
-/** @param {string} name */
-export function toCamelCase(name) {
-  return name
-    .replaceAll(/([a-z0-9])([A-Z])/g, "$1-$2")
-    .replaceAll(/([A-Z])([A-Z][a-z])/g, "$1-$2")
-    .toLowerCase();
-}
-
 /**
  * @param {string} root
  * @param {(path: string, isDirectory: boolean) => boolean} filter

package/components/curriculum/module.css

@@ -93,6 +93,7 @@
 
             background: var(--curriculum-bg-color);
             border-radius: 1em;
+
             text-rendering: optimizelegibility;
           }
         }

package/components/curriculum-module/server.css

@@ -111,6 +111,7 @@
 
           background: var(--curriculum-bg-color);
           border-radius: 1em;
+
           text-rendering: optimizelegibility;
         }
       }

package/components/env/index.js

@@ -21,6 +21,9 @@ export const FXA_SIGNOUT_URL = parseString(
   "/users/fxa/login/logout/",
 );
 
+export const GA_ENABLED = parseBool("GA_ENABLED", false);
+export const GA_MEASUREMENT_ID = parseString("GA_MEASUREMENT_ID", "");
+
 /** Set to non-prod default, because we don't want glean to run without explicitly enabling. */
 export const GLEAN_ENABLED = parseBool("GLEAN_ENABLED", false);
 /** Set to non-prod default, because we don't want glean to run without explicitly enabling. */

package/components/footer/server.js

@@ -129,7 +129,7 @@ const mozillaLinks = (context) => [
     external: true,
   },
   {
-    text: context.l10n`Cookies`,
+    text: context.l10n`Telemetry Settings`,
     href: "https://www.mozilla.org/en-US/privacy/websites/data-preferences/",
     external: true,
   },

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

@@ -113,6 +113,7 @@ export class MDNLiveSampleResult extends L10nMixin(LitElement) {
             ...new Set(["allow-modals", ...(this.sandbox?.split(" ") || [])]),
           ].join(" ")}
           .srcPrefix=${this.srcPrefix}
+          permalink
           style=${styleMap({
             height: this.height
               ? `${this.height}${/[0-9]$/.test(this.height) ? "px" : ""}`

package/components/menu/base.css

@@ -158,7 +158,6 @@
 
 .menu__panel-icon {
   display: inline-flex;
-  column-gap: 0.5rem;
   align-items: center;
 
   &::before {
@@ -167,6 +166,8 @@
     width: 1.25rem;
     height: 1.25rem;
 
+    margin-inline-end: 0.5rem;
+
     content: "";
 
     background-color: currentcolor;