@mdn/fred 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## [1.3.2](https://github.com/mdn/fred/compare/v1.3.1...v1.3.2) (2025-09-05)
+
+
+### Bug Fixes
+
+* **content-section:** move dt/dd in dt closer together ([#704](https://github.com/mdn/fred/issues/704)) ([b93e613](https://github.com/mdn/fred/commit/b93e6136f16c21c8ca956f3db112785429caf18c))
+* **doc:** use pageTitle as `<title>` ([#693](https://github.com/mdn/fred/issues/693)) ([4d0756e](https://github.com/mdn/fred/commit/4d0756e5e22b95fc7a5802f892ac9b7204cf8fee))
+* **scrim-inline:** add missing style ([#700](https://github.com/mdn/fred/issues/700)) ([2d8e30a](https://github.com/mdn/fred/commit/2d8e30a0caf7b487f03aadfaefb4450395517c37))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.1.1 to 7.1.2 ([#699](https://github.com/mdn/fred/issues/699)) ([382c653](https://github.com/mdn/fred/commit/382c653c00146e06586f699d714c728d078e5715))
+* **deps-dev:** bump @types/node from 22.18.0 to 22.18.1 in the dev group ([#707](https://github.com/mdn/fred/issues/707)) ([89244ab](https://github.com/mdn/fred/commit/89244ab6f0c022efe12cced7bfbfe792143dedba))
+* **deps-dev:** bump the dev group with 3 updates ([#695](https://github.com/mdn/fred/issues/695)) ([5031a68](https://github.com/mdn/fred/commit/5031a688326d0bd973746b7251c51693a1b4dfa0))
+
+## [1.3.1](https://github.com/mdn/fred/compare/v1.3.0...v1.3.1) (2025-09-03)
+
+
+### Bug Fixes
+
+* **env:** remove inline script if no runtime variables are set ([#691](https://github.com/mdn/fred/issues/691)) ([771737e](https://github.com/mdn/fred/commit/771737eb0ccf60eab9af54bb011f4099af475e17))
+
+
+### Miscellaneous
+
+* **compat-table:** Port release label fix from yari ([#687](https://github.com/mdn/fred/issues/687)) ([3391cc4](https://github.com/mdn/fred/commit/3391cc4079cf9e6fed5c5b096d361793055fa94e))
+* **deps-dev:** bump the dev group with 5 updates ([#688](https://github.com/mdn/fred/issues/688)) ([bdff859](https://github.com/mdn/fred/commit/bdff8590ce1127286f9d0788ff60c5aa67afc9c8))
+
 ## [1.3.0](https://github.com/mdn/fred/compare/v1.2.0...v1.3.0) (2025-09-01)
 
 

package/README.md

@@ -24,6 +24,21 @@ MDN's next fr(ont)e(n)d.
 - `npm run preview`
   - runs the preview server: using the production bundles with the rari server: useful for testing our prod rspack config
 
+### Accessing from non-localhost
+
+If you want to access fred from a different machine, you'll need to run with certain options:
+
+- `HTTPS=true` to enable HTTPS with a self-signed certificate, allowing Web APIs requiring a secure context to work
+- `ORIGIN_MAIN=your.local.ip.address` to allowlist your address in the playground
+
+So a full command might look like:
+
+```
+HTTPS=true ORIGIN_MAIN=192.168.0.99 npm run start
+```
+
+This is useful to test changes on mobile, tablets and other platforms.
+
 ## Development principles
 
 ### Environment variables

package/components/content-section/server.css

@@ -245,6 +245,11 @@
 
     dd {
       margin-left: 1rem;
+
+      /* Move description closer to term. */
+      p:first-child {
+        margin-top: 0.5rem;
+      }
     }
 
     ul {

package/components/doc/server.js

@@ -6,7 +6,7 @@ export class Doc extends ServerComponent {
   /**
    * @param {import("@fred").Context<import("@rari").DocPage>} context
    */ render(context) {
-    context.pageTitle = context.doc.title;
+    context.pageTitle = context.doc.pageTitle;
     return PageLayout.render(context, ReferenceLayout.render(context));
   }
 }

package/components/env/README.md

@@ -26,3 +26,5 @@ Rspack will bundle **all** environment variables prefixed with `FRED_` into the
 By default, variables are baked into our bundle at build time. However, you can define variables as runtime environment variables, which can be changed when running a version of Fred built with `FRED_RUNTIME_ENV=true`.
 
 This is used in our npm package, so we can e.g. set `FRED_WRITER_MODE=true` in the `content` repo, without having to bake that into the npm package for all consumers.
+
+Runtime environment variables fall back to their build-time values if not set, and then to the default defined in code.

package/components/env/utils.js

@@ -50,7 +50,8 @@ function getEnv(name, options = {}) {
   const fullName = `FRED_${name}`;
   if (runtime && RUNTIME_ENV) {
     runtimeVariables.push(fullName);
-    return process.env[fullName] || getEnv(name);
+    // safely navigate if process is not defined
+    return globalThis.process?.env[fullName] || getEnv(name);
   }
   return globalThis.__MDNEnv?.[fullName];
 }

package/components/outer-layout/server.js

@@ -69,10 +69,8 @@ export class OuterLayout extends ServerComponent {
         ? "learn"
         : undefined;
 
-    const env = Object.fromEntries(
-      Object.entries(process.env).filter(([key]) =>
-        runtimeVariables.includes(key),
-      ),
+    const runtimeEnvEntries = Object.entries(process.env).filter(
+      ([key]) => key.startsWith("FRED_") && runtimeVariables.includes(key),
     );
 
     // if you want to put some script inline, put it in entry.inline.js
@@ -93,9 +91,9 @@ export class OuterLayout extends ServerComponent {
             content="width=device-width, initial-scale=1.0"
           />
           <title>${context.pageTitle || "MDN"}</title>
-          ${RUNTIME_ENV
+          ${RUNTIME_ENV && runtimeEnvEntries.length > 0
             ? unsafeHTML(`<script>process = {
-  env: ${JSON.stringify(env)}
+  env: ${JSON.stringify(Object.fromEntries(runtimeEnvEntries))}
 };</script>`)
             : nothing}
           ${unsafeHTML(`<script>${inlineScript}</script>`)}

package/components/scrim-inline/element.css

@@ -2,6 +2,13 @@
 
 :host {
   display: block;
+
+  width: 100%;
+  max-width: 36rem;
+  aspect-ratio: 1.5;
+
+  margin: 0.5rem auto;
+
   overflow: hidden;
 }
 

package/l10n/en-US.ftl

@@ -62,8 +62,8 @@ obs-mdn = The { -brand-name-obs } provides effective security insights, guided b
 
 compat-loading = Loading…
 
-compat-browser-version-date = { $browser } { $version } – Released { $date }
-compat-browser-version-released = Released { $date }
+compat-browser-version-date = { $browser } { $version } – Release date: { $date }
+compat-browser-version-released = Release date: { $date }
 
 compat-link-report-issue = Report problems with this compatibility data
 compat-link-report-issue-title = Report an issue with this compatibility data