acid-info/logos-press-engine
1
0
Fork 0
mirror of https://github.com/acid-info/logos-press-engine.git synced 2025-02-23 22:58:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix article cards linking

Browse Source
This commit is contained in:
amirhouieh 2023-05-15 11:26:55 +02:00
parent 2069dab45b
commit f10b7aacda
4 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Article/Article.MobileToc.tsx
View File

@ -24,7 +24,7 @@ export const MobileToc = ({ toc }: Props) => {
> >
<CustomTypography variant="label2" genericFontFamily="sans-serif"> <CustomTypography variant="label2" genericFontFamily="sans-serif">
{toc.title} {toc.title}
</Typography> </CustomTypography>
</TocItem> </TocItem>
))} ))}
</Collapse> </Collapse>

19
src/components/ArticleReference/ArticleReference.tsx
View File

@ -14,7 +14,6 @@ export default function ArticleReference({
data: { title, modifiedAt, mentions, slug }, data: { title, modifiedAt, mentions, slug },
...props ...props
}: Props) { }: Props) {
const router = useRouter()
const localDate = new Date(modifiedAt).toLocaleString('en-GB', { const localDate = new Date(modifiedAt).toLocaleString('en-GB', {
day: 'numeric', day: 'numeric',
month: 'long', month: 'long',
@ -22,10 +21,12 @@ export default function ArticleReference({
}) })
return ( return (
<ReferenceLink href={slug} {...props}> <Container {...props}>
<Typography component="span" variant="body1"> <ArticleLink href={slug}>
{title} <Typography component="span" variant="body1">
</Typography> {title}
</Typography>
</ArticleLink>
<Info> <Info>
<Authors <Authors
flexDirection={AuthorsDirection.ROW} flexDirection={AuthorsDirection.ROW}
@ -38,22 +39,24 @@ export default function ArticleReference({
{localDate} {localDate}
</Typography> </Typography>
</Info> </Info>
</ReferenceLink> </Container>
) )
} }
const ReferenceLink = styled(Link)` const Container = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 8px 14px; padding: 8px 14px;
border-bottom: 1px solid rgb(var(--lsd-border-primary)); border-bottom: 1px solid rgb(var(--lsd-border-primary));
text-decoration: none; text-decoration: none;
cursor: pointer;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
`
const ArticleLink = styled(Link)`
text-decoration: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }

38
src/components/FeaturedPost/FeaturedPost.tsx
View File

@ -11,26 +11,24 @@ const FeaturedPost = ({ post }: Props) => {
return ( return (
<CustomGrid> <CustomGrid>
<GridItem className="w-16"> <GridItem className="w-16">
<PostLink href={`/article/${post.slug}`}> <PostWrapper>
<PostWrapper> <Post
<Post data={post}
data={post} appearance={{
appearance={{ imageProps: {
imageProps: { fill: true,
fill: true, height: '480px',
height: '480px', nextImageProps: post.coverImage
nextImageProps: post.coverImage ? {
? { quality: 100,
quality: 100, width: post.coverImage?.width * 2,
width: post.coverImage?.width * 2, height: post.coverImage?.height * 2,
height: post.coverImage?.height * 2, }
} : {},
: {}, },
}, }}
}} />
/> </PostWrapper>
</PostWrapper>
</PostLink>
</GridItem> </GridItem>
</CustomGrid> </CustomGrid>
) )

8
src/components/PostList/PostList.tsx
View File

@ -56,11 +56,9 @@ export const PostsList = (props: Props) => {
} }
key={index} key={index}
> >
<PostLink href={`/article/${post.slug}`}> <PostWrapper className={props.loading ? 'loading' : ''}>
<PostWrapper className={props.loading ? 'loading' : ''}> <Post data={post} />
<Post data={post} /> </PostWrapper>
</PostWrapper>
</PostLink>
</GridItem> </GridItem>
)) ))
) : ( ) : (