feat: add changelog page

assets/styles/post.styl

@@ -27,7 +27,15 @@ margin-y($top, $bottom = $top)
   .no-links &::after
     height 58px
 
+  .one-demo
+    margin 1em 0 1.25em
+
+  .one-details
+    margin-bottom 5px
+
+[data-markdown]
   h1
+  h1&
     margin-y(0, 1.25em)
     font-size 36px
 
@@ -36,6 +44,7 @@ margin-y($top, $bottom = $top)
       color #999
 
   h2
+  h2&
     margin-y(1.3em, 1.2em)
     font-size 30px
 
@@ -48,53 +57,77 @@ margin-y($top, $bottom = $top)
       margin-top 2em
 
   h3
+  h3&
     margin-y(1.25em, 1.15em)
     font-size 24px
 
   h4
+  h4&
     margin-y(1.15em, 1.1em)
     font-size 18px
 
   h5
+  h5&
     margin-y(1.05em)
     font-size 14px
 
   h6
+  h6&
     margin-y(1em)
     font-size 12px
 
   h1
+  h1&
   h2
+  h2&
   h3
+  h3&
     font-weight 500
     clear both
 
   h1
+  h1&
   h2
+  h2&
   h3
+  h3&
   h4
+  h4&
   h5
+  h5&
   h6
+  h6&
     color #333
     line-height 1
 
   br
+  br&
     clear both
 
   p
+  p&
     margin-y(0.5em)
 
   ul
+  ul&
   ol
+  ol&
     padding-left 1.5em
 
   blockquote
+  blockquote&
     margin 1em 0
     padding-left 1em
     border-left 5px solid #f1f1f1
-    color #999
+    color #666
+    transition color 0.2s, border-color 0.2s
+
+    &:hover
+      color #333
+      border-left-color #d3d3d3
 
   table
+  table&
     width 100%
     border-collapse collapse
     border 1px solid #f1f1f1
@@ -129,8 +162,9 @@ margin-y($top, $bottom = $top)
     white-space nowrap
 
   a:link
+  a&:link
   a:visited
-    &:not([class^="veui-"])
+  a&:visited
     text-decoration none
     color #0052cc
     transition color 0.2s
@@ -142,14 +176,17 @@ margin-y($top, $bottom = $top)
       color #0046ad
 
   code
+  code&
     padding 2px 4px
-    background-color rgba(0, 0, 0, 0.024)
+    background-color #0066ff16
     font-size 90%
     overflow visible
     hyphens none
+    border-radius 3px
     font-family Menlo, consolas, monospace
 
   hr
+  hr&
     height 1px
     margin 2em 0
     padding 0
@@ -158,6 +195,7 @@ margin-y($top, $bottom = $top)
     clear both
 
   figure
+  figure&
     float right
     width 60%
     margin 0 0 30px 20px
@@ -190,6 +228,7 @@ margin-y($top, $bottom = $top)
       float none
 
   figcaption
+  figcaption&
     margin-top 10px
     font-size 12px
 
@@ -203,29 +242,13 @@ margin-y($top, $bottom = $top)
     .desc
       color #999
 
-  .comparison
-    float right
-    width 60%
-    margin 0 0 30px 20px
-
-    figure
-      width calc(50% - 5px)
-      margin 0
-
-    .good
-      float left
-
-    .bad
-      float right
-
-      .caption
-        color #ff5b5b
-
   img
+  img&
     max-width 100%
     max-height 100%
 
   pre
+  pre&
     border 1px solid #eee
     border-radius 4px
     padding 18px 24px
@@ -234,6 +257,7 @@ margin-y($top, $bottom = $top)
     overflow auto
 
     code
+      border none
       background-color transparent
       padding 0
 
@@ -254,6 +278,7 @@ margin-y($top, $bottom = $top)
     box-shadow inset 0 -1px 0 #959da5
 
   .custom-block
+  .custom-block&
     border 1px solid
     border-radius 4px
     margin 1em 0
@@ -266,6 +291,7 @@ margin-y($top, $bottom = $top)
       margin-bottom 0
 
   .veui-alert
+  .veui-alert&
     margin 1em 0
 
     p:first-child
@@ -291,9 +317,3 @@ margin-y($top, $bottom = $top)
 
     a
       margin-right 10px
-
-  .one-demo
-    margin 1em 0 1.25em
-
-  .one-details
-    margin-bottom 5px

layouts/default.vue

@@ -89,3 +89,5 @@ main
   min-width 560px
   transition margin-left 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86)
 </style>
+
+<style lang="stylus" src="@/assets/styles/post.styl"></style>

one/build/changelog.js

@@ -0,0 +1,108 @@
+import { readFileSync } from 'fs'
+import cheerio from 'cheerio'
+import { render } from './page'
+
+const VERSION_RE = /^(\d+\.\d+\.\d+(?:-[a-z]+(?:\.\d+)?)?)(?:\s+"([^"]+)")?$/i
+function getVersion (title = '') {
+  const [, version, codeName] = title.trim().match(VERSION_RE) || []
+  if (!version) {
+    return null
+  }
+  return [version, codeName]
+}
+
+const TYPE_MAP = {
+  '⚠️': 'breaking',
+  '💡': 'feature',
+  '🐞': 'bugfix',
+  '🧪': 'experimental'
+}
+const TYPE_KEYS = Object.keys(TYPE_MAP)
+function getChangeType (title) {
+  const t = title.trim()
+  const key = TYPE_KEYS.find(key => t.includes(key))
+  if (!key) {
+    return null
+  }
+  return TYPE_MAP[key]
+}
+
+const TAG_RE = /#([^\s]+)$/
+function getTags (comment) {
+  return comment
+    .trim()
+    .split(/\s+/)
+    .map(token => {
+      const [, tag] = token.match(TAG_RE) || []
+      return tag
+    })
+    .filter(tag => !!tag)
+}
+
+function extract (html) {
+  const changelog = []
+
+  const $ = cheerio.load(html)
+  const $versions = $('h2')
+
+  $versions.each((_, el) => {
+    const $version = $(el)
+    const [version, codeName] = getVersion($(el).text()) || []
+    const versionLog = {
+      version,
+      codeName,
+      changeset: []
+    }
+
+    const $types = $version.nextUntil('h2', 'h3')
+
+    if ($types.length === 0) {
+      throw new Error(`No change type found for version ${version}`)
+    }
+
+    let type
+    $types.each((_, el) => {
+      const $type = $(el)
+      type = getChangeType($type.text())
+
+      const $changeset = $type.next('ul').children()
+
+      if ($changeset.length === 0) {
+        throw new Error(`No changeset found for version ${version}`)
+      }
+
+      $changeset.each((_, el) => {
+        const $change = $(el)
+        const tags = $change
+          .contents()
+          .toArray()
+          .map(el => {
+            if (el.type === 'comment') {
+              return getTags(el.data)
+            }
+            return []
+          })
+          .reduce((all, current) => all.concat(current), [])
+
+        $change.contents().filter((_, el) => el.type === 'comment').remove()
+
+        versionLog.changeset.push({
+          type,
+          tags,
+          content: $change.html().replace(/^\n+|\n+$/g, '')
+        })
+      })
+    })
+
+    changelog.push(versionLog)
+  })
+
+  return changelog
+}
+
+export function getChangelogData () {
+  const changelogPath = require.resolve('veui/CHANGELOG.md')
+  const raw = readFileSync(changelogPath, 'utf8')
+  const { contents } = render(raw, changelogPath)
+  return extract(contents)
+}

one/build/generator.js

@@ -1,10 +1,11 @@
-import { statSync } from 'fs'
+import { statSync, writeFileSync } from 'fs'
 import { resolve, relative, extname, basename, sep } from 'path'
 import readdirpSync from 'recursive-readdir-sync'
 import rimraf from 'rimraf'
 import { copyFileSync, replaceExtSync } from './util'
 import { renderDocToPage } from './page'
 import { get, removeFile } from './deps'
+import { getChangelogData } from './changelog'
 
 const DOCS_DIR = resolve(__dirname, '../docs')
 const PAGES_DIR = resolve(__dirname, '../../pages')
@@ -18,17 +19,28 @@ export function generatePages (file, stats) {
     rimraf.sync(resolve(__dirname, './deps.json'))
     console.log('Regenerating all files...')
     handleFile(DOCS_DIR)
+    handleChangelog()
     console.log('...done.')
   } else {
     handleFile(file, stats)
   }
 }
 
+function handleChangelog () {
+  const changelogData = getChangelogData()
+  writeFileSync(
+    resolve(ASSETS_DIR, 'data', 'changelog.json'),
+    JSON.stringify(changelogData, null, 2)
+  )
+}
+
 function handleFile (file, stats) {
   let segments = relative(DOCS_DIR, file).split(sep)
-  if (segments.some(segment => {
+  if (
+    segments.some(segment => {
       return segment.startsWith('_') || segment.startsWith('.')
-  })) {
+    })
+  ) {
     return
   }
 
@@ -74,7 +86,8 @@ function handleFile (file, stats) {
     default: {
       let relDest = relative(DOCS_DIR, file)
 
-      let dest = relDest.split(sep).indexOf('demo') === -1
+      let dest =
+        relDest.split(sep).indexOf('demo') === -1
           ? resolve(PAGES_DIR, relDest)
           : resolve(DEMOS_DIR, relDest)
       if (remove) {

one/build/page.js

@@ -3,11 +3,11 @@ import vfile from 'vfile'
 import remark from 'remark'
 import slug from 'remark-slug'
 import frontmatter from 'remark-frontmatter'
-import highlight from 'remark-highlight.js'
 import shortcodes from 'remark-shortcodes'
 import remarkToRehype from 'remark-rehype'
 import raw from 'rehype-raw'
 import html from 'rehype-stringify'
+import highlight from 'rehype-highlight'
 import etpl from 'etpl'
 import { readFileSync, writeFileSync, replaceExtSync } from './util'
 import demo from './remark-demo'
@@ -17,9 +17,10 @@ import custom from './remark-custom'
 import extractFrontmatter from './remark-extract-frontmatter'
 import rehypePreviewImg from './rehype-preview-img'
 import rehypeLink from './rehype-link'
+import rehypeScoped from './rehype-scoped'
 import rehypeDemo from './rehype-demo'
+import rehypePre from './rehype-pre'
 import { add } from './deps'
-import lowlight from 'lowlight'
 import { vue } from './language'
 
 const DOCS_DIR = resolve(__dirname, '../docs')
@@ -28,8 +29,6 @@ const PAGE_TPL = readFileSync(resolve(__dirname, '../templates/page.etpl'))
 
 const renderPage = etpl.compile(PAGE_TPL)
 
-lowlight.registerLanguage('vue', vue)
-
 const md = remark()
   .use(custom)
   .use(details)
@@ -38,13 +37,15 @@ const md = remark()
   .use(shortcodes)
   .use(demo)
   .use(extractFrontmatter)
-  .use(highlight)
   .use(slug)
   .use(remarkToRehype, { allowDangerousHTML: true })
   .use(raw)
   .use(rehypePreviewImg)
   .use(rehypeLink)
+  .use(rehypeScoped)
   .use(rehypeDemo)
+  .use(highlight, { languages: { vue } })
+  .use(rehypePre)
   .use(html, { allowDangerousHTML: true })
 
 export function render (contents, path, data = {}) {
@@ -59,7 +60,13 @@ export function renderDocToPage (file) {
   let src = resolve(DOCS_DIR, file)
   let dest = resolve(PAGES_DIR, replaceExtSync(file, 'vue'))
   let { contents, data } = renderFile(src, dest)
-  let { demos = {}, components = {}, meta = {}, deps = {}, hasAlert = false } = data
+  let {
+    demos = {},
+    components = {},
+    meta = {},
+    deps = {},
+    hasAlert = false
+  } = data
 
   Object.keys(deps || {}).forEach(dep => {
     add({ [dep]: { [src]: true } })
@@ -69,7 +76,12 @@ export function renderDocToPage (file) {
   let componentList = Object.keys(components)
   let demoList = Object.keys(demos)
   let result = renderPage({
-    content: (contents || '').replace(/\n{3,}/g, '\n\n'),
+    content: (contents || '')
+      .replace(/\n{3,}/g, '\n\n')
+      .replace(/\{/g, '{')
+      .replace(/\}/g, '}')
+      .replace(/v-pre="true"/g, 'v-pre')
+      .replace(/data-markdown="true"/g, 'data-markdown'),
     demos: demoList.map(name => {
       return {
         name,

one/build/rehype-demo.js

@@ -24,16 +24,10 @@ export default function attacher () {
               {
                 slot: 'source'
               },
-              h(
-                'div',
-                {
-                  'v-pre': true
-                },
               {
                 type: 'raw',
                 value: code
               }
-              )
             ),
             h(
               'template',

one/build/rehype-pre.js

@@ -0,0 +1,11 @@
+import visit from 'unist-util-visit'
+
+export default function attacher () {
+  return tree => {
+    visit(tree, 'element', ({ tagName, properties }) => {
+      if (tagName === 'pre') {
+        properties['v-pre'] = true
+      }
+    })
+  }
+}

one/build/rehype-scoped.js

@@ -0,0 +1,13 @@
+import visit from 'unist-util-visit'
+
+const RE_DEMO = /^one-demo-[a-f0-9]+/i
+
+export default function attacher () {
+  return tree => {
+    visit(tree, 'element', ({ tagName, properties }, _, { type }) => {
+      if (type === 'root' && !RE_DEMO.test(tagName)) {
+        properties['data-markdown'] = true
+      }
+    })
+  }
+}

one/build/remark-custom.js

@@ -1,4 +1,4 @@
-import tokenizer from './customBlock'
+import tokenizer from './custom-block'
 import visit from 'unist-util-visit'
 import { render } from './page'
 

one/build/remark-ref.js

@@ -1,4 +1,4 @@
-import tokenizer from './refBlock'
+import tokenizer from './ref-block'
 import visit from 'unist-util-visit'
 import remove from 'unist-util-remove'
 import { render } from './page'
@@ -35,7 +35,7 @@ export default function attacher () {
 
     visit(tree, 'linkReference', (node, index, parent) => {
       let { identifier } = node
-      let [match, id] = identifier.match(RE_REF)
+      let [match, id] = identifier.match(RE_REF) || []
       if (!match || !id || !data.refs[id]) {
         return
       }

one/docs/changelog.vue

@@ -0,0 +1,228 @@
+<template>
+<article
+  class="content post"
+  :class="{ 'filter-version': compareValid }"
+>
+  <h1 data-markdown>
+    变更日志
+  </h1>
+  <veui-form
+    style="--dls-field-label-width: 4em"
+    ui="s"
+    class="form"
+  >
+    <veui-field
+      ui="s"
+      label="变更类型"
+    >
+      <veui-checkbox-group
+        v-model="types"
+        class="types"
+        :items="allTypes"
+      >
+        <template #item="{ label, emoji }">
+          <span class="emoji">{{ emoji }}</span> {{ label }}
+        </template>
+      </veui-checkbox-group>
+    </veui-field>
+    <veui-field
+      ui="s"
+      label="功能筛选"
+    >
+      <veui-select
+        v-model="tag"
+        searchable
+        clearable
+        :options="allTags"
+        placeholder="根据组件/指令/插件/模块等进行过滤……"
+      />
+    </veui-field>
+    <veui-fieldset
+      ui="s"
+      label="版本对比"
+    >
+      <veui-field>
+        <veui-checkbox
+          v-model="compare"
+          class="compare-toggle"
+        >
+          开启
+        </veui-checkbox>
+      </veui-field>
+      <template v-if="compare">
+        <veui-field>
+          <veui-select
+            v-model="from"
+            class="version"
+            :options="allVersions"
+            searchable
+            clearable
+            placeholder="选择起始版本……"
+          />
+        </veui-field>
+        →
+        <veui-field>
+          <veui-select
+            v-model="to"
+            class="version"
+            :options="allVersions"
+            searchable
+            clearable
+            placeholder="选择目标版本……"
+          />
+        </veui-field>
+      </template>
+    </veui-fieldset>
+  </veui-form>
+  <section
+    v-for="{ version, codeName, changeset } of filteredChangelog"
+    :key="version"
+    data-markdown
+  >
+    <h2
+      :class="{
+        major: isMajor(version),
+        minor: isMinor(version),
+      }"
+    >
+      {{ version }} <small>{{ codeName }}</small>
+    </h2>
+    <ul>
+      <li
+        v-for="({ type, tags, content }, index) of changeset"
+        :key="index"
+        v-html="content"
+      />
+    </ul>
+  </section>
+</article>
+</template>
+
+<script>
+import { cloneDeep } from 'lodash'
+import { Form, Field, Fieldset, CheckboxGroup, Select, Checkbox } from 'veui'
+import changelog from '../assets/data/changelog.json'
+
+const allTypes = [
+  { label: '非兼容性变更', value: 'breaking', emoji: '⚠️' },
+  { label: '主要变更', value: ' feature', emoji: '💡' },
+  { label: '问题修复', value: 'bugfix', emoji: '🐞' },
+  { label: '实验性功能', value: 'experimental', emoji: '🧪' }
+]
+
+const allVersions = changelog.map(({ version }) => ({ label: version, value: version }))
+const allTags = [
+  ...new Set(changelog.map(({ changeset }) => changeset.map(({ tags }) => tags).flat()).flat())
+]
+  .sort()
+  .map(tag => ({ label: tag, value: tag }))
+
+function isMajor (version) {
+  return /^\d+\.0.0$/.test(version)
+}
+
+function isMinor (version) {
+  return /^\d+\.(?:[1-9]|\d{2,}).0$/.test(version)
+}
+
+export default {
+  name: 'one-changelog',
+  layout: 'default',
+  components: {
+    'veui-form': Form,
+    'veui-field': Field,
+    'veui-fieldset': Fieldset,
+    'veui-checkbox-group': CheckboxGroup,
+    'veui-select': Select,
+    'veui-checkbox': Checkbox
+  },
+  data () {
+    return {
+      changelog,
+      allTypes,
+      types: allTypes.map(({ value }) => value),
+      allVersions,
+      allTags,
+      compare: false,
+      tag: null,
+      from: null,
+      to: allVersions[0].value
+    }
+  },
+  computed: {
+    compareValid () {
+      return this.from && this.to
+    },
+    filteredChangelog () {
+      const { changelog, tag, from, to } = this
+
+      let result = cloneDeep(changelog)
+
+      if (from && to) {
+        const fromIndex = result.findIndex(({ version }) => version === from)
+        const toIndex = result.findIndex(({ version }) => version === to)
+        result = result.slice(toIndex, fromIndex)
+      }
+
+      result.forEach((versionLog) => {
+        const { changeset } = versionLog
+        versionLog.changeset = changeset
+          .filter(({ type, tags }) => this.types.includes(type) && (!tag || tags.includes(tag)))
+      })
+
+      return result.filter(({ changeset }) => changeset.length !== 0)
+    }
+  },
+  watch: {
+    compare (val) {
+      if (!val) {
+        this.from = this.to = null
+      }
+    }
+  },
+  methods: {
+    isMajor,
+    isMinor
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.emoji
+  font-family "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Android Emoji", EmojiSymbols
+
+.compare-toggle
+  margin-right 8px
+
+.version
+  width 160px
+  margin 0 8px
+
+.veui-field
+  --dls-field-label-width inherit
+
+.form
+  & >>> .veui-field
+    margin-bottom 12px
+
+  & >>> .veui-field .veui-field-no-label
+    margin-bottom 0
+
+h2
+  font-size 20px
+  margin 1.2em 0 0.6em
+
+  &.minor
+    font-size 24px
+
+  &.major
+    font-size 28px
+
+  &.minor
+  &.major
+    &::before
+      content "§"
+
+  small
+    font-size 18px
+</style>

one/docs/demo/toast/default.vue

@@ -49,6 +49,5 @@ export default {
 
 section {
   margin-bottom: 20px;
-  text-align: center;
 }
 </style>

one/docs/nav.json

@@ -5,6 +5,10 @@
       "slug": "",
       "exact": true
     },
+    {
+      "title": "升级日志",
+      "slug": "changelog"
+    },
     {
       "title": "起步",
       "slug": "getting-started",
@@ -397,6 +401,10 @@
       "slug": "",
       "exact": true
     },
+    {
+      "title": "Changelog",
+      "slug": "changelog"
+    },
     {
       "title": "Getting started",
       "slug": "getting-started",
@@ -714,6 +722,11 @@
           "title": "Cascader",
           "slug": "cascader",
           "disabled": true
+        },
+        {
+          "title": "ConfigProvider",
+          "slug": "config-provider",
+          "disabled": true
         }
       ]
     },

one/templates/page.etpl

@@ -27,6 +27,4 @@ export default {<!-- if: ${layout} -->
 <!-- /if -->
   mixins: [htmlAttrs]
 }
-</script><!-- /else --><!-- if: ${style} -->
+</script><!-- /else -->
-
-<style lang="stylus" src="@/assets/styles/post.styl" scoped></style><!-- /if -->

package-lock.json

@@ -6174,9 +6174,9 @@
       }
     },
     "babel-plugin-veui": {
-      "version": "2.1.0",
+      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.1.5.tgz",
-      "integrity": "sha512-ZRo/X+BkZ40DbzFv1brW7XK5FiNBE0KigBnlHerk1ZiY+i0N80biNFnyMupbnIy45jXj4axkg8H3t0KRuKFNXg==",
+      "integrity": "sha512-5wmlUKqXQlr4GeWy9nRHLR6fnNUuXxklCbKa0mjxLAAXbHNLgD86cwiVPFmYoHB+H9nwOPJZtv5rRLjQBb88Yg==",
       "dev": true
     },
     "babel-runtime": {
@@ -7071,6 +7071,176 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "cheerio": {
+      "version": "1.0.0-rc.10",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.10.tgz",
+      "integrity": "sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==",
+      "dev": true,
+      "requires": {
+        "cheerio-select": "^1.5.0",
+        "dom-serializer": "^1.3.2",
+        "domhandler": "^4.2.0",
+        "htmlparser2": "^6.1.0",
+        "parse5": "^6.0.1",
+        "parse5-htmlparser2-tree-adapter": "^6.0.1",
+        "tslib": "^2.2.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "dev": true
+        },
+        "domhandler": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz",
+          "integrity": "sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.2.0"
+          }
+        },
+        "domutils": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+          "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.2.0",
+            "domhandler": "^4.2.0"
+          }
+        },
+        "entities": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+          "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+          "dev": true
+        },
+        "htmlparser2": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+          "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0",
+            "domutils": "^2.5.2",
+            "entities": "^2.0.0"
+          }
+        },
+        "parse5": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+          "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+          "dev": true
+        },
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+          "dev": true
+        }
+      }
+    },
+    "cheerio-select": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-1.5.0.tgz",
+      "integrity": "sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==",
+      "dev": true,
+      "requires": {
+        "css-select": "^4.1.3",
+        "css-what": "^5.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.7.0"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
+          "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^5.0.0",
+            "domhandler": "^4.2.0",
+            "domutils": "^2.6.0",
+            "nth-check": "^2.0.0"
+          }
+        },
+        "css-what": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
+          "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
+          "dev": true
+        },
+        "dom-serializer": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.2.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+          "dev": true
+        },
+        "domhandler": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz",
+          "integrity": "sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.2.0"
+          }
+        },
+        "domutils": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+          "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.2.0",
+            "domhandler": "^4.2.0"
+          }
+        },
+        "entities": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+          "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+          "dev": true
+        },
+        "nth-check": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+          "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
+          "dev": true,
+          "requires": {
+            "boolbase": "^1.0.0"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -10547,6 +10717,17 @@
         "zwitch": "^1.0.0"
       }
     },
+    "hast-util-to-text": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-2.0.1.tgz",
+      "integrity": "sha512-8nsgCARfs6VkwH2jJU9b8LNTuR4700na+0h3PqCaEk4MAnMDeu5P0tP8mjk9LLNGxIeQRLbiDbZVw6rku+pYsQ==",
+      "dev": true,
+      "requires": {
+        "hast-util-is-element": "^1.0.0",
+        "repeat-string": "^1.0.0",
+        "unist-util-find-after": "^3.0.0"
+      }
+    },
     "hast-util-whitespace": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz",
@@ -11600,9 +11781,9 @@
       }
     },
     "less-plugin-dls": {
-      "version": "1.4.0",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/less-plugin-dls/-/less-plugin-dls-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/less-plugin-dls/-/less-plugin-dls-1.5.0.tgz",
-      "integrity": "sha512-DXMCV0OnBo15lEyMEuWWOf4MPotiNFoSZBnjuqXW7hLmDgqJyiLi5HqVphLhnW33H2ZHbCINEp+Kpbhekau1dg==",
+      "integrity": "sha512-q+s530liPWisY+kRIOUgqK4S0iIo+7b62W1em8PTsCa23vLKvn4EliexHuBx3H3l7EAff0Aiv9K3TbvA10h5yw==",
       "dev": true,
       "requires": {
         "arg": "^4.1.3",
@@ -13693,6 +13874,23 @@
         "@types/node": "*"
       }
     },
+    "parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "dev": true,
+      "requires": {
+        "parse5": "^6.0.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+          "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
+          "dev": true
+        }
+      }
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -15935,6 +16133,46 @@
         }
       }
     },
+    "rehype-highlight": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-4.1.0.tgz",
+      "integrity": "sha512-JPcnZFJdk2Fnna+ymrEZI8LV7aJohDOicTQv+YEkxB00A3AS8bfrkVpJ0LrmSfzqvBH+fYe/l9/dxav33mP11w==",
+      "dev": true,
+      "requires": {
+        "hast-util-to-text": "^2.0.0",
+        "lowlight": "^1.10.0",
+        "unist-util-visit": "^2.0.0"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+          "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
+          "dev": true
+        },
+        "unist-util-visit": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+          "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+          "dev": true,
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0",
+            "unist-util-visit-parents": "^3.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz",
+          "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==",
+          "dev": true,
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0"
+          }
+        }
+      }
+    },
     "rehype-raw": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-2.0.0.tgz",
@@ -15981,16 +16219,6 @@
         "xtend": "^4.0.1"
       }
     },
-    "remark-highlight.js": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/remark-highlight.js/-/remark-highlight.js-5.2.0.tgz",
-      "integrity": "sha512-5tCr1CfdXDYzR8HCAnohlr1rK8DjUTFxEZdr+QEul5o13+EOEt5RrO8U6Znf8Faj5rVLcMJtxLPq6hHrZFo33A==",
-      "dev": true,
-      "requires": {
-        "lowlight": "^1.2.0",
-        "unist-util-visit": "^1.0.0"
-      }
-    },
     "remark-html": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/remark-html/-/remark-html-6.0.1.tgz",
@@ -18532,6 +18760,23 @@
         "object-assign": "^4.1.0"
       }
     },
+    "unist-util-find-after": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-3.0.0.tgz",
+      "integrity": "sha512-ojlBqfsBftYXExNu3+hHLfJQ/X1jYY/9vdm4yZWjIbf0VuWF6CRufci1ZyoD/wV2TYMKxXUoNuoqwy+CkgzAiQ==",
+      "dev": true,
+      "requires": {
+        "unist-util-is": "^4.0.0"
+      },
+      "dependencies": {
+        "unist-util-is": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.1.0.tgz",
+          "integrity": "sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==",
+          "dev": true
+        }
+      }
+    },
     "unist-util-generated": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.5.tgz",
@@ -18863,9 +19108,9 @@
       }
     },
     "veui": {
-      "version": "2.1.3",
+      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/veui/-/veui-2.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/veui/-/veui-2.1.5.tgz",
-      "integrity": "sha512-hBV8G7wJLAd9yEvX/Nqv4DHfSO1wWYAmxhcGyeymRAQ07EPnOd1w6zeyHwx4P2QlzwwGm2lCw/2bDQgXd8Ju5g==",
+      "integrity": "sha512-LmQVQlgOkn20XnSWmLOMDSCvV2cVkbcXpGawLVA3Cf/oWNzau85ZbYLZ+oof3toqmw3Ehm8VcNlU2meGByHpGQ==",
       "dev": true,
       "requires": {
         "bytes": "^3.0.0",
@@ -18880,17 +19125,17 @@
       },
       "dependencies": {
         "core-js": {
-          "version": "3.17.3",
+          "version": "3.18.0",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.17.3.tgz",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.18.0.tgz",
-          "integrity": "sha512-lyvajs+wd8N1hXfzob1LdOCCHFU4bGMbqqmLn1Q4QlCpDqWPpGf+p0nj+LNrvDDG33j0hZXw2nsvvVpHysxyNw==",
+          "integrity": "sha512-WJeQqq6jOYgVgg4NrXKL0KLQhi0CT4ZOCvFL+3CQ5o7I6J8HkT5wd53EadMfqTDp1so/MT1J+w2ujhWcCJtN7w==",
           "dev": true
         }
       }
     },
     "veui-loader": {
-      "version": "2.1.3",
+      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.1.5.tgz",
-      "integrity": "sha512-OxrZxXGR5z6m7TR1Z7RAqYFkUUsq5GlNyCPl6VoHbT9M3bvxWfNI74G88cC65agkTOKdC0WODtSCpzXL+ZqUfQ==",
+      "integrity": "sha512-VOecXJ0Yqotc7LOGVkvFgeNfWwvbLixkDHCo8zg33+v8AnaSL80IUKdnRkYaCeOWy0DF883kDcoMXfwLyidfFA==",
       "dev": true,
       "requires": {
         "loader-utils": "^2.0.0",
@@ -18980,17 +19225,17 @@
       }
     },
     "veui-theme-dls": {
-      "version": "2.1.3",
+      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.1.5.tgz",
-      "integrity": "sha512-5tT/x9amQMJj3IyIDCd9BSBXjnBAylWd+IZ8uaCiS0PyNlGpMsqavzc5KBUWcFieOsabdOmgiQbPJVlb18W2ZQ==",
+      "integrity": "sha512-VVCANN+Ldg8fvlcX6zagNQfMnNDZwtd1rRiRxyJ8O0wREfk5hyDITXoxBlTdIrKtP2isqXcEHwSZCRQLQmrJLg==",
       "dev": true,
       "requires": {
         "classlist-polyfill": "^1.2.0",
         "dls-icons-vue": "^0.23.0",
         "focus-visible": "^4.1.0",
-        "less-plugin-dls": "^1.4.0",
+        "less-plugin-dls": "^1.5.0",
         "less-plugin-est": "^3.0.0",
-        "veui-theme-dls-icons": "^2.1.3"
+        "veui-theme-dls-icons": "^2.1.5"
       },
       "dependencies": {
         "dls-icons-vue": {
@@ -19002,9 +19247,9 @@
       }
     },
     "veui-theme-dls-icons": {
-      "version": "2.1.3",
+      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.1.5.tgz",
-      "integrity": "sha512-hLtKT/T8JpZCdDQBvcGGIJrxDeYFlv4z2k359x8vCsYwDOnsFgfkVfSv0Y+0DR/C9KnH0MDkSEtZ8dq2hFcAEQ==",
+      "integrity": "sha512-eKtKGgEtzaQB5ctgO2fTDIPvg/IriRYQ1Pi7/OU9Dk3cuWW4AL0z2SS+S23bCzhBrgsJLx39JDh4rgeN1hPD0w==",
       "dev": true,
       "requires": {
         "dls-icons-vue": "^1.9.0"

package.json

@@ -24,7 +24,8 @@
     "@stackblitz/sdk": "^1.5.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-veui": "^2.1.0",
+    "babel-plugin-veui": "^2.1.5",
+    "cheerio": "^1.0.0-rc.10",
     "dls-graphics": "^1.0.0-alpha.3",
     "dls-icons-vue": "^0.14.0",
     "eslint": "^5.15.1",
@@ -58,11 +59,11 @@
     "raw-loader": "^4.0.2",
     "recursive-readdir": "^2.2.2",
     "recursive-readdir-sync": "^1.0.6",
+    "rehype-highlight": "^4.1.0",
     "rehype-raw": "^2.0.0",
     "rehype-stringify": "^3.0.0",
     "remark": "^8.0.0",
     "remark-frontmatter": "^1.3.3",
-    "remark-highlight.js": "^5.0.0",
     "remark-html": "^6.0.1",
     "remark-rehype": "^3.0.0",
     "remark-shortcodes": "^0.1.5",
@@ -74,10 +75,10 @@
     "stylus-loader": "^3.0.2",
     "unist-util-remove": "^1.0.1",
     "unist-util-visit": "^1.4.0",
-    "veui": "latest",
+    "veui": "^2.1.5",
-    "veui-loader": "latest",
+    "veui-loader": "^2.1.5",
-    "veui-theme-dls": "latest",
+    "veui-theme-dls": "^2.1.5",
-    "veui-theme-dls-icons": "latest",
+    "veui-theme-dls-icons": "^2.1.5",
     "vue-awesome": "^4.1.0",
     "vue-i18n": "^8.16.0",
     "vue-windows": "^0.2.4"