docs: upgrade vuepress

.gitignore

@@ -7,4 +7,6 @@ DPlayer.log*
 wxw
 .vscode
 package-lock.json
-docs/.vuepress/dist
+docs/.vuepress/dist
+docs/.vuepress/.cache
+docs/.vuepress/.temp

docs/.vuepress/config.ts

@@ -1,56 +1,39 @@
-module.exports = {
-    plugins: {
-        '@vuepress/google-analytics': {
-            ga: 'UA-48084758-9',
-        },
-        '@vuepress/pwa': {
-            serviceWorker: true,
-            updatePopup: {
-                '/zh/': {
-                    message: '发现新内容可用',
-                    buttonText: '刷新',
-                },
-                '/': {
-                    message: 'New content is available',
-                    buttonText: 'Refresh',
-                },
-            },
-        },
-        '@vuepress/back-to-top': true,
-    },
+import { defaultTheme } from 'vuepress';
+import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics';
+import { registerComponentsPlugin } from '@vuepress/plugin-register-components';
+import { defineUserConfig } from '@vuepress/cli';
+import path from 'path';
+
+export default defineUserConfig({
+    title: 'DPlayer',
+    description: '🍭 Wow, such a lovely HTML5 danmaku video player',
+    plugins: [
+        googleAnalyticsPlugin({
+            id: 'G-QEBJJDX922',
+        }),
+        registerComponentsPlugin({
+            componentsDir: path.resolve(__dirname, './components'),
+        }),
+    ],
+
     locales: {
         '/zh/': {
             lang: 'zh-CN',
-            title: 'DPlayer',
-            description: '🍭 Wow, such a lovely HTML5 danmaku video player',
         },
         '/': {
             lang: 'en-US',
-            title: 'DPlayer',
-            description: '🍭 Wow, such a lovely HTML5 danmaku video player',
         },
     },
-    head: [
-        ['link', { rel: 'icon', href: `/logo.png` }],
-        ['script', { src: 'https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js' }],
-        ['script', { src: 'https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js' }],
-        ['script', { src: 'https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js' }],
-        ['script', { src: 'https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js' }],
-        ['script', { src: 'https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js' }],
-    ],
-    theme: 'vuepress-theme-dplayer',
-    themeConfig: {
-        repo: 'MoePlayer/DPlayer',
-        editLinks: true,
+
+    theme: defaultTheme({
+        repo: 'DIYgod/DPlayer',
         docsDir: 'docs',
+        logo: '/logo.png',
+
         locales: {
             '/zh/': {
-                lang: 'zh-CN',
-                selectText: '选择语言',
-                label: '简体中文',
-                editLinkText: '在 GitHub 上编辑此页',
-                lastUpdated: '上次更新',
-                nav: [
+                selectLanguageName: '简体中文',
+                navbar: [
                     {
                         text: '指南',
                         link: '/zh/guide/',
@@ -66,12 +49,8 @@ module.exports = {
                 ],
             },
             '/': {
-                lang: 'en-US',
-                selectText: 'Languages',
-                label: 'English',
-                editLinkText: 'Edit this page on GitHub',
-                lastUpdated: 'Last Updated',
-                nav: [
+                selectLanguageName: 'English',
+                navbar: [
                     {
                         text: 'Guide',
                         link: '/guide/',
@@ -87,5 +66,14 @@ module.exports = {
                 ],
             },
         },
-    },
-};
+    }),
+    
+    head: [
+        ['link', { rel: 'icon', href: `/logo.png` }],
+        ['script', { src: 'https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js' }],
+        ['script', { src: 'https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js' }],
+        ['script', { src: 'https://cdn.jsdelivr.net/npm/dashjs/dist/dash.all.min.js' }],
+        ['script', { src: 'https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js' }],
+        ['script', { src: 'https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js' }],
+    ],
+});

docs/.vuepress/init.ts

@@ -0,0 +1,31 @@
+// import DPlayer from '../../src/index';
+// import ElementPlus from 'element-plus';
+// import 'element-plus/dist/index.css';
+// import { library } from '@fortawesome/fontawesome-svg-core';
+// import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+// import { faPenToSquare, faLink } from '@fortawesome/free-solid-svg-icons';
+// import { faGithub, faTwitter, faTelegram, faDiscord, faReddit } from '@fortawesome/free-brands-svg-icons';
+// import { defineClientConfig } from '@vuepress/client';
+
+// library.add(faPenToSquare, faLink, faGithub, faTwitter, faTelegram, faDiscord, faReddit);
+
+// export default defineClientConfig({
+//     enhance({ app, router, siteData }) {
+//         app.component('font-awesome-icon', FontAwesomeIcon);
+//         app.use(ElementPlus);
+
+//         // @ts-ignore
+//         if (!__VUEPRESS_SSR__) {
+//             app.config.globalProperties.Unidata = Unidata;
+//             app.config.globalProperties.unidata = new Unidata({
+//                 moralisWeb3APIKey: 'dCYUW7mpC8lJJitfSX5nsgWBREkBIb5SW1OfFlDLiV7A0v4b2vubtkpQXsBrXqt0',
+//                 alchemyEthereumAPIKey: '4h0_z1B6WEmj9hp1HJZm7ujeWZpLR6rv',
+//                 alchemyPolygonAPIKey: 'm1tznK8U8nVecA0Zime5dzF8Pb2av70q',
+//                 alchemyFlowAPIKey: 'op8m1oqlivm297iodsezvn3hoya9960u',
+//                 nftscanAPIKey: 'YdKYhj6I',
+//             });
+
+//             (<any>window).unidata = app.config.globalProperties.unidata;
+//         }
+//     },
+// });

docs/.vuepress/styles/index.scss

@@ -0,0 +1,23 @@
+:root {
+    // brand colors
+    --c-brand: #F5712C !important;
+    --c-brand-light: #F5712C !important;
+    --c-text-accent: #F5712C !important;
+    --back-to-top-color: #F5712C !important;
+    --back-to-top-color-hover: #F5712C !important;
+
+    --el-color-primary: #F5712C !important;
+}
+
+#指南 {
+    display: none;
+}
+
+#guide {
+    display: none;
+}
+
+#dplayer {
+    margin-top: -1.5rem;
+    margin-bottom: 1rem;
+}

docs/.vuepress/styles/index.styl

@@ -1,48 +0,0 @@
-.navbar .home-link .site-name {
-    color: #F5712C;
-}
-
-.page .custom-block.tip {
-    border-color: #F5712C;
-}
-
-.icon.outbound {
-    display: none;
-}
-
-a {
-  word-break: break-all;
-}
-
-#指南 {
-    display: none;
-}
-
-#guide {
-    display: none;
-}
-
-#app .global-ui .sw-update-popup {
-    border: 1px solid #F5712C;
-}
-
-.routes .sidebar-group-items > li > .sidebar-sub-headers > .sidebar-sub-header > a {
-    color: $accentColor;
-}
-
-#dplayer {
-    margin-top: -1.5rem;
-    margin-bottom: 1rem;
-}
-
-.hero .description {
-    display: none;
-}
-
-.hero .action {
-    display: none;
-}
-
-.hero.custom .action {
-    display: block;
-}

docs/.vuepress/styles/palette.styl

@@ -1 +0,0 @@
-$accentColor = #F5712C

docs/README.md

@@ -1,7 +1,5 @@
 ---
 home: true
-actionText: Get Started →
-actionLink: /guide/
 footer: MIT Licensed | Made with love by DIYgod
 ---
 
@@ -9,4 +7,6 @@ footer: MIT Licensed | Made with love by DIYgod
   <DPlayer :immediate="true"></DPlayer>
 </div>
 
-<div class="hero custom"><p class="action"><router-link to="/guide/" class="nav-link action-button">Get Started →</router-link></p></div>
+<div class="hero custom">
+<p class="actions"><a href="/guide/" class="action-button primary" aria-label="Get Started"> Get Started </a></p>
+</div>

package.json

@@ -39,9 +39,9 @@
     "devDependencies": {
         "@babel/core": "^7.6.0",
         "@babel/preset-env": "^7.4.5",
-        "@vuepress/plugin-back-to-top": "1.9.7",
-        "@vuepress/plugin-google-analytics": "1.9.7",
-        "@vuepress/plugin-pwa": "1.9.7",
+        "@vuepress/client": "2.0.0-beta.49",
+        "@vuepress/plugin-google-analytics": "2.0.0-beta.49",
+        "@vuepress/plugin-register-components": "2.0.0-beta.49",
         "art-template": "4.13.2",
         "art-template-loader": "1.4.3",
         "autoprefixer": "^10.4.8",
@@ -69,7 +69,8 @@
         "svg-inline-loader": "0.8.2",
         "template-string-optimize-loader": "^3.0.0",
         "url-loader": "^4.1.0",
-        "vuepress": "1.9.7",
+        "vue": "^3.2.37",
+        "vuepress": "2.0.0-beta.49",
         "webpack": "^5.74.0",
         "webpack-cli": "4.10.0",
         "webpack-dev-server": "^4.10.0",