See the best posts from any Bluesky account
Restyle post cards with Phosphor icons, colored engagement counts, and rank numbers
Use Phosphor Icons (fill + bold weights via CDN) for heart and repeat icons
throughout the app. Color the active engagement metric (red for likes, blue
for reposts) and keep the secondary metric muted. Move rank numbers to the
left as small labels, highlight the #1 post with a subtle background tint,
and format counts with locale-aware comma separators. Update CSP to allow
jsdelivr.net for stylesheets and fonts.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+19
-14
+2
-2
config/shield.ts
+2
-2
config/shield.ts
···
15
15
directives: {
16
16
defaultSrc: [`'self'`],
17
17
scriptSrc: [`'self'`],
18
-
styleSrc: [`'self'`, `'unsafe-inline'`],
18
+
styleSrc: [`'self'`, `'unsafe-inline'`, 'https://cdn.jsdelivr.net'],
19
19
imgSrc: [`'self'`, 'data:', 'https://cdn.bsky.app', 'https://video.bsky.app'],
20
20
connectSrc: [`'self'`],
21
-
fontSrc: [`'self'`],
21
+
fontSrc: [`'self'`, 'https://cdn.jsdelivr.net'],
22
22
objectSrc: [`'none'`],
23
23
baseUri: [`'self'`],
24
24
formAction: [`'self'`],
+3
-3
resources/views/components/layout.edge
+3
-3
resources/views/components/layout.edge
···
4
4
<meta charset="utf-8" />
5
5
<meta name="viewport" content="width=device-width, initial-scale=1" />
6
6
@vite(['resources/css/app.css', 'resources/js/app.js'])
7
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/fill/style.css" />
8
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/bold/style.css" />
7
9
@if($slots.head)
8
10
{{{ await $slots.head() }}}
9
11
@endif
···
23
25
@if(!$props.has('hideHeader'))
24
26
<div class="flex items-center justify-between pt-6 pb-4">
25
27
<a href="/" class="flex items-center gap-1.5 text-gray-900 no-underline hover:opacity-70">
26
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5 text-red-500">
27
-
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
28
-
</svg>
28
+
<i class="ph-fill ph-heart text-red-500 text-lg"></i>
29
29
<span class="font-semibold text-sm">skystar</span>
30
30
</a>
31
31
<form action="/search" method="GET" class="flex gap-1.5">
+14
-9
resources/views/pages/profile/show.edge
+14
-9
resources/views/pages/profile/show.edge
···
57
57
@else
58
58
<ol class="list-none p-0 m-0">
59
59
@each((post, index) in posts)
60
-
<li class="bg-white border border-neutral-200 rounded-lg p-4 mb-3">
61
-
<div class="flex justify-between items-start gap-3">
60
+
<li class="{{ index === 0 ? (kind === 'likes' ? 'bg-red-50/40 border-red-100' : 'bg-blue-50/40 border-blue-100') : 'bg-white border-neutral-200' }} border rounded-lg p-4 mb-3">
61
+
<div class="flex items-start gap-3">
62
+
<div class="text-sm font-semibold text-gray-400 pt-0.5 shrink-0 tabular-nums min-w-4 text-right">{{ index + 1 }}</div>
62
63
<div class="flex-1 min-w-0">
63
64
<p class="mb-3 whitespace-pre-wrap break-words">{{{ post.postTextSafe }}}</p>
64
65
···
166
167
@endif
167
168
@endif
168
169
170
+
<div class="flex items-baseline justify-between flex-wrap gap-4 mt-3">
171
+
<div class="flex items-baseline gap-4">
172
+
@if(kind === 'likes')
173
+
<span class="text-sm text-red-500 tabular-nums"><i class="ph-fill ph-heart"></i> {{ post.likes.toLocaleString() }}</span>
174
+
<span class="text-sm text-gray-400"><i class="ph-bold ph-repeat"></i> {{ post.reposts.toLocaleString() }}</span>
175
+
@else
176
+
<span class="text-sm text-gray-400"><i class="ph-fill ph-heart"></i> {{ post.likes.toLocaleString() }}</span>
177
+
<span class="text-sm text-blue-600 tabular-nums"><i class="ph-bold ph-repeat"></i> {{ post.reposts.toLocaleString() }}</span>
178
+
@endif
179
+
</div>
180
+
<a href="{{ post.bskyUrl }}" target="_blank" rel="noopener" class="text-sm text-gray-400 hover:underline">{{ post.postCreatedAt.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) }}</a>
169
181
</div>
170
-
<div class="text-xl font-bold text-gray-300 shrink-0">{{ index + 1 }}</div>
171
-
</div>
172
-
<div class="text-sm text-gray-400 flex justify-between flex-wrap gap-4 mt-3">
173
-
<div class="flex gap-4">
174
-
<span>♥ {{ post.likes }} likes</span>
175
-
<span>♻ {{ post.reposts }} reposts</span>
176
182
</div>
177
-
<a href="{{ post.bskyUrl }}" target="_blank" rel="noopener" class="text-gray-400 hover:underline">{{ post.postCreatedAt.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) }}</a>
178
183
</div>
179
184
</li>
180
185
@endeach