Translate alert titles (#55559)

Author: heiskr

src/content-render/tests/data.js

@@ -17,6 +17,9 @@ describe('data tag', () => {
             foo: 'Foo',
           },
         },
+        ui: {
+          alerts: {},
+        },
       },
     })
     languages.en.dir = dd.root

src/content-render/unified/alerts.js

@@ -7,11 +7,11 @@ import { h } from 'hastscript'
 import octicons from '@primer/octicons'
 
 const alertTypes = {
-  NOTE: { icon: 'info', color: 'accent', title: 'Note' },
-  IMPORTANT: { icon: 'report', color: 'done', title: 'Important' },
-  WARNING: { icon: 'alert', color: 'attention', title: 'Warning' },
-  TIP: { icon: 'light-bulb', color: 'success', title: 'Tip' },
-  CAUTION: { icon: 'stop', color: 'danger', title: 'Caution' },
+  NOTE: { icon: 'info', color: 'accent' },
+  IMPORTANT: { icon: 'report', color: 'done' },
+  WARNING: { icon: 'alert', color: 'attention' },
+  TIP: { icon: 'light-bulb', color: 'success' },
+  CAUTION: { icon: 'stop', color: 'danger' },
 }
 
 // Must contain one of [!NOTE], [!IMPORTANT], ...
@@ -22,7 +22,7 @@ const matcher = (node) =>
   node.tagName === 'blockquote' &&
   ALERT_REGEXP.test(JSON.stringify(node.children))
 
-export default function alerts() {
+export default function alerts({ alertTitles = {} }) {
   return (tree) => {
     visit(tree, matcher, (node) => {
       const key = getAlertKey(node)
@@ -35,7 +35,12 @@ export default function alerts() {
       node.tagName = 'div'
       node.properties.className = 'ghd-alert ghd-alert-' + alertType.color
       node.children = [
-        h('p', { className: 'ghd-alert-title' }, getOcticonSVG(alertType.icon), alertType.title),
+        h(
+          'p',
+          { className: 'ghd-alert-title' },
+          getOcticonSVG(alertType.icon),
+          alertTitles[key] || '',
+        ),
         ...removeAlertSyntax(node.children),
       ]
     })

src/content-render/unified/processor.js

@@ -73,7 +73,7 @@ export function createProcessor(context) {
       .use(rewriteForRowheaders)
       .use(rewriteImgSources)
       .use(rewriteAssetImgTags)
-      .use(alerts)
+      .use(alerts, context)
       // HTML AST above ^^^
       .use(html)
     // String below vvv

src/frame/lib/page.js

@@ -4,6 +4,7 @@ import cheerio from 'cheerio'
 import getApplicableVersions from '#src/versions/lib/get-applicable-versions.js'
 import generateRedirectsForPermalinks from '#src/redirects/lib/permalinks.js'
 import getEnglishHeadings from '#src/languages/lib/get-english-headings.js'
+import { getAlertTitles } from '#src/languages/lib/get-alert-titles.ts'
 import getTocItems from './get-toc-items.js'
 import Permalink from './permalink.js'
 import { renderContent } from '#src/content-render/index.js'
@@ -200,6 +201,9 @@ class Page {
       context.englishHeadings = englishHeadings
     }
 
+    // pull translations for alerts
+    context.alertTitles = await getAlertTitles(this)
+
     this.intro = await renderContentWithFallback(this, 'rawIntro', context)
     this.introPlainText = await renderContentWithFallback(this, 'rawIntro', context, {
       textOnly: true,

src/languages/lib/get-alert-titles.ts

@@ -0,0 +1,31 @@
+import fs from 'fs/promises'
+import path from 'path'
+import yaml from 'js-yaml'
+import languages from './languages'
+
+const cache: Record<string, any> = {}
+
+export async function getAlertTitles(page: Record<string, any>) {
+  const { languageCode } = page
+  if (cache[languageCode]) return cache[languageCode]
+
+  let file = ''
+  let yamlFile: Record<string, any> = {}
+  if (languageCode !== 'en') {
+    try {
+      const { dir } = languages[languageCode]
+      file = await fs.readFile(path.join(dir, `data/ui.yml`), 'utf-8')
+      yamlFile = yaml.load(file) as Record<string, any>
+    } catch (e) {
+      console.warn(`Failed to load translated alert titles`, e)
+    }
+  }
+  if (!file || !yamlFile.alerts) {
+    const { dir } = languages.en
+    file = await fs.readFile(path.join(dir, `data/ui.yml`), 'utf-8')
+    yamlFile = yaml.load(file) as Record<string, any>
+  }
+
+  cache[languageCode] = yamlFile.alerts
+  return cache[languageCode]
+}