Add on this page navigation

src/components/ContentNode/LinkableHeading.vue

@@ -10,8 +10,8 @@
 
 <template>
   <component
-   :id="anchor"
-   :is="`h${level}`"
+    :id="anchor"
+    :is="`h${level}`"
   >
     <router-link
       v-if="anchor && !isTargetIDE"
@@ -21,7 +21,7 @@
       @click="handleFocusAndScroll(anchor)"
     >
       <slot />
-      <LinkIcon class="icon" aria-hidden="true"/>
+      <LinkIcon class="icon" aria-hidden="true" />
     </router-link>
     <template v-else>
       <slot />
@@ -49,17 +49,39 @@ export default {
       default: () => 2,
       validator: v => v >= 1 && v <= 6,
     },
+    registerOnThisPage: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    shouldRegisterOnThisPage({ registerOnThisPage, level, anchor }) {
+      return registerOnThisPage && level < 4 && anchor;
+    },
   },
   inject: {
     isTargetIDE: {
       default: () => false,
     },
+    store: {
+      default: () => ({ addOnThisPageSection: () => {} }),
+    },
+  },
+  mounted() {
+    if (this.shouldRegisterOnThisPage) {
+      this.store.addOnThisPageSection({
+        anchor: this.anchor,
+        title: this.$el.textContent.trim(),
+        level: this.level,
+      });
+    }
   },
 };
 </script>
 
 <style scoped lang="scss">
 @import 'docc-render/styles/_core.scss';
+
 $icon-margin: 7px;
 
 .header-anchor {

src/components/DocumentationTopic.vue

@@ -46,49 +46,56 @@
           :platforms="platforms" :technologies="technologies"
         />
       </DocumentationHero>
-      <div v-if="showContainer" class="container">
-        <div class="description" :class="{ 'after-enhanced-hero': enhanceBackground }">
-          <RequirementMetadata
-            v-if="isRequirement"
-            :defaultImplementationsCount="defaultImplementationsCount"
+      <div class="doc-content-wrapper">
+        <div class="doc-content">
+          <div v-if="showContainer" class="container">
+            <div class="description" :class="{ 'after-enhanced-hero': enhanceBackground }">
+              <RequirementMetadata
+                v-if="isRequirement"
+                :defaultImplementationsCount="defaultImplementationsCount"
+              />
+              <Aside v-if="deprecationSummary && deprecationSummary.length" kind="deprecated">
+                <ContentNode :content="deprecationSummary" />
+              </Aside>
+              <Aside
+                v-if="downloadNotAvailableSummary && downloadNotAvailableSummary.length"
+                kind="note"
+              >
+                <ContentNode :content="downloadNotAvailableSummary" />
+              </Aside>
+            </div>
+            <PrimaryContent
+              v-if="primaryContentSections && primaryContentSections.length"
+              :class="{ 'with-border': !enhanceBackground }"
+              :conformance="conformance"
+              :source="remoteSource"
+              :sections="primaryContentSections"
+            />
+          </div>
+          <Topics
+            v-if="topicSections"
+            :sections="topicSections"
+            :isSymbolDeprecated="isSymbolDeprecated"
+            :isSymbolBeta="isSymbolBeta"
+          />
+          <DefaultImplementations
+            v-if="defaultImplementationsSections"
+            :sections="defaultImplementationsSections"
+            :isSymbolDeprecated="isSymbolDeprecated"
+            :isSymbolBeta="isSymbolBeta"
+          />
+          <Relationships v-if="relationshipsSections" :sections="relationshipsSections" />
+          <!-- NOTE: see also may contain information about other apis, so we cannot
+          pass deprecation and beta information -->
+          <SeeAlso
+            v-if="seeAlsoSections"
+            :sections="seeAlsoSections"
           />
-          <Aside v-if="deprecationSummary && deprecationSummary.length" kind="deprecated">
-            <ContentNode :content="deprecationSummary" />
-          </Aside>
-          <Aside
-            v-if="downloadNotAvailableSummary && downloadNotAvailableSummary.length"
-            kind="note"
-          >
-            <ContentNode :content="downloadNotAvailableSummary" />
-          </Aside>
         </div>
-        <PrimaryContent
-          v-if="primaryContentSections && primaryContentSections.length"
-          :class="{ 'with-border': !enhanceBackground }"
-          :conformance="conformance"
-          :source="remoteSource"
-          :sections="primaryContentSections"
-        />
+        <OnThisPageStickyContainer v-if="enableOnThisPageNav">
+          <OnThisPageNav />
+        </OnThisPageStickyContainer>
       </div>
-      <Topics
-        v-if="topicSections"
-        :sections="topicSections"
-        :isSymbolDeprecated="isSymbolDeprecated"
-        :isSymbolBeta="isSymbolBeta"
-      />
-      <DefaultImplementations
-        v-if="defaultImplementationsSections"
-        :sections="defaultImplementationsSections"
-        :isSymbolDeprecated="isSymbolDeprecated"
-        :isSymbolBeta="isSymbolBeta"
-      />
-      <Relationships v-if="relationshipsSections" :sections="relationshipsSections" />
-      <!-- NOTE: see also may contain information about other apis, so we cannot
-      pass deprecation and beta information -->
-      <SeeAlso
-        v-if="seeAlsoSections"
-        :sections="seeAlsoSections"
-      />
       <BetaLegalText v-if="!isTargetIDE && hasBetaContent" />
     </main>
     <div aria-live="polite" class="visuallyhidden">
@@ -106,6 +113,7 @@ import BetaLegalText from 'theme/components/DocumentationTopic/BetaLegalText.vue
 import LanguageSwitcher from 'theme/components/DocumentationTopic/Summary/LanguageSwitcher.vue';
 import DocumentationHero from 'docc-render/components/DocumentationTopic/DocumentationHero.vue';
 import WordBreak from 'docc-render/components/WordBreak.vue';
+import OnThisPageNav from 'theme/components/OnThisPageNav.vue';
 import Abstract from './DocumentationTopic/Description/Abstract.vue';
 import ContentNode from './DocumentationTopic/ContentNode.vue';
 import CallToActionButton from './CallToActionButton.vue';
@@ -117,6 +125,7 @@ import Availability from './DocumentationTopic/Summary/Availability.vue';
 import SeeAlso from './DocumentationTopic/SeeAlso.vue';
 import Title from './DocumentationTopic/Title.vue';
 import Topics from './DocumentationTopic/Topics.vue';
+import OnThisPageStickyContainer from './DocumentationTopic/OnThisPageStickyContainer.vue';
 
 export default {
   name: 'DocumentationTopic',
@@ -131,12 +140,14 @@ export default {
       default() {
         return {
           reset() {},
-          state: { onThisPageSections: [] },
+          state: {},
         };
       },
     },
   },
   components: {
+    OnThisPageStickyContainer,
+    OnThisPageNav,
     DocumentationHero,
     Abstract,
     Aside,
@@ -275,6 +286,10 @@ export default {
       type: Array,
       required: false,
     },
+    enableOnThisPageNav: {
+      type: Boolean,
+      default: false,
+    },
   },
   provide() {
     // NOTE: this is not reactive: if this.references change, the provided value
@@ -299,9 +314,6 @@ export default {
         0,
       );
     },
-    onThisPageSections() {
-      return this.topicState.onThisPageSections;
-    },
     hasAvailability: ({ platforms, technologies }) => (
       (platforms || []).length || (technologies || []).length
     ),
@@ -463,4 +475,17 @@ export default {
     }
   }
 }
+
+.doc-content-wrapper {
+  display: flex;
+
+  .sidebar-hidden & {
+    justify-content: center;
+  }
+
+  .doc-content {
+    min-width: 0;
+    width: 100%;
+  }
+}
 </style>

src/components/DocumentationTopic/ContentTable.vue

@@ -9,25 +9,20 @@
 -->
 
 <template>
-  <OnThisPageSection
-    class="contenttable alt-light"
-    :anchor="anchor"
-    :title="title"
-  >
+  <section class="contenttable alt-light">
     <div class="container">
       <LinkableHeading class="title" :anchor="anchor">{{ title }}</LinkableHeading>
       <slot />
     </div>
-  </OnThisPageSection>
+  </section>
 </template>
 
 <script>
 import LinkableHeading from 'docc-render/components/ContentNode/LinkableHeading.vue';
-import OnThisPageSection from './OnThisPageSection.vue';
 
 export default {
   name: 'ContentTable',
-  components: { OnThisPageSection, LinkableHeading },
+  components: { LinkableHeading },
   props: {
     anchor: {
       type: String,

src/components/DocumentationTopic/ContentTableSection.vue

@@ -16,6 +16,7 @@
           :level="3"
           class="title"
           :anchor="anchorComputed"
+          :register-on-this-page="false"
         >{{ title }}</LinkableHeading>
       </slot>
     </div>

src/components/DocumentationTopic/OnThisPageStickyContainer.vue

@@ -0,0 +1,60 @@
+<!--
+  This source file is part of the Swift.org open source project
+
+  Copyright (c) 2022 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
+  See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+-->
+<template>
+  <div class="OnThisPageStickyContainer" :class="{ hidden: isHidden }">
+    <slot />
+  </div>
+</template>
+
+<script>
+// 660px content + (170px aside + 22px padding-right)*2 + 28px*2 gutter
+export const ON_THIS_PAGE_CONTENT_BREAKPOINT = 1110;
+// 1080 content + (170px aside + 22px padding-right)
+export const ON_THIS_PAGE_CONTENT_BREAKPOINT_BIG = 1272;
+
+export default {
+  name: 'OnThisPageStickyContainer',
+  inject: ['store'],
+  computed: {
+    isHidden: ({ store }) => {
+      let compareTo = ON_THIS_PAGE_CONTENT_BREAKPOINT;
+      // when the window is above 1500, the content max-width grows
+      if (window.outerWidth >= 1500) {
+        compareTo = ON_THIS_PAGE_CONTENT_BREAKPOINT_BIG;
+      }
+      return store.state.contentWidth < compareTo;
+    },
+  },
+};
+</script>
+
+<style scoped lang='scss'>
+@import 'docc-render/styles/_core.scss';
+
+.OnThisPageStickyContainer {
+  $aside-width: rem(170px);
+  margin-top: $contenttable-spacing-single-side;
+  position: sticky;
+  top: $nav-height + rem(10px);
+  align-self: flex-start;
+  flex: 0 0 auto;
+  width: $aside-width;
+  margin-left: -($aside-width + $nav-padding);
+  padding-right: $nav-padding;
+
+  @include breakpoint(small) {
+    display: none;
+  }
+
+  &.hidden {
+    display: none;
+  }
+}
+</style>

src/components/DocumentationTopic/PrimaryContent.vue

@@ -22,9 +22,9 @@
 <script>
 import PossibleValues from 'docc-render/components/DocumentationTopic/PrimaryContent/PossibleValues.vue';
 import RestEndpoint from 'docc-render/components/DocumentationTopic/PrimaryContent/RestEndpoint.vue';
+import ContentNode from 'docc-render/components/DocumentationTopic/ContentNode.vue';
 import Declaration from './PrimaryContent/Declaration.vue';
 import PropertyListKeyDetails from './PrimaryContent/PropertyListKeyDetails.vue';
-import GenericContent from './PrimaryContent/GenericContent.vue';
 import Parameters from './PrimaryContent/Parameters.vue';
 import PropertyTable from './PrimaryContent/PropertyTable.vue';
 import RestBody from './PrimaryContent/RestBody.vue';
@@ -50,7 +50,7 @@ export default {
   name: 'PrimaryContent',
   components: {
     Declaration,
-    GenericContent,
+    ContentNode,
     Parameters,
     PropertyListKeyDetails,
     PropertyTable,
@@ -90,7 +90,7 @@ export default {
   methods: {
     componentFor(section) {
       return {
-        [SectionKind.content]: GenericContent,
+        [SectionKind.content]: ContentNode,
         [SectionKind.declarations]: Declaration,
         [SectionKind.details]: PropertyListKeyDetails,
         [SectionKind.parameters]: Parameters,