An ATproto social media client -- with an independent Appview.
[Embed] Fix up post embeds, and other tweaks (#8185)
* fix eslint
* Update .eslintrc.cjs
* fix 3 and 4 image aspect ratios
* round embeds more
* fix line height
authored by
Samuel Newman
and committed by
GitHub
d899d09e
2e73464f
+36
-35
-21
bskyembed/.eslintrc
-21
bskyembed/.eslintrc
···
1
-
{
2
-
"root": true,
3
-
"parser": "@typescript-eslint/parser",
4
-
"plugins": ["@typescript-eslint", "simple-import-sort"],
5
-
"extends": [
6
-
"eslint:recommended",
7
-
"preact",
8
-
"plugin:@typescript-eslint/recommended",
9
-
"plugin:@typescript-eslint/recommended-requiring-type-checking"
10
-
],
11
-
"rules": {
12
-
"simple-import-sort/imports": "warn",
13
-
"simple-import-sort/exports": "warn",
14
-
'no-else-return': 'off'
15
-
},
16
-
"parserOptions": {
17
-
"sourceType": "module",
18
-
"ecmaVersion": "latest",
19
-
"project": "./bskyembed/tsconfig.json"
20
-
}
21
-
}
+22
bskyembed/.eslintrc.cjs
+22
bskyembed/.eslintrc.cjs
···
1
+
module.exports = {
2
+
root: true,
3
+
parser: '@typescript-eslint/parser',
4
+
plugins: ['@typescript-eslint', 'simple-import-sort'],
5
+
extends: [
6
+
'eslint:recommended',
7
+
'preact',
8
+
'plugin:@typescript-eslint/recommended',
9
+
'plugin:@typescript-eslint/recommended-requiring-type-checking',
10
+
],
11
+
rules: {
12
+
'simple-import-sort/imports': 'warn',
13
+
'simple-import-sort/exports': 'warn',
14
+
'no-else-return': 'off',
15
+
},
16
+
parserOptions: {
17
+
sourceType: 'module',
18
+
ecmaVersion: 'latest',
19
+
project: ['./tsconfig.json'],
20
+
tsconfigRootDir: __dirname,
21
+
},
22
+
}
+13
-13
bskyembed/src/components/embed.tsx
+13
-13
bskyembed/src/components/embed.tsx
···
78
78
return (
79
79
<Link
80
80
href={`/profile/${record.author.did}/post/${getRkey(record)}`}
81
-
className="transition-colors hover:bg-neutral-100 dark:hover:bg-slate-700 border dark:border-slate-600 rounded-lg p-2 gap-1.5 w-full flex flex-col">
81
+
className="transition-colors hover:bg-neutral-100 dark:hover:bg-slate-700 border dark:border-slate-600 rounded-xl p-2 gap-1.5 w-full flex flex-col">
82
82
<div className="flex gap-1.5 items-center">
83
83
<div className="w-4 h-4 overflow-hidden rounded-full bg-neutral-300 dark:bg-slate-700 shrink-0">
84
84
<img
···
207
207
208
208
function Info({children}: {children: ComponentChildren}) {
209
209
return (
210
-
<div className="w-full rounded-lg border py-2 px-2.5 flex-row flex gap-2 bg-neutral-50">
210
+
<div className="w-full rounded-xl border py-2 px-2.5 flex-row flex gap-2 bg-neutral-50">
211
211
<img src={infoIcon} className="w-4 h-4 shrink-0 mt-0.5" />
212
212
<p className="text-sm text-textLight dark:text-textDimmed">{children}</p>
213
213
</div>
···
231
231
<img
232
232
src={content.images[0].thumb}
233
233
alt={content.images[0].alt}
234
-
className="w-full rounded-lg overflow-hidden object-cover h-auto max-h-[1000px]"
234
+
className="w-full rounded-xl overflow-hidden object-cover h-auto max-h-[1000px]"
235
235
/>
236
236
)
237
237
case 2:
238
238
return (
239
-
<div className="flex gap-1 rounded-lg overflow-hidden w-full aspect-[2/1]">
239
+
<div className="flex gap-1 rounded-xl overflow-hidden w-full aspect-[2/1]">
240
240
{content.images.map((image, i) => (
241
241
<img
242
242
key={i}
···
249
249
)
250
250
case 3:
251
251
return (
252
-
<div className="flex gap-1 rounded-lg overflow-hidden w-full aspect-[2/1]">
252
+
<div className="flex gap-1 rounded-xl overflow-hidden w-full aspect-[2/1]">
253
253
<img
254
254
src={content.images[0].thumb}
255
255
alt={content.images[0].alt}
256
-
className="flex-[3] object-cover rounded-sm"
256
+
className="flex-1 aspect-square object-cover rounded-sm"
257
257
/>
258
-
<div className="flex flex-col gap-1 flex-[2]">
258
+
<div className="flex flex-col gap-1 flex-1 aspect-square">
259
259
{content.images.slice(1).map((image, i) => (
260
260
<img
261
261
key={i}
···
269
269
)
270
270
case 4:
271
271
return (
272
-
<div className="grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
272
+
<div className="grid grid-cols-2 gap-1 rounded-xl overflow-hidden">
273
273
{content.images.map((image, i) => (
274
274
<img
275
275
key={i}
276
276
src={image.thumb}
277
277
alt={image.alt}
278
-
className="aspect-square w-full object-cover rounded-sm"
278
+
className="aspect-video w-full object-cover rounded-sm"
279
279
/>
280
280
))}
281
281
</div>
···
308
308
return (
309
309
<Link
310
310
href={content.external.uri}
311
-
className="w-full rounded-lg overflow-hidden border dark:border-slate-600 flex flex-col items-stretch"
311
+
className="w-full rounded-xl overflow-hidden border dark:border-slate-600 flex flex-col items-stretch"
312
312
disableTracking>
313
313
{content.external.thumb && (
314
314
<img
···
345
345
return (
346
346
<Link
347
347
href={href}
348
-
className="w-full rounded-lg border dark:border-slate-600 py-2 px-3 flex flex-col gap-2">
348
+
className="w-full rounded-xl border dark:border-slate-600 py-2 px-3 flex flex-col gap-2">
349
349
<div className="flex gap-2.5 items-center">
350
350
{image ? (
351
351
<img
···
383
383
384
384
return (
385
385
<div
386
-
className="w-full overflow-hidden rounded-lg aspect-square relative"
386
+
className="w-full overflow-hidden rounded-xl aspect-square relative"
387
387
style={{aspectRatio: `${aspectRatio} / 1`}}>
388
388
<img
389
389
src={content.thumbnail}
···
412
412
return (
413
413
<Link
414
414
href={starterPackHref}
415
-
className="w-full rounded-lg overflow-hidden border dark:border-slate-600 flex flex-col items-stretch">
415
+
className="w-full rounded-xl overflow-hidden border dark:border-slate-600 flex flex-col items-stretch">
416
416
<img src={imageUri} className="aspect-[1.91/1] object-cover" />
417
417
<div className="py-3 px-4">
418
418
<div className="flex space-x-2 items-center">
+1
-1
bskyembed/src/components/post.tsx
+1
-1
bskyembed/src/components/post.tsx