@mdn/fred 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [2.2.0](https://github.com/mdn/fred/compare/v2.1.0...v2.2.0) (2026-02-02)
+
+
+### Features
+
+* **ServerComponent:** add method to render simplified html ([#1072](https://github.com/mdn/fred/issues/1072)) ([fa6c814](https://github.com/mdn/fred/commit/fa6c8143505b8f7629f90adf1bb1e5a5b3dadb54))
+
+
+### Bug Fixes
+
+* **outer-layout:** avoid `summary_large_image` in `twitter:card` ([#1227](https://github.com/mdn/fred/issues/1227)) ([dd47e77](https://github.com/mdn/fred/commit/dd47e77d6e320751d6219d4ed13f5254687d773a))
+
+
+### Miscellaneous
+
+* **deps-dev:** bump @mdn/browser-compat-data from 7.2.5 to 7.3.0 ([#1268](https://github.com/mdn/fred/issues/1268)) ([519f3ad](https://github.com/mdn/fred/commit/519f3adf1a3812e7c5d1eaa90ecbef2d57a7ff86))
+* **deps-dev:** bump the dev group across 1 directory with 8 updates ([#1262](https://github.com/mdn/fred/issues/1262)) ([bf48e08](https://github.com/mdn/fred/commit/bf48e08a92a69532397937586f073879db6f061c))
+* **deps-dev:** bump the dev group with 10 updates ([#1267](https://github.com/mdn/fred/issues/1267)) ([af4a569](https://github.com/mdn/fred/commit/af4a569a4506b1da190294e45f3676f5ff6341a2))
+* **deps:** bump @mdn/watify from 1.1.7 to 1.1.8 ([#1271](https://github.com/mdn/fred/issues/1271)) ([e2c10f9](https://github.com/mdn/fred/commit/e2c10f9fcbef36b5dbf9135777441f0923386e6b))
+* **deps:** bump tar from 7.5.6 to 7.5.7 ([#1264](https://github.com/mdn/fred/issues/1264)) ([0ae1ccd](https://github.com/mdn/fred/commit/0ae1ccd2ed24fc720f011d80e8c6ab83ea773811))
+
 ## [2.1.0](https://github.com/mdn/fred/compare/v2.0.2...v2.1.0) (2026-01-27)
 
 

package/README.md

@@ -159,3 +159,21 @@ If our server side rendered custom elements are different to the initial state o
 To avoid this, don't compute things that are server/client dependent in `connectedCallback` (or run functions which do this). Instead you must run these in `firstUpdated` (despite the warning lit will raise in development about the element scheduling an update after an update completed).
 
 This issue is tracked upstream: https://github.com/lit/lit/issues/1434
+
+### Simplified HTML
+
+`entry.ssr.js` exports a top-level `renderSimplified` function: the purpose of this is to render a very basic HTML page for a particular path, which is useful for embedding MDN content as templated HTML in other contexts.
+
+Any server component can define a `renderSimplified` method to define the simplified form of that component. When in the top-level `renderSimplified` context, any calls of `ServerComponent.render()` will automatically call the `renderSimplified` method of that component, falling back to the `render` method. This is so we can nest components with a `renderSimplified` method ("simplified components") within ones without.
+
+There shouldn't be standalone simplified components: the nesting of components should be defined by the requirements of the `render` method. `renderSimplified` should only be added to a component which already exists with a `render` method to give a simplified view of it. This is especially important as, in the future, we may need to add options of what is/isn't rendered within `renderSimplified` for use in different contexts (one context may require a sidebar, another may not, for instance).
+
+You can preview the rendering locally by setting `FRED_SIMPLE_HTML`:
+
+```
+FRED_SIMPLE_HTML=true npm run start
+```
+
+Then visit a documentation path directly, e.g. http://localhost:3000/en-US/docs/Web/
+
+If you're loading a path which isn't rendering anything (like the homepage), check if it's defined in `renderSimplified` in `entry.ssr.js`: we "opt-in" routes as we need them.

package/build/server-worker.js

@@ -28,10 +28,12 @@ if (!indexModulePath) {
 try {
   /** @type {import("../entry.ssr.js")} */
   const indexModule = await import(pathToFileURL(indexModulePath).href);
-  const html = await indexModule?.render(reqPath, context, {
-    client: compilationStats.find((x) => x.name === "client") || {},
-    legacy: compilationStats.find((x) => x.name === "legacy") || {},
-  });
+  const html = process.env.FRED_SIMPLE_HTML
+    ? `<!doctype html><meta charset="UTF-8">${await indexModule?.renderSimplified(reqPath, context)}`
+    : await indexModule?.render(reqPath, context, {
+        client: compilationStats.find((x) => x.name === "client") || {},
+        legacy: compilationStats.find((x) => x.name === "legacy") || {},
+      });
   parentPort?.postMessage({ html });
 } catch (error) {
   parentPort?.postMessage({ error });

package/components/doc/server.js

@@ -5,8 +5,16 @@ import { ServerComponent } from "../server/index.js";
 export class Doc extends ServerComponent {
   /**
    * @param {import("@fred").Context<import("@rari").DocPage>} context
-   */ render(context) {
+   */
+  render(context) {
     context.pageTitle = context.doc.pageTitle;
     return PageLayout.render(context, ReferenceLayout.render(context));
   }
+
+  /**
+   * @param {import("@fred").Context<import("@rari").DocPage>} context
+   */
+  renderSimplified(context) {
+    return ReferenceLayout.render(context);
+  }
 }

package/components/outer-layout/server.js

@@ -26,6 +26,9 @@ export class OuterLayout extends ServerComponent {
     if (!asyncStore) {
       throw new Error("asyncLocalStorage missing");
     }
+    if ("renderSimplified" in asyncStore) {
+      throw new Error("OuterLayout called from renderSimplified function");
+    }
     const { componentsUsed, componentsWithStylesInHead, compilationStats } =
       asyncStore;
 
@@ -173,15 +176,13 @@ export class OuterLayout extends ServerComponent {
       "og:title": title,
       "og:locale": context.locale.replace("-", "_"),
       "og:description": description,
-      "og:image":
-        "https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png",
+      "og:image": "https://developer.mozilla.org/mdn-social-image.46ac2375.png",
       "og:image:type": "image/png",
-      "og:image:height": "1080",
-      "og:image:width": "1920",
-      "og:image:alt":
-        "The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background.",
+      "og:image:height": "1024",
+      "og:image:width": "1024",
+      "og:image:alt": "The MDN logo",
       "og:site_name": "MDN Web Docs",
-      "twitter:card": "summary_large_image",
+      "twitter:card": "summary",
       "twitter:creator": "MozDevNet",
     };
 

package/components/reference-layout/server.js

@@ -44,4 +44,18 @@ export class ReferenceLayout extends ServerComponent {
       </div>
     `;
   }
+
+  /**
+   * @param {import("@fred").Context<import("@rari").DocPage>} context
+   */
+  renderSimplified(context) {
+    const { doc } = context;
+    const sections =
+      doc.body?.map((section) => ContentSection.render(context, section)) || [];
+
+    return html`
+      <h1>${doc.title}</h1>
+      ${BaselineIndicator.render(context)} ${sections}
+    `;
+  }
 }

package/components/server/async-local-storage.js

@@ -1,4 +1,15 @@
 import { AsyncLocalStorage } from "node:async_hooks";
 
-/** @type {AsyncLocalStorage<import("./types.js").AsyncLocalStorageContents>} */
+/**
+ * Store for internal context passed around components.
+ *
+ * Generally only used within the `ServerComponent` class itself,
+ * or very special server components (such as the `OuterLayout`).
+ *
+ * e.g. We add the rspack compilation stats for use in `OuterLayout`.
+ *
+ * Populated in `entry.ssr.js`.
+ *
+ * @type {AsyncLocalStorage<import("./types.js").FredLocalContents>}
+ */
 export const asyncLocalStorage = new AsyncLocalStorage();

package/components/server/index.js

@@ -24,6 +24,13 @@ export class ServerComponent {
     if (!asyncStore) {
       throw new Error("asyncLocalStorage missing");
     }
+
+    const component = new this();
+
+    if ("renderSimplified" in asyncStore) {
+      return component.renderSimplified(...args);
+    }
+
     const { componentsUsed, componentsWithStylesInHead, compilationStats } =
       asyncStore;
     const componentUsedBefore = componentsUsed.has(this.name);
@@ -35,7 +42,7 @@ export class ServerComponent {
       componentsUsed.add("legacy");
     }
 
-    let res = new this().render(...args);
+    let res = component.render(...args);
 
     if (!res || res === nothing) {
       if (!componentUsedBefore) {
@@ -73,4 +80,12 @@ export class ServerComponent {
   render(..._args) {
     throw new Error("Must be implemented by subclass");
   }
+
+  /**
+   * @param {...any} args
+   * @returns {any}
+   */
+  renderSimplified(...args) {
+    return this.render(...args);
+  }
 }

package/components/server/types.d.ts

@@ -1,5 +1,9 @@
-export interface AsyncLocalStorageContents {
-  componentsUsed: Set<string>;
-  componentsWithStylesInHead: Set<string>;
-  compilationStats: import("@fred").CompilationStats;
-}
+export type FredLocalContents =
+  | {
+      componentsUsed: Set<string>;
+      componentsWithStylesInHead: Set<string>;
+      compilationStats: import("@fred").CompilationStats;
+    }
+  | {
+      renderSimplified: true;
+    };

package/entry.ssr.js

@@ -2,6 +2,8 @@
 import { render as r } from "@lit-labs/ssr";
 import { collectResult } from "@lit-labs/ssr/lib/render-result.js";
 
+import { nothing } from "lit";
+
 import { Advertising } from "./components/advertising/server.js";
 import { BlogIndex } from "./components/blog-index/server.js";
 import { BlogPost } from "./components/blog-post/server.js";
@@ -54,7 +56,7 @@ export async function render(path, partialContext, compilationStats) {
     ...(await addFluent(locale)),
     ...partialContext,
   };
-  /** @type {import("./components/server/types.js").AsyncLocalStorageContents} */
+  /** @type {import("./components/server/types.js").FredLocalContents} */
   const storageContents = {
     componentsUsed: new Set(),
     componentsWithStylesInHead: new Set(),
@@ -130,3 +132,33 @@ export async function render(path, partialContext, compilationStats) {
     }),
   );
 }
+
+/**
+ * @param {string} path
+ * @param {import("@fred").PartialContext} partialContext
+ */
+export async function renderSimplified(path, partialContext) {
+  const locale = path.split("/")[1] || "en-US";
+  const context = {
+    path,
+    ...(await addFluent(locale)),
+    ...partialContext,
+  };
+  /** @type {import("./components/server/types.js").FredLocalContents} */
+  const storageContents = {
+    renderSimplified: true,
+  };
+  return asyncLocalStorage.run(storageContents, () =>
+    runWithContext({ locale }, async () => {
+      const component = await (async () => {
+        switch (context.renderer) {
+          case "Doc":
+            return Doc.render(context);
+          default:
+            return nothing;
+        }
+      })();
+      return await collectResult(r(component));
+    }),
+  );
+}