From ce2b41a5a018ac53e9ed3087db360be2cbce554a Mon Sep 17 00:00:00 2001 From: Jared Pereira Date: Tue, 21 Oct 2025 17:11:37 -0400 Subject: [PATCH] handle narrow widths for the canvas --- actions/publishToPublication.ts | 5 +++++ .../[did]/[publication]/[rkey]/CanvasPage.tsx | 19 +++++++++++++++++-- .../[did]/[publication]/[rkey]/PostPages.tsx | 1 + lexicons/api/lexicons.ts | 12 ++++++++++++ .../api/types/pub/leaflet/pages/canvas.ts | 16 ++++++++++++++++ lexicons/pub/leaflet/pages/canvas.json | 12 ++++++++++++ lexicons/src/pages/Canvas.ts | 7 +++++++ 7 files changed, 70 insertions(+), 2 deletions(-) diff --git a/actions/publishToPublication.ts b/actions/publishToPublication.ts index 16fb7ebc..7125399d 100644 --- a/actions/publishToPublication.ts +++ b/actions/publishToPublication.ts @@ -102,6 +102,7 @@ export async function publishToPublication({ $type: "pub.leaflet.pages.canvas" as const, id: p.id, blocks: p.blocks as PubLeafletPagesCanvas.Block[], + display: p.display, }; } else { return { @@ -156,6 +157,7 @@ async function processBlocksToPages( | PubLeafletPagesLinearDocument.Block[] | PubLeafletPagesCanvas.Block[]; type: "doc" | "canvas"; + display?: { narrowWidth?: boolean }; }[] = []; let firstEntity = scan.eav(root_entity, "root/page")?.[0]; @@ -248,10 +250,13 @@ async function processBlocksToPages( if (pageType?.data.value === "canvas") { let canvasBlocks = await canvasBlocksToRecord(page.data.value); + let narrowWidth = scan.eav(page.data.value, "canvas/narrow-width")?.[0] + ?.data.value; pages.push({ id: page.data.value, blocks: canvasBlocks, type: "canvas", + display: narrowWidth ? { narrowWidth: true } : undefined, }); } else { let blocks = getBlocksWithTypeLocal(facts, page.data.value); diff --git a/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx b/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx index 182516f6..34d2baba 100644 --- a/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx +++ b/app/lish/[did]/[publication]/[rkey]/CanvasPage.tsx @@ -25,6 +25,7 @@ export function CanvasPage({ pageOptions, fullPageScroll, pages, + display, }: { document_uri: string; document: PostPageData; @@ -39,6 +40,7 @@ export function CanvasPage({ pageOptions?: React.ReactNode; fullPageScroll: boolean; pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[]; + display?: { narrowWidth?: boolean }; }) { let hasPageBackground = !!pubRecord.theme?.showPageBackground; @@ -50,6 +52,7 @@ export function CanvasPage({ id={pageId ? `post-page-${pageId}` : "post-page"} drawerOpen={false} pageOptions={pageOptions} + canvasNarrow={display?.narrowWidth} > ); @@ -70,6 +74,7 @@ function CanvasContent({ bskyPostData, pageId, pages, + narrowWidth, }: { blocks: PubLeafletPagesCanvas.Block[]; did: string; @@ -77,17 +82,27 @@ function CanvasContent({ bskyPostData: AppBskyFeedDefs.PostView[]; pageId?: string; pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[]; + narrowWidth?: boolean; }) { let height = blocks.length > 0 ? Math.max(...blocks.map((b) => b.y), 0) : 0; + // Calculate the required width based on the furthest positioned element + let width = + narrowWidth && blocks.length > 0 + ? Math.max(...blocks.map((b) => b.x + b.width)) + 32 // Add padding + : 1272; + return ( -
+
{blocks diff --git a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx index 11f6b39d..7ddf210b 100644 --- a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx +++ b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx @@ -189,6 +189,7 @@ export function PostPages({ document_uri={document_uri} pageId={page.id} pages={record.pages as PubLeafletPagesLinearDocument.Main[]} + display={(page as PubLeafletPagesCanvas.Main).display} pageOptions={ closePage(page?.id!)} diff --git a/lexicons/api/lexicons.ts b/lexicons/api/lexicons.ts index e90f27f7..8a3d1c3c 100644 --- a/lexicons/api/lexicons.ts +++ b/lexicons/api/lexicons.ts @@ -1455,6 +1455,18 @@ export const schemaDict = { ref: 'lex:pub.leaflet.pages.canvas#block', }, }, + display: { + type: 'ref', + ref: 'lex:pub.leaflet.pages.canvas#display', + }, + }, + }, + display: { + type: 'object', + properties: { + narrowWidth: { + type: 'boolean', + }, }, }, block: { diff --git a/lexicons/api/types/pub/leaflet/pages/canvas.ts b/lexicons/api/types/pub/leaflet/pages/canvas.ts index da5a3f21..7e93e56c 100644 --- a/lexicons/api/types/pub/leaflet/pages/canvas.ts +++ b/lexicons/api/types/pub/leaflet/pages/canvas.ts @@ -30,6 +30,7 @@ export interface Main { $type?: 'pub.leaflet.pages.canvas' id?: string blocks: Block[] + display?: Display } const hashMain = 'main' @@ -42,6 +43,21 @@ export function validateMain(v: V) { return validate
(v, id, hashMain) } +export interface Display { + $type?: 'pub.leaflet.pages.canvas#display' + narrowWidth?: boolean +} + +const hashDisplay = 'display' + +export function isDisplay(v: V) { + return is$typed(v, id, hashDisplay) +} + +export function validateDisplay(v: V) { + return validate(v, id, hashDisplay) +} + export interface Block { $type?: 'pub.leaflet.pages.canvas#block' block: diff --git a/lexicons/pub/leaflet/pages/canvas.json b/lexicons/pub/leaflet/pages/canvas.json index 39cf031c..4206c84f 100644 --- a/lexicons/pub/leaflet/pages/canvas.json +++ b/lexicons/pub/leaflet/pages/canvas.json @@ -17,6 +17,18 @@ "type": "ref", "ref": "#block" } + }, + "display": { + "type": "ref", + "ref": "#display" + } + } + }, + "display": { + "type": "object", + "properties": { + "narrowWidth": { + "type": "boolean" } } }, diff --git a/lexicons/src/pages/Canvas.ts b/lexicons/src/pages/Canvas.ts index 5b64fd57..71332930 100644 --- a/lexicons/src/pages/Canvas.ts +++ b/lexicons/src/pages/Canvas.ts @@ -11,6 +11,13 @@ export const PubLeafletPagesCanvasDocument: LexiconDoc = { properties: { id: { type: "string" }, blocks: { type: "array", items: { type: "ref", ref: "#block" } }, + display: { type: "ref", ref: "#display" }, + }, + }, + display: { + type: "object", + properties: { + narrowWidth: { type: "boolean" }, }, }, block: { -- 2.51.2