website: Counter: include type+tags

website/src/components/Counter.vue

@@ -1,38 +1,49 @@
 <template>
   <v-container>
-    <v-row>
-      <v-col v-for="extension in extensions" :key="extension.identifier">
-        <v-card class="mx-auto" width="400px" outlined>
-          <v-card-title>
-            <v-row no-gutters class="justify-center align-center">
-              <v-avatar tile size="50">
-                <v-img :src="extension.extension_logo" />
-              </v-avatar>
-              <v-col>
-                <v-card-title>
-                  <a v-bind:href="extension.website">{{ extension.name }}</a>
-                </v-card-title>
-                <v-card-subtitle>
-                  <a v-bind:href="'https://hub.docker.com/r/' + extension.docker">{{ extension.identifier }}</a>
-                </v-card-subtitle>
-              </v-col>
-            </v-row>
-          </v-card-title>
-          <v-card-text>{{ extension.description }}</v-card-text>
-        </v-card>
-      </v-col>
+    <v-row v-for="section in ['device-integration', 'theme', 'other', 'example']">
+      <h1>{{ section }}</h1>
+      <v-row>
+        <v-col v-for="extension in extensions" :key="extension.identifier">
+          <v-card v-if="highestVersion(extension).type === section" class="mx-auto" width="400px" outlined>
+            <v-card-title>
+              <v-row no-gutters class="justify-center align-center">
+                <v-avatar tile size="50">
+                  <v-img :src="extension.extension_logo" />
+                </v-avatar>
+                <v-col>
+                  <v-card-title>
+                    <a v-bind:href="extension.website">{{ extension.name }}</a>
+                  </v-card-title>
+                  <v-card-subtitle>
+                    <a v-bind:href="'https://hub.docker.com/r/' + extension.docker">{{ extension.identifier }}</a>
+                  </v-card-subtitle>
+                  <v-card-actions>
+                    <v-chip label class="ma-1" color="blue" v-for="tag in highestVersion(extension).filter_tags">
+                      {{ tag }}
+                    </v-chip>
+                  </v-card-actions>
+                </v-col>
+              </v-row>
+            </v-card-title>
+            <v-card-text>{{ extension.description }}</v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
     </v-row>
   </v-container>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { RepositoryEntry } from "@/types/manifest"
+import { RepositoryEntry, Version } from "@/types/manifest"
 
 const extensions = ref();
 
 onMounted(async () => {
   const response = await fetch("manifest.json");
   extensions.value = await response.json() as [RepositoryEntry];
 });
+function highestVersion(extension: RepositoryEntry) : Version {
+    return Object.values(extension.versions)[0];
+}
 </script>