Add Issue List via GitHub API

src/components/IssueCard.vue

@@ -0,0 +1,61 @@
+<template>
+  <a :href="`${issue.html_url}`">
+    <div class="overflow-hidden h-100 itemcard">
+      <b-row>
+        <b-col>
+          <h1>Issue #{{issue.number}}</h1>
+          <p class="description">{{issue.title}}</p>
+
+          <b-row v-if="issue.labels && issue.labels[0]">
+            <b-col v-for="label in issue.labels">
+              <colored-info :color="`#${label.color}`">{{label.name}}</colored-info>
+            </b-col>
+          </b-row>
+        </b-col>
+      </b-row>
+    </div>
+  </a>
+</template>
+
+<script setup>
+import ColoredInfo from "@/components/ColoredInfo.vue";
+
+defineProps({
+  issue: Object
+})
+</script>
+
+<style scoped>
+* {
+  text-decoration: none;
+  color: #FFF;
+}
+
+.itemcard {
+  background-color: #1E3139;
+  padding: 1rem 2rem;
+  transition: 0.3s;
+}
+
+.itemcard:hover {
+  scale: 1.02;
+}
+
+.itemcard:hover h1 {
+  color: var(--bs-primary);
+  transition: 0.3s;
+}
+
+h1 {
+  font-size: 23pt;
+}
+
+img {
+  max-width: 100%;
+  max-height: 15vh;
+}
+
+.card-text p {
+  font-size: 11pt;
+}
+</style>

src/pages/ItemPage.vue

@@ -69,7 +69,14 @@
               Du kannst Fragen und Vorschläge auch auf unserem <a :href="$discordJoinUrl" target="_blank">Discord-Server</a> loswerden.
             </p>
 
-            <img src="/img/issue_01.png" class="mw-100">
+            <div v-if="issues && issues[0]">
+              <h1>Issues</h1>
+              <b-row>
+                <b-col v-for="issue in issues" xl="4" lg="6" md="12" class="align-self-stretch my-2">
+                  <IssueCard :issue="issue"></IssueCard>
+                </b-col>
+              </b-row>
+            </div>
           </b-tab>
         </b-tabs>
       </b-col>
@@ -88,8 +95,10 @@ import MarkdownDisplay from "@/components/MarkdownDisplay.vue"
 import ItemSummary from "@/components/ItemSummary.vue"
 import DownloadModal from "@/components/DownloadModal.vue"
 import {event} from "vue-gtag";
+import IssueCard from "@/components/IssueCard.vue";
 
 const item = ref(null)
+const issues = ref(null)
 const route = useRoute()
 
 async function fetchItem() {
@@ -99,11 +108,29 @@ async function fetchItem() {
   )
 
   item.value = await res.json()
+  await fetchIssues();
+
   event('visit-storage-item', {
     event_label: item.value.names[0].value
   })
 }
 
+async function fetchIssues(){
+  issues.value = null
+
+  let REST_URL = "https://api.github.com/repos"
+  // Remove github prefix for getting the project path
+  let projectPath = item.github_url.replace("https://github.com/", "");
+
+  // Only request currently opened issues
+  const res = await fetch(
+      `${REST_URL}/${projectPath}/issues?state=open`
+  )
+
+  issues.value = await res.json()
+  console.log(issues.value)
+}
+
 fetchItem()
 </script>