vuepress-theme-uniapp-official 1.4.37 → 1.4.39

package/components/AlgoliaSearchBox.vue

@@ -69,11 +69,11 @@
 	   flex-direction column
 	   justify-content center
 	 #docsearch span
-	   @media (min-width: 1200px)
+	   @media (min-width: $DocSearch_MQMobile)
 	    &
 	     display flex
 
-	 @media (max-width: 1200px)
+	 @media (max-width: $DocSearch_MQMobile)
 	   :root
 	     --docsearch-spacing 10px
 	     --docsearch-footer-height 40px

package/components/NavLinks.vue

@@ -128,6 +128,7 @@ export default {
 
 <style lang="stylus">
 .nav-links
+  max-width 90%
   display inline-block
   a
     line-height 1.4rem

package/global-components/CodeSimulator.vue

@@ -186,6 +186,7 @@ export default {
               src: this.src,
               frameborder: '0',
               allow: 'geolocation https://hellouniappx.dcloud.net.cn',
+              loading: 'lazy'
             },
             ref: 'codeIframe',
           }),

package/layouts/Layout.vue

@@ -6,49 +6,41 @@
     @touchend="onTouchEnd"
     @keydown.ctrl="openSearch = true"
   >
-    <Navbar
-      v-if="shouldShowNavbar"
-      @toggle-sidebar="toggleSidebar"
-    />
+    <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
 
-    <div
-      class="sidebar-mask"
-      @click="toggleSidebar(false)"
-    />
+    <div class="sidebar-mask" @click="toggleSidebar(false)" />
 
-    <Sidebar
-      ref="sidebar"
-      :items="sidebarItems"
-      @toggle-sidebar="toggleSidebar"
-      @hook:mounted="activeSidebarLinkVisible"
-    >
-      <template #top>
-        <slot name="sidebar-top" />
-      </template>
-      <template #bottom>
-        <slot name="sidebar-bottom" />
-        <SiderBarBottom v-if="$lang === LOCALE_ZH_HANS" />
-      </template>
-    </Sidebar>
+    <div class="content-container">
+      <Sidebar
+        ref="sidebar"
+        :items="sidebarItems"
+        @toggle-sidebar="toggleSidebar"
+        @hook:mounted="activeSidebarLinkVisible"
+      >
+        <template #top>
+          <slot name="sidebar-top" />
+        </template>
+        <template #bottom>
+          <slot name="sidebar-bottom" />
+          <SiderBarBottom v-if="$lang === LOCALE_ZH_HANS" />
+        </template>
+      </Sidebar>
 
-    <Home v-if="$page.frontmatter.home" />
+      <Home v-if="$page.frontmatter.home" />
 
-    <Page
-      v-else
-      :sidebar-items="sidebarItems"
-      :style="pageStyle"
-    >
-      <template #top>
-        <slot name="page-top" />
-        <TocTop/>
-      </template>
-      <template #bottom>
-        <slot name="page-bottom" />
-        <Footer />
-      </template>
-    </Page>
+      <Page v-else :sidebar-items="sidebarItems" :style="pageStyle">
+        <template #top>
+          <slot name="page-top" />
+          <TocTop />
+        </template>
+        <template #bottom>
+          <slot name="page-bottom" />
+          <Footer />
+        </template>
+      </Page>
 
-    <Toc />
+      <Toc />
+    </div>
   </div>
 </template>
 
@@ -57,18 +49,18 @@ import Home from '@theme/components/Home.vue'
 import Navbar from '@theme/components/Navbar.vue'
 import Page from '@theme/components/Page.vue'
 import Sidebar from '@theme/components/Sidebar.vue'
-import Footer from '@theme/components/Footer.vue';
-import SiderBarBottom from '../components/SiderBarBottom.vue';
-import Toc from '../components/Toc';
-import TocTop from '../components/Toc-top';
+import Footer from '@theme/components/Footer.vue'
+import SiderBarBottom from '../components/SiderBarBottom.vue'
+import Toc from '../components/Toc'
+import TocTop from '../components/Toc-top'
 import { resolveSidebarItems, forbidScroll } from '../util'
-import navProvider from '../mixin/navProvider';
-import toc from '../mixin/toc';
-import { LOCALE_ZH_HANS } from '@theme-config/i18n';
+import navProvider from '../mixin/navProvider'
+import toc from '../mixin/toc'
+import { LOCALE_ZH_HANS } from '@theme-config/i18n'
 
 export default {
   name: 'Layout',
-  mixins: [ navProvider, toc ],
+  mixins: [navProvider, toc],
   components: {
     Home,
     Page,
@@ -77,67 +69,50 @@ export default {
     Footer,
     SiderBarBottom,
     Toc,
-    TocTop
+    TocTop,
   },
-  data () {
+  data() {
     return {
       isSidebarOpen: false,
-      LOCALE_ZH_HANS
+      LOCALE_ZH_HANS,
     }
   },
   computed: {
-    shouldShowNavbar () {
+    shouldShowNavbar() {
       const { themeConfig } = this.$site
       const { frontmatter } = this.$page
-      if (
-        frontmatter.navbar === false
-        || themeConfig.navbar === false) {
+      if (frontmatter.navbar === false || themeConfig.navbar === false) {
         return false
       }
-      return (
-        this.$title
-        || themeConfig.logo
-        || themeConfig.repo
-        || themeConfig.nav
-        || this.$themeLocaleConfig.nav
-      )
+      return this.$title || themeConfig.logo || themeConfig.repo || themeConfig.nav || this.$themeLocaleConfig.nav
     },
-    shouldShowSidebar () {
+    shouldShowSidebar() {
       const { frontmatter } = this.$page
-      return (
-        !frontmatter.home
-        && frontmatter.sidebar !== false
-        && this.sidebarItems.length
-      )
+      return !frontmatter.home && frontmatter.sidebar !== false && this.sidebarItems.length
     },
-    sidebarItems () {
-      return resolveSidebarItems(
-        this.$page,
-        this.$page.regularPath,
-        this.$site,
-        this.$localePath
-      )
+    sidebarItems() {
+      return resolveSidebarItems(this.$page, this.$page.regularPath, this.$site, this.$localePath)
     },
-    pageClasses () {
+    pageClasses() {
       const userPageClass = this.$page.frontmatter.pageClass
       return [
         {
           'no-navbar': !this.shouldShowNavbar,
           'sidebar-open': this.isSidebarOpen,
-          'no-sidebar': !this.shouldShowSidebar
+          'no-sidebar': !this.shouldShowSidebar,
         },
-        userPageClass
+        userPageClass,
       ]
     },
-    pageStyle () {
-      const style = {};
+    pageStyle() {
+      const style = {}
 
-      !this.visible && (style.paddingRight = '0px');
+      !this.visible && (style.paddingRight = '0px')
 
-      return style;
-    }
+      return style
+    },
   },
-  mounted () {
+  mounted() {
     this.$router.afterEach(() => {
       this.isSidebarOpen = false
     })
@@ -145,18 +120,18 @@ export default {
     this.renderNavLinkState()
   },
   methods: {
-    toggleSidebar (to) {
+    toggleSidebar(to) {
       this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
       this.$emit('toggle-sidebar', this.isSidebarOpen)
     },
     // side swipe
-    onTouchStart (e) {
+    onTouchStart(e) {
       this.touchStart = {
         x: e.changedTouches[0].clientX,
-        y: e.changedTouches[0].clientY
+        y: e.changedTouches[0].clientY,
       }
     },
-    onTouchEnd (e) {
+    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) {
@@ -172,16 +147,18 @@ export default {
         const navs = document.querySelectorAll('nav')
         const navLinks = []
         const sidebarLinks = Object.keys(this.$themeConfig.sidebar)
-        const matchSidebar = sidebarLinks.filter(i => this.$page.path.includes(i)).sort((a,b) => b.length -a.length)[0]
+        const matchSidebar = sidebarLinks
+          .filter(i => this.$page.path.includes(i))
+          .sort((a, b) => b.length - a.length)[0]
         navs.forEach(nav => {
           nav.querySelectorAll('a').forEach(navLink => {
-            if(navLink.className.indexOf('external') === -1) {
+            if (navLink.className.indexOf('external') === -1) {
               navLinks.push(navLink)
             }
           })
         })
 
-        navLinks.forEach((navLink,index) => {
+        navLinks.forEach((navLink, index) => {
           navLink.classList.remove('router-link-active')
           const matchWithoutMatchSidebar = sidebarLinks
             .filter(i => i !== matchSidebar && i !== '/')
@@ -191,10 +168,7 @@ export default {
           if (path) {
             if (
               navLink.href.match(matchSidebar) !== null &&
-              (
-                typeof matchWithoutMatchSidebar === 'undefined' ||
-                matchWithoutMatchSidebar.length < matchSidebar.length
-              )
+              (typeof matchWithoutMatchSidebar === 'undefined' || matchWithoutMatchSidebar.length < matchSidebar.length)
             ) {
               navLink.classList.add('router-link-active')
             }
@@ -204,7 +178,7 @@ export default {
           } else {
             // 0 => PC
             // navLinks.length / 2 => mobile
-            if(index === 0 || index === navLinks.length / 2) {
+            if (index === 0 || index === navLinks.length / 2) {
               navLink.classList.add('router-link-active')
               return
             }
@@ -220,19 +194,19 @@ export default {
           const sidebarScrollTop = sidebarEL.scrollTop
           const windowInnerHeight = window.innerHeight
           const { height, top, bottom } = activeLink.getBoundingClientRect()
-          if ((sidebarScrollTop + 50) > activeLink.offsetTop || (bottom + height) > windowInnerHeight) {
-            activeLink.scrollIntoView({ block: "center" })
+          if (sidebarScrollTop + 50 > activeLink.offsetTop || bottom + height > windowInnerHeight) {
+            activeLink.scrollIntoView({ block: 'center' })
           }
         }
       })
-    }
+    },
   },
   watch: {
     isSidebarOpen: forbidScroll,
     $route() {
       this.renderNavLinkState()
       this.activeSidebarLinkVisible()
-    }
-  }
+    },
+  },
 }
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-uniapp-official",
-  "version": "1.4.37",
+  "version": "1.4.39",
   "description": "uni-app official website theme for vuepress",
   "main": "index.js",
   "repository": {

package/styles/navbar.styl

@@ -16,7 +16,7 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
   .title-logo
     padding-left 20px
     border-left 1px solid #ccc
-    @media (max-width: 1080px)
+    @media (max-width: $DocSearch_MQMobile)
       &
         display none
   .sub-navbar
@@ -35,8 +35,7 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
     justify-content center
     align-items center
     .main-navbar-links
-      width 50%
-      white-space: nowrap;
+      width 55%
       display inline-block
       @media (min-width: 1080px) and (max-width: 1680px)
         &
@@ -77,7 +76,7 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
     color inherit
     &:hover
       color $accentColor
-  
+
   .custom-main-navbar
     position absolute
     height 30px
@@ -87,7 +86,7 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
       display none
     a
       color inherit
-    .nav-dropdown 
+    .nav-dropdown
       right auto
       left 0
       z-index 12
@@ -100,7 +99,7 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
     user-select none
     position absolute
     right 12.5rem
-    @media (max-width: 1200px)
+    @media (max-width: $DocSearch_MQMobile)
       &
         right 4.5rem
     &>div:nth-child(1)
@@ -237,7 +236,7 @@ $navbar-logo-height = $navbar-main-navbar-height - 2rem
           height 1px
           background-color #e4e8eb
           transform scaleY(.5)
-        .subnavbar__item 
+        .subnavbar__item
           a
             display block
             padding 0 16px
@@ -290,4 +289,4 @@ emphasize()
 
 .sidebar-group.depth-1
   .sidebar-links>li>.sidebar-link.active:not(.data-no-emphasize)
-    emphasize()
+    emphasize()

package/styles/palette.styl

@@ -8,3 +8,4 @@ $search-container-color = #f5f6f7
 $vuepress-toc-width = 14rem
 $vuepress-display-min-width = 1500px
 $MQMobile = 768px
+$DocSearch_MQMobile = 1400px