Skip to content

Commit da3d1ee

Browse files
danielroedanielroe
committed
feat: add styling
1 parent 1a4e7f2 commit da3d1ee

11 files changed

Lines changed: 2652 additions & 380 deletions

File tree

‎app/app.vue‎

Lines changed: 388 additions & 16 deletions
Large diffs are not rendered by default.

‎app/components/PackageSkeleton.vue‎

Lines changed: 227 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -2,141 +2,258 @@
22
<article
33
aria-busy="true"
44
aria-label="Loading package details"
5+
class="animate-fade-in"
56
>
6-
<header>
7-
<h1><span data-skeleton>&nbsp;</span></h1>
8-
<p><span data-skeleton>&nbsp;</span></p>
9-
10-
<dl>
11-
<div>
12-
<dt>Version</dt>
13-
<dd><span data-skeleton>&nbsp;</span></dd>
7+
<!-- Package header - matches header in [...name].vue -->
8+
<header class="mb-8 pb-8 border-b border-border">
9+
<div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
10+
<div class="flex-1 min-w-0">
11+
<!-- Package name: h1 font-mono text-2xl sm:text-3xl font-medium mb-2 -->
12+
<h1 class="font-mono text-2xl sm:text-3xl font-medium mb-2">
13+
<span class="skeleton inline-block h-9 w-48" />
14+
</h1>
15+
<!-- Description: fixed height container matching min-h-[4.5rem] (72px) to prevent CLS -->
16+
<div class="relative max-w-2xl min-h-[4.5rem]">
17+
<div class="space-y-2">
18+
<span class="skeleton block h-5 w-full" />
19+
<span class="skeleton block h-5 w-4/5" />
20+
<span class="skeleton block h-5 w-3/5" />
21+
</div>
22+
</div>
1423
</div>
1524

16-
<div>
17-
<dt>License</dt>
18-
<dd><span data-skeleton>&nbsp;</span></dd>
25+
<!-- Version badge: shrink-0 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md -->
26+
<span class="skeleton shrink-0 h-8 w-20 rounded-md" />
27+
</div>
28+
29+
<!-- Stats grid: grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-6 -->
30+
<dl class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-6">
31+
<!-- License -->
32+
<div class="space-y-1">
33+
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
34+
License
35+
</dt>
36+
<dd class="font-mono text-sm">
37+
<span class="skeleton inline-block h-5 w-12" />
38+
</dd>
1939
</div>
2040

21-
<div>
22-
<dt>Weekly Downloads</dt>
23-
<dd><span data-skeleton>&nbsp;</span></dd>
41+
<!-- Weekly -->
42+
<div class="space-y-1">
43+
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
44+
Weekly
45+
</dt>
46+
<dd class="font-mono text-sm">
47+
<span class="skeleton inline-block h-5 w-20" />
48+
</dd>
2449
</div>
2550

26-
<div>
27-
<dt>Unpacked Size</dt>
28-
<dd><span data-skeleton>&nbsp;</span></dd>
51+
<!-- Size -->
52+
<div class="space-y-1">
53+
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
54+
Size
55+
</dt>
56+
<dd class="font-mono text-sm">
57+
<span class="skeleton inline-block h-5 w-16" />
58+
</dd>
2959
</div>
3060

31-
<div>
32-
<dt>Dependencies</dt>
33-
<dd><span data-skeleton>&nbsp;</span></dd>
61+
<!-- Deps -->
62+
<div class="space-y-1">
63+
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
64+
Deps
65+
</dt>
66+
<dd class="font-mono text-sm">
67+
<span class="skeleton inline-block h-5 w-8" />
68+
</dd>
3469
</div>
3570

36-
<div>
37-
<dt>Last Published</dt>
38-
<dd><span data-skeleton>&nbsp;</span></dd>
71+
<!-- Updated -->
72+
<div class="space-y-1 col-span-2">
73+
<dt class="text-xs text-fg-subtle uppercase tracking-wider">
74+
Updated
75+
</dt>
76+
<dd class="font-mono text-sm">
77+
<span class="skeleton inline-block h-5 w-28" />
78+
</dd>
3979
</div>
4080
</dl>
4181

42-
<nav aria-label="Package links">
43-
<ul>
44-
<li><span data-skeleton>&nbsp;</span></li>
45-
<li><span data-skeleton>&nbsp;</span></li>
46-
<li><span data-skeleton>&nbsp;</span></li>
82+
<!-- Links: mt-6, flex flex-wrap items-center gap-4 -->
83+
<nav
84+
aria-label="Package links"
85+
class="mt-6"
86+
>
87+
<ul class="flex flex-wrap items-center gap-4 list-none m-0 p-0">
88+
<li>
89+
<span class="skeleton inline-block h-5 w-14" />
90+
</li>
91+
<li>
92+
<span class="skeleton inline-block h-5 w-20" />
93+
</li>
94+
<li>
95+
<span class="skeleton inline-block h-5 w-16" />
96+
</li>
97+
<li>
98+
<span class="skeleton inline-block h-5 w-12" />
99+
</li>
47100
</ul>
48101
</nav>
49102
</header>
50103

51-
<section aria-labelledby="install-heading-skeleton">
52-
<h2 id="install-heading-skeleton">
104+
<!-- Install section: mb-8 -->
105+
<section
106+
aria-labelledby="install-heading-skeleton"
107+
class="mb-8"
108+
>
109+
<h2
110+
id="install-heading-skeleton"
111+
class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
112+
>
53113
Install
54114
</h2>
55-
<pre><code><span data-skeleton>&nbsp;</span></code></pre>
115+
<!-- code-block with relative positioning for copy button -->
116+
<div class="relative">
117+
<div class="code-block pr-16">
118+
<span class="skeleton inline-block h-5 w-52" />
119+
</div>
120+
<span class="skeleton absolute top-3 right-3 h-6 w-12 rounded" />
121+
</div>
56122
</section>
57123

58-
<section aria-labelledby="maintainers-heading-skeleton">
59-
<h2 id="maintainers-heading-skeleton">
60-
Maintainers
61-
</h2>
62-
<ul>
63-
<li><span data-skeleton>&nbsp;</span></li>
64-
<li><span data-skeleton>&nbsp;</span></li>
65-
</ul>
66-
</section>
124+
<!-- Two column layout: grid lg:grid-cols-3 gap-8 -->
125+
<div class="grid lg:grid-cols-3 gap-8">
126+
<!-- Main content (README): lg:col-span-2 order-2 lg:order-1 -->
127+
<div class="lg:col-span-2 order-2 lg:order-1">
128+
<section aria-labelledby="readme-heading-skeleton">
129+
<h2
130+
id="readme-heading-skeleton"
131+
class="text-xs text-fg-subtle uppercase tracking-wider mb-4"
132+
>
133+
Readme
134+
</h2>
135+
<!-- Simulated README content -->
136+
<div class="space-y-4">
137+
<!-- Heading -->
138+
<span class="skeleton block h-7 w-2/3" />
139+
<!-- Paragraphs -->
140+
<span class="skeleton block h-4 w-full" />
141+
<span class="skeleton block h-4 w-full" />
142+
<span class="skeleton block h-4 w-4/5" />
143+
<!-- Gap for section break -->
144+
<span class="skeleton block h-6 w-1/2 mt-6" />
145+
<span class="skeleton block h-4 w-full" />
146+
<span class="skeleton block h-4 w-full" />
147+
<span class="skeleton block h-4 w-3/4" />
148+
<!-- Code block placeholder -->
149+
<div class="skeleton h-24 w-full rounded-lg mt-4" />
150+
<span class="skeleton block h-4 w-full" />
151+
<span class="skeleton block h-4 w-5/6" />
152+
</div>
153+
</section>
154+
</div>
67155

68-
<section aria-labelledby="keywords-heading-skeleton">
69-
<h2 id="keywords-heading-skeleton">
70-
Keywords
71-
</h2>
72-
<ul>
73-
<li><span data-skeleton>&nbsp;</span></li>
74-
<li><span data-skeleton>&nbsp;</span></li>
75-
<li><span data-skeleton>&nbsp;</span></li>
76-
</ul>
77-
</section>
156+
<!-- Sidebar: order-1 lg:order-2 space-y-8 -->
157+
<aside class="order-1 lg:order-2 space-y-8">
158+
<!-- Maintainers -->
159+
<section aria-labelledby="maintainers-heading-skeleton">
160+
<h2
161+
id="maintainers-heading-skeleton"
162+
class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
163+
>
164+
Maintainers
165+
</h2>
166+
<ul class="space-y-2 list-none m-0 p-0">
167+
<li>
168+
<span class="skeleton inline-block h-5 w-28" />
169+
</li>
170+
<li>
171+
<span class="skeleton inline-block h-5 w-24" />
172+
</li>
173+
</ul>
174+
</section>
78175

79-
<section aria-labelledby="versions-heading-skeleton">
80-
<h2 id="versions-heading-skeleton">
81-
Versions
82-
</h2>
83-
<table>
84-
<thead>
85-
<tr>
86-
<th scope="col">
87-
Version
88-
</th>
89-
<th scope="col">
90-
Published
91-
</th>
92-
</tr>
93-
</thead>
94-
<tbody>
95-
<tr>
96-
<td><span data-skeleton>&nbsp;</span></td>
97-
<td><span data-skeleton>&nbsp;</span></td>
98-
</tr>
99-
<tr>
100-
<td><span data-skeleton>&nbsp;</span></td>
101-
<td><span data-skeleton>&nbsp;</span></td>
102-
</tr>
103-
<tr>
104-
<td><span data-skeleton>&nbsp;</span></td>
105-
<td><span data-skeleton>&nbsp;</span></td>
106-
</tr>
107-
<tr>
108-
<td><span data-skeleton>&nbsp;</span></td>
109-
<td><span data-skeleton>&nbsp;</span></td>
110-
</tr>
111-
<tr>
112-
<td><span data-skeleton>&nbsp;</span></td>
113-
<td><span data-skeleton>&nbsp;</span></td>
114-
</tr>
115-
</tbody>
116-
</table>
117-
</section>
176+
<!-- Keywords -->
177+
<section aria-labelledby="keywords-heading-skeleton">
178+
<h2
179+
id="keywords-heading-skeleton"
180+
class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
181+
>
182+
Keywords
183+
</h2>
184+
<!-- flex flex-wrap gap-1.5 -->
185+
<ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
186+
<li><span class="skeleton inline-block h-6 w-16 rounded" /></li>
187+
<li><span class="skeleton inline-block h-6 w-12 rounded" /></li>
188+
<li><span class="skeleton inline-block h-6 w-20 rounded" /></li>
189+
<li><span class="skeleton inline-block h-6 w-14 rounded" /></li>
190+
<li><span class="skeleton inline-block h-6 w-18 rounded" /></li>
191+
<li><span class="skeleton inline-block h-6 w-10 rounded" /></li>
192+
</ul>
193+
</section>
118194

119-
<section aria-labelledby="dependencies-heading-skeleton">
120-
<h2 id="dependencies-heading-skeleton">
121-
Dependencies
122-
</h2>
123-
<ul>
124-
<li><span data-skeleton>&nbsp;</span></li>
125-
<li><span data-skeleton>&nbsp;</span></li>
126-
<li><span data-skeleton>&nbsp;</span></li>
127-
</ul>
128-
</section>
195+
<!-- Versions -->
196+
<section aria-labelledby="versions-heading-skeleton">
197+
<h2
198+
id="versions-heading-skeleton"
199+
class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
200+
>
201+
Versions
202+
</h2>
203+
<!-- space-y-1, each row: flex items-center justify-between py-1.5 text-sm -->
204+
<div class="space-y-1">
205+
<div class="flex items-center justify-between py-1.5 text-sm">
206+
<span class="skeleton inline-block h-4 w-16" />
207+
<span class="skeleton inline-block h-4 w-24" />
208+
</div>
209+
<div class="flex items-center justify-between py-1.5 text-sm">
210+
<span class="skeleton inline-block h-4 w-14" />
211+
<span class="skeleton inline-block h-4 w-24" />
212+
</div>
213+
<div class="flex items-center justify-between py-1.5 text-sm">
214+
<span class="skeleton inline-block h-4 w-18" />
215+
<span class="skeleton inline-block h-4 w-24" />
216+
</div>
217+
<div class="flex items-center justify-between py-1.5 text-sm">
218+
<span class="skeleton inline-block h-4 w-14" />
219+
<span class="skeleton inline-block h-4 w-24" />
220+
</div>
221+
<div class="flex items-center justify-between py-1.5 text-sm">
222+
<span class="skeleton inline-block h-4 w-16" />
223+
<span class="skeleton inline-block h-4 w-24" />
224+
</div>
225+
</div>
226+
</section>
129227

130-
<section aria-labelledby="readme-heading-skeleton">
131-
<h2 id="readme-heading-skeleton">
132-
Readme
133-
</h2>
134-
<div>
135-
<p><span data-skeleton>&nbsp;</span></p>
136-
<p><span data-skeleton>&nbsp;</span></p>
137-
<p><span data-skeleton>&nbsp;</span></p>
138-
<p><span data-skeleton>&nbsp;</span></p>
139-
</div>
140-
</section>
228+
<!-- Dependencies -->
229+
<section aria-labelledby="dependencies-heading-skeleton">
230+
<h2
231+
id="dependencies-heading-skeleton"
232+
class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
233+
>
234+
Dependencies
235+
</h2>
236+
<!-- space-y-1, each: flex items-center justify-between py-1 text-sm -->
237+
<ul class="space-y-1 list-none m-0 p-0">
238+
<li class="flex items-center justify-between py-1 text-sm">
239+
<span class="skeleton inline-block h-4 w-24" />
240+
<span class="skeleton inline-block h-4 w-12" />
241+
</li>
242+
<li class="flex items-center justify-between py-1 text-sm">
243+
<span class="skeleton inline-block h-4 w-32" />
244+
<span class="skeleton inline-block h-4 w-10" />
245+
</li>
246+
<li class="flex items-center justify-between py-1 text-sm">
247+
<span class="skeleton inline-block h-4 w-20" />
248+
<span class="skeleton inline-block h-4 w-14" />
249+
</li>
250+
<li class="flex items-center justify-between py-1 text-sm">
251+
<span class="skeleton inline-block h-4 w-28" />
252+
<span class="skeleton inline-block h-4 w-12" />
253+
</li>
254+
</ul>
255+
</section>
256+
</aside>
257+
</div>
141258
</article>
142259
</template>

0 commit comments

Comments
 (0)