fix: scroll behavior and css adjustments

Author: janvennemann

packages/docs/package.json

@@ -16,11 +16,11 @@
     "@fortawesome/free-solid-svg-icons": "^5.13.1",
     "@vuepress/plugin-back-to-top": "1.5.2",
     "fs-extra": "^8.1.0",
-    "vuepress": "^1.5.2",
+    "vuepress": "^1.6.0",
     "vuepress-plugin-apidocs": "^4.8.1",
     "vuepress-plugin-versioning": "^4.5.0",
     "vuepress-theme-titanium": "^4.8.0",
-    "vuex": "^3.1.1",
+    "vuex": "^3.5.1",
     "vuex-router-sync": "^5.0.0"
   }
 }

packages/vuepress/vuepress-plugin-apidocs/components/AvailabilityInfo.vue

@@ -70,14 +70,14 @@ export default {
       margin-left: 0.8rem
       display flex
       flex-shrink 0
+      align-items center
 
       &>.platform-logo
         height 1rem
         width 1rem
-        vertical-align top
 
       &>span
-        margin-left: 0.4rem
+        margin-left: 0.25rem
 
 @media (max-width: $MQMobile)
   .availability

packages/vuepress/vuepress-plugin-apidocs/global-components/ApiDocs.vue

@@ -46,15 +46,16 @@ export default {
 
 <style lang="stylus">
 .member-list
-  & h2, h3, h4
-    margin-top: -3.1rem;
-    padding-top: 4.6rem;
-    margin-bottom: 0;
-
   .member-header
     display flex
+    align-items center
 
-    &>h3, h4
+    & > h3, h4
       flex-grow 1
-</style>
+      margin-top 0
 
+  h1, h2, h3
+    &:hover
+      a
+        opacity 1
+</style>

packages/vuepress/vuepress-plugin-apidocs/styles/main.styl

@@ -1,11 +1,11 @@
 .type-meta
-  margin-top 10px
   >.type-meta-name
-    font-size: 14px
+    font-size: 0.75rem
     color: #7f8c8d;
     text-align right
   >.type-meta-value
-    margin: 0.5rem 0 0.9rem;
+    font-size: 0.875rem
+    margin: 0.5rem 0 0.875rem;
     text-align right
 .type-metas
   &>:last-child
@@ -14,8 +14,8 @@
 
 .type-signature
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-  font-size: 0.85rem
-  padding: 0.8rem 0.6rem
+  font-size: 0.875rem
+  padding: 0.875rem 0.75rem
   border-left 5px solid #eaecef
 
 .content-loading

packages/vuepress/vuepress-theme-titanium/components/PageEdit.vue

@@ -137,14 +137,14 @@ export default {
   .edit-link
     display inline-block
     a
-      color lighten($textColor, 25%)
+      color #006580
       margin-right 0.25rem
   .last-updated
     float right
     font-size 0.9em
     .prefix
       font-weight 500
-      color lighten($textColor, 25%)
+      color #006580
     .time
       font-weight 400
       color #aaa

packages/vuepress/vuepress-theme-titanium/global-components/AppHeading.vue

@@ -0,0 +1,58 @@
+<template>
+  <component
+    :is="`h${level}`"
+  >
+    <a
+      v-if="href"
+      :href="href"
+      class="header-anchor"
+      @click="onClick"
+    >
+      #
+    </a>
+
+    <slot />
+  </component>
+</template>
+
+<script>
+export default {
+  props: {
+    href: String,
+    level: String
+  },
+
+  methods: {
+    onClick (e) {
+      e.preventDefault()
+
+      const hash = this.href
+
+      if (this.hash === hash) return
+
+      this.$router.push({ hash })
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+h1, h2, h3, h4, h5, h6
+  > .header-anchor
+    font-size 0.85em
+    float left
+    margin-left -0.87em
+    padding-right 0.23em
+    margin-top 0.125em
+    opacity 0
+
+    &:hover
+      text-decoration none
+
+    &:not(:hover):not(:focus)
+      opacity: 0
+
+  .content:not(.custom) > &
+    &:hover .header-anchor
+      opacity: 1
+</style>

packages/vuepress/vuepress-theme-titanium/index.js

@@ -22,6 +22,7 @@ module.exports = (options, ctx) => ({
     '@vuepress/nprogress',
     ['container', { type: 'tip' }],
     ['container', { type: 'warning' }],
-    ['container', { type: 'danger' }]
+    ['container', { type: 'danger' }],
+    require('./plugins/smoothScroll')
   ]
 })

packages/vuepress/vuepress-theme-titanium/package.json

@@ -20,7 +20,6 @@
     "lodash": "^4.17.15",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2",
-    "vuepress-plugin-container": "^2.0.2",
-    "vuepress-plugin-smooth-scroll": "^0.0.9"
+    "vuepress-plugin-container": "^2.0.2"
   }
 }

packages/vuepress/vuepress-theme-titanium/plugins/smoothScroll/appHeading.js

@@ -0,0 +1,40 @@
+module.exports = function appHeading (md, options) {
+  md.core.ruler.push('app-heading', state => {
+    const slugs = {}
+    const tokens = state.tokens
+    tokens
+      .filter(token => token.type === 'heading_open' || token.type === 'heading_close')
+      .forEach(token => {
+        token.tag = 'app-heading'
+        if (token.type === 'heading_open') {
+          const title = tokens[tokens.indexOf(token) + 1]
+            .children
+            .filter(token => token.type === 'text' || token.type === 'code_inline')
+            .reduce((acc, t) => acc + t.content, '')
+          let slug = token.attrGet('id')
+          if (slug == null) {
+            slug = uniqueSlug(slugify(title), slugs, false)
+          } else {
+            slug = uniqueSlug(slug, slugs, true)
+          }
+          token.attrSet('id', slug)
+          token.attrSet('level', token.markup.split('').length)
+          token.attrSet('href', `#${slug}`)
+        }
+      })
+  })
+}
+
+const slugify = (s) => encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g, '-'))
+const hasProp = Object.prototype.hasOwnProperty
+const uniqueSlug = (slug, slugs, failOnNonUnique) => {
+  let uniq = slug
+  let i = 1
+  if (failOnNonUnique && hasProp.call(slugs, uniq)) {
+    throw Error(`User defined id attribute '${slug}' is NOT unique. Please fix it in your markdown to continue.`)
+  } else {
+    while (hasProp.call(slugs, uniq)) uniq = `${slug}-${i++}`
+  }
+  slugs[uniq] = true
+  return uniq
+}

packages/vuepress/vuepress-theme-titanium/plugins/smoothScroll/enhanceApp.js

@@ -0,0 +1,44 @@
+const SCROLL_OFFSET = 75
+
+// fork from vue-router@3.0.2
+// src/util/scroll.js
+function getElementPosition (el) {
+  const docEl = document.documentElement
+  const docRect = docEl.getBoundingClientRect()
+  const elRect = el.getBoundingClientRect()
+  return {
+    x: elRect.left - docRect.left,
+    y: elRect.top - docRect.top
+  }
+}
+
+module.exports = ({ Vue, options, router }) => {
+  router.options.scrollBehavior = (to, from, savedPosition) => {
+    if (savedPosition) {
+      return window.scrollTo({
+        top: savedPosition.y - SCROLL_OFFSET,
+        behavior: 'smooth'
+      })
+    } else if (from.path === to.path && to.hash) {
+      if (Vue.$vuepress.$get('disableScrollBehavior')) {
+        return
+      }
+      const targetAnchor = to.hash
+      const targetName = targetAnchor.slice(1)
+      const targetElement =
+        document.getElementById(targetName) ||
+        document.querySelector(`[name=${targetName}]`)
+      if (targetElement) {
+        return window.scrollTo({
+          top: getElementPosition(targetElement).y - SCROLL_OFFSET,
+          behavior: 'smooth'
+        })
+      }
+    } else {
+      const html = document.querySelector('html')
+      html.style.scrollBehavior = 'auto'
+      window.scrollTo({ top: 0 })
+      html.style.scrollBehavior = ''
+    }
+  }
+}