6 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/profile/[handle]/post/[rkey]/page.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | import { AppBskyFeedDefs, AppBskyFeedPost, RichText } from "@atproto/api";
3 | import { agent } from "~/lib/api";
4 |
5 | interface Props {
6 | params: {
7 | handle: string;
8 | rkey: string;
9 | };
10 | }
11 |
12 | export default async function PostView({ params }: Props) {
13 | const uri = `at://${decodeURIComponent(params.handle)}/app.bsky.feed.post/${
14 | params.rkey
15 | }`;
16 |
17 | const thread = await agent.app.bsky.feed.getPostThread({ uri });
18 |
19 | if (!AppBskyFeedDefs.isThreadViewPost(thread.data.thread))
20 | throw new Error("Expected a thread view post");
21 |
22 | const post = thread.data.thread.post;
23 |
24 | if (!AppBskyFeedPost.isRecord(post.record))
25 | throw new Error("Expected a post with a record");
26 |
27 | return (
28 | Bluesky Viewer
7 |
29 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/lib/api.ts:
--------------------------------------------------------------------------------
1 | import { BskyAgent } from "@atproto/api";
2 |
3 | export const agent = new BskyAgent({
4 | // This is the AppView URL
5 | service: "https://api.bsky.app",
6 | // If you were making an authenticated client, you would
7 | // use the PDS URL here instead - the main one is bsky.social
8 | // service: "https://bsky.social",
9 | });
10 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from 'tailwindcss'
2 |
3 | const config: Config = {
4 | content: [
5 | './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
6 | './src/components/**/*.{js,ts,jsx,tsx,mdx}',
7 | './src/app/**/*.{js,ts,jsx,tsx,mdx}',
8 | ],
9 | theme: {
10 | extend: {
11 | backgroundImage: {
12 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
13 | 'gradient-conic':
14 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
15 | },
16 | },
17 | },
18 | plugins: [],
19 | }
20 | export default config
21 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "~/*": ["./src/*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
30 |
45 |
31 | 
36 |
41 |
37 |
40 | {post.author.displayName}
38 |@{post.author.handle}
39 |
42 |
44 | {post.record.text}
43 |