@mdn/fred 0.1.0 → 0.2.0

package/dist/ssr/results-icon.b469eb939df034e7.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19"><path d="M15.45 12.73 20 4.86v13.69H0v-18h2v12.54l5.5-9.54L14 7.33 18.24 0l1.73 1-5.23 9.05L8.23 6.3 2.31 16.55h2.26l4.39-7.56z"/></svg>

package/dist/ssr/stats.json

@@ -9,11 +9,11 @@
       "assets": [
         {
           "name": "index.js",
-          "size": 1399989
+          "size": 1403647
         }
       ],
       "filteredAssets": 0,
-      "assetsSize": 1399989,
+      "assetsSize": 1403647,
       "auxiliaryAssets": [
         {
           "name": "desktop-saving-page.bbb8eedefb3e848f.png",
@@ -55,14 +55,14 @@
           "name": "mobile-open-article-actions.bb9cc7ddc6a32e29.png",
           "size": 12911
         },
-        {
-          "name": "monitor.11d946399ebf690d.svg",
-          "size": 262
-        },
         {
           "name": "scrimba-logo.0c5b5b4efd2b23dc.svg",
           "size": 3160
         },
+        {
+          "name": "monitor.11d946399ebf690d.svg",
+          "size": 262
+        },
         {
           "name": "mobile-add-note.4079b8dbc761053b.png",
           "size": 13784
@@ -91,26 +91,26 @@
           "name": "playground-example.e8bb2d0fba1ddf61.png",
           "size": 104164
         },
-        {
-          "name": "updates_search.135043f07c29f425.png",
-          "size": 44837
-        },
         {
           "name": "cog.f23af856fab34421.svg",
           "size": 431
         },
         {
-          "name": "desktop-collections-dashboard-delete.89fa6e8e94365a8f.png",
-          "size": 71180
+          "name": "updates_search.135043f07c29f425.png",
+          "size": 44837
         },
         {
-          "name": "lightbulb.f54f9e803373ffd2.svg",
-          "size": 312
+          "name": "desktop-collections-dashboard-delete.89fa6e8e94365a8f.png",
+          "size": 71180
         },
         {
           "name": "desktop-collections-three-dot-menu.d249007e01bd16d2.png",
           "size": 92505
         },
+        {
+          "name": "lightbulb.f54f9e803373ffd2.svg",
+          "size": 312
+        },
         {
           "name": "chrome.63fe87abc1b86c49.svg",
           "size": 451
@@ -139,26 +139,26 @@
           "name": "report-feedback.b19751ac764910b5.png",
           "size": 133704
         },
-        {
-          "name": "samsung-internet.f241f6953ef66c29.svg",
-          "size": 966
-        },
         {
           "name": "webview.69c6470100eb7da1.svg",
           "size": 456
         },
         {
-          "name": "filter.b77a4ccbfb57e2ef.svg",
-          "size": 345
+          "name": "samsung-internet.f241f6953ef66c29.svg",
+          "size": 966
         },
         {
-          "name": "circle-help.574fc498f309634e.svg",
-          "size": 277
+          "name": "filter.b77a4ccbfb57e2ef.svg",
+          "size": 345
         },
         {
           "name": "bookmark-check.22b3511032ad3541.svg",
           "size": 272
         },
+        {
+          "name": "circle-help.574fc498f309634e.svg",
+          "size": 277
+        },
         {
           "name": "playground-sample.4df135480b78db7b.png",
           "size": 63058
@@ -175,14 +175,14 @@
           "name": "example-question-editing.d0a77e1a7e21b7c0.png",
           "size": 124679
         },
-        {
-          "name": "mobile-collections-dashboard-edit-entry.a33fc6d7fe02231a.png",
-          "size": 52042
-        },
         {
           "name": "triangle-alert.cff4c57ccef57da3.svg",
           "size": 286
         },
+        {
+          "name": "mobile-collections-dashboard-edit-entry.a33fc6d7fe02231a.png",
+          "size": 52042
+        },
         {
           "name": "circle-slash.c109868d4bdda8e2.svg",
           "size": 240
@@ -191,14 +191,14 @@
           "name": "desktop-offline-user-menu.3dcb4eed9c4a236c.png",
           "size": 8173
         },
-        {
-          "name": "bookmark.431a822761ea8a1e.svg",
-          "size": 247
-        },
         {
           "name": "smartphone.1a49e06c0e294c6b.svg",
           "size": 265
         },
+        {
+          "name": "bookmark.431a822761ea8a1e.svg",
+          "size": 247
+        },
         {
           "name": "nodejs.efc13657f2bf62f7.svg",
           "size": 311
@@ -211,14 +211,14 @@
           "name": "star-notification.da1d20efb93ff663.png",
           "size": 57142
         },
-        {
-          "name": "edge.29d1f7df37cf6b7b.svg",
-          "size": 868
-        },
         {
           "name": "mobile-collections-dashboard-edit.f9425801f0496a6a.png",
           "size": 107307
         },
+        {
+          "name": "edge.29d1f7df37cf6b7b.svg",
+          "size": 868
+        },
         {
           "name": "updates_filter.1c6bfe2143f10758.png",
           "size": 39502
@@ -291,6 +291,10 @@
           "name": "landing-scrim.bab0746da9622c1c.png",
           "size": 46620
         },
+        {
+          "name": "results-icon.b469eb939df034e7.svg",
+          "size": 219
+        },
         {
           "name": "cancel.7362f2cdf3515e0d.svg",
           "size": 219
@@ -317,7 +321,7 @@
         },
         {
           "name": "index.js.map",
-          "size": 4154574
+          "size": 4171140
         },
         {
           "name": "deno.aed70d20abbf1067.svg",
@@ -339,14 +343,14 @@
           "name": "desktop-offline-clear-data.c09fc9bdc06a57cc.png",
           "size": 18641
         },
-        {
-          "name": "fullscreen-enter.452bcbaed6904ec7.svg",
-          "size": 291
-        },
         {
           "name": "info.d40b80f84482feba.svg",
           "size": 248
         },
+        {
+          "name": "fullscreen-enter.452bcbaed6904ec7.svg",
+          "size": 291
+        },
         {
           "name": "external-link.4f3a2dc8e402cae5.svg",
           "size": 275
@@ -359,6 +363,10 @@
           "name": "rate-answers.50835df6a04a1c77.png",
           "size": 147834
         },
+        {
+          "name": "summary-icon.eff7a61e59b7e02f.svg",
+          "size": 411
+        },
         {
           "name": "curriculum-partner-banner-illustration-large-light.be191e3b1b4cbd8c.svg",
           "size": 19422
@@ -435,22 +443,22 @@
           "name": "check.0440cf8a72ac2317.svg",
           "size": 214
         },
-        {
-          "name": "chevron-right.a81fc439dd5e4839.svg",
-          "size": 212
-        },
         {
           "name": "mobile-save-page-step-one.f058692ffb0ac877.png",
           "size": 52200
         },
         {
-          "name": "unwatch-page.60a0cb971631515e.png",
-          "size": 106041
+          "name": "chevron-right.a81fc439dd5e4839.svg",
+          "size": 212
         },
         {
           "name": "scrim-hexagons.e59318adb5550050.svg",
           "size": 947
         },
+        {
+          "name": "unwatch-page.60a0cb971631515e.png",
+          "size": 106041
+        },
         {
           "name": "opera.ebd6fbbb8600e404.svg",
           "size": 600
@@ -500,7 +508,7 @@
           "size": 135602
         }
       ],
-      "auxiliaryAssetsSize": 8615207,
+      "auxiliaryAssetsSize": 8632403,
       "children": {},
       "childAssets": {}
     }

package/dist/ssr/summary-icon.eff7a61e59b7e02f.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="21" viewBox="0 0 16 21"><path d="M9 6.041c0 .89.721 1.611 1.61 1.611 1.436 0 2.155-1.735 1.14-2.75S9 4.606 9 6.042M2 .652h7.172a2 2 0 0 1 1.414.586l4.828 4.829A2 2 0 0 1 16 7.48v11.171a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-16c0-1.11.89-2 2-2m1 17a1 1 0 1 0 2 0v-4a1 1 0 0 0-2 0zm4 0a1 1 0 1 0 2 0v-6a1 1 0 0 0-2 0zm4 0a1 1 0 1 0 2 0v-2a1 1 0 0 0-2 0z"/></svg>

package/entry.client.js

@@ -3,11 +3,11 @@ import "@lit-labs/ssr-client/lit-element-hydrate-support.js";
 
 // hooks:
 import "./hooks/glean-init.js";
+import "./hooks/dialog-closedby.js";
 import "./hooks/load-elements.js";
 import "./hooks/sidebar-scroll-to-current.js";
 import "./components/navigation/hook.js";
 import "./hooks/toc-highlight.js";
 import "./hooks/code-examples.js";
 import "./hooks/live-samples.js";
-import "./hooks/css-formal-syntax.js";
 import "./hooks/skip-to-search.js";

package/entry.ssr.js

@@ -40,10 +40,10 @@ for (const [name, def] of customElements.__definitions) {
 
 /**
  * @param {string} path
- * @param {import("@rari").BuiltPage} page
+ * @param {import("@fred").PartialContext} partialContext
  * @param {import("@fred").CompilationStats} compilationStats
  */
-export async function render(path, page, compilationStats) {
+export async function render(path, partialContext, compilationStats) {
   const locale = path.split("/")[1] || "en-US";
   if (locale === "qa") {
     path = path.replace("/qa/", "/en-US/");
@@ -52,9 +52,8 @@ export async function render(path, page, compilationStats) {
   const context = {
     path,
     ...(await addFluent(locale)),
-    ...page,
+    ...partialContext,
   };
-
   /** @type {import("./components/server/types.js").AsyncLocalStorageContents} */
   const storageContents = {
     componentsUsed: new Set(),

package/hooks/dialog-closedby.js

@@ -0,0 +1,42 @@
+/**
+ * dialog closedby polyfill based on https://github.com/tak-dcxi/dialog-closedby-polyfill
+ *
+ * @license MIT
+ *
+ * Copyright (c) 2025 Takahiro Arai
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+if (!("closedBy" in HTMLDialogElement.prototype)) {
+  addEventListener("click", (event) => {
+    const source = event.composedPath()[0];
+    if (
+      source instanceof HTMLDialogElement &&
+      source.getAttribute("closedby") === "any"
+    ) {
+      const rect = source.getBoundingClientRect();
+      const { clientX: x, clientY: y } = event;
+      const inside =
+        rect.top <= y && y <= rect.bottom && rect.left <= x && x <= rect.right;
+
+      if (!inside) source.close();
+    }
+  });
+}

package/l10n/de.ftl

@@ -6,7 +6,7 @@ reference-toc-header = In diesem Artikel
 
 footer-tagline = Dein Bauplan für ein besseres Internet.
 footer-mofo = Besuche die gemeinnützige Muttergesellschaft der <a data-l10n-name="moco">Mozilla Corporation</a>, die <a data-l10n-name="mofo">Mozilla Foundation</a>.
-footer-copyright = Teile dieses Inhalts sind ©1998–2024 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter <a data-l10n-name="cc">einer Creative-Commons-Lizenz</a>.
+footer-copyright = Teile dieses Inhalts sind ©1998–{ $year } von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter <a data-l10n-name="cc">einer Creative-Commons-Lizenz</a>.
 
 search-modal-site-search = Erweiterte Suche nach <em>{ $query }</em>
 
@@ -39,7 +39,7 @@ No = Nein
 Submit = Abschicken
 Yes = Ja
 
-Report = Report
+obs-report = Report
 
 obs-title = HTTP Observatory
 obs-landing-intro = Seit 2016 verbessert HTTP Observatory die Sicherheit durch Analyse der Einhaltung bewährter Sicherheitspraktiken. Es hat durch 47 Millionen Scans Einblicke in über 6,9 Millionen Websites geliefert.

package/l10n/en-US.ftl

@@ -1,10 +1,10 @@
 # TODO Use comments, see: https://firefox-source-docs.mozilla.org/l10n/fluent/review.html#comments
 # TODO Consider using terms, see: https://firefox-source-docs.mozilla.org/l10n/fluent/review.html#terms and https://projectfluent.org/fluent/guide/references.html#message-references
 
-article-footer-last-modified = This page was last modified on <time data-l10n-name="date">{ $date }</timestamp> by <a data-l10n-name="contributors">MDN contributors</a>.
+article-footer-last-modified = This page was last modified on <time data-l10n-name="date">{ $date }</time> by <a data-l10n-name="contributors">MDN contributors</a>.
 article-footer-source-title = Folder: { $folder } (Opens in a new tab)
 
-baseline-asterisk = { $asterisk } Some parts of this feature may have varying levels of support.
+baseline-asterisk = Some parts of this feature may have varying levels of support.
 baseline-high-extra = This feature is well established and works across many devices and browser versions. It’s been available across browsers since { $date }.
 baseline-low-extra = Since { $date }, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
 baseline-not-extra = This feature is not Baseline because it does not work in some of the most widely-used browsers.
@@ -24,7 +24,7 @@ not-found-back = Go back to the home page
 reference-toc-header = In this article
 
 footer-mofo = Visit <a data-l10n-name="moco">Mozilla Corporation’s</a> not-for-profit parent, the <a data-l10n-name="mofo">Mozilla Foundation</a>.
-footer-copyright = Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a data-l10n-name="cc">a Creative Commons license</a>.
+footer-copyright = Portions of this content are ©1998–{ $year } by individual mozilla.org contributors. Content available under <a data-l10n-name="cc">a Creative Commons license</a>.
 
 search-modal-site-search = Site search for <em>{ $query }</em>
 
@@ -50,14 +50,14 @@ blog-post-not-found = Blog post not found.
 blog-previous = Previous post
 blog-next = Next post
 
-Report = Report
-
-obs-title = HTTP Observatory
-obs-landing-intro = Launched in 2016, the HTTP Observatory enhances web security by analyzing compliance with best security practices. It has provided insights to over 6.9 million websites through 47 million scans.
-obs-assessment = Developed by Mozilla, the HTTP Observatory performs an in-depth assessment of a site’s HTTP headers and other key security configurations.
+-brand-name-obs = HTTP Observatory
+obs-report = Report
+obs-title = { -brand-name-obs }
+obs-landing-intro = Launched in 2016, the { -brand-name-obs } enhances web security by analyzing compliance with best security practices. It has provided insights to over 6.9 million websites through 47 million scans.
+obs-assessment = Developed by Mozilla, the { -brand-name-obs } performs an in-depth assessment of a site’s HTTP headers and other key security configurations.
 obs-scanning = Its automated scanning process provides developers and website administrators with detailed, actionable feedback, focusing on identifying and addressing potential security vulnerabilities.
 obs-security = The tool is instrumental in helping developers and website administrators strengthen their sites against common security threats in a constantly advancing digital environment.
-obs-mdn = The HTTP Observatory provides effective security insights, guided by Mozilla's expertise and commitment to a safer and more secure internet and based on well-established trends and guidelines.
+obs-mdn = The { -brand-name-obs } provides effective security insights, guided by Mozilla's expertise and commitment to a safer and more secure internet and based on well-established trends and guidelines.
 
 
 compat-loading = Loading…
@@ -108,7 +108,7 @@ compat-support-flags =
     [one] {" "}to <code data-l10n-name="value">{ $flag_value }</code>
     *[other] {""}
   }{"."}
-  { NUMBER($flag_type) ->
+  { $flag_type ->
     [preference] To change preferences in { $browser_name }, visit { $browser_pref_url }.
     *[other] {""}
   }

package/legacy/index.tsx

@@ -8,6 +8,7 @@ import { GleanProvider } from "@mdn/yari/client/src/telemetry/glean-context";
 import "@mdn/yari/client/src/app.scss";
 import "@mdn/yari/client/src/document/index.scss";
 
+import "./legacy.css";
 import "../hooks/legacy-theme-controller.js";
 
 const root = ReactDOM.createRoot(document.getElementById("root")!);

package/legacy/legacy.css

@@ -0,0 +1,5 @@
+:root {
+  --top-nav-height: var(--sticky-header-height);
+  --sticky-header-without-actions-height: var(--sticky-header-height);
+  --z-index-mid: calc(var(--z-index-sticky-header) - 1);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdn/fred",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "repository": "https://github.com/mdn/fred",
   "license": "MPL-2.0",
   "author": "MDN Web Docs",
@@ -41,11 +41,11 @@
     "@fluent/bundle": "^0.19.0",
     "@lit-labs/ssr": "^3.3.1",
     "@lit-labs/ssr-client": "^1.1.7",
-    "@lit/task": "^1.0.2",
+    "@lit/task": "^1.0.3",
     "@mdn/watify": "^1.1.3",
-    "@mozilla/glean": "^5.0.4",
+    "@mozilla/glean": "^5.0.5",
     "codemirror": "^6.0.1",
-    "compression": "^1.8.0",
+    "compression": "^1.8.1",
     "concurrently": "^9.2.0",
     "cookie-parser": "^1.4.7",
     "express": "^5.0.1",
@@ -53,8 +53,9 @@
     "he": "^1.2.0",
     "http-proxy-middleware": "^3.0.3",
     "insane": "^2.6.2",
-    "lit": "^3.2.1",
-    "lit-html": "^3.2.1",
+    "lit": "^3.3.1",
+    "lit-html": "^3.3.1",
+    "open-editor": "^5.1.0",
     "prism-svelte": "^0.5.0",
     "prismjs": "^1.29.0"
   },
@@ -63,18 +64,18 @@
     "@codemirror/commands": "^6.8.1",
     "@codemirror/language": "^6.11.0",
     "@codemirror/lint": "^6.8.5",
-    "@codemirror/view": "^6.36.6",
+    "@codemirror/view": "^6.38.1",
     "@csstools/postcss-global-data": "^3.0.0",
     "@eslint/compat": "^1.2.7",
-    "@eslint/js": "^9.30.1",
+    "@eslint/js": "^9.32.0",
     "@jackolope/lit-analyzer": "^3.2.0",
-    "@jackolope/ts-lit-plugin": "^3.1.5",
-    "@mdn/browser-compat-data": "^6.0.30",
+    "@jackolope/ts-lit-plugin": "^3.1.6",
+    "@mdn/browser-compat-data": "^6.0.36",
     "@mdn/rari": "0.1.46",
-    "@mdn/yari": "^5.0.1",
-    "@rsdoctor/rspack-plugin": "^1.1.8",
-    "@rspack/cli": "^1.4.6",
-    "@rspack/core": "^1.4.6",
+    "@mdn/yari": "^5.0.2",
+    "@rsdoctor/rspack-plugin": "^1.1.10",
+    "@rspack/cli": "^1.4.10",
+    "@rspack/core": "^1.4.10",
     "@svgr/webpack": "^8.1.0",
     "@types/compression": "^1.8.1",
     "@types/cookie-parser": "^1.4.8",
@@ -83,19 +84,19 @@
     "@types/insane": "^1.0.0",
     "@types/prismjs": "^1.26.5",
     "@types/webpack-hot-middleware": "^2.25.9",
-    "@typescript-eslint/eslint-plugin": "^8.36.0",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
-    "eslint": "^9.30.1",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsdoc": "^51.3.4",
+    "eslint-plugin-jsdoc": "^51.4.1",
     "eslint-plugin-lit": "^2.0.0",
-    "eslint-plugin-n": "^17.21.0",
+    "eslint-plugin-n": "^17.21.3",
     "eslint-plugin-unicorn": "^59.0.0",
     "eslint-plugin-wc": "^3.0.0",
     "globals": "^16.3.0",
-    "lefthook": "^1.12.1",
+    "lefthook": "^1.12.2",
     "postcss": "^8.5.3",
     "postcss-custom-media": "^11.0.5",
     "postcss-loader": "^8.1.1",
@@ -106,7 +107,7 @@
     "sass-loader": "^16.0.5",
     "source-map-support": "^0.5.21",
     "spdy": "^4.0.2",
-    "stylelint": "^16.21.1",
+    "stylelint": "^16.23.0",
     "stylelint-config-recess-order": "^7.1.0",
     "stylelint-config-standard": "^38.0.0",
     "svgo-loader": "^4.0.0",

package/rspack.config.js

@@ -12,6 +12,7 @@ import { StatsWriterPlugin } from "webpack-stats-plugin";
 
 import { CSPHashPlugin } from "./build/plugins/csp-hash.js";
 import { GenerateElementMapPlugin } from "./build/plugins/generate-element-map.js";
+import { override as svgoOverride } from "./svgo.config.js";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -80,15 +81,6 @@ const common = {
     new StatsWriterPlugin({
       fields: ["publicPath", "entrypoints"],
     }),
-    new rspack.DefinePlugin({
-      "process.env": JSON.stringify({
-        ...Object.fromEntries(
-          Object.entries(process.env).filter(([key]) =>
-            key.startsWith("FRED_"),
-          ),
-        ),
-      }),
-    }),
   ],
   optimization: {
     minimizer: [
@@ -156,17 +148,41 @@ const common = {
 
 /** @type {import("@rspack/core").RspackOptions} */
 const clientAndSsrCommon = {
+  plugins: [
+    new rspack.DefinePlugin({
+      "process.env": JSON.stringify({
+        ...Object.fromEntries(
+          Object.entries(process.env).filter(([key]) =>
+            key.startsWith("FRED_"),
+          ),
+        ),
+      }),
+    }),
+  ],
   module: {
     rules: [
       {
         test: /\.svg$/i,
-        loader: "svgo-loader",
         oneOf: [
           {
             resourceQuery: /lit/,
-            loader: "./build/loaders/lit-svg.js",
+            use: ["./build/loaders/lit-svg.js", "svgo-loader"],
           },
           {
+            loader: "svgo-loader",
+            options: svgoOverride(
+              {
+                cleanupIds: false,
+              },
+              [
+                {
+                  name: "cleanupIds",
+                  params: {
+                    preserve: ["light", "dark"],
+                  },
+                },
+              ],
+            ),
             type: "asset/resource",
           },
         ],

package/server.js

@@ -4,9 +4,10 @@ import { Worker } from "node:worker_threads";
 
 import cookieParser from "cookie-parser";
 import express from "express";
-
 import { createProxyMiddleware } from "http-proxy-middleware";
+import openEditor from "open-editor";
 
+import { WRITER_MODE } from "./components/env/index.js";
 import { handleRunner } from "./vendor/yari/libs/play/index.js";
 
 import "source-map-support/register.js";
@@ -45,9 +46,14 @@ if (process.env.NODE_ENV === "production") {
 async function serverRenderMiddleware(req, res, page) {
   try {
     let html;
+    /** @type {import("@fred").PartialContext} */
+    const context = {
+      localServer: true,
+      ...page,
+    };
     if (prodRender) {
       // implies devMode === false
-      html = await prodRender(page);
+      html = await prodRender(context);
     } else {
       /** @type {Stats} */
       const stats = res.locals.webpack.devMiddleware.stats;
@@ -65,7 +71,7 @@ async function serverRenderMiddleware(req, res, page) {
             /** @type {import("./build/types.js").WorkerData} */
             workerData: {
               reqPath: req.path,
-              page,
+              context,
               compilationStats,
             },
           },
@@ -177,6 +183,21 @@ export async function startServer() {
         },
   );
 
+  if (WRITER_MODE) {
+    app.get("/_open", async (req, _res) => {
+      const { filepath } = req.query;
+      const { CONTENT_ROOT, CONTENT_TRANSLATED_ROOT } = process.env;
+      if (typeof filepath === "string") {
+        const absolutePath = fileURLToPath(
+          import.meta.resolve(
+            `${filepath.startsWith("en-us") ? CONTENT_ROOT : CONTENT_TRANSLATED_ROOT}/${filepath}`,
+          ),
+        );
+        openEditor([absolutePath]);
+      }
+    });
+  }
+
   const RARI_URL = process.env.RARI_URL || "http://localhost:8083";
   app.use(
     createProxyMiddleware({
@@ -277,6 +298,19 @@ export async function startServer() {
     );
   }
 
+  // live sample assets
+  play.use(
+    createProxyMiddleware({
+      target: RARI_URL,
+      changeOrigin: true,
+      proxyTimeout: 20_000,
+      timeout: 20_000,
+      headers: {
+        Connection: "keep-alive",
+      },
+    }),
+  );
+
   const httpServer = app.listen(3000, () => {
     console.log(
       `Server started at ${http2 ? "https" : "http"}://localhost:3000`,