diff --git a/__tests__/PostPage.tsx b/__tests__/PostPage.tsx index 019a8bdec8d..3aaf63b5fa3 100644 --- a/__tests__/PostPage.tsx +++ b/__tests__/PostPage.tsx @@ -158,7 +158,7 @@ it('should set href to the post permalink', async () => { const res = renderPost(); // Wait for GraphQL to return await res.findByText('Learn SQL'); - const el = res.getByTitle('Go to article'); + const el = res.getAllByTitle('Go to article')[0]; expect(el).toHaveAttribute('href', 'http://localhost:4000/r/9CuRpr5NiEY5'); }); diff --git a/pages/posts/[id].tsx b/pages/posts/[id].tsx index 7e3f77649ee..8d5df986d85 100644 --- a/pages/posts/[id].tsx +++ b/pages/posts/[id].tsx @@ -215,9 +215,12 @@ const Tags = styled.div` ${typoSmall}; `; -const PostImage = styled(LazyImage)` +const PostImage = styled.a` + display: block; margin: ${size2} 0; border-radius: ${size4}; + overflow: hidden; + cursor: pointer; `; const ActionButtons = styled.div` @@ -410,6 +413,14 @@ export default function PostPage({ id }: Props): ReactElement { } }; + const postLinkProps = { + href: postById?.post.permalink, + title: 'Go to article', + target: '_blank', + rel: 'noopener noreferrer', + onClick: () => ReactGA.event({ category: 'Post', action: 'Click' }), + }; + const Seo: NextSeoProps = { title: postById?.post.title, description: `Join us to the discussion about "${postById?.post.title}" on daily.dev ✌️`, @@ -455,25 +466,20 @@ export default function PostPage({ id }: Props): ReactElement { )} - ReactGA.event({ category: 'Post', action: 'Click' })} - > + {postById?.post.title} {postById?.post.tags.map((t) => `#${t}`).join(' ')} - + + +