Merge branch 'develop' of github.com:vuepress-reco/vuepress-theme-reco into develop

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "1.5.2",
+  "version": "1.5.3",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

packages/vuepress-theme-reco/components/Mode/modeOptions.js

@@ -31,8 +31,8 @@ const modeOptions = {
     '--default-color-2': 'rgba(0, 0, 0, .2)',
     '--default-color-1': 'rgba(0, 0, 0, .1)',
     '--background-color': '#181818',
-    '--box-shadow': '0 1px 6px 0 rgba(0, 0, 0, .9)',
+    '--box-shadow': '0 1px 8px 0 rgba(0, 0, 0, .6)',
-    '--box-shadow-hover': '0 2px 26px 0 rgba(0, 0, 0, .9)',
+    '--box-shadow-hover': '0 2px 16px 0 rgba(0, 0, 0, .7)',
     '--text-color': 'rgba(255, 255, 255, .8)',
     '--text-color-sub': '#8B8B8B',
     '--border-color': 'rgba(0, 0, 0, .3)',

packages/vuepress-theme-reco/components/PersonalInfo.vue

@@ -41,8 +41,8 @@ export default {
   .personal-img {
     display block
     margin 2rem auto 1rem
-    width 5rem
+    width 6rem
-    height 5rem
+    height 6rem
     border-radius 50%
   }
   .name {
@@ -56,7 +56,7 @@ export default {
     width 80%
     > div {
       text-align center
-      flex auto
+      flex 0 0 50%
       &:first-child {
         border-right 1px solid #333
       }

packages/vuepress-theme-reco/components/Sidebar.vue

@@ -31,6 +31,7 @@ export default {
     padding 0
     margin 0
     list-style-type none
+    &.sidebar-links
       > li
         background $accentColor
   a

packages/vuepress-theme-reco/components/SidebarGroup.vue

@@ -114,7 +114,7 @@ export default {
     position absolute
     top 0
     bottom 0
-    right 0.5em
+    right 1em
     margin auto
   &.clickable
     &.active

packages/vuepress-theme-reco/enhanceApp.js

@@ -2,8 +2,23 @@ import postMixin from '@theme/mixins/posts'
 import localMixin from '@theme/mixins/locales'
 
 export default ({
-  Vue
+  Vue,
+  siteData,
+  isServer
 }) => {
   Vue.mixin(postMixin)
   Vue.mixin(localMixin)
+  if (!isServer) {
+    _registerCodeThemeCss(siteData.themeConfig.codeTheme)
+  }
+}
+
+function _registerCodeThemeCss (theme = 'tomorrow') {
+  const themeArr = ['tomorrow', 'funky', 'okaidia', 'solarizedlight', 'default']
+
+  const link = document.createElement('link')
+  link.rel = 'stylesheet'
+  link.href = `//prismjs.com/themes/prism${themeArr.indexOf(theme) > -1 ? `-${theme}` : ''}.css`
+
+  document.head.append(link)
 }

packages/vuepress-theme-reco/layouts/Category.vue

@@ -45,10 +45,9 @@ import pagination from '@theme/mixins/pagination'
 import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
 import { getOneColor } from '@theme/helpers/other'
 import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
-import codeTheme from '@theme/mixins/codeTheme'
 
 export default {
-  mixins: [pagination, moduleTransitonMixin, codeTheme],
+  mixins: [pagination, moduleTransitonMixin],
   components: { Common, NoteAbstract, ModuleTransition },
 
   data () {

packages/vuepress-theme-reco/layouts/Layout.vue

@@ -13,11 +13,9 @@ import Page from '@theme/components/Page'
 import Footer from '@theme/components/Footer'
 import Common from '@theme/components/Common'
 import { resolveSidebarItems } from '@theme/helpers/utils'
-import codeTheme from '@theme/mixins/codeTheme'
 
 export default {
   components: { HomeBlog, Home, Page, Common, Footer },
-  mixins: [codeTheme],
   computed: {
     sidebarItems () {
       return resolveSidebarItems(

packages/vuepress-theme-reco/layouts/Tag.vue

@@ -39,10 +39,9 @@ import pagination from '@theme/mixins/pagination'
 import ModuleTransition from '@theme/components/ModuleTransition'
 import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
 import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
-import codeTheme from '@theme/mixins/codeTheme'
 
 export default {
-  mixins: [pagination, moduleTransitonMixin, codeTheme],
+  mixins: [pagination, moduleTransitonMixin],
   components: { Common, NoteAbstract, TagList, ModuleTransition },
 
   data () {

packages/vuepress-theme-reco/mixins/codeTheme.js

@@ -1,31 +0,0 @@
-export default {
-  created () {
-    const { codeTheme = 'tomorrow' } = this.$themeConfig
-    switch (codeTheme) {
-      case 'coy':
-        import('prismjs/themes/prism-coy.css')
-        break
-      case 'dark':
-        import('prismjs/themes/prism-dark.css')
-        break
-      case 'funky':
-        import('prismjs/themes/prism-funky.css')
-        break
-      case 'okaidia':
-        import('prismjs/themes/prism-okaidia.css')
-        break
-      case 'solarizedlight':
-        import('prismjs/themes/prism-solarizedlight.css')
-        break
-      case 'tomorrow':
-        import('prismjs/themes/prism-tomorrow.css')
-        break
-      case 'twilight':
-        import('prismjs/themes/prism-twilight.css')
-        break
-      default:
-        import('prismjs/themes/prism.css')
-        break
-    }
-  }
-}

packages/vuepress-theme-reco/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-reco",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "A simple and beautiful vuepress Blog & Doc theme.",
   "keywords": [
     "vuepress",

packages/vuepress-theme-reco/styles/code.styl

@@ -1,135 +1,135 @@
-//.content__default
+.content__default
-//  code
+ code
-//    color lighten($textColor, 20%)
+   color lighten($textColor, 20%)
-//    padding 0.25rem 0.5rem
+   padding 0.25rem 0.5rem
-//    margin 0
+   margin 0
-//    font-size 0.85em
+   font-size 0.85em
-//    background-color var(--code-color)
+   background-color var(--code-color)
-//    border-radius 3px
+   border-radius 3px
-//    .token
+   .token
-//      &.deleted
+     &.deleted
-//        color #EC5975
+       color #EC5975
-//      &.inserted
+     &.inserted
-//        color $accentColor
+       color $accentColor
-//
+
-//.content__default
+.content__default
-//  pre, pre[class*="language-"]
+ pre, pre[class*="language-"]
-//    line-height 1.4
+   line-height 1.4
-//    padding 1.25rem 1.5rem
+   padding 1.25rem 1.5rem
-//    margin 0.85rem 0
+   margin 0.85rem 0
-//    background-color $codeBgColor
+   background-color $codeBgColor
-//    border-radius 6px
+   border-radius 6px
-//    overflow auto
+   overflow auto
-//    code
+   code
-//      color #fff
+     color #fff
-//      padding 0
+     padding 0
-//      background-color transparent
+     background-color transparent
-//      border-radius 0
+     border-radius 0
-//
+
-//div[class*="language-"]
+div[class*="language-"]
-//  position relative
+ position relative
-//  background-color $codeBgColor
+ background-color $codeBgColor
-//  border-radius 6px
+ border-radius 6px
-//  .highlight-lines
+ .highlight-lines
-//    user-select none
+   user-select none
-//    padding-top 1.3rem
+   padding-top 1.3rem
-//    position absolute
+   position absolute
-//    top 0
+   top 0
-//    left 0
+   left 0
-//    width 100%
+   width 100%
-//    line-height 1.4
+   line-height 1.4
-//    .highlighted
+   .highlighted
-//      background-color rgba(0, 0, 0, 66%)
+     background-color rgba(0, 0, 0, 66%)
-//  pre, pre[class*="language-"]
+ pre, pre[class*="language-"]
-//    background transparent
+   background transparent
-//    position relative
+   position relative
-//    z-index 1
+   z-index 1
-//  &::before
+ &::before
-//    position absolute
+   position absolute
-//    z-index 3
+   z-index 3
-//    top 0.8em
+   top 0.8em
-//    right 1em
+   right 1em
-//    font-size 0.75rem
+   font-size 0.75rem
-//    color rgba(255, 255, 255, 0.4)
+   color rgba(255, 255, 255, 0.4)
-//  &:not(.line-numbers-mode)
+ &:not(.line-numbers-mode)
-//    .line-numbers-wrapper
+   .line-numbers-wrapper
-//      display none
+     display none
-//  &.line-numbers-mode
+ &.line-numbers-mode
-//    .highlight-lines .highlighted
+   .highlight-lines .highlighted
-//        position relative
+       position relative
-//        &:before
+       &:before
-//          content ' '
+         content ' '
-//          position absolute
+         position absolute
-//          z-index 3
+         z-index 3
-//          left 0
+         left 0
-//          top 0
+         top 0
-//          display block
+         display block
-//          width $lineNumbersWrapperWidth
+         width $lineNumbersWrapperWidth
-//          height 100%
+         height 100%
-//          background-color rgba(0, 0, 0, 66%)
+         background-color rgba(0, 0, 0, 66%)
-//    pre
+   pre
-//      padding-left $lineNumbersWrapperWidth + 1 rem
+     padding-left $lineNumbersWrapperWidth + 1 rem
-//      vertical-align middle
+     vertical-align middle
-//    .line-numbers-wrapper
+   .line-numbers-wrapper
-//      position absolute
+     position absolute
-//      top 0
+     top 0
-//      width $lineNumbersWrapperWidth
+     width $lineNumbersWrapperWidth
-//      text-align center
+     text-align center
-//      color rgba(255, 255, 255, 0.3)
+     color rgba(255, 255, 255, 0.3)
-//      padding 1.25rem 0
+     padding 1.25rem 0
-//      line-height 1.4
+     line-height 1.4
-//      br
+     br
-//        user-select none
+       user-select none
-//      .line-number
+     .line-number
-//        position relative
+       position relative
-//        z-index 4
+       z-index 4
-//        user-select none
+       user-select none
-//        font-size 0.85em
+       font-size 0.85em
-//    &::after
+   &::after
-//      content ''
+     content ''
-//      position absolute
+     position absolute
-//      z-index 2
+     z-index 2
-//      top 0
+     top 0
-//      left 0
+     left 0
-//      width $lineNumbersWrapperWidth
+     width $lineNumbersWrapperWidth
-//      height 100%
+     height 100%
-//      border-radius 6px 0 0 6px
+     border-radius 6px 0 0 6px
-//      border-right 1px solid rgba(0, 0, 0, 66%)
+     border-right 1px solid rgba(0, 0, 0, 66%)
-//      background-color $codeBgColor
+     background-color $codeBgColor
-//
+
-//
+
-//for lang in $codeLang
+for lang in $codeLang
-//  div{'[class~="language-' + lang + '"]'}
+ div{'[class~="language-' + lang + '"]'}
-//    &:before
+   &:before
-//      content ('' + lang)
+     content ('' + lang)
-//
+
-//div[class~="language-javascript"]
+div[class~="language-javascript"]
-//  &:before
+ &:before
-//    content "js"
+   content "js"
-//
+
-//div[class~="language-typescript"]
+div[class~="language-typescript"]
-//  &:before
+ &:before
-//    content "ts"
+   content "ts"
-//
+
-//div[class~="language-markup"]
+div[class~="language-markup"]
-//  &:before
+ &:before
-//    content "html"
+   content "html"
-//
+
-//div[class~="language-markdown"]
+div[class~="language-markdown"]
-//  &:before
+ &:before
-//    content "md"
+   content "md"
-//
+
-//div[class~="language-json"]:before
+div[class~="language-json"]:before
-//  content "json"
+ content "json"
-//
+
-//div[class~="language-ruby"]:before
+div[class~="language-ruby"]:before
-//  content "rb"
+ content "rb"
-//
+
-//div[class~="language-python"]:before
+div[class~="language-python"]:before
-//  content "py"
+ content "py"
-//
+
-//div[class~="language-bash"]:before
+div[class~="language-bash"]:before
-//  content "sh"
+ content "sh"
-//
+
-//div[class~="language-php"]:before
+div[class~="language-php"]:before
-//  content "php"
+ content "php"

packages/vuepress-theme-reco/styles/palette.styl

@@ -28,9 +28,9 @@ $backgroundColor ?= #fff
 $backgroundColorDark ?= #181818
 
 $boxShadow = 0 1px 8px 0 $darkColor1
-$boxShadowHover = 0 2px 16px 0 $darkColor1
+$boxShadowHover = 0 2px 16px 0 $darkColor2
-$boxShadowDark = 0 1px 6px 0 $darkColor6
+$boxShadowDark = 0 1px 8px 0 $darkColor6
-$boxShadowHoverDark = 0 2px 16px 0 $darkColor6
+$boxShadowHoverDark = 0 2px 16px 0 $darkColor7
 
 $textColor ?= #242424
 $textColorDark ?= $lightColor8