[pull] main from TryGhost:main

.github/workflows/ci.yml

@@ -1547,7 +1547,7 @@ jobs:
     runs-on: ubuntu-latest
     if: |
       always()
-      && github.repository_owner == 'TryGhost'
+      && github.repository == 'TryGhost/Ghost'
       && needs.job_setup.result == 'success'
       && needs.job_docker_build_production.result == 'success'
       && needs.job_docker_build_production.outputs.use-artifact != 'true'

apps/activitypub/.eslintrc.cjs

@@ -56,7 +56,7 @@ module.exports = {
         'react/no-array-index-key': 'error',
         'react/jsx-key': 'off',
 
-        'tailwindcss/classnames-order': 'off',
+        'tailwindcss/classnames-order': 'error',
         'tailwindcss/enforces-negative-arbitrary-values': 'warn',
         'tailwindcss/enforces-shorthand': 'warn',
         'tailwindcss/migration-from-tailwind-2': 'warn',

apps/activitypub/src/components/feed/deleted-feed-item.tsx

@@ -12,7 +12,7 @@ const DeletedFeedItem: React.FC<DeletedFeedItemProps> = ({last}) => {
                 <LucideIcon.Trash size={18} strokeWidth={1.25} />
                 This post has been deleted
             </div>
-            {!last && <div className="absolute bottom-0 left-[18px] top-[70px] z-0 mb-[-13px] w-[2px] rounded-sm bg-gray-200"></div>}
+            {!last && <div className="absolute top-[70px] bottom-0 left-[18px] z-0 mb-[-13px] w-[2px] rounded-sm bg-gray-200"></div>}
         </div>
     );
 };

apps/activitypub/src/components/feed/table-of-contents.tsx

@@ -186,7 +186,7 @@ const TableOfContentsView: React.FC<TableOfContentsViewProps> = ({items, activeH
         <Popover modal={false} open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
                 <div
-                    className='absolute right-2 top-1/2 flex -translate-y-1/2 flex-col items-end gap-2 rounded-md p-2 text-base dark:bg-black'
+                    className='absolute top-1/2 right-2 flex -translate-y-1/2 flex-col items-end gap-2 rounded-md p-2 text-base dark:bg-black'
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
                 >

apps/activitypub/src/components/global/ap-avatar.tsx

@@ -45,7 +45,7 @@ const FollowButton: React.FC<FollowButtonProps> = ({onFollow, onUnfollow, author
             onClick={handleClick}
         >
             {showCheckmark ? (
-                <LucideIcon.Check className='size-3! stroke-[2.4]! -mb-px' />
+                <LucideIcon.Check className='-mb-px size-3! stroke-[2.4]!' />
             ) : (
                 <LucideIcon.Plus className='size-[14px]! stroke-2!' />
             )}

apps/activitypub/src/components/global/image-lightbox.tsx

@@ -165,7 +165,7 @@ const ImageLightbox: React.FC<ImageLightboxProps> = ({
                 }
             }}
         >
-            <DialogContent className="data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-top-[50%] top-[50%] h-[100vh] max-h-[100vh] w-[100vw] max-w-[100vw] translate-y-[-50%] items-center border-none bg-transparent p-0 shadow-none" onClick={() => onClose()}>
+            <DialogContent className="top-[50%] h-[100vh] max-h-[100vh] w-[100vw] max-w-[100vw] translate-y-[-50%] items-center border-none bg-transparent p-0 shadow-none data-[state=closed]:zoom-out-100 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-top-[50%]" onClick={() => onClose()}>
                 <img
                     alt={images[currentIndex].alt}
                     className="mx-auto max-h-[90vh] max-w-[90vw] object-contain"
@@ -176,7 +176,7 @@ const ImageLightbox: React.FC<ImageLightboxProps> = ({
                 {images.length > 1 && (
                     <>
                         <Button
-                            className="absolute left-5 top-1/2 size-11 -translate-y-1/2 rounded-full bg-black/50 p-0 pr-0.5 hover:bg-black/70"
+                            className="absolute top-1/2 left-5 size-11 -translate-y-1/2 rounded-full bg-black/50 p-0 pr-0.5 hover:bg-black/70"
                             disabled={isFirstImage}
                             onClick={(e) => {
                                 e.stopPropagation();
@@ -188,7 +188,7 @@ const ImageLightbox: React.FC<ImageLightboxProps> = ({
                         </Button>
 
                         <Button
-                            className="absolute right-5 top-1/2 size-11 -translate-y-1/2 rounded-full bg-black/50 p-0 pl-0.5 hover:bg-black/70"
+                            className="absolute top-1/2 right-5 size-11 -translate-y-1/2 rounded-full bg-black/50 p-0 pl-0.5 hover:bg-black/70"
                             disabled={isLastImage}
                             onClick={(e) => {
                                 e.stopPropagation();
@@ -201,7 +201,7 @@ const ImageLightbox: React.FC<ImageLightboxProps> = ({
                     </>
                 )}
                 <DialogClose asChild>
-                    <Button className="absolute right-5 top-5 size-11 rounded-full bg-black/50 p-0 hover:bg-black/70">
+                    <Button className="absolute top-5 right-5 size-11 rounded-full bg-black/50 p-0 hover:bg-black/70">
                         <LucideIcon.X className="size-5!" />
                         <span className="sr-only">Close</span>
                     </Button>

apps/activitypub/src/components/global/profile-preview-hover-card.tsx

@@ -109,7 +109,7 @@ const ProfilePreviewHoverCard: React.FC<ProfilePreviewHoverCardProps> = ({
             </HoverCardTrigger>
             <HoverCardContent
                 align={align}
-                className='outline-hidden w-[320px] cursor-default rounded-2xl border-0 p-5 text-left text-gray-900 shadow-[0_5px_24px_0px_rgba(0,0,0,0.02),0px_2px_5px_0px_rgba(0,0,0,0.07),0px_0px_1px_0px_rgba(0,0,0,0.25)] dark:bg-[#101114] dark:shadow-none'
+                className='w-[320px] cursor-default rounded-2xl border-0 p-5 text-left text-gray-900 shadow-[0_5px_24px_0px_rgba(0,0,0,0.02),0px_2px_5px_0px_rgba(0,0,0,0.07),0px_0px_1px_0px_rgba(0,0,0,0.25)] outline-hidden dark:bg-[#101114] dark:shadow-none'
                 side={side}
                 sideOffset={12}
                 onClick={e => e.stopPropagation()}
@@ -170,7 +170,7 @@ const ProfilePreviewHoverCard: React.FC<ProfilePreviewHoverCardProps> = ({
                     {isLoading ? (
                         <Skeleton className='h-4 w-48' />
                     ) : !hasLoadingError && bio ? (
-                        <div dangerouslySetInnerHTML={{__html: sanitizeHtml(bio)}} className='leading-tight dark:text-gray-300 [&_.invisible]:hidden [&_a:hover]:underline [&_a]:text-[#00a4eb]' />
+                        <div dangerouslySetInnerHTML={{__html: sanitizeHtml(bio)}} className='leading-tight dark:text-gray-300 [&_.invisible]:hidden [&_a]:text-[#00a4eb] [&_a:hover]:underline' />
                     ) : null}
                 </div>
             </HoverCardContent>

apps/activitypub/src/components/global/show-replies-button.tsx

@@ -54,7 +54,7 @@ const ShowRepliesButton: React.FC<ShowRepliesButtonProps> = ({count, onClick, va
                 <div className='size-0.5 rounded-sm bg-gray-300'></div>
             </div>
             <Button
-                className='hover:text-blue-800 text-sm font-medium text-blue-600'
+                className='text-sm font-medium text-blue-600 hover:text-blue-800'
                 variant="ghost"
                 onClick={(e: React.MouseEvent<HTMLElement>) => {
                     e.preventDefault();

apps/activitypub/src/components/global/suggested-profiles.tsx

@@ -50,7 +50,7 @@ export const SuggestedProfile: React.FC<SuggestedProfileProps & {
                             handle: profile.handle
                         }
                     } onClick={() => onOpenChange?.(false)} />
-                    <div className='flex grow flex-col break-anywhere'>
+                    <div className='break-anywhere flex grow flex-col'>
                         <span className='line-clamp-1 font-semibold text-black dark:text-white'>{!isLoading ? profile.name : <Skeleton className='w-full max-w-64' />}</span>
                         <span className='line-clamp-1 text-sm text-gray-700 dark:text-gray-600'>{!isLoading ? profile.handle : <Skeleton className='w-24' />}</span>
                     </div>

apps/activitypub/src/components/layout/header/header.tsx

@@ -64,7 +64,7 @@ const Header: React.FC<HeaderProps> = ({onToggleMobileSidebar, showBorder = true
     return (
         <>
             {onlyBackButton ?
-                <div className='sticky left-0 top-8 z-50 inline-block max-lg:flex max-lg:items-center max-lg:justify-between max-lg:pr-[15.5px] max-md:top-4'>
+                <div className='sticky top-8 left-0 z-50 inline-block max-lg:flex max-lg:items-center max-lg:justify-between max-lg:pr-[15.5px] max-md:top-4'>
                     <div>{backActive && <BackButton className='ml-6 max-md:ml-[10px]' />}</div>
                     {!backActive && <MobileMenuButton onToggleMobileSidebar={onToggleMobileSidebar} />}
                 </div>

apps/activitypub/src/components/layout/onboarding/step-1.tsx

@@ -45,8 +45,8 @@ const Step1: React.FC = () => {
                     <Button className={`min-w-60 bg-gradient-to-r from-purple-500 to-[#6A1AD6] hover:opacity-90 dark:text-white`} size='lg' onClick={() => navigate('/welcome/2')}>Next &rarr;</Button>
                 </div>
                 <div className='relative z-10 h-full'>
-                    <img className='absolute left-1/2 top-[calc(-280px)] w-full min-w-[1240px] max-w-[1300px] -translate-x-1/2 dark:hidden' src={apNodes} />
-                    <img className='dark:visible! dark:block! absolute left-1/2 top-[calc(-280px)] hidden w-full min-w-[1240px] max-w-[1300px] -translate-x-1/2' src={apNodesDark} />
+                    <img className='absolute top-[calc(-280px)] left-1/2 w-full max-w-[1300px] min-w-[1240px] -translate-x-1/2 dark:hidden' src={apNodes} />
+                    <img className='absolute top-[calc(-280px)] left-1/2 hidden w-full max-w-[1300px] min-w-[1240px] -translate-x-1/2 dark:visible! dark:block!' src={apNodesDark} />
                     <div className='relative mx-auto mt-0 flex w-96 flex-col gap-3 rounded-lg bg-white p-6 shadow-xl before:absolute before:inset-[80px] before:-z-10 before:rounded-full before:bg-[radial-gradient(circle,#4b5563,#6b7280,#9ca3af)] before:blur-[1000px] xxl:mt-[calc(-280px+20vw)] min-[1800px]:mt-14 dark:border dark:border-gray-950 dark:bg-[#101114] dark:shadow-[#1e1b4b]/5 dark:before:bg-[radial-gradient(circle,#6366f1,#a855f7,#ec4899)]'>
                         <div className='flex items-start justify-between'>
                             <APAvatar
@@ -59,7 +59,7 @@ const Step1: React.FC = () => {
                                 }}
                                 size='md'
                             />
-                            <span className='flex h-5 items-center gap-1 rounded-full bg-gray-100 px-3 text-[11px] font-medium uppercase text-gray-700 dark:bg-gray-925/70 dark:text-gray-500'>
+                            <span className='flex h-5 items-center gap-1 rounded-full bg-gray-100 px-3 text-[11px] font-medium text-gray-700 uppercase dark:bg-gray-925/70 dark:text-gray-500'>
                                 <LucideIcon.Check className='ml-[-2px]' size={14} />
                             Following
                             </span>
@@ -75,7 +75,7 @@ const Step1: React.FC = () => {
                                             <LucideIcon.Check size={16} />
                                         }
                                     </Button>
-                                    <span className={`absolute right-full flex items-center gap-3 text-nowrap font-mono text-sm font-medium uppercase text-purple after:mr-3 after:h-[1.5px] after:w-24 after:scale-0 after:bg-purple after:will-change-transform after:content-[""] ${!usersLoading && 'after:animate-onboarding-handle-line'}`}><span className={`opacity-0 ${!usersLoading && 'animate-onboarding-handle-label'}`}>Your social web handle</span></span>
+                                    <span className={`absolute right-full flex items-center gap-3 font-mono text-sm font-medium text-nowrap text-purple uppercase after:mr-3 after:h-[1.5px] after:w-24 after:scale-0 after:bg-purple after:will-change-transform after:content-[""] ${!usersLoading && 'after:animate-onboarding-handle-line'}`}><span className={`opacity-0 ${!usersLoading && 'animate-onboarding-handle-label'}`}>Your social web handle</span></span>
                                 </div>
                             </div>
                         </div>
@@ -87,7 +87,7 @@ const Step1: React.FC = () => {
                             )}
                         </p>
                         <div className='mt-1 flex gap-2 text-sm text-gray-800 dark:text-gray-600'>
-                            <div className='flex [&>*:not(:first-child)]:-ml-2 [&>*:nth-child(1)]:z-30 [&>*:nth-child(2)]:z-20 [&>*:nth-child(3)]:z-10 [&>*]:pointer-events-none [&>*]:size-5 [&>*]:border [&>*]:border-white dark:[&>*]:border-[#101114] [&_img]:size-5'>
+                            <div className='flex [&_img]:size-5 [&>*]:pointer-events-none [&>*]:size-5 [&>*]:border [&>*]:border-white dark:[&>*]:border-[#101114] [&>*:not(:first-child)]:-ml-2 [&>*:nth-child(1)]:z-30 [&>*:nth-child(2)]:z-20 [&>*:nth-child(3)]:z-10'>
                                 {transformedUsers.map(user => (
                                     <APAvatar key={user.id} author={user} disabled={true} size='xs' />
                                 ))}

apps/activitypub/src/components/layout/onboarding/step-2.tsx

@@ -23,7 +23,7 @@ const Reply: React.FC<{
                 </Avatar>
                 <div className='flex flex-col gap-2 text-sm'>
                     <div className='mt-0.5 flex flex-col gap-0.5'>
-                        <div className='font-semibold leading-tighter'>{name} <span className='font-normal text-gray-700 dark:text-gray-600'>{handle}</span></div>
+                        <div className='leading-tighter font-semibold'>{name} <span className='font-normal text-gray-700 dark:text-gray-600'>{handle}</span></div>
                         <div className='flex items-center gap-1 leading-tighter text-gray-700 dark:text-gray-600'>
                             <LucideIcon.Reply size={14} strokeWidth={1.5} />
                             <span>Replied to your post {timestamp}</span>
@@ -47,14 +47,14 @@ const Reaction: React.FC<{
     return (
         <div>
             <div className='flex w-full items-start gap-3'>
-                <div className={`flex size-9 max-h-9 min-h-9 min-w-9 max-w-9 items-center justify-center rounded-full bg-gradient-to-t text-white ${type === 'like' ? 'from-pink-400 to-pink-600' : 'from-blue-400 to-blue-600'}`}>
+                <div className={`flex size-9 max-h-9 min-h-9 max-w-9 min-w-9 items-center justify-center rounded-full bg-gradient-to-t text-white ${type === 'like' ? 'from-pink-400 to-pink-600' : 'from-blue-400 to-blue-600'}`}>
                     {type === 'like' ? <LucideIcon.Heart size={20} /> : <LucideIcon.Repeat size={20} />}
                 </div>
                 <div className='flex flex-col gap-2 text-sm'>
                     <div className='flex flex-col gap-3'>
                         {children}
                         <div className='flex flex-col gap-0.5'>
-                            <div className='font-semibold leading-tighter'>{names} <span className='font-normal text-gray-700 dark:text-gray-600'>{type === 'like' ? 'liked' : 'reposted'} your post</span></div>
+                            <div className='leading-tighter font-semibold'>{names} <span className='font-normal text-gray-700 dark:text-gray-600'>{type === 'like' ? 'liked' : 'reposted'} your post</span></div>
                             <div className='text-xs text-gray-700 dark:text-gray-600'>{timestamp}</div>
                         </div>
                     </div>
@@ -69,8 +69,8 @@ const Step2: React.FC = () => {
 
     return (
         <div className='relative flex size-full max-h-screen flex-col gap-4 overflow-hidden px-14'>
-            <img className='absolute left-1/2 top-[120px] w-full min-w-[1240px] max-w-[1300px] -translate-x-1/2 dark:hidden' src={apDashedLines} />
-            <img className='dark:visible! dark:block! absolute left-1/2 top-[120px] hidden w-full min-w-[1240px] max-w-[1300px] -translate-x-1/2' src={apDashedLinesDark} />
+            <img className='absolute top-[120px] left-1/2 w-full max-w-[1300px] min-w-[1240px] -translate-x-1/2 dark:hidden' src={apDashedLines} />
+            <img className='absolute top-[120px] left-1/2 hidden w-full max-w-[1300px] min-w-[1240px] -translate-x-1/2 dark:visible! dark:block!' src={apDashedLinesDark} />
             <Header>
                 <div className='flex flex-col justify-between gap-4 text-xl font-medium'>
                     <h1 className='max-w-[680px]'>Feel the network effect.</h1>
@@ -84,7 +84,7 @@ const Step2: React.FC = () => {
             <div className='mt-8 flex h-full max-h-[670px] flex-col items-stretch justify-end'>
                 <div className='relative -mx-14 mt-5 w-[calc(100%+112px)] overflow-y-hidden px-14 pt-8'>
                     <div className='relative mx-auto h-[694px] w-full max-w-xl rounded-2xl border border-gray-200/70 bg-white shadow-xl dark:border-gray-900 dark:bg-[#101114] dark:shadow-xl dark:shadow-[#1e1b4b]/10'>
-                        <div className='absolute -right-8 -top-4 flex h-8 animate-onboarding-followers items-center gap-1.5 rounded-full bg-gradient-to-t from-black to-gray-900 px-3 font-semibold text-white opacity-0'>
+                        <div className='animate-onboarding-followers absolute -top-4 -right-8 flex h-8 items-center gap-1.5 rounded-full bg-gradient-to-t from-black to-gray-900 px-3 font-semibold text-white opacity-0'>
                             <LucideIcon.TrendingUp size={18} />
                             270 followers this week
                         </div>