Merge branch 'dhristov/add-sidenav-hero' into hqhuang/remove-right-side-bar

Author: hqhhuang

app/public/developer-og-twitter.jpg

@@ -1,6 +1,9 @@
 {
   "meta": {},
   "theme": {
+    "code": {
+      "indentationWidth": 4
+    },
     "colors": {
       "text": "",
       "text-background": "",
@@ -53,6 +56,9 @@
     "docs": {
       "summary": {
         "hide": false
+      },
+      "navigator": {
+        "enable": false
       }
     }
   }

app/public/developer-og.jpg

@@ -55,6 +55,7 @@ export const STORAGE_KEY = 'sidebar';
 
 // the maximum width, after which the full-width content does not grow
 export const MAX_WIDTH = 1800;
+export const ULTRA_WIDE_DEFAULT = 500;
 
 export const eventsMap = {
   touch: {
@@ -99,19 +100,25 @@ export default {
     },
   },
   data() {
+    const windowWidth = window.innerWidth;
+    const breakpoint = BreakpointName.large;
     // get the min width, in case we dont have a previously saved value
-    const fallback = calcWidthPercent(minWidthResponsivePercents[BreakpointName.large]);
-    // computed is not ready yet in `data`.
+    const minWidth = calcWidthPercent(minWidthResponsivePercents[breakpoint]);
+    // calc the maximum width
+    const maxWidth = calcWidthPercent(maxWidthResponsivePercents[breakpoint]);
+    // have a default width for very large screens, or use half of the min and max
+    const defaultWidth = windowWidth >= MAX_WIDTH
+      ? ULTRA_WIDE_DEFAULT
+      : Math.round((minWidth + maxWidth) / 2);
+    // get the already stored data, fallback to a default one.
+    const storedWidth = storage.get(STORAGE_KEY, defaultWidth);
     return {
       isDragging: false,
-      width: Math.min(
-        storage.get(STORAGE_KEY, fallback),
-        // calc the maximum width
-        calcWidthPercent(maxWidthResponsivePercents[BreakpointName.large]),
-      ),
+      // limit the width to a range
+      width: Math.min(Math.max(storedWidth, minWidth), maxWidth),
       isTouch: false,
-      windowWidth: window.innerWidth,
-      breakpoint: BreakpointName.large,
+      windowWidth,
+      breakpoint,
       noTransition: false,
       focusTrapInstance: null,
     };

app/public/theme-settings.json

@@ -34,7 +34,7 @@
 import { PortalTarget } from 'portal-vue';
 
 import NavigationBar from 'theme/components/Tutorial/NavigationBar.vue';
-import pageTitle from 'docc-render/mixins/pageTitle';
+import metadata from 'docc-render/mixins/metadata';
 import Body from './Article/Body.vue';
 import CallToAction from './Article/CallToAction.vue';
 import Hero from './Article/Hero.vue';
@@ -50,7 +50,7 @@ const SectionKind = {
 export default {
   name: 'Article',
   components: { NavigationBar, PortalTarget },
-  mixins: [pageTitle],
+  mixins: [metadata],
   inject: {
     isTargetIDE: {
       default: false,
@@ -98,6 +98,9 @@ export default {
         undefined
       );
     },
+    pageDescription: ({ heroSection, extractFirstParagraphText }) => (
+      heroSection ? extractFirstParagraphText(heroSection.content) : null
+    ),
   },
   methods: {
     componentFor(section) {

src/components/AdjustableSidebarWidth.vue

@@ -478,6 +478,43 @@ export default {
 
       return $forEach(this.content);
     },
+    // Recursively walk a given content tree, applying the callback function for
+    // each node encountered (depth first) and returning an accumulated result.
+    //
+    // @param fn {Function} A callback function which will called for each node
+    //   in the tree along with the most recently accumulated result. The last
+    //   result is the first argument passed to this function and the node is
+    //   the second argument.
+    // @param initialValue {Any} Some initial value to start accumulating.
+    //
+    // @return {Any} The final accumulated value based on the initial value and
+    //   the result of applying the function to every node.
+    reduce(fn, initialValue) {
+      let result = initialValue;
+      this.forEach((node) => {
+        result = fn(result, node);
+      });
+      return result;
+    },
+  },
+  computed: {
+    // Computed property that returns a single plaintext string equivalent
+    // of the content tree.
+    //
+    // Paragraphs will be transformed into newlines and text will be presented
+    // without any inline formatting—other block kinds like asides will be
+    // ignored in the resulting plaintext representation.
+    plaintext() {
+      return this.reduce((text, node) => {
+        if (node.type === BlockType.paragraph) {
+          return `${text}\n`;
+        }
+        if (node.type === InlineType.text) {
+          return `${text}${node.text}`;
+        }
+        return text;
+      }, '').trim();
+    },
   },
   BlockType,
   InlineType,

src/components/Article.vue

@@ -81,7 +81,7 @@
 
 <script>
 import Language from 'docc-render/constants/Language';
-import pageTitle from 'docc-render/mixins/pageTitle';
+import metadata from 'docc-render/mixins/metadata';
 import { getSetting } from 'docc-render/utils/theme-settings';
 
 import Aside from 'docc-render/components/ContentNode/Aside.vue';
@@ -105,7 +105,7 @@ import Topics from './DocumentationTopic/Topics.vue';
 
 export default {
   name: 'DocumentationTopic',
-  mixins: [pageTitle],
+  mixins: [metadata],
   inject: {
     isTargetIDE: {
       default() {
@@ -301,6 +301,9 @@ export default {
         && platforms.length
         && platforms.some(platform => platform.beta),
     pageTitle: ({ title }) => title,
+    pageDescription: ({ abstract, extractFirstParagraphText }) => (
+      abstract ? extractFirstParagraphText(abstract) : null
+    ),
     shouldShowLanguageSwitcher: ({ objcPath, swiftPath }) => objcPath && swiftPath,
     hideSummary: () => getSetting(['features', 'docs', 'summary', 'hide'], false),
   },
@@ -347,10 +350,13 @@ export default {
 
 #main {
   outline-style: none;
-  border-left: 1px solid var(--color-grid);
-  border-right: 1px solid var(--color-grid);
   height: 100%;
 
+  @include with-adjustable-sidebar {
+    border-left: 1px solid var(--color-grid);
+    border-right: 1px solid var(--color-grid);
+  }
+
   @include inTargetIde {
     min-height: 100vh;
     display: flex;
@@ -364,9 +370,9 @@ export default {
 }
 
 .container {
-  @include breakpoint-dynamic-sidebar-content;
-  outline-style: none;
   margin-top: $section-spacing-single-side / 2;
+  outline-style: none;
+  @include dynamic-content-container;
 }
 
 .button-cta {

src/components/ContentNode.vue

@@ -50,7 +50,7 @@ export default {
 }
 
 .container {
-  @include breakpoint-dynamic-sidebar-content;
+  @include dynamic-content-container;
   padding-bottom: $section-spacing-single-side;
 }
 

src/components/DocumentationTopic.vue

@@ -120,7 +120,7 @@ $doc-hero-icon-color: dark-color(fill-secondary) !default;
   &__content {
     position: relative;
     z-index: 1;
-    @include breakpoint-dynamic-sidebar-content;
+    @include dynamic-content-container;
   }
 }
 </style>

src/components/DocumentationTopic/ContentTable.vue

@@ -10,16 +10,17 @@
 
 <template>
   <NavBase
+    :breakpoint="isWideFormat ? BreakpointName.small: BreakpointName.medium"
     :hasOverlay="false"
     hasSolidBackground
     :hasNoBorder="hasNoBorder"
     :isDark="isDark"
-    isWideFormat
+    :isWideFormat="isWideFormat"
     hasFullWidthBorder
     class="documentation-nav"
     aria-label="API Reference"
   >
-    <template slot="pre-title">
+    <template slot="pre-title" v-if="isWideFormat">
       <button class="sidenav-toggle" @click.prevent="$emit('toggle-sidenav')">
         <SidenavIcon class="icon-inline sidenav-icon" />
       </button>
@@ -102,6 +103,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    isWideFormat: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     BreakpointName: () => BreakpointName,
@@ -178,4 +183,12 @@ $sidenav-icon-size: 19px;
   width: $sidenav-icon-size;
   height: $sidenav-icon-size;
 }
+
+// make sure toggle is not visible, from medium up, in default scope.
+// Sidenav is only toggle-able at small, in default scope.
+.sidenav-toggle {
+  @include breakpoints-from(medium) {
+    display: none;
+  }
+}
 </style>