Add repository cover images and refactor repository card layout

Author: DerGoogler

docs/en/repository/index.md

@@ -21,6 +21,7 @@ onMounted(async () => {
           name: r.name,
           href: r.id,
           moduleCount: data.modules.length,
+          cover: data.cover,
           description: data.description || "Browse modules from this repository"
         }
       } catch {
@@ -64,23 +65,24 @@ The website automatically re-deploys every 6 hours to ensure all repositories ar
 <!-- Repository Grid -->
 <div :class="$style.repositoryGrid">
   <a v-for="repository in repos" :key="repository.href" :href="repository.href" :class="$style.repoCard">
-    <div :class="$style.repoHeader">
-      <div :class="$style.repoIcon">
-        <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-        </svg>
+    <img v-if="repository.cover" :class="$style.repoCover" :src="repository.cover" />
+    <div :class="$style.repoContainer">
+      <div :class="$style.repoHeader">
+        <div :class="$style.repoIcon">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+        </div>
+        <div :class="$style.repoInfo">
+          <h3 :class="$style.repoName">{{ repository.name }}</h3>
+          <p :class="$style.repoDescription">{{ repository.description }}</p>
+        </div>
+        <div :class="$style.moduleCount">
+          <span :class="$style.countNumber">{{ repository.moduleCount }}</span>
+          <span :class="$style.countLabel">modules</span>
+        </div>
       </div>
-      <div :class="$style.repoInfo">
-        <h3 :class="$style.repoName">{{ repository.name }}</h3>
-        <p :class="$style.repoDescription">{{ repository.description }}</p>
+      <div :class="$style.repoFooter">
+        <span :class="$style.exploreText">Tap to explore →</span>
       </div>
-      <div :class="$style.moduleCount">
-        <span :class="$style.countNumber">{{ repository.moduleCount }}</span>
-        <span :class="$style.countLabel">modules</span>
-      </div>
-    </div>
-    <div :class="$style.repoFooter">
-      <span :class="$style.exploreText">Tap to explore →</span>
     </div>
   </a>
 </div>
@@ -155,7 +157,7 @@ The website automatically re-deploys every 6 hours to ensure all repositories ar
   background: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-divider);
   border-radius: 16px;
-  padding: 24px;
+  /*padding: 24px;*/
   text-decoration: none !important;
   transition: all 0.3s ease !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
@@ -167,6 +169,17 @@ The website automatically re-deploys every 6 hours to ensure all repositories ar
   transform: translateY(-4px);
 }
 
+.repoContainer {
+  display: block;
+  padding: 24px;
+}
+  
+.repoCover {
+  aspect-ratio: 2.048;
+  object-fit: cover;
+  border-radius: 16px 16px 0px 0px;
+}
+
 .repoHeader {
   display: flex;
   align-items: flex-start;
@@ -257,7 +270,7 @@ The website automatically re-deploys every 6 hours to ensure all repositories ar
   }
 
   .repoCard {
-    padding: 20px;
+    /* padding: 20px; */
   }
 
   .repoHeader {