standardize on shields for rendering badges

meltano · Sep 21, 2022 · 546c4c3 · 546c4c3
1 parent 2e9d264
commit 546c4c3
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/src/components/PluginSidebar.vue b/src/components/PluginSidebar.vue
@@ -111,9 +111,10 @@
       <p class="text-lg">Maintainer</p>
       <ul class="list-disc list-inside shields">
         <li>
-          <span class="bg-gray-600 text-gray-200 text-xs font-semibold mr-2 px-2.5 py-0.5">{{
-            variant
-          }}</span>
+          <img
+            :alt="variant"
+            :src="`https://img.shields.io/static/v1?label=&message=${variant}&color=grey`"
+          />
         </li>
       </ul>
     </div>
@@ -148,13 +149,12 @@
       <p class="text-lg">Keywords</p>
       <ul class="list-disc list-inside shields">
         <li>
-          <span
-            class="bg-gray-300 text-gray-700 text-xs font-semibold mr-2 px-2.5 py-0.5"
-            v-for="(keyword, index) in keywords"
+          <img v-for="(keyword, index) in keywords"
             v-bind:key="index"
-          >
-            {{ keyword }}
-          </span>
+            class="inline m-1"
+            :alt="keyword"
+            :src="`https://img.shields.io/static/v1?label=&message=${keyword}&color=grey`"
+          />
         </li>
       </ul>
     </div>