feat: add possibility to list specific repositories

ListRepositories will now fetch repos with FetchRepositories only if no repositories are already
passed to the component in its default slot.

content/.vuepress/components/GitHub/FetchRepositories.vue

@@ -0,0 +1,48 @@
+<template>
+  <ApiLoader :url="fetchUrl" @dataLoaded="filterRepos" cache-name="repos" />
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { GithubRepo } from '../../composables/github';
+const props = defineProps({
+  sortBy: {
+    default: 'none',
+    required: false,
+    type: String as PropType<'stars' | 'forks' | 'pushed_at'>,
+  },
+  user: {
+    default: '',
+    required: true,
+    type: String,
+  },
+  limit: {
+    default: 5,
+    required: false,
+    type: Number,
+  },
+});
+
+const emits = defineEmits(['dataLoaded']);
+
+const fetchUrl = `https://api.github.com/users/${props.user}/repos?per_page=100`;
+
+const filterRepos = (response: GithubRepo[]) => {
+  emits(
+    'dataLoaded',
+    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>

content/.vuepress/components/GitHub/GithubRepository.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    class="githubRepo flex-row flex-space-between gap-1rem rounded-corners center"
+  >
+    <ApiLoader
+      :cache-name="repoName()"
+      :url="fetchUrl"
+      :already-known-data="props.data"
+      @data-loaded="(repo: GithubRepo) => (repository = repo)"
+    >
+      <div class="flex-col info">
+        <h3>{{ repository.name }}</h3>
+        <div>
+          <p>
+            {{ repository.description }}
+          </p>
+        </div>
+      </div>
+      <div class="flex-col flex-start gap-1rem stats">
+        <p>Stars: {{ repository.stargazers_count }}</p>
+        <p>Forks: {{ repository.forks_count }}</p>
+      </div>
+    </ApiLoader>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ApiLoader from '../ApiLoader.vue';
+
+import { GithubRepo } from '../../composables/github';
+import { PropType, Ref, ref } from 'vue';
+
+const props = defineProps({
+  data: Object as PropType<GithubRepo>,
+  repoName: String,
+});
+
+const repoName = (): string => {
+  return props.data ? props.data.full_name : props.repoName;
+};
+
+const fetchUrl = `https://api.github.com/repos/${repoName()}`;
+const repository: Ref<GithubRepo> = ref(null);
+</script>
+
+<style lang="less">
+@import 'node_modules/nord/src/lesscss/nord.less';
+@import '../../styles/classes.less';
+
+.githubRepo {
+  width: 35rem;
+  padding: 3rem;
+  background-color: @nord4;
+
+  html.dark & {
+    background-color: @nord3;
+  }
+
+  .info {
+    max-width: 30rem;
+  }
+
+  .stats {
+    width: 4rem;
+  }
+}
+</style>

content/.vuepress/components/GitHub/ListRepositories.vue

@@ -0,0 +1,50 @@
+<template>
+  <div v-if="props.user !== ''" class="list-repos flex-col gap-1rem">
+    <FetchRepositories
+      :sort-by="props.sortBy"
+      :user="props.user"
+      :limit="props.limit"
+      @data-loaded="(response: GithubRepo[]) => (repos = response)"
+    />
+    <GithubRepository :data="repo" type="repositories" v-for="repo in repos" />
+  </div>
+  <div v-else class="list-repos flex-col gap-1rem">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import FetchRepositories from './FetchRepositories.vue';
+import GithubRepository from './GithubRepository.vue';
+
+import { PropType, Ref, ref } from 'vue';
+import { GithubRepo } from '../../composables/github';
+
+const props = defineProps({
+  sortBy: {
+    default: 'none',
+    required: false,
+    type: String as PropType<'stars' | 'forks' | 'pushed_at'>,
+  },
+  user: {
+    default: '',
+    required: false,
+    type: String,
+  },
+  limit: {
+    default: 5,
+    required: false,
+    type: Number,
+  },
+});
+
+const repos: Ref<GithubRepo[]> = ref(null);
+</script>
+
+<style lang="less">
+@import '../../styles/classes.less';
+
+.list-repos {
+  margin: 2rem auto;
+}
+</style>