feat: show avatar on package list and detail

openupm · Dec 30, 2019 · e02f965 · e02f965
1 parent 76859ed
commit e02f965
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 9 deletions.
diff --git a/app/utils/package.js b/app/utils/package.js
@@ -78,12 +78,17 @@ const preparePackage = function(doc) {
   // owner
   doc.owner = ghUrl.owner;
   doc.ownerUrl = `https://${ghUrl.hostname}/${ghUrl.owner}`;
+  doc.ownerAvatarUrl = doc.ownerUrl.toLowerCase().includes("github")
+    ? `https://${ghUrl.hostname}/${ghUrl.owner}.png`
+    : null;
   // hunter
   if (doc.hunter) {
     doc.hunterUrl = `https://${ghUrl.hostname}/${doc.hunter}`;
+    doc.hunterAvatarUrl = `https://${ghUrl.hostname}/${doc.hunter}.png`;
   } else {
     doc.hunter = "-";
     doc.hunterUrl = null;
+    doc.hunterAvatarUrl = null;
   }
   // license
   if (doc.licenseSpdxId && spdx[doc.licenseSpdxId])
@@ -97,6 +102,10 @@ const preparePackage = function(doc) {
   doc.parentOwnerUrl = parentGHUrl
     ? `https://${parentGHUrl.hostname}/${parentGHUrl.owner}`
     : null;
+  doc.parentOwnerAvatarUrl =
+    doc.parentOwnerUrl && doc.parentOwnerUrl.toLowerCase().includes("github")
+      ? `https://${parentGHUrl.hostname}/${parentGHUrl.owner}.png`
+      : null;
   return doc;
 };
 

diff --git a/docs/.vuepress/theme/layouts/PackageDetail.vue b/docs/.vuepress/theme/layouts/PackageDetail.vue
@@ -56,16 +56,58 @@
                 </section>
                 <section class="col-6 col-sm-12">
                   <h2>Author</h2>
-                  <NavLink
+                  <a
                     v-if="parentOwnerNavLink"
-                    :item="parentOwnerNavLink"
-                  />
-                  <span v-if="parentOwnerNavLink">,</span>
-                  <NavLink :item="ownerNavLink" />
+                    :href="parentOwnerNavLink.link"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="nav-link external"
+                  >
+                    <span class="chip">
+                      <img
+                        v-if="$package.parentOwnerAvatarUrl"
+                        :src="$package.parentOwnerAvatarUrl"
+                        :alt="$package.parentOwner"
+                        class="avatar avatar-sm"
+                      />
+                      <i v-else class="fa fa-user"></i>
+                      {{ parentOwnerNavLink.text }}
+                    </span>
+                  </a>
+                  <a
+                    :href="ownerNavLink.link"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="nav-link external"
+                  >
+                    <span class="chip">
+                      <img
+                        :src="$package.ownerAvatarUrl"
+                        :alt="$package.owner"
+                        class="avatar avatar-sm"
+                      />
+                      {{ ownerNavLink.text }}
+                    </span>
+                  </a>
                 </section>
                 <section class="col-6 col-sm-12">
                   <h2>Discovered by</h2>
-                  <NavLink v-if="$package.hunterUrl" :item="hunterNavLink" />
+                  <a
+                    v-if="$package.hunterUrl"
+                    :href="hunterNavLink.link"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="nav-link external"
+                  >
+                    <span class="chip">
+                      <img
+                        :src="$package.hunterAvatarUrl"
+                        :alt="hunterNavLink.text"
+                        class="avatar avatar-sm"
+                      />
+                      {{ hunterNavLink.text }}
+                    </span>
+                  </a>
                   <span v-else>{{ this.$package.hunter }}</span>
                 </section>
                 <section class="col-6 col-sm-12">
@@ -577,7 +619,11 @@ See more in the [${this.$package.repo}](${this.$package.repoUrl}) repository.
             top .1rem
 
       i, img
-        vertical-align: middle
+        vertical-align middle
+
+      i.fa-user
+        padding-right 0.2rem
+        color $textColor
 
       .fork
         font-size 0.6rem

diff --git a/docs/.vuepress/theme/layouts/PackageList.vue b/docs/.vuepress/theme/layouts/PackageList.vue
@@ -52,11 +52,21 @@
                       </p>
                       <div>
                         <span class="chip">
-                          <i class="fa fa-user"></i>
+                          <img
+                            :src="pkg.ownerAvatarUrl"
+                            :alt="pkg.owner"
+                            class="avatar avatar-sm"
+                          />
                           {{ pkg.owner }}
                         </span>
                         <span v-if="pkg.parentOwner" class="chip">
-                          <i class="fa fa-user"></i>
+                          <img
+                            v-if="pkg.parentOwnerAvatarUrl"
+                            :src="pkg.parentOwnerAvatarUrl"
+                            :alt="pkg.parentOwner"
+                            class="avatar avatar-sm"
+                          />
+                          <i v-else class="fa fa-user"></i>
                           {{ pkg.parentOwner }}
                         </span>
                         <span class="chip">