a tool for shared writing and social publishing
tweak homepage preview block rendering so link and card blocks have a gradient
+22
-7
+22
-7
components/Blocks/CardBlock.tsx
+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} />;