feat(website): recently added packages widget

favoyang · favoyang · commit 31e10f4617d8 · 2020-01-17T15:01:31.000+08:00
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -150,6 +150,12 @@ module.exports = {
    * Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
    */
   plugins: [
+    [
+      "@vuepress/plugin-register-components",
+      {
+        componentsDir: path.resolve(__dirname, "./theme/components")
+      }
+    ],
     "@vuepress/plugin-back-to-top",
     // ["@vuepress/pwa", { serviceWorker: true, updatePopup: true }],
     "@vuepress/plugin-medium-zoom",
diff --git a/docs/.vuepress/plugins/openupm-packages/index.js b/docs/.vuepress/plugins/openupm-packages/index.js
@@ -13,6 +13,7 @@ const {
 } = require("../../../../app/utils/package");
 
 const readFile = util.promisify(fs.readFile);
+const pluginData = {};
 
 // eslint-disable-next-line no-unused-vars
 module.exports = function(options, context) {
@@ -21,12 +22,14 @@ module.exports = function(options, context) {
     name: "openupm-packages",
 
     async extendPageData($page) {
-      let packageNames = await loadPackageNames();
-      $page.packageCount = packageNames.length;
+      const data = await plugin.getData();
+      $page.packageCount = data.packageNames.length;
+      $page.recentPackages = data.packages.slice(0, 10);
     },
 
     async additionalPages() {
       const data = await plugin.getData();
+      pluginData.data = data;
       let pages = [];
       pages = pages.concat(await plugin.genListPages(data));
       pages = pages.concat(await plugin.genDetailPages(data));
@@ -39,83 +42,91 @@ module.exports = function(options, context) {
 
     // Prepare data for page generation
     async getData() {
-      // Load packages.
-      const packageNames = await loadPackageNames();
-      const packages = packageNames
-        .map(loadPackageSync)
-        .filter(x => x)
-        .map(pkg => {
-          return {
-            ...pkg,
-            link: {
-              link: `/packages/${pkg.name}/`,
-              text: pkg.displayName || pkg.name
-            }
-          };
-        })
-        // Sort by name
-        .sort(function(a, b) {
-          const va = a.link.text.toLowerCase();
-          const vb = b.link.text.toLowerCase();
-          if (va < vb) return -1;
-          if (va > vb) return 1;
-          return 0;
-        });
-      // Namespace => [package...] dict.
-      const packageByNamespace = _.groupBy(packages, x => getNamespace(x.name));
-      // Load topics.
-      const topicsWithAll = [{ name: "All", slug: "" }]
-        .concat((await loadTopics()).topics)
-        .map(topic => {
-          return {
-            ...topic,
-            link: topic.slug ? `/packages/topics/${topic.slug}/` : "/packages/",
-            count: packages.filter(pkg =>
-              plugin.packageTopicFilter(pkg, topic.slug)
-            ).length
-          };
-        });
-      const topics = topicsWithAll.slice(1);
-      // contributors
-      const getConstributors = function(type) {
-        const entries = _.flatMap(packages, pkg => {
-          if (type == "hunter") return [pkg.hunter];
-          else if (type == "owner") {
-            let arr = [pkg.owner];
-            if (
-              pkg.parentOwner &&
-              pkg.parentOwnerUrl.toLowerCase().includes("github")
-            )
-              arr.push(pkg.parentOwner);
-            return arr;
-          } else return [];
-        }).filter(x => x && x != "-");
-        const counted = _.countBy(entries);
-        const pairs = _.toPairs(counted).map(x => ({
-          user: x[0],
-          count: x[1]
-        }));
-        return _.sortBy(pairs, "count").reverse();
-      };
-      // Package hunters
-      const hunters = getConstributors("hunter");
-      const owners = getConstributors("owner");
-      // Backers
-      const backerPath = path.resolve(
-        __dirname,
-        "../../../../data/backers.yml"
-      );
-      const backers = yaml.safeLoad(await readFile(backerPath, "utf8"));
-      return {
-        backers,
-        packageNames,
-        packages,
-        packageByNamespace,
-        topics,
-        topicsWithAll,
-        hunters,
-        owners
-      };
+      if (!pluginData.data) {
+        // Load packages.
+        const packageNames = await loadPackageNames();
+        const packages = packageNames
+          .map(loadPackageSync)
+          .filter(x => x)
+          .map(pkg => {
+            return {
+              ...pkg,
+              link: {
+                link: `/packages/${pkg.name}/`,
+                text: pkg.displayName || pkg.name
+              }
+            };
+          })
+          // Sort by name
+          .sort(function(a, b) {
+            const va = a.link.text.toLowerCase();
+            const vb = b.link.text.toLowerCase();
+            if (va < vb) return -1;
+            if (va > vb) return 1;
+            return 0;
+          });
+        // Namespace => [package...] dict.
+        const packageByNamespace = _.groupBy(packages, x =>
+          getNamespace(x.name)
+        );
+        // Load topics.
+        const topicsWithAll = [{ name: "All", slug: "" }]
+          .concat((await loadTopics()).topics)
+          .map(topic => {
+            return {
+              ...topic,
+              link: topic.slug
+                ? `/packages/topics/${topic.slug}/`
+                : "/packages/",
+              count: packages.filter(pkg =>
+                plugin.packageTopicFilter(pkg, topic.slug)
+              ).length
+            };
+          });
+        const topics = topicsWithAll.slice(1);
+        // contributors
+        const getConstributors = function(type) {
+          const entries = _.flatMap(packages, pkg => {
+            if (type == "hunter") return [pkg.hunter];
+            else if (type == "owner") {
+              let arr = [pkg.owner];
+              if (
+                pkg.parentOwner &&
+                pkg.parentOwnerUrl.toLowerCase().includes("github")
+              )
+                arr.push(pkg.parentOwner);
+              return arr;
+            } else return [];
+          }).filter(x => x && x != "-");
+          const counted = _.countBy(entries);
+          const pairs = _.toPairs(counted).map(x => ({
+            user: x[0],
+            count: x[1]
+          }));
+          return _.sortBy(pairs, "count").reverse();
+        };
+        // Package hunters
+        const hunters = getConstributors("hunter");
+        const owners = getConstributors("owner");
+        // Backers
+        const backerPath = path.resolve(
+          __dirname,
+          "../../../../data/backers.yml"
+        );
+        const backers = yaml.safeLoad(await readFile(backerPath, "utf8"));
+        // eslint-disable-next-line require-atomic-updates
+        pluginData.data = {
+          backers,
+          packageNames,
+          packages,
+          packageByNamespace,
+          topics,
+          topicsWithAll,
+          hunters,
+          owners
+        };
+      }
+      return pluginData.data;
     },
 
     // Generate package list pages
diff --git a/docs/.vuepress/theme/components/PackageCard.vue b/docs/.vuepress/theme/components/PackageCard.vue
diff --git a/docs/.vuepress/theme/components/PackageRecent.vue b/docs/.vuepress/theme/components/PackageRecent.vue
@@ -0,0 +1,47 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div class="package-recent container">
+    <div class="columns">
+      <div class="column col-12 col-sm-12">
+        <div class="columns">
+          <div
+            v-for="pkg in packages"
+            :key="pkg.id"
+            class="column col-4 col-md-6 col-sm-12"
+          >
+            <PackageCard :item="pkg" :show-created-at="true" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from "lodash";
+import PackageCard from "@theme/components/PackageCard.vue";
+
+export default {
+  components: { PackageCard },
+  props: {
+    count: {
+      type: Number,
+      default: 3
+    }
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    packages() {
+      const pkgs = this.$page.recentPackages;
+      return _.orderBy(pkgs, ["createdAt"], ["desc"]).slice(0, this.count);
+    }
+  }
+};
+</script>
+
+<style lang="stylus">
+.package-recent
+  margin-top 1rem
+</style>
diff --git a/docs/.vuepress/theme/layouts/Home.vue b/docs/.vuepress/theme/layouts/Home.vue
@@ -73,7 +73,7 @@ export default {
 .home
   .hero
     padding-top 5.5rem
-    padding-bottom 4rem
+    padding-bottom 2rem
 
     .hero-body
       text-align center
@@ -88,11 +88,14 @@ export default {
       margin-right 1rem
 
   .features
-    margin-bottom 4rem
+    margin-bottom 3rem
     h3
       font-size 1.1rem
       color $accentColor
 
+  h3
+    margin-top 2rem
+
   .social-share
     text-align center
     margin-bottom 1rem
@@ -113,6 +116,11 @@ export default {
     .social-share
       margin-bottom 0.4rem
 
+    .package-recent
+      margin-left -1rem
+      margin-right -1rem
+      width calc(100% + 2rem)
+
   .warning.custom-block
-    margin: 0 -1rem
+    margin: 0 -1rem !important
 </style>
diff --git a/docs/.vuepress/theme/layouts/PackageList.vue b/docs/.vuepress/theme/layouts/PackageList.vue
@@ -57,7 +57,7 @@
                 <div
                   v-for="pkg in packages"
                   :key="pkg.id"
-                  class="column col-6 col-md-12 tile-wrap"
+                  class="column col-6 col-md-12"
                 >
                   <PackageCard
                     :item="pkg"
@@ -78,7 +78,7 @@
 import _ from "lodash";
 import ParentLayout from "@theme/layouts/Layout.vue";
 import NavLink from "@parent-theme/components/NavLink.vue";
-import PackageCard from "@theme/layouts/PackageCard.vue";
+import PackageCard from "@theme/components/PackageCard.vue";
 
 export default {
   components: { ParentLayout, NavLink, PackageCard },
diff --git a/docs/index.md b/docs/index.md
@@ -43,4 +43,8 @@ manifest updated, please open unity project to apply changes
 openupm-cli requires [Node.js 12](https://nodejs.org/en/)
 :::
 
+### Recent Packages
+
+<PackageRecent />
+
 <social-share />
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@vuepress/plugin-google-analytics": "^1.2.0",
     "@vuepress/plugin-medium-zoom": "^1.0.0",
     "@vuepress/plugin-pwa": "^1.2.0",
+    "@vuepress/plugin-register-components": "^1.2.0",
     "axios": "^0.19.0",
     "babel-eslint": "^10.0.3",
     "change-case": "^4.1.0",
