Skip to content

Commit 50f0bdb

Browse files
DerGooglerDerGoogler
committed
Redesign repository page with hero and grid UI
Revamps the repository index page with a new hero section, statistics cards, and a responsive grid layout for repositories. Adds module count and description to each repository card, improves visual hierarchy, and enhances user experience with modern styling.
1 parent 01bc03d commit 50f0bdb

File tree

1 file changed

+241
-14
lines changed

1 file changed

+241
-14
lines changed

‎docs/en/repository/index.md‎

Lines changed: 241 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ onMounted(async () => {
2020
return {
2121
name: r.name,
2222
href: r.id,
23+
moduleCount: data.modules.length,
24+
description: data.description || "Browse modules from this repository"
2325
}
2426
} catch {
2527
return null // ignore failed fetches
@@ -35,21 +37,246 @@ onMounted(async () => {
3537
})
3638
</script>
3739

38-
<h1>Repositories</h1>
40+
<!-- App Store Hero Section -->
41+
<div :class="$style.heroSection">
42+
<h1 :class="$style.heroTitle">Module Repositories</h1>
43+
<p :class="$style.heroSubtitle">
44+
Discover and install modules from <strong>{{ repoCount }}</strong> trusted repositories,
45+
featuring over <strong>{{ moduleCount }}</strong> modules for your device.
46+
</p>
47+
48+
<div :class="$style.statsCards">
49+
<div :class="$style.statCard">
50+
<div :class="$style.statNumber">{{ repoCount }}</div>
51+
<div :class="$style.statLabel">Repositories</div>
52+
</div>
53+
<div :class="$style.statCard">
54+
<div :class="$style.statNumber">{{ moduleCount }}+</div>
55+
<div :class="$style.statLabel">Available Modules</div>
56+
</div>
57+
</div>
58+
</div>
3959

40-
<p>
41-
As of now, the MMRL provides access to <strong style="color: var(--vp-c-brand-1);">{{ repoCount }}</strong> repositories,
42-
encompassing more than <strong style="color: var(--vp-c-brand-1);">{{ moduleCount }}</strong> modules in total.
43-
These are continually maintained to ensure up-to-date functionality and compatibility.
44-
</p>
45-
46-
:::info
47-
The website will be every 6 (six) hours re-deployed so that every repository will be updated at [mmrl.dev](https://mmrl.dev)!
60+
:::info Auto-Updates
61+
The website automatically re-deploys every 6 hours to ensure all repositories are up-to-date at [mmrl.dev](https://mmrl.dev)!
4862
:::
4963

50-
<ol>
51-
<li v-for="repository in repos" :key="repository.href">
52-
<a :href="repository.href">{{ repository.name }}</a>
53-
</li>
54-
</ol>
64+
<!-- Repository Grid -->
65+
<div :class="$style.repositoryGrid">
66+
<a v-for="repository in repos" :key="repository.href" :href="repository.href" :class="$style.repoCard">
67+
<div :class="$style.repoHeader">
68+
<div :class="$style.repoIcon">
69+
<svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
70+
<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"/>
71+
</svg>
72+
</div>
73+
<div :class="$style.repoInfo">
74+
<h3 :class="$style.repoName">{{ repository.name }}</h3>
75+
<p :class="$style.repoDescription">{{ repository.description }}</p>
76+
</div>
77+
<div :class="$style.moduleCount">
78+
<span :class="$style.countNumber">{{ repository.moduleCount }}</span>
79+
<span :class="$style.countLabel">modules</span>
80+
</div>
81+
</div>
82+
<div :class="$style.repoFooter">
83+
<span :class="$style.exploreText">Tap to explore →</span>
84+
</div>
85+
</a>
86+
</div>
87+
88+
<style module>
89+
.heroSection {
90+
background: linear-gradient(135deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);
91+
border-radius: 20px;
92+
padding: 40px;
93+
margin-bottom: 32px;
94+
border: 1px solid var(--vp-c-divider);
95+
text-align: center;
96+
}
97+
98+
.heroTitle {
99+
font-size: 42px !important;
100+
font-weight: 800 !important;
101+
margin: 0 0 16px 0 !important;
102+
color: var(--vp-c-text-1) !important;
103+
border: none !important;
104+
padding: 0 !important;
105+
}
106+
107+
.heroSubtitle {
108+
font-size: 18px;
109+
color: var(--vp-c-text-2);
110+
margin: 0 0 32px 0;
111+
line-height: 1.6;
112+
max-width: 600px;
113+
margin-left: auto;
114+
margin-right: auto;
115+
}
116+
117+
.statsCards {
118+
display: flex;
119+
gap: 24px;
120+
justify-content: center;
121+
flex-wrap: wrap;
122+
}
123+
124+
.statCard {
125+
background: var(--vp-c-bg);
126+
border: 1px solid var(--vp-c-divider);
127+
border-radius: 16px;
128+
padding: 24px;
129+
min-width: 120px;
130+
text-align: center;
131+
}
132+
133+
.statNumber {
134+
font-size: 32px;
135+
font-weight: 700;
136+
color: var(--vp-c-brand-1);
137+
margin-bottom: 4px;
138+
}
139+
140+
.statLabel {
141+
font-size: 14px;
142+
color: var(--vp-c-text-2);
143+
font-weight: 600;
144+
}
145+
146+
.repositoryGrid {
147+
display: grid;
148+
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
149+
gap: 20px;
150+
margin-top: 32px;
151+
}
152+
153+
.repoCard {
154+
display: block;
155+
background: var(--vp-c-bg-soft);
156+
border: 1px solid var(--vp-c-divider);
157+
border-radius: 16px;
158+
padding: 24px;
159+
text-decoration: none !important;
160+
transition: all 0.3s ease;
161+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
162+
}
163+
164+
.repoCard:hover {
165+
border-color: var(--vp-c-brand-1);
166+
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
167+
transform: translateY(-4px);
168+
}
169+
170+
.repoHeader {
171+
display: flex;
172+
align-items: flex-start;
173+
gap: 16px;
174+
margin-bottom: 16px;
175+
}
176+
177+
.repoIcon {
178+
flex-shrink: 0;
179+
width: 48px;
180+
height: 48px;
181+
background: var(--vp-c-brand-1);
182+
color: white;
183+
border-radius: 12px;
184+
display: flex;
185+
align-items: center;
186+
justify-content: center;
187+
}
188+
189+
.repoInfo {
190+
flex: 1;
191+
min-width: 0;
192+
}
193+
194+
.repoName {
195+
font-size: 20px !important;
196+
font-weight: 700 !important;
197+
margin: 0 0 8px 0 !important;
198+
color: var(--vp-c-text-1) !important;
199+
border: none !important;
200+
padding: 0 !important;
201+
}
202+
203+
.repoDescription {
204+
font-size: 14px;
205+
color: var(--vp-c-text-2);
206+
margin: 0;
207+
line-height: 1.5;
208+
}
209+
210+
.moduleCount {
211+
flex-shrink: 0;
212+
text-align: center;
213+
background: var(--vp-c-brand-soft);
214+
border-radius: 12px;
215+
padding: 8px 12px;
216+
}
217+
218+
.countNumber {
219+
display: block;
220+
font-size: 18px;
221+
font-weight: 700;
222+
color: var(--vp-c-brand-1);
223+
line-height: 1;
224+
}
225+
226+
.countLabel {
227+
font-size: 12px;
228+
color: var(--vp-c-brand-1);
229+
font-weight: 600;
230+
}
231+
232+
.repoFooter {
233+
border-top: 1px solid var(--vp-c-divider);
234+
padding-top: 16px;
235+
text-align: center;
236+
}
237+
238+
.exploreText {
239+
font-size: 14px;
240+
color: var(--vp-c-brand-1);
241+
font-weight: 600;
242+
}
243+
244+
/* Responsive Design */
245+
@media (max-width: 768px) {
246+
.heroSection {
247+
padding: 24px;
248+
}
249+
250+
.heroTitle {
251+
font-size: 32px !important;
252+
}
253+
254+
.repositoryGrid {
255+
grid-template-columns: 1fr;
256+
gap: 16px;
257+
}
258+
259+
.repoCard {
260+
padding: 20px;
261+
}
262+
263+
.repoHeader {
264+
gap: 12px;
265+
}
266+
267+
.repoIcon {
268+
width: 40px;
269+
height: 40px;
270+
}
271+
272+
.statsCards {
273+
gap: 16px;
274+
}
275+
276+
.statCard {
277+
padding: 20px;
278+
min-width: 100px;
279+
}
280+
}
281+
</style>
55282

0 commit comments

Comments
 (0)