feat(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:

.lefthook.yml

@@ -45,6 +45,8 @@ pre-push:
             run: npx stylelint '**/*.css' --cache --ignore-path .gitignore
           - name: tsc
             run: npx tsc
+          - name: lint l10n strings
+            run: npm run l10n -- --lint
 
 post-merge:
   only:

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/blog-post/server.js

@@ -71,7 +71,7 @@ export class BlogPost extends ServerComponent {
       return PageLayout.render(
         context,
         html`<p id="content">
-          ${context.l10n("blog-post-not-found")`Blog post not found`}
+          ${context.l10n("blog-post-not-found")`Blog post not found.`}
         </p>`,
       );
     }

components/blog/utils.js

@@ -128,7 +128,7 @@ export function PrevNextLinks(context, { blogMeta }) {
         >
           <article>
             <h2>
-              <strong>${context.l10n("blog-previous")`Previous Post`}</strong>
+              <strong>${context.l10n("blog-previous")`Previous post`}</strong>
               ${blogMeta.links.previous.title}
             </h2>
           </article>

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/compat-table/element.js

@@ -545,7 +545,7 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
     if (status.deprecated) {
       icons.push({
         title: this._getLegendLabel("deprecated"),
-        text: this.l10n("compat-deprecated")`Experimental`,
+        text: this.l10n("compat-deprecated")`Deprecated`,
         iconClassName: "icon-deprecated",
       });
     }
@@ -744,7 +744,9 @@ export class MDNCompatTable extends L10nMixin(LitElement) {
     if (versionIsPreview(item.version_added, browser)) {
       supportNotes.push({
         iconName: "footnote",
-        label: this.l10n("compat-support-preview")`Preview browser support`,
+        label: this.l10n(
+          "compat-support-preview-browser",
+        )`Preview browser support`,
       });
     }