+1 -1

actions/getIdentityData.ts

reviewed

··· 25 25 id, 26 26 root_entity, 27 27 permission_token_rights(*), 28 28 - leaflets_in_publications(*) 28 28 + leaflets_in_publications(*, publications(*)) 29 29 ) 30 30 ) 31 31 )`,

+2 -4

app/[leaflet_id]/Actions.tsx

reviewed

··· 5 5 } from "app/lish/createPub/getPublicationURL"; 6 6 import { ActionButton } from "components/ActionBar/ActionButton"; 7 7 import { GoBackSmall } from "components/Icons/GoBackSmall"; 8 8 + import { PaintSmall } from "components/Icons/PaintSmall"; 8 9 import { PublishSmall } from "components/Icons/PublishSmall"; 9 9 - import { useIdentityData } from "components/IdentityProvider"; 10 10 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 11 11 import { useToaster } from "components/Toast"; 12 12 import { DotLoader } from "components/utils/DotLoader"; 13 13 import Link from "next/link"; 14 14 import { useParams, useRouter } from "next/navigation"; 15 15 - import router from "next/router"; 16 15 import { useState } from "react"; 17 17 - import { useBlocks } from "src/hooks/queries/useBlocks"; 18 18 - import { useReplicache, useEntity } from "src/replicache"; 16 16 + import { useReplicache } from "src/replicache"; 19 17 import { Json } from "supabase/database.types"; 20 18 21 19 export const BackToPubButton = (props: {

+1

app/[leaflet_id]/Footer.tsx

reviewed

··· 44 44 <PublishButton /> 45 45 <ShareOptions /> 46 46 <HelpPopover /> 47 47 + <ThemePopover entityID={props.entityID} /> 47 48 </ActionFooter> 48 49 ) : ( 49 50 <ActionFooter>

+1

app/[leaflet_id]/Sidebar.tsx

reviewed

··· 38 38 <> 39 39 <PublishButton /> 40 40 <ShareOptions /> 41 41 + <ThemePopover entityID={props.leaflet_id} /> 41 42 <HelpPopover /> 42 43 <hr className="text-border" /> 43 44 <BackToPubButton publication={pub.publications} />

+1 -1

app/[leaflet_id]/publish/PublishPost.tsx

reviewed

··· 29 29 { state: "default" } | { state: "success"; post_url: string } 30 30 >({ state: "default" }); 31 31 return ( 32 32 - <div className="publishPage w-screen h-full bg-[#FDFCFA] flex sm:pt-0 pt-4 sm:place-items-center justify-center"> 32 32 + <div className="publishPage w-screen h-full bg-bg-page flex sm:pt-0 pt-4 sm:place-items-center justify-center"> 33 33 {publishState.state === "default" ? ( 34 34 <PublishPostForm setPublishState={setPublishState} {...props} /> 35 35 ) : (

+1 -1

app/home/LeafletList.tsx

reviewed

··· 64 64 65 65 return ( 66 66 <div className="homeLeafletGrid grow w-full h-full"> 67 67 - <div className="grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-4 gap-x-4 sm:gap-6 grow pt-3 pb-28 px-2 sm:pt-6 sm:pb-12 sm:pl-6 sm:pr-1"> 67 67 + <div className="grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-8 gap-x-4 sm:gap-x-6 sm:gap-y-8 grow pt-3 pb-28 px-2 sm:pt-6 sm:pb-12 sm:pl-6 sm:pr-1"> 68 68 {leaflets.map((leaflet, index) => ( 69 69 <ReplicacheProvider 70 70 disablePull

+1 -1

app/home/LeafletPreview.tsx

reviewed

··· 61 61 62 62 return ( 63 63 <div className="relative max-h-40 h-40"> 64 64 - <ThemeProvider local entityID={root}> 64 64 + <ThemeProvider local entityID={root} className="!w-full"> 65 65 <div className="rounded-lg sm:hover:shadow-sm overflow-clip border border-border outline outline-2 outline-transparent outline-offset-1 sm:hover:outline-border bg-bg-leaflet grow w-full h-full"> 66 66 {state === "normal" ? ( 67 67 <div className="relative w-full h-full">

+42 -19

app/home/Publications.tsx

reviewed

··· 13 13 import { Json } from "supabase/database.types"; 14 14 import { PubLeafletPublication } from "lexicons/api"; 15 15 import { AtUri } from "@atproto/syntax"; 16 16 + import { blobRefToSrc } from "src/utils/blobRefToSrc"; 17 17 + import { PublicationThemeProvider } from "components/ThemeManager/PublicationThemeProvider"; 16 18 17 19 export const MyPublicationList = () => { 18 20 let { identity } = useIdentityData(); ··· 53 55 54 56 function Publication(props: { uri: string; name: string; record: Json }) { 55 57 let record = props.record as PubLeafletPublication.Record | null; 58 58 + let pub_creator = new AtUri(props.uri).host; 59 59 + let backgroundImage = record?.theme?.backgroundImage?.image?.ref 60 60 + ? blobRefToSrc(record?.theme?.backgroundImage?.image?.ref, pub_creator) 61 61 + : null; 62 62 + 63 63 + let backgroundImageRepeat = record?.theme?.backgroundImage?.repeat; 64 64 + let backgroundImageSize = record?.theme?.backgroundImage?.width || 500; 65 65 + let showPageBackground = !!record?.theme?.showPageBackground; 56 66 return ( 57 57 - <Link 58 58 - className="pubListItem sm:w-full sm:min-w-0 min-w-40 w-36 px-1 sm:px-2 py-1 sm:h-max hover:no-underline " 59 59 - href={`${getBasePublicationURL(props)}/dashboard`} 60 60 - > 61 61 - <div className="p-3 h-full w-full flex flex-col gap-1 place-items-center opaque-container rounded-lg! text-secondary text-center transparent-outline outline-2 outline-offset-1 hover:outline-border grow "> 62 62 - {record?.icon && ( 63 63 - <div 64 64 - style={{ 65 65 - backgroundRepeat: "no-repeat", 66 66 - backgroundPosition: "center", 67 67 - backgroundSize: "cover", 68 68 - backgroundImage: `url(/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(record.icon?.ref as unknown as { $link: string })["$link"]})`, 69 69 - }} 70 70 - className="w-6 h-6 rounded-full" 71 71 - /> 72 72 - )} 73 73 - <h4 className="font-bold w-full truncate my-auto">{props.name}</h4> 74 74 - </div> 75 75 - </Link> 67 67 + <PublicationThemeProvider record={record} local pub_creator={pub_creator}> 68 68 + <Link 69 69 + className="pubListItem sm:w-full sm:min-w-0 min-w-40 w-36 px-1 sm:px-2 py-1 sm:h-max hover:no-underline " 70 70 + href={`${getBasePublicationURL(props)}/dashboard`} 71 71 + > 72 72 + <div 73 73 + style={{ 74 74 + backgroundImage: `url(${backgroundImage})`, 75 75 + backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat", 76 76 + backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`, 77 77 + }} 78 78 + className="p-3 h-full w-full flex flex-col gap-1 place-items-center bg-bg-leaflet border border-border-light rounded-lg text-secondary text-center transparent-outline outline-2 outline-offset-1 hover:outline-border grow " 79 79 + > 80 80 + {record?.icon && ( 81 81 + <div 82 82 + style={{ 83 83 + backgroundRepeat: "no-repeat", 84 84 + backgroundPosition: "center", 85 85 + backgroundSize: "cover", 86 86 + backgroundImage: `url(/api/atproto_images?did=${new AtUri(props.uri).host}&cid=${(record.icon?.ref as unknown as { $link: string })["$link"]})`, 87 87 + }} 88 88 + className="w-6 h-6 rounded-full" 89 89 + /> 90 90 + )} 91 91 + <h4 92 92 + className={`font-bold w-full truncate my-auto ${showPageBackground ? "bg-[rgba(var(--bg-page),0.8)]" : ""}`} 93 93 + > 94 94 + {props.name} 95 95 + </h4> 96 96 + </div> 97 97 + </Link> 98 98 + </PublicationThemeProvider> 76 99 ); 77 100 } 78 101

-91

app/lish/PostList.tsx

reviewed

··· 1 1 - "use client"; 2 2 - import Link from "next/link"; 3 3 - import { Json } from "supabase/database.types"; 4 4 - import { PubLeafletDocument } from "lexicons/api"; 5 5 - import { useIdentityData } from "components/IdentityProvider"; 6 6 - import { useParams } from "next/navigation"; 7 7 - import { AtUri } from "@atproto/syntax"; 8 8 - import { getPublicationURL } from "./createPub/getPublicationURL"; 9 9 - 10 10 - export const PostList = (props: { 11 11 - isFeed?: boolean; 12 12 - publication: { uri: string; record: Json; name: string }; 13 13 - posts: { 14 14 - documents: { 15 15 - data: Json; 16 16 - indexed_at: string; 17 17 - uri: string; 18 18 - } | null; 19 19 - }[]; 20 20 - }) => { 21 21 - if (props.posts.length === 0) { 22 22 - if (props.isFeed) { 23 23 - return ( 24 24 - <div className="italic text-tertiary w-full text-center pt-4"> 25 25 - Subscribe to publications to see posts in your feed 26 26 - </div> 27 27 - ); 28 28 - } 29 29 - return null; 30 30 - } 31 31 - 32 32 - return ( 33 33 - <div className="pubPostList flex flex-col gap-3"> 34 34 - {props.posts 35 35 - .sort((a, b) => { 36 36 - return a.documents?.indexed_at! > b.documents?.indexed_at! ? -1 : 1; 37 37 - }) 38 38 - .map((post, index) => { 39 39 - let p = post.documents?.data as PubLeafletDocument.Record; 40 40 - let uri = new AtUri(post.documents?.uri!); 41 41 - 42 42 - return ( 43 43 - <PostListItem 44 44 - {...p} 45 45 - publication_data={props.publication} 46 46 - key={index} 47 47 - isFeed={props.isFeed} 48 48 - uri={uri} 49 49 - /> 50 50 - ); 51 51 - })} 52 52 - </div> 53 53 - ); 54 54 - }; 55 55 - 56 56 - const PostListItem = ( 57 57 - props: { 58 58 - publication_data: { uri: string; record: Json; name: string }; 59 59 - isFeed?: boolean; 60 60 - uri: AtUri; 61 61 - } & PubLeafletDocument.Record, 62 62 - ) => { 63 63 - let { identity } = useIdentityData(); 64 64 - let params = useParams(); 65 65 - return ( 66 66 - <div className="pubPostListItem flex flex-col"> 67 67 - {props.isFeed && ( 68 68 - <Link 69 69 - href={getPublicationURL(props.publication_data)} 70 70 - className="font-bold text-tertiary hover:no-underline text-sm " 71 71 - > 72 72 - {props.publication} 73 73 - </Link> 74 74 - )} 75 75 - 76 76 - <Link 77 77 - href={`${getPublicationURL(props.publication_data)}/${props.uri.rkey}/`} 78 78 - className="pubPostListContent flex flex-col hover:no-underline hover:text-accent-contrast" 79 79 - > 80 80 - <h4>{props.title}</h4> 81 81 - {/* <div className="text-secondary text-sm pt-1">placeholder description</div> */} 82 82 - <div className="flex gap-2 text-sm text-tertiary"> 83 83 - {/* <div className="">{props.publishedAt}</div> */} 84 84 - {/* <Separator classname="h-4" /> */} 85 85 - <div>by {params.handle}</div> 86 86 - </div> 87 87 - <hr className="border-border-light mt-3" /> 88 88 - </Link> 89 89 - </div> 90 90 - ); 91 91 - };

+108 -77

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

reviewed

··· 5 5 import { 6 6 PubLeafletDocument, 7 7 PubLeafletPagesLinearDocument, 8 8 + PubLeafletPublication, 9 9 + PubLeafletThemeColor, 8 10 } from "lexicons/api"; 9 11 import { Metadata } from "next"; 10 12 import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 11 11 - import { ThemeProvider } from "components/ThemeManager/ThemeProvider"; 13 13 + import { TextBlock } from "./TextBlock"; 12 14 import { BskyAgent } from "@atproto/api"; 13 15 import { SubscribeWithBluesky } from "app/lish/Subscribe"; 16 16 + import { 17 17 + PublicationBackgroundProvider, 18 18 + PublicationThemeProvider, 19 19 + } from "components/ThemeManager/PublicationThemeProvider"; 14 20 import { PostContent } from "./PostContent"; 15 21 import { getIdentityData } from "actions/getIdentityData"; 22 22 + import { EditTiny } from "components/Icons/EditTiny"; 16 23 17 24 export async function generateMetadata(props: { 18 25 params: Promise<{ publication: string; did: string; rkey: string }>; ··· 86 93 if (PubLeafletPagesLinearDocument.isMain(firstPage)) { 87 94 blocks = firstPage.blocks || []; 88 95 } 89 89 - return ( 90 90 - <ThemeProvider entityID={null}> 91 91 - <div className="flex flex-col px-3 sm:px-4 py-3 sm:py-9 w-full bg-[#FDFCFA] h-full min-h-fit overflow-auto"> 92 92 - <div className="max-w-prose mx-auto w-full"> 93 93 - <div className="pubHeader flex flex-col pb-5"> 94 94 - <Link 95 95 - className="font-bold hover:no-underline text-accent-contrast" 96 96 - href={getPublicationURL( 97 97 - document.documents_in_publications[0].publications, 98 98 - )} 99 99 - > 100 100 - {decodeURIComponent((await props.params).publication)} 101 101 - </Link> 102 102 - <h2 className="">{record.title}</h2> 103 103 - {record.description ? ( 104 104 - <p className="italic text-secondary">{record.description}</p> 105 105 - ) : null} 106 96 107 107 - <div className="text-sm text-tertiary pt-3 flex gap-1"> 108 108 - {profile ? ( 109 109 - <> 110 110 - <a 111 111 - className="text-tertiary" 112 112 - href={`https://bsky.app/profile/${profile.handle}`} 113 113 - > 114 114 - by {profile.displayName || profile.handle} 115 115 - </a> 116 116 - </> 97 97 + let pubRecord = document.documents_in_publications[0]?.publications 98 98 + .record as PubLeafletPublication.Record; 99 99 + 100 100 + let hasPageBackground = !!pubRecord.theme?.showPageBackground; 101 101 + 102 102 + return ( 103 103 + <PublicationThemeProvider 104 104 + record={pubRecord} 105 105 + pub_creator={ 106 106 + document.documents_in_publications[0].publications.identity_did 107 107 + } 108 108 + > 109 109 + <PublicationBackgroundProvider 110 110 + record={pubRecord} 111 111 + pub_creator={ 112 112 + document.documents_in_publications[0].publications.identity_did 113 113 + } 114 114 + > 115 115 + <div 116 116 + className={`flex flex-col sm:py-6 h-full ${hasPageBackground ? "max-w-prose mx-auto sm:px-0 px-[6px] py-2" : "w-full overflow-y-scroll"}`} 117 117 + > 118 118 + <div 119 119 + className={`sm:max-w-prose max-w-[var(--page-width-units)] w-[1000px] mx-auto px-3 sm:px-4 py-3 ${hasPageBackground ? "overflow-auto h-full bg-[rgba(var(--bg-page),var(--bg-page-alpha))] rounded-lg border border-border" : "h-fit "}`} 120 120 + > 121 121 + <div className="postHeader flex flex-col pb-5"> 122 122 + <Link 123 123 + className="font-bold hover:no-underline text-accent-contrast" 124 124 + href={getPublicationURL( 125 125 + document.documents_in_publications[0].publications, 126 126 + )} 127 127 + > 128 128 + {decodeURIComponent((await props.params).publication)} 129 129 + </Link> 130 130 + <h2 className="leading-snug">{record.title}</h2> 131 131 + {record.description ? ( 132 132 + <p className="italic text-secondary pt-0.5"> 133 133 + {record.description} 134 134 + </p> 117 135 ) : null} 118 118 - {record.publishedAt ? ( 119 119 - <> 120 120 - {" "} 121 121 - | 122 122 - <p> 123 123 - Published{" "} 124 124 - {new Date(record.publishedAt).toLocaleDateString( 125 125 - undefined, 126 126 - { 127 127 - year: "numeric", 128 128 - month: "long", 129 129 - day: "2-digit", 130 130 - }, 131 131 - )} 132 132 - </p> 133 133 - </> 134 134 - ) : null} 135 135 - {identity && 136 136 - identity.atp_did === 137 137 - document.documents_in_publications[0]?.publications 138 138 - .identity_did && ( 136 136 + 137 137 + <div className="text-sm text-tertiary pt-3 flex gap-1"> 138 138 + {profile ? ( 139 139 <> 140 140 - {" "} 141 141 - | 142 140 <a 143 143 - href={`https://leaflet.pub/${document.leaflets_in_publications[0].leaflet}`} 141 141 + className="text-tertiary" 142 142 + href={`https://bsky.app/profile/${profile.handle}`} 144 143 > 145 145 - Edit Post 144 144 + by {profile.displayName || profile.handle} 146 145 </a> 147 146 </> 148 148 - )} 147 147 + ) : null} 148 148 + {record.publishedAt ? ( 149 149 + <> 150 150 + | 151 151 + <p> 152 152 + {new Date(record.publishedAt).toLocaleDateString( 153 153 + undefined, 154 154 + { 155 155 + year: "numeric", 156 156 + month: "long", 157 157 + day: "2-digit", 158 158 + }, 159 159 + )} 160 160 + </p> 161 161 + </> 162 162 + ) : null} 163 163 + {identity && 164 164 + identity.atp_did === 165 165 + document.documents_in_publications[0]?.publications 166 166 + .identity_did && ( 167 167 + <> 168 168 + {" "} 169 169 + | 170 170 + <a 171 171 + href={`https://leaflet.pub/${document.leaflets_in_publications[0].leaflet}`} 172 172 + > 173 173 + Edit Post 174 174 + </a> 175 175 + </> 176 176 + )} 177 177 + </div> 149 178 </div> 179 179 + <PostContent blocks={blocks} did={did} /> 180 180 + <hr className="border-border-light mb-4 mt-2" /> 181 181 + {identity && 182 182 + identity.atp_did === 183 183 + document.documents_in_publications[0]?.publications 184 184 + .identity_did ? ( 185 185 + <a 186 186 + href={`https://leaflet.pub/${document.leaflets_in_publications[0].leaflet}`} 187 187 + className="flex gap-2 items-center hover:!no-underline selected-outline px-2 py-0.5 bg-accent-1 text-accent-2 font-bold w-fit rounded-lg !border-accent-1 !outline-accent-1 mx-auto" 188 188 + > 189 189 + <EditTiny /> Edit Post 190 190 + </a> 191 191 + ) : ( 192 192 + <SubscribeWithBluesky 193 193 + isPost 194 194 + pub_uri={document.documents_in_publications[0].publications.uri} 195 195 + subscribers={ 196 196 + document.documents_in_publications[0].publications 197 197 + .publication_subscriptions 198 198 + } 199 199 + pubName={decodeURIComponent((await props.params).publication)} 200 200 + /> 201 201 + )} 150 202 </div> 151 151 - <PostContent blocks={blocks} did={did} /> 152 152 - <hr className="border-border-light mb-4 mt-2" /> 153 153 - {identity && 154 154 - identity.atp_did === 155 155 - document.documents_in_publications[0]?.publications.identity_did ? ( 156 156 - <a 157 157 - href={`https://leaflet.pub/${document.leaflets_in_publications[0].leaflet}`} 158 158 - > 159 159 - Edit Post 160 160 - </a> 161 161 - ) : ( 162 162 - <SubscribeWithBluesky 163 163 - isPost 164 164 - pub_uri={document.documents_in_publications[0].publications.uri} 165 165 - subscribers={ 166 166 - document.documents_in_publications[0].publications 167 167 - .publication_subscriptions 168 168 - } 169 169 - pubName={decodeURIComponent((await props.params).publication)} 170 170 - /> 171 171 - )} 172 203 </div> 173 173 - </div> 174 174 - </ThemeProvider> 204 204 + </PublicationBackgroundProvider> 205 205 + </PublicationThemeProvider> 175 206 ); 176 207 }

+18 -1

app/lish/[did]/[publication]/dashboard/Actions.tsx

reviewed

··· 15 15 import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 16 16 import { usePublicationData } from "./PublicationSWRProvider"; 17 17 import { useSmoker } from "components/Toast"; 18 18 + import { PaintSmall } from "components/Icons/PaintSmall"; 19 19 + import { PubThemeSetter } from "components/ThemeManager/PubThemeSetter"; 18 20 19 21 export const Actions = (props: { publication: string }) => { 20 22 return ( ··· 31 33 </Media> 32 34 <NewDraftActionButton publication={props.publication} /> 33 35 <PublicationShareButton /> 36 36 + <PublicationThemeButton /> 34 37 <PublicationSettingsButton publication={props.publication} /> 35 38 <hr className="border-border-light" /> 36 39 <Media mobile={false}> ··· 104 107 return ( 105 108 <Popover 106 109 asChild 107 107 - className="w-80" 110 110 + className="max-w-xs" 108 111 trigger={ 109 112 <ActionButton 110 113 id="pub-settings-button" ··· 117 120 </Popover> 118 121 ); 119 122 } 123 123 + 124 124 + function PublicationThemeButton() { 125 125 + return ( 126 126 + <Popover 127 127 + asChild 128 128 + className="max-w-xs pb-0 !bg-white" 129 129 + trigger={ 130 130 + <ActionButton id="pub-theme-button" icon=<PaintSmall /> label="Theme" /> 131 131 + } 132 132 + > 133 133 + <PubThemeSetter /> 134 134 + </Popover> 135 135 + ); 136 136 + }

+4 -4

app/lish/[did]/[publication]/dashboard/DraftList.tsx

reviewed

··· 5 5 import React, { useState } from "react"; 6 6 import { usePublicationData } from "./PublicationSWRProvider"; 7 7 import { Menu, MenuItem } from "components/Layout"; 8 8 - import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny"; 9 8 import { deleteDraft } from "./deleteDraft"; 10 9 import { DeleteSmall } from "components/Icons/DeleteSmall"; 11 10 import { PrimaryKey } from "drizzle-orm/sqlite-core"; 12 11 import { ButtonPrimary } from "components/Buttons"; 12 12 + import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; 13 13 14 14 export function DraftList() { 15 15 let { data: pub_data } = usePublicationData(); 16 16 if (!pub_data) return null; 17 17 return ( 18 18 - <div className="flex flex-col gap-4 pb-8 sm:pb-12"> 18 18 + <div className="flex flex-col gap-4 pb-4"> 19 19 <NewDraftSecondaryButton fullWidth publication={pub_data?.uri} /> 20 20 {pub_data.leaflets_in_publications 21 21 .filter((d) => !d.doc) ··· 53 53 align="end" 54 54 asChild 55 55 trigger={ 56 56 - <button className="text-secondary hover:accent-primary border border-accent-2 rounded-md h-min w-min pt-2.5"> 57 57 - <MoreOptionsTiny className="rotate-90 h-min w-min " /> 56 56 + <button className="text-secondary rounded-md selected-outline !border-transparent hover:!border-border "> 57 57 + <MoreOptionsVerticalTiny /> 58 58 </button> 59 59 } 60 60 >

+42 -19

app/lish/[did]/[publication]/dashboard/PublicationDashboard.tsx

reviewed

··· 1 1 "use client"; 2 2 import { BlobRef } from "@atproto/lexicon"; 3 3 import { useState } from "react"; 4 4 + import { useIsMobile } from "src/hooks/isMobile"; 5 5 + import { theme } from "tailwind.config"; 6 6 + import { usePublicationData } from "./PublicationSWRProvider"; 7 7 + import { PubLeafletPublication } from "lexicons/api"; 4 8 5 9 type Tabs = { [tabName: string]: React.ReactNode }; 6 10 export function PublicationDashboard<T extends Tabs>(props: { ··· 10 14 icon: BlobRef | null; 11 15 did: string; 12 16 }) { 17 17 + let { data: pub } = usePublicationData(); 18 18 + let showPageBackground = !!(pub?.record as PubLeafletPublication.Record) 19 19 + ?.theme?.showPageBackground; 13 20 let [tab, setTab] = useState(props.defaultTab); 14 21 let content = props.tabs[tab]; 15 22 16 23 return ( 17 17 - <div className="pubDashWrapper w-full max-w-[var(--page-width-units)] flex flex-col items-stretch px-4 sm:px-3"> 18 18 - <div className="pubDashTabWrapper flex flex-row gap-2 w-full justify-between border-b border-border text-secondary items-center"> 19 19 - {props.icon && ( 24 24 + <> 25 25 + <div className="pubDashHeader flex flex-row gap-2 w-full justify-between border-b border-border text-secondary items-center "> 26 26 + <div className="max-w-full w-[1000px] h-full "> 20 27 <div 21 21 - className="shrink-0 w-5 h-5 rounded-full" 22 22 - style={{ 23 23 - backgroundImage: `url(/api/atproto_images?did=${props.did}&cid=${(props.icon.ref as unknown as { $link: string })["$link"]})`, 24 24 - backgroundRepeat: "no-repeat", 25 25 - backgroundPosition: "center", 26 26 - backgroundSize: "cover", 27 27 - }} 28 28 - /> 29 29 - )}{" "} 30 30 - <div className="font-bold grow text-tertiary max-w-full truncate pr-2 w-[1000px]"> 31 31 - {props.name} 28 28 + className={`flex gap-2 h-fit py-0.5 pl-1 pr-2 w-fit rounded-md ${showPageBackground ? "bg-[rgba(var(--bg-page),0.8)]" : ""}`} 29 29 + > 30 30 + {props.icon && ( 31 31 + <div 32 32 + className="pubDashLogo shrink-0 w-6 h-6 rounded-full border-2 border-bg-page " 33 33 + style={{ 34 34 + backgroundImage: `url(/api/atproto_images?did=${props.did}&cid=${(props.icon.ref as unknown as { $link: string })["$link"]})`, 35 35 + backgroundRepeat: "no-repeat", 36 36 + backgroundPosition: "center", 37 37 + backgroundSize: "cover", 38 38 + }} 39 39 + /> 40 40 + )} 41 41 + <div className="pubDashName font-bold grow text-tertiary max-w-full truncate sm:block hidden"> 42 42 + {props.name} 43 43 + </div> 44 44 + </div> 32 45 </div> 33 33 - <div className="pubDashTabs flex flex-row gap-2"> 46 46 + <div className="pubDashTabs flex flex-row gap-1"> 34 47 {Object.keys(props.tabs).map((t) => ( 35 48 <Tab 36 49 key={t} 37 50 name={t} 38 51 selected={t === tab} 39 52 onSelect={() => setTab(t)} 53 53 + showPageBackground={showPageBackground} 40 54 /> 41 55 ))} 42 56 </div> 43 57 </div> 44 44 - <div className="pubDashContent pt-4">{content}</div> 45 45 - </div> 58 58 + <div 59 59 + className={`pubDashContent py-4 px-3 sm:px-4 h-full overflow-auto ${showPageBackground ? "rounded-b-md border border-border border-t-0 bg-[rgba(var(--bg-page),var(--bg-page-alpha))]" : ""}`} 60 60 + > 61 61 + {content} 62 62 + </div> 63 63 + </> 46 64 ); 47 65 } 48 66 49 49 - function Tab(props: { name: string; selected: boolean; onSelect: () => void }) { 67 67 + function Tab(props: { 68 68 + name: string; 69 69 + selected: boolean; 70 70 + showPageBackground: boolean; 71 71 + onSelect: () => void; 72 72 + }) { 50 73 return ( 51 74 <div 52 52 - className={`pubTabs border bg-[#FDFCFA] border-b-0 px-2 pt-1 pb-0.5 rounded-t-md border-border hover:cursor-pointer ${props.selected ? "text-accent-1 font-bold -mb-[1px]" : ""}`} 75 75 + className={`pubTabs border border-b-0 px-2 pt-1 pb-0.5 rounded-t-md border-border hover:cursor-pointer ${props.selected ? "text-accent-1 font-bold -mb-[1px]" : ""} ${props.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))]" : ""}`} 53 76 onClick={() => props.onSelect()} 54 77 > 55 78 {props.name}

+29 -1

app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx

reviewed

··· 2 2 import { AppBskyActorProfile } from "lexicons/api"; 3 3 import { usePublicationData } from "./PublicationSWRProvider"; 4 4 import { blobRefToSrc } from "src/utils/blobRefToSrc"; 5 5 + import { ButtonPrimary } from "components/Buttons"; 6 6 + import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 7 7 + import { useSmoker } from "components/Toast"; 5 8 6 9 export function PublicationSubscribers() { 7 10 let { data: publication } = usePublicationData(); 11 11 + let smoker = useSmoker(); 12 12 + 8 13 if (!publication) return <div>null</div>; 9 14 if (publication.publication_subscriptions.length === 0) 10 10 - return <div>No subscribers yet!</div>; 15 15 + return ( 16 16 + <div className="italic text-tertiary flex flex-col gap-0 text-center justify-center pt-4"> 17 17 + <p className="font-bold"> No subscribers yet </p> 18 18 + <p>Start sharing your publication!</p> 19 19 + <ButtonPrimary 20 20 + className="mx-auto mt-2" 21 21 + onClick={(e) => { 22 22 + e.preventDefault(); 23 23 + let rect = (e.currentTarget as Element)?.getBoundingClientRect(); 24 24 + navigator.clipboard.writeText(getPublicationURL(publication!)); 25 25 + smoker({ 26 26 + position: { 27 27 + x: rect ? rect.left + (rect.right - rect.left) / 2 : 0, 28 28 + y: rect ? rect.top + 26 : 0, 29 29 + }, 30 30 + text: "Copied Publication URL!", 31 31 + }); 32 32 + }} 33 33 + > 34 34 + Copy Share Link 35 35 + </ButtonPrimary> 36 36 + </div> 37 37 + ); 38 38 + 11 39 return ( 12 40 <div> 13 41 <h2>{publication.publication_subscriptions.length} Subscribers </h2>

+26 -19

app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx

reviewed

··· 9 9 import { useParams } from "next/navigation"; 10 10 import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 11 11 import { Menu, MenuItem } from "components/Layout"; 12 12 - import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny"; 13 12 import { deletePost } from "./deletePost"; 14 13 import { mutate } from "swr"; 15 14 import { Button } from "react-aria-components"; 16 15 import { ButtonPrimary } from "components/Buttons"; 16 16 + import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny"; 17 17 18 18 export function PublishedPostsList() { 19 19 let { data: publication } = usePublicationData(); ··· 26 26 </div> 27 27 ); 28 28 return ( 29 29 - <div className="publishedList w-full flex flex-col gap-4 pb-8 sm:pb-12"> 29 29 + <div className="publishedList w-full flex flex-col gap-4 pb-4"> 30 30 {publication.documents_in_publications 31 31 .sort((a, b) => { 32 32 let aRecord = a.documents?.data! as PubLeafletDocument.Record; ··· 49 49 50 50 return ( 51 51 <Fragment key={doc.documents?.uri}> 52 52 - <div className="flex w-full "> 53 53 - <Link 54 54 - target="_blank" 55 55 - href={`${getPublicationURL(publication)}/${uri.rkey}`} 56 56 - className="publishedPost grow flex flex-col hover:!no-underline" 57 57 - > 58 58 - <h3 className="text-primary">{record.title}</h3> 52 52 + <div className="flex gap-2 w-full "> 53 53 + <div className="publishedPost grow flex flex-col hover:!no-underline"> 54 54 + <div className="flex justify-between gap-2"> 55 55 + <a 56 56 + className="hover:!no-underline" 57 57 + target="_blank" 58 58 + href={`${getPublicationURL(publication)}/${uri.rkey}`} 59 59 + > 60 60 + <h3 className="text-primary grow leading-snug"> 61 61 + {record.title} 62 62 + </h3> 63 63 + </a> 64 64 + <div className="flex justify-start align-top flex-row gap-1"> 65 65 + {leaflet && ( 66 66 + <Link className="pt-[6px]" href={`/${leaflet.leaflet}`}> 67 67 + <EditTiny /> 68 68 + </Link> 69 69 + )} 70 70 + <Options document_uri={doc.documents.uri} /> 71 71 + </div> 72 72 + </div> 73 73 + 59 74 {record.description ? ( 60 75 <p className="italic text-secondary"> 61 76 {record.description} ··· 74 89 )} 75 90 </p> 76 91 ) : null} 77 77 - </Link> 78 78 - <div className="flex justify-start align-top flex-row"> 79 79 - {leaflet && ( 80 80 - <Link className="pt-[6px]" href={`/${leaflet.leaflet}`}> 81 81 - <EditTiny /> 82 82 - </Link> 83 83 - )} 84 84 - <Options document_uri={doc.documents.uri} /> 85 92 </div> 86 93 </div> 87 94 <hr className="last:hidden border-border-light" /> ··· 98 105 align="end" 99 106 asChild 100 107 trigger={ 101 101 - <button className="text-secondary hover:accent-primary border border-accent-2 rounded-md h-min w-min pt-2.5"> 102 102 - <MoreOptionsTiny className="rotate-90 h-min w-min " /> 108 108 + <button className="text-secondary rounded-md selected-outline !border-transparent hover:!border-border h-min"> 109 109 + <MoreOptionsVerticalTiny /> 103 110 </button> 104 111 } 105 112 >

+16 -9

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

reviewed

··· 8 8 import { PublicationDashboard } from "./PublicationDashboard"; 9 9 import { DraftList } from "./DraftList"; 10 10 import { getIdentityData } from "actions/getIdentityData"; 11 11 - import { ThemeProvider } from "components/ThemeManager/ThemeProvider"; 12 11 import { Actions } from "./Actions"; 13 12 import React from "react"; 14 13 import { get_publication_data } from "app/api/rpc/[command]/get_publication_data"; 15 14 import { PublicationSWRDataProvider } from "./PublicationSWRProvider"; 16 15 import { PublishedPostsList } from "./PublishedPostsLists"; 17 17 - import { PubLeafletPublication } from "lexicons/api"; 16 16 + import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api"; 18 17 import { PublicationSubscribers } from "./PublicationSubscribers"; 18 18 + import { 19 19 + PublicationThemeProvider, 20 20 + PublicationThemeProviderDashboard, 21 21 + } from "components/ThemeManager/PublicationThemeProvider"; 22 22 + import { blobRefToSrc } from "src/utils/blobRefToSrc"; 19 23 20 24 export async function generateMetadata(props: { 21 25 params: Promise<{ publication: string; did: string }>; ··· 61 65 ); 62 66 63 67 let record = publication?.record as PubLeafletPublication.Record | null; 68 68 + 69 69 + let showPageBackground = !!record?.theme?.showPageBackground; 70 70 + 64 71 if (!publication || identity.atp_did !== publication.identity_did) 65 72 return <PubNotFound />; 66 73 ··· 71 78 publication_name={publication.name} 72 79 publication_data={publication} 73 80 > 74 74 - <ThemeProvider entityID={null}> 75 75 - <div className="w-screen h-full flex place-items-center bg-[#FDFCFA]"> 76 76 - <div className="relative w-max h-full flex sm:flex-row flex-col sm:items-stretch pwa-padding"> 81 81 + <PublicationThemeProviderDashboard record={record}> 82 82 + <div className="pubDashWrapper relative w-max h-full flex items-stretch"> 83 83 + <div className="flex sm:flex-row flex-col max-h-full h-full"> 77 84 <div 78 78 - className="spacer flex justify-end items-start" 85 85 + className="pubDashSidebarWrapper flex justify-end items-start " 79 86 style={{ width: `calc(50vw - ((var(--page-width-units)/2))` }} 80 87 > 81 81 - <div className="relative w-16 justify-items-end"> 88 88 + <div className="pubDashSidebar relative w-16 justify-items-end"> 82 89 <Sidebar className="mt-6 p-2 "> 83 90 <Actions publication={publication.uri} /> 84 91 </Sidebar> 85 92 </div> 86 93 </div> 87 94 <div 88 88 - className={`h-full overflow-y-scroll pt-4 sm:pt-8 max-w-[var(--page-width-units)]`} 95 95 + className={`pubDash grow sm:h-full h-32 w-full flex flex-col items-stretch pt-2 sm:pt-6 ml-[6px] sm:ml-0 max-w-[var(--page-width-units)] ${showPageBackground ? "sm:pb-8 pb-1" : "pb-0"}`} 89 96 > 90 97 <PublicationDashboard 91 98 did={did} ··· 104 111 </Footer> 105 112 </div> 106 113 </div> 107 107 - </ThemeProvider> 114 114 + </PublicationThemeProviderDashboard> 108 115 </PublicationSWRDataProvider> 109 116 ); 110 117 } catch (e) {

+100 -77

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

reviewed

··· 4 4 import { ThemeProvider } from "components/ThemeManager/ThemeProvider"; 5 5 import { get_publication_data } from "app/api/rpc/[command]/get_publication_data"; 6 6 import { AtUri } from "@atproto/syntax"; 7 7 - import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api"; 7 7 + import { 8 8 + PubLeafletDocument, 9 9 + PubLeafletPublication, 10 10 + PubLeafletThemeColor, 11 11 + } from "lexicons/api"; 8 12 import Link from "next/link"; 9 13 import { getPublicationURL } from "app/lish/createPub/getPublicationURL"; 10 14 import { BskyAgent } from "@atproto/api"; 11 15 import { SubscribeWithBluesky } from "app/lish/Subscribe"; 12 16 import React from "react"; 17 17 + import { 18 18 + PublicationBackgroundProvider, 19 19 + PublicationThemeProvider, 20 20 + } from "components/ThemeManager/PublicationThemeProvider"; 13 21 14 22 export async function generateMetadata(props: { 15 23 params: Promise<{ publication: string; did: string }>; ··· 58 66 59 67 let record = publication?.record as PubLeafletPublication.Record | null; 60 68 69 69 + let showPageBackground = record?.theme?.showPageBackground; 70 70 + 61 71 if (!publication) return <PubNotFound />; 62 72 try { 63 73 return ( 64 64 - <ThemeProvider entityID={null}> 65 65 - <div className="publicationWrapper pwa-padding w-screen h-full min-h-fit flex place-items-center bg-[#FDFCFA]"> 66 66 - <div className="publication max-w-prose w-full mx-auto h-full sm:pt-8 pt-4 px-3 pb-12 sm:pb-8 "> 67 67 - <div className="flex flex-col pb-8 w-full text-center justify-center "> 68 68 - <div className="flex flex-col gap-3 justify-center place-items-center"> 74 74 + <PublicationThemeProvider 75 75 + record={record} 76 76 + pub_creator={publication.identity_did} 77 77 + > 78 78 + <PublicationBackgroundProvider 79 79 + record={record} 80 80 + pub_creator={publication.identity_did} 81 81 + > 82 82 + <div 83 83 + 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"}`} 84 84 + > 85 85 + <div 86 86 + className={`pub sm:max-w-prose max-w-[var(--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"}`} 87 87 + > 88 88 + <div className="pubHeader flex flex-col pb-8 w-full text-center justify-center "> 69 89 {record?.icon && ( 70 90 <div 71 71 - className="shrink-0 w-10 h-10 rounded-full" 91 91 + className="shrink-0 w-10 h-10 rounded-full mx-auto" 72 92 style={{ 73 93 backgroundImage: `url(/api/atproto_images?did=${did}&cid=${(record.icon.ref as unknown as { $link: string })["$link"]})`, 74 94 backgroundRepeat: "no-repeat", ··· 77 97 }} 78 98 /> 79 99 )} 80 80 - <h2 className="text-accent-contrast sm:text-xl text-[22px] pb-2 sm:pb-1"> 100 100 + <h2 className="text-accent-contrast sm:text-xl text-[22px] pt-1 "> 81 101 {publication.name} 82 102 </h2> 103 103 + <p className="sm:text-lg text-secondary"> 104 104 + {record?.description}{" "} 105 105 + </p> 106 106 + {profile && ( 107 107 + <p className="italic text-tertiary sm:text-base text-sm"> 108 108 + <strong className="">by {profile.displayName}</strong>{" "} 109 109 + <a 110 110 + className="text-tertiary" 111 111 + href={`https://bsky.app/profile/${profile.handle}`} 112 112 + > 113 113 + @{profile.handle} 114 114 + </a> 115 115 + </p> 116 116 + )} 117 117 + <div className="sm:pt-4 pt-4"> 118 118 + <SubscribeWithBluesky 119 119 + pubName={publication.name} 120 120 + pub_uri={publication.uri} 121 121 + subscribers={publication.publication_subscriptions} 122 122 + /> 123 123 + </div> 83 124 </div> 84 84 - <p className="sm:text-lg text-secondary pb-1"> 85 85 - {record?.description}{" "} 86 86 - </p> 87 87 - {profile && ( 88 88 - <p className="italic text-tertiary sm:text-base text-sm"> 89 89 - <strong className="">by {profile.displayName}</strong>{" "} 90 90 - <a 91 91 - className="text-tertiary" 92 92 - href={`https://bsky.app/profile/${profile.handle}`} 93 93 - > 94 94 - @{profile.handle} 95 95 - </a> 96 96 - </p> 97 97 - )} 98 98 - <div className="sm:pt-4 pt-4"> 99 99 - <SubscribeWithBluesky 100 100 - pubName={publication.name} 101 101 - pub_uri={publication.uri} 102 102 - subscribers={publication.publication_subscriptions} 103 103 - /> 125 125 + <div className="publicationPostList w-full flex flex-col gap-4"> 126 126 + {publication.documents_in_publications 127 127 + .filter((d) => !!d?.documents) 128 128 + .sort((a, b) => { 129 129 + let aRecord = a.documents 130 130 + ?.data! as PubLeafletDocument.Record; 131 131 + let bRecord = b.documents 132 132 + ?.data! as PubLeafletDocument.Record; 133 133 + const aDate = aRecord.publishedAt 134 134 + ? new Date(aRecord.publishedAt) 135 135 + : new Date(0); 136 136 + const bDate = bRecord.publishedAt 137 137 + ? new Date(bRecord.publishedAt) 138 138 + : new Date(0); 139 139 + return bDate.getTime() - aDate.getTime(); // Sort by most recent first 140 140 + }) 141 141 + .map((doc) => { 142 142 + if (!doc.documents) return null; 143 143 + let uri = new AtUri(doc.documents.uri); 144 144 + let record = doc.documents 145 145 + .data as PubLeafletDocument.Record; 146 146 + return ( 147 147 + <React.Fragment key={doc.documents?.uri}> 148 148 + <div className="flex w-full "> 149 149 + <Link 150 150 + href={`${getPublicationURL(publication)}/${uri.rkey}`} 151 151 + className="publishedPost grow flex flex-col hover:!no-underline" 152 152 + > 153 153 + <h3 className="text-primary">{record.title}</h3> 154 154 + <p className="italic text-secondary"> 155 155 + {record.description} 156 156 + </p> 157 157 + <p className="text-sm text-tertiary pt-2"> 158 158 + {record.publishedAt && 159 159 + new Date(record.publishedAt).toLocaleDateString( 160 160 + undefined, 161 161 + { 162 162 + year: "numeric", 163 163 + month: "long", 164 164 + day: "2-digit", 165 165 + }, 166 166 + )}{" "} 167 167 + </p> 168 168 + </Link> 169 169 + </div> 170 170 + <hr className="last:hidden border-border-light" /> 171 171 + </React.Fragment> 172 172 + ); 173 173 + })} 104 174 </div> 105 175 </div> 106 106 - <div className="publicationPostList w-full flex flex-col gap-4"> 107 107 - {publication.documents_in_publications 108 108 - .filter((d) => !!d?.documents) 109 109 - .sort((a, b) => { 110 110 - let aRecord = a.documents?.data! as PubLeafletDocument.Record; 111 111 - let bRecord = b.documents?.data! as PubLeafletDocument.Record; 112 112 - const aDate = aRecord.publishedAt 113 113 - ? new Date(aRecord.publishedAt) 114 114 - : new Date(0); 115 115 - const bDate = bRecord.publishedAt 116 116 - ? new Date(bRecord.publishedAt) 117 117 - : new Date(0); 118 118 - return bDate.getTime() - aDate.getTime(); // Sort by most recent first 119 119 - }) 120 120 - .map((doc) => { 121 121 - if (!doc.documents) return null; 122 122 - let uri = new AtUri(doc.documents.uri); 123 123 - let record = doc.documents.data as PubLeafletDocument.Record; 124 124 - return ( 125 125 - <React.Fragment key={doc.documents?.uri}> 126 126 - <div className="flex w-full "> 127 127 - <Link 128 128 - href={`${getPublicationURL(publication)}/${uri.rkey}`} 129 129 - className="publishedPost grow flex flex-col hover:!no-underline" 130 130 - > 131 131 - <h3 className="text-primary">{record.title}</h3> 132 132 - <p className="italic text-secondary"> 133 133 - {record.description} 134 134 - </p> 135 135 - <p className="text-sm text-tertiary pt-2"> 136 136 - {record.publishedAt && 137 137 - new Date(record.publishedAt).toLocaleDateString( 138 138 - undefined, 139 139 - { 140 140 - year: "numeric", 141 141 - month: "long", 142 142 - day: "2-digit", 143 143 - }, 144 144 - )}{" "} 145 145 - </p> 146 146 - </Link> 147 147 - </div> 148 148 - <hr className="last:hidden border-border-light" /> 149 149 - </React.Fragment> 150 150 - ); 151 151 - })} 152 152 - </div> 153 176 </div> 154 154 - </div> 155 155 - </ThemeProvider> 177 177 + </PublicationBackgroundProvider> 178 178 + </PublicationThemeProvider> 156 179 ); 157 180 } catch (e) { 158 181 console.log(e);

+1 -1

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

reviewed

··· 3 3 4 4 export default function SubscribeSuccess() { 5 5 return ( 6 6 - <div className="h-full w-screen bg-[#FDFCFA] flex place-items-center text-center "> 6 6 + <div className="h-full w-screen bg-bg-leaflet flex place-items-center text-center "> 7 7 <div className="container p-4 max-w-md mx-auto justify-center place-items-center flex flex-col gap-2"> 8 8 <h3 className="text-secondary">You've Subscribed!</h3> 9 9 <div className="text-tertiary">

+104 -1

app/lish/createPub/updatePublication.ts

reviewed

··· 1 1 "use server"; 2 2 import { TID } from "@atproto/common"; 3 3 - import { AtpBaseClient, PubLeafletPublication } from "lexicons/api"; 3 3 + import { 4 4 + AtpBaseClient, 5 5 + PubLeafletPublication, 6 6 + PubLeafletThemeColor, 7 7 + } from "lexicons/api"; 4 8 import { createOauthClient } from "src/atproto-oauth"; 5 9 import { getIdentityData } from "actions/getIdentityData"; 6 10 import { supabaseServerClient } from "supabase/serverClient"; 7 11 import { Json } from "supabase/database.types"; 8 12 import { AtUri } from "@atproto/syntax"; 9 13 import { redirect } from "next/navigation"; 14 14 + import { $Typed } from "@atproto/api"; 15 15 + import { ids } from "lexicons/api/lexicons"; 10 16 11 17 export async function updatePublication({ 12 18 uri, ··· 130 136 .single(); 131 137 return { success: true, publication }; 132 138 } 139 139 + 140 140 + type Color = 141 141 + | $Typed<PubLeafletThemeColor.Rgb, "pub.leaflet.theme.color#rgb"> 142 142 + | $Typed<PubLeafletThemeColor.Rgba, "pub.leaflet.theme.color#rgba">; 143 143 + export async function updatePublicationTheme({ 144 144 + uri, 145 145 + theme, 146 146 + }: { 147 147 + uri: string; 148 148 + theme: { 149 149 + backgroundImage?: File | null; 150 150 + backgroundRepeat?: number | null; 151 151 + backgroundColor: Color; 152 152 + primary: Color; 153 153 + pageBackground: Color; 154 154 + showPageBackground: boolean; 155 155 + accentBackground: Color; 156 156 + accentText: Color; 157 157 + }; 158 158 + }) { 159 159 + const oauthClient = await createOauthClient(); 160 160 + let identity = await getIdentityData(); 161 161 + if (!identity || !identity.atp_did) return; 162 162 + 163 163 + let credentialSession = await oauthClient.restore(identity.atp_did); 164 164 + let agent = new AtpBaseClient( 165 165 + credentialSession.fetchHandler.bind(credentialSession), 166 166 + ); 167 167 + let { data: existingPub } = await supabaseServerClient 168 168 + .from("publications") 169 169 + .select("*") 170 170 + .eq("uri", uri) 171 171 + .single(); 172 172 + if (!existingPub || existingPub.identity_did !== identity.atp_did) return; 173 173 + let aturi = new AtUri(existingPub.uri); 174 174 + 175 175 + let oldRecord = existingPub.record as PubLeafletPublication.Record; 176 176 + let record: PubLeafletPublication.Record = { 177 177 + ...oldRecord, 178 178 + $type: "pub.leaflet.publication", 179 179 + theme: { 180 180 + backgroundImage: theme.backgroundImage 181 181 + ? { 182 182 + $type: "pub.leaflet.theme.backgroundImage", 183 183 + image: ( 184 184 + await agent.com.atproto.repo.uploadBlob( 185 185 + new Uint8Array(await theme.backgroundImage.arrayBuffer()), 186 186 + { encoding: theme.backgroundImage.type }, 187 187 + ) 188 188 + )?.data.blob, 189 189 + width: theme.backgroundRepeat || undefined, 190 190 + repeat: !!theme.backgroundRepeat, 191 191 + } 192 192 + : theme.backgroundImage === null 193 193 + ? undefined 194 194 + : oldRecord.theme?.backgroundImage, 195 195 + backgroundColor: theme.backgroundColor 196 196 + ? { 197 197 + ...theme.backgroundColor, 198 198 + } 199 199 + : undefined, 200 200 + primary: { 201 201 + ...theme.primary, 202 202 + }, 203 203 + pageBackground: { 204 204 + ...theme.pageBackground, 205 205 + }, 206 206 + showPageBackground: theme.showPageBackground, 207 207 + accentBackground: { 208 208 + ...theme.accentBackground, 209 209 + }, 210 210 + accentText: { 211 211 + ...theme.accentText, 212 212 + }, 213 213 + }, 214 214 + }; 215 215 + 216 216 + let result = await agent.com.atproto.repo.putRecord({ 217 217 + repo: credentialSession.did!, 218 218 + rkey: aturi.rkey, 219 219 + record, 220 220 + collection: record.$type, 221 221 + validate: false, 222 222 + }); 223 223 + 224 224 + //optimistically write to our db! 225 225 + let { data: publication, error } = await supabaseServerClient 226 226 + .from("publications") 227 227 + .update({ 228 228 + name: record.name, 229 229 + record: record as Json, 230 230 + }) 231 231 + .eq("uri", uri) 232 232 + .select() 233 233 + .single(); 234 234 + return { success: true, publication }; 235 235 + }

+1 -1

components/ActionBar/Footer.tsx

reviewed

··· 5 5 <Media 6 6 mobile 7 7 className={` 8 8 - actionFooter touch-none 8 8 + actionFooter touch-none shrink-0 9 9 w-full z-10 10 10 px-2 pt-1 pwa-padding-bottom 11 11 flex justify-start gap-1

+11 -10

components/Checkbox.tsx

reviewed

··· 1 1 import { CheckboxChecked } from "./Icons/CheckboxChecked"; 2 2 import { CheckboxEmpty } from "./Icons/CheckboxEmpty"; 3 3 import { Props } from "./Icons/Props"; 4 4 + import React, { forwardRef, type JSX } from "react"; 4 5 5 6 export function Checkbox(props: { 6 7 checked: boolean; ··· 33 34 ); 34 35 } 35 36 36 36 - export function Radio(props: { 37 37 - checked: boolean; 38 38 - onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; 39 39 - id: string; 40 40 - name: string; 41 41 - value: string; 42 42 - children: React.ReactNode; 43 43 - radioEmptyClassName?: string; 44 44 - radioCheckedClassName?: string; 45 45 - }) { 37 37 + type RadioProps = Omit<JSX.IntrinsicElements["input"], "content">; 38 38 + 39 39 + export function Radio( 40 40 + props: { 41 41 + onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; 42 42 + children: React.ReactNode; 43 43 + radioEmptyClassName?: string; 44 44 + radioCheckedClassName?: string; 45 45 + } & JSX.IntrinsicElements["input"], 46 46 + ) { 46 47 return ( 47 48 <label 48 49 htmlFor={props.id}

+5 -1

components/Pages/useCardBorderHidden.ts

reviewed

··· 1 1 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 2 2 + import { PubLeafletPublication } from "lexicons/api"; 2 3 import { useEntity, useReplicache } from "src/replicache"; 3 4 4 5 export function useCardBorderHidden(entityID: string) { ··· 9 10 let cardBorderHidden = 10 11 useEntity(entityID, "theme/card-border-hidden") || rootCardBorderHidden; 11 12 if (!cardBorderHidden && !rootCardBorderHidden) { 12 12 - if (pub) return true; 13 13 + if (pub?.publications?.record) { 14 14 + let record = pub.publications.record as PubLeafletPublication.Record; 15 15 + return !record.theme?.showPageBackground; 16 16 + } 13 17 return false; 14 18 } 15 19 return (cardBorderHidden || rootCardBorderHidden)?.data.value;

+4 -4

components/ThemeManager/AccentThemePickers.tsx components/ThemeManager/Pickers/AccentPickers.tsx

reviewed

··· 1 1 "use client"; 2 2 3 3 import { useMemo } from "react"; 4 4 - import { pickers, setColorAttribute } from "./ThemeSetter"; 4 4 + import { pickers, setColorAttribute } from "../ThemeSetter"; 5 5 import { ColorPicker } from "./ColorPicker"; 6 6 import { useReplicache } from "src/replicache"; 7 7 - import { useColorAttribute } from "./useColorAttribute"; 7 7 + import { useColorAttribute } from "../useColorAttribute"; 8 8 9 9 - export const AccentThemePickers = (props: { 9 9 + export const AccentPickers = (props: { 10 10 entityID: string; 11 11 openPicker: pickers; 12 12 setOpenPicker: (thisPicker: pickers) => void; ··· 27 27 <div 28 28 className="themeLeafletControls text-accent-2 flex flex-col gap-2 h-full bg-bg-leaflet p-2 rounded-md border border-accent-2 shadow-[0_0_0_1px_rgb(var(--accent-1))]" 29 29 style={{ 30 30 - backgroundColor: "rgba(var(--accent-contrast), 0.5)", 30 30 + backgroundColor: "rgba(var(--accent-1), 0.5)", 31 31 }} 32 32 > 33 33 <ColorPicker

+11 -7

components/ThemeManager/ColorPicker.tsx components/ThemeManager/Pickers/ColorPicker.tsx

reviewed

··· 12 12 SliderTrack, 13 13 ColorSwatch, 14 14 } from "react-aria-components"; 15 15 - import { pickers } from "./ThemeSetter"; 15 15 + import { pickers } from "../ThemeSetter"; 16 16 import { Separator } from "components/Layout"; 17 17 import { onMouseDown } from "src/utils/iosInputMouseDown"; 18 18 ··· 54 54 backgroundSize: "cover", 55 55 }} 56 56 /> 57 57 - <strong className="">{props.label}</strong> 57 57 + <strong className="w-max">{props.label}</strong> 58 58 </button> 59 59 60 60 <div className="flex gap-1"> 61 61 {props.value === undefined ? ( 62 62 <div>default</div> 63 63 + ) : props.disabled ? ( 64 64 + <div className="text-tertiary italic">hidden</div> 63 65 ) : ( 64 66 <ColorField className="w-fit gap-1"> 65 67 <Input 66 66 - disabled={props.disabled} 67 68 onMouseDown={onMouseDown} 68 69 onFocus={(e) => { 69 70 e.currentTarget.setSelectionRange( ··· 83 84 /> 84 85 </ColorField> 85 86 )} 86 86 - {props.alpha && ( 87 87 + {props.alpha && !props.disabled && ( 87 88 <> 88 89 <Separator classname="my-1" /> 89 89 - <ColorField className="w-fit pl-[6px]" channel="alpha"> 90 90 + <ColorField 91 91 + className={`w-[48px] pl-[6px] ${props.disabled ? "opacity-50" : ""}`} 92 92 + channel="alpha" 93 93 + > 90 94 <Input 91 95 disabled={props.disabled} 92 96 onMouseDown={onMouseDown} ··· 101 105 e.currentTarget.blur(); 102 106 } else return; 103 107 }} 104 104 - className="w-[72px] bg-transparent outline-none text-primary disabled:text-tertiary" 108 108 + className="w-[72px] bg-transparent outline-none " 105 109 /> 106 110 </ColorField> 107 111 </> ··· 130 134 colorSpace="hsb" 131 135 className="w-full mt-1 rounded-full" 132 136 style={{ 133 133 - backgroundImage: `url(./transparent-bg.png)`, 137 137 + backgroundImage: `url(/transparent-bg.png)`, 134 138 backgroundRepeat: "repeat", 135 139 backgroundSize: "8px", 136 140 }}

+1 -1

components/ThemeManager/ImageSetters.tsx components/ThemeManager/Pickers/ImagePicker.tsx

reviewed

··· 1 1 import * as Slider from "@radix-ui/react-slider"; 2 2 - import { theme } from "../../tailwind.config"; 2 2 + import { theme } from "../../../tailwind.config"; 3 3 4 4 import { Color } from "react-aria-components"; 5 5

-223

components/ThemeManager/LeafletBGPicker.tsx

reviewed

··· 1 1 - "use client"; 2 2 - 3 3 - import { 4 4 - ColorPicker as SpectrumColorPicker, 5 5 - parseColor, 6 6 - Color, 7 7 - ColorArea, 8 8 - ColorThumb, 9 9 - ColorSlider, 10 10 - Input, 11 11 - ColorField, 12 12 - SliderTrack, 13 13 - ColorSwatch, 14 14 - } from "react-aria-components"; 15 15 - import { pickers, setColorAttribute } from "./ThemeSetter"; 16 16 - import { thumbStyle } from "./ColorPicker"; 17 17 - import { ImageInput, ImageSettings } from "./ImageSetters"; 18 18 - import { useEntity, useReplicache } from "src/replicache"; 19 19 - import { useColorAttribute } from "components/ThemeManager/useColorAttribute"; 20 20 - import { Separator } from "components/Layout"; 21 21 - import { onMouseDown } from "src/utils/iosInputMouseDown"; 22 22 - import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 23 23 - 24 24 - export const LeafletBGPicker = (props: { 25 25 - entityID: string; 26 26 - openPicker: pickers; 27 27 - thisPicker: pickers; 28 28 - setOpenPicker: (thisPicker: pickers) => void; 29 29 - closePicker: () => void; 30 30 - setValue: (c: Color) => void; 31 31 - card?: boolean; 32 32 - }) => { 33 33 - let bgImage = useEntity( 34 34 - props.entityID, 35 35 - props.card ? "theme/card-background-image" : "theme/background-image", 36 36 - ); 37 37 - let bgColor = useColorAttribute( 38 38 - props.entityID, 39 39 - props.card ? "theme/card-background" : "theme/page-background", 40 40 - ); 41 41 - let open = props.openPicker == props.thisPicker; 42 42 - let { rep } = useReplicache(); 43 43 - 44 44 - return ( 45 45 - <> 46 46 - <div className="bgPickerLabel flex justify-between place-items-center "> 47 47 - <div className="bgPickerColorLabel flex gap-2 items-center"> 48 48 - <button 49 49 - onClick={() => { 50 50 - if (props.openPicker === props.thisPicker) { 51 51 - props.setOpenPicker("null"); 52 52 - } else { 53 53 - props.setOpenPicker(props.thisPicker); 54 54 - } 55 55 - }} 56 56 - className="flex gap-2 items-center" 57 57 - > 58 58 - <ColorSwatch 59 59 - color={bgColor} 60 60 - className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`} 61 61 - style={{ 62 62 - backgroundImage: bgImage?.data.src 63 63 - ? `url(${bgImage.data.src})` 64 64 - : undefined, 65 65 - backgroundSize: "cover", 66 66 - }} 67 67 - /> 68 68 - <strong 69 69 - className={`${props.card ? "text-primary" : "text-[#595959]"}`} 70 70 - > 71 71 - {props.card ? "Page" : "Background"} 72 72 - </strong> 73 73 - </button> 74 74 - 75 75 - <div className="flex"> 76 76 - {bgImage ? ( 77 77 - <div 78 78 - className={`${props.card ? "text-secondary" : "text-[#969696]"}`} 79 79 - > 80 80 - Image 81 81 - </div> 82 82 - ) : ( 83 83 - <> 84 84 - <ColorField className="w-fit gap-1" value={bgColor}> 85 85 - <Input 86 86 - onMouseDown={onMouseDown} 87 87 - onFocus={(e) => { 88 88 - e.currentTarget.setSelectionRange( 89 89 - 1, 90 90 - e.currentTarget.value.length, 91 91 - ); 92 92 - }} 93 93 - onPaste={(e) => { 94 94 - console.log(e); 95 95 - }} 96 96 - onKeyDown={(e) => { 97 97 - if (e.key === "Enter") { 98 98 - e.currentTarget.blur(); 99 99 - } else return; 100 100 - }} 101 101 - onBlur={(e) => { 102 102 - props.setValue(parseColor(e.currentTarget.value)); 103 103 - }} 104 104 - className={`w-[72px] bg-transparent outline-none ${props.card ? "text-primary" : "text-[#595959]"}`} 105 105 - /> 106 106 - </ColorField> 107 107 - {props.card && ( 108 108 - <> 109 109 - <Separator classname="my-1" /> 110 110 - 111 111 - <SpectrumColorPicker 112 112 - value={bgColor} 113 113 - onChange={setColorAttribute( 114 114 - rep, 115 115 - props.entityID, 116 116 - )( 117 117 - props.card 118 118 - ? "theme/card-background" 119 119 - : "theme/page-background", 120 120 - )} 121 121 - > 122 122 - <ColorField className="w-fit pl-[6px]" channel="alpha"> 123 123 - <Input 124 124 - onMouseDown={onMouseDown} 125 125 - onFocus={(e) => { 126 126 - e.currentTarget.setSelectionRange( 127 127 - 0, 128 128 - e.currentTarget.value.length - 1, 129 129 - ); 130 130 - }} 131 131 - onKeyDown={(e) => { 132 132 - if (e.key === "Enter") { 133 133 - e.currentTarget.blur(); 134 134 - } else return; 135 135 - }} 136 136 - className="w-[48px] bg-transparent outline-none text-primary" 137 137 - /> 138 138 - </ColorField> 139 139 - </SpectrumColorPicker> 140 140 - </> 141 141 - )} 142 142 - </> 143 143 - )} 144 144 - </div> 145 145 - </div> 146 146 - <label className="hover:cursor-pointer h-fit"> 147 147 - <div 148 148 - className={ 149 149 - props.card 150 150 - ? "text-tertiary hover:text-accent-contrast" 151 151 - : "text-[#8C8C8C] hover:text-[#0000FF]" 152 152 - } 153 153 - > 154 154 - <BlockImageSmall /> 155 155 - </div> 156 156 - <div className="hidden"> 157 157 - <ImageInput 158 158 - {...props} 159 159 - onChange={() => { 160 160 - props.setOpenPicker(props.thisPicker); 161 161 - }} 162 162 - /> 163 163 - </div> 164 164 - </label> 165 165 - </div> 166 166 - {open && ( 167 167 - <div className="bgImageAndColorPicker w-full flex flex-col gap-2 "> 168 168 - <SpectrumColorPicker 169 169 - value={bgColor} 170 170 - onChange={setColorAttribute( 171 171 - rep, 172 172 - props.entityID, 173 173 - )(props.card ? "theme/card-background" : "theme/page-background")} 174 174 - > 175 175 - {bgImage ? ( 176 176 - <ImageSettings 177 177 - entityID={props.entityID} 178 178 - card={props.card} 179 179 - setValue={props.setValue} 180 180 - /> 181 181 - ) : ( 182 182 - <> 183 183 - <ColorArea 184 184 - className="w-full h-[128px] rounded-md" 185 185 - colorSpace="hsb" 186 186 - xChannel="saturation" 187 187 - yChannel="brightness" 188 188 - > 189 189 - <ColorThumb className={thumbStyle} /> 190 190 - </ColorArea> 191 191 - <ColorSlider 192 192 - colorSpace="hsb" 193 193 - className="w-full " 194 194 - channel="hue" 195 195 - > 196 196 - <SliderTrack className="h-2 w-full rounded-md"> 197 197 - <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 198 198 - </SliderTrack> 199 199 - </ColorSlider> 200 200 - </> 201 201 - )} 202 202 - {props.card && ( 203 203 - <ColorSlider 204 204 - colorSpace="hsb" 205 205 - className="w-full mt-1 rounded-full" 206 206 - style={{ 207 207 - backgroundImage: `url(./transparent-bg.png)`, 208 208 - backgroundRepeat: "repeat", 209 209 - backgroundSize: "8px", 210 210 - }} 211 211 - channel="alpha" 212 212 - > 213 213 - <SliderTrack className="h-2 w-full rounded-md"> 214 214 - <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 215 215 - </SliderTrack> 216 216 - </ColorSlider> 217 217 - )} 218 218 - </SpectrumColorPicker> 219 219 - </div> 220 220 - )} 221 221 - </> 222 222 - ); 223 223 - };

+134 -71

components/ThemeManager/PageThemePickers.tsx components/ThemeManager/Pickers/PageThemePickers.tsx

reviewed

··· 17 17 import { useColorAttribute } from "components/ThemeManager/useColorAttribute"; 18 18 import { Separator } from "components/Layout"; 19 19 import { onMouseDown } from "src/utils/iosInputMouseDown"; 20 20 - import { pickers, setColorAttribute } from "./ThemeSetter"; 21 21 - import { ImageInput, ImageSettings } from "./ImageSetters"; 20 20 + import { pickers, setColorAttribute } from "../ThemeSetter"; 21 21 + import { ImageInput, ImageSettings } from "./ImagePicker"; 22 22 23 23 import { ColorPicker, thumbStyle } from "./ColorPicker"; 24 24 import { BlockImageSmall } from "components/Icons/BlockImageSmall"; ··· 27 27 28 28 export const PageThemePickers = (props: { 29 29 entityID: string; 30 30 - home?: boolean; 31 30 openPicker: pickers; 32 31 setOpenPicker: (thisPicker: pickers) => void; 33 32 }) => { ··· 37 36 }, [rep, props.entityID]); 38 37 39 38 let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc"; 40 40 - let pageValue = useColorAttribute(props.entityID, "theme/card-background"); 41 39 let primaryValue = useColorAttribute(props.entityID, "theme/primary"); 40 40 + let pageBackgroundValue = useColorAttribute( 41 41 + props.entityID, 42 42 + "theme/card-background", 43 43 + ); 42 44 let pageBGImage = useEntity(props.entityID, "theme/card-background-image"); 43 45 let pageBorderHidden = useEntity(props.entityID, "theme/card-border-hidden"); 44 46 ··· 53 55 <hr className="border-border-light w-full" /> 54 56 </> 55 57 )} 56 56 - <ColorPicker 57 57 - disabled={pageBorderHidden?.data.value} 58 58 - label="Page" 59 59 - value={pageValue} 60 60 - setValue={set("theme/card-background")} 61 61 - thisPicker={"page"} 62 62 - openPicker={props.openPicker} 63 63 - setOpenPicker={props.setOpenPicker} 64 64 - closePicker={() => props.setOpenPicker("null")} 65 65 - alpha 66 66 - > 67 67 - {(pageBGImage === null || !pageBGImage) && ( 68 68 - <label 69 69 - className={`m-0 h-max w-full py-0.5 px-1 70 70 - bg-accent-1 outline-transparent 71 71 - rounded-md text-base font-bold text-accent-2 72 72 - hover:cursor-pointer 73 73 - flex gap-2 items-center justify-center shrink-0 74 74 - transparent-outline hover:outline-accent-1 outline-offset-1 75 75 - `} 76 76 - > 77 77 - <BlockImageSmall /> Add Background Image 78 78 - <div className="hidden"> 79 79 - <ImageInput 80 80 - entityID={props.entityID} 81 81 - onChange={() => props.setOpenPicker("page-background-image")} 82 82 - card 83 83 - /> 84 84 - </div> 85 85 - </label> 86 86 - )} 87 87 - </ColorPicker> 88 58 {pageBGImage && pageBGImage !== null && ( 89 89 - <PageBGPicker 90 90 - disabled={pageBorderHidden?.data.value} 59 59 + <PageBackgroundPicker 91 60 entityID={props.entityID} 92 92 - thisPicker={"page-background-image"} 61 61 + setValue={set("theme/card-background")} 93 62 openPicker={props.openPicker} 94 63 setOpenPicker={props.setOpenPicker} 95 95 - closePicker={() => props.setOpenPicker("null")} 96 96 - setValue={set("theme/card-background")} 97 64 /> 98 65 )} 99 99 - <ColorPicker 100 100 - label="Text" 66 66 + <PageTextPicker 101 67 value={primaryValue} 102 68 setValue={set("theme/primary")} 103 103 - thisPicker={"text"} 104 69 openPicker={props.openPicker} 105 70 setOpenPicker={props.setOpenPicker} 106 106 - closePicker={() => props.setOpenPicker("null")} 107 71 /> 108 108 - <hr /> 72 72 + <hr className="border-border-light" /> 109 73 <PageBorderHider entityID={props.entityID} /> 110 74 </div> 111 75 ); 112 76 }; 113 77 114 114 - export const PageBorderHider = (props: { entityID: string }) => { 115 115 - let { rep, rootEntity } = useReplicache(); 116 116 - let rootPageBorderHidden = useEntity(rootEntity, "theme/card-border-hidden"); 117 117 - let entityPageBorderHidden = useEntity( 118 118 - props.entityID, 119 119 - "theme/card-border-hidden", 120 120 - ); 121 121 - let pageBorderHidden = 122 122 - (entityPageBorderHidden || rootPageBorderHidden)?.data.value || false; 78 78 + export const PageBackgroundPicker = (props: { 79 79 + entityID: string; 80 80 + setValue: (c: Color) => void; 81 81 + openPicker: pickers; 82 82 + setOpenPicker: (p: pickers) => void; 83 83 + }) => { 84 84 + let pageValue = useColorAttribute(props.entityID, "theme/card-background"); 85 85 + let pageBGImage = useEntity(props.entityID, "theme/card-background-image"); 86 86 + let pageBorderHidden = useEntity(props.entityID, "theme/card-border-hidden"); 123 87 124 88 return ( 125 89 <> 126 126 - <Checkbox 127 127 - small 128 128 - className="pl-[6px] !gap-3" 129 129 - checked={pageBorderHidden} 130 130 - onChange={(e) => { 131 131 - rep?.mutate.assertFact({ 132 132 - entity: props.entityID, 133 133 - attribute: "theme/card-border-hidden", 134 134 - data: { type: "boolean", value: !pageBorderHidden }, 135 135 - }); 136 136 - }} 137 137 - > 138 138 - No Page Borders 139 139 - </Checkbox> 90 90 + {pageBGImage && pageBGImage !== null && ( 91 91 + <PageBackgroundImagePicker 92 92 + disabled={pageBorderHidden?.data.value} 93 93 + entityID={props.entityID} 94 94 + thisPicker={"page-background-image"} 95 95 + openPicker={props.openPicker} 96 96 + setOpenPicker={props.setOpenPicker} 97 97 + closePicker={() => props.setOpenPicker("null")} 98 98 + setValue={props.setValue} 99 99 + /> 100 100 + )} 101 101 + <div className="relative"> 102 102 + <PageBackgroundColorPicker 103 103 + disabled={pageBorderHidden?.data.value} 104 104 + label={pageBGImage && pageBGImage !== null ? "Menus" : "Page"} 105 105 + value={pageValue} 106 106 + setValue={props.setValue} 107 107 + thisPicker={"page"} 108 108 + openPicker={props.openPicker} 109 109 + setOpenPicker={props.setOpenPicker} 110 110 + /> 111 111 + {(pageBGImage === null || !pageBGImage) && ( 112 112 + <label 113 113 + className={` 114 114 + text-primary hover:cursor-pointer shrink-0 115 115 + absolute top-0 right-0 116 116 + `} 117 117 + > 118 118 + <BlockImageSmall /> 119 119 + <div className="hidden"> 120 120 + <ImageInput 121 121 + entityID={props.entityID} 122 122 + onChange={() => props.setOpenPicker("page-background-image")} 123 123 + card 124 124 + /> 125 125 + </div> 126 126 + </label> 127 127 + )} 128 128 + </div> 140 129 </> 141 130 ); 142 131 }; 143 132 144 144 - export const PageBGPicker = (props: { 133 133 + export const PageBackgroundColorPicker = (props: { 134 134 + disabled?: boolean; 135 135 + label: string; 136 136 + openPicker: pickers; 137 137 + thisPicker: pickers; 138 138 + setOpenPicker: (thisPicker: pickers) => void; 139 139 + setValue: (c: Color) => void; 140 140 + value: Color; 141 141 + alpha?: boolean; 142 142 + }) => { 143 143 + return ( 144 144 + <ColorPicker 145 145 + disabled={props.disabled} 146 146 + label={props.label} 147 147 + value={props.value} 148 148 + setValue={props.setValue} 149 149 + thisPicker={"page"} 150 150 + openPicker={props.openPicker} 151 151 + setOpenPicker={props.setOpenPicker} 152 152 + closePicker={() => props.setOpenPicker("null")} 153 153 + alpha={props.alpha} 154 154 + /> 155 155 + ); 156 156 + }; 157 157 + 158 158 + export const PageBackgroundImagePicker = (props: { 145 159 disabled?: boolean; 146 160 entityID: string; 147 161 openPicker: pickers; ··· 248 262 colorSpace="hsb" 249 263 className="w-full mt-1 rounded-full" 250 264 style={{ 251 251 - backgroundImage: `url(./transparent-bg.png)`, 265 265 + backgroundImage: `url(/transparent-bg.png)`, 252 266 backgroundRepeat: "repeat", 253 267 backgroundSize: "8px", 254 268 }} ··· 315 329 </div> 316 330 ); 317 331 }; 332 332 + 333 333 + export const PageTextPicker = (props: { 334 334 + openPicker: pickers; 335 335 + setOpenPicker: (thisPicker: pickers) => void; 336 336 + value: Color; 337 337 + setValue: (c: Color) => void; 338 338 + }) => { 339 339 + return ( 340 340 + <ColorPicker 341 341 + label="Text" 342 342 + value={props.value} 343 343 + setValue={props.setValue} 344 344 + thisPicker={"text"} 345 345 + openPicker={props.openPicker} 346 346 + setOpenPicker={props.setOpenPicker} 347 347 + closePicker={() => props.setOpenPicker("null")} 348 348 + /> 349 349 + ); 350 350 + }; 351 351 + 352 352 + export const PageBorderHider = (props: { entityID: string }) => { 353 353 + let { rep, rootEntity } = useReplicache(); 354 354 + let rootPageBorderHidden = useEntity(rootEntity, "theme/card-border-hidden"); 355 355 + let entityPageBorderHidden = useEntity( 356 356 + props.entityID, 357 357 + "theme/card-border-hidden", 358 358 + ); 359 359 + let pageBorderHidden = 360 360 + (entityPageBorderHidden || rootPageBorderHidden)?.data.value || false; 361 361 + 362 362 + return ( 363 363 + <> 364 364 + <Checkbox 365 365 + small 366 366 + className="pl-[6px] !gap-3" 367 367 + checked={pageBorderHidden} 368 368 + onChange={(e) => { 369 369 + rep?.mutate.assertFact({ 370 370 + entity: props.entityID, 371 371 + attribute: "theme/card-border-hidden", 372 372 + data: { type: "boolean", value: !pageBorderHidden }, 373 373 + }); 374 374 + }} 375 375 + > 376 376 + No Page Borders 377 377 + </Checkbox> 378 378 + </> 379 379 + ); 380 380 + };

+3 -3

components/ThemeManager/PageThemeSetter.tsx

reviewed

··· 2 2 import { useEntitySetContext } from "components/EntitySetProvider"; 3 3 import { pickers, SectionArrow } from "./ThemeSetter"; 4 4 5 5 - import { PageThemePickers } from "./PageThemePickers"; 5 5 + import { PageThemePickers } from "./Pickers/PageThemePickers"; 6 6 import { useState } from "react"; 7 7 import { theme } from "tailwind.config"; 8 8 import { ButtonPrimary } from "components/Buttons"; 9 9 import { PaintSmall } from "components/Icons/PaintSmall"; 10 10 - import { AccentThemePickers } from "./AccentThemePickers"; 10 10 + import { AccentPickers } from "./Pickers/AccentPickers"; 11 11 12 12 export const PageThemeSetter = (props: { entityID: string }) => { 13 13 let { rootEntity } = useReplicache(); ··· 40 40 : `calc(${leafletBGRepeat.data.value}px / 2 )`, 41 41 }} 42 42 > 43 43 - <AccentThemePickers 43 43 + <AccentPickers 44 44 entityID={props.entityID} 45 45 openPicker={openPicker} 46 46 setOpenPicker={(pickers) => setOpenPicker(pickers)}

+150

components/ThemeManager/Pickers/LeafletBGPicker.tsx

reviewed

··· 1 1 + "use client"; 2 2 + 3 3 + import { 4 4 + ColorPicker as SpectrumColorPicker, 5 5 + parseColor, 6 6 + Color, 7 7 + ColorArea, 8 8 + ColorThumb, 9 9 + ColorSlider, 10 10 + Input, 11 11 + ColorField, 12 12 + SliderTrack, 13 13 + ColorSwatch, 14 14 + } from "react-aria-components"; 15 15 + import { pickers, setColorAttribute } from "../ThemeSetter"; 16 16 + import { thumbStyle } from "./ColorPicker"; 17 17 + import { ImageInput, ImageSettings } from "./ImagePicker"; 18 18 + import { useEntity, useReplicache } from "src/replicache"; 19 19 + import { useColorAttribute } from "components/ThemeManager/useColorAttribute"; 20 20 + import { Separator } from "components/Layout"; 21 21 + import { onMouseDown } from "src/utils/iosInputMouseDown"; 22 22 + import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 23 23 + 24 24 + export const LeafletBGPicker = (props: { 25 25 + entityID: string; 26 26 + openPicker: pickers; 27 27 + thisPicker: pickers; 28 28 + setOpenPicker: (thisPicker: pickers) => void; 29 29 + closePicker: () => void; 30 30 + setValue: (c: Color) => void; 31 31 + }) => { 32 32 + let bgImage = useEntity(props.entityID, "theme/background-image"); 33 33 + let bgColor = useColorAttribute(props.entityID, "theme/page-background"); 34 34 + let open = props.openPicker == props.thisPicker; 35 35 + let { rep } = useReplicache(); 36 36 + 37 37 + return ( 38 38 + <> 39 39 + <div className="bgPickerLabel flex justify-between place-items-center "> 40 40 + <div className="bgPickerColorLabel flex gap-2 items-center"> 41 41 + <button 42 42 + onClick={() => { 43 43 + if (props.openPicker === props.thisPicker) { 44 44 + props.setOpenPicker("null"); 45 45 + } else { 46 46 + props.setOpenPicker(props.thisPicker); 47 47 + } 48 48 + }} 49 49 + className="flex gap-2 items-center" 50 50 + > 51 51 + <ColorSwatch 52 52 + color={bgColor} 53 53 + className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`} 54 54 + style={{ 55 55 + backgroundImage: bgImage?.data.src 56 56 + ? `url(${bgImage.data.src})` 57 57 + : undefined, 58 58 + backgroundSize: "cover", 59 59 + }} 60 60 + /> 61 61 + <strong className={` "text-[#595959]`}>{"Background"}</strong> 62 62 + </button> 63 63 + 64 64 + <div className="flex"> 65 65 + {bgImage ? ( 66 66 + <div className={`"text-[#969696]`}>Image</div> 67 67 + ) : ( 68 68 + <> 69 69 + <ColorField className="w-fit gap-1" value={bgColor}> 70 70 + <Input 71 71 + onMouseDown={onMouseDown} 72 72 + onFocus={(e) => { 73 73 + e.currentTarget.setSelectionRange( 74 74 + 1, 75 75 + e.currentTarget.value.length, 76 76 + ); 77 77 + }} 78 78 + onPaste={(e) => { 79 79 + console.log(e); 80 80 + }} 81 81 + onKeyDown={(e) => { 82 82 + if (e.key === "Enter") { 83 83 + e.currentTarget.blur(); 84 84 + } else return; 85 85 + }} 86 86 + onBlur={(e) => { 87 87 + props.setValue(parseColor(e.currentTarget.value)); 88 88 + }} 89 89 + className={`w-[72px] bg-transparent outline-nonetext-[#595959]`} 90 90 + /> 91 91 + </ColorField> 92 92 + </> 93 93 + )} 94 94 + </div> 95 95 + </div> 96 96 + <label className="hover:cursor-pointer h-fit"> 97 97 + <div className={"text-[#8C8C8C] hover:text-[#0000FF]"}> 98 98 + <BlockImageSmall /> 99 99 + </div> 100 100 + <div className="hidden"> 101 101 + <ImageInput 102 102 + {...props} 103 103 + onChange={() => { 104 104 + props.setOpenPicker(props.thisPicker); 105 105 + }} 106 106 + /> 107 107 + </div> 108 108 + </label> 109 109 + </div> 110 110 + {open && ( 111 111 + <div className="bgImageAndColorPicker w-full flex flex-col gap-2 "> 112 112 + <SpectrumColorPicker 113 113 + value={bgColor} 114 114 + onChange={setColorAttribute( 115 115 + rep, 116 116 + props.entityID, 117 117 + )("theme/page-background")} 118 118 + > 119 119 + {bgImage ? ( 120 120 + <ImageSettings 121 121 + entityID={props.entityID} 122 122 + setValue={props.setValue} 123 123 + /> 124 124 + ) : ( 125 125 + <> 126 126 + <ColorArea 127 127 + className="w-full h-[128px] rounded-md" 128 128 + colorSpace="hsb" 129 129 + xChannel="saturation" 130 130 + yChannel="brightness" 131 131 + > 132 132 + <ColorThumb className={thumbStyle} /> 133 133 + </ColorArea> 134 134 + <ColorSlider 135 135 + colorSpace="hsb" 136 136 + className="w-full " 137 137 + channel="hue" 138 138 + > 139 139 + <SliderTrack className="h-2 w-full rounded-md"> 140 140 + <ColorThumb className={`${thumbStyle} mt-[4px]`} /> 141 141 + </SliderTrack> 142 142 + </ColorSlider> 143 143 + </> 144 144 + )} 145 145 + </SpectrumColorPicker> 146 146 + </div> 147 147 + )} 148 148 + </> 149 149 + ); 150 150 + };

+42

components/ThemeManager/PubPickers/PubAcccentPickers.tsx

reviewed

··· 1 1 + import { pickers } from "../ThemeSetter"; 2 2 + import { Color } from "react-aria-components"; 3 3 + import { ColorPicker } from "../Pickers/ColorPicker"; 4 4 + 5 5 + export const PubAccentPickers = (props: { 6 6 + accent1: Color; 7 7 + accent2: Color; 8 8 + setAccent1: (color: Color) => void; 9 9 + setAccent2: (color: Color) => void; 10 10 + openPicker: pickers; 11 11 + setOpenPicker: (thisPicker: pickers) => void; 12 12 + }) => { 13 13 + return ( 14 14 + <> 15 15 + <div 16 16 + className="themeLeafletControls text-accent-2 flex flex-col gap-2 h-full bg-bg-leaflet p-2 rounded-md border border-accent-2 shadow-[0_0_0_1px_rgb(var(--accent-1))]" 17 17 + style={{ 18 18 + backgroundColor: "rgba(var(--accent-1), 0.5)", 19 19 + }} 20 20 + > 21 21 + <ColorPicker 22 22 + label="Accent" 23 23 + value={props.accent1} 24 24 + setValue={props.setAccent1} 25 25 + thisPicker={"accent-1"} 26 26 + openPicker={props.openPicker} 27 27 + setOpenPicker={props.setOpenPicker} 28 28 + closePicker={() => props.setOpenPicker("null")} 29 29 + /> 30 30 + <ColorPicker 31 31 + label="Text on Accent" 32 32 + value={props.accent2} 33 33 + setValue={props.setAccent2} 34 34 + thisPicker={"accent-2"} 35 35 + openPicker={props.openPicker} 36 36 + setOpenPicker={props.setOpenPicker} 37 37 + closePicker={() => props.setOpenPicker("null")} 38 38 + /> 39 39 + </div> 40 40 + </> 41 41 + ); 42 42 + };

+363

components/ThemeManager/PubPickers/PubBackgroundPickers.tsx

reviewed

··· 1 1 + import { pickers } from "../ThemeSetter"; 2 2 + import { theme } from "tailwind.config"; 3 3 + import { PageBackgroundColorPicker } from "../Pickers/PageThemePickers"; 4 4 + import { Color, ColorSwatch } from "react-aria-components"; 5 5 + import { BlockImageSmall } from "components/Icons/BlockImageSmall"; 6 6 + import { ColorPicker } from "../Pickers/ColorPicker"; 7 7 + import { CloseContrastSmall } from "components/Icons/CloseContrastSmall"; 8 8 + import * as Slider from "@radix-ui/react-slider"; 9 9 + import { Toggle } from "components/Toggle"; 10 10 + import { DeleteSmall } from "components/Icons/DeleteSmall"; 11 11 + import { ImageState } from "../PubThemeSetter"; 12 12 + import { Radio } from "components/Checkbox"; 13 13 + import { Input } from "components/Input"; 14 14 + 15 15 + export const BackgroundPicker = (props: { 16 16 + backgroundColor: Color; 17 17 + setBackgroundColor: (c: Color) => void; 18 18 + pageBackground: Color; 19 19 + setPageBackground: (c: Color) => void; 20 20 + openPicker: pickers; 21 21 + setOpenPicker: (p: pickers) => void; 22 22 + bgImage: ImageState | null; 23 23 + setBgImage: (i: ImageState | null) => void; 24 24 + hasPageBackground: boolean; 25 25 + setHasPageBackground: (s: boolean) => void; 26 26 + }) => { 27 27 + return ( 28 28 + <> 29 29 + {props.bgImage && props.bgImage !== null ? ( 30 30 + <BackgroundImagePicker 31 31 + bgColor={props.backgroundColor} 32 32 + bgImage={props.bgImage} 33 33 + setBgImage={props.setBgImage} 34 34 + thisPicker={"page-background-image"} 35 35 + openPicker={props.openPicker} 36 36 + setOpenPicker={props.setOpenPicker} 37 37 + closePicker={() => props.setOpenPicker("null")} 38 38 + setValue={props.setBackgroundColor} 39 39 + /> 40 40 + ) : ( 41 41 + <div className="relative"> 42 42 + <ColorPicker 43 43 + label={"Background"} 44 44 + value={props.backgroundColor} 45 45 + setValue={props.setBackgroundColor} 46 46 + thisPicker={"leaflet"} 47 47 + openPicker={props.openPicker} 48 48 + setOpenPicker={props.setOpenPicker} 49 49 + closePicker={() => props.setOpenPicker("null")} 50 50 + alpha={!!props.bgImage} 51 51 + /> 52 52 + {!props.bgImage && ( 53 53 + <label 54 54 + className={` 55 55 + text-[#969696] hover:cursor-pointer shrink-0 56 56 + absolute top-0 right-0 57 57 + `} 58 58 + > 59 59 + <BlockImageSmall /> 60 60 + <div className="hidden"> 61 61 + <input 62 62 + type="file" 63 63 + accept="image/*" 64 64 + hidden 65 65 + onChange={async (e) => { 66 66 + let file = e.currentTarget.files?.[0]; 67 67 + if (file) { 68 68 + const reader = new FileReader(); 69 69 + reader.onload = (e) => { 70 70 + console.log("loaded!", props.bgImage); 71 71 + props.setBgImage({ 72 72 + src: e.target?.result as string, 73 73 + file, 74 74 + repeat: null, 75 75 + }); 76 76 + props.setOpenPicker("page-background-image"); 77 77 + }; 78 78 + reader.readAsDataURL(file); 79 79 + } 80 80 + }} 81 81 + /> 82 82 + </div> 83 83 + </label> 84 84 + )} 85 85 + </div> 86 86 + )} 87 87 + <PageBackgroundColorPicker 88 88 + label={"Containers"} 89 89 + value={props.pageBackground} 90 90 + setValue={props.setPageBackground} 91 91 + thisPicker={"page"} 92 92 + openPicker={props.openPicker} 93 93 + setOpenPicker={props.setOpenPicker} 94 94 + alpha={props.hasPageBackground ? true : false} 95 95 + /> 96 96 + <hr className="border-border-light" /> 97 97 + <div className="flex gap-2 items-center"> 98 98 + <Toggle 99 99 + toggleOn={props.hasPageBackground} 100 100 + setToggleOn={() => { 101 101 + props.setHasPageBackground(!props.hasPageBackground); 102 102 + props.hasPageBackground && props.setOpenPicker("null"); 103 103 + }} 104 104 + disabledColor1="#8C8C8C" 105 105 + disabledColor2="#DBDBDB" 106 106 + /> 107 107 + <button 108 108 + className="flex gap-2 items-center" 109 109 + onClick={() => { 110 110 + props.setHasPageBackground(!props.hasPageBackground); 111 111 + props.hasPageBackground && props.setOpenPicker("null"); 112 112 + }} 113 113 + > 114 114 + <div className="font-bold">Page Background</div> 115 115 + <div className="italic text-[#8C8C8C]"> 116 116 + {props.hasPageBackground ? "" : "hidden"} 117 117 + </div> 118 118 + </button> 119 119 + </div> 120 120 + </> 121 121 + ); 122 122 + }; 123 123 + 124 124 + const BackgroundImagePicker = (props: { 125 125 + disabled?: boolean; 126 126 + bgImage: ImageState | null; 127 127 + setBgImage: (i: ImageState | null) => void; 128 128 + bgColor: Color; 129 129 + openPicker: pickers; 130 130 + thisPicker: pickers; 131 131 + setOpenPicker: (thisPicker: pickers) => void; 132 132 + closePicker: () => void; 133 133 + setValue: (c: Color) => void; 134 134 + }) => { 135 135 + let open = props.openPicker == props.thisPicker; 136 136 + 137 137 + return ( 138 138 + <> 139 139 + <div className="bgPickerColorLabel flex gap-2 items-center"> 140 140 + <button 141 141 + disabled={props.disabled} 142 142 + onClick={() => { 143 143 + if (props.openPicker === props.thisPicker) { 144 144 + props.setOpenPicker("null"); 145 145 + } else { 146 146 + props.setOpenPicker(props.thisPicker); 147 147 + } 148 148 + }} 149 149 + className="flex gap-2 items-center disabled:text-tertiary grow" 150 150 + > 151 151 + <ColorSwatch 152 152 + color={props.bgColor} 153 153 + className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C] ${props.disabled ? "opacity-50" : ""}`} 154 154 + style={{ 155 155 + backgroundImage: props.bgImage 156 156 + ? `url(${props.bgImage.src})` 157 157 + : undefined, 158 158 + backgroundPosition: "center", 159 159 + backgroundSize: "cover", 160 160 + }} 161 161 + /> 162 162 + <strong className={` text-[#595959]`}>Background</strong> 163 163 + <div className="italic text-[#8C8C8C]">image</div> 164 164 + </button> 165 165 + <div className="flex gap-1"> 166 166 + <label className="hover:cursor-pointer "> 167 167 + <div className="flex gap-2 rounded-md text-[#8C8C8C] "> 168 168 + <BlockImageSmall /> 169 169 + </div> 170 170 + <div className="hidden"> 171 171 + <input 172 172 + type="file" 173 173 + accept="image/*" 174 174 + hidden 175 175 + onChange={async (e) => { 176 176 + let file = e.currentTarget.files?.[0]; 177 177 + if (file) { 178 178 + const reader = new FileReader(); 179 179 + reader.onload = (e) => { 180 180 + if (!props.bgImage) return; 181 181 + props.setBgImage({ 182 182 + ...props.bgImage, 183 183 + src: e.target?.result as string, 184 184 + file, 185 185 + }); 186 186 + }; 187 187 + reader.readAsDataURL(file); 188 188 + } 189 189 + }} 190 190 + /> 191 191 + </div> 192 192 + </label> 193 193 + <button 194 194 + className="text-[#8C8C8C]" 195 195 + onClick={() => props.setBgImage(null)} 196 196 + > 197 197 + <DeleteSmall /> 198 198 + </button> 199 199 + </div> 200 200 + </div> 201 201 + {open && ( 202 202 + <div className="pageImagePicker flex flex-col gap-2"> 203 203 + <ImageSettings 204 204 + bgImage={props.bgImage} 205 205 + setBgImage={props.setBgImage} 206 206 + /> 207 207 + </div> 208 208 + )} 209 209 + </> 210 210 + ); 211 211 + }; 212 212 + 213 213 + export const ImageSettings = (props: { 214 214 + bgImage: ImageState | null; 215 215 + setBgImage: (i: ImageState | null) => void; 216 216 + }) => { 217 217 + return ( 218 218 + <> 219 219 + {/* <div 220 220 + style={{ 221 221 + backgroundImage: props.bgImage 222 222 + ? `url(${props.bgImage.src})` 223 223 + : undefined, 224 224 + backgroundPosition: "center", 225 225 + backgroundSize: "cover", 226 226 + }} 227 227 + className="themeBGImagePreview flex gap-2 place-items-center justify-center w-full h-[128px] bg-cover bg-center bg-no-repeat" 228 228 + > 229 229 + <label className="hover:cursor-pointer "> 230 230 + <div 231 231 + className="flex gap-2 rounded-md px-2 py-1 text-accent-contrast font-bold" 232 232 + style={{ backgroundColor: "rgba(var(--bg-page), .8" }} 233 233 + > 234 234 + <BlockImageSmall /> Change Image 235 235 + </div> 236 236 + <div className="hidden"> 237 237 + <input 238 238 + type="file" 239 239 + accept="image/*" 240 240 + hidden 241 241 + onChange={async (e) => { 242 242 + let file = e.currentTarget.files?.[0]; 243 243 + if (file) { 244 244 + const reader = new FileReader(); 245 245 + reader.onload = (e) => { 246 246 + if (!props.bgImage) return; 247 247 + props.setBgImage({ 248 248 + ...props.bgImage, 249 249 + src: e.target?.result as string, 250 250 + file, 251 251 + }); 252 252 + }; 253 253 + reader.readAsDataURL(file); 254 254 + } 255 255 + }} 256 256 + /> 257 257 + </div> 258 258 + </label> 259 259 + <button 260 260 + onClick={() => { 261 261 + props.setBgImage(null); 262 262 + }} 263 263 + > 264 264 + <CloseContrastSmall 265 265 + fill={theme.colors["accent-1"]} 266 266 + stroke={theme.colors["accent-2"]} 267 267 + /> 268 268 + </button> 269 269 + </div> */} 270 270 + <div className="themeBGImageControls font-bold flex flex-col gap-1 items-center px-3"> 271 271 + <label htmlFor="cover" className="w-full"> 272 272 + <Radio 273 273 + radioCheckedClassName="!text-[#595959]" 274 274 + radioEmptyClassName="!text-[#969696]" 275 275 + type="radio" 276 276 + id="cover" 277 277 + name="bg-image-options" 278 278 + value="cover" 279 279 + checked={!props.bgImage?.repeat} 280 280 + onChange={async (e) => { 281 281 + if (!e.currentTarget.checked) return; 282 282 + if (!props.bgImage) return; 283 283 + props.setBgImage({ ...props.bgImage, repeat: null }); 284 284 + }} 285 285 + > 286 286 + <div 287 287 + className={`w-full cursor-pointer ${!props.bgImage?.repeat ? "text-[#595959]" : " text-[#969696]"}`} 288 288 + > 289 289 + cover 290 290 + </div> 291 291 + </Radio> 292 292 + </label> 293 293 + <label htmlFor="repeat" className="pb-3 w-full"> 294 294 + <Radio 295 295 + type="radio" 296 296 + id="repeat" 297 297 + name="bg-image-options" 298 298 + value="repeat" 299 299 + radioCheckedClassName="!text-[#595959]" 300 300 + radioEmptyClassName="!text-[#969696]" 301 301 + checked={!!props.bgImage?.repeat} 302 302 + onChange={async (e) => { 303 303 + if (!e.currentTarget.checked) return; 304 304 + if (!props.bgImage) return; 305 305 + props.setBgImage({ ...props.bgImage, repeat: 500 }); 306 306 + }} 307 307 + > 308 308 + <div className="flex flex-col gap-2 w-full"> 309 309 + <div className="flex gap-2"> 310 310 + <div 311 311 + className={`shink-0 grow-0 w-fit z-10 cursor-pointer ${props.bgImage?.repeat ? "text-[#595959]" : " text-[#969696]"}`} 312 312 + > 313 313 + repeat 314 314 + </div> 315 315 + <div 316 316 + className={`flex font-normal ${props.bgImage?.repeat ? "text-[#969696]" : " text-[#C3C3C3]"}`} 317 317 + > 318 318 + <Input 319 319 + type="number" 320 320 + className="w-10 text-right appearance-none" 321 321 + max={3000} 322 322 + min={10} 323 323 + value={props.bgImage?.repeat || 500} 324 324 + onChange={(e) => { 325 325 + if (!props.bgImage) return; 326 326 + props.setBgImage({ 327 327 + ...props.bgImage, 328 328 + repeat: parseInt(e.currentTarget.value), 329 329 + }); 330 330 + }} 331 331 + />{" "} 332 332 + px 333 333 + </div> 334 334 + </div> 335 335 + <Slider.Root 336 336 + className={`relative grow flex items-center select-none touch-none w-full h-fit px-1 `} 337 337 + value={[props.bgImage?.repeat || 500]} 338 338 + max={3000} 339 339 + min={10} 340 340 + step={10} 341 341 + onValueChange={(value) => { 342 342 + if (!props.bgImage) return; 343 343 + props.setBgImage({ ...props.bgImage, repeat: value[0] }); 344 344 + }} 345 345 + > 346 346 + <Slider.Track 347 347 + className={`${props.bgImage?.repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`} 348 348 + ></Slider.Track> 349 349 + <Slider.Thumb 350 350 + className={` 351 351 + flex w-4 h-4 rounded-full border-2 border-white cursor-pointer 352 352 + ${props.bgImage?.repeat ? "bg-[#595959]" : " bg-[#C3C3C3] "} 353 353 + ${props.bgImage?.repeat && "shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C]"} `} 354 354 + aria-label="Volume" 355 355 + /> 356 356 + </Slider.Root> 357 357 + </div> 358 358 + </Radio> 359 359 + </label> 360 360 + </div> 361 361 + </> 362 362 + ); 363 363 + };

+45

components/ThemeManager/PubPickers/PubTextPickers.tsx

reviewed

··· 1 1 + import { pickers } from "../ThemeSetter"; 2 2 + import { PageTextPicker } from "../Pickers/PageThemePickers"; 3 3 + import { Color } from "react-aria-components"; 4 4 + 5 5 + export const PagePickers = (props: { 6 6 + primary: Color; 7 7 + pageBackground: Color; 8 8 + setPrimary: (color: Color) => void; 9 9 + setPageBackground: (color: Color) => void; 10 10 + openPicker: pickers; 11 11 + setOpenPicker: (thisPicker: pickers) => void; 12 12 + hasPageBackground: boolean; 13 13 + }) => { 14 14 + return ( 15 15 + <div 16 16 + className="themeLeafletControls text-primary flex flex-col gap-2 h-full bg-bg-page p-2 rounded-md border border-primary shadow-[0_0_0_1px_rgb(var(--bg-page))]" 17 17 + style={{ 18 18 + backgroundColor: props.hasPageBackground 19 19 + ? "rgba(var(--bg-page), var(--bg-page-alpha))" 20 20 + : "transparent", 21 21 + }} 22 22 + > 23 23 + <PageTextPicker 24 24 + value={props.primary} 25 25 + setValue={props.setPrimary} 26 26 + openPicker={props.openPicker} 27 27 + setOpenPicker={props.setOpenPicker} 28 28 + /> 29 29 + {/* FONT PICKERS HIDDEN FOR NOW */} 30 30 + {/* <hr className="border-border-light" /> 31 31 + <div className="flex gap-2"> 32 32 + <div className="w-6 h-6 font-bold text-center rounded-md bg-border-light"> 33 33 + Aa 34 34 + </div> 35 35 + <div className="font-bold">Header</div> <div>iA Writer</div> 36 36 + </div> 37 37 + <div className="flex gap-2"> 38 38 + <div className="w-6 h-6 place-items-center text-center rounded-md bg-border-light"> 39 39 + Aa 40 40 + </div>{" "} 41 41 + <div className="font-bold">Body</div> <div>iA Writer</div> 42 42 + </div> */} 43 43 + </div> 44 44 + ); 45 45 + };

+387

components/ThemeManager/PubThemeSetter.tsx

reviewed

··· 1 1 + import { usePublicationData } from "app/lish/[did]/[publication]/dashboard/PublicationSWRProvider"; 2 2 + import { useState } from "react"; 3 3 + import { pickers, SectionArrow } from "./ThemeSetter"; 4 4 + import { Color } from "react-aria-components"; 5 5 + import { 6 6 + PubLeafletPublication, 7 7 + PubLeafletThemeBackgroundImage, 8 8 + } from "lexicons/api"; 9 9 + import { AtUri } from "@atproto/syntax"; 10 10 + import { useLocalPubTheme } from "./PublicationThemeProvider"; 11 11 + import { BaseThemeProvider } from "./ThemeProvider"; 12 12 + import { blobRefToSrc } from "src/utils/blobRefToSrc"; 13 13 + import { ButtonSecondary } from "components/Buttons"; 14 14 + import { updatePublicationTheme } from "app/lish/createPub/updatePublication"; 15 15 + import { DotLoader } from "components/utils/DotLoader"; 16 16 + import { PagePickers } from "./PubPickers/PubTextPickers"; 17 17 + import { BackgroundPicker } from "./PubPickers/PubBackgroundPickers"; 18 18 + import { PubAccentPickers } from "./PubPickers/PubAcccentPickers"; 19 19 + import { Separator } from "components/Layout"; 20 20 + 21 21 + export type ImageState = { 22 22 + src: string; 23 23 + file?: File; 24 24 + repeat: number | null; 25 25 + }; 26 26 + export const PubThemeSetter = () => { 27 27 + let [loading, setLoading] = useState(false); 28 28 + let [sample, setSample] = useState<"pub" | "post">("pub"); 29 29 + let [openPicker, setOpenPicker] = useState<pickers>("null"); 30 30 + let { data: pub, mutate } = usePublicationData(); 31 31 + let record = pub?.record as PubLeafletPublication.Record | undefined; 32 32 + let [showPageBackground, setShowPageBackground] = useState( 33 33 + !!record?.theme?.showPageBackground, 34 34 + ); 35 35 + let { theme: localPubTheme, setTheme, changes } = useLocalPubTheme(record); 36 36 + let [image, setImage] = useState<ImageState | null>( 37 37 + PubLeafletThemeBackgroundImage.isMain(record?.theme?.backgroundImage) 38 38 + ? { 39 39 + src: blobRefToSrc( 40 40 + record.theme.backgroundImage.image.ref, 41 41 + pub?.identity_did!, 42 42 + ), 43 43 + repeat: record.theme.backgroundImage.repeat 44 44 + ? record.theme.backgroundImage.width || 500 45 45 + : null, 46 46 + } 47 47 + : null, 48 48 + ); 49 49 + 50 50 + let pubBGImage = image?.src || null; 51 51 + let leafletBGRepeat = image?.repeat || null; 52 52 + 53 53 + return ( 54 54 + <BaseThemeProvider local {...localPubTheme}> 55 55 + <form 56 56 + className="bg-accent-1 -mx-3 -mt-2 px-3 py-1 mb-1 flex justify-between items-center" 57 57 + onSubmit={async (e) => { 58 58 + e.preventDefault(); 59 59 + if (!pub) return; 60 60 + console.log(image); 61 61 + setLoading(true); 62 62 + let result = await updatePublicationTheme({ 63 63 + uri: pub.uri, 64 64 + theme: { 65 65 + pageBackground: ColorToRGBA(localPubTheme.bgPage), 66 66 + showPageBackground: showPageBackground, 67 67 + backgroundColor: image 68 68 + ? ColorToRGBA(localPubTheme.bgLeaflet) 69 69 + : ColorToRGB(localPubTheme.bgLeaflet), 70 70 + backgroundRepeat: image?.repeat, 71 71 + backgroundImage: image ? image.file : null, 72 72 + primary: ColorToRGB(localPubTheme.primary), 73 73 + accentBackground: ColorToRGB(localPubTheme.accent1), 74 74 + accentText: ColorToRGB(localPubTheme.accent2), 75 75 + }, 76 76 + }); 77 77 + mutate((pub) => { 78 78 + if (result?.publication && pub) 79 79 + return { ...pub, record: result.publication.record }; 80 80 + return pub; 81 81 + }, false); 82 82 + setLoading(false); 83 83 + }} 84 84 + > 85 85 + <h4 className="text-accent-2">Publication Theme</h4> 86 86 + <ButtonSecondary 87 87 + compact 88 88 + disabled={ 89 89 + !( 90 90 + showPageBackground !== !!record?.theme?.showPageBackground || 91 91 + changes || 92 92 + !!image?.file || 93 93 + record?.theme?.backgroundImage?.width !== image?.repeat 94 94 + ) 95 95 + } 96 96 + > 97 97 + {loading ? <DotLoader /> : "Update"} 98 98 + </ButtonSecondary> 99 99 + </form> 100 100 + 101 101 + <div> 102 102 + <div className="themeSetterContent flex flex-col w-full overflow-y-scroll no-scrollbar"> 103 103 + <div className="themeBGLeaflet flex"> 104 104 + <div 105 105 + className={`bgPicker flex flex-col gap-0 -mb-[6px] z-10 w-full `} 106 106 + > 107 107 + <div className="bgPickerBody w-full flex flex-col gap-2 p-2 mt-1 border border-[#CCCCCC] rounded-md text-[#595959] bg-white"> 108 108 + <BackgroundPicker 109 109 + bgImage={image} 110 110 + setBgImage={setImage} 111 111 + backgroundColor={localPubTheme.bgLeaflet} 112 112 + pageBackground={localPubTheme.bgPage} 113 113 + setPageBackground={(color) => { 114 114 + setTheme((t) => ({ ...t, bgPage: color })); 115 115 + }} 116 116 + setBackgroundColor={(color) => { 117 117 + setTheme((t) => ({ ...t, bgLeaflet: color })); 118 118 + }} 119 119 + openPicker={openPicker} 120 120 + setOpenPicker={setOpenPicker} 121 121 + hasPageBackground={!!showPageBackground} 122 122 + setHasPageBackground={setShowPageBackground} 123 123 + /> 124 124 + </div> 125 125 + 126 126 + <SectionArrow 127 127 + fill="white" 128 128 + stroke="#CCCCCC" 129 129 + className="ml-2 -mt-[1px]" 130 130 + /> 131 131 + </div> 132 132 + </div> 133 133 + 134 134 + <div 135 135 + style={{ 136 136 + backgroundImage: pubBGImage ? `url(${pubBGImage})` : undefined, 137 137 + backgroundRepeat: leafletBGRepeat ? "repeat" : "no-repeat", 138 138 + backgroundPosition: "center", 139 139 + backgroundSize: !leafletBGRepeat 140 140 + ? "cover" 141 141 + : `calc(${leafletBGRepeat}px / 2 )`, 142 142 + }} 143 143 + className={` relative bg-bg-leaflet px-3 py-4 flex flex-col rounded-md border border-border `} 144 144 + > 145 145 + <div className={`flex flex-col gap-3 z-10`}> 146 146 + <PagePickers 147 147 + pageBackground={localPubTheme.bgPage} 148 148 + primary={localPubTheme.primary} 149 149 + setPageBackground={(color) => { 150 150 + setTheme((t) => ({ ...t, bgPage: color })); 151 151 + }} 152 152 + setPrimary={(color) => { 153 153 + setTheme((t) => ({ ...t, primary: color })); 154 154 + }} 155 155 + openPicker={openPicker} 156 156 + setOpenPicker={(pickers) => setOpenPicker(pickers)} 157 157 + hasPageBackground={showPageBackground} 158 158 + /> 159 159 + <PubAccentPickers 160 160 + accent1={localPubTheme.accent1} 161 161 + setAccent1={(color) => { 162 162 + setTheme((t) => ({ ...t, accent1: color })); 163 163 + }} 164 164 + accent2={localPubTheme.accent2} 165 165 + setAccent2={(color) => { 166 166 + setTheme((t) => ({ ...t, accent2: color })); 167 167 + }} 168 168 + openPicker={openPicker} 169 169 + setOpenPicker={(pickers) => setOpenPicker(pickers)} 170 170 + /> 171 171 + </div> 172 172 + </div> 173 173 + <div className="flex flex-col mt-4 "> 174 174 + <div className="flex gap-2 items-center text-sm text-[#8C8C8C]"> 175 175 + <div className="text-sm">Preview</div> 176 176 + <Separator classname="!h-4" />{" "} 177 177 + <button 178 178 + className={`${sample === "pub" ? "font-bold text-[#595959]" : ""}`} 179 179 + onClick={() => setSample("pub")} 180 180 + > 181 181 + Pub 182 182 + </button> 183 183 + <button 184 184 + className={`${sample === "post" ? "font-bold text-[#595959]" : ""}`} 185 185 + onClick={() => setSample("post")} 186 186 + > 187 187 + Post 188 188 + </button> 189 189 + </div> 190 190 + {sample === "pub" ? ( 191 191 + <SamplePub 192 192 + pubBGImage={pubBGImage} 193 193 + pubBGRepeat={leafletBGRepeat} 194 194 + showPageBackground={showPageBackground} 195 195 + /> 196 196 + ) : ( 197 197 + <SamplePost 198 198 + pubBGImage={pubBGImage} 199 199 + pubBGRepeat={leafletBGRepeat} 200 200 + showPageBackground={showPageBackground} 201 201 + /> 202 202 + )} 203 203 + </div> 204 204 + </div> 205 205 + </div> 206 206 + </BaseThemeProvider> 207 207 + ); 208 208 + }; 209 209 + 210 210 + const SamplePub = (props: { 211 211 + pubBGImage: string | null; 212 212 + pubBGRepeat: number | null; 213 213 + showPageBackground: boolean; 214 214 + }) => { 215 215 + let { data: publication } = usePublicationData(); 216 216 + let record = publication?.record as PubLeafletPublication.Record | null; 217 217 + 218 218 + return ( 219 219 + <div 220 220 + style={{ 221 221 + backgroundImage: props.pubBGImage 222 222 + ? `url(${props.pubBGImage})` 223 223 + : undefined, 224 224 + backgroundRepeat: props.pubBGRepeat ? "repeat" : "no-repeat", 225 225 + backgroundPosition: "center", 226 226 + backgroundSize: !props.pubBGRepeat 227 227 + ? "cover" 228 228 + : `calc(${props.pubBGRepeat}px / 2 )`, 229 229 + }} 230 230 + className={`bg-bg-leaflet p-3 pb-0 flex flex-col gap-3 rounded-t-md border border-border border-b-0 h-[148px] overflow-hidden `} 231 231 + > 232 232 + <div 233 233 + className="sampleContent rounded-t-md border-border pb-4 px-[10px] flex flex-col gap-[14px] w-[250px] mx-auto" 234 234 + style={{ 235 235 + background: props.showPageBackground 236 236 + ? "rgba(var(--bg-page), var(--bg-page-alpha))" 237 237 + : undefined, 238 238 + }} 239 239 + > 240 240 + <div className="flex flex-col justify-center text-center pt-2"> 241 241 + {record?.icon && publication?.uri && ( 242 242 + <div 243 243 + style={{ 244 244 + backgroundRepeat: "no-repeat", 245 245 + backgroundPosition: "center", 246 246 + backgroundSize: "cover", 247 247 + backgroundImage: `url(/api/atproto_images?did=${new AtUri(publication.uri).host}&cid=${(record.icon?.ref as unknown as { $link: string })["$link"]})`, 248 248 + }} 249 249 + className="w-4 h-4 rounded-full place-self-center" 250 250 + /> 251 251 + )} 252 252 + 253 253 + <div className="text-[11px] font-bold pt-[5px] text-accent-contrast"> 254 254 + {record?.name} 255 255 + </div> 256 256 + <div className="text-[7px] font-normal text-tertiary"> 257 257 + {record?.description} 258 258 + </div> 259 259 + <div className=" flex gap-1 items-center mt-[6px] bg-accent-1 text-accent-2 py-[1px] px-[4px] text-[7px] w-fit font-bold rounded-[2px] mx-auto"> 260 260 + <div className="h-[7px] w-[7px] rounded-full bg-accent-2" /> 261 261 + Subscribe with Bluesky 262 262 + </div> 263 263 + </div> 264 264 + 265 265 + <div className="flex flex-col text-[8px] rounded-md "> 266 266 + <div className="font-bold">A Sample Post</div> 267 267 + <div className="text-secondary italic text-[6px]"> 268 268 + This is a sample description about the sample post 269 269 + </div> 270 270 + <div className="text-tertiary text-[5px] pt-[2px]">Jan 1, 20XX </div> 271 271 + </div> 272 272 + </div> 273 273 + </div> 274 274 + ); 275 275 + }; 276 276 + 277 277 + const SamplePost = (props: { 278 278 + pubBGImage: string | null; 279 279 + pubBGRepeat: number | null; 280 280 + showPageBackground: boolean; 281 281 + }) => { 282 282 + let { data: publication } = usePublicationData(); 283 283 + let record = publication?.record as PubLeafletPublication.Record | null; 284 284 + return ( 285 285 + <div 286 286 + style={{ 287 287 + backgroundImage: props.pubBGImage 288 288 + ? `url(${props.pubBGImage})` 289 289 + : undefined, 290 290 + backgroundRepeat: props.pubBGRepeat ? "repeat" : "no-repeat", 291 291 + backgroundPosition: "center", 292 292 + backgroundSize: !props.pubBGRepeat 293 293 + ? "cover" 294 294 + : `calc(${props.pubBGRepeat}px / 2 )`, 295 295 + }} 296 296 + className={`bg-bg-leaflet p-3 max-w-full flex flex-col gap-3 rounded-t-md border border-border border-b-0 pb-0 h-[148px] overflow-hidden`} 297 297 + > 298 298 + <div 299 299 + className="sampleContent rounded-t-md border-border pb-0 px-[6px] flex flex-col w-[250px] mx-auto" 300 300 + style={{ 301 301 + background: props.showPageBackground 302 302 + ? "rgba(var(--bg-page), var(--bg-page-alpha))" 303 303 + : undefined, 304 304 + }} 305 305 + > 306 306 + <div className="flex flex-col "> 307 307 + <div className="text-[6px] font-bold pt-[6px] text-accent-contrast"> 308 308 + {record?.name} 309 309 + </div> 310 310 + <div className="text-[11px] font-bold text-primary"> 311 311 + A Sample Post 312 312 + </div> 313 313 + <div className="text-[7px] font-normal text-secondary italic"> 314 314 + A short sample description about the sample post 315 315 + </div> 316 316 + <div className="text-tertiary text-[5px] pt-[2px]">Jan 1, 20XX </div> 317 317 + </div> 318 318 + <div className="text-[6px] pt-[8px] flex flex-col gap-[6px]"> 319 319 + <div> 320 320 + Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque 321 321 + faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi 322 322 + pretium tellus duis convallis. Tempus leo eu aenean sed diam urna 323 323 + tempor. 324 324 + </div> 325 325 + 326 326 + <div> 327 327 + Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis 328 328 + massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit 329 329 + semper vel class aptent taciti sociosqu. Ad litora torquent per 330 330 + conubia nostra inceptos himenaeos. 331 331 + </div> 332 332 + <div> 333 333 + Sed et nisi semper, egestas purus a, egestas nulla. Nulla ultricies, 334 334 + purus non dapibus tincidunt, nunc sem rhoncus sem, vel malesuada 335 335 + tellus enim sit amet magna. Donec ac justo a ipsum fermentum 336 336 + vulputate. Etiam sit amet viverra leo. Aenean accumsan consectetur 337 337 + velit. Vivamus at justo a nisl imperdiet dictum. Donec scelerisque 338 338 + ex eget turpis scelerisque tincidunt. Proin non convallis nibh, eget 339 339 + aliquet ex. Curabitur ornare a ipsum in ultrices. 340 340 + </div> 341 341 + </div> 342 342 + </div> 343 343 + </div> 344 344 + ); 345 345 + }; 346 346 + 347 347 + export function ColorToRGBA(color: Color) { 348 348 + if (!color) 349 349 + return { 350 350 + $type: "pub.leaflet.theme.color#rgba" as const, 351 351 + r: 0, 352 352 + g: 0, 353 353 + b: 0, 354 354 + a: 1, 355 355 + }; 356 356 + let c = color.toFormat("rgba"); 357 357 + const r = c.getChannelValue("red"); 358 358 + const g = c.getChannelValue("green"); 359 359 + const b = c.getChannelValue("blue"); 360 360 + const a = c.getChannelValue("alpha"); 361 361 + return { 362 362 + $type: "pub.leaflet.theme.color#rgba" as const, 363 363 + r: Math.round(r), 364 364 + g: Math.round(g), 365 365 + b: Math.round(b), 366 366 + a: Math.round(a * 100), 367 367 + }; 368 368 + } 369 369 + function ColorToRGB(color: Color) { 370 370 + if (!color) 371 371 + return { 372 372 + $type: "pub.leaflet.theme.color#rgb" as const, 373 373 + r: 0, 374 374 + g: 0, 375 375 + b: 0, 376 376 + }; 377 377 + let c = color.toFormat("rgb"); 378 378 + const r = c.getChannelValue("red"); 379 379 + const g = c.getChannelValue("green"); 380 380 + const b = c.getChannelValue("blue"); 381 381 + return { 382 382 + $type: "pub.leaflet.theme.color#rgb" as const, 383 383 + r: Math.round(r), 384 384 + g: Math.round(g), 385 385 + b: Math.round(b), 386 386 + }; 387 387 + }

+179

components/ThemeManager/PublicationThemeProvider.tsx

reviewed

··· 1 1 + "use client"; 2 2 + import { useMemo, useState } from "react"; 3 3 + import { parseColor } from "react-aria-components"; 4 4 + import { useEntity } from "src/replicache"; 5 5 + import { getColorContrast } from "./ThemeProvider"; 6 6 + import { useColorAttribute, colorToString } from "./useColorAttribute"; 7 7 + import { BaseThemeProvider } from "./ThemeProvider"; 8 8 + import { PubLeafletPublication, PubLeafletThemeColor } from "lexicons/api"; 9 9 + import { usePublicationData } from "app/lish/[did]/[publication]/dashboard/PublicationSWRProvider"; 10 10 + import { blobRefToSrc } from "src/utils/blobRefToSrc"; 11 11 + 12 12 + const PubThemeDefaults = { 13 13 + backgroundColor: "#FDFCFA", 14 14 + pageBackground: "#FDFCFA", 15 15 + primary: "#272727", 16 16 + accentText: "#FFFFFF", 17 17 + accentBackground: "#0000FF", 18 18 + }; 19 19 + function parseThemeColor( 20 20 + c: PubLeafletThemeColor.Rgb | PubLeafletThemeColor.Rgba, 21 21 + ) { 22 22 + if (c.$type === "pub.leaflet.theme.color#rgba") { 23 23 + return parseColor(`rgba(${c.r}, ${c.g}, ${c.b}, ${c.a / 100})`); 24 24 + } 25 25 + return parseColor(`rgb(${c.r}, ${c.g}, ${c.b})`); 26 26 + } 27 27 + 28 28 + let useColor = ( 29 29 + record: PubLeafletPublication.Record | null | undefined, 30 30 + c: keyof typeof PubThemeDefaults, 31 31 + ) => { 32 32 + return useMemo(() => { 33 33 + let v = record?.theme?.[c]; 34 34 + if (isColor(v)) { 35 35 + return parseThemeColor(v); 36 36 + } else return parseColor(PubThemeDefaults[c]); 37 37 + }, [record?.theme?.[c]]); 38 38 + }; 39 39 + let isColor = ( 40 40 + c: any, 41 41 + ): c is PubLeafletThemeColor.Rgb | PubLeafletThemeColor.Rgba => { 42 42 + return ( 43 43 + c?.$type === "pub.leaflet.theme.color#rgb" || 44 44 + c?.$type === "pub.leaflet.theme.color#rgba" 45 45 + ); 46 46 + }; 47 47 + 48 48 + export function PublicationThemeProviderDashboard(props: { 49 49 + children: React.ReactNode; 50 50 + record?: PubLeafletPublication.Record | null; 51 51 + }) { 52 52 + let { data: pub } = usePublicationData(); 53 53 + return ( 54 54 + <PublicationThemeProvider 55 55 + pub_creator={pub?.identity_did || ""} 56 56 + record={pub?.record as PubLeafletPublication.Record} 57 57 + > 58 58 + <PublicationBackgroundProvider 59 59 + record={pub?.record as PubLeafletPublication.Record} 60 60 + pub_creator={pub?.identity_did || ""} 61 61 + > 62 62 + {props.children} 63 63 + </PublicationBackgroundProvider> 64 64 + </PublicationThemeProvider> 65 65 + ); 66 66 + } 67 67 + 68 68 + export function PublicationBackgroundProvider(props: { 69 69 + record?: PubLeafletPublication.Record | null; 70 70 + pub_creator: string; 71 71 + className?: string; 72 72 + children: React.ReactNode; 73 73 + }) { 74 74 + let backgroundImage = props.record?.theme?.backgroundImage?.image?.ref 75 75 + ? blobRefToSrc( 76 76 + props.record?.theme?.backgroundImage?.image?.ref, 77 77 + props.pub_creator, 78 78 + ) 79 79 + : null; 80 80 + 81 81 + let backgroundImageRepeat = props.record?.theme?.backgroundImage?.repeat; 82 82 + let backgroundImageSize = props.record?.theme?.backgroundImage?.width || 500; 83 83 + return ( 84 84 + <div 85 85 + className="PubBackgroundWrapper w-full bg-bg-leaflet text-primary h-full flex flex-col bg-cover bg-center bg-no-repeat items-stretch" 86 86 + style={{ 87 87 + backgroundImage: `url(${backgroundImage})`, 88 88 + backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat", 89 89 + backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`, 90 90 + }} 91 91 + > 92 92 + {props.children} 93 93 + </div> 94 94 + ); 95 95 + } 96 96 + export function PublicationThemeProvider(props: { 97 97 + local?: boolean; 98 98 + children: React.ReactNode; 99 99 + record?: PubLeafletPublication.Record | null; 100 100 + pub_creator: string; 101 101 + }) { 102 102 + let colors = usePubTheme(props.record); 103 103 + return ( 104 104 + <BaseThemeProvider local={props.local} {...colors}> 105 105 + {props.children} 106 106 + </BaseThemeProvider> 107 107 + ); 108 108 + } 109 109 + 110 110 + export const usePubTheme = (record?: PubLeafletPublication.Record | null) => { 111 111 + let bgLeaflet = useColor(record, "backgroundColor"); 112 112 + let bgPage = useColor(record, "pageBackground"); 113 113 + bgPage = record?.theme?.pageBackground ? bgPage : bgLeaflet; 114 114 + let primary = useColor(record, "primary"); 115 115 + 116 116 + let accent1 = useColor(record, "accentBackground"); 117 117 + let accent2 = useColor(record, "accentText"); 118 118 + 119 119 + let highlight1 = useEntity(null, "theme/highlight-1")?.data.value; 120 120 + let highlight2 = useColorAttribute(null, "theme/highlight-2"); 121 121 + let highlight3 = useColorAttribute(null, "theme/highlight-3"); 122 122 + 123 123 + // set accent contrast to the accent color that has the highest contrast with the page background 124 124 + let accentContrast = [accent1, accent2].sort((a, b) => { 125 125 + return ( 126 126 + getColorContrast( 127 127 + colorToString(b, "rgb"), 128 128 + colorToString(bgLeaflet, "rgb"), 129 129 + ) - 130 130 + getColorContrast(colorToString(a, "rgb"), colorToString(bgLeaflet, "rgb")) 131 131 + ); 132 132 + })[0]; 133 133 + return { 134 134 + bgLeaflet, 135 135 + bgPage, 136 136 + primary, 137 137 + accent1, 138 138 + accent2, 139 139 + highlight1, 140 140 + highlight2, 141 141 + highlight3, 142 142 + accentContrast, 143 143 + }; 144 144 + }; 145 145 + 146 146 + export const useLocalPubTheme = ( 147 147 + record: PubLeafletPublication.Record | undefined, 148 148 + ) => { 149 149 + const pubTheme = usePubTheme(record); 150 150 + const [localOverrides, setTheme] = useState<Partial<typeof pubTheme>>({}); 151 151 + 152 152 + const mergedTheme = useMemo(() => { 153 153 + let newTheme = { 154 154 + ...pubTheme, 155 155 + ...localOverrides, 156 156 + }; 157 157 + let accentContrast = [newTheme.accent1, newTheme.accent2].sort((a, b) => { 158 158 + return ( 159 159 + getColorContrast( 160 160 + colorToString(b, "rgb"), 161 161 + colorToString(newTheme.bgLeaflet, "rgb"), 162 162 + ) - 163 163 + getColorContrast( 164 164 + colorToString(a, "rgb"), 165 165 + colorToString(newTheme.bgLeaflet, "rgb"), 166 166 + ) 167 167 + ); 168 168 + })[0]; 169 169 + return { 170 170 + ...newTheme, 171 171 + accentContrast, 172 172 + }; 173 173 + }, [pubTheme, localOverrides]); 174 174 + return { 175 175 + theme: mergedTheme, 176 176 + setTheme, 177 177 + changes: Object.keys(localOverrides).length > 0, 178 178 + }; 179 179 + };

+73 -60

components/ThemeManager/ThemeProvider.tsx

reviewed

··· 8 8 useMemo, 9 9 useState, 10 10 } from "react"; 11 11 - import { colorToString, useColorAttribute } from "./useColorAttribute"; 11 11 + import { 12 12 + colorToString, 13 13 + useColorAttribute, 14 14 + useColorAttributeNullable, 15 15 + } from "./useColorAttribute"; 12 16 import { Color as AriaColor, parseColor } from "react-aria-components"; 13 17 import { parse, contrastLstar, ColorSpace, sRGB } from "colorjs.io/fn"; 14 18 15 19 import { useEntity } from "src/replicache"; 16 20 import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 21 21 + import { 22 22 + PublicationBackgroundProvider, 23 23 + PublicationThemeProvider, 24 24 + } from "./PublicationThemeProvider"; 25 25 + import { PubLeafletPublication } from "lexicons/api"; 17 26 18 27 type CSSVariables = { 19 28 "--bg-leaflet": string; ··· 27 36 "--highlight-3": string; 28 37 }; 29 38 39 39 + // define the color defaults for everything 30 40 export const ThemeDefaults = { 31 41 "theme/page-background": "#F0F7FA", 32 42 "theme/card-background": "#FFFFFF", ··· 42 52 "theme/accent-contrast": "#0000FF", 43 53 }; 44 54 55 55 + // define a function to set an Aria Color to a CSS Variable in RGB 45 56 function setCSSVariableToColor( 46 57 el: HTMLElement, 47 58 name: string, ··· 49 60 ) { 50 61 el?.style.setProperty(name, colorToString(value, "rgb")); 51 62 } 63 63 + 64 64 + //Create a wrapper that applies a theme to each page 52 65 export function ThemeProvider(props: { 53 66 entityID: string | null; 54 67 local?: boolean; 55 68 children: React.ReactNode; 69 69 + className?: string; 56 70 }) { 57 71 let { data: pub } = useLeafletPublicationData(); 58 58 - if (!pub) return <LeafletThemeProvider {...props} />; 59 59 - return <PublicationThemeProvider {...props} />; 60 60 - } 61 61 - export function PublicationThemeProvider(props: { 62 62 - entityID: string | null; 63 63 - local?: boolean; 64 64 - children: React.ReactNode; 65 65 - }) { 66 66 - let bgLeaflet = useMemo(() => { 67 67 - return parseColor(`#FDFCFA`); 68 68 - }, []); 69 69 - let bgPage = useColorAttribute(props.entityID, "theme/card-background"); 70 70 - let primary = useColorAttribute(props.entityID, "theme/primary"); 71 71 - 72 72 - let highlight1 = useEntity(props.entityID, "theme/highlight-1"); 73 73 - let highlight2 = useColorAttribute(props.entityID, "theme/highlight-2"); 74 74 - let highlight3 = useColorAttribute(props.entityID, "theme/highlight-3"); 75 75 - 76 76 - let accent1 = useColorAttribute(props.entityID, "theme/accent-background"); 77 77 - let accent2 = useColorAttribute(props.entityID, "theme/accent-text"); 78 78 - // set accent contrast to the accent color that has the highest contrast with the page background 79 79 - let accentContrast = [accent1, accent2].sort((a, b) => { 80 80 - return ( 81 81 - getColorContrast(colorToString(b, "rgb"), colorToString(bgPage, "rgb")) - 82 82 - getColorContrast(colorToString(a, "rgb"), colorToString(bgPage, "rgb")) 83 83 - ); 84 84 - })[0]; 85 85 - 72 72 + if (!pub || !pub.publications) return <LeafletThemeProvider {...props} />; 86 73 return ( 87 87 - <BaseThemeProvider 88 88 - local={props.local} 89 89 - bgLeaflet={bgLeaflet} 90 90 - bgPage={bgPage} 91 91 - primary={primary} 92 92 - highlight2={highlight2} 93 93 - highlight3={highlight3} 94 94 - highlight1={highlight1?.data.value} 95 95 - accent1={accent1} 96 96 - accent2={accent2} 97 97 - accentContrast={accentContrast} 98 98 - > 99 99 - {props.children} 100 100 - </BaseThemeProvider> 74 74 + <PublicationThemeProvider 75 75 + {...props} 76 76 + record={pub.publications?.record as PubLeafletPublication.Record} 77 77 + pub_creator={pub.publications?.identity_did} 78 78 + /> 101 79 ); 102 80 } 81 81 + // for PUBLICATIONS: define Aria Colors for each value and use BaseThemeProvider to wrap the content of the page in the theme 103 82 83 83 + // for LEAFLETS : define Aria Colors for each value and use BaseThemeProvider to wrap the content of the page in the theme 104 84 export function LeafletThemeProvider(props: { 105 85 entityID: string | null; 106 86 local?: boolean; ··· 142 122 ); 143 123 } 144 124 145 145 - let BaseThemeProvider = ({ 125 125 + // handles setting all the Aria Color values to CSS Variables and wrapping the page the theme providers 126 126 + export const BaseThemeProvider = ({ 146 127 local, 147 128 bgLeaflet, 148 129 bgPage, ··· 260 241 entityID: string; 261 242 children: React.ReactNode; 262 243 }) { 263 263 - let bgPage = useColorAttribute(props.entityID, "theme/card-background"); 264 264 - let primary = useColorAttribute(props.entityID, "theme/primary"); 265 265 - let accent1 = useColorAttribute(props.entityID, "theme/accent-background"); 266 266 - let accent2 = useColorAttribute(props.entityID, "theme/accent-text"); 267 267 - let accentContrast = [accent1, accent2].sort((a, b) => { 268 268 - return ( 269 269 - getColorContrast(colorToString(b, "rgb"), colorToString(bgPage, "rgb")) - 270 270 - getColorContrast(colorToString(a, "rgb"), colorToString(bgPage, "rgb")) 271 271 - ); 272 272 - })[0]; 244 244 + let bgPage = useColorAttributeNullable( 245 245 + props.entityID, 246 246 + "theme/card-background", 247 247 + ); 248 248 + let primary = useColorAttributeNullable(props.entityID, "theme/primary"); 249 249 + let accent1 = useColorAttributeNullable( 250 250 + props.entityID, 251 251 + "theme/accent-background", 252 252 + ); 253 253 + let accent2 = useColorAttributeNullable(props.entityID, "theme/accent-text"); 254 254 + let accentContrast = 255 255 + bgPage && accent1 && accent2 256 256 + ? [accent1, accent2].sort((a, b) => { 257 257 + return ( 258 258 + getColorContrast( 259 259 + colorToString(b, "rgb"), 260 260 + colorToString(bgPage, "rgb"), 261 261 + ) - 262 262 + getColorContrast( 263 263 + colorToString(a, "rgb"), 264 264 + colorToString(bgPage, "rgb"), 265 265 + ) 266 266 + ); 267 267 + })[0] 268 268 + : null; 273 269 274 270 return ( 275 271 <CardThemeProviderContext.Provider value={props.entityID}> ··· 277 273 className="contents text-primary" 278 274 style={ 279 275 { 280 280 - "--accent-1": colorToString(accent1, "rgb"), 281 281 - "--accent-2": colorToString(accent2, "rgb"), 282 282 - "--accent-contrast": colorToString(accentContrast, "rgb"), 283 283 - "--bg-page": colorToString(bgPage, "rgb"), 284 284 - "--bg-page-alpha": bgPage.getChannelValue("alpha"), 285 285 - "--primary": colorToString(primary, "rgb"), 276 276 + "--accent-1": accent1 ? colorToString(accent1, "rgb") : undefined, 277 277 + "--accent-2": accent2 ? colorToString(accent2, "rgb") : undefined, 278 278 + "--accent-contrast": accentContrast 279 279 + ? colorToString(accentContrast, "rgb") 280 280 + : undefined, 281 281 + "--bg-page": bgPage ? colorToString(bgPage, "rgb") : undefined, 282 282 + "--bg-page-alpha": bgPage 283 283 + ? bgPage.getChannelValue("alpha") 284 284 + : undefined, 285 285 + "--primary": primary ? colorToString(primary, "rgb") : undefined, 286 286 } as CSSProperties 287 287 } 288 288 > ··· 292 292 ); 293 293 } 294 294 295 295 + // Wrapper within the Theme Wrapper that provides background image data 295 296 export const ThemeBackgroundProvider = (props: { 296 297 entityID: string; 297 298 children: React.ReactNode; 298 299 }) => { 300 300 + let { data: pub } = useLeafletPublicationData(); 299 301 let backgroundImage = useEntity(props.entityID, "theme/background-image"); 300 302 let backgroundImageRepeat = useEntity( 301 303 props.entityID, 302 304 "theme/background-image-repeat", 303 305 ); 306 306 + if (pub?.publications) { 307 307 + return ( 308 308 + <PublicationBackgroundProvider 309 309 + pub_creator={pub?.publications.identity_did || ""} 310 310 + record={pub?.publications.record as PubLeafletPublication.Record} 311 311 + > 312 312 + {props.children} 313 313 + </PublicationBackgroundProvider> 314 314 + ); 315 315 + } 304 316 return ( 305 317 <div 306 318 className="LeafletBackgroundWrapper w-full bg-bg-leaflet text-primary h-full flex flex-col bg-cover bg-center bg-no-repeat items-stretch" ··· 322 334 ); 323 335 }; 324 336 337 337 + // used to calculate the contrast between page and accent1, accent2, and determin which is higher contrast 325 338 export function getColorContrast(color1: string, color2: string) { 326 339 ColorSpace.register(sRGB); 327 340

+16 -12

components/ThemeManager/ThemeSetter.tsx

reviewed

··· 4 4 5 5 import { Color } from "react-aria-components"; 6 6 7 7 - import { LeafletBGPicker } from "./LeafletBGPicker"; 8 8 - import { PageThemePickers } from "./PageThemePickers"; 7 7 + import { LeafletBGPicker } from "./Pickers/LeafletBGPicker"; 8 8 + import { PageThemePickers } from "./Pickers/PageThemePickers"; 9 9 import { useMemo, useState } from "react"; 10 10 import { ReplicacheMutators, useEntity, useReplicache } from "src/replicache"; 11 11 import { Replicache } from "replicache"; ··· 16 16 import { CheckboxChecked } from "components/Icons/CheckboxChecked"; 17 17 import { CheckboxEmpty } from "components/Icons/CheckboxEmpty"; 18 18 import { PaintSmall } from "components/Icons/PaintSmall"; 19 19 - import { AccentThemePickers } from "./AccentThemePickers"; 19 19 + import { AccentPickers } from "./Pickers/AccentPickers"; 20 20 + import { useLeafletPublicationData } from "components/PageSWRDataProvider"; 20 21 21 22 export type pickers = 22 23 | "null" ··· 44 45 } 45 46 export const ThemePopover = (props: { entityID: string; home?: boolean }) => { 46 47 let { rep } = useReplicache(); 48 48 + let { data: pub } = useLeafletPublicationData(); 47 49 48 50 // I need to get these variables from replicache and then write them to the DB. I also need to parse them into a state that can be used here. 49 51 let permission = useEntitySetContext().permissions.write; ··· 61 63 }, [rep, props.entityID]); 62 64 63 65 if (!permission) return null; 66 66 + if (pub) return null; 64 67 65 68 return ( 66 69 <> ··· 111 114 className={`bg-bg-leaflet p-3 mb-2 flex flex-col rounded-md border border-border pb-0`} 112 115 > 113 116 <div className={`flex flex-col z-10 mt-4 -mb-[6px] `}> 114 114 - <AccentThemePickers 117 117 + <AccentPickers 115 118 entityID={props.entityID} 116 119 openPicker={openPicker} 117 120 setOpenPicker={(pickers) => setOpenPicker(pickers)} ··· 130 133 131 134 <div className="flex flex-col mt-8 -mb-[6px] z-10"> 132 135 <PageThemePickers 133 133 - home 134 136 entityID={props.entityID} 135 137 openPicker={openPicker} 136 138 setOpenPicker={(pickers) => setOpenPicker(pickers)} ··· 233 235 onClick={(e) => { 234 236 e.currentTarget === e.target && props.setOpenPicker("page"); 235 237 }} 236 236 - className={ 237 237 - pageBorderHidden 238 238 - ? "py-2 px-0 border border-transparent" 239 239 - : `${props.home ? "rounded-md " : "rounded-t-lg "} relative cursor-pointer p-2 border border-border border-b-transparent shadow-md text-primary 240 240 - ` 241 241 - } 238 238 + className={` 239 239 + text-primary relative 240 240 + ${ 241 241 + pageBorderHidden 242 242 + ? "py-2 px-0 border border-transparent" 243 243 + : `cursor-pointer p-2 border border-border border-b-transparent shadow-md 244 244 + ${props.home ? "rounded-md " : "rounded-t-lg "}` 245 245 + }`} 242 246 style={ 243 247 pageBorderHidden 244 248 ? undefined ··· 265 269 } 266 270 } 267 271 /> 268 268 - <div> 272 272 + <div className="z-10 relative"> 269 273 <p 270 274 onClick={() => { 271 275 props.setOpenPicker("text");

+16

components/ThemeManager/useColorAttribute.ts

reviewed

··· 8 8 entity: string | null, 9 9 attribute: keyof FilterAttributes<{ type: "color"; cardinality: "one" }>, 10 10 ) { 11 11 + // takes a color string and turns it into a react-aria Color type 12 12 + // we need it to interact with Color Pickers for themeing 11 13 let { rootEntity } = useReplicache(); 12 14 let color = useEntity(entity, attribute); 13 15 let fallbackColor = useEntity(color ? null : rootEntity, attribute); ··· 16 18 return parseColor(c ? `hsba(${c.data.value})` : ThemeDefaults[attribute]); 17 19 }, [color, fallbackColor, attribute]); 18 20 } 21 21 + export function useColorAttributeNullable( 22 22 + entity: string | null, 23 23 + attribute: keyof FilterAttributes<{ type: "color"; cardinality: "one" }>, 24 24 + ) { 25 25 + // takes a color string and turns it into a react-aria Color type 26 26 + // we need it to interact with Color Pickers for themeing 27 27 + let color = useEntity(entity, attribute); 28 28 + return useMemo(() => { 29 29 + let c = color; 30 30 + return c ? parseColor(`hsba(${c.data.value})`) : null; 31 31 + }, [color, attribute]); 32 32 + } 19 33 20 34 export function colorToString(value: Color, space: "rgb" | "hsba") { 35 35 + // takes a react-aria Color type and turns it into an rgb or hsba color string. 36 36 + // we need it to set the color in our database when we can the color back from the Color Pickers 21 37 return value.toString(space).slice(space.length + 1, -1); 22 38 }

+33

components/Toggle.tsx

reviewed

··· 1 1 + import { theme } from "tailwind.config"; 2 2 + 3 3 + export const Toggle = (props: { 4 4 + toggleOn: boolean; 5 5 + setToggleOn: (s: boolean) => void; 6 6 + disabledColor1?: string; 7 7 + disabledColor2?: string; 8 8 + }) => { 9 9 + return ( 10 10 + <button 11 11 + className="toggle selected-outline transparent-outline flex items-center h-[20px] w-6 rounded-md border-border" 12 12 + style={{ 13 13 + border: props.toggleOn 14 14 + ? "1px solid " + theme.colors["accent-2"] 15 15 + : "1px solid " + props.disabledColor2 || theme.colors["border-light"], 16 16 + justifyContent: props.toggleOn ? "flex-end" : "flex-start", 17 17 + background: props.toggleOn 18 18 + ? theme.colors["accent-1"] 19 19 + : props.disabledColor1 || theme.colors["tertiary"], 20 20 + }} 21 21 + onClick={() => props.setToggleOn(!props.toggleOn)} 22 22 + > 23 23 + <div 24 24 + className="h-[14px] w-[10px] m-0.5 rounded-[2px]" 25 25 + style={{ 26 26 + background: props.toggleOn 27 27 + ? theme.colors["accent-2"] 28 28 + : props.disabledColor2 || theme.colors["border-light"], 29 29 + }} 30 30 + /> 31 31 + </button> 32 32 + ); 33 33 + };

+1 -3

components/Toolbar/HighlightToolbar.tsx

reviewed

··· 14 14 SectionArrow, 15 15 setColorAttribute, 16 16 } from "components/ThemeManager/ThemeSetter"; 17 17 - import { ColorPicker } from "components/ThemeManager/ColorPicker"; 17 17 + import { ColorPicker } from "components/ThemeManager/Pickers/ColorPicker"; 18 18 import { useEntity, useReplicache } from "src/replicache"; 19 19 import { useEffect, useMemo, useState } from "react"; 20 20 import { useColorAttribute } from "components/ThemeManager/useColorAttribute"; 21 21 - import { useParams } from "next/navigation"; 22 21 import { rangeHasMark } from "src/utils/prosemirror/rangeHasMark"; 23 22 24 23 import { Separator, ShortcutKey } from "components/Layout"; ··· 28 27 import { PopoverArrow } from "components/Icons/PopoverArrow"; 29 28 import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; 30 29 import { PaintSmall } from "components/Icons/PaintSmall"; 31 31 - import { Color } from "react-aria-components"; 32 30 import { isMac } from "src/utils/isDevice"; 33 31 34 32 export const HighlightButton = (props: {

+14

lexicons/api/index.ts

reviewed

··· 15 15 import * as PubLeafletGraphSubscription from './types/pub/leaflet/graph/subscription' 16 16 import * as PubLeafletPagesLinearDocument from './types/pub/leaflet/pages/linearDocument' 17 17 import * as PubLeafletRichtextFacet from './types/pub/leaflet/richtext/facet' 18 18 + import * as PubLeafletThemeBackgroundImage from './types/pub/leaflet/theme/backgroundImage' 19 19 + import * as PubLeafletThemeColor from './types/pub/leaflet/theme/color' 18 20 import * as ComAtprotoLabelDefs from './types/com/atproto/label/defs' 19 21 import * as ComAtprotoRepoApplyWrites from './types/com/atproto/repo/applyWrites' 20 22 import * as ComAtprotoRepoCreateRecord from './types/com/atproto/repo/createRecord' ··· 40 42 export * as PubLeafletGraphSubscription from './types/pub/leaflet/graph/subscription' 41 43 export * as PubLeafletPagesLinearDocument from './types/pub/leaflet/pages/linearDocument' 42 44 export * as PubLeafletRichtextFacet from './types/pub/leaflet/richtext/facet' 45 45 + export * as PubLeafletThemeBackgroundImage from './types/pub/leaflet/theme/backgroundImage' 46 46 + export * as PubLeafletThemeColor from './types/pub/leaflet/theme/color' 43 47 export * as ComAtprotoLabelDefs from './types/com/atproto/label/defs' 44 48 export * as ComAtprotoRepoApplyWrites from './types/com/atproto/repo/applyWrites' 45 49 export * as ComAtprotoRepoCreateRecord from './types/com/atproto/repo/createRecord' ··· 99 103 graph: PubLeafletGraphNS 100 104 pages: PubLeafletPagesNS 101 105 richtext: PubLeafletRichtextNS 106 106 + theme: PubLeafletThemeNS 102 107 103 108 constructor(client: XrpcClient) { 104 109 this._client = client ··· 106 111 this.graph = new PubLeafletGraphNS(client) 107 112 this.pages = new PubLeafletPagesNS(client) 108 113 this.richtext = new PubLeafletRichtextNS(client) 114 114 + this.theme = new PubLeafletThemeNS(client) 109 115 this.document = new DocumentRecord(client) 110 116 this.publication = new PublicationRecord(client) 111 117 } ··· 203 209 } 204 210 205 211 export class PubLeafletRichtextNS { 212 212 + _client: XrpcClient 213 213 + 214 214 + constructor(client: XrpcClient) { 215 215 + this._client = client 216 216 + } 217 217 + } 218 218 + 219 219 + export class PubLeafletThemeNS { 206 220 _client: XrpcClient 207 221 208 222 constructor(client: XrpcClient) {

+130

lexicons/api/lexicons.ts

reviewed

··· 91 91 accept: ['image/*'], 92 92 maxSize: 1000000, 93 93 }, 94 94 + theme: { 95 95 + type: 'ref', 96 96 + ref: 'lex:pub.leaflet.publication#theme', 97 97 + }, 98 98 + }, 99 99 + }, 100 100 + }, 101 101 + theme: { 102 102 + type: 'object', 103 103 + properties: { 104 104 + backgroundColor: { 105 105 + type: 'union', 106 106 + refs: [ 107 107 + 'lex:pub.leaflet.theme.color#rgba', 108 108 + 'lex:pub.leaflet.theme.color#rgb', 109 109 + ], 110 110 + }, 111 111 + backgroundImage: { 112 112 + type: 'ref', 113 113 + ref: 'lex:pub.leaflet.theme.backgroundImage', 114 114 + }, 115 115 + primary: { 116 116 + type: 'union', 117 117 + refs: [ 118 118 + 'lex:pub.leaflet.theme.color#rgba', 119 119 + 'lex:pub.leaflet.theme.color#rgb', 120 120 + ], 121 121 + }, 122 122 + pageBackground: { 123 123 + type: 'union', 124 124 + refs: [ 125 125 + 'lex:pub.leaflet.theme.color#rgba', 126 126 + 'lex:pub.leaflet.theme.color#rgb', 127 127 + ], 128 128 + }, 129 129 + showPageBackground: { 130 130 + type: 'boolean', 131 131 + default: false, 132 132 + }, 133 133 + accentBackground: { 134 134 + type: 'union', 135 135 + refs: [ 136 136 + 'lex:pub.leaflet.theme.color#rgba', 137 137 + 'lex:pub.leaflet.theme.color#rgb', 138 138 + ], 139 139 + }, 140 140 + accentText: { 141 141 + type: 'union', 142 142 + refs: [ 143 143 + 'lex:pub.leaflet.theme.color#rgba', 144 144 + 'lex:pub.leaflet.theme.color#rgb', 145 145 + ], 94 146 }, 95 147 }, 96 148 }, ··· 408 460 description: 'Facet feature for italic text', 409 461 required: [], 410 462 properties: {}, 463 463 + }, 464 464 + }, 465 465 + }, 466 466 + PubLeafletThemeBackgroundImage: { 467 467 + lexicon: 1, 468 468 + id: 'pub.leaflet.theme.backgroundImage', 469 469 + defs: { 470 470 + main: { 471 471 + type: 'object', 472 472 + required: ['image'], 473 473 + properties: { 474 474 + image: { 475 475 + type: 'blob', 476 476 + accept: ['image/*'], 477 477 + maxSize: 1000000, 478 478 + }, 479 479 + width: { 480 480 + type: 'integer', 481 481 + }, 482 482 + repeat: { 483 483 + type: 'boolean', 484 484 + }, 485 485 + }, 486 486 + }, 487 487 + }, 488 488 + }, 489 489 + PubLeafletThemeColor: { 490 490 + lexicon: 1, 491 491 + id: 'pub.leaflet.theme.color', 492 492 + defs: { 493 493 + rgba: { 494 494 + type: 'object', 495 495 + required: ['r', 'g', 'b', 'a'], 496 496 + properties: { 497 497 + r: { 498 498 + type: 'integer', 499 499 + maximum: 255, 500 500 + minimum: 0, 501 501 + }, 502 502 + g: { 503 503 + type: 'integer', 504 504 + maximum: 255, 505 505 + minimum: 0, 506 506 + }, 507 507 + b: { 508 508 + type: 'integer', 509 509 + maximum: 255, 510 510 + minimum: 0, 511 511 + }, 512 512 + a: { 513 513 + type: 'integer', 514 514 + maximum: 100, 515 515 + minimum: 0, 516 516 + }, 517 517 + }, 518 518 + }, 519 519 + rgb: { 520 520 + type: 'object', 521 521 + required: ['r', 'g', 'b'], 522 522 + properties: { 523 523 + r: { 524 524 + type: 'integer', 525 525 + maximum: 255, 526 526 + minimum: 0, 527 527 + }, 528 528 + g: { 529 529 + type: 'integer', 530 530 + maximum: 255, 531 531 + minimum: 0, 532 532 + }, 533 533 + b: { 534 534 + type: 'integer', 535 535 + maximum: 255, 536 536 + minimum: 0, 537 537 + }, 538 538 + }, 411 539 }, 412 540 }, 413 541 }, ··· 1459 1587 PubLeafletGraphSubscription: 'pub.leaflet.graph.subscription', 1460 1588 PubLeafletPagesLinearDocument: 'pub.leaflet.pages.linearDocument', 1461 1589 PubLeafletRichtextFacet: 'pub.leaflet.richtext.facet', 1590 1590 + PubLeafletThemeBackgroundImage: 'pub.leaflet.theme.backgroundImage', 1591 1591 + PubLeafletThemeColor: 'pub.leaflet.theme.color', 1462 1592 ComAtprotoLabelDefs: 'com.atproto.label.defs', 1463 1593 ComAtprotoRepoApplyWrites: 'com.atproto.repo.applyWrites', 1464 1594 ComAtprotoRepoCreateRecord: 'com.atproto.repo.createRecord',

+39

lexicons/api/types/pub/leaflet/publication.ts

reviewed

··· 5 5 import { CID } from 'multiformats/cid' 6 6 import { validate as _validate } from '../../../lexicons' 7 7 import { $Typed, is$typed as _is$typed, OmitKey } from '../../../util' 8 8 + import type * as PubLeafletThemeColor from './theme/color' 9 9 + import type * as PubLeafletThemeBackgroundImage from './theme/backgroundImage' 8 10 9 11 const is$typed = _is$typed, 10 12 validate = _validate ··· 16 18 base_path?: string 17 19 description?: string 18 20 icon?: BlobRef 21 21 + theme?: Theme 19 22 [k: string]: unknown 20 23 } 21 24 ··· 28 31 export function validateRecord<V>(v: V) { 29 32 return validate<Record & V>(v, id, hashRecord, true) 30 33 } 34 34 + 35 35 + export interface Theme { 36 36 + $type?: 'pub.leaflet.publication#theme' 37 37 + backgroundColor?: 38 38 + | $Typed<PubLeafletThemeColor.Rgba> 39 39 + | $Typed<PubLeafletThemeColor.Rgb> 40 40 + | { $type: string } 41 41 + backgroundImage?: PubLeafletThemeBackgroundImage.Main 42 42 + primary?: 43 43 + | $Typed<PubLeafletThemeColor.Rgba> 44 44 + | $Typed<PubLeafletThemeColor.Rgb> 45 45 + | { $type: string } 46 46 + pageBackground?: 47 47 + | $Typed<PubLeafletThemeColor.Rgba> 48 48 + | $Typed<PubLeafletThemeColor.Rgb> 49 49 + | { $type: string } 50 50 + showPageBackground: boolean 51 51 + accentBackground?: 52 52 + | $Typed<PubLeafletThemeColor.Rgba> 53 53 + | $Typed<PubLeafletThemeColor.Rgb> 54 54 + | { $type: string } 55 55 + accentText?: 56 56 + | $Typed<PubLeafletThemeColor.Rgba> 57 57 + | $Typed<PubLeafletThemeColor.Rgb> 58 58 + | { $type: string } 59 59 + } 60 60 + 61 61 + const hashTheme = 'theme' 62 62 + 63 63 + export function isTheme<V>(v: V) { 64 64 + return is$typed(v, id, hashTheme) 65 65 + } 66 66 + 67 67 + export function validateTheme<V>(v: V) { 68 68 + return validate<Theme & V>(v, id, hashTheme) 69 69 + }

+28

lexicons/api/types/pub/leaflet/theme/backgroundImage.ts

reviewed

··· 1 1 + /** 2 2 + * GENERATED CODE - DO NOT MODIFY 3 3 + */ 4 4 + import { ValidationResult, BlobRef } from '@atproto/lexicon' 5 5 + import { CID } from 'multiformats/cid' 6 6 + import { validate as _validate } from '../../../../lexicons' 7 7 + import { $Typed, is$typed as _is$typed, OmitKey } from '../../../../util' 8 8 + 9 9 + const is$typed = _is$typed, 10 10 + validate = _validate 11 11 + const id = 'pub.leaflet.theme.backgroundImage' 12 12 + 13 13 + export interface Main { 14 14 + $type?: 'pub.leaflet.theme.backgroundImage' 15 15 + image: BlobRef 16 16 + width?: number 17 17 + repeat?: boolean 18 18 + } 19 19 + 20 20 + const hashMain = 'main' 21 21 + 22 22 + export function isMain<V>(v: V) { 23 23 + return is$typed(v, id, hashMain) 24 24 + } 25 25 + 26 26 + export function validateMain<V>(v: V) { 27 27 + return validate<Main & V>(v, id, hashMain) 28 28 + }

+46

lexicons/api/types/pub/leaflet/theme/color.ts

reviewed

··· 1 1 + /** 2 2 + * GENERATED CODE - DO NOT MODIFY 3 3 + */ 4 4 + import { ValidationResult, BlobRef } from '@atproto/lexicon' 5 5 + import { CID } from 'multiformats/cid' 6 6 + import { validate as _validate } from '../../../../lexicons' 7 7 + import { $Typed, is$typed as _is$typed, OmitKey } from '../../../../util' 8 8 + 9 9 + const is$typed = _is$typed, 10 10 + validate = _validate 11 11 + const id = 'pub.leaflet.theme.color' 12 12 + 13 13 + export interface Rgba { 14 14 + $type?: 'pub.leaflet.theme.color#rgba' 15 15 + r: number 16 16 + g: number 17 17 + b: number 18 18 + a: number 19 19 + } 20 20 + 21 21 + const hashRgba = 'rgba' 22 22 + 23 23 + export function isRgba<V>(v: V) { 24 24 + return is$typed(v, id, hashRgba) 25 25 + } 26 26 + 27 27 + export function validateRgba<V>(v: V) { 28 28 + return validate<Rgba & V>(v, id, hashRgba) 29 29 + } 30 30 + 31 31 + export interface Rgb { 32 32 + $type?: 'pub.leaflet.theme.color#rgb' 33 33 + r: number 34 34 + g: number 35 35 + b: number 36 36 + } 37 37 + 38 38 + const hashRgb = 'rgb' 39 39 + 40 40 + export function isRgb<V>(v: V) { 41 41 + return is$typed(v, id, hashRgb) 42 42 + } 43 43 + 44 44 + export function validateRgb<V>(v: V) { 45 45 + return validate<Rgb & V>(v, id, hashRgb) 46 46 + }

+2

lexicons/build.ts

reviewed

··· 2 2 import { BlockLexicons } from "./src/blocks"; 3 3 import { PubLeafletDocument } from "./src/document"; 4 4 import * as PublicationLexicons from "./src/publication"; 5 5 + import { ThemeLexicons } from "./src/theme"; 5 6 6 7 import * as fs from "fs"; 7 8 import * as path from "path"; ··· 18 19 PubLeafletDocument, 19 20 PubLeafletRichTextFacet, 20 21 PageLexicons.PubLeafletPagesLinearDocument, 22 22 + ...ThemeLexicons, 21 23 ...BlockLexicons, 22 24 ...Object.values(PublicationLexicons), 23 25 ];

+52

lexicons/pub/leaflet/publication.json

reviewed

··· 30 30 "image/*" 31 31 ], 32 32 "maxSize": 1000000 33 33 + }, 34 34 + "theme": { 35 35 + "type": "ref", 36 36 + "ref": "#theme" 33 37 } 38 38 + } 39 39 + } 40 40 + }, 41 41 + "theme": { 42 42 + "type": "object", 43 43 + "properties": { 44 44 + "backgroundColor": { 45 45 + "type": "union", 46 46 + "refs": [ 47 47 + "pub.leaflet.theme.color#rgba", 48 48 + "pub.leaflet.theme.color#rgb" 49 49 + ] 50 50 + }, 51 51 + "backgroundImage": { 52 52 + "type": "ref", 53 53 + "ref": "pub.leaflet.theme.backgroundImage" 54 54 + }, 55 55 + "primary": { 56 56 + "type": "union", 57 57 + "refs": [ 58 58 + "pub.leaflet.theme.color#rgba", 59 59 + "pub.leaflet.theme.color#rgb" 60 60 + ] 61 61 + }, 62 62 + "pageBackground": { 63 63 + "type": "union", 64 64 + "refs": [ 65 65 + "pub.leaflet.theme.color#rgba", 66 66 + "pub.leaflet.theme.color#rgb" 67 67 + ] 68 68 + }, 69 69 + "showPageBackground": { 70 70 + "type": "boolean", 71 71 + "default": false 72 72 + }, 73 73 + "accentBackground": { 74 74 + "type": "union", 75 75 + "refs": [ 76 76 + "pub.leaflet.theme.color#rgba", 77 77 + "pub.leaflet.theme.color#rgb" 78 78 + ] 79 79 + }, 80 80 + "accentText": { 81 81 + "type": "union", 82 82 + "refs": [ 83 83 + "pub.leaflet.theme.color#rgba", 84 84 + "pub.leaflet.theme.color#rgb" 85 85 + ] 34 86 } 35 87 } 36 88 }

+27

lexicons/pub/leaflet/theme/backgroundImage.json

reviewed

··· 1 1 + { 2 2 + "lexicon": 1, 3 3 + "id": "pub.leaflet.theme.backgroundImage", 4 4 + "defs": { 5 5 + "main": { 6 6 + "type": "object", 7 7 + "required": [ 8 8 + "image" 9 9 + ], 10 10 + "properties": { 11 11 + "image": { 12 12 + "type": "blob", 13 13 + "accept": [ 14 14 + "image/*" 15 15 + ], 16 16 + "maxSize": 1000000 17 17 + }, 18 18 + "width": { 19 19 + "type": "integer" 20 20 + }, 21 21 + "repeat": { 22 22 + "type": "boolean" 23 23 + } 24 24 + } 25 25 + } 26 26 + } 27 27 + }

+62

lexicons/pub/leaflet/theme/color.json

reviewed

··· 1 1 + { 2 2 + "lexicon": 1, 3 3 + "id": "pub.leaflet.theme.color", 4 4 + "defs": { 5 5 + "rgba": { 6 6 + "type": "object", 7 7 + "required": [ 8 8 + "r", 9 9 + "g", 10 10 + "b", 11 11 + "a" 12 12 + ], 13 13 + "properties": { 14 14 + "r": { 15 15 + "type": "integer", 16 16 + "maximum": 255, 17 17 + "minimum": 0 18 18 + }, 19 19 + "g": { 20 20 + "type": "integer", 21 21 + "maximum": 255, 22 22 + "minimum": 0 23 23 + }, 24 24 + "b": { 25 25 + "type": "integer", 26 26 + "maximum": 255, 27 27 + "minimum": 0 28 28 + }, 29 29 + "a": { 30 30 + "type": "integer", 31 31 + "maximum": 100, 32 32 + "minimum": 0 33 33 + } 34 34 + } 35 35 + }, 36 36 + "rgb": { 37 37 + "type": "object", 38 38 + "required": [ 39 39 + "r", 40 40 + "g", 41 41 + "b" 42 42 + ], 43 43 + "properties": { 44 44 + "r": { 45 45 + "type": "integer", 46 46 + "maximum": 255, 47 47 + "minimum": 0 48 48 + }, 49 49 + "g": { 50 50 + "type": "integer", 51 51 + "maximum": 255, 52 52 + "minimum": 0 53 53 + }, 54 54 + "b": { 55 55 + "type": "integer", 56 56 + "maximum": 255, 57 57 + "minimum": 0 58 58 + } 59 59 + } 60 60 + } 61 61 + } 62 62 + }

+1 -28

lexicons/publish.ts

reviewed

··· 2 2 import * as path from "path"; 3 3 import * as dns from "dns/promises"; 4 4 import { AtpAgent } from "@atproto/api"; 5 5 + import { deepEquals } from "src/utils/deepEquals"; 5 6 6 7 function readLexiconFiles(): { id: string }[] { 7 8 const lexiconDir = path.join("lexicons", "pub", "leaflet"); ··· 115 116 }; 116 117 117 118 main(); 118 118 - function deepEquals(obj1: any, obj2: any): boolean { 119 119 - // Check if both are the same reference 120 120 - if (obj1 === obj2) return true; 121 121 - 122 122 - // Check if either is null or not an object 123 123 - if ( 124 124 - obj1 === null || 125 125 - obj2 === null || 126 126 - typeof obj1 !== "object" || 127 127 - typeof obj2 !== "object" 128 128 - ) 129 129 - return false; 130 130 - 131 131 - // Get keys from both objects 132 132 - const keys1 = Object.keys(obj1); 133 133 - const keys2 = Object.keys(obj2); 134 134 - 135 135 - // Check if they have the same number of keys 136 136 - if (keys1.length !== keys2.length) return false; 137 137 - 138 138 - // Check each key and value recursively 139 139 - for (const key of keys1) { 140 140 - if (!keys2.includes(key)) return false; 141 141 - if (!deepEquals(obj1[key], obj2[key])) return false; 142 142 - } 143 143 - 144 144 - return true; 145 145 - } 146 119 147 120 async function getRecord(rkey: string, agent: AtpAgent) { 148 121 try {

+17

lexicons/src/publication.ts

reviewed

··· 1 1 import { LexiconDoc } from "@atproto/lexicon"; 2 2 + import { ColorUnion, PubLeafletThemeBackgroundImage } from "./theme"; 2 3 3 4 export const PubLeafletPublication: LexiconDoc = { 4 5 lexicon: 1, ··· 16 17 base_path: { type: "string", format: "uri" }, 17 18 description: { type: "string", maxLength: 2000 }, 18 19 icon: { type: "blob", accept: ["image/*"], maxSize: 1000000 }, 20 20 + theme: { type: "ref", ref: "#theme" }, 19 21 }, 22 22 + }, 23 23 + }, 24 24 + theme: { 25 25 + type: "object", 26 26 + properties: { 27 27 + backgroundColor: ColorUnion, 28 28 + backgroundImage: { 29 29 + type: "ref", 30 30 + ref: PubLeafletThemeBackgroundImage.id, 31 31 + }, 32 32 + primary: ColorUnion, 33 33 + pageBackground: ColorUnion, 34 34 + showPageBackground: { type: "boolean", default: false }, 35 35 + accentBackground: ColorUnion, 36 36 + accentText: ColorUnion, 20 37 }, 21 38 }, 22 39 },

+58

lexicons/src/theme.ts

reviewed

··· 1 1 + import { LexiconDoc, LexRefUnion } from "@atproto/lexicon"; 2 2 + 3 3 + export const PubLeafletThemeBackgroundImage = { 4 4 + lexicon: 1, 5 5 + id: "pub.leaflet.theme.backgroundImage", 6 6 + defs: { 7 7 + main: { 8 8 + type: "object", 9 9 + required: ["image"], 10 10 + properties: { 11 11 + image: { 12 12 + type: "blob", 13 13 + accept: ["image/*"], 14 14 + maxSize: 1000000, 15 15 + }, 16 16 + width: { type: "integer" }, 17 17 + repeat: { type: "boolean" }, 18 18 + }, 19 19 + }, 20 20 + }, 21 21 + }; 22 22 + export const PubLeafletThemeColor: LexiconDoc = { 23 23 + lexicon: 1, 24 24 + id: "pub.leaflet.theme.color", 25 25 + defs: { 26 26 + rgba: { 27 27 + type: "object", 28 28 + required: ["r", "g", "b", "a"], 29 29 + properties: { 30 30 + r: { type: "integer", maximum: 255, minimum: 0 }, 31 31 + g: { type: "integer", maximum: 255, minimum: 0 }, 32 32 + b: { type: "integer", maximum: 255, minimum: 0 }, 33 33 + a: { type: "integer", maximum: 100, minimum: 0 }, 34 34 + }, 35 35 + }, 36 36 + rgb: { 37 37 + type: "object", 38 38 + required: ["r", "g", "b"], 39 39 + properties: { 40 40 + r: { type: "integer", maximum: 255, minimum: 0 }, 41 41 + g: { type: "integer", maximum: 255, minimum: 0 }, 42 42 + b: { type: "integer", maximum: 255, minimum: 0 }, 43 43 + }, 44 44 + }, 45 45 + }, 46 46 + }; 47 47 + 48 48 + export const ThemeLexicons = [ 49 49 + PubLeafletThemeBackgroundImage, 50 50 + PubLeafletThemeColor, 51 51 + ]; 52 52 + 53 53 + export const ColorUnion: LexRefUnion = { 54 54 + type: "union", 55 55 + refs: Object.keys(PubLeafletThemeColor.defs).map( 56 56 + (key) => `${PubLeafletThemeColor.id}#${key}`, 57 57 + ), 58 58 + };

+28

src/utils/deepEquals.ts

reviewed

··· 1 1 + export function deepEquals(obj1: any, obj2: any): boolean { 2 2 + // Check if both are the same reference 3 3 + if (obj1 === obj2) return true; 4 4 + 5 5 + // Check if either is null or not an object 6 6 + if ( 7 7 + obj1 === null || 8 8 + obj2 === null || 9 9 + typeof obj1 !== "object" || 10 10 + typeof obj2 !== "object" 11 11 + ) 12 12 + return false; 13 13 + 14 14 + // Get keys from both objects 15 15 + const keys1 = Object.keys(obj1); 16 16 + const keys2 = Object.keys(obj2); 17 17 + 18 18 + // Check if they have the same number of keys 19 19 + if (keys1.length !== keys2.length) return false; 20 20 + 21 21 + // Check each key and value recursively 22 22 + for (const key of keys1) { 23 23 + if (!keys2.includes(key)) return false; 24 24 + if (!deepEquals(obj1[key], obj2[key])) return false; 25 25 + } 26 26 + 27 27 + return true; 28 28 + }