From 4770e6f734d687e5ec73ba49348bab0a3c7642d7 Mon Sep 17 00:00:00 2001
From: sqrtthree <imsqrtthree@gmail.com>
Date: Sat, 26 May 2018 12:27:50 +0800
Subject: [PATCH] :alien: :bug: fix: Updating code due to API changes of
 VuePress

---
 Layout.vue                           |   6 +-
 Page.vue                             |   4 -
 docs/README.md                       |   2 +-
 docs/zh/README.md                    |   2 +-
 docs/zh/configurations/README.md     |   2 +-
 docs/zh/configurations/components.md |  20 ++--
 package.json                         |   1 +
 styles/_components/_code.styl        | 171 ++++++++++++++++++---------
 utils.js                             |  10 +-
 9 files changed, 140 insertions(+), 78 deletions(-)

diff --git a/Layout.vue b/Layout.vue
index 419dda3..4f497f0 100644
--- a/Layout.vue
+++ b/Layout.vue
@@ -28,7 +28,6 @@
 <script>
 import Vue from 'vue'
 import nprogress from 'nprogress'
-import { pathToComponentName } from '@app/util'
 
 import Sidebar from './components/Sidebar'
 import Home from './Home'
@@ -82,10 +81,7 @@ export default {
     nprogress.configure({ showSpinner: false })
 
     this.$router.beforeEach((to, from, next) => {
-      if (
-        to.path !== from.path &&
-        !Vue.component(pathToComponentName(to.path))
-      ) {
+      if (to.path !== from.path && !Vue.component(to.name)) {
         nprogress.start()
       }
 
diff --git a/Page.vue b/Page.vue
index 7680aa4..f71222f 100644
--- a/Page.vue
+++ b/Page.vue
@@ -135,8 +135,4 @@ export default {
 
       p
         color: #888
-
-    pre
-      border: 1px solid #333
-      background-color: $black !important
 </style>
diff --git a/docs/README.md b/docs/README.md
index 560dcec..7f83d85 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -3,7 +3,7 @@ home: true
 title: Hello, World.
 description: Not sure where to start? We’ve put together some handy guides and reference documentation you can use to start building.
 actionText: Getting Started
-actionLink: /zh/getting-started
+actionLink: /zh/getting-started/
 footer: Open Source on [GitHub](https://github.com/sqrthree/vuepress-theme-api), Made by [@sqrthree](https://github.com/sqrthree), Power by [vuepress](https://github.com/vuejs/vuepress).
 ---
 
diff --git a/docs/zh/README.md b/docs/zh/README.md
index 03b5148..fb80dc4 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -3,7 +3,7 @@ home: true
 title: Hello, World.
 description: 不知道从哪里开始？我们准备了一些你可以用来开始构建的便捷指南和参考文档。
 actionText: 开始出发
-actionLink: /getting-started
+actionLink: /zh/getting-started/
 footer: Open Source on [GitHub](https://github.com/sqrthree/vuepress-theme-api), Made by [@sqrthree](https://github.com/sqrthree), Power by [vuepress](https://github.com/vuejs/vuepress).
 ---
 
diff --git a/docs/zh/configurations/README.md b/docs/zh/configurations/README.md
index 3305102..c4cff6f 100644
--- a/docs/zh/configurations/README.md
+++ b/docs/zh/configurations/README.md
@@ -96,7 +96,7 @@ footer: Open Source on [GitHub](https://github.com/sqrthree/vuepress-theme-api),
 
 文档页默认采用普通形式（通栏）的布局结构，例如 [起步页面](/zh/getting-started/)。同时得益于 `VuePress` 的 [组件支持特性](https://vuepress.vuejs.org/zh/guide/using-vue.html#%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84-api-%E8%AE%BF%E9%97%AE%E9%99%90%E5%88%B6)，我们可以在 Markdown 文件中直接使用 Vue 组件。因此，我们可以轻松构造出本页面这种 `RESTful API` 友好的页面布局。
 
-要使用这种布局，需要了解主题内提供的几个组件。具体使用方式请参考 [内置组件](zh/configurations/components.html)。
+要使用这种布局，需要了解主题内提供的几个组件。具体使用方式请参考 [内置组件](/zh/configurations/components.html)。
 
 如果你觉得内置组件过于繁琐，也可以通过在文件顶部的 `YAML front matter` 中配置 `enhance: true` 启用**增强模式**。
 
diff --git a/docs/zh/configurations/components.md b/docs/zh/configurations/components.md
index bb00b11..6f740c6 100644
--- a/docs/zh/configurations/components.md
+++ b/docs/zh/configurations/components.md
@@ -76,15 +76,17 @@ Some examples...
 
 例如下面的内容将会渲染成右侧的形式：
 
-    <CURL>
-    ```bash
-    curl -X POST http://api.example.com/api/auth/login \
-      --data '{
-        "username": "my-username",
-        "password": "my-password"
-      }'
-    ```
-    </CURL>
+````vue
+<CURL>
+```bash
+curl -X POST http://api.example.com/api/auth/login \
+  --data '{
+    "username": "my-username",
+    "password": "my-password"
+  }'
+```
+</CURL>
+````
 
 `CURL` 组件会在组件下方自动生成一个按钮，当点击按钮时，会通过分析 `curl` 命令内的参数，通过 `JS` 发送请求到对应的地址上。并将其请求信息输出到浏览器开发者工具中的控制台上。方便进行快速测试和预览。
 
diff --git a/package.json b/package.json
index 65a7f8e..91c515d 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "doc": "docs"
   },
   "scripts": {
+    "dev": "npm run docs:dev",
     "docs:dev": "vuepress dev docs",
     "docs:build": "vuepress build docs",
     "docs:serve": "serve --single docs/.vuepress/dist",
diff --git a/styles/_components/_code.styl b/styles/_components/_code.styl
index 6c4d6ac..59f1478 100644
--- a/styles/_components/_code.styl
+++ b/styles/_components/_code.styl
@@ -1,24 +1,22 @@
 @require '../_variables'
 
 .content
+
   code
     color #f81ce5
     padding 0.25rem 0.5rem
     margin 0
     font-size 0.85em
+    background-color rgba(27,31,35,0.05)
     border-radius 3px
 
 .content
+
   pre, pre[class*="language-"]
-    background-color $codeBgColor
     line-height 1.4
-    border-radius 6px
-    padding 1.5rem 1.5rem
-    margin 0.85rem 0
-    white-space pre-wrap
-    word-break break-word
+    padding 1.25rem 1.5rem
+    background transparent
     overflow auto
-    position relative
 
     code
       color #fff
@@ -26,70 +24,131 @@
       background-color transparent
       border-radius 0
 
-    &:before
+div[class*="language-"]
+  position relative
+  border: 1px solid $codeBgColor
+  margin 0.85rem 0
+  background-color $codeBgColor
+  border-radius 6px
+
+  .highlight-lines
+    user-select none
+    position absolute
+    top 0
+    left 0
+    width 100%
+    padding 1.25rem 0
+    margin: 0.5em 0
+    line-height 1.4
+
+    .highlighted
+      background-color rgba(0, 0, 0, 66%)
+
+
+  pre
+    position relative
+    z-index 1
+
+  &::before
+    position absolute
+    z-index 3
+    top 0.8em
+    right 1em
+    font-size 0.75rem
+    color rgba(255, 255, 255, 0.4)
+
+  &:not(.line-numbers-mode)
+
+    .line-numbers-wrapper
+      display none
+
+  &.line-numbers-mode
+
+    .highlight-lines .highlighted
+        position relative
+
+        &:before
+          content ' '
+          position absolute
+          z-index 3
+          left 0
+          top 0
+          display block
+          width 3.5rem
+          height 100%
+          background-color rgba(0, 0, 0, 66%)
+    pre
+      padding-left 5.5rem
+      vertical-align middle
+
+    .line-numbers-wrapper
       position absolute
-      top 0.8em
-      right 1em
-      font-size 0.75rem
-      color rgba(255, 255, 255, 0.4)
-
-  .highlighted-line
-    background-color rgba(0, 0, 0, 66%)
-    display block
-    margin 0 -1.5rem
-    padding 0 1.5rem
-
-  .examples
-    .highlighted-line
-      background-color rgba(255, 255, 255, 0.2)
-
-pre[class="language-js"], pre[class="language-javascript"]
+      top 0
+      width 3.5rem
+      text-align center
+      color rgba(255, 255, 255, 0.3)
+      padding 1.25rem 0
+      line-height 1.4
+
+      br
+        user-select none
+
+      .line-number
+        position relative
+        z-index 4
+        user-select none
+        font-size 0.85em
+
+    &::after
+      content ''
+      position absolute
+      z-index 2
+      top 0
+      left 0
+      width 3.5rem
+      height 100%
+      border-radius 6px 0 0 6px
+      border-right 1px solid rgba(0, 0, 0, 66%)
+      background-color $codeBgColor
+
+
+for lang in js ts html md vue css sass scss less stylus go java c sh yaml
+  div{'[class*="language-' + lang + '"]'}
+    &:before
+      content ('' + lang)
+
+div[class*="language-javascript"]
   &:before
     content "js"
 
-pre[class="language-html"], pre[class="language-markup"]
+div[class*="language-typescript"]
+  &:before
+    content "ts"
+
+div[class*="language-markup"]
   &:before
     content "html"
 
-pre[class="language-markdown"], pre[class="language-md"]
+div[class*="language-markdown"]
   &:before
     content "md"
 
-pre[class="language-vue"]:before
-  content "vue"
-
-pre[class="language-css"]:before
-  content "css"
-
-pre[class="language-sass"]:before
-  content "sass"
-
-pre[class="language-less"]:before
-  content "less"
-
-pre[class="language-scss"]:before
-  content "scss"
-
-pre[class="language-stylus"]:before
-  content "stylus"
-
-pre[class="language-json"]:before
+div[class*="language-json"]:before
   content "json"
 
-pre[class="language-ruby"]:before
+div[class*="language-ruby"]:before
   content "rb"
 
-pre[class="language-python"]:before
+div[class*="language-python"]:before
   content "py"
 
-pre[class="language-go"]:before
-  content "go"
-
-pre[class="language-java"]:before
-  content "java"
+div[class*="language-bash"]:before
+  content "sh"
 
-pre[class="language-c"]:before
-  content "c"
+.examples
+  div[class*="language-"]
+    background: black
+    border-color: #333
 
-pre[class="language-bash"]:before
-  content "sh"
+  .highlighted
+    background-color rgba(255, 255, 255, 0.2) !important
diff --git a/utils.js b/utils.js
index 848777d..0a41084 100644
--- a/utils.js
+++ b/utils.js
@@ -213,6 +213,14 @@ export function normalize(path) {
   return isAbsolute ? '/' + p : p
 }
 
+export function padTrailingSlash(path) {
+  return path.endsWith('/') ? path : path + '/'
+}
+
 export function localizePath(path, localeBase) {
-  return path.startsWith(localeBase) ? path : normalize(localeBase + path)
+  const result = path.startsWith(localeBase)
+    ? path
+    : normalize(localeBase + path)
+
+  return padTrailingSlash(result)
 }