+24

app/lish/[did]/[publication]/PublicationHomeLayout.tsx

··· 1 1 + "use client"; 2 2 + 3 3 + import { usePreserveScroll } from "src/hooks/usePreserveScroll"; 4 4 + 5 5 + export function PublicationHomeLayout(props: { 6 6 + uri: string; 7 7 + showPageBackground: boolean; 8 8 + children: React.ReactNode; 9 9 + }) { 10 10 + let { ref } = usePreserveScroll<HTMLDivElement>(props.uri); 11 11 + return ( 12 12 + <div 13 13 + ref={props.showPageBackground ? null : ref} 14 14 + className={`pubWrapper flex flex-col sm:py-6 h-full ${props.showPageBackground ? "max-w-prose mx-auto sm:px-0 px-[6px] py-2" : "w-full overflow-y-scroll"}`} 15 15 + > 16 16 + <div 17 17 + ref={!props.showPageBackground ? null : ref} 18 18 + className={`pub sm:max-w-prose max-w-(--page-width-units) w-[1000px] mx-auto px-3 sm:px-4 py-5 ${props.showPageBackground ? "overflow-auto h-full bg-[rgba(var(--bg-page),var(--bg-page-alpha))] border border-border rounded-lg" : "h-fit"}`} 19 19 + > 20 20 + {props.children} 21 21 + </div> 22 22 + </div> 23 23 + ); 24 24 + }

+109 -113

app/lish/[did]/[publication]/page.tsx

··· 15 15 import { QuoteTiny } from "components/Icons/QuoteTiny"; 16 16 import { CommentTiny } from "components/Icons/CommentTiny"; 17 17 import { LocalizedDate } from "./LocalizedDate"; 18 18 + import { PublicationHomeLayout } from "./PublicationHomeLayout"; 18 19 19 20 export default async function Publication(props: { 20 21 params: Promise<{ publication: string; did: string }>; ··· 66 67 record={record} 67 68 pub_creator={publication.identity_did} 68 69 > 69 69 - <div 70 70 - className={`pubWrapper flex flex-col sm:py-6 h-full ${showPageBackground ? "max-w-prose mx-auto sm:px-0 px-[6px] py-2" : "w-full overflow-y-scroll"}`} 70 70 + <PublicationHomeLayout 71 71 + uri={publication.uri} 72 72 + showPageBackground={showPageBackground} 71 73 > 72 72 - <div 73 73 - className={`pub sm:max-w-prose max-w-(--page-width-units) w-[1000px] mx-auto px-3 sm:px-4 py-5 ${showPageBackground ? "overflow-auto h-full bg-[rgba(var(--bg-page),var(--bg-page-alpha))] border border-border rounded-lg" : "h-fit"}`} 74 74 - > 75 75 - <div className="pubHeader flex flex-col pb-8 w-full text-center justify-center "> 76 76 - {record?.icon && ( 77 77 - <div 78 78 - className="shrink-0 w-10 h-10 rounded-full mx-auto" 79 79 - style={{ 80 80 - backgroundImage: `url(/api/atproto_images?did=${did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]})`, 81 81 - backgroundRepeat: "no-repeat", 82 82 - backgroundPosition: "center", 83 83 - backgroundSize: "cover", 84 84 - }} 85 85 - /> 86 86 - )} 87 87 - <h2 className="text-accent-contrast sm:text-xl text-[22px] pt-1 "> 88 88 - {publication.name} 89 89 - </h2> 90 90 - <p className="sm:text-lg text-secondary"> 91 91 - {record?.description}{" "} 74 74 + <div className="pubHeader flex flex-col pb-8 w-full text-center justify-center "> 75 75 + {record?.icon && ( 76 76 + <div 77 77 + className="shrink-0 w-10 h-10 rounded-full mx-auto" 78 78 + style={{ 79 79 + backgroundImage: `url(/api/atproto_images?did=${did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]})`, 80 80 + backgroundRepeat: "no-repeat", 81 81 + backgroundPosition: "center", 82 82 + backgroundSize: "cover", 83 83 + }} 84 84 + /> 85 85 + )} 86 86 + <h2 className="text-accent-contrast sm:text-xl text-[22px] pt-1 "> 87 87 + {publication.name} 88 88 + </h2> 89 89 + <p className="sm:text-lg text-secondary"> 90 90 + {record?.description}{" "} 91 91 + </p> 92 92 + {profile && ( 93 93 + <p className="italic text-tertiary sm:text-base text-sm"> 94 94 + <strong className="">by {profile.displayName}</strong>{" "} 95 95 + <a 96 96 + className="text-tertiary" 97 97 + href={`https://bsky.app/profile/${profile.handle}`} 98 98 + > 99 99 + @{profile.handle} 100 100 + </a> 92 101 </p> 93 93 - {profile && ( 94 94 - <p className="italic text-tertiary sm:text-base text-sm"> 95 95 - <strong className="">by {profile.displayName}</strong>{" "} 96 96 - <a 97 97 - className="text-tertiary" 98 98 - href={`https://bsky.app/profile/${profile.handle}`} 99 99 - > 100 100 - @{profile.handle} 101 101 - </a> 102 102 - </p> 103 103 - )} 104 104 - <div className="sm:pt-4 pt-4"> 105 105 - <SubscribeWithBluesky 106 106 - base_url={getPublicationURL(publication)} 107 107 - pubName={publication.name} 108 108 - pub_uri={publication.uri} 109 109 - subscribers={publication.publication_subscriptions} 110 110 - /> 111 111 - </div> 102 102 + )} 103 103 + <div className="sm:pt-4 pt-4"> 104 104 + <SubscribeWithBluesky 105 105 + base_url={getPublicationURL(publication)} 106 106 + pubName={publication.name} 107 107 + pub_uri={publication.uri} 108 108 + subscribers={publication.publication_subscriptions} 109 109 + /> 112 110 </div> 113 113 - <div className="publicationPostList w-full flex flex-col gap-4"> 114 114 - {publication.documents_in_publications 115 115 - .filter((d) => !!d?.documents) 116 116 - .sort((a, b) => { 117 117 - let aRecord = a.documents 118 118 - ?.data! as PubLeafletDocument.Record; 119 119 - let bRecord = b.documents 120 120 - ?.data! as PubLeafletDocument.Record; 121 121 - const aDate = aRecord.publishedAt 122 122 - ? new Date(aRecord.publishedAt) 123 123 - : new Date(0); 124 124 - const bDate = bRecord.publishedAt 125 125 - ? new Date(bRecord.publishedAt) 126 126 - : new Date(0); 127 127 - return bDate.getTime() - aDate.getTime(); // Sort by most recent first 128 128 - }) 129 129 - .map((doc) => { 130 130 - if (!doc.documents) return null; 131 131 - let uri = new AtUri(doc.documents.uri); 132 132 - let doc_record = doc.documents 133 133 - .data as PubLeafletDocument.Record; 134 134 - let quotes = 135 135 - doc.documents.document_mentions_in_bsky[0].count || 0; 136 136 - let comments = 137 137 - record?.preferences?.showComments === false 138 138 - ? 0 139 139 - : doc.documents.comments_on_documents[0].count || 0; 111 111 + </div> 112 112 + <div className="publicationPostList w-full flex flex-col gap-4"> 113 113 + {publication.documents_in_publications 114 114 + .filter((d) => !!d?.documents) 115 115 + .sort((a, b) => { 116 116 + let aRecord = a.documents?.data! as PubLeafletDocument.Record; 117 117 + let bRecord = b.documents?.data! as PubLeafletDocument.Record; 118 118 + const aDate = aRecord.publishedAt 119 119 + ? new Date(aRecord.publishedAt) 120 120 + : new Date(0); 121 121 + const bDate = bRecord.publishedAt 122 122 + ? new Date(bRecord.publishedAt) 123 123 + : new Date(0); 124 124 + return bDate.getTime() - aDate.getTime(); // Sort by most recent first 125 125 + }) 126 126 + .map((doc) => { 127 127 + if (!doc.documents) return null; 128 128 + let uri = new AtUri(doc.documents.uri); 129 129 + let doc_record = doc.documents 130 130 + .data as PubLeafletDocument.Record; 131 131 + let quotes = 132 132 + doc.documents.document_mentions_in_bsky[0].count || 0; 133 133 + let comments = 134 134 + record?.preferences?.showComments === false 135 135 + ? 0 136 136 + : doc.documents.comments_on_documents[0].count || 0; 140 137 141 141 - return ( 142 142 - <React.Fragment key={doc.documents?.uri}> 143 143 - <div className="flex w-full grow flex-col "> 144 144 - <SpeedyLink 145 145 - href={`${getPublicationURL(publication)}/${uri.rkey}`} 146 146 - className="publishedPost hover:no-underline! flex flex-col" 147 147 - > 148 148 - <h3 className="text-primary">{doc_record.title}</h3> 149 149 - <p className="italic text-secondary"> 150 150 - {doc_record.description} 151 151 - </p> 152 152 - </SpeedyLink> 138 138 + return ( 139 139 + <React.Fragment key={doc.documents?.uri}> 140 140 + <div className="flex w-full grow flex-col "> 141 141 + <SpeedyLink 142 142 + href={`${getPublicationURL(publication)}/${uri.rkey}`} 143 143 + className="publishedPost hover:no-underline! flex flex-col" 144 144 + > 145 145 + <h3 className="text-primary">{doc_record.title}</h3> 146 146 + <p className="italic text-secondary"> 147 147 + {doc_record.description} 148 148 + </p> 149 149 + </SpeedyLink> 153 150 154 154 - <div className="text-sm text-tertiary flex gap-1 flex-wrap pt-2"> 155 155 - <p className="text-sm text-tertiary "> 156 156 - {doc_record.publishedAt && ( 157 157 - <LocalizedDate 158 158 - dateString={doc_record.publishedAt} 159 159 - options={{ 160 160 - year: "numeric", 161 161 - month: "long", 162 162 - day: "2-digit", 163 163 - }} 164 164 - /> 165 165 - )}{" "} 166 166 - </p> 167 167 - {comments > 0 || quotes > 0 ? "| " : ""} 168 168 - {quotes > 0 && ( 151 151 + <div className="text-sm text-tertiary flex gap-1 flex-wrap pt-2"> 152 152 + <p className="text-sm text-tertiary "> 153 153 + {doc_record.publishedAt && ( 154 154 + <LocalizedDate 155 155 + dateString={doc_record.publishedAt} 156 156 + options={{ 157 157 + year: "numeric", 158 158 + month: "long", 159 159 + day: "2-digit", 160 160 + }} 161 161 + /> 162 162 + )}{" "} 163 163 + </p> 164 164 + {comments > 0 || quotes > 0 ? "| " : ""} 165 165 + {quotes > 0 && ( 166 166 + <SpeedyLink 167 167 + href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=quotes`} 168 168 + className="flex flex-row gap-0 text-sm text-tertiary items-center flex-wrap" 169 169 + > 170 170 + <QuoteTiny /> {quotes} 171 171 + </SpeedyLink> 172 172 + )} 173 173 + {comments > 0 && 174 174 + record?.preferences?.showComments !== false && ( 169 175 <SpeedyLink 170 170 - href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=quotes`} 176 176 + href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=comments`} 171 177 className="flex flex-row gap-0 text-sm text-tertiary items-center flex-wrap" 172 178 > 173 173 - <QuoteTiny /> {quotes} 179 179 + <CommentTiny /> {comments} 174 180 </SpeedyLink> 175 181 )} 176 176 - {comments > 0 && 177 177 - record?.preferences?.showComments !== false && ( 178 178 - <SpeedyLink 179 179 - href={`${getPublicationURL(publication)}/${uri.rkey}?interactionDrawer=comments`} 180 180 - className="flex flex-row gap-0 text-sm text-tertiary items-center flex-wrap" 181 181 - > 182 182 - <CommentTiny /> {comments} 183 183 - </SpeedyLink> 184 184 - )} 185 185 - </div> 186 182 </div> 187 187 - <hr className="last:hidden border-border-light" /> 188 188 - </React.Fragment> 189 189 - ); 190 190 - })} 191 191 - </div> 183 183 + </div> 184 184 + <hr className="last:hidden border-border-light" /> 185 185 + </React.Fragment> 186 186 + ); 187 187 + })} 192 188 </div> 193 193 - </div> 189 189 + </PublicationHomeLayout> 194 190 </PublicationBackgroundProvider> 195 191 </PublicationThemeProvider> 196 192 );

+3

components/Pages/Page.tsx

··· 16 16 import { PageOptions } from "./PageOptions"; 17 17 import { CardThemeProvider } from "components/ThemeManager/ThemeProvider"; 18 18 import { useDrawerOpen } from "app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer"; 19 19 + import { usePreserveScroll } from "src/hooks/usePreserveScroll"; 19 20 20 21 export function Page(props: { 21 22 entityID: string; ··· 83 84 pageType: "canvas" | "doc"; 84 85 drawerOpen: boolean | undefined; 85 86 }) => { 87 87 + let { ref } = usePreserveScroll(props.id); 86 88 return ( 87 89 // this div wraps the contents AND the page options. 88 90 // it needs to be its own div because this container does NOT scroll, and therefore doesn't clip the absolutely positioned pageOptions ··· 95 97 it needs to be a separate div so that the user can scroll from anywhere on the page if there isn't a card border 96 98 */} 97 99 <div 100 100 + ref={ref} 98 101 onClick={props.onClickAction} 99 102 id={props.id} 100 103 className={`