feat: support vuepress v2

BREAKING CHANGE: remove vuepress-plugin-code-copy
"You cannot use other plugins in your plugin anymore, which avoids lots of
potential issues caused by plugin nesting. If your plugin depends on other plugins, you should list
them in the docs."

fix #41

Author: BuptStEve

README-zh_CN.md

@@ -110,7 +110,6 @@ module.exports = {
         embed: '',
       },
       demoCodeMark: 'demo-code',
-      copyOptions: { ... },
     }]
   ],
 }
@@ -178,12 +177,6 @@ vue 的语义化版本字符串。想要了解更多的语义化版本格式，
 
 插件的标记，即跟在 `:::` 后的标记。
 
-### copyOptions
-* 类型：`Object/Boolean`
-* 默认值：`{ align: 'top', selector: '.demo-and-code-wrapper div[class*="language-"] pre' }`
-
-透传 [vuepress-plugin-code-copy](https://github.com/znicholasbrown/vuepress-plugin-code-copy#options) 的参数，或传 `false` 禁用它。
-
 ## Related
 * [vuepress-plugin-demo-block](https://github.com/xiguaxigua/vuepress-plugin-demo-block)
 

README.md

@@ -110,7 +110,6 @@ module.exports = {
         embed: '',
       },
       demoCodeMark: 'demo-code',
-      copyOptions: { ... },
     }]
   ],
 }
@@ -178,12 +177,6 @@ It passes [CodeSandbox options](https://codesandbox.io/docs/importing#define-api
 
 The mark of the plugin, follows the tag after `:::`.
 
-### copyOptions
-* Type: `Object/Boolean`
-* Default: `{ align: 'top', selector: '.demo-and-code-wrapper div[class*="language-"] pre' }`
-
-It passes [vuepress-plugin-code-copy](https://github.com/znicholasbrown/vuepress-plugin-code-copy#options)'s options, or `false` to disable it.
-
 ## Related
 * [vuepress-plugin-demo-block](https://github.com/xiguaxigua/vuepress-plugin-demo-block)
 

docs/.vuepress/config.js

@@ -0,0 +1,87 @@
+import { defineUserConfig } from 'vuepress'
+import { defaultTheme } from '@vuepress/theme-default'
+import searchPlugin from '@vuepress/plugin-search'
+import smoothScrollPlugin from 'vuepress-plugin-smooth-scroll'
+
+import includePlugin from './include-plugin'
+import { demoCodePlugin, DemoCodePluginOptions } from '../../src/node'
+import { name, description } from '../../package.json'
+
+const demoCodeOptions: DemoCodePluginOptions = {
+  cssLibs: [
+    'https://unpkg.com/animate.css@3.7.0/animate.min.css',
+  ],
+  showText: 'show more',
+  hideText: 'hide',
+}
+
+const ecosystemItems = [
+  { text: '📖markdown-it-vuese', link: 'https://buptsteve.github.io/markdown-it-vuese/' },
+]
+
+export default defineUserConfig({
+  base: `/${name}/`,
+  locales: {
+    '/': { lang: 'en-US', title: 'demo-code', description },
+    '/zh/': {
+      lang: 'zh-CN',
+      title: 'demo-code',
+      description: '📝 同时展示 demo 和 code 的 vuepress 插件',
+    },
+  },
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.ico' }],
+    ['link', { rel: 'stylesheet', href: 'https://unpkg.com/animate.css@3.7.0/animate.min.css' }],
+  ],
+  plugins: [
+    includePlugin,
+    // @ts-ignore
+    smoothScrollPlugin,
+    demoCodePlugin(demoCodeOptions),
+    searchPlugin({
+      locales: {
+        '/': {
+          placeholder: 'Search',
+        },
+        '/zh/': {
+          placeholder: '搜索',
+        },
+      },
+    }),
+  ],
+  theme: defaultTheme({
+    repo: 'BuptStEve/' + name,
+    docsDir: 'docs',
+    contributors: false,
+    locales: {
+      '/': {
+        selectLanguageText: '🌍Languages',
+        selectLanguageName: 'English',
+        editLinkText: 'Edit this page on GitHub',
+        navbar: [
+          { text: '🌱Guide', link: '/' },
+          { text: '😎Example', link: '/example/' },
+          { text: '🔥Ecosystem', children: ecosystemItems },
+        ],
+        sidebar: [
+          { text: '🌱Guide', link: '/' },
+          { text: '😎Example', link: '/example/' },
+        ],
+      },
+      '/zh/': {
+        selectLanguageText: '🌍选择语言',
+        selectLanguageName: '简体中文',
+        editLinkText: '在 GitHub 上编辑此页',
+        navbar: [
+          { text: '🌱指南', link: '/zh/' },
+          { text: '😎示例', link: '/zh/example/' },
+          { text: '🔥生态系统', children: ecosystemItems },
+        ],
+        sidebar: [
+          { text: '🌱指南', link: '/zh/' },
+          { text: '😎示例', link: '/zh/example/' },
+        ],
+      },
+    },
+  }),
+})

docs/.vuepress/config.ts

@@ -0,0 +1,13 @@
+
+module.exports = () => {
+  return {
+    name: 'vuepress-plugin-include',
+    extendsMarkdown: (md) => {
+      md.use(require('markdown-it-include'), {
+        root: './docs/',
+        includeRe: /<\[include\](.+)/i,
+        bracesAreOptional: true,
+      })
+    },
+  }
+}

docs/.vuepress/include-plugin.js

@@ -8,20 +8,20 @@
 ```md
 ::: demo
 <template>
-    <button class="animated shake infinite" @click="onClick">Click me!</button>
+  <button class="animated shake infinite" @click="onClick">Click me!</button>
 </template>
 
 <script>
 export default {
-    methods: {
-        onClick: () => { window.alert(1) },
-    },
+  methods: {
+    onClick: () => { window.alert(1) },
+  },
 }
 </script>
 
 <style>
 button {
-    color: blue;
+  color: blue;
 }
 </style>
 :::
@@ -31,20 +31,20 @@ button {
 
 ::: demo
 <template>
-    <button class="animated shake infinite" @click="onClick">Click me!</button>
+  <button class="animated shake infinite" @click="onClick">Click me!</button>
 </template>
 
 <script>
 export default {
-    methods: {
-        onClick: () => { window.alert(1) },
-    },
+  methods: {
+    onClick: () => { window.alert(1) },
+  },
 }
 </script>
 
 <style>
 button {
-    color: blue;
+  color: blue;
 }
 </style>
 :::
@@ -57,12 +57,12 @@ button {
 ```md
 ::: demo html
 <p class="common-html">
-    this is <span style="color: red;">common</span> html
+  this is <span style="color: red;">common</span> html
 </p>
 
 <style>
 .common-html {
-    color: green;
+  color: green;
 }
 </style>
 :::
@@ -72,12 +72,12 @@ button {
 
 ::: demo html
 <p class="common-html">
-    this is <span style="color: red;">common</span> html
+  this is <span style="color: red;">common</span> html
 </p>
 
 <style>
 .common-html {
-    color: green;
+  color: green;
 }
 </style>
 :::

docs/zh/example/README.md

@@ -5,13 +5,13 @@ module.exports = {
   collectCoverage: true,
   collectCoverageFrom: [
     'src/**',
-    '!src/icons/**',
-    '!src/highlight.js',
-    '!src/enhanceAppFile.js',
+    '!src/client/icons/**',
+    '!src/client/highlight.js',
+    '!src/client/enhanceAppFile.js',
   ],
   coveragePathIgnorePatterns: ['/__snapshots__/'],
   transform: {
-    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
     '^.+\\.jsx?$': 'babel-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
   },