Get info from GitHub APIs

.env.development

@@ -2,7 +2,8 @@ NODE_ENV=development
 
 VITE_BLOG_URL=https://blog.ryujinx.org
 VITE_FAQ_URL=https://ryujinx.org/faq
-VITE_COMPATIBILITY_URL=https://api.github.com/repos/Ryujinx/Ryujinx-Games-List/issues
+VITE_LABEL_SEARCH_URL=https://api.github.com/search/issues?repository_id=133966349&q=
+VITE_REPO_URL=https://api.github.com/repos/Ryujinx/Ryujinx
 VITE_GUIDE_URL=https://github.com/Ryujinx/Ryujinx/wiki/Ryujinx-Setup-&-Configuration-Guide
 VITE_DISCORD_URL=https://discord.gg/VkQYXAZ
 VITE_RELEASE_URL=https://api.github.com/repos/Ryujinx/release-channel-master/releases/latest

.env.production

@@ -2,7 +2,8 @@ NODE_ENV=production
 
 VITE_BLOG_URL=https://blog.ryujinx.org
 VITE_FAQ_URL=https://ryujinx.org/faq
-VITE_COMPATIBILITY_URL=https://api.github.com/repos/Ryujinx/Ryujinx-Games-List/issues
+VITE_LABEL_SEARCH_URL=https://api.github.com/search/issues?repository_id=133966349&q=
+VITE_REPO_URL=https://api.github.com/repos/Ryujinx/Ryujinx
 VITE_GUIDE_URL=https://github.com/Ryujinx/Ryujinx/wiki/Ryujinx-Setup-&-Configuration-Guide
 VITE_DISCORD_URL=https://discord.gg/VkQYXAZ
 VITE_RELEASE_URL=https://api.github.com/repos/Ryujinx/release-channel-master/releases/latest

src/global.d.ts

@@ -1,7 +1,8 @@
 interface ImportMetaEnv {
   VITE_BLOG_URL: string;
   VITE_FAQ_URL: string;
-  VITE_COMPATIBILITY_URL: string;
+  VITE_LABEL_SEARCH_URL: string;
+  VITE_REPO_URL: string;
   VITE_GUIDE_URL: string;
   VITE_DISCORD_URL: string;
   VITE_RELEASE_URL: string;

src/types/response/github.ts

@@ -1,7 +1,7 @@
 export type DownloadRelease = {
   assets: DownloadAsset[];
   assets_url: string;
-  author: ReleaseAuthor;
+  author: User;
   body: string;
   created_at: string;
   draft: boolean;
@@ -23,7 +23,7 @@ export type DownloadAsset = {
   browser_download_url: string;
   content_type: string;
   created_at: string;
-  download_count: 8
+  download_count: number;
   id: number;
   label: string;
   name: string;
@@ -34,12 +34,20 @@ export type DownloadAsset = {
   url: string;
 }
 
-export type ReleaseAuthor = {
+export type IssueSearch = {
+  total_count: number;
+}
+
+export type Repo = {
+  stargazers_count: number;
+}
+
+export type User = {
   avatar_url: string;
   events_url: string;
   followers_url: string;
   following_url: string;
-  gists_rk: string;
+  gists_url: string;
   gravatar_id: string;
   html_url: string;
   id: number;
@@ -53,4 +61,4 @@ export type ReleaseAuthor = {
   subscriptions_url: string;
   type: string;
   url: string;
-}
+}

src/views/CompatibilityPage.vue

@@ -1,9 +1,63 @@
 <script lang="ts" setup>
+import { IssueSearch } from "@/types";
+import axios from "axios";
+import { onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
-const COMPATIBILITY_URL = import.meta.env.VITE_COMPATIBILITY_URL;
 const { t } = useI18n();
+const data = ref<PlayableTier[]>([
+  {
+    labelName: "status-playable",
+    prettyPrintName: "Playable",
+    count: 0
+  },
+  {
+    labelName: "status-ingame",
+    prettyPrintName: "In-Game",
+    count: 0
+  },
+  {
+    labelName: "status-menus",
+    prettyPrintName: "Menus",
+    count: 0
+  },
+  {
+    labelName: "status-boots",
+    prettyPrintName: "Boots",
+    count: 0
+  },
+  {
+    labelName: "status-nothing",
+    prettyPrintName: "Nothing",
+    count: 0
+  },
+]);
+
+onMounted(() => {
+  fetchStats();
+});
+
+interface PlayableTier {
+  labelName: string;
+  prettyPrintName: string;
+  count: number;
+}
+
+const fetchStats = async () => {
+  try {
+    data.value.forEach(async tier => {
+      const result = await axios.get<IssueSearch>(
+        `${import.meta.env.VITE_LABEL_SEARCH_URL}label:${tier.labelName}+state:open`
+      );
+
+      tier.count = result.data.total_count;
+    });
+
+    console.log(data.value);
+  } catch (err) {
+    console.error(err);
+  }
+}
 </script>
 
-<template>
-</template>
+<template></template>

src/views/HomePage.vue

@@ -8,9 +8,60 @@ import {
 import { useI18n } from "vue-i18n";
 
 import TeamList from "@/modules/TeamList.vue";
+import { computed, onMounted, ref } from "vue";
+import axios from "axios";
+import { IssueSearch, Repo } from "@/types";
 
 const { t } = useI18n();
 const DISCORD_URL = import.meta.env.VITE_DISCORD_URL;
+const issueSearch = ref<IssueSearch>({} as IssueSearch);
+const repo = ref<Repo>({} as Repo);
+const playableGames = computed(() => {
+  return formatNumber(issueSearch.value?.total_count);
+});
+const stars = computed(() => {
+  return formatNumber(repo.value?.stargazers_count);
+});
+
+onMounted(() => {
+  fetchStats();
+});
+
+function formatNumber(num: number): string {
+  return new Intl.NumberFormat(getLang(), {
+    notation: "compact",
+    maximumFractionDigits: 1
+  }).format(num);
+}
+
+function getLang() {
+  if (navigator.languages != undefined) 
+    return navigator.languages[0]; 
+  return navigator.language;
+}
+
+const fetchStats = async () => {
+  try {
+    const result = await axios.get<IssueSearch>(
+      import.meta.env.VITE_LABEL_SEARCH_URL + "label:status-playable+state:open"
+    );
+
+    issueSearch.value = result.data;
+  } catch (err) {
+    console.error(err);
+  }
+
+  try {
+    const result = await axios.get<Repo>(
+      import.meta.env.VITE_REPO_URL
+    );
+
+    repo.value = result.data;
+  } catch (err) {
+    console.error(err);
+  }
+}
+
 </script>
 <template>
   <div>
@@ -230,7 +281,7 @@ const DISCORD_URL = import.meta.env.VITE_DISCORD_URL;
             <dl
               class="space-y-1 px-5 py-12 hover:bg-gray-50 hover:bg-opacity-50"
             >
-              <dt class="text-4xl font-extrabold text-sky-600">14,9k+</dt>
+              <dt class="text-4xl font-extrabold text-sky-600">{{stars}}+</dt>
               <dd class="text-sm uppercase tracking-wide font-semibold">
                 {{ t("views.homepage.githubStar") }}
               </dd>
@@ -238,7 +289,7 @@ const DISCORD_URL = import.meta.env.VITE_DISCORD_URL;
             <dl
               class="space-y-1 px-5 py-12 hover:bg-gray-50 hover:bg-opacity-50"
             >
-              <dt class="text-4xl font-extrabold text-sky-600">3,2k+</dt>
+              <dt class="text-4xl font-extrabold text-sky-600">{{playableGames}}+</dt>
               <dd class="text-sm uppercase tracking-wide font-semibold">
                 {{ t("views.homepage.playableGames") }}
               </dd>