👽 🐛 fix: Updating code due to API changes of VuePress

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()
       }
 

Page.vue

@@ -135,8 +135,4 @@ export default {
 
       p
         color: #888
-
-    pre
-      border: 1px solid #333
-      background-color: $black !important
 </style>

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).
 ---
 

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).
 ---
 

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` 启用**增强模式**。
 

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` 发送请求到对应的地址上。并将其请求信息输出到浏览器开发者工具中的控制台上。方便进行快速测试和预览。
 

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",

styles/_components/_code.styl

@@ -1,95 +1,154 @@
 @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
       padding 0
       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

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)
 }