chore(l10n): extract strings, add docs, load locales on demand

.github/workflows/test.yml

@@ -46,6 +46,9 @@ jobs:
       - name: Run tsc
         run: npx tsc --noEmit
 
+      - name: Lint l10n strings
+        run: npm run l10n:lint
+
   test:
     runs-on: ubuntu-latest
     defaults:

README.md

@@ -29,6 +29,10 @@ 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
 
+## L10n
+
+See [the l10n README](./l10n/README.md).
+
 ### Accessing from non-localhost
 
 If you want to access fred from a different machine, you'll need to run with certain options:

components/a11y-menu/server.js

@@ -8,8 +8,18 @@ export class A11yMenu extends ServerComponent {
    */
   render(context) {
     return html`<ul class="a11y-menu">
-      <li><a href="#content">${context.l10n`Skip to main content`}</a></li>
-      <li><a href="#search">${context.l10n`Skip to search`}</a></li>
+      <li>
+        <a href="#content"
+          >${context.l10n(
+            "a11y-menu-skip-to-main-content",
+          )`Skip to main content`}</a
+        >
+      </li>
+      <li>
+        <a href="#search"
+          >${context.l10n("a11y-menu-skip-to-search")`Skip to search`}</a
+        >
+      </li>
     </ul>`;
   }
 }

components/article-footer/server.js

@@ -38,7 +38,9 @@ function Contribute(context) {
   return html`<a
     class="article-footer__contribute"
     href=${`/${context.locale}/docs/MDN/Community/Getting_started`}
-    >${context.l10n`Learn how to contribute`}</a
+    >${context.l10n(
+      "article-footer-learn-how-to-contribute",
+    )`Learn how to contribute`}</a
   >`;
 }
 
@@ -112,7 +114,9 @@ function GitHubSourceLink(context) {
     rel="noopener"
     >${locale === "de"
       ? "Übersetzung auf GitHub anzeigen"
-      : context.l10n`View this page on GitHub`}</a
+      : context.l10n(
+          "article-footer-view-this-page-on-github",
+        )`View this page on GitHub`}</a
   >`;
 }
 
@@ -146,12 +150,16 @@ function GitHubIssueLink(context) {
   return html`<a
     class="external"
     href=${url.href}
-    title=${context.l10n`This will take you to GitHub to file a new issue.`}
+    title=${context.l10n(
+      "article-footer-this-will-take-you-to-github-to",
+    )`This will take you to GitHub to file a new issue.`}
     target="_blank"
     rel="noopener"
     >${locale === "de"
       ? "Fehler mit dieser Übersetzung melden"
-      : context.l10n`Report a problem with this content`}</a
+      : context.l10n(
+          "article-footer-report-a-problem-with-this-conte",
+        )`Report a problem with this content`}</a
   >`;
 }
 

components/baseline-indicator/server.js

@@ -137,26 +137,34 @@ export class BaselineIndicator extends ServerComponent {
           class="indicator"
           role="img"
           aria-label=${level === "not"
-            ? context.l10n`Baseline Cross`
-            : context.l10n`Baseline Check`}
+            ? context.l10n("baseline-indicator-baseline-cross")`Baseline Cross`
+            : context.l10n("baseline-indicator-baseline-check")`Baseline Check`}
         ></span>
         <div class="status-title">
           ${level === "not"
             ? html`<span class="not-bold"
-                >${context.l10n`Limited availability`}</span
+                >${context.l10n(
+                  "baseline-indicator-limited-availability",
+                )`Limited availability`}</span
               >`
             : html`
-                ${context.l10n`Baseline`}
+                ${context.l10n("baseline-indicator-baseline")`Baseline`}
                 <span class="not-bold">
                   ${level === "high"
-                    ? context.l10n`Widely available`
+                    ? context.l10n(
+                        "baseline-indicator-widely-available",
+                      )`Widely available`
                     : low_date?.getFullYear()}
                 </span>
                 ${status.asterisk && " *"}
               `}
         </div>
         ${level === "low"
-          ? html`<div class="pill">${context.l10n`Newly available`}</div>`
+          ? html`<div class="pill">
+              ${context.l10n(
+                "baseline-indicator-newly-available",
+              )`Newly available`}
+            </div>`
           : nothing}
         <div class="browsers">
           ${ENGINES.map(
@@ -174,7 +182,7 @@ export class BaselineIndicator extends ServerComponent {
                         isBrowserSupported(browser) ? "supported" : ""
                       }`}
                       role="img"
-                      aria-label=${`${browser.name} ${isBrowserSupported(browser) ? context.l10n`check` : context.l10n`cross`}`}
+                      aria-label=${`${browser.name} ${isBrowserSupported(browser) ? context.l10n("baseline-indicator-check")`check` : context.l10n("baseline-indicator-cross")`cross`}`}
                     ></span>`,
                 )}
               </span>`,
@@ -219,12 +227,14 @@ export class BaselineIndicator extends ServerComponent {
               target="_blank"
               class="learn-more"
             >
-              ${context.l10n`Learn more`}
+              ${context.l10n("baseline-indicator-learn-more")`Learn more`}
             </a>
           </li>
           <li>
             <a href=${bcdLink} data-glean-id="baseline_link_bcd_table">
-              ${context.l10n`See full compatibility`}
+              ${context.l10n(
+                "baseline-indicator-see-full-compatibility",
+              )`See full compatibility`}
             </a>
           </li>
           <li>
@@ -235,7 +245,9 @@ export class BaselineIndicator extends ServerComponent {
               target="_blank"
               rel="noreferrer"
             >
-              ${context.l10n`Report feedback`}
+              ${context.l10n(
+                "baseline-indicator-report-feedback",
+              )`Report feedback`}
             </a>
           </li>
         </ul>

components/blog-index/server.js

@@ -84,7 +84,9 @@ export class BlogIndex extends ServerComponent {
       html`
         <div id="content" class="blog-index">
           <header class="blog-index__header">
-            <h1>${context.l10n`Blog it better`}</h1>
+            <h1>
+              ${context.l10n("blog-index-blog-it-better")`Blog it better`}
+            </h1>
           </header>
           <div class="blog-index__main">
             <section class="blog-index__articles">

components/collection-save-button/element.js

@@ -199,16 +199,22 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
               <button
                 class="collection-save-button"
                 data-state=${this._bookmarks.value?.length ? "remove" : "save"}
-                title=${this.l10n`Save in collection`}
+                title=${this.l10n(
+                  "collection-save-button-save-in-collection",
+                )`Save in collection`}
                 @click=${this._open}
               >
                 <span
                   >${this._bookmarks.value?.length
-                    ? this.l10n`Remove`
-                    : this.l10n`Save`}</span
+                    ? this.l10n("collection-save-button-remove")`Remove`
+                    : this.l10n("collection-save-button-save")`Save`}</span
                 >
               </button>
-              <mdn-modal modal-title=${this.l10n`Add to collection`}>
+              <mdn-modal
+                modal-title=${this.l10n(
+                  "collection-save-button-add-to-collection",
+                )`Add to collection`}
+              >
                 ${this._bookmarks.render({
                   initial: () => html`<progress></progress>`,
                   pending: () => html`<progress></progress>`,
@@ -218,7 +224,9 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
                       pending: () => html`<progress></progress>`,
                       complete: (collections) => html`
                         <label>
-                          ${this.l10n`Collection:`}
+                          ${this.l10n(
+                            "collection-save-button-collection",
+                          )`Collection:`}
                           <select
                             .value=${this._item?.collection_id}
                             @change=${this._selectChange}
@@ -237,7 +245,9 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
                                     ? "★"
                                     : "☆"}
                                   ${collection.name === "Default"
-                                    ? this.l10n`Saved articles`
+                                    ? this.l10n(
+                                        "collection-save-button-saved-articles",
+                                      )`Saved articles`
                                     : collection.name}
                                 </option>
                               `,
@@ -246,31 +256,36 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
                               ——————————
                             </option>
                             <option value=${ADD_VALUE}>
-                              + ${this.l10n`New collection`}
+                              +
+                              ${this.l10n(
+                                "collection-save-button-new-collection",
+                              )`New collection`}
                             </option>
                           </select>
                         </label>
                         <label>
-                          ${this.l10n`Name:`}
+                          ${this.l10n("collection-save-button-name")`Name:`}
                           <input .value=${this._item?.title || this.docTitle} />
                         </label>
                         <label>
-                          ${this.l10n`Note:`}
+                          ${this.l10n("collection-save-button-note")`Note:`}
                           <textarea
                             .value=${this._item?.notes || ""}
                           ></textarea>
                         </label>
                         <mdn-button @click=${this._submit}>
                           ${this._pending && this._lastAction === "save"
-                            ? this.l10n`Saving…`
-                            : this.l10n`Save`}
+                            ? this.l10n(
+                                "collection-save-button-saving",
+                              )`Saving…`
+                            : this.l10n("collection-save-button-save")`Save`}
                         </mdn-button>
                         <mdn-button
                           @click=${this._cancel}
                           ?disabled=${this._pending}
                           variant="secondary"
                         >
-                          ${this.l10n`Cancel`}
+                          ${this.l10n("collection-save-button-cancel")`Cancel`}
                         </mdn-button>
                         ${bookmarks?.length
                           ? html`<mdn-button
@@ -282,8 +297,12 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
                               !isCurrentInCollection}
                             >
                               ${this._pending && this._lastAction === "delete"
-                                ? this.l10n`Deleting…`
-                                : this.l10n`Delete`}
+                                ? this.l10n(
+                                    "collection-save-button-deleting",
+                                  )`Deleting…`
+                                : this.l10n(
+                                    "collection-save-button-delete",
+                                  )`Delete`}
                             </mdn-button>`
                           : nothing}
                       `,

components/color-theme/element.js

@@ -19,8 +19,8 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
     this._mode = "light dark";
     this._options = Object.entries({
       "light dark": this.l10n("theme-default")`OS default`,
-      light: this.l10n`Light`,
-      dark: this.l10n`Dark`,
+      light: this.l10n("color-theme-light")`Light`,
+      dark: this.l10n("color-theme-dark")`Dark`,
     });
   }
 
@@ -68,9 +68,11 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
           class="color-theme__button"
           data-mode=${this._mode}
           type="button"
-          aria-label=${this.l10n`Switch color theme`}
+          aria-label=${this.l10n(
+            "color-theme-switch-color-theme",
+          )`Switch color theme`}
         >
-          <span>${this.l10n`Theme`}</span>
+          <span>${this.l10n("color-theme-theme")`Theme`}</span>
         </button>
         <div
           slot="dropdown"

components/content-feedback/element.js

@@ -89,19 +89,25 @@ export class MDNContentFeedback extends L10nMixin(LitElement) {
     return [
       {
         key: "outdated",
-        label: this.l10n`Content is out of date`,
+        label: this.l10n(
+          "content-feedback-content-is-out-of-date",
+        )`Content is out of date`,
       },
       {
         key: "incomplete",
-        label: this.l10n`Missing information`,
+        label: this.l10n(
+          "content-feedback-missing-information",
+        )`Missing information`,
       },
       {
         key: "code_examples",
-        label: this.l10n`Code examples not working as expected`,
+        label: this.l10n(
+          "content-feedback-code-examples-not-working-as-exp",
+        )`Code examples not working as expected`,
       },
       {
         key: "other",
-        label: this.l10n`Other`,
+        label: this.l10n("content-feedback-other")`Other`,
       },
     ];
   }
@@ -120,7 +126,7 @@ export class MDNContentFeedback extends L10nMixin(LitElement) {
           variant="secondary"
           action="positive"
         >
-          ${this.l10n`Yes`}
+          ${this.l10n("content-feedback-yes")`Yes`}
         </mdn-button>
         <mdn-button
           data-vote="no"
@@ -129,7 +135,7 @@ export class MDNContentFeedback extends L10nMixin(LitElement) {
           variant="secondary"
           action="negative"
         >
-          ${this.l10n`No`}
+          ${this.l10n("content-feedback-no")`No`}
         </mdn-button>
       </div>`;
   }
@@ -166,7 +172,7 @@ export class MDNContentFeedback extends L10nMixin(LitElement) {
       )}
       <div class="button-container">
         <mdn-button @click=${this._handleFeedback} ?disabled=${!this._reason}>
-          ${this.l10n`Submit`}
+          ${this.l10n("content-feedback-submit")`Submit`}
         </mdn-button>
       </div>`;
   }

components/contributor-spotlight/server.js

@@ -34,12 +34,20 @@ export class ContributorSpotlight extends ServerComponent {
     const renderGetInvolved = () => html`
       <div class="get-involved-container">
         <section class="get-involved">
-          <h2>${context.l10n`Want to be part of the journey?`}</h2>
+          <h2>
+            ${context.l10n(
+              "contributor-spotlight-want-to-be-part-of-the-journey",
+            )`Want to be part of the journey?`}
+          </h2>
           <p>
-            ${context.l10n`Our constant quest for innovation starts here, with you. Every part of MDN (docs, demos and the site itself) springs from our incredible open community of developers. Please join us!`}
+            ${context.l10n(
+              "contributor-spotlight-our-constant-quest-for-innovatio",
+            )`Our constant quest for innovation starts here, with you. Every part of MDN (docs, demos and the site itself) springs from our incredible open community of developers. Please join us!`}
           </p>
           ${Button.render(context, {
-            label: context.l10n`Get involved`,
+            label: context.l10n(
+              "contributor-spotlight-get-involved",
+            )`Get involved`,
             href: `/${context.locale}/community/`,
             icon: arrowRightIcon,
             iconPosition: "after",
@@ -51,7 +59,11 @@ export class ContributorSpotlight extends ServerComponent {
     `;
 
     const header = html`
-      <h1 class="trailing-underscore">${context.l10n`Contributor profile`}</h1>
+      <h1 class="trailing-underscore">
+        ${context.l10n(
+          "contributor-spotlight-contributor-profile",
+        )`Contributor profile`}
+      </h1>
     `;
 
     const baseUrl = context.url;