Merge branch 'main' into r30234820/table-caption

Author: marinaaisa

src/App.vue

@@ -26,7 +26,13 @@
     <slot :isTargetIDE="isTargetIDE">
       <router-view class="router-content" />
       <custom-footer v-if="hasCustomFooter" :data-color-scheme="preferredColorScheme" />
-      <Footer v-else-if="!isTargetIDE" :enablei18n="enablei18n" />
+      <Footer v-else-if="!isTargetIDE">
+        <template #default="{ className }">
+          <div v-if="enablei18n" :class="className">
+            <LocaleSelector />
+          </div>
+        </template>
+      </Footer>
     </slot>
     <slot name="footer" :isTargetIDE="isTargetIDE" />
   </div>
@@ -42,13 +48,15 @@ import { fetchThemeSettings, themeSettingsState, getSetting } from 'docc-render/
 import { objectToCustomProperties } from 'docc-render/utils/themes';
 import { AppTopID } from 'docc-render/constants/AppTopID';
 import SuggestLang from 'docc-render/components/SuggestLang.vue';
+import LocaleSelector from 'docc-render/components/LocaleSelector.vue';
 
 export default {
   name: 'CoreApp',
   components: {
     Footer,
     InitialLoadingPlaceholder,
     SuggestLang,
+    LocaleSelector,
   },
   provide() {
     return {
@@ -69,6 +77,7 @@ export default {
   computed: {
     currentColorScheme: ({ appState }) => appState.systemColorScheme,
     preferredColorScheme: ({ appState }) => appState.preferredColorScheme,
+    availableLocales: ({ appState }) => appState.availableLocales,
     CSSCustomProperties: ({
       currentColorScheme,
       preferredColorScheme,
@@ -85,7 +94,9 @@ export default {
     ),
     hasCustomHeader: () => !!window.customElements.get('custom-header'),
     hasCustomFooter: () => !!window.customElements.get('custom-footer'),
-    enablei18n: () => getSetting(['features', 'docs', 'i18n', 'enable'], false),
+    enablei18n: ({ availableLocales }) => (
+      getSetting(['features', 'docs', 'i18n', 'enable'], false) && availableLocales.length > 1
+    ),
   },
   props: {
     enableThemeSettings: {

src/components/Article.vue

@@ -34,6 +34,7 @@
 <script>
 import { PortalTarget } from 'portal-vue';
 
+import AppStore from 'docc-render/stores/AppStore';
 import NavigationBar from 'theme/components/Tutorial/NavigationBar.vue';
 import metadata from 'theme/mixins/metadata.js';
 import Body from './Article/Body.vue';
@@ -166,9 +167,19 @@ export default {
     },
   },
   created() {
+    AppStore.setAvailableLocales(this.metadata.availableLocales);
     this.store.reset();
     this.store.setReferences(this.references);
   },
+  watch: {
+    // update the references in the store, in case they update, but the component is not re-created
+    references(references) {
+      this.store.setReferences(references);
+    },
+    'metadata.availableLocales': function availableLocalesWatcher(availableLocales) {
+      AppStore.setAvailableLocales(availableLocales);
+    },
+  },
   SectionKind,
 };
 </script>

src/components/CodeBlock.vue

@@ -36,6 +36,8 @@ code {
     content: attr(data-after-code);
   }
   &::before, &::after {
+    // ensure the pseudo elements dont fly off in space
+    display: block;
     @include visuallyhidden()
   }
 }

src/components/ContentNode/LinkableHeading.vue

@@ -17,10 +17,10 @@
       v-if="shouldLink"
       :to="{ hash: `#${anchor}` }"
       class="header-anchor"
-      aria-label="Scroll to section"
       @click="handleFocusAndScroll(anchor)"
     >
       <slot />
+      <span class="visuallyhidden" >{{ $t('accessibility.in-page-link') }}</span>
       <LinkIcon class="icon" aria-hidden="true" />
     </router-link>
     <template v-else>
@@ -89,8 +89,10 @@ $icon-margin: 7px;
     margin-left: $icon-margin;
   }
 
-  &:hover .icon {
-    display: inline;
+  &:hover, &:focus {
+    .icon {
+      display: inline;
+    }
   }
 }
 </style>

src/components/DocumentationTopic.vue

@@ -151,6 +151,7 @@ import metadata from 'theme/mixins/metadata.js';
 import { buildUrl } from 'docc-render/utils/url-helper';
 import { normalizeRelativePath } from 'docc-render/utils/assets';
 
+import AppStore from 'docc-render/stores/AppStore';
 import Aside from 'docc-render/components/ContentNode/Aside.vue';
 import BetaLegalText from 'theme/components/DocumentationTopic/BetaLegalText.vue';
 import LanguageSwitcher from 'theme/components/DocumentationTopic/Summary/LanguageSwitcher.vue';
@@ -365,6 +366,10 @@ export default {
       required: false,
       validator: v => Object.prototype.hasOwnProperty.call(StandardColors, v),
     },
+    availableLocales: {
+      type: Array,
+      required: false,
+    },
   },
   provide() {
     // NOTE: this is not reactive: if this.identifier change, the provided value
@@ -533,6 +538,7 @@ export default {
           conformance,
           hasNoExpandedDocumentation,
           modules,
+          availableLocales,
           platforms,
           required: isRequirement = false,
           roleHeading,
@@ -574,6 +580,7 @@ export default {
         downloadNotAvailableSummary,
         diffAvailability,
         hasNoExpandedDocumentation,
+        availableLocales,
         hierarchy,
         role,
         identifier,
@@ -621,7 +628,18 @@ export default {
       });
     }
 
+    AppStore.setAvailableLocales(this.availableLocales || []);
     this.store.reset();
+    this.store.setReferences(this.references);
+  },
+  watch: {
+    // update the references in the store, in case they update, but the component is not re-created
+    references(references) {
+      this.store.setReferences(references);
+    },
+    availableLocales(availableLocales) {
+      AppStore.setAvailableLocales(availableLocales);
+    },
   },
 };
 </script>

src/components/DocumentationTopic/DocumentationNav.vue

@@ -224,6 +224,9 @@ $sidenav-icon-padding-size: 5px;
   @include font-styles(documentation-nav);
 
   &-settings {
+    // ensure settings can get smaller if needed
+    min-width: 0;
+
     @include font-styles(nav-toggles);
 
     @include breakpoint-only-largenav() {
@@ -246,6 +249,7 @@ $sidenav-icon-padding-size: 5px;
       align-items: center;
       color: var(--color-nav-current-link);
       margin-left: 0;
+      min-width: 0;
 
       &:first-child:not(:only-child) {
         margin-right: $nav-space-between-elements;

src/components/DocumentationTopic/DocumentationNav/LanguageToggle.vue

@@ -234,6 +234,11 @@ $nav-menu-toggle-label-margin: 6px;
 }
 
 .language {
+  &-container {
+    // ensure the language picker is never crushed
+    flex: 1 0 auto;
+  }
+
   &-dropdown {
     -webkit-text-size-adjust: none;
     appearance: none;

src/components/Footer.vue

@@ -13,25 +13,16 @@
     <div class="row">
       <ColorSchemeToggle />
     </div>
-    <div v-if="enablei18n" class="row">
-      <LocaleSelector/>
-    </div>
+    <slot className="row"/>
   </footer>
 </template>
 
 <script>
 import ColorSchemeToggle from 'docc-render/components/ColorSchemeToggle.vue';
-import LocaleSelector from 'docc-render/components/LocaleSelector.vue';
 
 export default {
   name: 'Footer',
-  components: { ColorSchemeToggle, LocaleSelector },
-  props: {
-    enablei18n: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  components: { ColorSchemeToggle },
 };
 </script>
 

src/components/LocaleSelector.vue

@@ -30,7 +30,7 @@
 
 <script>
 import ChevronThickIcon from 'theme/components/Icons/ChevronThickIcon.vue';
-import locales from 'theme/lang/locales.json';
+import appLocales from 'theme/lang/locales.json';
 import { updateLocale, getLocaleParam } from 'docc-render/utils/i18n-utils';
 import AppStore from 'docc-render/stores/AppStore';
 
@@ -39,18 +39,19 @@ export default {
   components: {
     ChevronThickIcon,
   },
-  data() {
-    return {
-      locales,
-    };
-  },
   methods: {
     updateRouter({ target: { value: slug } }) {
       this.$router.push(getLocaleParam(slug));
       AppStore.setPreferredLocale(slug);
       updateLocale(slug, this);
     },
   },
+  computed: {
+    availableLocales: () => AppStore.state.availableLocales,
+    locales: ({ availableLocales }) => (
+      appLocales.filter(({ code }) => availableLocales.includes(code))
+    ),
+  },
 };
 
 </script>

src/components/Navigator/QuickNavigationPreview.vue

@@ -108,16 +108,6 @@ export default {
       };
     },
   },
-  watch: {
-    json: {
-      immediate: true,
-      async handler(json) {
-        const { references = {} } = json || {};
-        await this.$nextTick();
-        PreviewStore.setReferences(references);
-      },
-    },
-  },
 };
 </script>
 

src/components/OnThisPageNav.vue

@@ -20,8 +20,9 @@
           class="base-link"
           @click.native="handleFocusAndScroll(item.anchor)"
         >
-          <WordBreak v-if="item.i18n">{{ $t(item.title) }}</WordBreak>
-          <WordBreak v-else>{{ item.title }}</WordBreak>
+          <component :is="getWrapperComponent(item)">
+            {{ getTextContent(item) }}
+          </component>
         </router-link>
       </li>
     </ul>
@@ -122,6 +123,12 @@ export default {
         'child-item': item.level === 3,
       };
     },
+    getTextContent(item) {
+      return item.i18n ? this.$t(item.title) : item.title;
+    },
+    getWrapperComponent(item) {
+      return item.isSymbol ? WordBreak : 'span';
+    },
   },
 };
 </script>

src/components/Tutorial.vue

@@ -33,6 +33,7 @@
 <script>
 import { PortalTarget } from 'portal-vue';
 
+import AppStore from 'docc-render/stores/AppStore';
 import CodeThemeStore from 'docc-render/stores/CodeThemeStore';
 import metadata from 'theme/mixins/metadata.js';
 import isClientMobile from 'docc-render/mixins/isClientMobile';
@@ -135,9 +136,19 @@ export default {
     },
   },
   created() {
+    AppStore.setAvailableLocales(this.metadata.availableLocales);
     this.store.reset();
     this.store.setReferences(this.references);
   },
+  watch: {
+    // update the references in the store, in case they update, but the component is not re-created
+    references(references) {
+      this.store.setReferences(references);
+    },
+    'metadata.availableLocales': function availableLocalesWatcher(availableLocales) {
+      AppStore.setAvailableLocales(availableLocales);
+    },
+  },
   mounted() {
     this.$bridge.on('codeColors', this.handleCodeColorsChange);
     this.$bridge.send({ type: 'requestCodeColors' });

src/components/TutorialsOverview.vue

@@ -35,6 +35,7 @@
 </template>
 
 <script>
+import AppStore from 'docc-render/stores/AppStore';
 import TutorialsOverviewStore from 'docc-render/stores/TutorialsOverviewStore';
 import Nav from 'theme/components/TutorialsOverview/Nav.vue';
 import metadata from 'theme/mixins/metadata.js';
@@ -100,9 +101,19 @@ export default {
     };
   },
   created() {
+    AppStore.setAvailableLocales(this.metadata.availableLocales);
     this.store.reset();
     this.store.setReferences(this.references);
   },
+  watch: {
+    // update the references in the store, in case they update, but the component is not re-created
+    references(references) {
+      this.store.setReferences(references);
+    },
+    'metadata.availableLocales': function availableLocalesWatcher(availableLocales) {
+      AppStore.setAvailableLocales(availableLocales);
+    },
+  },
 };
 </script>
 

src/lang/locales/en-US.json

@@ -164,7 +164,8 @@
   "read-only": "Read-only",
   "error": {
     "unknown": "An unknown error occurred.",
-    "image": "Image failed to load"
+    "image": "Image failed to load",
+    "not-found": "The page you're looking for can't be found."
   },
   "color-scheme": {
     "select": "Select a color scheme preference",
@@ -181,7 +182,8 @@
       "start": "start of code block",
       "end": "end of code block"
     },
-    "skip-navigation": "Skip Navigation"
+    "skip-navigation": "Skip Navigation",
+    "in-page-link": "in page link"
   },
   "select-language": "Select the language for this page",
   "icons": {

src/mixins/onThisPageRegistrator.js

@@ -18,6 +18,8 @@ import {
 import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 import { AppTopID } from 'docc-render/constants/AppTopID';
 
+const SYMBOL_KIND = 'symbol';
+
 /**
  * Crawls the `topicData` of a page, and extracts onThisPage sections.
  */
@@ -44,11 +46,13 @@ export default {
         defaultImplementationsSections,
         relationshipsSections,
         seeAlsoSections,
+        kind,
       } = topicData;
       this.store.addOnThisPageSection({
         title,
         anchor: AppTopID,
         level: 1,
+        isSymbol: kind === SYMBOL_KIND,
       }, { i18n: false });
       if (primaryContentSections) {
         primaryContentSections.forEach((section) => {