From 817febf962907973a69f71aaa13af5e10dd1d42e Mon Sep 17 00:00:00 2001 From: celine Date: Mon, 6 Apr 2026 03:04:10 -0400 Subject: [PATCH] making page background works in the theme preview --- .../[publication]/PublicationContent.tsx | 221 ++++++++---------- app/lish/[did]/[publication]/page.tsx | 30 ++- .../theme-settings/PostPreview.tsx | 2 +- .../theme-settings/ThemeSettingsContent.tsx | 169 +++++++------- components/Pages/Page.tsx | 2 +- .../PubPickers/PubBackgroundPickers.tsx | 2 +- .../PubPickers/PubPageWidthSetter.tsx | 4 +- components/ThemeManager/PubThemeSetter.tsx | 99 ++++---- .../ThemeManager/PublicationThemeProvider.tsx | 25 +- 9 files changed, 281 insertions(+), 273 deletions(-) diff --git a/app/lish/[did]/[publication]/PublicationContent.tsx b/app/lish/[did]/[publication]/PublicationContent.tsx index 5c2d9989..aea1aaeb 100644 --- a/app/lish/[did]/[publication]/PublicationContent.tsx +++ b/app/lish/[did]/[publication]/PublicationContent.tsx @@ -5,10 +5,6 @@ import { getDocumentURL, } from "app/lish/createPub/getPublicationURL"; import { SubscribeWithBluesky } from "app/lish/Subscribe"; -import { - PublicationBackgroundProvider, - PublicationThemeProvider, -} from "components/ThemeManager/PublicationThemeProvider"; import { InteractionPreview } from "components/InteractionsPreview"; import { LocalizedDate } from "./LocalizedDate"; import { PublicationHomeLayout } from "./PublicationHomeLayout"; @@ -58,128 +54,115 @@ export const PublicationContent = ({ headingFontId={record?.theme?.headingFont} bodyFontId={record?.theme?.bodyFont} /> - - - - - ) : undefined - } - subscribeButton={ - - } + + ) : undefined + } + subscribeButton={ + -
- {publication.documents_in_publications - .filter((d) => !!d?.documents) - .sort((a, b) => { - const aRecord = normalizeDocumentRecord(a.documents?.data); - const bRecord = normalizeDocumentRecord(b.documents?.data); - const aDate = aRecord?.publishedAt - ? new Date(aRecord.publishedAt) - : new Date(0); - const bDate = bRecord?.publishedAt - ? new Date(bRecord.publishedAt) - : new Date(0); - return bDate.getTime() - aDate.getTime(); // Sort by most recent first - }) - .map((doc) => { - if (!doc.documents) return null; - const doc_record = normalizeDocumentRecord( - doc.documents.data, - ); - if (!doc_record) return null; - let uri = new AtUri(doc.documents.uri); - let quotes = - doc.documents.document_mentions_in_bsky[0].count || 0; - let comments = - record?.preferences?.showComments === false - ? 0 - : doc.documents.comments_on_documents[0].count || 0; - let recommends = - doc.documents.recommends_on_documents?.[0]?.count || 0; - let tags = doc_record.tags || []; + } + /> +
+ {publication.documents_in_publications + .filter((d) => !!d?.documents) + .sort((a, b) => { + const aRecord = normalizeDocumentRecord(a.documents?.data); + const bRecord = normalizeDocumentRecord(b.documents?.data); + const aDate = aRecord?.publishedAt + ? new Date(aRecord.publishedAt) + : new Date(0); + const bDate = bRecord?.publishedAt + ? new Date(bRecord.publishedAt) + : new Date(0); + return bDate.getTime() - aDate.getTime(); // Sort by most recent first + }) + .map((doc) => { + if (!doc.documents) return null; + const doc_record = normalizeDocumentRecord(doc.documents.data); + if (!doc_record) return null; + let uri = new AtUri(doc.documents.uri); + let quotes = + doc.documents.document_mentions_in_bsky[0].count || 0; + let comments = + record?.preferences?.showComments === false + ? 0 + : doc.documents.comments_on_documents[0].count || 0; + let recommends = + doc.documents.recommends_on_documents?.[0]?.count || 0; + let tags = doc_record.tags || []; - const docUrl = getDocumentURL( - doc_record, - doc.documents.uri, - publication, - ); - return ( - - + + ) : undefined + } + interactions={ + - ) : undefined + showMentions={ + record?.preferences?.showMentions !== false } - interactions={ - + showRecommends={ + record?.preferences?.showRecommends !== false } /> - - ); - })} -
- - - + } + /> + + ); + })} +
+ ); }; diff --git a/app/lish/[did]/[publication]/page.tsx b/app/lish/[did]/[publication]/page.tsx index 790b8ea3..d3901586 100644 --- a/app/lish/[did]/[publication]/page.tsx +++ b/app/lish/[did]/[publication]/page.tsx @@ -9,6 +9,10 @@ import React from "react"; import { NotFoundLayout } from "components/PageLayouts/NotFoundLayout"; import { normalizePublicationRecord } from "src/utils/normalizeRecords"; import { PublicationContent } from "./PublicationContent"; +import { + PublicationThemeProvider, + PublicationBackgroundProvider, +} from "components/ThemeManager/PublicationThemeProvider"; export default async function Publication(props: { params: Promise<{ publication: string; did: string }>; @@ -47,15 +51,23 @@ export default async function Publication(props: { if (!publication) return ; try { return ( - <> - - + + + + + ); } catch (e) { console.log(e); diff --git a/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx b/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx index 5c592d32..6cb2ab35 100644 --- a/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx +++ b/app/lish/[did]/[publication]/theme-settings/PostPreview.tsx @@ -136,7 +136,7 @@ export function PostPreview(props: { ], }} > -
+
("post"); let [loading, setLoading] = useState(false); - + let { data } = usePublicationData(); + let { publication } = data || {}; + let record = useNormalizedPublicationRecord(); let state = usePubThemeEditorState(); let { localPubTheme, @@ -33,91 +43,76 @@ export function ThemeSettingsContent() { } = state; return ( - -
- {/* Theme Setter Panel */} -
- - - - } - asChild - > -
{ - e.preventDefault(); - let result = await submitTheme(setLoading); - if (result?.success) { - toaster({ content: "Theme updated!", type: "success" }); - } - }} + + +
+ {/* Theme Setter Panel */} +
+ + + + } + asChild > - {/* Toggle + Save Header */} -
-
Preview Mode
- -
+ { + e.preventDefault(); + let result = await submitTheme(setLoading); + if (result?.success) { + toaster({ content: "Theme updated!", type: "success" }); + } + }} + > + {/* Toggle + Save Header */} +
+
Preview Mode
+ +
-
- -
-
- - {loading ? : "Update"} - -
- - -
+
+ +
+
+ + {loading ? : "Update"} + +
+ + +
- {/* Full-page Preview */} -
-
-
+ {/* Full-page Preview */} + +
{previewMode === "pub" ? ( )}
-
+
-
- + +
); } diff --git a/components/Pages/Page.tsx b/components/Pages/Page.tsx index 30f74696..1b436be7 100644 --- a/components/Pages/Page.tsx +++ b/components/Pages/Page.tsx @@ -112,7 +112,7 @@ export const PageWrapper = (props: { // this div wraps the contents AND the page options. // it needs to be its own div because this container does NOT scroll, and therefore doesn't clip the absolutely positioned pageOptions
{/* this div is the scrolling container that wraps only the contents div. diff --git a/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx b/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx index 1a710615..9f63a6da 100644 --- a/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx +++ b/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx @@ -103,7 +103,7 @@ export const BackgroundPicker = (props: { alpha={props.hasPageBackground ? true : false} /> )} -
+
+
- + + +
+
{ + e.preventDefault(); + await submitTheme(props.setLoading); + }} + > + +
-
- -
-
-
Preview
- {" "} - - +
+ +
+
+
Preview
+ {" "} + + +
-
- + + ); }; diff --git a/components/ThemeManager/PublicationThemeProvider.tsx b/components/ThemeManager/PublicationThemeProvider.tsx index e422a0fd..fed3cf6d 100644 --- a/components/ThemeManager/PublicationThemeProvider.tsx +++ b/components/ThemeManager/PublicationThemeProvider.tsx @@ -69,13 +69,28 @@ export function PublicationBackgroundProvider(props: { pub_creator: string; className?: string; children: React.ReactNode; + localBgImage?: string | null; + localBgImageRepeat?: number | null; }) { - let backgroundImage = props.theme?.backgroundImage?.image?.ref - ? blobRefToSrc(props.theme?.backgroundImage?.image?.ref, props.pub_creator) - : null; + let backgroundImage = + props.localBgImage !== undefined + ? props.localBgImage + : props.theme?.backgroundImage?.image?.ref + ? blobRefToSrc( + props.theme?.backgroundImage?.image?.ref, + props.pub_creator, + ) + : null; - let backgroundImageRepeat = props.theme?.backgroundImage?.repeat; - let backgroundImageSize = props.theme?.backgroundImage?.width || 500; + let backgroundImageRepeat = + props.localBgImageRepeat !== undefined + ? !!props.localBgImageRepeat + : props.theme?.backgroundImage?.repeat; + let backgroundImageSize = + (props.localBgImageRepeat !== undefined + ? props.localBgImageRepeat + : props.theme?.backgroundImage?.width) || 500; + console.log(backgroundImage); return (