leaflet.pub
a tool for shared writing and social publishing
added page bg and no card border styling to page link previews
cozylittle.house
+45
-33
+45
-33
components/Blocks/PageLinkBlock.tsx
+45
-33
components/Blocks/PageLinkBlock.tsx
···
11
11
import { useBlocks } from "src/hooks/queries/useBlocks";
12
12
import { Canvas, CanvasBackground, CanvasContent } from "components/Canvas";
13
13
import { CardThemeProvider } from "components/ThemeManager/ThemeProvider";
14
+
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
14
15
15
16
export function PageLinkBlock(props: BlockProps & { preview?: boolean }) {
16
17
let page = useEntity(props.entityID, "block/card");
···
140
141
let previewRef = useRef<HTMLDivElement | null>(null);
141
142
let { rootEntity } = useReplicache();
142
143
144
+
let cardBorderHidden = useCardBorderHidden(props.entityID);
143
145
let rootBackgroundImage = useEntity(
144
146
rootEntity,
145
147
"theme/card-background-image",
···
153
155
"theme/card-background-image-opacity",
154
156
);
155
157
156
-
let cardBackgroundImage =
157
-
useEntity(props.entityID, "theme/card-background-image") ||
158
-
rootBackgroundImage;
159
-
let cardBackgroundImageRepeat =
160
-
useEntity(props.entityID, "theme/card-background-image-repeat") ||
161
-
rootBackgroundRepeat;
162
-
let cardBackgroundImageOpacity =
163
-
useEntity(props.entityID, "theme/card-background-image-opacity")?.data
164
-
.value ||
165
-
rootBackgroundOpacity?.data.value ||
166
-
1;
158
+
let cardBackgroundImage = useEntity(
159
+
props.entityID,
160
+
"theme/card-background-image",
161
+
);
162
+
163
+
let cardBackgroundImageRepeat = useEntity(
164
+
props.entityID,
165
+
"theme/card-background-image-repeat",
166
+
);
167
+
168
+
let cardBackgroundImageOpacity = useEntity(
169
+
props.entityID,
170
+
"theme/card-background-image-opacity",
171
+
);
172
+
173
+
let backgroundImage = cardBackgroundImage || rootBackgroundImage;
174
+
let backgroundImageRepeat = cardBackgroundImage
175
+
? cardBackgroundImageRepeat?.data?.value
176
+
: rootBackgroundRepeat?.data.value;
177
+
let backgroundImageOpacity = cardBackgroundImage
178
+
? cardBackgroundImageOpacity?.data.value
179
+
: rootBackgroundOpacity?.data.value || 1;
180
+
167
181
let pageWidth = `var(--page-width-unitless)`;
168
182
return (
169
183
<div
170
184
ref={previewRef}
171
-
className={`pageLinkBlockPreview w-[120px] overflow-clip mx-3 mt-3 -mb-2 bg-bg-page border rounded-md shrink-0 border-border-light flex flex-col gap-0.5 rotate-[4deg] origin-center`}
185
+
className={`pageLinkBlockPreview w-[120px] overflow-clip mx-3 mt-3 -mb-2 border rounded-md shrink-0 border-border-light flex flex-col gap-0.5 rotate-[4deg] origin-center ${cardBorderHidden ? "" : "bg-bg-page"}`}
172
186
>
173
187
<div
174
188
className="absolute top-0 left-0 origin-top-left pointer-events-none "
···
179
193
backgroundColor: "rgba(var(--bg-page), var(--bg-page-alpha))",
180
194
}}
181
195
>
182
-
<div
183
-
className={`pageLinkBlockBackground
184
-
absolute top-0 left-0 right-0 bottom-0
185
-
pointer-events-none
186
-
`}
187
-
style={{
188
-
backgroundImage: cardBackgroundImage
189
-
? `url(${cardBackgroundImage.data.src}), url(${cardBackgroundImage.data.fallback})`
190
-
: undefined,
191
-
backgroundRepeat: cardBackgroundImageRepeat
192
-
? "repeat"
193
-
: "no-repeat",
194
-
backgroundPosition: "center",
195
-
backgroundSize: !cardBackgroundImageRepeat
196
-
? "cover"
197
-
: cardBackgroundImageRepeat?.data.value,
198
-
opacity: cardBackgroundImage?.data.src
199
-
? cardBackgroundImageOpacity
200
-
: 1,
201
-
}}
202
-
/>
196
+
{!cardBorderHidden && (
197
+
<div
198
+
className={`pageLinkBlockBackground
199
+
absolute top-0 left-0 right-0 bottom-0
200
+
pointer-events-none
201
+
`}
202
+
style={{
203
+
backgroundImage: backgroundImage
204
+
? `url(${backgroundImage.data.src}), url(${backgroundImage.data.fallback})`
205
+
: undefined,
206
+
backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
207
+
backgroundPosition: "center",
208
+
backgroundSize: !backgroundImageRepeat
209
+
? "cover"
210
+
: backgroundImageRepeat,
211
+
opacity: backgroundImage?.data.src ? backgroundImageOpacity : 1,
212
+
}}
213
+
/>
214
+
)}
203
215
{blocks.slice(0, 20).map((b, index, arr) => {
204
216
return (
205
217
<BlockPreview