See the best posts from any Bluesky account
Grey out engagement counts for logged-out users with tippy tooltips
Replaces the kind-specific red/blue count highlight with a uniform grey
for unauthenticated viewers, and adds "Sign in to like/repost" hover
tooltips via tippy.js.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+23
-8
+2
-1
package.json
+2
-1
package.json
+15
pnpm-lock.yaml
+15
pnpm-lock.yaml
···
83
83
tailwindcss:
84
84
specifier: ^4.2.2
85
85
version: 4.2.2
86
+
tippy.js:
87
+
specifier: ^6.3.7
88
+
version: 6.3.7
86
89
devDependencies:
87
90
'@adonisjs/assembler':
88
91
specifier: ^8.3.0
···
1580
1583
'@pkgr/core@0.2.9':
1581
1584
resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
1582
1585
engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
1586
+
1587
+
'@popperjs/core@2.11.8':
1588
+
resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
1583
1589
1584
1590
'@poppinss/cliui@6.8.1':
1585
1591
resolution: {integrity: sha512-o/ssbwr+r6woG65rk9eFHnn9dVUphZr/Rk+4+05ENVMBWYpYhTJGdE9RobTG5JLFubvO4gWIyFeNlC+I4EM6eA==}
···
4217
4223
resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
4218
4224
engines: {node: '>=12.0.0'}
4219
4225
4226
+
tippy.js@6.3.7:
4227
+
resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
4228
+
4220
4229
tlds@1.261.0:
4221
4230
resolution: {integrity: sha512-QXqwfEl9ddlGBaRFXIvNKK6OhipSiLXuRuLJX5DErz0o0Q0rYxulWLdFryTkV5PkdZct5iMInwYEGe/eR++1AA==}
4222
4231
hasBin: true
···
6134
6143
'@pinojs/redact@0.4.0': {}
6135
6144
6136
6145
'@pkgr/core@0.2.9': {}
6146
+
6147
+
'@popperjs/core@2.11.8': {}
6137
6148
6138
6149
'@poppinss/cliui@6.8.1':
6139
6150
dependencies:
···
8573
8584
dependencies:
8574
8585
fdir: 6.5.0(picomatch@4.0.4)
8575
8586
picomatch: 4.0.4
8587
+
8588
+
tippy.js@6.3.7:
8589
+
dependencies:
8590
+
'@popperjs/core': 2.11.8
8576
8591
8577
8592
tlds@1.261.0: {}
8578
8593
+4
resources/js/app.js
+4
resources/js/app.js
···
1
1
import posthog from 'posthog-js'
2
2
import Alpine from '@alpinejs/csp'
3
+
import tippy from 'tippy.js'
4
+
import 'tippy.js/dist/tippy.css'
3
5
import { createBackfillProgress } from './backfill_progress.ts'
4
6
import { createSearchAhead } from './search_ahead.ts'
5
7
···
289
291
})
290
292
291
293
Alpine.start()
294
+
295
+
tippy('[data-tippy-content]')
+2
-7
resources/views/pages/profile/show.edge
+2
-7
resources/views/pages/profile/show.edge
···
234
234
</div>
235
235
@else
236
236
<div class="flex items-baseline gap-4">
237
-
@if(kind === 'likes')
238
-
<span class="text-sm text-red-500 tabular-nums"><i class="ph-fill ph-heart"></i> {{ post.likes.toLocaleString() }}</span>
239
-
<span class="text-sm text-gray-400"><i class="ph-bold ph-repeat"></i> {{ post.reposts.toLocaleString() }}</span>
240
-
@else
241
-
<span class="text-sm text-gray-400"><i class="ph-fill ph-heart"></i> {{ post.likes.toLocaleString() }}</span>
242
-
<span class="text-sm text-blue-600 tabular-nums"><i class="ph-bold ph-repeat"></i> {{ post.reposts.toLocaleString() }}</span>
243
-
@endif
237
+
<span class="text-sm text-gray-400 tabular-nums" data-tippy-content="Sign in to like"><i class="ph-fill ph-heart"></i> {{ post.likes.toLocaleString() }}</span>
238
+
<span class="text-sm text-gray-400 tabular-nums" data-tippy-content="Sign in to repost"><i class="ph-bold ph-repeat"></i> {{ post.reposts.toLocaleString() }}</span>
244
239
</div>
245
240
@endif
246
241
<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>