zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

[Embeds] Format big numbers (#5087)

zio/stable
Samuel Newman 2024-09-02 21:04:26 +01:00 committed by GitHub
parent f3f7dfc3e6
commit 0469ca6cb4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bskyembed/package.json
View File

@ -22,7 +22,7 @@
"eslint-plugin-simple-import-sort": "^12.0.0", "eslint-plugin-simple-import-sort": "^12.0.0",
"postcss": "^8.4.38", "postcss": "^8.4.38",
"tailwindcss": "^3.4.3", "tailwindcss": "^3.4.3",
"typescript": "^4.0.5", "typescript": "^5.5.4",
"vite": "^5.2.8", "vite": "^5.2.8",
"vite-tsconfig-paths": "^4.3.2" "vite-tsconfig-paths": "^4.3.2"
} }

8
bskyembed/src/components/post.tsx
View File

@ -11,7 +11,7 @@ import likeIcon from '../../assets/heart2_filled_stroke2_corner0_rounded.svg'
import logo from '../../assets/logo.svg' import logo from '../../assets/logo.svg'
import repostIcon from '../../assets/repost_stroke2_corner2_rounded.svg' import repostIcon from '../../assets/repost_stroke2_corner2_rounded.svg'
import {CONTENT_LABELS} from '../labels' import {CONTENT_LABELS} from '../labels'
import {getRkey, niceDate} from '../utils' import {getRkey, niceDate, prettyNumber} from '../utils'
import {Container} from './container' import {Container} from './container'
import {Embed} from './embed' import {Embed} from './embed'
import {Link} from './link' import {Link} from './link'
@ -78,7 +78,7 @@ export function Post({thread}: Props) {
<div className="flex items-center gap-2 cursor-pointer"> <div className="flex items-center gap-2 cursor-pointer">
<img src={likeIcon} className="w-5 h-5" /> <img src={likeIcon} className="w-5 h-5" />
<p className="font-bold text-neutral-500 mb-px"> <p className="font-bold text-neutral-500 mb-px">
{post.likeCount} {prettyNumber(post.likeCount)}
</p> </p>
</div> </div>
)} )}
@ -86,7 +86,7 @@ export function Post({thread}: Props) {
<div className="flex items-center gap-2 cursor-pointer"> <div className="flex items-center gap-2 cursor-pointer">
<img src={repostIcon} className="w-5 h-5" /> <img src={repostIcon} className="w-5 h-5" />
<p className="font-bold text-neutral-500 mb-px"> <p className="font-bold text-neutral-500 mb-px">
{post.repostCount} {prettyNumber(post.repostCount)}
</p> </p>
</div> </div>
)} )}
@ -97,7 +97,7 @@ export function Post({thread}: Props) {
<div className="flex-1" /> <div className="flex-1" />
<p className="cursor-pointer text-brand font-bold hover:underline hidden min-[450px]:inline"> <p className="cursor-pointer text-brand font-bold hover:underline hidden min-[450px]:inline">
{post.replyCount {post.replyCount
? `Read ${post.replyCount} ${ ? `Read ${prettyNumber(post.replyCount)} ${
post.replyCount > 1 ? 'replies' : 'reply' post.replyCount > 1 ? 'replies' : 'reply'
} on Bluesky` } on Bluesky`
: `View on Bluesky`} : `View on Bluesky`}

10
bskyembed/src/utils.ts
View File

@ -16,3 +16,13 @@ export function getRkey({uri}: {uri: string}): string {
const at = new AtUri(uri) const at = new AtUri(uri)
return at.rkey return at.rkey
} }
const formatter = new Intl.NumberFormat('en-US', {
notation: 'compact',
maximumFractionDigits: 1,
roundingMode: 'trunc',
})
export function prettyNumber(number: number) {
return formatter.format(number)
}

2
bskyembed/tsconfig.json
View File

@ -20,5 +20,5 @@
"jsxFragmentFactory": "Fragment", "jsxFragmentFactory": "Fragment",
"downlevelIteration": true "downlevelIteration": true
}, },
"include": ["src"] "include": ["src", "vite.config.ts"]
} }

2
bskyembed/tsconfig.snippet.json
View File

@ -6,5 +6,5 @@
"strict": true, "strict": true,
"outDir": "dist" "outDir": "dist"
}, },
"include": ["snippet"], "include": ["snippet"]
} }

8
bskyembed/yarn.lock
View File

@ -4024,10 +4024,10 @@ typed-array-length@^1.0.6:
is-typed-array "^1.1.13" is-typed-array "^1.1.13"
possible-typed-array-names "^1.0.0" possible-typed-array-names "^1.0.0"
typescript@^4.0.5: typescript@^5.5.4:
version "4.9.5" version "5.5.4"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
uint8arrays@3.0.0: uint8arrays@3.0.0:
version "3.0.0" version "3.0.0"