Skip to content

Instantly share code, notes, and snippets.

@wesbos

wesbos/Bluesky.tsx

Created November 5, 2024 17:05
Show Gist options
  • Save wesbos/78148bbf9ee1e378c5554dc2885d2c8d to your computer and use it in GitHub Desktop.
Save wesbos/78148bbf9ee1e378c5554dc2885d2c8d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. wesbos created this gist Nov 5, 2024.
    34 changes: 34 additions & 0 deletions Bluesky.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    export async function BlueSkyPost() {
    const url = new URL('https://bsky.app/profile/danabra.mov/post/3la62zxt4rs2j');
    const details = url.pathname.split('/').filter(Boolean).reduce((acc, part, index, pathParts) => {
    if (index % 2 === 0 && pathParts[index + 1]) {
    acc[part] = pathParts[index + 1];
    }
    return acc;
    }, {} as Record<'post' | 'profile' | string, string>);
    const endpoint = new URL('https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread');
    const params = new URLSearchParams();
    params.append('uri', `at://${details.profile}/app.bsky.feed.post/${details.post}`);
    endpoint.search = params.toString();
    const response = await fetch(endpoint).then((res) => res.json());
    const { post } = response.thread;
    const date = new Date(post.indexedAt);
    return (
    <div>
    <a href={url.toString()}>
    <img style={{ height: 50, aspectRatio: 1 }} src={post.author.avatar} alt={post.author.handle} />
    </a>
    <p>{post.record.text}</p>
    <div className="counts">
    <span className="reply">💬 {post.replyCount}</span>
    <span className="repost">🔁 {post.repostCount}</span>
    <span className="like">💙 {post.likeCount}</span>
    </div>
    <div className="meta">
    <time dateTime={post.indexedAt}>
    {date.toDateString()} at {date.getHours()}:{date.getMinutes()} {date.getHours() > 12 ? 'PM' : 'AM'}
    </time>
    </div>
    </div>
    );
    }