From cfc662836bbcf4c7b4e053189e621ce4b3c56fc7 Mon Sep 17 00:00:00 2001 From: Jared Pereira Date: Tue, 5 May 2026 12:53:53 -0400 Subject: [PATCH] update post template again --- emails/post.tsx | 470 ++++++++++++++++++++++++++---------------------- 1 file changed, 256 insertions(+), 214 deletions(-) diff --git a/emails/post.tsx b/emails/post.tsx index 51bec99f..25c7b640 100644 --- a/emails/post.tsx +++ b/emails/post.tsx @@ -28,6 +28,9 @@ import { PubLeafletPagesLinearDocument, } from "lexicons/api"; import { blobRefToSrc } from "src/utils/blobRefToSrc"; +import { normalizePublicationRecord } from "src/utils/normalizeRecords"; +import { supabaseServerClient } from "supabase/serverClient"; +import { emailPropsFromPublication } from "./fromPublication"; import { bgcolorAttr, defaultEmailTheme, @@ -89,8 +92,7 @@ const defaultProps: PostEmailProps = { publicationName: "Publication", publicationUrl: "https://leaflet.pub", postTitle: "Post Title Here", - postDescription: - "Hello this is a description of everything that is to come", + postDescription: "Hello this is a description of everything that is to come", postUrl: "https://leaflet.pub", authorName: "author", publishedAtLabel: "Jan 1, 2026", @@ -298,236 +300,246 @@ export const PostEmail = (props: Partial = {}) => { - - {p.publicationName} - - - - - {p.postTitle} - - - - {p.postDescription ? ( - - {p.postDescription} - - ) : null} - - {byline ? ( -
- - - - {byline} - - - - - - See quotes - - - - - - See comments + {p.publicationName} - - -
- ) : null} - - {p.blocks.map((b, i) => ( - - ))} - {/* Footer: Gmail won't reliably cascade `text-align` from a - wrapping , so each centered row is its own @@ -540,7 +552,38 @@ export const PostEmail = (props: Partial = {}) => { ); }; -export default PostEmail; +// `npm run email:dev` renders this default export. Set +// `PREVIEW_PUBLICATION_URI` below to an `at://did:plc:.../pub.leaflet.publication/` +// to preview the post template with that publication's name, url, and theme — +// matching what `send_post_broadcast` and `sendPostPreview` resolve at send time. +// Leave it null to render with the static default props. +const PREVIEW_PUBLICATION_URI: string | null = + "at://did:plc:x2xmijn2egk5g67u3cwkddzy/site.standard.publication/3m2avdoogvs2f"; + +const PostEmailPreview = async () => { + if (!PREVIEW_PUBLICATION_URI) return ; + + const { data: publication, error } = await supabaseServerClient + .from("publications") + .select("record") + .eq("uri", PREVIEW_PUBLICATION_URI) + .maybeSingle(); + + if (error || !publication) { + console.warn( + `[email preview] could not load publication ${PREVIEW_PUBLICATION_URI}:`, + error?.message ?? "not found", + ); + return ; + } + + const pubProps = emailPropsFromPublication( + normalizePublicationRecord(publication.record), + ); + return ; +}; + +export default PostEmailPreview; // Map the lexicon's alignment token to the simple left/center/right values // usable as HTML `align` attributes. `justify` falls through to `left` to @@ -592,10 +635,10 @@ const BlockRenderer = ({ ); } if (PubLeafletBlocksHeader.isMain(block)) { - const level = Math.min( - 3, - Math.max(1, Math.floor(block.level ?? 1)), - ) as 1 | 2 | 3; + const level = Math.min(3, Math.max(1, Math.floor(block.level ?? 1))) as + | 1 + | 2 + | 3; return ( { - const fontSize = - props.as === "h1" ? 26 : props.as === "h2" ? 18 : 16; + const fontSize = props.as === "h1" ? 26 : props.as === "h2" ? 18 : 16; return (
— the bulletproof email-centering - pattern. `min-width: 100%` keeps Gmail iOS from - shrink-wrapping the table around the short link text. */} - - - - - - - - + - {/* Spacer */} - - - + {p.postDescription ? ( + + {p.postDescription} + + ) : null} + + {byline ? ( +
+ + + + {byline} + + + + + + See quotes + + + + + + See comments + + + +
+ ) : null} + + {p.blocks.map((b, i) => ( + + ))} - {/* Horizontal rule above watermark.
margins are + {/* Footer: Gmail won't reliably cascade `text-align` from a + wrapping
- - Read in Browser - -
- {p.unsubscribeUrl ? ( - Unsubscribe + {p.postTitle} - ) : ( - - (preview — not sent to subscribers) - - )} -
-   -
, so each centered row is its own + + + +
— the bulletproof email-centering + pattern. `min-width: 100%` keeps Gmail iOS from + shrink-wrapping the table around the short link text. */} + + + + + + + + + + {/* Spacer */} + + + + + {/* Horizontal rule above watermark.
margins are flaky in Gmail, so we use a 1px-tall - - + + + - - - + + + - - - - -
+ + Read in Browser + +
+ {p.unsubscribeUrl ? ( + + Unsubscribe + + ) : ( + + (preview — not sent to subscribers) + + )} +
+   +
with border-top instead. */} -
-   -
+   +
-   -
+   +
- -
+
+ +