bunch of small teaks · jack.is/leaflet@0047074

+40 -40

app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx

··· 66 66 return ( 67 67 <SpeedyLink 68 68 href={href} 69 - className="publishedPost no-underline! flex flex-col" 69 + className="publishedPost no-underline! flex flex-col grow" 70 70 > 71 71 {children} 72 72 </SpeedyLink> 73 73 ); 74 74 } 75 75 return ( 76 - <div className="publishedPost no-underline! flex flex-col">{children}</div> 76 + <div className="publishedPost no-underline! flex flex-col grow"> 77 + {children} 78 + </div> 77 79 ); 78 80 } 79 81 ··· 98 100 export function PublicationPostItemMedium(props: MediumProps) { 99 101 const hasCoverImage = !!props.coverImageSrc; 100 102 return ( 101 - <div className="flex w-full flex-col"> 102 - <div className="flex w-full gap-3 items-stretch sm:min-h-36"> 103 - <div className="flex w-full gap-2 grow flex-col justify-between min-w-0 pl-3 pr-3 py-2"> 104 - <PostLink href={props.href}> 105 - {props.title && ( 106 - <h3 className="text-primary line-clamp-2">{props.title}</h3> 107 - )} 108 - <p className="text-secondary line-clamp-3">{props.description}</p> 109 - </PostLink> 110 - <MetaRow 111 - author={props.author} 112 - date={props.date} 113 - interactions={props.interactions} 114 - textClassName="text-sm place-self-end" 115 - /> 103 + <div className="flex w-full items-stretch sm:min-h-36"> 104 + <div className="flex w-full grow flex-col justify-between min-w-0 pl-3 pr-3 py-2"> 105 + <PostLink href={props.href}> 106 + {props.title && ( 107 + <h3 className="text-primary line-clamp-2">{props.title}</h3> 108 + )} 109 + <p className="text-secondary line-clamp-3 grow mb-2"> 110 + {props.description} 111 + </p> 112 + </PostLink> 113 + <MetaRow 114 + author={props.author} 115 + date={props.date} 116 + interactions={props.interactions} 117 + textClassName="text-sm place-self-end" 118 + /> 119 + <div className="shrink-0"> 120 + <hr className=" border-border-light mt-2 mb-1" /> 121 + {props.footer} 116 122 </div> 117 - {hasCoverImage && ( 118 - <div 119 - className={`self-start shrink-0 w-16 border-l border-border-light ${props.footer ? "w-[182px]" : "sm:w-36"}`} 120 - > 121 - <img 122 - src={props.coverImageSrc} 123 - alt={props.coverImageAlt || props.title || ""} 124 - className="w-full aspect-square object-cover rounded" 125 - /> 126 - </div> 127 - )} 128 - </div> 129 - <div className="shrink-0 px-3 pb-2"> 130 - <hr className=" border-border-light mt-2 mb-1" /> 131 - {props.footer} 132 123 </div> 124 + {hasCoverImage && ( 125 + <div 126 + className={`self-start shrink-0 w-16 border-l border-border-light ${props.footer ? "w-[182px]" : "sm:w-36"}`} 127 + > 128 + <img 129 + src={props.coverImageSrc} 130 + alt={props.coverImageAlt || props.title || ""} 131 + className="w-full aspect-square object-cover rounded" 132 + /> 133 + </div> 134 + )} 133 135 </div> 134 136 ); 135 137 } ··· 163 165 textClassName={`${widePage ? "text-sm sm:text-base " : "text-sm "} `} 164 166 /> 165 167 </div> 166 - <div className="shrink-0 flex flex-col shrink-0"> 168 + <div className="shrink-0 flex flex-col "> 167 169 <hr className=" border-border-light mt-2 mb-1" /> 168 170 {props.footer} 169 171 </div> ··· 176 178 className={`flex flex-col items-stretch ${widePage ? "sm:flex-row sm:gap-2 gap-0" : ""} w-full items-start`} 177 179 > 178 180 {hasCoverImage && ( 179 - <div className="w-fit"> 180 - <img 181 - src={props.coverImageSrc} 182 - alt={props.coverImageAlt || props.title || ""} 183 - className={`${widePage ? "h-[244px]" : "h-full"} aspect-[1.91/1] object-cover rounded`} 184 - /> 185 - </div> 181 + <img 182 + src={props.coverImageSrc} 183 + alt={props.coverImageAlt || props.title || ""} 184 + className={`${widePage ? "sm:h-[244px] aspect-[3/2]" : "h-full aspect-[1.91/1]"} object-cover rounded`} 185 + /> 186 186 )} 187 187 {body} 188 188 </div>

+13 -6

app/(app)/lish/[did]/[publication]/[rkey]/PostContent.tsx

··· 35 35 import { PubCodeBlock } from "./Blocks/PubCodeBlock"; 36 36 import { AppBskyFeedDefs } from "@atproto/api"; 37 37 import { PubBlueskyPostBlock } from "./Blocks/PublishBskyPostBlock"; 38 - import { StandardSitePostItemView } from "components/Blocks/StandardSitePostBlock/StandardSitePostItem"; 38 + import { 39 + StandardSitePostItemView, 40 + WithStandardSitePostPublicationTheme, 41 + } from "components/Blocks/StandardSitePostBlock/StandardSitePostItem"; 39 42 import type { StandardSitePostData } from "app/api/rpc/[command]/get_standard_site_posts"; 40 43 import { PublishedPageLinkBlock } from "./Blocks/PublishedPageBlock"; 41 44 import { PublishedPollBlock } from "./Blocks/PublishedPollBlock"; ··· 251 254 : "small"; 252 255 return ( 253 256 <div className={className} {...blockProps}> 254 - <StandardSitePostItemView 257 + <WithStandardSitePostPublicationTheme 255 258 post={post} 256 - size={size} 257 - showPubTheme={b.block.showPublicationTheme !== false} 258 - currentPublicationUri={currentPublicationUri} 259 - /> 259 + enabled={b.block.showPublicationTheme !== false} 260 + > 261 + <StandardSitePostItemView 262 + post={post} 263 + size={size} 264 + currentPublicationUri={currentPublicationUri} 265 + /> 266 + </WithStandardSitePostPublicationTheme> 260 267 </div> 261 268 ); 262 269 }

+3

components/ActionBar/DesktopNavigation.tsx

··· 122 122 asChild 123 123 trigger={ 124 124 <ActionButton 125 + onClick={() => { 126 + console.log("hello"); 127 + }} 125 128 className="w-full! grow" 126 129 secondary 127 130 icon={<AccountSmall />}

+9 -9

components/Blocks/Block.tsx

··· 423 423 className={`nonTextBlock ${props.className} p-2 sm:p-3 overflow-hidden 424 424 ${props.hasAlignment ? "w-fit" : "w-full"} 425 425 ${props.isSelected ? "block-border-selected " : "block-border"} 426 - ${props.borderOnHover && "hover:border-accent-contrast! hover:outline-accent-contrast! focus-within:border-accent-contrast! focus-within:outline-accent-contrast!"}`} 427 - style={{ 428 - backgroundColor: 429 - props.hasBackground === "accent" 430 - ? "var(--accent-light)" 431 - : props.hasBackground === "page" 432 - ? "rgb(var(--bg-page))" 433 - : "transparent", 434 - }} 426 + ${props.borderOnHover && "hover:border-accent-contrast! hover:outline-accent-contrast! focus-within:border-accent-contrast! focus-within:outline-accent-contrast!"} 427 + ${ 428 + props.hasBackground === "accent" 429 + ? "bg-[var(--accent-light)]" 430 + : props.hasBackground === "page" 431 + ? "bg-page" 432 + : "transparent" 433 + } 434 + `} 435 435 > 436 436 {props.children} 437 437 </div>

+11 -23

components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx

··· 25 25 export function StandardSitePostItem({ 26 26 uri, 27 27 size = "medium", 28 - showPubTheme = true, 29 28 currentPublicationUri, 30 29 }: { 31 30 uri: string; 32 31 size?: StandardSitePostSize; 33 - showPubTheme?: boolean; 34 32 currentPublicationUri?: string | null; 35 33 }) { 36 34 const { data, isLoading } = useStandardSitePost(uri); ··· 51 49 <StandardSitePostItemView 52 50 post={data} 53 51 size={size} 54 - showPubTheme={showPubTheme} 55 52 currentPublicationUri={currentPublicationUri} 56 53 /> 57 54 ); ··· 94 91 if (size === "small") { 95 92 return ( 96 93 <> 97 - <div className="flex w-full grow flex-col gap-1 px-3 py-2"> 94 + <div className="transparent-container flex w-full grow flex-col gap-1 p-3 "> 98 95 <div className="h-7 w-2/3 bg-border-light rounded animate-pulse" /> 99 96 <div className="h-4 w-32 bg-border-light rounded animate-pulse" /> 100 97 </div> ··· 106 103 if (size === "medium") { 107 104 return ( 108 105 <> 109 - <div className="flex w-full gap-3 items-stretch sm:min-h-36"> 110 - <div className="flex w-full gap-2 grow flex-col justify-between min-w-0 pl-3 pr-3 py-2"> 106 + <div className="transparent-container flex w-full gap-3 items-stretch sm:min-h-36"> 107 + <div className="flex w-full gap-2 grow flex-col justify-between min-w-0 pl-3 p-3"> 111 108 <div className="flex flex-col gap-2"> 112 109 <div className="h-7 w-2/3 bg-border-light rounded animate-pulse" /> 113 110 <div className="h-4 w-full bg-border-light rounded animate-pulse" /> ··· 126 123 return ( 127 124 <> 128 125 <div 129 - className={`flex flex-col items-stretch ${widePage ? "sm:flex-row sm:gap-2 gap-0" : ""} w-full items-start`} 126 + className={`transparent-container flex flex-col items-stretch ${widePage ? "sm:flex-row sm:gap-2 gap-0" : ""} w-full items-start`} 130 127 > 131 128 <div 132 129 className={`bg-border-light rounded animate-pulse shrink-0 ${widePage ? "w-full sm:w-auto sm:h-[244px] aspect-[1.91/1]" : "w-full aspect-[1.91/1]"}`} 133 130 /> 134 131 <div 135 - className={`flex w-full grow flex-col gap-2 justify-between px-3 py-2 ${widePage ? "sm:pb-3" : ""}`} 132 + className={`flex w-full grow flex-col gap-2 justify-between p-3 pb-2 ${widePage ? "sm:pb-3" : ""}`} 136 133 > 137 134 <div className="flex flex-col gap-2"> 138 135 <div 139 - className={`h-7 w-2/3 bg-border-light rounded animate-pulse ${widePage ? "sm:h-8" : ""}`} 136 + className={`h-7 w-1/3 bg-border-light rounded animate-pulse ${widePage ? "sm:h-8" : ""}`} 140 137 /> 141 138 <div 142 139 className={`h-5 w-full bg-border-light rounded animate-pulse ${widePage ? "sm:h-6" : ""}`} ··· 158 155 export function StandardSitePostItemView({ 159 156 post, 160 157 size = "medium", 161 - showPubTheme = true, 162 158 currentPublicationUri, 163 159 }: { 164 160 post: StandardSitePostData; 165 161 size?: StandardSitePostSize; 166 - showPubTheme?: boolean; 167 162 currentPublicationUri?: string | null; 168 163 }) { 169 164 const docUrl = getDocumentURL( ··· 234 229 footer: pubFooter, 235 230 }; 236 231 237 - let item: React.ReactNode; 238 232 if (size === "large") { 239 - item = ( 233 + return ( 240 234 <PublicationPostItemLarge 241 235 {...commonProps} 242 236 description={description} ··· 245 239 pageWidth={pageWidth} 246 240 /> 247 241 ); 248 - } else if (size === "medium") { 249 - item = ( 242 + } 243 + if (size === "medium") { 244 + return ( 250 245 <PublicationPostItemMedium 251 246 {...commonProps} 252 247 description={description} ··· 254 249 coverImageAlt={post.record.title} 255 250 /> 256 251 ); 257 - } else { 258 - item = <PublicationPostItemSmall {...commonProps} />; 259 252 } 260 - 261 - return ( 262 - <WithStandardSitePostPublicationTheme post={post} enabled={showPubTheme}> 263 - {item} 264 - </WithStandardSitePostPublicationTheme> 265 - ); 253 + return <PublicationPostItemSmall {...commonProps} />; 266 254 } 267 255 268 256 function PubFooter({

+134 -102

components/Blocks/StandardSitePostBlock/index.tsx

··· 32 32 33 33 if (!uri) return null; 34 34 35 - let block = ( 35 + if (!post) 36 + return ( 37 + <StandardSitePostItem 38 + uri={uri} 39 + size={size} 40 + currentPublicationUri={currentPublicationUri} 41 + /> 42 + ); 43 + 44 + return ( 36 45 <BlockLayout 37 46 isSelected={!!isSelected} 38 - hasBackground="page" 39 47 borderOnHover 40 48 className="standardSitePostBlock p-0!" 41 49 extraOptions={ 42 50 <StandardSitePostSettingsButton entityID={props.entityID} /> 43 51 } 44 52 > 45 - <StandardSitePostItem 46 - uri={uri} 47 - size={size} 48 - showPubTheme={showPubTheme} 49 - currentPublicationUri={currentPublicationUri} 50 - /> 53 + <WithStandardSitePostPublicationTheme post={post} enabled={showPubTheme}> 54 + <div className="bg-bg-page"> 55 + <StandardSitePostItem 56 + uri={uri} 57 + size={size} 58 + currentPublicationUri={currentPublicationUri} 59 + /> 60 + </div> 61 + </WithStandardSitePostPublicationTheme> 51 62 </BlockLayout> 52 63 ); 53 - 54 - if (!post) return block; 55 - 56 - return ( 57 - <WithStandardSitePostPublicationTheme post={post} enabled={showPubTheme}> 58 - {block} 59 - </WithStandardSitePostPublicationTheme> 60 - ); 61 64 }; 62 65 63 66 function StandardSitePostSettingsButton(props: { entityID: string }) { ··· 69 72 "standard-site-post/show-publication-theme", 70 73 ); 71 74 let showPubTheme = showPubThemeFact?.data.value !== false; 75 + let popoverKey = `${props.entityID}-settings`; 76 + let setOpenPopover = useUIState((s) => s.setOpenPopover); 77 + let isOpen = useUIState((s) => s.openPopover === popoverKey); 72 78 73 79 return ( 74 80 <Popover 75 81 asChild 76 82 side="top" 77 83 align="end" 78 - className="flex flex-col gap-2 w-xs pb-3! overflow-y-auto" 84 + className="p-0!" 85 + open={isOpen} 86 + onOpenChange={(o) => setOpenPopover(o ? popoverKey : null)} 79 87 onOpenAutoFocus={(e) => e.preventDefault()} 80 88 trigger={ 81 89 <SettingsTriggerButton aria-label="Standard Site Post Settings" /> 82 90 } 83 91 > 84 - <h4>Post Size</h4> 85 - <div className="flex flex-col gap-3 w-full"> 86 - {( 87 - [ 88 - { value: "small", Icon: SmallIcon }, 89 - { value: "medium", Icon: MedIcon }, 90 - { value: "large", Icon: LargeIcon }, 91 - ] as { 92 - value: StandardSitePostSize; 93 - Icon: (props: { selected: boolean }) => React.ReactNode; 94 - }[] 95 - ).map((option) => { 96 - let selected = 97 - size === option.value || 98 - (option.value === "medium" && size !== "small" && size !== "large"); 99 - return ( 100 - <button 101 - className="text-left" 102 - key={option.value} 103 - type="button" 104 - aria-pressed={selected} 105 - onClick={() => { 106 - if (!rep) return; 107 - rep.mutate.assertFact({ 108 - entity: props.entityID, 109 - attribute: "standard-site-post/size", 110 - data: { 111 - type: "standard-site-post-size-union", 112 - value: option.value, 113 - }, 114 - }); 115 - }} 116 - > 117 - <option.Icon selected={selected} /> 118 - </button> 119 - ); 120 - })} 92 + <div className="flex flex-col gap-2 w-xs pt-1 p-3! overflow-y-auto"> 93 + <div> 94 + <h4>Post Size</h4> 95 + <div className="text-sm text-tertiary italic"> 96 + This block links to a Standard Site article. 97 + </div> 98 + </div> 99 + <div className="flex flex-col gap-3 w-full"> 100 + {( 101 + [ 102 + { value: "small", Icon: SmallIcon }, 103 + { value: "medium", Icon: MedIcon }, 104 + { value: "large", Icon: LargeIcon }, 105 + ] as { 106 + value: StandardSitePostSize; 107 + Icon: (props: { selected: boolean }) => React.ReactNode; 108 + }[] 109 + ).map((option) => { 110 + let selected = 111 + size === option.value || 112 + (option.value === "medium" && 113 + size !== "small" && 114 + size !== "large"); 115 + return ( 116 + <button 117 + className="text-left" 118 + key={option.value} 119 + type="button" 120 + aria-pressed={selected} 121 + onClick={() => { 122 + if (!rep) return; 123 + rep.mutate.assertFact({ 124 + entity: props.entityID, 125 + attribute: "standard-site-post/size", 126 + data: { 127 + type: "standard-site-post-size-union", 128 + value: option.value, 129 + }, 130 + }); 131 + }} 132 + > 133 + <option.Icon selected={selected} /> 134 + </button> 135 + ); 136 + })} 137 + </div> 138 + <hr className="border-border-light my-1" /> 139 + <Toggle 140 + toggle={showPubTheme} 141 + onToggle={() => { 142 + if (!rep) return; 143 + rep.mutate.assertFact({ 144 + entity: props.entityID, 145 + attribute: "standard-site-post/show-publication-theme", 146 + data: { type: "boolean", value: !showPubTheme }, 147 + }); 148 + }} 149 + > 150 + <div className="font-bold">Use Publication Theme</div> 151 + </Toggle> 121 152 </div> 122 - <hr className="border-border-light my-1" /> 123 - <Toggle 124 - toggle={showPubTheme} 125 - onToggle={() => { 126 - if (!rep) return; 127 - rep.mutate.assertFact({ 128 - entity: props.entityID, 129 - attribute: "standard-site-post/show-publication-theme", 130 - data: { type: "boolean", value: !showPubTheme }, 131 - }); 132 - }} 133 - > 134 - <div className="font-bold">Use Publication Theme</div> 135 - </Toggle> 136 153 </Popover> 137 154 ); 138 155 } ··· 140 157 const SmallIcon = ({ selected }: { selected: boolean }) => { 141 158 return ( 142 159 <div 143 - className={`flex gap-2 p-2 w-full opaque-container outline-2 outline-offset-1 border-border! ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent"}`} 160 + className={`flex flex-col pt-1 p-2 outline-2 outline-offset-1 border ${selected ? "accent-container outline-accent-contrast border-accent-contrast " : "opaque-container outline-transparent"}`} 144 161 > 145 - <div className="flex flex-col gap-1 grow min-w-0"> 146 - <div className="w-full h-4 bg-tertiary rounded-[2px]" /> 162 + <div className="text-xs font-bold text-secondary">SMALL</div> 163 + <div 164 + className={`flex gap-2 p-2 w-full overflow-hidden opaque-container border-tertiary! ${selected && "border-accent-contrast!"}`} 165 + > 166 + <div className="flex flex-col gap-1 grow min-w-0"> 167 + <div className="w-full h-4 bg-border rounded-[2px]" /> 147 168 148 - <div className="flex justify-between mt-1 w-full"> 149 - <div className="w-[60%] h-2 bg-border rounded-[2px]" /> 150 - <div className="w-6 h-2 bg-border rounded-[2px]" /> 169 + <div className="flex justify-between mt-1 w-full"> 170 + <div className="w-[60%] h-2 bg-border-light rounded-[2px]" /> 171 + <div className="w-6 h-2 bg-border-light rounded-[2px]" /> 172 + </div> 151 173 </div> 152 174 </div> 153 175 </div> ··· 157 179 const MedIcon = ({ selected }: { selected: boolean }) => { 158 180 return ( 159 181 <div 160 - className={`flex gap-2 w-full opaque-container outline-2 outline-offset-1 bg-bg-page overflow-hidden border-border! ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent "}`} 182 + className={`flex flex-col pt-1 p-2 outline-2 outline-offset-1 border ${selected ? "accent-container outline-accent-contrast border-accent-contrast " : "opaque-container outline-transparent"}`} 161 183 > 162 - <div className="flex flex-col gap-1 p-2 grow min-w-0"> 163 - <div className="w-full h-4 bg-tertiary rounded-[2px]" /> 164 - <div className="w-full h-2 bg-tertiary mt-1 rounded-[2px]" /> 165 - <div className="w-full h-2 bg-tertiary rounded-[2px]" /> 166 - <div className="flex justify-between mt-2 w-full"> 167 - <div className="w-[60%] h-2 bg-border rounded-[2px]" /> 168 - <div className="w-6 h-2 bg-border rounded-[2px]" /> 184 + <div className="text-xs font-bold text-secondary">MEDIUM</div> 185 + <div 186 + className={`flex opaque-container border-tertiary! overflow-hidden ${selected && "border-accent-contrast!"}`} 187 + > 188 + <div className="flex flex-col gap-1 p-2 grow min-w-0"> 189 + <div className="w-full h-4 bg-border rounded-[2px]" /> 190 + <div className="w-full h-2 bg-border mt-1 rounded-[2px]" /> 191 + <div className="w-full h-2 bg-border rounded-[2px]" /> 192 + <div className="flex justify-between mt-2 w-full"> 193 + <div className="w-[60%] h-2 bg-border-light rounded-[2px]" /> 194 + <div className="w-6 h-2 bg-border-light rounded-[2px]" /> 195 + </div> 169 196 </div> 197 + <div 198 + className="aspect-square h-[82px] bg-border border-l border-border shrink-0 bg-cover bg-center" 199 + style={{ 200 + backgroundImage: "url(/imagePlaceholder.png)", 201 + backgroundBlendMode: "hard-light", 202 + }} 203 + /> 170 204 </div> 171 - <div 172 - className="aspect-square h-[82px] bg-border border-l border-border shrink-0 bg-cover bg-center" 173 - style={{ 174 - backgroundImage: "url(/imagePlaceholder.png)", 175 - backgroundBlendMode: "hard-light", 176 - }} 177 - /> 178 205 </div> 179 206 ); 180 207 }; ··· 182 209 const LargeIcon = ({ selected }: { selected: boolean }) => { 183 210 return ( 184 211 <div 185 - className={`flex flex-col gap-2 w-full outline-2 outline-offset-1 opaque-container overflow-hidden border-border! ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent"}`} 212 + className={`flex flex-col pt-1 p-2 outline-2 outline-offset-1 border ${selected ? "accent-container outline-accent-contrast border-accent-contrast " : "opaque-container outline-transparent"}`} 186 213 > 214 + <div className="text-xs font-bold text-secondary">LARGE</div> 187 215 <div 188 - className="w-full aspect-video bg-border bg-cover bg-center border-b border-border" 189 - style={{ 190 - backgroundImage: "url(/imagePlaceholder.png)", 191 - backgroundBlendMode: "hard-light", 192 - }} 193 - /> 216 + className={`flex flex-col gap-1 opaque-container border-tertiary! overflow-hidden ${selected && "border-accent-contrast!"}`} 217 + > 218 + <div 219 + className="w-full aspect-video bg-border bg-cover bg-center border-b border-border" 220 + style={{ 221 + backgroundImage: "url(/imagePlaceholder.png)", 222 + backgroundBlendMode: "hard-light", 223 + }} 224 + /> 194 225 195 - <div className="flex flex-col gap-1 p-2 pt-0.5!"> 196 - <div className="w-full h-4 bg-tertiary rounded-[2px]" /> 197 - <div className="w-full h-2 bg-tertiary mt-1 rounded-[2px]" /> 198 - <div className="flex justify-between mt-2 w-full"> 199 - <div className="w-[60%] h-2 bg-border rounded-[2px]" /> 200 - <div className="w-6 h-2 bg-border rounded-[2px]" /> 226 + <div className="flex flex-col gap-1 p-2 pt-0.5!"> 227 + <div className="w-full h-4 bg-border rounded-[2px]" /> 228 + <div className="w-full h-2 bg-border mt-1 rounded-[2px]" /> 229 + <div className="flex justify-between mt-2 w-full"> 230 + <div className="w-[60%] h-2 bg-border-light rounded-[2px]" /> 231 + <div className="w-6 h-2 bg-border-light rounded-[2px]" /> 232 + </div> 201 233 </div> 202 234 </div> 203 235 </div>

+1

components/Popover/index.tsx

··· 65 65 sideOffset={props.sideOffset ? props.sideOffset : 4} 66 66 collisionPadding={16} 67 67 onOpenAutoFocus={props.onOpenAutoFocus} 68 + arrowPadding={12} 68 69 > 69 70 {props.children} 70 71 {!props.noArrow && (

+1 -1

package.json

··· 5 5 "main": "index.js", 6 6 "scripts": { 7 7 "lint": "next lint", 8 - "dev": "TZ=UTC next dev --turbo", 8 + "dev": "TZ=UTC next dev --turbo -H 127.0.0.1", 9 9 "publish-lexicons": "tsx lexicons/publish.ts", 10 10 "generate-db-types": "supabase gen types --local > supabase/database.types.ts && drizzle-kit introspect && rm -rf ./drizzle/*.sql ./drizzle/meta", 11 11 "lexgen": "tsx ./lexicons/build.ts && lex gen-api ./lexicons/api ./lexicons/pub/leaflet/document.json ./lexicons/pub/leaflet/comment.json ./lexicons/pub/leaflet/publication.json ./lexicons/pub/leaflet/publicationPage.json ./lexicons/pub/leaflet/content.json ./lexicons/pub/leaflet/*/* ./lexicons/com/atproto/*/* ./lexicons/app/bsky/*/* ./lexicons/site/*/* ./lexicons/site/*/*/* ./lexicons/parts/*/* ./lexicons/parts/*/*/* --yes && tsx ./lexicons/fix-extensions.ts ./lexicons/api",

Configure Feed

Configure Feed