Merge pull request NomicFoundation#1985 from nomiclabs/new-plugin-list

Split the plugin list between official and community ones

docs/.vuepress/config.js

@@ -1,7 +1,7 @@
 const defaultSlugify = require("@vuepress/shared-utils/lib/slugify");
 const plugins = require("./sorted-plugins.js");
 
-const pluginsChildren = plugins.map((p) => [
+const officialPlugins = plugins.officialPlugins.map((p) => [
   "/plugins/" + p.normalizedName + ".md",
   p.name,
   0,
@@ -150,7 +150,10 @@ module.exports = {
         {
           title: "Plugins",
           collapsable: false,
-          children: pluginsChildren,
+          children: [
+            ...officialPlugins,
+            ["/plugins/#community-plugins", "Community plugins", 0],
+          ],
         },
       ],
     },

docs/.vuepress/sorted-plugins.js

@@ -3,7 +3,13 @@ const plugins = require("./plugins.js");
 try {
   const downloads = require("./plugin-downloads.json");
 
-  plugins.sort((p1, p2) => downloads[p2.name] - downloads[p1.name]);
+  plugins.officialPlugins.sort(
+    (p1, p2) => downloads[p2.name] - downloads[p1.name]
+  );
+
+  plugins.communityPlugins.sort(
+    (p1, p2) => downloads[p2.name] - downloads[p1.name]
+  );
 } catch (e) {
   // we just don't sort here
 }

docs/.vuepress/theme/layouts/Plugins.vue

@@ -10,14 +10,18 @@
           to learn how to create your own, and
           <a
             href="https://github.com/nomiclabs/hardhat/blob/master/docs/.vuepress/plugins.js"
-            >send a pull request</a
+          >send a pull request</a
           >
           to get it listed here.
         </p>
         <p>Extend Hardhat's functionality with the plugins below.</p>
-        <!-- Check out the [Using Plugins Guide]() to learn more.</p> -->
+
         <div class="plugins">
-          <div class="plugin" v-for="plugin in plugins">
+          <div class="plugins-list-title">
+            <h2>Official plugins</h2>
+          </div>
+
+          <div class="plugin" v-for="plugin in plugins.officialPlugins">
             <div>
               <span class="name">
                 <a :href="plugin.normalizedName + '.html'">{{ plugin.name }}</a>
@@ -33,6 +37,30 @@
             </div>
           </div>
         </div>
+
+        <div id="community-plugins"></div>
+        <div class="plugins">
+          <div class="plugins-list-title">
+            <h2>Community plugins</h2>
+            <span>Sorted by npm downloads</span>
+          </div>
+
+          <div class="plugin" v-for="plugin in plugins.communityPlugins">
+            <div>
+              <span class="name">
+                <a :href="'https://www.npmjs.com/package/' + (plugin.npmPackage || plugin.name)">{{ plugin.name }}</a>
+              </span>
+              <span class="separator"> | </span>
+              <span class="author">
+                <a :href="plugin.authorUrl">{{ plugin.author }}</a>
+              </span>
+            </div>
+            <p class="description">{{ plugin.description }}</p>
+            <div class="tags">
+              <div v-for="tag in plugin.tags">{{ tag }}</div>
+            </div>
+          </div>
+        </div>
       </div>
     </template>
   </Layout>
@@ -46,17 +74,33 @@ export default {
   components: { Layout },
   data() {
     return { plugins: require("../../sorted-plugins.js") };
-  },
+  }
 };
 </script>
-<style lang="stylus">
+<style lang="stylus" scoped>
+@import "../styles/colors.styl";
+
+#community-plugins
+  margin-bottom 50px
 
 .plugins
+  margin-top 25px
+
+  .plugins-list-title
+    h2
+      border-bottom none
+      display inline-block
+      margin-bottom 0
+      padding-right 0.5rem
+
+    span
+      display inline-block
+      color $lightGrey
+    margin-bottom 2rem
 
   .plugin
     min-height 97px
-    padding 45px 0 15px
-    border-bottom 1px solid rgba(44, 62, 79, 0.15)
+    padding 0 0 35px
 
     .name a
       font-size 1.2em

docs/.vuepress/theme/styles/custom-style.styl

@@ -182,55 +182,6 @@ div.clear
   .used-by
     margin-bottom: 100px
 
-.plugins
-
-  .plugin
-    min-height 97px
-    padding 45px 0 15px
-    border-bottom 1px solid rgba(44, 62, 79, 0.15)
-
-    .name a
-      font-size 1.2em
-      font-weight bold
-      text-decoration none !important
-
-    .separator
-      padding 0 8px
-      color $lightGrey
-      @media (max-width: $MQMobile)
-        display: none
-
-    .author a 
-      font-size 1em
-      color $lightGrey
-      &:hover 
-        color $darkYellow
-      @media (max-width: $MQMobile)
-        display block
-        padding-top 8px
-
-    .version
-      font-size 0.9em
-      position absolute
-      display flex
-      top: 0
-      right: 0
-
-    .description
-      margin: 6px 0 12px  
-
-    .tags div
-      background-color #F3F4F4
-      border-radius 6px
-      display inline-flex
-      padding 6px 16px
-      font-size 0.80em
-      margin 0 8px 15px 0
-
-@media (max-width: $MQMobileNarrow)
-  .plugins .plugin .version
-    display: none
-
   .search-box
     display none
 

docs/build-site.sh

@@ -8,8 +8,6 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
 cd "$DIR"
 yarn --frozen-lockfile
 yarn ts-node get-plugins-downloads.ts
-yarn ts-node build-plugins-doc.ts
-bash wget-readmes.sh
 
 bash error-list.sh
 yarn build

docs/get-plugins-downloads.ts

@@ -3,7 +3,7 @@ import fetch from "node-fetch";
 
 const plugins = require("./.vuepress/plugins");
 
-async function getLastWeekDownloads(npmPackage: string): Promise<number> {
+async function getLastMonthDownloads(npmPackage: string): Promise<number> {
   const res = await fetch(
     `https://api.npmjs.org/downloads/point/last-month/${npmPackage}`,
     {
@@ -25,9 +25,11 @@ async function getLastWeekDownloads(npmPackage: string): Promise<number> {
 
 async function main() {
   const downloads: Array<{ [plugin: string]: number }> = await Promise.all(
-    plugins.map(async (p: any) => ({
-      [p.name]: await getLastWeekDownloads(p.npmPackage ?? p.name),
-    }))
+    [...plugins.officialPlugins, ...plugins.communityPlugins].map(
+      async (p: any) => ({
+        [p.name]: await getLastMonthDownloads(p.npmPackage ?? p.name),
+      })
+    )
   );
 
   downloads.sort((p1, p2) => Object.values(p2)[0] - Object.values(p1)[0]);

docs/plugins/nomiclabs-hardhat-ethers.md

@@ -0,0 +1 @@
+../../packages/hardhat-ethers/README.md

docs/plugins/nomiclabs-hardhat-etherscan.md

@@ -0,0 +1 @@
+../../packages/hardhat-etherscan/README.md

docs/plugins/nomiclabs-hardhat-ganache.md

@@ -0,0 +1 @@
+../../packages/hardhat-ganache/README.md

docs/plugins/nomiclabs-hardhat-solhint.md

@@ -0,0 +1 @@
+../../packages/hardhat-solhint/README.md

docs/plugins/nomiclabs-hardhat-solpp.md

@@ -0,0 +1 @@
+../../packages/hardhat-solpp/README.md

docs/plugins/nomiclabs-hardhat-truffle4.md

@@ -0,0 +1 @@
+../../packages/hardhat-truffle4/README.md

docs/plugins/nomiclabs-hardhat-truffle5.md

@@ -0,0 +1 @@
+../../packages/hardhat-truffle5/README.md

docs/plugins/nomiclabs-hardhat-vyper.md

@@ -0,0 +1 @@
+../../packages/hardhat-vyper/README.md

docs/plugins/nomiclabs-hardhat-waffle.md

@@ -0,0 +1 @@
+../../packages/hardhat-waffle/README.md

docs/plugins/nomiclabs-hardhat-web3-legacy.md

@@ -0,0 +1 @@
+../../packages/hardhat-web3-legacy/README.md

docs/plugins/nomiclabs-hardhat-web3.md

@@ -0,0 +1 @@
+../../packages/hardhat-web3/README.md