feat: support modern template localization (#9154)

* feat: support modern template localization * test(snapshot): update snapshots for 6620c49 * test(snapshot): update snapshots for 462463b * fix lint --------- Co-authored-by: Yufei Huang <[email protected]>
dotnet · Sep 1, 2023 · d518b06 · d518b06
1 parent daa7fba
commit d518b06
Show file tree

Hide file tree

Showing 58 changed files with 672 additions and 230 deletions.
diff --git a/templates/default(zh-cn)/token.json b/templates/default(zh-cn)/token.json
@@ -11,7 +11,7 @@
   "eventsInSubtitle": "事件",
   "operatorsInSubtitle": "运算符",
   "eiisInSubtitle": "显示接口实现",
-  "improveThisDoc": "改善此文档",
+  "improveThisDoc": "编辑本文",
   "viewSource": "查看源代码",
   "inheritance": "继承",
   "inheritedMembers": "继承成员",
@@ -42,12 +42,20 @@
   "important": "重要事项",
   "caution": "小心",
   "tocToggleButton": "显示/隐藏目录",
-  "tocFilter": "按标题筛选...",
+  "tocFilter": "按标题筛选",
   "search": "搜索",
   "searchResults": "搜索结果",
+  "searchResultsCount": "找到{count}个“{query}”的搜索结果",
+  "searchNoResults": "没有找到“{query}”的搜索结果",
   "pageFirst": "首页",
   "pagePrev": "上一页",
   "pageNext": "下一页",
   "pageLast": "尾页",
-  "inThisArticle": "本文内容"
+  "inThisArticle": "本文内容",
+  "nextArticle": "下一篇",
+  "prevArticle": "上一篇",
+  "themeLight": "白天",
+  "themeDark": "夜晚",
+  "themeAuto": "自动",
+  "copy": "复制"
 }
diff --git a/templates/default/token.json b/templates/default/token.json
@@ -16,7 +16,7 @@
   "variablesInSubtitle": "Variables",
   "typeAliasesInSubtitle": "Type Aliases",
   "membersInSubtitle": "Members",
-  "improveThisDoc": "Improve this Doc",
+  "improveThisDoc": "Edit this page",
   "viewSource": "View Source",
   "inheritance": "Inheritance",
   "derived": "Derived",
@@ -51,13 +51,21 @@
   "important": "Important",
   "caution": "Caution",
   "tocToggleButton": "Show / Hide Table of Contents",
-  "tocFilter": "Enter here to filter...",
+  "tocFilter": "Filter by title",
   "search": "Search",
   "searchResults": "Search Results for",
+  "searchResultsCount": "{count} results for \"{query}\"",
+  "searchNoResults": "No results for \"{query}\"",
   "pageFirst": "First",
   "pagePrev": "Previous",
   "pageNext": "Next",
   "pageLast": "Last",
-  "inThisArticle": "In This Article",
-  "backToTop": "Back to top"
+  "inThisArticle": "In this article",
+  "nextArticle": "Next",
+  "prevArticle": "Previous",
+  "backToTop": "Back to top",
+  "themeLight": "Light",
+  "themeDark": "Dark",
+  "themeAuto": "Auto",
+  "copy": "Copy"
 }
diff --git a/templates/modern/layout/_master.tmpl b/templates/modern/layout/_master.tmpl
@@ -25,6 +25,16 @@
       {{#_disableNewTab}}<meta name="docfx:disablenewtab" content="true">{{/_disableNewTab}}
       {{#_disableTocFilter}}<meta name="docfx:disabletocfilter" content="true">{{/_disableTocFilter}}
       {{#docurl}}<meta name="docfx:docurl" content="{{docurl}}">{{/docurl}}
+      <meta name="loc:inThisArticle" content="{{__global.inThisArticle}}">
+      <meta name="loc:searchResultsCount" content="{{__global.searchResultsCount}}">
+      <meta name="loc:searchNoResults" content="{{__global.searchNoResults}}">
+      <meta name="loc:tocFilter" content="{{__global.tocFilter}}">
+      <meta name="loc:nextArticle" content="{{__global.nextArticle}}">
+      <meta name="loc:prevArticle" content="{{__global.prevArticle}}">
+      <meta name="loc:themeLight" content="{{__global.themeLight}}">
+      <meta name="loc:themeDark" content="{{__global.themeDark}}">
+      <meta name="loc:themeAuto" content="{{__global.themeAuto}}">
+      <meta name="loc:copy" content="{{__global.copy}}">
     {{/redirect_url}}
   </head>
 
@@ -106,10 +116,10 @@
         {{^_disableContribution}}
         <div class="contribution d-print-none">
           {{#sourceurl}}
-          <a href="{{sourceurl}}" class="edit-link">Edit this page</a>
+          <a href="{{sourceurl}}" class="edit-link">{{__global.improveThisDoc}}</a>
           {{/sourceurl}}
           {{^sourceurl}}{{#docurl}}
-          <a href="{{docurl}}" class="edit-link">Edit this page</a>
+          <a href="{{docurl}}" class="edit-link">{{__global.improveThisDoc}}</a>
           {{/docurl}}{{/sourceurl}}
         </div>
         {{/_disableContribution}}

diff --git a/templates/modern/src/helper.ts b/templates/modern/src/helper.ts
@@ -10,6 +10,21 @@ export function meta(name: string): string {
   return (document.querySelector(`meta[name="${name}"]`) as HTMLMetaElement)?.content
 }
 
+/**
+ * Gets the localized text.
+ * @param id key in token.json
+ * @param args arguments to replace in the localized text
+ */
+export function loc(id: string, args?: { [key: string]: string }): string {
+  let result = meta(`loc:${id}`) || id
+  if (args) {
+    for (const key in args) {
+      result = result.replace(`{${key}}`, args[key])
+    }
+  }
+  return result
+}
+
 /**
  * Add <wbr> into long word.
  */

diff --git a/templates/modern/src/markdown.ts b/templates/modern/src/markdown.ts
@@ -1,7 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-import { breakWord, meta } from './helper'
+import { breakWord, meta, loc } from './helper'
 import AnchorJs from 'anchor-js'
 import { html, render } from 'lit-html'
 import { getTheme } from './theme'
@@ -186,7 +186,7 @@ function renderCodeCopy() {
     function renderCore() {
       const dom = copied
         ? html`<a class='btn border-0 link-success code-action'><i class='bi bi-check-lg'></i></a>`
-        : html`<a class='btn border-0 code-action' title='copy' href='#' @click=${copy}><i class='bi bi-clipboard'></i></a>`
+        : html`<a class='btn border-0 code-action' title='${loc('copy')}' href='#' @click=${copy}><i class='bi bi-clipboard'></i></a>`
       render(dom, code.parentElement)
 
       async function copy(e) {

diff --git a/templates/modern/src/nav.ts b/templates/modern/src/nav.ts
@@ -2,7 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 import { render, html, TemplateResult } from 'lit-html'
-import { breakWordLit, meta, isExternalHref } from './helper'
+import { breakWordLit, meta, isExternalHref, loc } from './helper'
 import { themePicker } from './theme'
 import { TocNode } from './toc'
 
@@ -105,7 +105,7 @@ function inThisArticleForConceptual() {
   const headings = document.querySelectorAll<HTMLHeadingElement>('article h2')
   if (headings.length > 0) {
     return html`
-      <h5 class="border-bottom">In this article</h5>
+      <h5 class="border-bottom">${loc('inThisArticle')}</h5>
       <ul>${Array.from(headings).map(h => html`<li><a class="link-secondary" href="#${h.id}">${breakWordLit(h.innerText)}</a></li>`)}</ul>`
   }
 }
@@ -116,7 +116,7 @@ function inThisArticleForManagedReference(): TemplateResult {
 
   if (headings.length > 0) {
     return html`
-      <h5 class="border-bottom">In this article</h5>
+      <h5 class="border-bottom">${loc('inThisArticle')}</h5>
       <ul>${headings.map(h => {
       return h.tagName === 'H2'
         ? html`<li><h6>${breakWordLit(h.innerText)}</h6></li>`

diff --git a/templates/modern/src/search.ts b/templates/modern/src/search.ts
@@ -1,7 +1,7 @@
 // Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the MIT license.
 
-import { meta } from './helper'
+import { loc, meta } from './helper'
 import { html, render, TemplateResult } from 'lit-html'
 import { classMap } from 'lit-html/directives/class-map.js'
 
@@ -84,14 +84,14 @@ export function enableSearch() {
 
     function renderPage(page: number): TemplateResult {
       if (hits.length === 0) {
-        return html`<div class="search-list">No results for "${query}"</div>`
+        return html`<div class="search-list">${loc('searchNoResults', { query })}</div>`
       }
 
       const start = page * numPerPage
       const curHits = hits.slice(start, start + numPerPage)
 
       const items = html`
-        <div class="search-list">${hits.length} results for "${query}"</div>
+        <div class="search-list">${loc('searchResultsCount', { count: hits.length, query })}</div>
         <div class="sr-items">${curHits.map(hit => {
           const currentUrl = window.location.href
           const itemRawHref = relativeUrlToAbsoluteUrl(currentUrl, relHref + hit.href)

diff --git a/templates/modern/src/theme.ts b/templates/modern/src/theme.ts
@@ -3,6 +3,7 @@
 
 import { html } from 'lit-html'
 import { Theme } from './options'
+import { loc } from './helper'
 
 function setTheme(theme: Theme) {
   localStorage.setItem('theme', theme)
@@ -35,9 +36,9 @@ export function themePicker(refresh: () => void) {
         <i class='bi bi-${icon}'></i>
       </a>
       <ul class='dropdown-menu'>
-        <li><a class='dropdown-item' href='#' @click=${e => changeTheme(e, 'light')}><i class='bi bi-sun'></i> Light</a></li>
-        <li><a class='dropdown-item' href='#' @click=${e => changeTheme(e, 'dark')}><i class='bi bi-moon'></i> Dark</a></li>
-        <li><a class='dropdown-item' href='#' @click=${e => changeTheme(e, 'auto')}><i class='bi bi-circle-half'></i> Auto</a></li>
+        <li><a class='dropdown-item' href='#' @click=${e => changeTheme(e, 'light')}><i class='bi bi-sun'></i> ${loc('themeLight')}</a></li>
+        <li><a class='dropdown-item' href='#' @click=${e => changeTheme(e, 'dark')}><i class='bi bi-moon'></i> ${loc('themeDark')}</a></li>
+        <li><a class='dropdown-item' href='#' @click=${e => changeTheme(e, 'auto')}><i class='bi bi-circle-half'></i> ${loc('themeAuto')}</a></li>
       </ul>
     </div>`
 

diff --git a/templates/modern/src/toc.ts b/templates/modern/src/toc.ts
@@ -3,7 +3,7 @@
 
 import { TemplateResult, html, render } from 'lit-html'
 import { classMap } from 'lit-html/directives/class-map.js'
-import { breakWordLit, meta, isExternalHref } from './helper'
+import { breakWordLit, meta, isExternalHref, loc } from './helper'
 
 export type TocNode = {
   name: string
@@ -132,7 +132,7 @@ export async function renderToc(): Promise<TocNode[]> {
       : html`
       <form class='filter'>
         <i class='bi bi-filter'></i>
-        <input class='form-control' @input=${filterToc} value='${tocFilter}' type='search' placeholder='Filter by title' autocomplete='off' aria-label='Filter by title'>
+        <input class='form-control' @input=${filterToc} value='${tocFilter}' type='search' placeholder='${loc('tocFilter')}' autocomplete='off' aria-label='${loc('tocFilter')}'>
       </form>`
 
     function filterToc(e: Event) {
@@ -143,7 +143,7 @@ export async function renderToc(): Promise<TocNode[]> {
   }
 
   function renderNoFilterResult(): TemplateResult {
-    return tocFilter === '' ? null : html`<div class='no-result'>No results for "${tocFilter}"</div>`
+    return tocFilter === '' ? null : html`<div class='no-result'>${loc('searchNoResults', { query: tocFilter })}</div>`
   }
 
   function normalizeUrlPath(url: { pathname: string }): string {
@@ -165,8 +165,8 @@ function renderNextArticle(items: TocNode[], node: TocNode) {
     return
   }
 
-  const prevButton = prev ? html`<div class="prev"><span><i class='bi bi-chevron-left'></i> Previous</span> <a href="${prev.href}" rel="prev">${breakWordLit(prev.name)}</a></div>` : null
-  const nextButton = next ? html`<div class="next"><span>Next <i class='bi bi-chevron-right'></i></span> <a href="${next.href}" rel="next">${breakWordLit(next.name)}</a></div>` : null
+  const prevButton = prev ? html`<div class="prev"><span><i class='bi bi-chevron-left'></i> ${loc('prevArticle')}</span> <a href="${prev.href}" rel="prev">${breakWordLit(prev.name)}</a></div>` : null
+  const nextButton = next ? html`<div class="next"><span>${loc('nextArticle')} <i class='bi bi-chevron-right'></i></span> <a href="${next.href}" rel="next">${breakWordLit(next.name)}</a></div>` : null
 
   render(html`${prevButton} ${nextButton}`, nextArticle)
 

diff --git a/...Tests/SamplesTest.CSharp/api/CSharp10.ConstantInterpolatedStrings.html.view.verified.json b/...Tests/SamplesTest.CSharp/api/CSharp10.ConstantInterpolatedStrings.html.view.verified.json
@@ -1030,7 +1030,7 @@
     "variablesInSubtitle": "Variables",
     "typeAliasesInSubtitle": "Type Aliases",
     "membersInSubtitle": "Members",
-    "improveThisDoc": "Improve this Doc",
+    "improveThisDoc": "Edit this page",
     "viewSource": "View Source",
     "inheritance": "Inheritance",
     "derived": "Derived",
@@ -1065,15 +1065,23 @@
     "important": "Important",
     "caution": "Caution",
     "tocToggleButton": "Show / Hide Table of Contents",
-    "tocFilter": "Enter here to filter...",
+    "tocFilter": "Filter by title",
     "search": "Search",
     "searchResults": "Search Results for",
+    "searchResultsCount": "{count} results for \"{query}\"",
+    "searchNoResults": "No results for \"{query}\"",
     "pageFirst": "First",
     "pagePrev": "Previous",
     "pageNext": "Next",
     "pageLast": "Last",
-    "inThisArticle": "In This Article",
+    "inThisArticle": "In this article",
+    "nextArticle": "Next",
+    "prevArticle": "Previous",
     "backToTop": "Back to top",
+    "themeLight": "Light",
+    "themeDark": "Dark",
+    "themeAuto": "Auto",
+    "copy": "Copy",
     "_shared": {}
   },
   "yamlmime": "ManagedReference",

diff --git a/test/docfx.Snapshot.Tests/SamplesTest.CSharp/api/CSharp10.Issue7737.html.view.verified.json b/test/docfx.Snapshot.Tests/SamplesTest.CSharp/api/CSharp10.Issue7737.html.view.verified.json
@@ -758,7 +758,7 @@
     "variablesInSubtitle": "Variables",
     "typeAliasesInSubtitle": "Type Aliases",
     "membersInSubtitle": "Members",
-    "improveThisDoc": "Improve this Doc",
+    "improveThisDoc": "Edit this page",
     "viewSource": "View Source",
     "inheritance": "Inheritance",
     "derived": "Derived",
@@ -793,15 +793,23 @@
     "important": "Important",
     "caution": "Caution",
     "tocToggleButton": "Show / Hide Table of Contents",
-    "tocFilter": "Enter here to filter...",
+    "tocFilter": "Filter by title",
     "search": "Search",
     "searchResults": "Search Results for",
+    "searchResultsCount": "{count} results for \"{query}\"",
+    "searchNoResults": "No results for \"{query}\"",
     "pageFirst": "First",
     "pagePrev": "Previous",
     "pageNext": "Next",
     "pageLast": "Last",
-    "inThisArticle": "In This Article",
+    "inThisArticle": "In this article",
+    "nextArticle": "Next",
+    "prevArticle": "Previous",
     "backToTop": "Back to top",
+    "themeLight": "Light",
+    "themeDark": "Dark",
+    "themeAuto": "Auto",
+    "copy": "Copy",
     "_shared": {}
   },
   "yamlmime": "ManagedReference",

diff --git a/...s/SamplesTest.CSharp/api/CSharp10.ParameterlessStructConstructors.html.view.verified.json b/...s/SamplesTest.CSharp/api/CSharp10.ParameterlessStructConstructors.html.view.verified.json
@@ -1166,7 +1166,7 @@
     "variablesInSubtitle": "Variables",
     "typeAliasesInSubtitle": "Type Aliases",
     "membersInSubtitle": "Members",
-    "improveThisDoc": "Improve this Doc",
+    "improveThisDoc": "Edit this page",
     "viewSource": "View Source",
     "inheritance": "Inheritance",
     "derived": "Derived",
@@ -1201,15 +1201,23 @@
     "important": "Important",
     "caution": "Caution",
     "tocToggleButton": "Show / Hide Table of Contents",
-    "tocFilter": "Enter here to filter...",
+    "tocFilter": "Filter by title",
     "search": "Search",
     "searchResults": "Search Results for",
+    "searchResultsCount": "{count} results for \"{query}\"",
+    "searchNoResults": "No results for \"{query}\"",
     "pageFirst": "First",
     "pagePrev": "Previous",
     "pageNext": "Next",
     "pageLast": "Last",
-    "inThisArticle": "In This Article",
+    "inThisArticle": "In this article",
+    "nextArticle": "Next",
+    "prevArticle": "Previous",
     "backToTop": "Back to top",
+    "themeLight": "Light",
+    "themeDark": "Dark",
+    "themeAuto": "Auto",
+    "copy": "Copy",
     "_shared": {}
   },
   "yamlmime": "ManagedReference",

diff --git a/...apshot.Tests/SamplesTest.CSharp/api/CSharp10.ReadOnlyRecordStruct.html.view.verified.json b/...apshot.Tests/SamplesTest.CSharp/api/CSharp10.ReadOnlyRecordStruct.html.view.verified.json
@@ -1390,7 +1390,7 @@
     "variablesInSubtitle": "Variables",
     "typeAliasesInSubtitle": "Type Aliases",
     "membersInSubtitle": "Members",
-    "improveThisDoc": "Improve this Doc",
+    "improveThisDoc": "Edit this page",
     "viewSource": "View Source",
     "inheritance": "Inheritance",
     "derived": "Derived",
@@ -1425,15 +1425,23 @@
     "important": "Important",
     "caution": "Caution",
     "tocToggleButton": "Show / Hide Table of Contents",
-    "tocFilter": "Enter here to filter...",
+    "tocFilter": "Filter by title",
     "search": "Search",
     "searchResults": "Search Results for",
+    "searchResultsCount": "{count} results for \"{query}\"",
+    "searchNoResults": "No results for \"{query}\"",
     "pageFirst": "First",
     "pagePrev": "Previous",
     "pageNext": "Next",
     "pageLast": "Last",
-    "inThisArticle": "In This Article",
+    "inThisArticle": "In this article",
+    "nextArticle": "Next",
+    "prevArticle": "Previous",
     "backToTop": "Back to top",
+    "themeLight": "Light",
+    "themeDark": "Dark",
+    "themeAuto": "Auto",
+    "copy": "Copy",
     "_shared": {}
   },
   "yamlmime": "ManagedReference",