leaflet.pub
a tool for shared writing and social publishing
fix some standalone theme and canvas stuff
awarm.space
+36
-9
+1
-1
app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
+1
-1
app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
+2
-1
app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer.tsx
+2
-1
app/lish/[did]/[publication]/[rkey]/DocumentPageRenderer.tsx
···
108
108
let theme = pubRecord?.theme || record.theme || null;
109
109
let pub_creator =
110
110
document.documents_in_publications[0]?.publications?.identity_did || did;
111
+
let isStandalone = !pubRecord;
111
112
112
113
let firstPage = record.pages[0];
113
114
···
121
122
122
123
return (
123
124
<PostPageContextProvider value={document}>
124
-
<PublicationThemeProvider theme={theme} pub_creator={pub_creator}>
125
+
<PublicationThemeProvider theme={theme} pub_creator={pub_creator} isStandalone={isStandalone}>
125
126
<PublicationBackgroundProvider theme={theme} pub_creator={pub_creator}>
126
127
<LeafletLayout>
127
128
<PostPages
+1
-1
app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
+1
-1
app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
···
45
45
pageId,
46
46
pageOptions,
47
47
fullPageScroll,
48
+
hasPageBackground,
48
49
} = props;
49
50
let { identity } = useIdentityData();
50
51
let drawer = useDrawerOpen(document_uri);
51
52
52
53
if (!document) return null;
53
54
54
-
let hasPageBackground = !!theme?.showPageBackground;
55
55
let record = document.data as PubLeafletDocument.Record;
56
56
57
57
const isSubpage = !!pageId;
+19
-4
app/lish/[did]/[publication]/[rkey]/PostPages.tsx
+19
-4
app/lish/[did]/[publication]/[rkey]/PostPages.tsx
···
111
111
pollData: PollData[];
112
112
document_uri: string;
113
113
fullPageScroll: boolean;
114
+
hasPageBackground: boolean;
114
115
pageId?: string;
115
116
pageOptions?: React.ReactNode;
116
117
allPages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
···
171
172
172
173
let record = document.data as PubLeafletDocument.Record;
173
174
let theme = pubRecord?.theme || record.theme || null;
174
-
let hasPageBackground = !!theme?.showPageBackground;
175
+
// For publication posts, respect the publication's showPageBackground setting
176
+
// For standalone documents, default to showing page background
177
+
let isInPublication = !!pubRecord;
178
+
let hasPageBackground = isInPublication ? !!theme?.showPageBackground : true;
175
179
let quotesAndMentions = document.quotesAndMentions;
176
180
177
181
let firstPage = record.pages[0] as
178
182
| PubLeafletPagesLinearDocument.Main
179
183
| PubLeafletPagesCanvas.Main;
180
184
185
+
// Canvas pages don't support fullPageScroll well due to fixed 1272px width
186
+
let firstPageIsCanvas = PubLeafletPagesCanvas.isMain(firstPage);
187
+
181
188
// Shared props used for all pages
182
189
const sharedProps: SharedPageProps = {
183
190
document,
···
190
197
bskyPostData,
191
198
pollData,
192
199
document_uri,
200
+
hasPageBackground,
193
201
allPages: record.pages as (
194
202
| PubLeafletPagesLinearDocument.Main
195
203
| PubLeafletPagesCanvas.Main
196
204
)[],
197
-
fullPageScroll: !hasPageBackground && !drawer && openPageIds.length === 0,
205
+
fullPageScroll:
206
+
!hasPageBackground &&
207
+
!drawer &&
208
+
openPageIds.length === 0 &&
209
+
!firstPageIsCanvas,
198
210
};
199
211
200
212
return (
···
219
231
{openPageIds.map((pageId) => {
220
232
let page = record.pages.find(
221
233
(p) =>
222
-
(p as PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)
223
-
.id === pageId,
234
+
(
235
+
p as
236
+
| PubLeafletPagesLinearDocument.Main
237
+
| PubLeafletPagesCanvas.Main
238
+
).id === pageId,
224
239
) as
225
240
| PubLeafletPagesLinearDocument.Main
226
241
| PubLeafletPagesCanvas.Main
+13
-2
components/ThemeManager/PublicationThemeProvider.tsx
+13
-2
components/ThemeManager/PublicationThemeProvider.tsx
···
16
16
accentText: "#FFFFFF",
17
17
accentBackground: "#0000FF",
18
18
};
19
+
20
+
// Default page background for standalone leaflets (matches editor default)
21
+
const StandalonePageBackground = "#FFFFFF";
19
22
function parseThemeColor(
20
23
c: PubLeafletThemeColor.Rgb | PubLeafletThemeColor.Rgba,
21
24
) {
···
95
98
children: React.ReactNode;
96
99
theme?: PubLeafletPublication.Record["theme"] | null;
97
100
pub_creator: string;
101
+
isStandalone?: boolean;
98
102
}) {
99
-
let colors = usePubTheme(props.theme);
103
+
let colors = usePubTheme(props.theme, props.isStandalone);
100
104
return (
101
105
<BaseThemeProvider local={props.local} {...colors}>
102
106
{props.children}
···
106
110
107
111
export const usePubTheme = (
108
112
theme?: PubLeafletPublication.Record["theme"] | null,
113
+
isStandalone?: boolean,
109
114
) => {
110
115
let bgLeaflet = useColor(theme, "backgroundColor");
111
116
let bgPage = useColor(theme, "pageBackground");
112
-
bgPage = theme?.pageBackground ? bgPage : bgLeaflet;
117
+
// For standalone documents, use the editor default page background (#FFFFFF)
118
+
// For publications without explicit pageBackground, use bgLeaflet
119
+
if (isStandalone && !theme?.pageBackground) {
120
+
bgPage = parseColor(StandalonePageBackground);
121
+
} else if (theme && !theme.pageBackground) {
122
+
bgPage = bgLeaflet;
123
+
}
113
124
let showPageBackground = theme?.showPageBackground;
114
125
115
126
let primary = useColor(theme, "primary");