my fork of the bluesky client

[Embeds] Format big numbers (#5087)

authored by samuel.fm and committed by

GitHub 0469ca6c f3f7dfc3

+21 -11
+1 -1
bskyembed/package.json
··· 22 22 "eslint-plugin-simple-import-sort": "^12.0.0", 23 23 "postcss": "^8.4.38", 24 24 "tailwindcss": "^3.4.3", 25 - "typescript": "^4.0.5", 25 + "typescript": "^5.5.4", 26 26 "vite": "^5.2.8", 27 27 "vite-tsconfig-paths": "^4.3.2" 28 28 }
+4 -4
bskyembed/src/components/post.tsx
··· 11 11 import logo from '../../assets/logo.svg' 12 12 import repostIcon from '../../assets/repost_stroke2_corner2_rounded.svg' 13 13 import {CONTENT_LABELS} from '../labels' 14 - import {getRkey, niceDate} from '../utils' 14 + import {getRkey, niceDate, prettyNumber} from '../utils' 15 15 import {Container} from './container' 16 16 import {Embed} from './embed' 17 17 import {Link} from './link' ··· 78 78 <div className="flex items-center gap-2 cursor-pointer"> 79 79 <img src={likeIcon} className="w-5 h-5" /> 80 80 <p className="font-bold text-neutral-500 mb-px"> 81 - {post.likeCount} 81 + {prettyNumber(post.likeCount)} 82 82 </p> 83 83 </div> 84 84 )} ··· 86 86 <div className="flex items-center gap-2 cursor-pointer"> 87 87 <img src={repostIcon} className="w-5 h-5" /> 88 88 <p className="font-bold text-neutral-500 mb-px"> 89 - {post.repostCount} 89 + {prettyNumber(post.repostCount)} 90 90 </p> 91 91 </div> 92 92 )} ··· 97 97 <div className="flex-1" /> 98 98 <p className="cursor-pointer text-brand font-bold hover:underline hidden min-[450px]:inline"> 99 99 {post.replyCount 100 - ? `Read ${post.replyCount} ${ 100 + ? `Read ${prettyNumber(post.replyCount)} ${ 101 101 post.replyCount > 1 ? 'replies' : 'reply' 102 102 } on Bluesky` 103 103 : `View on Bluesky`}
+10
bskyembed/src/utils.ts
··· 16 16 const at = new AtUri(uri) 17 17 return at.rkey 18 18 } 19 + 20 + const formatter = new Intl.NumberFormat('en-US', { 21 + notation: 'compact', 22 + maximumFractionDigits: 1, 23 + roundingMode: 'trunc', 24 + }) 25 + 26 + export function prettyNumber(number: number) { 27 + return formatter.format(number) 28 + }
+1 -1
bskyembed/tsconfig.json
··· 20 20 "jsxFragmentFactory": "Fragment", 21 21 "downlevelIteration": true 22 22 }, 23 - "include": ["src"] 23 + "include": ["src", "vite.config.ts"] 24 24 }
+1 -1
bskyembed/tsconfig.snippet.json
··· 6 6 "strict": true, 7 7 "outDir": "dist" 8 8 }, 9 - "include": ["snippet"], 9 + "include": ["snippet"] 10 10 }
+4 -4
bskyembed/yarn.lock
··· 4024 4024 is-typed-array "^1.1.13" 4025 4025 possible-typed-array-names "^1.0.0" 4026 4026 4027 - typescript@^4.0.5: 4028 - version "4.9.5" 4029 - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" 4030 - integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== 4027 + typescript@^5.5.4: 4028 + version "5.5.4" 4029 + resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba" 4030 + integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q== 4031 4031 4032 4032 uint8arrays@3.0.0: 4033 4033 version "3.0.0"