feat: better repository card

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

@@ -1,5 +1,6 @@
 <template>
   <ApiLoader :url="fetchUrl" @dataLoaded="filterRepos" cache-name="repos" />
+  <slot />
 </template>
 
 <script setup lang="ts">

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

@@ -1,22 +1,18 @@
 <template>
-  <div
+  <div class="githubRepo flex-col flex-space-between gap-1rem rounded-corners">
-    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-row flex-start gap-1rem stats">
-      <div class="flex-col flex-start gap-1rem stats">
         <div class="stars">
           <Icon name="star" /> {{ repository.stargazers_count }}
         </div>
@@ -55,9 +51,15 @@ const repository: Ref<GithubRepo> = ref(null);
 @import '../../styles/classes.less';
 
 .githubRepo {
-  width: 35rem;
+  max-width: 35rem;
-  padding: 3rem;
+  padding: 2rem;
   background-color: @nord4;
+  align-self: auto;
+  h3,
+  h3:first-child {
+    margin: 0;
+    padding: 0;
+  }
 
   html.dark & {
     background-color: @nord3;
@@ -69,6 +71,11 @@ const repository: Ref<GithubRepo> = ref(null);
 
   .stats {
     width: 4rem;
+
+    div {
+      .flex-row();
+      gap: 0.3rem;
+    }
   }
 }
 </style>

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

@@ -1,15 +1,19 @@
 <template>
-  <div v-if="props.user !== ''" class="list-repos flex-col gap-1rem">
+  <div class="list-repos flex-col gap-1rem">
     <FetchRepositories
+      v-if="props.user !== ''"
       :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"
       />
-    <GithubRepository :data="repo" type="repositories" v-for="repo in repos" />
+    </FetchRepositories>
-  </div>
+    <slot v-else />
-  <div v-else class="list-repos flex-col gap-1rem">
-    <slot></slot>
   </div>
 </template>
 

content/.vuepress/styles/classes.less

@@ -8,6 +8,15 @@ each(range(5), {
   display: flex;
 }
 
+.flex-inline {
+  display: inline-flex;
+}
+
+.flex-inline-col {
+  .flex-inline();
+  flex-direction: column;
+}
+
 .flex-col {
   .flex();
   flex-direction: column;