leaflet.pub
a tool for shared writing and social publishing
handle narrow widths for the canvas
awarm.space
+70
-2
+5
actions/publishToPublication.ts
+5
actions/publishToPublication.ts
···
102
102
$type: "pub.leaflet.pages.canvas" as const,
103
103
id: p.id,
104
104
blocks: p.blocks as PubLeafletPagesCanvas.Block[],
105
+
display: p.display,
105
106
};
106
107
} else {
107
108
return {
···
156
157
| PubLeafletPagesLinearDocument.Block[]
157
158
| PubLeafletPagesCanvas.Block[];
158
159
type: "doc" | "canvas";
160
+
display?: { narrowWidth?: boolean };
159
161
}[] = [];
160
162
161
163
let firstEntity = scan.eav(root_entity, "root/page")?.[0];
···
248
250
249
251
if (pageType?.data.value === "canvas") {
250
252
let canvasBlocks = await canvasBlocksToRecord(page.data.value);
253
+
let narrowWidth = scan.eav(page.data.value, "canvas/narrow-width")?.[0]
254
+
?.data.value;
251
255
pages.push({
252
256
id: page.data.value,
253
257
blocks: canvasBlocks,
254
258
type: "canvas",
259
+
display: narrowWidth ? { narrowWidth: true } : undefined,
255
260
});
256
261
} else {
257
262
let blocks = getBlocksWithTypeLocal(facts, page.data.value);
+17
-2
app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
+17
-2
app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx
···
25
25
pageOptions,
26
26
fullPageScroll,
27
27
pages,
28
+
display,
28
29
}: {
29
30
document_uri: string;
30
31
document: PostPageData;
···
39
40
pageOptions?: React.ReactNode;
40
41
fullPageScroll: boolean;
41
42
pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
43
+
display?: { narrowWidth?: boolean };
42
44
}) {
43
45
let hasPageBackground = !!pubRecord.theme?.showPageBackground;
44
46
···
50
52
id={pageId ? `post-page-${pageId}` : "post-page"}
51
53
drawerOpen={false}
52
54
pageOptions={pageOptions}
55
+
canvasNarrow={display?.narrowWidth}
53
56
>
54
57
<CanvasContent
55
58
blocks={blocks}
···
58
61
bskyPostData={bskyPostData}
59
62
pageId={pageId}
60
63
pages={pages}
64
+
narrowWidth={display?.narrowWidth}
61
65
/>
62
66
</PageWrapper>
63
67
);
···
70
74
bskyPostData,
71
75
pageId,
72
76
pages,
77
+
narrowWidth,
73
78
}: {
74
79
blocks: PubLeafletPagesCanvas.Block[];
75
80
did: string;
···
77
82
bskyPostData: AppBskyFeedDefs.PostView[];
78
83
pageId?: string;
79
84
pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
85
+
narrowWidth?: boolean;
80
86
}) {
81
87
let height = blocks.length > 0 ? Math.max(...blocks.map((b) => b.y), 0) : 0;
82
88
89
+
// Calculate the required width based on the furthest positioned element
90
+
let width =
91
+
narrowWidth && blocks.length > 0
92
+
? Math.max(...blocks.map((b) => b.x + b.width)) + 32 // Add padding
93
+
: 1272;
94
+
83
95
return (
84
-
<div className="canvasWrapper h-full w-fit overflow-y-scroll">
96
+
<div
97
+
className={`canvasWrapper h-full ${narrowWidth ? "w-full overflow-auto" : "w-fit overflow-y-scroll"}`}
98
+
>
85
99
<div
86
100
style={{
87
101
minHeight: height + 512,
88
102
contain: "size layout paint",
103
+
width: narrowWidth ? width : undefined,
89
104
}}
90
-
className="relative h-full w-[1272px]"
105
+
className={`relative h-full ${narrowWidth ? "min-w-full" : "w-[1272px]"}`}
91
106
>
92
107
<CanvasBackground />
93
108
{blocks
+1
app/lish/[did]/[publication]/[rkey]/PostPages.tsx
+1
app/lish/[did]/[publication]/[rkey]/PostPages.tsx
+12
lexicons/api/lexicons.ts
+12
lexicons/api/lexicons.ts
···
1455
1455
ref: 'lex:pub.leaflet.pages.canvas#block',
1456
1456
},
1457
1457
},
1458
+
display: {
1459
+
type: 'ref',
1460
+
ref: 'lex:pub.leaflet.pages.canvas#display',
1461
+
},
1462
+
},
1463
+
},
1464
+
display: {
1465
+
type: 'object',
1466
+
properties: {
1467
+
narrowWidth: {
1468
+
type: 'boolean',
1469
+
},
1458
1470
},
1459
1471
},
1460
1472
block: {
+16
lexicons/api/types/pub/leaflet/pages/canvas.ts
+16
lexicons/api/types/pub/leaflet/pages/canvas.ts
···
30
30
$type?: 'pub.leaflet.pages.canvas'
31
31
id?: string
32
32
blocks: Block[]
33
+
display?: Display
33
34
}
34
35
35
36
const hashMain = 'main'
···
40
41
41
42
export function validateMain<V>(v: V) {
42
43
return validate<Main & V>(v, id, hashMain)
44
+
}
45
+
46
+
export interface Display {
47
+
$type?: 'pub.leaflet.pages.canvas#display'
48
+
narrowWidth?: boolean
49
+
}
50
+
51
+
const hashDisplay = 'display'
52
+
53
+
export function isDisplay<V>(v: V) {
54
+
return is$typed(v, id, hashDisplay)
55
+
}
56
+
57
+
export function validateDisplay<V>(v: V) {
58
+
return validate<Display & V>(v, id, hashDisplay)
43
59
}
44
60
45
61
export interface Block {
+12
lexicons/pub/leaflet/pages/canvas.json
+12
lexicons/pub/leaflet/pages/canvas.json
+7
lexicons/src/pages/Canvas.ts
+7
lexicons/src/pages/Canvas.ts
···
11
11
properties: {
12
12
id: { type: "string" },
13
13
blocks: { type: "array", items: { type: "ref", ref: "#block" } },
14
+
display: { type: "ref", ref: "#display" },
15
+
},
16
+
},
17
+
display: {
18
+
type: "object",
19
+
properties: {
20
+
narrowWidth: { type: "boolean" },
14
21
},
15
22
},
16
23
block: {