feat: properly display GitHub repositories

content/.vuepress/components/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/LatestRepositories.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="githubRepos && githubRepos.length > 0">
     <div v-for="repo in githubRepos">
-      <p>{{ repo.name }} updated at {{ repo.updated_at }}</p>
+      <GithubRepository :repo="repo" v-for="repo in githubRepos" />
     </div>
   </div>
-  <p v-else>Erreur: {{ error }}</p>
+  <p v-else>Error: {{ error }}</p>
 </template>
 
 <script setup lang="ts">
@@ -22,6 +22,7 @@ const getRepositories = () => {
   return getLatestRepositories('phundrak', 5);
 };
 
+// TODO: Cache all repositories and not just these
 readFromCache<GithubRepo[]>('latestRepos', getRepositories).subscribe({
   next: (repos: GithubRepo[]) => {
     console.log('Received repos:', repos);
@@ -35,4 +36,9 @@ readFromCache<GithubRepo[]>('latestRepos', getRepositories).subscribe({
 });
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+@import '../styles/classes.less';
+.repositories {
+  margin: 2rem auto;
+}
+</style>