[rdar://102139999] feat: add hardcoded strings

Author: marinaaisa

app/main.js

@@ -10,15 +10,19 @@
 
 import '../webpack-asset-path';
 import Vue from 'vue';
+import VueI18n from 'vue-i18n';
 import Router from 'vue-router';
 import App from '@/App.vue';
 import SwiftDocCRenderPlugin from '@/setup-utils/SwiftDocCRenderPlugin';
 import SwiftDocCRenderRouter from '@/setup-utils/SwiftDocCRenderRouter';
+import SwiftDocCRenderi18n from '@/setup-utils/SwiftDocCRenderi18n';
 
 Vue.use(SwiftDocCRenderPlugin);
 Vue.use(Router);
+Vue.use(VueI18n);
 
 new Vue({
   router: SwiftDocCRenderRouter(),
   render: h => h(App),
+  i18n: SwiftDocCRenderi18n(),
 }).$mount('#app');

bin/check-source

@@ -18,7 +18,7 @@ here="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
 function replace_acceptable_years() {
     # this needs to replace all acceptable forms with 'YEARS'
-    sed -e 's/20[12][78901]-20[12][89012]/YEARS/' -e 's/20[12][89012]/YEARS/'
+    sed -e 's/20[12][78901]-20[123][890123]/YEARS/' -e 's/20[12][890123]/YEARS/'
 }
 
 printf "=> Checking license headers… "

jest.config.js

@@ -16,4 +16,5 @@ module.exports = {
     '^theme/(.*)$': '<rootDir>/src/$1',
   },
   testEnvironment: 'jest-environment-jsdom',
+  setupFiles: ['./tests/unit/config.js'],
 };

package-lock.json

@@ -26,6 +26,7 @@
     "highlight.js": "^11.3.1",
     "intersection-observer": "0.12.0",
     "portal-vue": "2.1.7",
+    "vue-i18n": "^8.28.2",
     "vue-virtual-scroller": "^1.0.10",
     "webpack-theme-resolver-plugin": "3.0.0"
   },

package.json

@@ -14,7 +14,7 @@
     :class="{ fromkeyboard: fromKeyboard, hascustomheader: hasCustomHeader }"
   >
     <div :id="AppTopID" />
-    <a href="#main" id="skip-nav">Skip Navigation</a>
+    <a href="#main" id="skip-nav">{{ $t('accessibility.skip-navigation') }}</a>
     <InitialLoadingPlaceholder />
     <slot name="header" :isTargetIDE="isTargetIDE">
       <!-- Render the custom header by default, if there is no content in the `header` slot -->
@@ -75,7 +75,7 @@ export default {
       // preference to determine if "Light" or "Dark" colors should be used.
       // Otherwise, if "Light" or "Dark" has been explicitly chosen, that choice
       // should be used directly.
-      objectToCustomProperties(themeSettings.theme, (preferredColorScheme === ColorScheme.auto.value
+      objectToCustomProperties(themeSettings.theme, (preferredColorScheme === ColorScheme.auto
         ? currentColorScheme
         : preferredColorScheme
       ))
@@ -170,7 +170,7 @@ export default {
     },
     onColorSchemePreferenceChange({ matches }) {
       const scheme = matches ? ColorScheme.dark : ColorScheme.light;
-      AppStore.setSystemColorScheme(scheme.value);
+      AppStore.setSystemColorScheme(scheme);
     },
     attachStylesToRoot(CSSCustomProperties) {
       const root = document.body;

src/App.vue

@@ -10,14 +10,14 @@
 
 <template>
   <span class="badge" :class="{ [`badge-${variant}`]: variant }" role="presentation">
-    <slot>{{ text }}</slot>
+    <slot>{{ $t(text) }}</slot>
   </span>
 </template>
 
 <script>
 const VARIANT_TEXT = {
-  beta: 'Beta',
-  deprecated: 'Deprecated',
+  beta: 'kind.beta',
+  deprecated: 'change-type.deprecated',
 };
 
 export default {

src/components/Badge.vue

@@ -10,21 +10,21 @@
 
 <template>
   <div
-    aria-label="Select a color scheme preference"
+    :aria-label="$t('color-scheme.select')"
     class="color-scheme-toggle"
     role="radiogroup"
   >
     <label
       v-for="option in options"
-      :key="option.value"
+      :key="option"
     >
       <input
         type="radio"
         @input="setPreferredColorScheme"
-        :checked="option.value == preferredColorScheme"
-        :value="option.value"
+        :checked="option == preferredColorScheme"
+        :value="option"
       />
-      <div class="text">{{option.label}}</div>
+      <div class="text">{{ $t(`color-scheme.${option}`) }}</div>
     </label>
   </div>
 </template>

src/components/ColorSchemeToggle.vue

@@ -10,7 +10,7 @@
 
 <template>
   <aside :class="kind" :aria-label="kind">
-    <p class="label">{{ label }}</p>
+    <p class="label">{{ $t(label) }}</p>
     <slot />
   </aside>
 </template>
@@ -40,12 +40,12 @@ export default {
   },
   computed: {
     label: ({ kind, name }) => name || ({
-      [Kind.deprecated]: 'Deprecated',
-      [Kind.experiment]: 'Experiment',
-      [Kind.important]: 'Important',
-      [Kind.note]: 'Note',
-      [Kind.tip]: 'Tip',
-      [Kind.warning]: 'Warning',
+      [Kind.deprecated]: 'change-type.deprecated',
+      [Kind.experiment]: 'kind.experiment',
+      [Kind.important]: 'kind.important',
+      [Kind.note]: 'kind.note',
+      [Kind.tip]: 'kind.tip',
+      [Kind.warning]: 'kind.warning',
     }[kind]),
   },
 };

src/components/ContentNode/Aside.vue

@@ -13,8 +13,8 @@
     <Column class="example-code">
       <slot />
       <Tabnav v-model="currentTab">
-        <TabnavItem :value="Tab.request">{{ Tab.request }}</TabnavItem>
-        <TabnavItem :value="Tab.response">{{ Tab.response }}</TabnavItem>
+        <TabnavItem :value="Tab.request">{{ $t('tab.request') }}</TabnavItem>
+        <TabnavItem :value="Tab.response">{{ $t('tab.response') }}</TabnavItem>
       </Tabnav>
       <div class="output">
         <div v-if="isCurrent(Tab.request)" class="code">
@@ -35,11 +35,11 @@
       <div class="controls" v-if="isCollapsible">
         <a v-if="isCollapsed" href="#" class="toggle" @click.prevent="showMore">
           <InlinePlusCircleSolidIcon class="control-icon icon-inline" />
-          More
+          {{ $t('more') }}
         </a>
         <a v-else href="#" class="toggle" @click.prevent="showLess">
           <InlineMinusCircleSolidIcon class="control-icon icon-inline" />
-          Less
+          {{ $t('less') }}
         </a>
       </div>
     </Column>