From 1a928c7e7fa0fb5b6c12eb58a0596fcc3dad394a Mon Sep 17 00:00:00 2001
From: meteorlxy <meteor.lxy@foxmail.com>
Date: Sun, 3 Mar 2019 01:46:32 +0800
Subject: [PATCH] feat($plugin-nprogress): allow nprogress use different color
 and add docs (#1366)

---
 .../@vuepress/plugin-nprogress/nprogress.styl | 10 +++--
 packages/docs/docs/.vuepress/config.js        |  1 +
 .../docs/plugin/official/plugin-nprogress.md  | 39 +++++++++++++++++++
 .../zh/plugin/official/plugin-nprogress.md    | 39 +++++++++++++++++++
 4 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 packages/docs/docs/plugin/official/plugin-nprogress.md
 create mode 100644 packages/docs/docs/zh/plugin/official/plugin-nprogress.md

diff --git a/packages/@vuepress/plugin-nprogress/nprogress.styl b/packages/@vuepress/plugin-nprogress/nprogress.styl
index f186a67ec3..0e30b8de15 100644
--- a/packages/@vuepress/plugin-nprogress/nprogress.styl
+++ b/packages/@vuepress/plugin-nprogress/nprogress.styl
@@ -1,7 +1,9 @@
+$nprogressColor ?= $accentColor
+
 #nprogress
   pointer-events none
   .bar
-    background $accentColor
+    background $nprogressColor
     position fixed
     z-index 1031
     top 0
@@ -14,7 +16,7 @@
     right 0px
     width 100px
     height 100%
-    box-shadow 0 0 10px $accentColor, 0 0 5px $accentColor
+    box-shadow 0 0 10px $nprogressColor, 0 0 5px $nprogressColor
     opacity 1.0
     transform rotate(3deg) translate(0px, -4px)
   .spinner
@@ -28,8 +30,8 @@
     height 18px
     box-sizing border-box
     border solid 2px transparent
-    border-top-color $accentColor
-    border-left-color $accentColor
+    border-top-color $nprogressColor
+    border-left-color $nprogressColor
     border-radius 50%
     animation nprogress-spinner 400ms linear infinite
 
diff --git a/packages/docs/docs/.vuepress/config.js b/packages/docs/docs/.vuepress/config.js
index e1a7e0466a..999cc2535d 100755
--- a/packages/docs/docs/.vuepress/config.js
+++ b/packages/docs/docs/.vuepress/config.js
@@ -120,6 +120,7 @@ function getGuideSidebar (groupA, groupB) {
 const officalPlugins = fs
   .readdirSync(path.resolve(__dirname, '../plugin/official'))
   .map(filename => 'official/' + filename.slice(0, -3))
+  .sort()
 
 function getPluginSidebar (pluginTitle, pluginIntro, officialPluginTitle) {
   return [
diff --git a/packages/docs/docs/plugin/official/plugin-nprogress.md b/packages/docs/docs/plugin/official/plugin-nprogress.md
new file mode 100644
index 0000000000..02bd7f2fef
--- /dev/null
+++ b/packages/docs/docs/plugin/official/plugin-nprogress.md
@@ -0,0 +1,39 @@
+---
+title: nprogress
+metaTitle: Nprogress Plugin | VuePress
+---
+
+# [@vuepress/plugin-nprogress](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-nprogress)
+
+> Nprogress plugin
+
+## Install
+
+```bash
+yarn add -D @vuepress/plugin-nprogress
+# OR npm install -D @vuepress/plugin-nprogress
+```
+
+## Usage
+
+```javascript
+module.exports = {
+  plugins: ['@vuepress/nprogress']
+}
+```
+
+## Custom color
+
+Set `$nprogressColor` in your __site__ or __theme__ `palette.styl` file to change the color of the progress bar (default is `$accentColor`).
+
+```stylus
+// .vuepress/styles/palette.styl
+// or
+// .vuepress/theme/styles/palette.styl
+
+$nprogressColor = red
+```
+
+**Also see:**
+
+- [Config Reference > Styling](../../config/#styling)
diff --git a/packages/docs/docs/zh/plugin/official/plugin-nprogress.md b/packages/docs/docs/zh/plugin/official/plugin-nprogress.md
new file mode 100644
index 0000000000..a955bed7a8
--- /dev/null
+++ b/packages/docs/docs/zh/plugin/official/plugin-nprogress.md
@@ -0,0 +1,39 @@
+---
+title: nprogress
+metaTitle: Nprogress 插件 | VuePress
+---
+
+# [@vuepress/plugin-nprogress](https://github.com/vuejs/vuepress/tree/master/packages/%40vuepress/plugin-nprogress)
+
+> Nprogress plugin
+
+## 安装
+
+```bash
+yarn add -D @vuepress/plugin-nprogress
+# 或者 npm install -D @vuepress/plugin-nprogress
+```
+
+## 使用
+
+```javascript
+module.exports = {
+  plugins: ['@vuepress/nprogress']
+}
+```
+
+## 自定义颜色
+
+在你的 __site__ 或 __theme__ 的 `palette.styl` 文件中设置 `$nprogressColor` 来改变进度条的颜色（默认使用 `$accentColor`）。
+
+```stylus
+// .vuepress/styles/palette.styl
+// 或者
+// .vuepress/theme/styles/palette.styl
+
+$nprogressColor = red
+```
+
+**参考：**
+
+- [配置 > Styling](../../config/#styling)