a tool for shared writing and social publishing

added page bg and no card border styling to page link previews

+45 -33
+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