Something went wrong. Try again.
leaflet fork for copy edit / bug fixes forked from leaflet.pub/leaflet
Something went wrong. Try again.
10 kB · 292 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293"use client";import { AtUri } from "@atproto/api";import { PubIcon } from "components/ActionBar/Publications";import { PublicationThemeWrapper } from "components/ThemeManager/PublicationThemeProvider";import { blobRefToSrc, COVER_THUMBNAIL_WIDTH } from "src/utils/blobRefToSrc";import type { NormalizedDocument, NormalizedPublication,} from "src/utils/normalizeRecords";import { hasLeafletContent } from "lexicons/src/normalize";import { getGatedPostPolicy, postHasMembersDelimiter } from "src/membership";import type { Post } from "actions/reader/getReaderFeed";
import Link from "next/link";import { useEffect, useRef, useState } from "react";import { PostByline } from "./PostByline";import { namedBylineProfiles } from "src/utils/byline";import { useSelectedPostListing } from "src/useSelectedPostState";import { mergePreferences } from "src/utils/mergePreferences";import { ExternalLinkTiny } from "./Icons/ExternalLinkTiny";import { getDocumentURL } from "src/utils/getPublicationURL";import { RecommendButton } from "./Interactions/RecommendButton";import { getFirstParagraph } from "src/utils/getFirstParagraph";import { DiscussionButton } from "./Interactions/DiscussionButton";import { InteractionShareButton } from "./Interactions/InteractionShareButton";import { PublicationPostItemLarge } from "app/(app)/(published)/lish/[did]/[publication]/PublicationPostItem";import { LocalizedDate } from "app/(app)/(published)/lish/[did]/[publication]/LocalizedDate";
export const PostListing = (props: Post & { selected?: boolean }) => { let pubRecord = props.publication?.pubRecord as | NormalizedPublication | undefined;
let postRecord = props.documents.data as NormalizedDocument | null;
// Don't render anything for records that can't be normalized (e.g., site.standard records without expected fields) if (!postRecord) { return null; } let postUri = new AtUri(props.documents.uri); let uri = props.publication ? props.publication?.uri : props.documents.uri;
let themeRecord = pubRecord?.theme || postRecord?.theme; let elRef = useRef<HTMLDivElement>(null); let [hasBackgroundImage, setHasBackgroundImage] = useState(false);
useEffect(() => { if (!themeRecord?.backgroundImage?.image || !elRef.current) { setHasBackgroundImage(false); return; } let alpha = Number( window .getComputedStyle(elRef.current) .getPropertyValue("--bg-page-alpha"), ); setHasBackgroundImage(alpha < 0.7); }, [themeRecord?.backgroundImage?.image]);
let backgroundImage = themeRecord?.backgroundImage?.image?.ref && uri ? blobRefToSrc(themeRecord.backgroundImage.image.ref, new AtUri(uri).host) : null;
let backgroundImageRepeat = themeRecord?.backgroundImage?.repeat; let backgroundImageSize = themeRecord?.backgroundImage?.width || 500;
let showPageBackground = pubRecord ? pubRecord?.theme?.showPageBackground : postRecord.theme?.showPageBackground ?? true;
let mergedPrefs = mergePreferences( postRecord?.preferences, pubRecord?.preferences, );
let quotes = props.documents.mentionsCount ?? props.documents.document_mentions_in_bsky?.[0]?.count ?? 0; let comments = mergedPrefs.showComments === false ? 0 : props.documents.comments_on_documents?.[0]?.count || 0; let recommends = props.documents.recommends_on_documents?.[0]?.count || 0; let tags = (postRecord?.tags as string[] | undefined) || [];
let namedContributors = namedBylineProfiles(props.contributors);
// For standalone posts, link directly to the document let postUrl = getDocumentURL(postRecord, props.documents.uri, pubRecord);
let coverImageSrc = postRecord.coverImage ? blobRefToSrc(postRecord.coverImage.ref, postUri.host, undefined, { width: COVER_THUMBNAIL_WIDTH.large, }) : undefined;
let author = namedContributors.length > 0 ? ( <PostByline contributors={namedContributors} /> ) : undefined; let date = postRecord.publishedAt ? ( <PostDate publishedAt={postRecord.publishedAt} /> ) : undefined; let pubInfo = props.publication && pubRecord ? ( <PubInfo href={props.publication.href} pubRecord={pubRecord} uri={props.publication.uri} postRecord={postRecord} /> ) : undefined; let interactions = ( <div className="text-sm flex gap-4 items-center text-tertiary shrink-0"> <Interactions postUrl={postUrl} quotesCount={quotes} commentsCount={comments} recommendsCount={recommends} tags={tags} showComments={mergedPrefs.showComments !== false} showMentions={mergedPrefs.showMentions !== false} documentUri={props.documents.uri} document={postRecord} publication={pubRecord} /> <InteractionShareButton postRecord={postRecord} postUrl={postUrl} documentUri={props.documents.uri} publication={pubRecord} pubUri={props.publication?.uri} /> </div> );
return ( <div className="postListing flex flex-col gap-1"> <PublicationThemeWrapper postRecord={postRecord} pubRecord={pubRecord}> <div ref={elRef} id={`post-listing-${postUri}`} className={` relative flex flex-col overflow-hidden selected-outline rounded-lg w-full ${props.selected ? "outline-2 outline-offset-1 outline-accent-contrast border-accent-contrast" : "hover:outline-accent-contrast hover:border-accent-contrast border-border-light"} ${showPageBackground ? "bg-bg-page " : "bg-bg-leaflet"} `} style={ hasBackgroundImage ? { backgroundImage: backgroundImage ? `url(${backgroundImage})` : undefined, backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat", backgroundSize: backgroundImageRepeat ? `${backgroundImageSize}px` : "cover", } : {} } > <PublicationPostItemLarge href={postUrl} membersOnly={postHasMembersDelimiter(postRecord)} publicationUri={props.publication?.uri} gatePolicy={getGatedPostPolicy(postRecord)} title={postRecord.title} description={ postRecord.description || getFirstParagraph(postRecord) } author={author} date={date} interactions={interactions} pubInfo={pubInfo} coverImageSrc={coverImageSrc} coverImageAlt={postRecord.title} /> </div> </PublicationThemeWrapper> </div> );};
const PubInfo = (props: { href: string; pubRecord: NormalizedPublication; uri: string; postRecord: NormalizedDocument;}) => { let isLeaflet = hasLeafletContent(props.postRecord); let cleanUrl = props.pubRecord.url ?.replace(/^https?:\/\//, "") .replace(/^www\./, "");
return ( <div className="flex justify-between gap-4 w-full pb-1"> <Link href={props.href} className="text-accent-contrast font-bold no-underline! text-sm flex gap-[6px] items-center relative grow w-max shrink-0 min-w-0" > <PubIcon tiny icon={ props.pubRecord.icon ? blobRefToSrc( props.pubRecord.icon.ref, new AtUri(props.uri).host, ) : undefined } pubName={props.pubRecord.name} /> <div className="w-max min-w-0">{props.pubRecord.name}</div> </Link> {!isLeaflet && ( <div className="text-sm flex flex-row items-center text-tertiary gap-1 min-w-0"> <div className="truncate min-w-0">{cleanUrl}</div> <ExternalLinkTiny className="shrink-0" /> </div> )} </div> );};
const PostDate = (props: { publishedAt: string | undefined }) => { if (!props.publishedAt) return null; return ( <div className="shrink-0 sm:text-sm text-sm"> <LocalizedDate dateString={props.publishedAt} omitYear options={{ year: "2-digit", month: "short", day: "numeric" }} /> </div> );};
const Interactions = (props: { quotesCount: number; commentsCount: number; recommendsCount: number; tags?: string[]; postUrl: string; showComments: boolean; showMentions: boolean; documentUri: string; document: NormalizedDocument; publication?: NormalizedPublication;}) => { let setSelectedPostListing = useSelectedPostListing( (s) => s.setSelectedPostListing, ); let defaultDrawer: "comments" | "quotes" = props.showComments && props.commentsCount > 0 ? "comments" : "quotes";
return ( <div className={`flex gap-4 text-tertiary text-sm items-center`}> <div className="postListingsInteractions flex gap-4"> <RecommendButton documentUri={props.documentUri} recommendsCount={props.recommendsCount} /> <DiscussionButton documentUri={props.documentUri} commentsCount={props.commentsCount} quotesCount={props.quotesCount} showComments={props.showComments} showMentions={props.showMentions} postUrl={props.postUrl} title={props.document.title} onOpenChange={(open) => { // Keep the listing highlighted (read by the reader feed) while the // modal is up. if (open) setSelectedPostListing({ document_uri: props.documentUri, document: props.document, publication: props.publication, drawer: defaultDrawer, }); else setSelectedPostListing(null); }} /> </div> </div> );};