feat(writer-mode): add 'view on mdn' button

LeoMcA · LeoMcA · commit 84761699eefc · 2025-07-22T11:12:11.000Z
diff --git a/components/reference-layout/server.js b/components/reference-layout/server.js
@@ -1,12 +1,14 @@
-import { html } from "lit";
+import { html, nothing } from "lit";
 
 import { ArticleFooter } from "../article-footer/server.js";
 import { BaselineIndicator } from "../baseline-indicator/server.js";
 import { ContentSection } from "../content-section/server.js";
+import { WRITER_MODE } from "../env/index.js";
 import { LeftSidebar } from "../left-sidebar/server.js";
 import { ReferenceToc } from "../reference-toc/server.js";
 import { ServerComponent } from "../server/index.js";
 import { TranslationBanner } from "../translation-banner/server.js";
+import { WriterToolbar } from "../writer-toolbar/server.js";
 
 export class ReferenceLayout extends ServerComponent {
   /**
@@ -22,6 +24,7 @@ export class ReferenceLayout extends ServerComponent {
       <div class="reference-layout">
         <main id="content" class="reference-layout__content">
           <div class="reference-layout__header">
+            ${WRITER_MODE ? WriterToolbar.render(context) : nothing}
             ${TranslationBanner.render(context)}
             <h1>${doc.title}</h1>
             ${BaselineIndicator.render(context)} ${description}
diff --git a/components/writer-toolbar/server.css b/components/writer-toolbar/server.css
@@ -0,0 +1,7 @@
+.writer-toolbar {
+  margin-top: 1.5rem;
+
+  background: var(--color-background-primary);
+  border: 1px solid var(--color-border-primary);
+  border-radius: 0.25rem;
+}
diff --git a/components/writer-toolbar/server.js b/components/writer-toolbar/server.js
@@ -0,0 +1,21 @@
+import { html } from "lit";
+
+import { Button } from "../button/server.js";
+import { ServerComponent } from "../server/index.js";
+
+export class WriterToolbar extends ServerComponent {
+  /**
+   * @param {import("@fred").Context<import("@rari").DocPage>} context
+   */
+  render(context) {
+    const prodUrl = new URL(context.url, "https://developer.mozilla.org");
+
+    return html`<div class="writer-toolbar">
+      ${Button.render(context, {
+        label: context.l10n`View on MDN`,
+        href: prodUrl.toString(),
+        variant: "plain",
+      })}
+    </div>`;
+  }
+}
