From ca1b33f832d271b4b891e6b0cde31c4744844a98 Mon Sep 17 00:00:00 2001 From: celine Date: Wed, 20 May 2026 16:02:21 -0400 Subject: [PATCH] wrap up standard site post styling --- .../[publication]/PublicationPostItem.tsx | 62 ++++++---- .../[publication]/PublicationPostsList.tsx | 1 + .../StandardSitePostItem.tsx | 9 +- .../Blocks/StandardSitePostBlock/index.tsx | 114 ++++++++---------- 4 files changed, 99 insertions(+), 87 deletions(-) diff --git a/app/lish/[did]/[publication]/PublicationPostItem.tsx b/app/lish/[did]/[publication]/PublicationPostItem.tsx index f2ea57fd..78028549 100644 --- a/app/lish/[did]/[publication]/PublicationPostItem.tsx +++ b/app/lish/[did]/[publication]/PublicationPostItem.tsx @@ -13,6 +13,7 @@ type CommonProps = { type LargeProps = CommonProps & { coverImageSrc?: string; coverImageAlt?: string; + pageWidth?: number; }; type MediumProps = CommonProps & { @@ -35,12 +36,18 @@ function MetaRow({ const hasDate = date !== undefined && date !== null; return (
-

- {hasAuthor && {author}} - {hasAuthor && hasDate && |} - {hasDate && {date}} +

+ {hasAuthor && ( + + {author} + {hasDate && |} + + )} + {hasDate && {date}}

{interactions}
@@ -72,7 +79,7 @@ function PostLink({ export function PublicationPostItemSmall(props: CommonProps) { return ( <> -
+
{props.title &&

{props.title}

} @@ -92,27 +99,29 @@ export function PublicationPostItemMedium(props: MediumProps) { const hasCoverImage = !!props.coverImageSrc; return ( <> -
-
+
+
- {props.title &&

{props.title}

} -

- {props.description} + {props.title && ( +

{props.title}

+ )} +

+ {props.description} {props.description}

{hasCoverImage && ( -
+
{props.coverImageAlt
)} @@ -124,13 +133,22 @@ export function PublicationPostItemMedium(props: MediumProps) { export function PublicationPostItemLarge(props: LargeProps) { const hasCoverImage = !!props.coverImageSrc; + const widePage = (props.pageWidth ?? 0) >= 768; const body = ( -
+
{props.title && ( -

{props.title}

+

+ {props.title} +

)} -

+

{props.description}

@@ -138,20 +156,22 @@ export function PublicationPostItemLarge(props: LargeProps) { author={props.author} date={props.date} interactions={props.interactions} - textClassName="text-base" + textClassName={`${widePage ? "text-sm sm:text-base " : "text-sm "} `} />
); return ( <> -
+
{hasCoverImage && ( -
+
{props.coverImageAlt
)} diff --git a/app/lish/[did]/[publication]/PublicationPostsList.tsx b/app/lish/[did]/[publication]/PublicationPostsList.tsx index 3e87e710..7fc52f06 100644 --- a/app/lish/[did]/[publication]/PublicationPostsList.tsx +++ b/app/lish/[did]/[publication]/PublicationPostsList.tsx @@ -140,6 +140,7 @@ export function PublicationPostsList({ interactions={interactions} coverImageSrc={coverImageSrc} coverImageAlt={doc_record.title} + pageWidth={publicationRecord?.theme?.pageWidth} /> ); } diff --git a/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx b/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx index 8e6f5863..5b47219e 100644 --- a/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx +++ b/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx @@ -10,13 +10,14 @@ import { getDocumentURL } from "app/lish/createPub/getPublicationURL"; import { getFirstParagraph } from "src/utils/getFirstParagraph"; import { blobRefToSrc } from "src/utils/blobRefToSrc"; import { useStandardSitePost } from "components/StandardSitePostDataProvider"; +import { useEntity, useReplicache } from "src/replicache"; import type { StandardSitePostData } from "app/api/rpc/[command]/get_standard_site_posts"; export type StandardSitePostSize = "large" | "medium" | "small"; export function StandardSitePostItem({ uri, - size = "small", + size = "medium", }: { uri: string; size?: StandardSitePostSize; @@ -50,7 +51,7 @@ export function StandardSitePostItem({ export function StandardSitePostItemView({ post, - size = "small", + size = "medium", }: { post: StandardSitePostData; size?: StandardSitePostSize; @@ -82,6 +83,9 @@ export function StandardSitePostItemView({ ? blobRefToSrc(post.record.coverImage.ref, postDid) : undefined; + const { rootEntity } = useReplicache(); + const pageWidth = useEntity(rootEntity, "theme/page-width")?.data.value; + const commonProps = { href: docUrl, title: post.record.title, @@ -96,6 +100,7 @@ export function StandardSitePostItemView({ description={description} coverImageSrc={coverImageSrc} coverImageAlt={post.record.title} + pageWidth={pageWidth} /> ); } diff --git a/components/Blocks/StandardSitePostBlock/index.tsx b/components/Blocks/StandardSitePostBlock/index.tsx index a7ca8dc0..208787f4 100644 --- a/components/Blocks/StandardSitePostBlock/index.tsx +++ b/components/Blocks/StandardSitePostBlock/index.tsx @@ -2,7 +2,6 @@ import { BlockProps, BlockLayout } from "../Block"; import { useEntity, useReplicache } from "src/replicache"; import { useUIState } from "src/useUIState"; import { Popover } from "components/Popover"; -import { Radio } from "components/Checkbox"; import { SettingsTriggerButton } from "../SettingsTriggerButton"; import { StandardSitePostItem, @@ -17,7 +16,7 @@ export const StandardSitePostBlock = ( ); let uri = useEntity(props.entityID, "block/standard-site-post")?.data.value; let sizeFact = useEntity(props.entityID, "standard-site-post/size"); - let size: StandardSitePostSize = sizeFact?.data.value ?? "small"; + let size: StandardSitePostSize = sizeFact?.data.value ?? "medium"; if (!uri) return null; @@ -26,7 +25,7 @@ export const StandardSitePostBlock = ( isSelected={!!isSelected} hasBackground="page" borderOnHover - className="standardSitePostBlock sm:px-3! sm:py-2! px-2! py-1!" + className="standardSitePostBlock p-0!" extraOptions={ } @@ -39,37 +38,41 @@ export const StandardSitePostBlock = ( function StandardSitePostSettingsButton(props: { entityID: string }) { let { rep } = useReplicache(); let sizeFact = useEntity(props.entityID, "standard-site-post/size"); - let size: StandardSitePostSize = sizeFact?.data.value ?? "small"; + let size: StandardSitePostSize = sizeFact?.data.value ?? "medium"; return ( e.preventDefault()} trigger={ } >

Post Size

- -
-
- {( - [ - { value: "small", label: "Small" }, - { value: "medium", label: "Medium" }, - ] as { value: StandardSitePostSize; label: string }[] - ).map((option) => ( - + {( + [ + { value: "small", Icon: SmallIcon }, + { value: "medium", Icon: MedIcon }, + { value: "large", Icon: LargeIcon }, + ] as { + value: StandardSitePostSize; + Icon: (props: { selected: boolean }) => React.ReactNode; + }[] + ).map((option) => { + let selected = + size === option.value || + (option.value === "medium" && size !== "small" && size !== "large"); + return ( +
-
- { - if (!e.currentTarget.checked) return; - if (!rep) return; - rep.mutate.assertFact({ - entity: props.entityID, - attribute: "standard-site-post/size", - data: { - type: "standard-site-post-size-union", - value: "large", - }, - }); - }} - > - - -
+ + + ); + })}
); } -const SmallIcon = () => { +const SmallIcon = ({ selected }: { selected: boolean }) => { return ( -
+
-
+
@@ -127,32 +110,35 @@ const SmallIcon = () => { ); }; -const MedIcon = () => { +const MedIcon = ({ selected }: { selected: boolean }) => { return ( -
-
-
-
-
+
+
+
+
+
-
+
); }; -const LargeIcon = () => { +const LargeIcon = ({ selected }: { selected: boolean }) => { return ( -
-
+
+
-
-
-
+
+
-- 2.51.2