📝 update plugin store page

docs/.vuepress/components/Plugins.vue

@@ -1,33 +1,77 @@
 <template>
-  <v-app>
+  <div class="plugins">
-    <v-main>
+    <!-- TODO: Search and New -->
-      <v-row>
+    <hr />
-        <v-col
+    <v-app>
-          cols="12"
+      <v-main>
-          sm="6"
+        <v-row>
-          md="4"
+          <v-col
-          v-for="(plugin, index) in plugins"
+            cols="12"
-          :key="index"
+            sm="6"
-        >
+            v-for="(plugin, index) in plugins"
-          <v-card>
+            :key="index"
-            <v-card-title>{{ plugin.name }}</v-card-title>
+          >
-            <v-card-text>{{ plugin.desc }}</v-card-text>
+            <v-card>
-          </v-card>
+              <v-card-title>
-        </v-col>
+                {{ plugin.name }}
-      </v-row>
+                <v-spacer></v-spacer>
-    </v-main>
+                <a
-  </v-app>
+                  class="repo-link"
+                  v-if="repoLink(plugin.repo)"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  :title="plugin.repo"
+                  :href="repoLink(plugin.repo)"
+                >
+                  <v-icon>fab fa-github</v-icon>
+                </a>
+              </v-card-title>
+              <v-card-text>{{ plugin.desc }}</v-card-text>
+              <v-card-actions>
+                <v-btn
+                  block
+                  depressed
+                  class="btn-copy"
+                  @click="copyCommand(plugin)"
+                >
+                  copy nb-cli command
+                  <v-icon right small>fa-copy</v-icon>
+                </v-btn>
+                <v-snackbar v-model="snackbar">Copied!</v-snackbar>
+              </v-card-actions>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-main>
+    </v-app>
+  </div>
 </template>
 
 <script>
+import copy from "copy-to-clipboard";
 import plugins from "../public/plugins.json";
 
 export default {
   name: "Plugins",
   data() {
     return {
-      plugins: plugins
+      plugins: plugins,
+      snackbar: false
     };
+  },
+  methods: {
+    repoLink(repo) {
+      if (repo) {
+        return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`;
+      }
+      return null;
+    },
+    copyCommand(plugin) {
+      copy(`nb plugin install ${plugin.id}`, {
+        format: "text/plain"
+      });
+      this.snackbar = true;
+    }
   }
 };
 </script>
@@ -37,3 +81,13 @@ export default {
   min-height: 0 !important;
 }
 </style>
+
+<style scoped>
+.repo-link {
+  text-decoration: none !important;
+  display: inline-block;
+}
+.repo-link:hover i {
+  color: #ea5252;
+}
+</style>

docs/.vuepress/public/plugins.json

@@ -1,24 +1,8 @@
 [
   {
-    "name": "nonebot-plugin-status",
+    "id": "nonebot-plugin-status",
-    "desc": "通过戳一戳获取服务器状态",
+    "link": "nonebot-plugin-status",
-    "author": "nonebot",
+    "name": "状态监控",
-    "repo": "nonebot/nonebot2"
-  },
-  {
-    "name": "nonebot-plugin-status",
-    "desc": "通过戳一戳获取服务器状态",
-    "author": "nonebot",
-    "repo": "nonebot/nonebot2"
-  },
-  {
-    "name": "nonebot-plugin-status",
-    "desc": "通过戳一戳获取服务器状态",
-    "author": "nonebot",
-    "repo": "nonebot/nonebot2"
-  },
-  {
-    "name": "nonebot-plugin-status",
     "desc": "通过戳一戳获取服务器状态",
     "author": "nonebot",
     "repo": "nonebot/nonebot2"

package-lock.json

@@ -3313,6 +3313,14 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "copy-webpack-plugin": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz",
@@ -9711,6 +9719,11 @@
         "repeat-string": "^1.6.1"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -10461,7 +10474,7 @@
       }
     },
     "vuepress-theme-nonebot": {
-      "version": "git+https://github.com/nonebot/vuepress-theme-nonebot.git#16c96d1cd12cbb72d0233875b0a671cada93ca2a",
+      "version": "git+https://github.com/nonebot/vuepress-theme-nonebot.git#29b6c7a7b0f69eee8fa98b78094057de20c4233c",
       "from": "git+https://github.com/nonebot/vuepress-theme-nonebot.git",
       "dev": true,
       "requires": {
@@ -10487,9 +10500,9 @@
       }
     },
     "vuetify": {
-      "version": "2.3.14",
+      "version": "2.3.16",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.14.tgz",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.3.16.tgz",
-      "integrity": "sha512-1Ys1MreJQOL/Ddp3YotBi1SlC2+1A0/RVkDXX3Azspt8incPdAnNB0JyChHiJ/TM+L+KSA7T4EXF9YDrCWENmg=="
+      "integrity": "sha512-LHPqY+Gmyb/75xJscO0a3CuB4ZdpqHLNaGMAbmfTyapI8Q02+hjABEZzitFU/XObD2KhrNWPJzmGZPhbshGUzg=="
     },
     "watchpack": {
       "version": "1.7.4",

package.json

@@ -28,7 +28,8 @@
     "vuepress-theme-nonebot": "git+https://github.com/nonebot/vuepress-theme-nonebot.git"
   },
   "dependencies": {
-    "vuetify": "^2.3.14",
+    "copy-to-clipboard": "^3.3.1",
+    "vuetify": "^2.3.16",
     "wowjs": "^1.1.3"
   }
 }