a tool for shared writing and social publishing
0
fork

Configure Feed

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

tweak homepage preview block rendering so link and card blocks have a gradient

+22 -7
+22 -7
components/Blocks/CardBlock.tsx
··· 20 20 let isSelected = useUIState( 21 21 (s) => 22 22 (props.type !== "text" || s.selectedBlock.length > 1) && 23 - s.selectedBlock.find((b) => b.value === props.entityID), 23 + s.selectedBlock.find((b) => b.value === props.entityID) 24 24 ); 25 25 let isOpen = useUIState((s) => s.openCards).includes(cardEntity); 26 26 ··· 215 215 b: Block & { 216 216 previewRef: React.RefObject<HTMLDivElement>; 217 217 size?: "small" | "large"; 218 - }, 218 + } 219 219 ) { 220 220 let headingLevel = useEntity(b.value, "block/heading-level")?.data.value; 221 221 let ref = useRef<HTMLDivElement | null>(null); ··· 232 232 } 233 233 }); 234 234 }, 235 - { threshold: 0.1, root: b.previewRef.current }, 235 + { threshold: 0.1, root: b.previewRef.current } 236 236 ); 237 237 observer.observe(ref.current); 238 238 return () => observer.disconnect(); ··· 280 280 </div> 281 281 ); 282 282 } 283 + case "heading": 284 + return <HeadingPreviewBlock entityID={props.value} size={props.size} />; 285 + // currently "link" and "card" render an identical preview 283 286 case "link": { 284 287 return ( 285 - <div className="w-full h-5 shrink-0 rounded-md border border-border-light" /> 288 + <div 289 + // gradiend with 'primary' and 'tertiary' text colors as defined in tailwind config 290 + style={{ 291 + backgroundImage: 292 + "linear-gradient(355deg, color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-card)) 55%), rgb(var(--bg-card)))", 293 + }} 294 + className="w-full h-5 shrink-0 rounded-md border border-border-light" 295 + /> 286 296 ); 287 297 } 288 - case "heading": 289 - return <HeadingPreviewBlock entityID={props.value} size={props.size} />; 290 298 case "card": 291 299 return ( 292 - <div className="w-full h-5 shrink-0 rounded-md border border-border-light" /> 300 + <div 301 + // gradiend with 'primary' and 'tertiary' text colors as defined in tailwind config 302 + style={{ 303 + backgroundImage: 304 + "linear-gradient(355deg, color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-card)) 55%), rgb(var(--bg-card)))", 305 + }} 306 + className="w-full h-5 shrink-0 rounded-md border border-border-light" 307 + /> 293 308 ); 294 309 case "image": 295 310 return <ImagePreviewBlock entityID={props.value} />;