this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Add toggle for preview card

+64 -2
+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
··· 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>