a tool for shared writing and social publishing
home previews to reflect cardborderhidden and metadata
+126
-29
+54
-6
app/home/LeafletPreview.tsx
+54
-6
app/home/LeafletPreview.tsx
···
24
24
import { useRouter } from "next/navigation";
25
25
import Link from "next/link";
26
26
import { TemplateSmall } from "components/Icons/TemplateSmall";
27
+
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
28
+
import {
29
+
PublicationMetadata,
30
+
PublicationMetadataPreview,
31
+
} from "components/Pages/PublicationMetadata";
27
32
28
33
export const LeafletPreview = (props: {
29
34
index: number;
···
40
45
props.leaflet_id;
41
46
let firstPage = useEntity(root, "root/page")[0];
42
47
let page = firstPage?.data.value || root;
43
-
let router = useRouter();
48
+
49
+
let cardBorderHidden = useCardBorderHidden(root);
50
+
let rootBackgroundImage = useEntity(root, "theme/card-background-image");
51
+
let rootBackgroundRepeat = useEntity(
52
+
root,
53
+
"theme/card-background-image-repeat",
54
+
);
55
+
let rootBackgroundOpacity = useEntity(
56
+
root,
57
+
"theme/card-background-image-opacity",
58
+
);
59
+
60
+
// let cardBackgroundImage =
61
+
// useEntity(props.entityID, "theme/card-background-image") ||
62
+
// rootBackgroundImage;
63
+
// let cardBackgroundImageRepeat =
64
+
// useEntity(props.entityID, "theme/card-background-image-repeat") ||
65
+
// rootBackgroundRepeat;
66
+
// let cardBackgroundImageOpacity =
67
+
// useEntity(props.entityID, "theme/card-background-image-opacity")?.data
68
+
// .value ||
69
+
// rootBackgroundOpacity?.data.value ||
70
+
// 1;
44
71
45
72
return (
46
73
<div className="relative max-h-40 h-40">
···
51
78
<ThemeBackgroundProvider entityID={root}>
52
79
<div className="leafletPreview grow shrink-0 h-full w-full px-2 pt-2 sm:px-3 sm:pt-3 flex items-end pointer-events-none">
53
80
<div
54
-
className="leafletContentWrapper h-full sm:w-48 w-40 mx-auto border border-border-light border-b-0 rounded-t-md overflow-clip"
55
-
style={{
56
-
backgroundColor:
57
-
"rgba(var(--bg-page), var(--bg-page-alpha))",
58
-
}}
81
+
className={`leafletContentWrapper h-full sm:w-48 w-40 mx-auto overflow-clip ${!cardBorderHidden && "border border-border-light border-b-0 rounded-t-md"}`}
82
+
style={
83
+
cardBorderHidden
84
+
? {}
85
+
: {
86
+
backgroundImage: rootBackgroundImage
87
+
? `url(${rootBackgroundImage.data.src}), url(${rootBackgroundImage.data.fallback})`
88
+
: undefined,
89
+
backgroundRepeat: rootBackgroundRepeat
90
+
? "repeat"
91
+
: "no-repeat",
92
+
backgroundPosition: "center",
93
+
backgroundSize: !rootBackgroundRepeat
94
+
? "cover"
95
+
: rootBackgroundRepeat?.data.value / 3,
96
+
opacity:
97
+
rootBackgroundImage?.data.src &&
98
+
rootBackgroundOpacity
99
+
? rootBackgroundOpacity.data.value
100
+
: 1,
101
+
backgroundColor:
102
+
"rgba(var(--bg-page), var(--bg-page-alpha))",
103
+
}
104
+
}
59
105
>
60
106
<LeafletContent entityID={page} index={props.index} />
61
107
</div>
···
131
177
width: `var(--page-width-units)`,
132
178
}}
133
179
>
180
+
<PublicationMetadataPreview />
181
+
134
182
{isVisible &&
135
183
blocks.slice(0, 10).map((b, index, arr) => {
136
184
return (
+44
-2
components/Pages/PublicationMetadata.tsx
+44
-2
components/Pages/PublicationMetadata.tsx
···
18
18
cardBorderHidden: boolean;
19
19
}) => {
20
20
let { permission_token } = useReplicache();
21
-
let { identity } = useIdentityData();
22
21
let { data: publicationData, mutate } = useLeafletPublicationData();
23
22
let pub = publicationData?.[0];
24
23
let [titleState, setTitleState] = useState(pub?.title || "");
···
111
110
);
112
111
};
113
112
114
-
const Title = () => {};
113
+
export const PublicationMetadataPreview = () => {
114
+
let { data: publicationData } = useLeafletPublicationData();
115
+
let pub = publicationData?.[0];
116
+
let record = pub?.documents?.data as PubLeafletDocument.Record | null;
117
+
let publishedAt = record?.publishedAt;
118
+
119
+
if (!pub || !pub.publications) return null;
120
+
121
+
return (
122
+
<div className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-5 sm:pt-3 pt-2`}>
123
+
<div className="text-accent-contrast font-bold hover:no-underline">
124
+
{pub.publications?.name}
125
+
</div>
126
+
127
+
<div
128
+
className={`text-xl font-bold outline-none bg-transparent ${!pub.title && "text-tertiary italic"}`}
129
+
>
130
+
{pub.title ? pub.title : "Untitled"}
131
+
</div>
132
+
<div className="italic text-secondary outline-none bg-transparent">
133
+
{pub.description}
134
+
</div>
135
+
136
+
{pub.doc ? (
137
+
<div className="flex flex-row items-center gap-2 pt-3">
138
+
<p className="text-sm text-tertiary">
139
+
Published{" "}
140
+
{publishedAt &&
141
+
new Date(publishedAt).toLocaleString(undefined, {
142
+
year: "numeric",
143
+
month: "2-digit",
144
+
day: "2-digit",
145
+
hour: "2-digit",
146
+
minute: "2-digit",
147
+
hour12: true,
148
+
})}
149
+
</p>
150
+
</div>
151
+
) : (
152
+
<p className="text-sm text-tertiary pt-2">Draft</p>
153
+
)}
154
+
</div>
155
+
);
156
+
};
+28
-21
components/Pages/index.tsx
+28
-21
components/Pages/index.tsx
···
187
187
"theme/card-background-image-opacity",
188
188
);
189
189
190
-
let cardBackgroundImage =
191
-
useEntity(props.entityID, "theme/card-background-image") ||
192
-
rootBackgroundImage;
193
-
let cardBackgroundImageRepeat =
194
-
useEntity(props.entityID, "theme/card-background-image-repeat") ||
195
-
rootBackgroundRepeat;
196
-
let cardBackgroundImageOpacity =
197
-
useEntity(props.entityID, "theme/card-background-image-opacity")?.data
198
-
.value ||
199
-
rootBackgroundOpacity?.data.value ||
200
-
1;
190
+
let cardBackgroundImage = useEntity(
191
+
props.entityID,
192
+
"theme/card-background-image",
193
+
);
194
+
195
+
let cardBackgroundImageRepeat = useEntity(
196
+
props.entityID,
197
+
"theme/card-background-image-repeat",
198
+
);
199
+
200
+
let cardBackgroundImageOpacity = useEntity(
201
+
props.entityID,
202
+
"theme/card-background-image-opacity",
203
+
);
204
+
205
+
let backgroundImage = cardBackgroundImage || rootBackgroundImage;
206
+
let backgroundImageRepeat = cardBackgroundImage
207
+
? cardBackgroundImageRepeat?.data?.value
208
+
: rootBackgroundRepeat?.data.value;
209
+
let backgroundImageOpacity = cardBackgroundImage
210
+
? cardBackgroundImageOpacity?.data.value
211
+
: rootBackgroundOpacity?.data.value || 1;
201
212
202
213
return (
203
214
<>
···
210
221
${isFocused ? " border-border" : "border-border-light"}
211
222
`}
212
223
style={{
213
-
backgroundImage: cardBackgroundImage
214
-
? `url(${cardBackgroundImage.data.src}), url(${cardBackgroundImage.data.fallback})`
224
+
backgroundImage: backgroundImage
225
+
? `url(${backgroundImage.data.src}), url(${backgroundImage.data.fallback})`
215
226
: undefined,
216
-
backgroundRepeat: cardBackgroundImageRepeat
217
-
? "repeat"
218
-
: "no-repeat",
227
+
backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
219
228
backgroundPosition: "center",
220
-
backgroundSize: !cardBackgroundImageRepeat
229
+
backgroundSize: !backgroundImageRepeat
221
230
? "cover"
222
-
: cardBackgroundImageRepeat?.data.value,
223
-
opacity: cardBackgroundImage?.data.src
224
-
? cardBackgroundImageOpacity
225
-
: 1,
231
+
: backgroundImageRepeat,
232
+
opacity: backgroundImage?.data.src ? backgroundImageOpacity : 1,
226
233
}}
227
234
/>
228
235
) : null}