feat: handle API calls and caching through Vue components

BREAKING CHANGE: API calls and cache no longer made in their respective composable

content/.vuepress/components/GitRepos/GithubRepository.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="githubRepo flex-col rounded-corners">
+    <h4>{{ props.repo.name }}</h4>
+    <div class="flex-row space-between">
+      <p>{{ props.repo.description }}</p>
+      <div class="gap-1rem flex-end">
+        <p>Stars: {{ repo.stargazers_count }}</p>
+        <p>Forks: {{ repo.forks_count }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { GithubRepo } from '../../composables/github';
+import { PropType } from 'vue';
+const props = defineProps({
+  repo: Object as PropType<GithubRepo>,
+});
+</script>
+
+<style lang="less">
+@import 'node_modules/nord/src/lesscss/nord.less';
+@import '../../styles/classes.less';
+
+.githubRepo {
+  max-width: 35rem;
+  padding: 3rem;
+  background-color: @nord3;
+}
+</style>

content/.vuepress/components/GitRepos/ListRepositories.vue

@@ -0,0 +1,50 @@
+<template>
+  <ApiLoader :url="fetchUrl" @dataLoaded="filterRepos">
+    <GithubRepository :repo="repo" type="repositories" v-for="repo in repos" />
+  </ApiLoader>
+</template>
+
+<script setup lang="ts">
+import { PropType, Ref, ref } from 'vue';
+import { GithubRepo } from '../../composables/github';
+import GithubRepository from './GithubRepository.vue';
+const props = defineProps({
+  sortBy: {
+    default: 'pushed_at',
+    required: false,
+    type: String as PropType<'stars' | 'forks' | 'pushed_at'>,
+  },
+  user: {
+    default: '',
+    required: true,
+    type: String,
+  },
+  limit: {
+    default: 5,
+    required: false,
+    type: Number,
+  },
+});
+
+let repos: Ref<GithubRepo[]> = ref(null);
+
+const fetchUrl = `https://api.github.com/users/${props.user}/repos?per_page=100`;
+
+const filterRepos = (response: GithubRepo[]) => {
+  repos.value = response
+    .sort((a, b) => {
+      if (props.sortBy === 'stars') {
+        return b.stargazers_count - a.stargazers_count;
+      }
+      if (props.sortBy === 'pushed_at') {
+        const dateA = new Date(a.pushed_at);
+        const dateB = new Date(b.pushed_at);
+        return dateB.getTime() - dateA.getTime();
+      }
+      return b.forks_count - a.forks_count;
+    })
+    .slice(0, +props.limit);
+};
+</script>
+
+<style lang="less"></style>