[i18n] Localize string in Instruction.js

src/site/_data/i18n/instruction.yml

@@ -0,0 +1,53 @@
+devtools:
+  en: DevTools
+
+network:
+  en: Network
+  ru: Сеть
+
+elements:
+  en: Elements
+  ru: Элементы
+
+console:
+  en: Console
+  ru: Консоль
+
+sources:
+  en: Sources
+  ru: Источники
+
+performance:
+  en: Performance
+  ru: Производительность
+
+memory:
+  en: memory
+  ru: память
+
+application:
+  en: Application
+  ru: Приложение
+
+security:
+  en: Security
+  ru: Защита
+
+lighthouse:
+  en: Lighthouse
+
+disable_cache:
+  en: Select the **Disable cache** checkbox.
+  ru: Установите флажок **Отключить кеш**.
+
+reload_page:
+  en: Reload the page.
+  ru: Перезагрузите страницу.
+
+devtools_click:
+  en: Click the **$0** tab.
+  ru: Перейдите на вкладку **$0**.
+
+devtools_shared:
+  en: Press \`Control+Shift+J\` (or \`Command+Option+J\` on Mac) to open DevTools.
+  ru: Откройте DevTools, нажав `Control+Shift+J` (или `Command+Option+J`, если у вас Mac).

src/site/_includes/components/Instruction.js

@@ -15,17 +15,21 @@
  */
 
 const {html} = require('common-tags');
+const {i18n, getLocaleFromPath} = require('../../_filters/i18n');
 const capitalize = require('../../_filters/capitalize');
 
 /**
  * A component to help DRY up common lists of instructions.
  * This helps ensure consistency in our docs and makes it easy
  * to respond when Glitch changes their UI.
+ * @this {EleventyPage}
  * @param {string} type The type of instruction to print.
  * @param {string} listStyle The list style to use. Defaults to 'ul'.
  * @return {string} A list of instructions.
  */
-module.exports = (type, listStyle = 'ul') => {
+module.exports = function (type, listStyle = 'ul') {
+  const locale = getLocaleFromPath(this.page && this.page.filePathStem);
+
   let instruction;
   let substitution;
   let bullet;
@@ -51,7 +55,7 @@ module.exports = (type, listStyle = 'ul') => {
 
   // Common phrases shared across multiple instructions.
   const shared = {
-    devtools: `${bullet}Press \`Control+Shift+J\` (or \`Command+Option+J\` on Mac) to open DevTools.`,
+    devtools: `${bullet}${i18n('i18n.instruction.devtools_shared', locale)}`,
   };
 
   switch (type) {
@@ -99,15 +103,21 @@ module.exports = (type, listStyle = 'ul') => {
       break;
 
     case 'disable-cache':
-      instruction = html`${bullet}Select the **Disable cache** checkbox.`;
+      instruction = html`${bullet}${i18n(
+        'i18n.instruction.disable_cache',
+        locale,
+      )}`;
       break;
 
     case 'reload-app':
       instruction = html`${bullet}Reload the app.`;
       break;
 
     case 'reload-page':
-      instruction = html`${bullet}Reload the page.`;
+      instruction = html`${bullet}${i18n(
+        'i18n.instruction.reload_page',
+        locale,
+      )}`;
       break;
 
     case 'start-profiling':
@@ -141,10 +151,15 @@ module.exports = (type, listStyle = 'ul') => {
       instruction = html`${shared.devtools}`;
       substitution = type.substring('devtools-'.length);
       if (substitution) {
+        const tab = i18n(`i18n.instruction.${substitution}`, locale);
+        const step = i18n('i18n.instruction.devtools_click', locale).replace(
+          '$0',
+          `${tab}`,
+        );
         // prettier-ignore
         instruction = html`
           ${instruction}
-          ${bullet}Click the **${capitalize(substitution)}** tab.
+          ${bullet}${step}
         `;
       }
       break;