Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-27 22:49:56 -05:00
Code Issues Activity

Linked timestamps to original post URLs for easier navigation

Browse source 
ref https://linear.app/tryghost/issue/AP-408/add-link-to-original-post-location-in-ui-for-better-navigation
This commit is contained in:
Djordje Vlaisavljevic 2024-09-23 20:21:35 +01:00
parent 577362aabf
commit 2ab618709a
1 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
apps/admin-x-activitypub/src/components/feed/FeedItem.tsx
View file

@ -137,6 +137,14 @@ function renderInboxAttachment(object: ObjectProperties) {
} }
} }
function renderTimestamp(object: ObjectProperties) {
const timestamp =
new Date(object?.published ?? new Date()).toLocaleDateString('default', {year: 'numeric', month: 'short', day: '2-digit'}) + ', ' + new Date(object?.published ?? new Date()).toLocaleTimeString('default', {hour: '2-digit', minute: '2-digit'});
const date = new Date(object?.published ?? new Date());
return (<a className='whitespace-nowrap text-grey-700 hover:underline' href={object.url} title={`${timestamp}`}>{getRelativeTimestamp(date)}</a>);
}
const FeedItemStats: React.FC<{ const FeedItemStats: React.FC<{
object: ObjectProperties; object: ObjectProperties;
likeCount: number; likeCount: number;
@ -217,6 +225,7 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
new Date(object?.published ?? new Date()).toLocaleDateString('default', {year: 'numeric', month: 'short', day: '2-digit'}) + ', ' + new Date(object?.published ?? new Date()).toLocaleTimeString('default', {hour: '2-digit', minute: '2-digit'}); new Date(object?.published ?? new Date()).toLocaleDateString('default', {year: 'numeric', month: 'short', day: '2-digit'}) + ', ' + new Date(object?.published ?? new Date()).toLocaleTimeString('default', {hour: '2-digit', minute: '2-digit'});
const date = new Date(object?.published ?? new Date()); const date = new Date(object?.published ?? new Date());
const [isCopied, setIsCopied] = useState(false); const [isCopied, setIsCopied] = useState(false);
const onLikeClick = () => { const onLikeClick = () => {
@ -291,7 +300,7 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
<span className='truncate whitespace-nowrap font-bold' data-test-activity-heading>{author.name}</span> <span className='truncate whitespace-nowrap font-bold' data-test-activity-heading>{author.name}</span>
<span className='ml-1 truncate text-grey-700'>{getUsername(author)}</span> <span className='ml-1 truncate text-grey-700'>{getUsername(author)}</span>
</div> </div>
<span className='whitespace-nowrap text-grey-700' title={`${timestamp}`}>{getRelativeTimestamp(date)}</span> {renderTimestamp(object)}
</div> </div>
</div> </div>
</div> </div>
@ -338,8 +347,8 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
{/* <div className='border-1 z-10 -mt-1 flex w-full flex-col items-start justify-between border-b border-b-grey-200 pb-4' data-test-activity> */} {/* <div className='border-1 z-10 -mt-1 flex w-full flex-col items-start justify-between border-b border-b-grey-200 pb-4' data-test-activity> */}
<div className='relative z-10 flex w-full flex-col overflow-visible text-[1.5rem]'> <div className='relative z-10 flex w-full flex-col overflow-visible text-[1.5rem]'>
<div className='flex'> <div className='flex'>
<span className='truncate whitespace-nowrap font-bold' data-test-activity-heading>{author.name}</span> <span className='truncate whitespace-nowrap font-bold after:mx-1 after:font-normal after:text-grey-700 after:content-["·"]' data-test-activity-heading>{author.name}</span>
<span className='whitespace-nowrap text-grey-700 before:mx-1 before:content-["·"]' title={`${timestamp}`}>{getRelativeTimestamp(date)}</span> {renderTimestamp(object)}
</div> </div>
<div className='flex'> <div className='flex'>
<span className='truncate text-grey-700'>{getUsername(author)}</span> <span className='truncate text-grey-700'>{getUsername(author)}</span>
@ -385,11 +394,10 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
<div className='relative z-10 pt-[3px]'> <div className='relative z-10 pt-[3px]'>
<APAvatar author={author}/> <APAvatar author={author}/>
</div> </div>
{/* <div className='border-1 z-10 -mt-1 flex w-full flex-col items-start justify-between border-b border-b-grey-200 pb-4' data-test-activity> */}
<div className='relative z-10 flex w-full flex-col overflow-visible text-[1.5rem]'> <div className='relative z-10 flex w-full flex-col overflow-visible text-[1.5rem]'>
<div className='flex'> <div className='flex'>
<span className='truncate whitespace-nowrap font-bold' data-test-activity-heading>{author.name}</span> <span className='truncate whitespace-nowrap font-bold after:mx-1 after:font-normal after:text-grey-700 after:content-["·"]' data-test-activity-heading>{author.name}</span>
<span className='whitespace-nowrap text-grey-700 before:mx-1 before:content-["·"]' title={`${timestamp}`}>{getRelativeTimestamp(date)}</span> {renderTimestamp(object)}
</div> </div>
<div className='flex'> <div className='flex'>
<span className='truncate text-grey-700'>{getUsername(author)}</span> <span className='truncate text-grey-700'>{getUsername(author)}</span>
@ -412,7 +420,6 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
</div> </div>
</div> </div>
</div> </div>
{/* </div> */}
</div> </div>
<div className={`absolute -inset-x-3 -inset-y-0 z-0 rounded transition-colors`}></div> <div className={`absolute -inset-x-3 -inset-y-0 z-0 rounded transition-colors`}></div>
{!last && <div className="absolute bottom-0 left-[18px] top-[6.5rem] z-0 mb-[-13px] w-[2px] rounded-sm bg-grey-200"></div>} {!last && <div className="absolute bottom-0 left-[18px] top-[6.5rem] z-0 mb-[-13px] w-[2px] rounded-sm bg-grey-200"></div>}