Merge remote-tracking branch 'upstream/main' into r122909785/navigato…

…r-title-slot

src/App.vue

@@ -14,7 +14,9 @@
     :class="{ fromkeyboard: fromKeyboard, hascustomheader: hasCustomHeader }"
   >
     <div :id="AppTopID" />
-    <a href="#main" id="skip-nav" v-if="!isTargetIDE">{{ $t('accessibility.skip-navigation') }}</a>
+    <a href="#app-main" id="skip-nav" v-if="!isTargetIDE">
+      {{ $t('accessibility.skip-navigation') }}
+    </a>
     <slot name="header" :isTargetIDE="isTargetIDE">
       <SuggestLang v-if="enablei18n" />
       <!-- Render the custom header by default, if there is no content in the `header` slot -->

src/components/Article.vue

@@ -18,7 +18,7 @@
       :rootReference="hierarchy.reference"
       :identifierUrl="identifierUrl"
     />
-    <main id="main" tabindex="0">
+    <main id="app-main" tabindex="0">
       <slot name="above-hero" />
       <component
         v-for="(section, index) in sections"

src/components/Card.vue

@@ -180,11 +180,9 @@ export default {
     border-radius: $big-border-radius;
 
     &:hover {
-      box-shadow: 0 5px 10px var(--color-card-shadow);
       transform: scale(1.007);
 
       @media (prefers-reduced-motion: reduce) {
-        box-shadow: none;
         transform: none;
       }
     }

src/components/ContentNode.vue

@@ -673,13 +673,21 @@ export default {
     // without any inline formatting—other block kinds like asides will be
     // ignored in the resulting plaintext representation.
     plaintext() {
+      const { references = {} } = this;
       return this.reduce((text, node) => {
         if (node.type === BlockType.paragraph) {
           return `${text}\n`;
         }
+        if (node.type === InlineType.codeVoice) {
+          return `${text}${node.code}`;
+        }
         if (node.type === InlineType.text) {
           return `${text}${node.text}`;
         }
+        if (node.type === InlineType.reference) {
+          const title = references[node.identifier]?.title ?? '';
+          return `${text}${title}`;
+        }
         return text;
       }, '').trim();
     },

src/components/ContentNode/Reference.vue

@@ -54,6 +54,9 @@ export default {
   name: 'Reference',
   computed: {
     isInternal({ url }) {
+      if (!url) {
+        return false;
+      }
       if (!url.startsWith('/') && !url.startsWith('#')) {
         // If the URL has a scheme, it's not an internal link.
         return false;
@@ -92,7 +95,7 @@ export default {
   props: {
     url: {
       type: String,
-      required: true,
+      required: false,
     },
     kind: {
       type: String,

src/components/ContentNode/ReferenceExternal.vue

@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <a v-if="isActive" :href="url"><slot /></a>
+  <a v-if="url && isActive" :href="url"><slot /></a>
   <span v-else><slot /></span>
 </template>
 
@@ -19,7 +19,7 @@ export default {
   props: {
     url: {
       type: String,
-      required: true,
+      required: false,
     },
     isActive: {
       type: Boolean,

src/components/ContentNode/ReferenceInternal.vue

@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <router-link v-if="isActive" :to="url"><slot /></router-link>
+  <router-link v-if="url && isActive" :to="url"><slot /></router-link>
   <span v-else><slot/></span>
 </template>
 
@@ -19,7 +19,7 @@ export default {
   props: {
     url: {
       type: String,
-      required: true,
+      required: false,
     },
     isActive: {
       type: Boolean,

src/components/DocumentationLayout.vue

@@ -19,8 +19,8 @@
       :displaySidenav="enableNavigator"
       @toggle-sidenav="handleToggleSidenav"
     >
-      <template #title>
-        <slot name="nav-title" />
+      <template #title="{ className }">
+        <slot name="nav-title" :className="className" />
       </template>
     </Nav>
     <AdjustableSidebarWidth
@@ -62,8 +62,8 @@
                   <template v-if="enableQuickNavigation" #filter>
                     <QuickNavigationButton @click.native="openQuickNavigationModal" />
                   </template>
-                  <template #navigator-head>
-                    <slot name="nav-title" />
+                  <template #navigator-head="{ className }">
+                    <slot name="nav-title" :className="className" />
                   </template>
                 </Navigator>
               </transition>

src/components/DocumentationTopic.vue

@@ -15,7 +15,7 @@
   >
     <component
       :is="isTargetIDE ? 'div' : 'main'"
-      class="main" id="main"
+      class="main" id="app-main"
     >
       <DocumentationHero
         :role="role"
@@ -129,7 +129,6 @@
               :source="remoteSource"
               :sections="primaryContentSectionsSanitized"
             />
-            <ViewMore v-if="shouldShowViewMoreLink" :url="viewMoreLink" />
           </div>
           <Topics
             v-if="shouldRenderTopicSection"
@@ -145,15 +144,21 @@
             :isSymbolBeta="isSymbolBeta"
           />
           <Relationships
-            v-if="relationshipsSections && !enableMinimized"
+            v-if="relationshipsSections"
             :sections="relationshipsSections"
+            :enableMinimized="enableMinimized"
           />
           <!-- NOTE: see also may contain information about other apis, so we cannot
           pass deprecation and beta information -->
           <SeeAlso
             v-if="seeAlsoSections && !enableMinimized"
             :sections="seeAlsoSections"
           />
+          <ViewMore
+            v-if="shouldShowViewMoreLink"
+            :url="viewMoreLink"
+            class="minimized-container"
+          />
         </div>
         <template v-if="enableOnThisPageNav">
           <OnThisPageStickyContainer v-show="isOnThisPageNavVisible">
@@ -778,7 +783,7 @@ $space-size: 15px;
   }
 }
 
-#main {
+#app-main {
   outline-style: none;
   height: 100%;
 
@@ -831,6 +836,11 @@ $space-size: 15px;
     --aside-border-radius: 6px;
     --code-border-radius: 6px;
 
+    &:not(.declarations-container) {
+      padding-left: 1.4rem;
+      padding-right: 1.4rem;
+    }
+
     .description {
       margin-bottom: 1.5em;
     }
@@ -904,11 +914,6 @@ $space-size: 15px;
   }
 }
 
-.full-width-container .doc-content .minimized-container {
-  padding-left: 1.4rem;
-  padding-right: 1.4rem;
-}
-
 :deep() {
   .no-primary-content {
     // remove border-top for first section of the page
@@ -952,7 +957,7 @@ $space-size: 15px;
     min-width: 0;
     width: 100%;
 
-    // only render border on declaration list menu
+    // only render border and bottom margin on declaration list menu
     // when there are no content sections afterwards at all
     .container:only-child {
       .declaration-list-menu:last-child::before {
@@ -961,6 +966,7 @@ $space-size: 15px;
         border-top-width: var(--content-table-title-border-width, 1px);
         content: '';
         display: block;
+        margin-bottom: $section-spacing-single-side;
       }
     }
 

src/components/DocumentationTopic/ContentTable.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -10,7 +10,7 @@
 
 <template>
   <section class="contenttable alt-light">
-    <div class="container">
+    <div :class="['container', { 'minimized-container': enableMinimized }]">
       <LinkableHeading class="title" :anchor="anchor">{{ title }}</LinkableHeading>
       <slot />
     </div>
@@ -32,21 +32,36 @@ export default {
       type: String,
       required: true,
     },
+    enableMinimized: {
+      type: Boolean,
+      default: false,
+    },
   },
 };
 </script>
 
 <style scoped lang="scss">
 @import 'docc-render/styles/_core.scss';
 
-.container {
+.container:not(.minimized-container) {
   @include dynamic-content-container;
-  padding-bottom: $section-spacing-single-side;
+}
+
+.container {
+  --section-spacing-single-side: #{$section-spacing-single-side};
+  &.minimized-container {
+    --section-spacing-single-side: 1.5em;
+
+    .contenttable-section {
+      padding-top: var(--section-spacing-single-side);
+    }
+  }
+  padding-bottom: var(--section-spacing-single-side);
 }
 
 .title {
   @include font-styles(heading-2-reduced);
-  padding-top: $section-spacing-single-side;
+  padding-top: var(--section-spacing-single-side);
   border-top-color: var(--color-grid);
   border-top-style: solid;
   border-top-width: var(--content-table-title-border-width, 1px);

src/components/DocumentationTopic/DocumentationNav.vue

@@ -38,7 +38,7 @@
       </div>
     </template>
     <template #default>
-      <slot name="title" />
+      <slot name="title" className="nav-title" />
     </template>
     <template #tray="{ closeNav }">
       <NavMenuItems
@@ -194,10 +194,7 @@ $sidenav-icon-padding-size: 5px;
 .sidenav-toggle-wrapper {
   display: flex;
   margin-top: 1px;
-
-  @include breakpoints-from(large, nav) {
-    margin-right: $nav-padding / 2;
-  }
+  margin-right: $nav-padding / 2;
 
   // This is a hack to enforce the toggle to be visible when in breakpoint,
   // even if already toggled off on desktop. Conditionally checking the current breakpoint,

src/components/DocumentationTopic/PrimaryContent/Declaration.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -20,7 +20,6 @@
     <template v-else>
       <DeclarationList
         v-for="(declaration, i) in declarations"
-        :class="changeClasses"
         :key="i"
         :declaration="declaration"
         :shouldCaption="hasPlatformVariants"
@@ -54,6 +53,7 @@ import DeclarationSourceLink
 
 import { ChangeTypes } from 'docc-render/constants/Changes';
 import { multipleLinesClass } from 'docc-render/constants/multipleLines';
+import { isEqual } from 'docc-render/utils/arrays';
 
 export default {
   name: 'Declaration',
@@ -90,12 +90,13 @@ export default {
   computed: {
     /**
      * Show the captions of DeclarationGroup without changes
-     * when there are more than one declarations
+     * when there are multiple sets of platforms among the
+     * declarations.
      * @returns {boolean}
      */
-    hasPlatformVariants() {
-      return this.declarations.length > 1;
-    },
+    hasPlatformVariants: ({ declarations }) => !(declarations.every(
+      ({ platforms }) => isEqual(platforms, declarations[0].platforms),
+    )),
     /**
      * Returns whether there are declaration changes.
      * @returns {boolean}
@@ -154,4 +155,8 @@ export default {
 .conditional-constraints {
   margin-top: var(--declaration-conditional-constraints-margin, 20px);
 }
+
+.declaration-list:not(:first-child) {
+  margin-top: var(--declaration-conditional-constraints-margin, 20px);
+}
 </style>

src/components/DocumentationTopic/PrimaryContent/DeclarationDiff.vue

@@ -17,7 +17,6 @@
         :key="i"
         :declaration="declaration"
         :should-caption="currentDeclarations.length > 1"
-        :changeType="changeType"
       />
     </div>
     <div class="declaration-diff-previous">
@@ -27,7 +26,6 @@
         :key="i"
         :declaration="declaration"
         :should-caption="previousDeclarations.length > 1"
-        :changeType="changeType"
       />
     </div>
   </div>
@@ -50,14 +48,6 @@ export default {
       type: Object,
       required: true,
     },
-    /**
-     * The applied change type to the diff.
-     * @type {"added"|"deprecated"|"modified"}
-     */
-    changeType: {
-      type: String,
-      required: true,
-    },
   },
   computed: {
     previousDeclarations: ({ changes }) => changes.declaration.previous || [],