refactor: test lerna

.gitignore

@@ -1,4 +1 @@
-node_modules/
+node_modules
-yarn.lock
-.DS_Store
-package-lock.json

example/docs/.vuepress/config.js

@@ -7,7 +7,7 @@ module.exports = {
     ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
   ],
   // theme: 'reco',
-  theme: require.resolve('../../../'),
+  theme: require.resolve('../../../packages/vuepress-theme-reco'),
   themeConfig: {
     nav: [
       { text: 'Home', link: '/', icon: 'reco-home' },

lerna.json

@@ -0,0 +1,8 @@
+{
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.0.0",
+  "npmClient": "yarn",
+  "useWorkspaces": true
+} 

locals/ja.js

@@ -1,8 +0,0 @@
-export default {
-  homeBlog: {
-    article: '記事',
-    tag: 'タグ',
-    category: 'カテゴリー',
-    friendLink: 'お友達リンク'
-  }
-}

package.json

@@ -1,49 +1,29 @@
 {
   "name": "vuepress-theme-reco",
-  "version": "1.3.3-alpha.1",
+  "version": "1.3.3",
-  "description": "A simple and beautiful vuepress Blog & Doc theme.",
+  "private": true,
   "main": "index.js",
+  "license": "MIT",
   "scripts": {
+    "lerna": "lerna",
     "dev": "vuepress dev example/docs",
     "build": "vuepress build example/docs",
     "eslint-ext": "eslint --ext .js,.vue ./",
-    "eslint-fix": "eslint --fix --ext .js,.vue ./"
+    "eslint-fix": "eslint --fix --ext .js,.vue ./",
+    "version": "lerna version --conventional-commits"
   },
-  "repository": {
+  "workspaces": [
-    "type": "git",
+    "packages/vuepress-theme-reco",
-    "url": "git+https://github.com/vuepress-reco/vuepress-theme-reco.git"
+    "packages/@vuepress-reco/*"
-  },
-  "keywords": [
-    "vuepress",
-    "vue",
-    "theme"
   ],
-  "author": "reco_luan",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/vuepress-reco/vuepress-theme-reco/issues"
-  },
-  "homepage": "https://vuepress-theme-reco.recoluan.com",
-  "_from": "vuepress-theme-reco@0.2.1",
-  "_resolved": "http://registry.npm.taobao.org/vuepress-theme-reco/download/vuepress-theme-reco-0.2.1.tgz",
-  "dependencies": {
-    "@vuepress-reco/vuepress-plugin-back-to-top": "1.0.8",
-    "@vuepress-reco/vuepress-plugin-extract-code": "1.0.3",
-    "@vuepress-reco/vuepress-plugin-loading-page": "1.0.5",
-    "@vuepress-reco/vuepress-plugin-pagation": "1.0.6",
-    "@vuepress-reco/vuepress-plugin-comments": "1.0.14",
-    "@vuepress/plugin-medium-zoom": "1.2.0",
-    "@vuepress/plugin-blog": "1.3.0",
-    "docsearch.js": "2.5.2",
-    "leancloud-storage": "3.13.2",
-    "valine": "1.3.6",
-    "vue-click-outside": "1.0.7",
-    "md5": "2.2.1"
-  },
   "devDependencies": {
-    "babel-eslint": "10.0.3",
+    "babel-eslint": "^10.1.0",
-    "eslint": "6.4.0",
+    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "5.2.3",
+    "eslint-plugin-vue": "^6.2.2",
-    "vuepress": "1.2.0"
+    "lerna": "^3.20.2",
+    "vuepress": "^1.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

packages/@vuepress-reco/vuepress-plugin-loading/README.md

@@ -0,0 +1,12 @@
+# @vuepress-reco/vuepress-plugin-loading-page
+
+## Details
+
+> Loading page plugin for vuepress-theme-reco or other vuepress theme.
+
+|使用位置|值|
+|-|-|
+|plugin name|@vuepress-reco/vuepress-plugin-loading-page|
+|component name|LoadingPage（主题开发时使用）|
+
+

packages/@vuepress-reco/vuepress-plugin-loading/__tests__/vuepress-plugin-loading.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const vuepressPluginLoading = require('..');
+
+describe('@vuepress-reco/vuepress-plugin-loading', () => {
+    it('needs tests');
+});

packages/@vuepress-reco/vuepress-plugin-loading/bin/LoadingPage.vue

@@ -0,0 +1,91 @@
+<template>
+  <div id="loader-wrapper">
+    <div class="loader-main">
+      <div v-for="item in 4" :key="`out${item}`">
+      </div>
+    </div>
+    <h3 class="title" v-if="$frontmatter.home">{{$site.title || $localeConfig.title}}</h3>
+    <p class="description" v-if="$frontmatter.home">{{$site.description || $localeConfig.description}}</p>
+  </div>
+</template>
+
+<style lang="stylus" scoped>
+#loader-wrapper
+  height:100vh;
+  width:100vw;
+  background #fff
+  background var(--background-color)
+  .loader-main
+    position:fixed;
+    width:120px;
+    height:50px;
+    top:45%;
+    left:50%;
+    z-index:555;
+    transform:translate(-50%,0);
+    div
+      &:nth-child(2){ animation:pacman-balls 1s 0s infinite linear; }
+      &:nth-child(3){ animation:pacman-balls 1s 0.33s infinite linear; }
+      &:nth-child(4){ animation:pacman-balls 1s 0.66s infinite linear; }
+      &:nth-child(5){ animation:pacman-balls 1s 0.99s infinite linear; }
+      &:first-of-type
+        width:0px;
+        height:0px;
+        border-right:25px solid transparent;
+        border-top:25px solid $accentColor;
+        border-left:25px solid $accentColor;
+        border-bottom:25px solid $accentColor;
+        border-radius:25px;
+        animation:rotate_pacman_half_up 0.5s 0s infinite;
+      &:nth-child(2)
+        width:0px;
+        height:0px;
+        border-right:25px solid transparent;
+        border-top:25px solid $accentColor;
+        border-left:25px solid $accentColor;
+        border-bottom:25px solid $accentColor;
+        border-radius:25px;
+        animation:rotate_pacman_half_down 0.5s 0s infinite;
+        margin-top:-50px;
+      &:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6)
+        background-color:$accentColor;
+        width:15px;
+        height:15px;
+        border-radius:100%;
+        margin:2px;
+        width:10px;
+        height:10px;
+        position:absolute;
+        transform:translate(0,-6.25px);
+        top:25px;
+        left:100px;
+  .title
+    margin 8rem auto 2rem
+    text-align center
+    color $textColor
+    color var(--text-color)
+    font-size 30px
+    box-sizing: border-box;
+    padding: 0 10px;
+    text-shadow 0 2px 10px rgba(0,0,0,0.2)
+  .description
+    margin auto
+    text-align center
+    color $textColor
+    color var(--text-color)
+    font-size 22px
+    box-sizing: border-box;
+    padding: 0 10px;
+    text-shadow 0 2px 10px rgba(0,0,0,0.2);
+  @keyframes pacman-balls
+    75%{opacity:0.7;}
+    100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
+  @keyframes rotate_pacman_half_up
+    0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
+    50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
+    100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
+  @keyframes rotate_pacman_half_down
+    0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
+    50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
+    100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
+</style>

packages/@vuepress-reco/vuepress-plugin-loading/bin/enhanceAppFile.js

@@ -0,0 +1,5 @@
+import LoadingPage from './LoadingPage.vue'
+
+export default ({ Vue }) => {
+  Vue.component('LoadingPage', LoadingPage)
+}

packages/@vuepress-reco/vuepress-plugin-loading/index.js

@@ -0,0 +1,8 @@
+const { path } = require('@vuepress/shared-utils')
+
+module.exports = (options, context) => ({
+  name: '@vuepress-reco/vuepress-plugin-loading-page',
+  enhanceAppFiles: [
+    path.resolve(__dirname, './bin/enhanceAppFile.js')
+  ]
+})

packages/@vuepress-reco/vuepress-plugin-loading/lib/vuepress-plugin-loading.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = vuepressPluginLoading;
+
+function vuepressPluginLoading() {
+    // TODO
+}

packages/@vuepress-reco/vuepress-plugin-loading/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@vuepress-reco/vuepress-plugin-loading-page",
+  "version": "1.0.4",
+  "description": "Loading page plugin for vuepress-theme-reco or other vuepress theme",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuepress-reco/vuepress-plugin-loading-page.git"
+  },
+  "keywords": [
+    "vuepress-theme-reco",
+    "loading-page",
+    "vuepress"
+  ],
+  "author": "reco_luan <recoluan@outlook.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vuepress-reco/vuepress-plugin-loading-page/issues"
+  },
+  "homepage": "https://vuepress-theme-reco.recoluan.com"
+}

packages/vuepress-theme-reco/__tests__/vuepress-theme-reco.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const vuepressThemeReco = require('..');
+
+describe('vuepress-theme-reco', () => {
+    it('needs tests');
+});

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

@@ -13,7 +13,7 @@
       <a>
         <span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
         &nbsp;&nbsp;
-        <span v-if="$themeConfig.startYear && $themeConfig.startYear != year">{{ $themeConfig.startYear }} - </span>
+        <span v-if="$themeConfig.startYear">{{ $themeConfig.startYear }} - </span>
         {{ year }}
       </a>
     </span>

packages/vuepress-theme-reco/components/Mode/ModePicker.vue

@@ -6,14 +6,14 @@
         v-for="(mode, index) in modeOptions"
         :key="index"
         :class="getClass(mode.mode)"
-        @click="selectMode(mode.mode)"
+        @click="selectMode(mode)"
       >{{ mode.title }}</li>
     </ul>
   </div>
 </template>
 
 <script>
-import setMode from './setMode'
+import setMode, { activateMode } from './setMode'
 
 export default {
   name: 'ModeOptions',
@@ -31,19 +31,22 @@ export default {
 
   mounted () {
     const mode = localStorage.getItem('mode')
-    const { mode: customizeMode, modePicker } = this.$themeConfig
+    const { mode: customizeMode } = this.$themeConfig
-    const themeMode = customizeMode ?? 'auto'
+    this.currentMode = mode === null ? customizeMode === undefined ? 'auto' : customizeMode : mode
-    this.currentMode = modePicker === false ? themeMode : mode ?? themeMode
+    activateMode(this.currentMode)
-    setMode(this.currentMode)
   },
 
   methods: {
     selectMode (mode) {
-      if (mode !== this.currentMode) {
+      if (mode.mode === this.currentMode) {
-        this.currentMode = mode
+        return
-        setMode(mode)
+      } else if (mode.mode === 'auto') {
-        localStorage.setItem('mode', mode)
+        setMode()
+      } else {
+        activateMode(mode.mode)
       }
+      localStorage.setItem('mode', mode.mode)
+      this.currentMode = mode.mode
     },
     getClass (mode) {
       return mode !== this.currentMode ? mode : `${mode} active`

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

@@ -1,6 +1,6 @@
 import modeOptions from './modeOptions'
 
-function activateMode (mode) {
+export function activateMode (mode) {
   const rootElement = document.querySelector(':root')
   const options = modeOptions[mode]
 
@@ -9,33 +9,19 @@ function activateMode (mode) {
   }
 }
 
-// Dark and Light autoswitches
-const onDark = (e) => e.matches && activateMode('dark')
-const onLight = (e) => e.matches && activateMode('light')
-
-const darkScheme = window.matchMedia('(prefers-color-scheme: dark)')
-const lightScheme = window.matchMedia('(prefers-color-scheme: light)')
-
 /**
  * Sets a color scheme for the website.
  * If browser supports "prefers-color-scheme" it will respect the setting for light or dark mode
  * otherwise it will set a dark theme during night time
  */
-export default function setMode (mode = 'auto') {
+export default function setMode () {
-  if (mode !== 'auto') {
+  const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-    darkScheme.removeListener(onDark)
+  const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
-    lightScheme.removeListener(onLight)
-    activateMode(mode)
-    return
-  }
-
-  const isDarkMode = darkScheme.matches
-  const isLightMode = lightScheme.matches
   const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
   const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified
 
-  darkScheme.addListener(onDark)
+  window.matchMedia('(prefers-color-scheme: dark)').addListener(e => e.matches && activateMode('dark'))
-  lightScheme.addListener(onLight)
+  window.matchMedia('(prefers-color-scheme: light)').addListener(e => e.matches && activateMode('light'))
 
   if (isDarkMode) activateMode('dark')
   if (isLightMode) activateMode('light')

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

@@ -22,7 +22,7 @@
         'max-width': linksWrapMaxWidth + 'px'
       } : {}">
 
-      <Mode v-show="$themeConfig.modePicker !== false" />
+      <Mode v-show="$themeConfig.mode !== null" />
       <AlgoliaSearchBox
         v-if="isAlgoliaSearch"
         :options="algolia"/>

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

@@ -32,7 +32,7 @@
           <a>
             <span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
             &nbsp;&nbsp;
-            <span v-if="$themeConfig.startYear && $themeConfig.startYear != year">{{ $themeConfig.startYear }} - </span>
+            <span v-if="$themeConfig.startYear">{{ $themeConfig.startYear }} - </span>
             {{ year }}
           </a>
         </span>

packages/vuepress-theme-reco/lib/vuepress-theme-reco.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = vuepressThemeReco;
+
+function vuepressThemeReco() {
+    // TODO
+}

packages/vuepress-theme-reco/locals/ja.js

@@ -0,0 +1,8 @@
+export default {
+  homeBlog: {
+    article: '文章',
+    tag: 'ラベル',
+    category: '分類',
+    friendLink: '友情リンク'
+  }
+}

packages/vuepress-theme-reco/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "vuepress-theme-reco",
+  "version": "1.3.3-alpha.1",
+  "description": "A simple and beautiful vuepress Blog & Doc theme.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuepress-reco/vuepress-theme-reco.git"
+  },
+  "keywords": [
+    "vuepress",
+    "vue",
+    "theme"
+  ],
+  "author": "reco_luan",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vuepress-reco/vuepress-theme-reco/issues"
+  },
+  "homepage": "https://vuepress-theme-reco.recoluan.com",
+  "_from": "vuepress-theme-reco@0.2.1",
+  "_resolved": "http://registry.npm.taobao.org/vuepress-theme-reco/download/vuepress-theme-reco-0.2.1.tgz",
+  "dependencies": {
+    "@vuepress-reco/vuepress-plugin-back-to-top": "1.0.8",
+    "@vuepress-reco/vuepress-plugin-extract-code": "1.0.3",
+    "@vuepress-reco/vuepress-plugin-loading-page": "1.0.5",
+    "@vuepress-reco/vuepress-plugin-pagation": "1.0.6",
+    "@vuepress-reco/vuepress-plugin-comments": "1.0.14",
+    "@vuepress/plugin-medium-zoom": "1.2.0",
+    "@vuepress/plugin-blog": "1.3.0",
+    "docsearch.js": "2.5.2",
+    "leancloud-storage": "3.13.2",
+    "valine": "1.3.6",
+    "vue-click-outside": "1.0.7",
+    "md5": "2.2.1"
+  }
+}