feat(ui): plugin logo

Author: Guillaume Chau

packages/@vue/cli-plugin-babel/logo.png

@@ -1,5 +1,19 @@
 <template>
   <div class="project-plugin-item list-item">
+    <div class="logo">
+      <div class="wrapper">
+        <img
+          v-if="plugin.logo"
+          class="image"
+          :src="plugin.logo"
+        >
+        <VueIcon
+          v-else
+          icon="widgets"
+        />
+      </div>
+    </div>
+
     <ListItemInfo
       :name="plugin.id"
       :link="plugin.website"
@@ -61,6 +75,12 @@ export default {
 
 .project-plugin-item
   padding $padding-item
+  h-box()
+  box-center()
+
+  .list-item-info
+    flex 100% 1 1
+    width 0
 
   .plugin-description
     margin-right $padding-item
@@ -69,11 +89,32 @@ export default {
     opacity .7
 
   .info
+    display inline-block
     space-between-x($padding-item)
     >>> > *
       space-between-x(4px)
 
   .package-description
     font-style italic
     opacity .7
+
+  .logo
+    margin-right $padding-item
+    .wrapper
+      h-box()
+      box-center()
+      width 42px
+      height @width
+      background rgba(black, .03)
+      border-radius 50%
+      overflow hidden
+      .image
+        width 100%
+        height @width
+      .vue-icon
+        width 24px
+        height @width
+        >>> svg
+          fill rgba($color-text-light, .3)
+
 </style>

packages/@vue/cli-plugin-e2e-cypress/logo.png

@@ -12,6 +12,10 @@ const metadataCache = new LRU({
   maxAge: 1000 * 60 * 30
 })
 
+const logoCache = new LRU({
+  max: 50
+})
+
 function getPath (id) {
   return path.join(cwd.get(), 'node_modules', id)
 }
@@ -89,8 +93,24 @@ async function getDescription ({ id }, context) {
   return null
 }
 
+async function getLogo ({ id }, context) {
+  const cached = logoCache.get(id)
+  if (cached) {
+    return `data:image/png;base64,${cached}`
+  }
+  const folder = getPath(id)
+  const file = path.join(folder, 'logo.png')
+  if (fs.existsSync(file)) {
+    const data = fs.readFileSync(file, { encoding: 'base64' })
+    logoCache.set(id, data)
+    return `data:image/png;base64,${data}`
+  }
+  return null
+}
+
 module.exports = {
   list,
   getVersion,
-  getDescription
+  getDescription,
+  getLogo
 }

packages/@vue/cli-plugin-e2e-nightwatch/logo.png

@@ -29,7 +29,8 @@ module.exports = {
 
   Plugin: {
     version: (plugin, args, context) => plugins.getVersion(plugin, context),
-    description: (plugin, args, context) => plugins.getDescription(plugin, context)
+    description: (plugin, args, context) => plugins.getDescription(plugin, context),
+    logo: (plugin, args, context) => plugins.getLogo(plugin, context)
   },
 
   Query: {

packages/@vue/cli-plugin-eslint/logo.png

@@ -85,6 +85,7 @@ type Plugin {
   description: String
   githubStats: GitHubStats
   prompts: [Prompt]
+  logo: String
 }
 
 type Feature {

packages/@vue/cli-plugin-pwa/logo.png

@@ -9,4 +9,5 @@ fragment plugin on Plugin {
   installed
   website
   description
+  logo
 }

packages/@vue/cli-plugin-typescript/logo.png

@@ -16,6 +16,8 @@
         fetch-policy="cache-and-network"
       >
         <template slot-scope="{ result: { data, loading } }">
+          <div class="cta-text">Installed plugins</div>
+
           <VueLoadingIndicator
             v-if="loading"
             class="overlay"