feat: properly display GitHub repositories

content/.vuepress/client.ts

@@ -2,12 +2,14 @@ import { defineClientConfig } from '@vuepress/client';
 import PreviewImage from './components/PreviewImage.vue';
 import ResponsiveImage from './components/ResponsiveImage.vue';
 import LatestRepositories from './components/LatestRepositories.vue';
+import GithubRepository from './components/GithubRepository.vue';
 
 export default defineClientConfig({
-  enhance({ app, router, siteData }) {
+  enhance({ app }) {
     app.component('PreviewImage', PreviewImage);
     app.component('ResponsiveImage', ResponsiveImage);
     app.component('LatestRepositories', LatestRepositories);
+    app.component('GithubRepository', GithubRepository);
   },
   setup() {},
   layouts: {},

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>

content/.vuepress/styles/classes.less

@@ -0,0 +1,32 @@
+each(range(5), {
+  .gap-@{value}rem {
+      gap: @value * 1rem;
+  }
+});
+
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  .flex();
+  flex-direction: column;
+}
+
+.flex-row {
+  .flex();
+  flex-direction: row;
+}
+
+@flex-justifications: flex-start, flex-end, center, space-between, space-around,
+  space-evenly;
+each(@flex-justifications, {
+  .@{value} {
+    .flex();
+    justify-content: @value;
+  }
+});
+
+.rounded-corners {
+  border-radius: 1rem;
+}