feat(home): fetch stargazers from API

docs/.vitepress/theme/composables/api/useGithubContributors.spec.ts

@@ -16,6 +16,7 @@ describe("useGithubContributors", () => {
 
     expect(contributors.value).toHaveLength(1);
     expect(contributors.value[0].login).toEqual("user1");
+    expect(axios.get).toHaveBeenCalledWith("https://repos/api.github.com/tsedio/tsed/contributors?page=1&per_page=100");
   });
 
   it("should handle errors when fetching Github contributors", async () => {

docs/.vitepress/theme/composables/api/useGithubContributors.ts

@@ -4,7 +4,7 @@ import type {GitHubUser} from "./interfaces/GithubUser";
 
 const outboundRE = /^[a-z]+:/i;
 
-function getHost(docsRepo: string) {
+export function getHost(docsRepo: string) {
   const base = outboundRE.test(docsRepo) ? docsRepo : `https://github.com/${docsRepo}`;
 
   return base.replace("/github.com", "/repos/api.github.com");

docs/.vitepress/theme/composables/api/useStargazers.spec.ts

@@ -0,0 +1,30 @@
+import axios from "axios";
+import {describe, expect, it, vi} from "vitest";
+import {useStargazers} from "./useStargazers";
+
+vi.mock("axios");
+
+describe("useStargazers", () => {
+  it("should fetch the Github Stargazers successfully", async () => {
+    const mockData = {
+      id: "id",
+      stargazers_count: 100
+    };
+    vi.mocked(axios.get).mockResolvedValue({data: mockData});
+
+    const {stargazers, fetchStargazers} = useStargazers("tsedio/tsed");
+    await fetchStargazers();
+
+    expect(stargazers.value).toEqual(100);
+    expect(axios.get).toHaveBeenCalledWith("https://repos/api.github.com/tsedio/tsed");
+  });
+
+  it("should handle errors when fetching Github Stargazers", async () => {
+    vi.mocked(axios.get).mockRejectedValue(new Error("Network Error"));
+
+    const {stargazers, fetchStargazers} = useStargazers("tsedio/tsed", 200);
+    await fetchStargazers();
+
+    expect(stargazers.value).toEqual(200);
+  });
+});

docs/.vitepress/theme/composables/api/useStargazers.ts

@@ -0,0 +1,40 @@
+import {ref, type Ref} from "vue";
+import axios from "axios";
+import {getHost} from "./useGithubContributors";
+
+export interface GithubRepository {
+  id: number;
+  html_url: string;
+  stargazers_count: 2802;
+  watchers_count: 2802;
+  forks_count: 284;
+  open_issues_count: 47;
+}
+
+function format(stargazers: Ref<number>) {
+  return new Intl.NumberFormat(undefined, {
+    notation: "compact",
+    compactDisplay: "short"
+  }).format(stargazers.value);
+}
+
+export function useStargazers(docsRepo: string, defaultValue = 0) {
+  const stargazers = ref<number>(defaultValue);
+
+  const fetchStargazers = async () => {
+    const endpoint = getHost(docsRepo);
+    try {
+      const {
+        data: {stargazers_count}
+      } = await axios.get<GithubRepository>(endpoint);
+
+      stargazers.value = stargazers_count;
+
+      return stargazers;
+    } catch (error) {
+      stargazers.value = defaultValue;
+    }
+  };
+
+  return {stargazers, formattedStargazers: format(stargazers), fetchStargazers};
+}

docs/.vitepress/theme/organisms/home/HomeBanner.vue

@@ -2,6 +2,15 @@
 import Tabs from "../../molecules/tabs/Tabs.vue";
 import Tab from "../../molecules/tabs/Tab.vue";
 import ButtonBanner from "./ButtonBanner.vue";
+import {useStargazers} from "../../composables/api/useStargazers";
+import {useThemeConfig} from "../../composables/config/__mocks__/useThemeConfig";
+
+const theme = useThemeConfig();
+const {githubProxyUrl} = theme.value;
+
+const {formattedStargazers, fetchStargazers} = useStargazers(githubProxyUrl, 2800);
+
+fetchStargazers();
 </script>
 <template>
   <div class="vp-doc w-[75%]">
@@ -66,7 +75,9 @@ import ButtonBanner from "./ButtonBanner.vue";
     </Tabs>
 
     <div class="flex justify-between space-x-2">
-      <ButtonBanner href="https://github.com/tsedio/tsed/stargazers" title="stars">2.8k</ButtonBanner>
+      <ButtonBanner href="https://github.com/tsedio/tsed/stargazers" title="stars">{{
+        formattedStargazers
+      }}</ButtonBanner>
       <ButtonBanner href="https://github.com/tsedio/tsed" title="Coverage">98%</ButtonBanner>
       <ButtonBanner href="https://github.com/tsedio/tsed/blob/production/LICENSE" title="License">
         <template #title>License</template>