this repo has no description
Add toggle for preview card
+64
-2
+17
-2
src/pages/sandbox.css
+17
-2
src/pages/sandbox.css
···
68
68
0 8px 32px -4px var(--drop-shadow-color);
69
69
view-transition-name: status;
70
70
71
-
.meta {
71
+
> .container > .meta {
72
72
view-transition-name: status-meta;
73
73
}
74
74
75
-
.avatar {
75
+
> a > .avatar {
76
76
view-transition-name: status-avatar;
77
77
}
78
78
···
94
94
95
95
.actions {
96
96
view-transition-name: status-actions;
97
+
}
98
+
99
+
.card-byline {
100
+
view-transition-name: status-card-byline;
101
+
}
102
+
.card {
103
+
view-transition-name: status-card;
97
104
}
98
105
}
99
106
}
···
213
220
width: 100%;
214
221
height: 100%;
215
222
}
223
+
224
+
::view-transition-old(status-card-byline),
225
+
::view-transition-new(status-card-byline),
226
+
::view-transition-old(status-card),
227
+
::view-transition-new(status-card) {
228
+
width: 100%;
229
+
height: 100%;
230
+
}
+47
src/pages/sandbox.jsx
+47
src/pages/sandbox.jsx
···
38
38
pollCount,
39
39
pollMultiple,
40
40
pollExpired,
41
+
showCard,
41
42
size,
42
43
filters,
43
44
userPreferences,
···
251
252
.filter(Boolean);
252
253
}
253
254
255
+
// Add link preview card if enabled
256
+
if (showCard) {
257
+
base.card = {
258
+
url: 'https://example.com/article',
259
+
title: 'Example Article Title',
260
+
description:
261
+
'This is a sample description for the link preview card that appears under content.',
262
+
type: 'link',
263
+
image: 'https://picsum.photos/seed/card/600/400',
264
+
width: 600,
265
+
height: 400,
266
+
providerName: 'Example Website',
267
+
providerUrl: 'https://example.com',
268
+
authorName: 'John Doe',
269
+
authorUrl: 'https://example.com/author',
270
+
language: 'en',
271
+
publishedAt: new Date().toISOString(),
272
+
authors: [
273
+
{
274
+
account: {
275
+
id: '1',
276
+
username: 'test 2',
277
+
name: 'Test 2',
278
+
avatar: '/logo-192.png',
279
+
acct: 'test2@localhost',
280
+
url: 'https://test2.localhost',
281
+
},
282
+
},
283
+
],
284
+
};
285
+
}
286
+
254
287
console.log('Final base', base);
255
288
return base;
256
289
};
···
269
302
pollCount: '0',
270
303
pollMultiple: false,
271
304
pollExpired: false,
305
+
showCard: false,
272
306
size: 'medium',
273
307
filters: [false, false, false], // hide, blur, warn
274
308
mediaPreference: 'default',
···
342
376
pollCount: toggleState.pollCount,
343
377
pollMultiple: toggleState.pollMultiple,
344
378
pollExpired: toggleState.pollExpired,
379
+
showCard: toggleState.showCard,
345
380
size: toggleState.size,
346
381
filters: toggleState.filters,
347
382
},
···
736
771
/>
737
772
<span>Expired</span>
738
773
</label>
774
+
</label>
775
+
</li>
776
+
<li>
777
+
<label>
778
+
<input
779
+
type="checkbox"
780
+
checked={toggleState.showCard}
781
+
onChange={() =>
782
+
updateToggles({ showCard: !toggleState.showCard })
783
+
}
784
+
/>
785
+
<span>Link preview card</span>
739
786
</label>
740
787
</li>
741
788
</ul>