experimental bluesky client
Style feed
+69
-4
+2
-1
.gitignore
+2
-1
.gitignore
+60
package-lock.json
+60
package-lock.json
···
8
8
"dependencies": {
9
9
"@atproto/api": "^0.19.8",
10
10
"@atproto/oauth-client-node": "^0.3.17",
11
+
"@playwright/test": "^1.59.1",
11
12
"@tailwindcss/vite": "^4.1.18",
12
13
"@tanstack/react-devtools": "latest",
13
14
"@tanstack/react-router": "latest",
···
1360
1361
"license": "MIT",
1361
1362
"engines": {
1362
1363
"node": ">=20.0"
1364
+
}
1365
+
},
1366
+
"node_modules/@playwright/test": {
1367
+
"version": "1.59.1",
1368
+
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
1369
+
"integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
1370
+
"license": "Apache-2.0",
1371
+
"dependencies": {
1372
+
"playwright": "1.59.1"
1373
+
},
1374
+
"bin": {
1375
+
"playwright": "cli.js"
1376
+
},
1377
+
"engines": {
1378
+
"node": ">=18"
1363
1379
}
1364
1380
},
1365
1381
"node_modules/@rolldown/pluginutils": {
···
4966
4982
},
4967
4983
"funding": {
4968
4984
"url": "https://github.com/sponsors/jonschlinkert"
4985
+
}
4986
+
},
4987
+
"node_modules/playwright": {
4988
+
"version": "1.59.1",
4989
+
"resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
4990
+
"integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
4991
+
"license": "Apache-2.0",
4992
+
"dependencies": {
4993
+
"playwright-core": "1.59.1"
4994
+
},
4995
+
"bin": {
4996
+
"playwright": "cli.js"
4997
+
},
4998
+
"engines": {
4999
+
"node": ">=18"
5000
+
},
5001
+
"optionalDependencies": {
5002
+
"fsevents": "2.3.2"
5003
+
}
5004
+
},
5005
+
"node_modules/playwright-core": {
5006
+
"version": "1.59.1",
5007
+
"resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
5008
+
"integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
5009
+
"license": "Apache-2.0",
5010
+
"bin": {
5011
+
"playwright-core": "cli.js"
5012
+
},
5013
+
"engines": {
5014
+
"node": ">=18"
5015
+
}
5016
+
},
5017
+
"node_modules/playwright/node_modules/fsevents": {
5018
+
"version": "2.3.2",
5019
+
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
5020
+
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
5021
+
"hasInstallScript": true,
5022
+
"license": "MIT",
5023
+
"optional": true,
5024
+
"os": [
5025
+
"darwin"
5026
+
],
5027
+
"engines": {
5028
+
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
4969
5029
}
4970
5030
},
4971
5031
"node_modules/postcss": {
+1
package.json
+1
package.json
+6
-3
src/routes/feed.tsx
+6
-3
src/routes/feed.tsx
···
23
23
displayName: item.post.author.displayName ?? null,
24
24
avatar: item.post.author.avatar ?? null,
25
25
},
26
+
createdAt: (item.post.record as { createdAt?: string }).createdAt,
26
27
})),
27
28
}
28
29
})
···
36
37
const { feed } = Route.useLoaderData()
37
38
38
39
return (
39
-
<div className="max-w-2xl mx-auto py-8 px-4 space-y-4">
40
+
<div className="bg-[--bg-base] max-w-2xl mx-auto py-8 px-4 space-y-4">
40
41
{feed.map((item) => (
41
-
<article key={item.uri} className="border rounded-lg p-4 space-y-2">
42
+
<article key={item.uri} className="island-shell p-4 space-y-2">
42
43
<div className="flex items-center gap-2">
43
44
{item.author.avatar && (
44
45
<img src={item.author.avatar} alt="" className="w-8 h-8 rounded-full" />
45
46
)}
46
47
<div>
47
48
<span className="font-semibold">{item.author.displayName ?? item.author.handle}</span>
48
-
<span className="text-sm text-gray-500 ml-1">@{item.author.handle}</span>
49
+
<span className="text-sm text-[--sea-ink-soft] mx-1">@{item.author.handle}</span>
50
+
||
51
+
<span className="text-sm text-[--sea-ink-soft] ml-1">{item.createdAt}</span>
49
52
</div>
50
53
</div>
51
54
<p className="whitespace-pre-wrap">{item.text}</p>