feat: init

DropdownLink.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="dropdown-wrapper" :class="{ open }">
+    <a class="dropdown-title" @click="toggle">
+      <span class="title">{{ item.text }}</span>
+      <span class="arrow" :class="open ? 'down' : 'right'"></span>
+    </a>
+    <DropdownTransition>
+      <ul class="nav-dropdown" v-show="open">
+        <li
+        class="dropdown-item"
+        v-for="(subItem, index) in item.items"
+        :key="subItem.link || index">
+          <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
+          <ul class="dropdown-subitem-wrapper" v-if="subItem.type === 'links'">
+            <li
+            class="dropdown-subitem"
+            v-for="childSubItem in subItem.items"
+            :key="childSubItem.link">
+              <NavLink :item="childSubItem"/>
+            </li>
+          </ul>
+          <NavLink v-else :item="subItem"/>
+        </li>
+      </ul>
+    </DropdownTransition>
+  </div>
+</template>
+
+<script>
+import NavLink from './NavLink.vue'
+import DropdownTransition from './DropdownTransition.vue'
+
+export default {
+  components: { NavLink, DropdownTransition },
+  data () {
+    return {
+      open: false
+    }
+  },
+  props: {
+    item: {
+      required: true
+    }
+  },
+  methods: {
+    toggle () {
+      this.open = !this.open
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@import './styles/config.styl'
+
+.dropdown-wrapper
+  .dropdown-title
+    display block
+    &:hover
+      border-color transparent
+    .arrow
+      vertical-align middle
+      margin-top -1px
+      margin-left 0.4rem
+  .nav-dropdown
+    .dropdown-item
+      color inherit
+      line-height 1.7rem
+      h4
+        margin 0.45rem 0 0
+        border-top 1px solid #eee
+        padding 0.45rem 1.5rem 0 1.25rem
+      .dropdown-subitem-wrapper
+        padding 0
+        list-style none
+        .dropdown-subitem
+          font-size 0.9em
+      a
+        display block
+        line-height 1.7rem
+        position relative
+        border-bottom none
+        font-weight 400
+        margin-bottom 0
+        padding 0 1.5rem 0 1.25rem
+        &:hover
+          color $accentColor
+        &.router-link-active
+          color $accentColor
+          &::after
+            content ""
+            width 0
+            height 0
+            border-left 5px solid $accentColor
+            border-top 3px solid transparent
+            border-bottom 3px solid transparent
+            position absolute
+            top calc(1rem - 2px)
+            left 9px
+      &:first-child h4
+        margin-top 0
+        padding-top 0
+        border-top 0
+
+@media (max-width: $MQMobile)
+  .dropdown-wrapper
+    &.open .dropdown-title
+      margin-bottom 0.5rem
+    .nav-dropdown
+      transition height .1s ease-out
+      overflow hidden
+      .dropdown-item
+        h4
+          border-top 0
+          margin-top 0
+          padding-top 0
+        h4, & > a
+          font-size 15px
+          line-height 2rem
+        .dropdown-subitem
+          font-size 14px
+          padding-left 1rem
+
+@media (min-width: $MQMobile)
+  .dropdown-wrapper
+    height 1.8rem
+    &:hover .nav-dropdown
+      // override the inline style.
+      display block !important
+    .dropdown-title .arrow
+      // make the arrow always down at desktop
+      border-left 4px solid transparent
+      border-right 4px solid transparent
+      border-top 6px solid $arrowBgColor
+      border-bottom 0
+    .nav-dropdown
+      display none
+      // Avoid height shaked by clicking
+      height auto !important
+      box-sizing border-box;
+      max-height calc(100vh - 2.7rem)
+      overflow-y auto
+      position absolute
+      top 100%
+      right 0
+      background-color #fff
+      padding 0.6rem 0
+      border 1px solid #ddd
+      border-bottom-color #ccc
+      text-align left
+      border-radius 0.25rem
+      white-space nowrap
+      margin 0
+</style>

DropdownTransition.vue

@@ -0,0 +1,29 @@
+<template>
+  <transition name="dropdown"
+              @enter="setHeight"
+              @after-enter="unsetHeight"
+              @before-leave="setHeight">
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'DropdownTransition',
+  methods: {
+    setHeight (items) {
+      // explicitly set height so that it can be transitioned
+      items.style.height = items.scrollHeight + 'px'
+    },
+    unsetHeight (items) {
+      items.style.height = ''
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.dropdown-enter, .dropdown-leave-to
+  height 0 !important
+
+</style>

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 momoko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Layout.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="theme-container"
+    :class="pageClasses"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd">
+    <div class="sidebar-mask" @click="toggleSidebar(false)"></div>
+    <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
+      <slot name="sidebar-top" slot="top"/>
+      <slot name="sidebar-bottom" slot="bottom"/>
+    </Sidebar>
+    <div class="custom-layout" v-if="$page.frontmatter.layout">
+      <component :is="$page.frontmatter.layout"/>
+    </div>
+    <Page v-else :sidebar-items="sidebarItems">
+      <slot name="page-top" slot="top"/>
+      <slot name="page-bottom" slot="bottom"/>
+    </Page>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import nprogress from 'nprogress'
+import Page from './Page.vue'
+import Sidebar from './Sidebar.vue'
+import { resolveSidebarItems } from './util'
+
+export default {
+  components: { Page, Sidebar },
+  data () {
+    return {
+      isSidebarOpen: false
+    }
+  },
+
+  computed: {
+    shouldShowSidebar () {
+      const { frontmatter } = this.$page
+      return (
+        !frontmatter.layout &&
+        !frontmatter.home &&
+        frontmatter.sidebar !== false &&
+        this.sidebarItems.length
+      )
+    },
+    sidebarItems () {
+      return resolveSidebarItems(
+        this.$page,
+        this.$route,
+        this.$site,
+        this.$localePath
+      )
+    },
+    pageClasses () {
+      const userPageClass = this.$page.frontmatter.pageClass
+      return [
+        {
+          'no-navbar': !this.shouldShowNavbar,
+          'sidebar-open': this.isSidebarOpen,
+          'no-sidebar': !this.shouldShowSidebar
+        },
+        userPageClass
+      ]
+    }
+  },
+
+  mounted () {
+    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(to.name)) {
+        nprogress.start()
+      }
+      next()
+    })
+
+    this.$router.afterEach(() => {
+      nprogress.done()
+      this.isSidebarOpen = false
+    })
+  },
+
+  methods: {
+    toggleSidebar (to) {
+      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
+    },
+    // side swipe
+    onTouchStart (e) {
+      this.touchStart = {
+        x: e.changedTouches[0].clientX,
+        y: e.changedTouches[0].clientY
+      }
+    },
+    onTouchEnd (e) {
+      const dx = e.changedTouches[0].clientX - this.touchStart.x
+      const dy = e.changedTouches[0].clientY - this.touchStart.y
+      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
+        if (dx > 0 && this.touchStart.x <= 80) {
+          this.toggleSidebar(true)
+        } else {
+          this.toggleSidebar(false)
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style src="prismjs/themes/prism-tomorrow.css"></style>
+<style src="./styles/theme.styl" lang="stylus"></style>

NavLink.vue

@@ -0,0 +1,46 @@
+<template>
+  <router-link
+    class="nav-link"
+    :to="link"
+    v-if="!isExternal(link)"
+    :exact="exact"
+  >{{ item.text }}</router-link>
+  <a
+    v-else
+    :href="link"
+    class="nav-link external"
+    :target="isMailto(link) || isTel(link) ? null : '_blank'"
+    :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
+  >
+    {{ item.text }}
+    <OutboundLink/>
+  </a>
+</template>
+
+<script>
+import { isExternal, isMailto, isTel, ensureExt } from './util'
+
+export default {
+  props: {
+    item: {
+      required: true
+    }
+  },
+  computed: {
+    link () {
+      return ensureExt(this.item.link)
+    },
+    exact () {
+      if (this.$site.locales) {
+        return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
+      }
+      return this.link === '/'
+    }
+  },
+  methods: {
+    isExternal,
+    isMailto,
+    isTel
+  }
+}
+</script>