refactor: extract the functions from layout to mixins

lib/default-theme/Layout.vue

@@ -21,19 +21,25 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import nprogress from 'nprogress'
 import Home from './Home.vue'
 import Navbar from './Navbar.vue'
 import Page from './Page.vue'
 import Sidebar from './Sidebar.vue'
-import { pathToComponentName } from '@app/util'
-import store from '@app/store'
 import { resolveSidebarItems } from './util'
-import throttle from 'lodash.throttle'
+import { nprogressMixin, scrollListenerMixin, updateHeadMixin } from './mixins'
 
 export default {
-  components: { Home, Page, Sidebar, Navbar },
+  mixins: [
+    nprogressMixin,
+    scrollListenerMixin,
+    updateHeadMixin
+  ],
+  components: {
+    Home,
+    Navbar,
+    Page,
+    Sidebar
+  },
   data () {
     return {
       isSidebarOpen: false
@@ -87,56 +93,12 @@ export default {
     }
   },
 
-  created () {
-    if (this.$ssrContext) {
-      this.$ssrContext.title = this.$title
-      this.$ssrContext.lang = this.$lang
-      this.$ssrContext.description = this.$page.description || this.$description
-    }
-  },
-
   mounted () {
-    // update title / meta tags
-    this.currentMetaTags = []
-    const updateMeta = () => {
-      document.title = this.$title
-      document.documentElement.lang = this.$lang
-      const meta = [
-        {
-          name: 'description',
-          content: this.$description
-        },
-        ...(this.$page.frontmatter.meta || [])
-      ]
-      this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
-    }
-    this.$watch('$page', updateMeta)
-    updateMeta()
-
-    window.addEventListener('scroll', this.onScroll)
-
-    // configure progress bar
-    nprogress.configure({ showSpinner: false })
-
-    this.$router.beforeEach((to, from, next) => {
-      if (to.path !== from.path && !Vue.component(pathToComponentName(to.path))) {
-        nprogress.start()
-      }
-      next()
-    })
-
     this.$router.afterEach(() => {
-      nprogress.done()
       this.isSidebarOpen = false
     })
   },
 
-  beforeDestroy () {
-    updateMetaTags(null, this.currentMetaTags)
-
-    window.removeEventListener('scroll', this.onScroll)
-  },
-
   methods: {
     toggleSidebar (to) {
       this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
@@ -158,57 +120,9 @@ export default {
           this.toggleSidebar(false)
         }
       }
-    },
-    onScroll: throttle(function () {
-      this.setActiveHash()
-    }, 300),
-    setActiveHash () {
-      const sidebarLinks = [].slice.call(document.querySelectorAll('.sidebar-link'))
-      const anchors = [].slice.call(document.querySelectorAll('.header-anchor'))
-        .filter(anchor => sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash))
-
-      const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
-
-      for (let i = 0; i < anchors.length; i++) {
-        const anchor = anchors[i]
-        const nextAnchor = anchors[i + 1]
-
-        const isActive = i === 0 && scrollTop === 0 ||
-          (scrollTop >= anchor.parentElement.offsetTop + 10 &&
-            (!nextAnchor || scrollTop < nextAnchor.parentElement.offsetTop - 10))
-
-        if (isActive && this.$route.hash !== anchor.hash) {
-          store.disableScrollBehavior = true
-          this.$router.replace(anchor.hash, () => {
-            // execute after scrollBehavior handler.
-            this.$nextTick(() => {
-              store.disableScrollBehavior = false
-            })
-          })
-          return
-        }
-      }
     }
   }
 }
-
-function updateMetaTags (meta, current) {
-  if (current) {
-    current.forEach(c => {
-      document.head.removeChild(c)
-    })
-  }
-  if (meta) {
-    return meta.map(m => {
-      const tag = document.createElement('meta')
-      Object.keys(m).forEach(key => {
-        tag.setAttribute(key, m[key])
-      })
-      document.head.appendChild(tag)
-      return tag
-    })
-  }
-}
 </script>
 
 <style src="prismjs/themes/prism-tomorrow.css"></style>

lib/default-theme/mixins/index.js

@@ -0,0 +1,9 @@
+import nprogressMixin from './nprogress'
+import scrollListenerMixin from './scrollListener'
+import updateHeadMixin from './updateHead'
+
+export {
+  nprogressMixin,
+  scrollListenerMixin,
+  updateHeadMixin
+}

lib/default-theme/mixins/nprogress.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import nprogress from 'nprogress'
+import { pathToComponentName } from '@app/util'
+
+export default {
+  mounted () {
+    nprogress.configure({ showSpinner: false })
+
+    this.$router.beforeEach((to, from, next) => {
+      if (to.path !== from.path && !Vue.component(pathToComponentName(to.path))) {
+        nprogress.start()
+      }
+      next()
+    })
+
+    this.$router.afterEach(() => {
+      nprogress.done()
+    })
+  }
+}

lib/default-theme/mixins/scrollListener.js

@@ -0,0 +1,43 @@
+import throttle from 'lodash.throttle'
+import store from '@app/store'
+
+export default {
+  mounted () {
+    window.addEventListener('scroll', this.onScroll)
+  },
+  beforeDestroy () {
+    window.removeEventListener('scroll', this.onScroll)
+  },
+  methods: {
+    onScroll: throttle(function () {
+      this.setActiveHash()
+    }, 300),
+    setActiveHash () {
+      const sidebarLinks = [].slice.call(document.querySelectorAll('.sidebar-link'))
+      const anchors = [].slice.call(document.querySelectorAll('.header-anchor'))
+        .filter(anchor => sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash))
+
+      const scrollTop = Math.max(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop)
+
+      for (let i = 0; i < anchors.length; i++) {
+        const anchor = anchors[i]
+        const nextAnchor = anchors[i + 1]
+
+        const isActive = i === 0 && scrollTop === 0 ||
+          (scrollTop >= anchor.parentElement.offsetTop + 10 &&
+            (!nextAnchor || scrollTop < nextAnchor.parentElement.offsetTop - 10))
+
+        if (isActive && this.$route.hash !== anchor.hash) {
+          store.disableScrollBehavior = true
+          this.$router.replace(anchor.hash, () => {
+            // execute after scrollBehavior handler.
+            this.$nextTick(() => {
+              store.disableScrollBehavior = false
+            })
+          })
+          return
+        }
+      }
+    }
+  }
+}

lib/default-theme/mixins/updateHead.js

@@ -0,0 +1,48 @@
+export default {
+  created () {
+    if (this.$ssrContext) {
+      this.$ssrContext.title = this.$title
+      this.$ssrContext.lang = this.$lang
+      this.$ssrContext.description = this.$page.description || this.$description
+    }
+  },
+  mounted () {
+    // update title / meta tags
+    this.currentMetaTags = []
+    const updateMeta = () => {
+      document.title = this.$title
+      document.documentElement.lang = this.$lang
+      const meta = [
+        {
+          name: 'description',
+          content: this.$description
+        },
+        ...(this.$page.frontmatter.meta || [])
+      ]
+      this.currentMetaTags = updateMetaTags(meta, this.currentMetaTags)
+    }
+    this.$watch('$page', updateMeta)
+    updateMeta()
+  },
+  beforeDestroy () {
+    updateMetaTags(null, this.currentMetaTags)
+  }
+}
+
+function updateMetaTags (meta, current) {
+  if (current) {
+    current.forEach(c => {
+      document.head.removeChild(c)
+    })
+  }
+  if (meta) {
+    return meta.map(m => {
+      const tag = document.createElement('meta')
+      Object.keys(m).forEach(key => {
+        tag.setAttribute(key, m[key])
+      })
+      document.head.appendChild(tag)
+      return tag
+    })
+  }
+}