feat: nicer styling of repositories and repositories lists

content/.vuepress/client.ts

@@ -3,6 +3,7 @@ import ResponsiveImage from './components/ResponsiveImage.vue';
 import ListRepositories from './components/GitRepos/ListRepositories.vue';
 import GithubRepository from './components/GitRepos/GithubRepository.vue';
 import ApiLoader from './components/ApiLoader.vue';
+import Loader from './components/Loader.vue';
 import Cache from './components/Cache.vue';
 
 export default defineClientConfig({
@@ -11,6 +12,7 @@ export default defineClientConfig({
     app.component('ListRepositories', ListRepositories);
     app.component('GithubRepository', GithubRepository);
     app.component('ApiLoader', ApiLoader);
+    app.component('Loader', Loader);
     app.component('Cache', Cache);
   },
   setup() {},

content/.vuepress/components/ApiLoader.vue

@@ -1,6 +1,8 @@
 <template>
   <Cache name="repos" :callback="fetchData" @cached="processCachedData" />
-  <slot v-if="loading" name="loader"></slot>
+  <slot v-if="loading" name="loader">
+    <Loader />
+  </slot>
   <slot v-else-if="error" name="error"></slot>
   <slot v-else>
     {{ error }}
@@ -9,6 +11,7 @@
 
 <script setup lang="ts">
 import Cache from './Cache.vue';
+import Loader from './Loader.vue';
 
 import { Ref, ref } from 'vue';
 import { Observable, catchError, switchMap, throwError } from 'rxjs';

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

@@ -1,13 +1,17 @@
 <template>
-  <div class="githubRepo flex-col rounded-corners">
+  <div class="githubRepo flex-row flex-space-between gap-1rem rounded-corners">
-    <h4>{{ props.repo.name }}</h4>
+    <div class="flex-col info">
-    <div class="flex-row space-between">
+      <h3>{{ props.repo.name }}</h3>
-      <p>{{ props.repo.description }}</p>
+      <div>
-      <div class="gap-1rem flex-end">
+        <p>
-        <p>Stars: {{ repo.stargazers_count }}</p>
+          {{ props.repo.description }}
-        <p>Forks: {{ repo.forks_count }}</p>
+        </p>
       </div>
     </div>
+    <div class="flex-col flex-start gap-1rem stats">
+      <p>Stars: {{ repo.stargazers_count }}</p>
+      <p>Forks: {{ repo.forks_count }}</p>
+    </div>
   </div>
 </template>
 
@@ -24,8 +28,20 @@ const props = defineProps({
 @import '../../styles/classes.less';
 
 .githubRepo {
-  max-width: 35rem;
+  width: 35rem;
   padding: 3rem;
-  background-color: @nord3;
+  background-color: @nord4;
+
+  html.dark & {
+    background-color: @nord3;
+  }
+
+  .info {
+    max-width: 30rem;
+  }
+
+  .stats {
+    width: 4rem;
+  }
 }
 </style>

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

@@ -1,6 +1,13 @@
 <template>
   <ApiLoader :url="fetchUrl" @dataLoaded="filterRepos">
-    <GithubRepository :repo="repo" type="repositories" v-for="repo in repos" />
+    <div class="flex-col gap-1rem list-repos">
+      <GithubRepository
+        :repo="repo"
+        type="repositories"
+        v-for="repo in repos"
+        class="center"
+      />
+    </div>
   </ApiLoader>
 </template>
 
@@ -47,4 +54,10 @@ const filterRepos = (response: GithubRepo[]) => {
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+@import '../../styles/classes.less';
+
+.list-repos {
+  margin: 2rem auto;
+}
+</style>

content/.vuepress/components/Loader.vue

@@ -0,0 +1,47 @@
+<template>
+  <svg
+    class="circle-loader"
+    width="40"
+    height="40"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="20" cy="20" r="15" />
+  </svg>
+</template>
+
+<style lang="less" scoped>
+@import 'node_modules/nord/src/lesscss/nord.less';
+
+.circle-loader {
+  margin-left: 48%;
+  fill: transparent;
+  stroke: @nord7;
+  stroke-width: 5;
+  animation: dash 1.5s ease infinite, rotate 2s linear infinite;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 95;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 85, 95;
+    stroke-dashoffset: -25;
+  }
+  100% {
+    stroke-dasharray: 85, 95;
+    stroke-dashoffset: -90;
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>

content/.vuepress/styles/classes.less

@@ -18,15 +18,26 @@ each(range(5), {
   flex-direction: row;
 }
 
-@flex-justifications: flex-start, flex-end, center, space-between, space-around,
+@flex-justifications-prefixed: flex-start, flex-end;
-  space-evenly;
+each(@flex-justifications-prefixed, {
-each(@flex-justifications, {
   .@{value} {
     .flex();
     justify-content: @value;
   }
 });
 
+@flex-justifications: center, space-between, space-around, space-evenly;
+each(@flex-justifications, {
+  .flex-@{value} {
+    .flex();
+    justify-content: @value;
+  }
+});
+
 .rounded-corners {
-  border-radius: 1rem;
+  border-radius: 0.3rem;
+}
+
+.center {
+  margin: 0 auto;
 }