refactor: adjust links
This commit is contained in:
parent
a14ef84dbd
commit
f3e958990e
|
@ -21,13 +21,8 @@ export default function ArticleReference({
|
|||
year: 'numeric',
|
||||
})
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLElement>) => {
|
||||
e.stopPropagation()
|
||||
router.push(`${slug}`)
|
||||
}
|
||||
|
||||
return (
|
||||
<Reference onClick={handleClick} {...props}>
|
||||
<ReferenceLink href={slug} {...props}>
|
||||
<Typography component="span" variant="body1">
|
||||
{title}
|
||||
</Typography>
|
||||
|
@ -43,11 +38,11 @@ export default function ArticleReference({
|
|||
{localDate}
|
||||
</Typography>
|
||||
</Info>
|
||||
</Reference>
|
||||
</ReferenceLink>
|
||||
)
|
||||
}
|
||||
|
||||
const Reference = styled.div`
|
||||
const ReferenceLink = styled(Link)`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 8px 14px;
|
||||
|
|
|
@ -18,13 +18,16 @@ export default function Collapse({
|
|||
...props
|
||||
}: Props) {
|
||||
const [open, setOpen] = useState(true)
|
||||
const handleClick = () => {
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLElement>) => {
|
||||
e.stopPropagation()
|
||||
setOpen((prev) => !prev)
|
||||
onClick && onClick()
|
||||
}
|
||||
|
||||
return (
|
||||
<div onClick={handleClick} {...props} className={clsx(className)}>
|
||||
<Header>
|
||||
<div {...props} className={clsx(className)}>
|
||||
<Header onClick={(e) => handleClick(e)}>
|
||||
<Label color="primary" component="label" variant="label1">
|
||||
{label}
|
||||
</Label>
|
||||
|
|
|
@ -1,24 +1,28 @@
|
|||
import { GoogleDocEnhanced } from '@/lib/unbody/unbody.types'
|
||||
import { Typography } from '@acid-info/lsd-react'
|
||||
import styled from '@emotion/styled'
|
||||
import Link from 'next/link'
|
||||
import { Authors } from '../Authors'
|
||||
|
||||
type Props = {
|
||||
title: string
|
||||
author: string
|
||||
data: any
|
||||
}
|
||||
|
||||
const ContentBlockBody = ({ title, author }: Props) => {
|
||||
const ContentBlockBody = ({ data }: Props) => {
|
||||
const firstDocument = data.document[0]
|
||||
const mentions =
|
||||
typeof firstDocument.mentions === 'string'
|
||||
? JSON.parse(firstDocument.mentions)
|
||||
: firstDocument.mentions
|
||||
|
||||
return (
|
||||
<BlockBodyContainer>
|
||||
<Typography variant="body1" component="div" genericFontFamily="serif">
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body3"
|
||||
component="div"
|
||||
genericFontFamily="sans-serif"
|
||||
>
|
||||
{author}
|
||||
</Typography>
|
||||
<Link href={`/article/${data.document[0].slug}#p-${data.order}`}>
|
||||
<Typography variant="body1" component="div" genericFontFamily="serif">
|
||||
{data.document[0].title}
|
||||
</Typography>
|
||||
</Link>
|
||||
<Authors mentions={mentions} email={false} />
|
||||
</BlockBodyContainer>
|
||||
)
|
||||
}
|
||||
|
@ -27,6 +31,10 @@ const BlockBodyContainer = styled.div`
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
`
|
||||
|
||||
export default ContentBlockBody
|
||||
|
|
|
@ -5,7 +5,6 @@ import { SearchResultItem } from '@/types/data.types'
|
|||
import { UnbodyImageBlock } from '@/lib/unbody/unbody.types'
|
||||
|
||||
import { GridItem } from '../Grid/Grid'
|
||||
import { PostClassType } from '../Post/Post'
|
||||
import ContentBlockHeader, { BlockType } from './ContentBlock.Header'
|
||||
import ContentBlockBody from './ContentBlock.Body'
|
||||
import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
|
||||
|
@ -16,19 +15,16 @@ const ImageBlock = ({ doc }: Props) => {
|
|||
return (
|
||||
<CustomGridItem className="w-2">
|
||||
{/* TODO: order not working for images */}
|
||||
<BlockLink href={`/article/${doc.document[0].slug}#p-${doc.order}`}>
|
||||
<Container>
|
||||
<Container>
|
||||
<Link href={`/article/${doc.document[0].slug}#p-${doc.order}`}>
|
||||
<ResponsiveImage data={doc} />
|
||||
<ContentBlockHeader
|
||||
type={BlockType.IMAGE}
|
||||
date={doc?.document[0].modifiedAt}
|
||||
/>
|
||||
<ContentBlockBody
|
||||
title={doc.document[0].title}
|
||||
author="Jason Freeman"
|
||||
/>
|
||||
</Container>
|
||||
</BlockLink>
|
||||
</Link>
|
||||
<ContentBlockHeader
|
||||
type={BlockType.IMAGE}
|
||||
date={doc?.document[0].modifiedAt}
|
||||
/>
|
||||
<ContentBlockBody data={doc} />
|
||||
</Container>
|
||||
</CustomGridItem>
|
||||
)
|
||||
}
|
||||
|
@ -39,10 +35,6 @@ const CustomGridItem = styled(GridItem)`
|
|||
}
|
||||
`
|
||||
|
||||
const BlockLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
`
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -15,21 +15,16 @@ type Props = Omit<SearchResultItem<UnbodyTextBlock>, 'score'>
|
|||
const TextBlock = ({ doc }: Props) => {
|
||||
return (
|
||||
<GridItem className="w-4">
|
||||
<BlockLink href={`/article/${doc.document[0].slug}#p-${doc.order}`}>
|
||||
<Container>
|
||||
<ContentBlockHeader
|
||||
type={BlockType.TEXT}
|
||||
date={doc?.document[0].modifiedAt}
|
||||
/>
|
||||
<Typography variant="body2" genericFontFamily="sans-serif">
|
||||
{doc.text}
|
||||
</Typography>
|
||||
<ContentBlockBody
|
||||
title={doc.document[0].title}
|
||||
author="Jason Freeman"
|
||||
/>
|
||||
</Container>
|
||||
</BlockLink>
|
||||
<Container>
|
||||
<ContentBlockHeader
|
||||
type={BlockType.TEXT}
|
||||
date={doc?.document[0].modifiedAt}
|
||||
/>
|
||||
<Typography variant="body2" genericFontFamily="sans-serif">
|
||||
{doc.text}
|
||||
</Typography>
|
||||
<ContentBlockBody data={doc} />
|
||||
</Container>
|
||||
</GridItem>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -11,14 +11,12 @@ const FeaturedPost = ({ post }: Props) => {
|
|||
return (
|
||||
<CustomGrid>
|
||||
<GridItem className="w-16">
|
||||
<PostLink href={`/article/${post.slug}`}>
|
||||
<PostWrapper>
|
||||
<Post
|
||||
data={post}
|
||||
appearance={{ imageProps: { fill: true, height: '480px' } }}
|
||||
/>
|
||||
</PostWrapper>
|
||||
</PostLink>
|
||||
<PostWrapper>
|
||||
<Post
|
||||
data={post}
|
||||
appearance={{ imageProps: { fill: true, height: '480px' } }}
|
||||
/>
|
||||
</PostWrapper>
|
||||
</GridItem>
|
||||
</CustomGrid>
|
||||
)
|
||||
|
@ -35,8 +33,4 @@ const PostWrapper = styled.div`
|
|||
width: 100%;
|
||||
`
|
||||
|
||||
const PostLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
`
|
||||
|
||||
export default FeaturedPost
|
||||
|
|
|
@ -5,6 +5,7 @@ import { SunIcon } from '../Icons/SunIcon'
|
|||
import { MoonIcon } from '../Icons/MoonIcon'
|
||||
import { useRouter } from 'next/router'
|
||||
import { uiConfigs } from '@/configs/ui.configs'
|
||||
import Link from 'next/link'
|
||||
|
||||
interface NavbarProps {
|
||||
isDark: boolean
|
||||
|
@ -12,10 +13,9 @@ interface NavbarProps {
|
|||
}
|
||||
|
||||
export default function Navbar({ isDark, toggle }: NavbarProps) {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<Container>
|
||||
<LogosIconContainer onClick={() => router.push('/')}>
|
||||
<LogosIconContainer href={'/'}>
|
||||
<LogosIcon color="primary" />
|
||||
</LogosIconContainer>
|
||||
<Icons>
|
||||
|
@ -57,7 +57,7 @@ const Container = styled.nav`
|
|||
}
|
||||
`
|
||||
|
||||
const LogosIconContainer = styled.div`
|
||||
const LogosIconContainer = styled(Link)`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
@ -17,6 +17,7 @@ import {
|
|||
ResponsiveImage,
|
||||
ResponsiveImageProps,
|
||||
} from '../ResponsiveImage/ResponsiveImage'
|
||||
import Link from 'next/link'
|
||||
|
||||
export enum PostImageRatio {
|
||||
PORTRAIT = 'portrait',
|
||||
|
@ -95,6 +96,7 @@ export default function Post({
|
|||
title,
|
||||
description,
|
||||
mentions,
|
||||
slug,
|
||||
tags = [],
|
||||
},
|
||||
...props
|
||||
|
@ -103,14 +105,16 @@ export default function Post({
|
|||
|
||||
const _title = useMemo(
|
||||
() => (
|
||||
<CustomTypography
|
||||
variant={size === PostSize.SMALL ? 'h4' : 'h2'}
|
||||
genericFontFamily="serif"
|
||||
>
|
||||
{title}
|
||||
</CustomTypography>
|
||||
<PostLink href={`/article/${slug}`}>
|
||||
<CustomTypography
|
||||
variant={size === PostSize.SMALL ? 'h4' : 'h2'}
|
||||
genericFontFamily="serif"
|
||||
>
|
||||
{title}
|
||||
</CustomTypography>
|
||||
</PostLink>
|
||||
),
|
||||
[title, size],
|
||||
[title, size, slug],
|
||||
)
|
||||
|
||||
const _description = useMemo(
|
||||
|
@ -126,16 +130,20 @@ export default function Post({
|
|||
const _thumbnail = useMemo(() => {
|
||||
if (!showImage || !coverImage) return null
|
||||
if (postType === PostType.BODY) {
|
||||
return <ResponsiveImage {...imageProps} data={coverImage} />
|
||||
} else {
|
||||
// TBD
|
||||
// @jinho not sure what this is for?
|
||||
return (
|
||||
<ThumbnailContainer aspectRatio={aspectRatio}>
|
||||
<Thumbnail fill src={coverImage.url} alt={coverImage.alt} />
|
||||
<Link href={`/article/${slug}`}>
|
||||
<ResponsiveImage {...imageProps} data={coverImage} />
|
||||
</Link>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<Link href={`/article/${slug}`}>
|
||||
<ResponsiveImage data={coverImage} alt={coverImage.alt} />
|
||||
</Link>
|
||||
{_title}
|
||||
{_description}
|
||||
</ThumbnailContainer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}, [
|
||||
|
@ -199,21 +207,6 @@ const Container = styled.div`
|
|||
gap: 16px;
|
||||
`
|
||||
|
||||
// @Jinho, I have implemented the ResponsiveImage component, so I guess this is not needed anymore?
|
||||
const ThumbnailContainer = styled.div<{
|
||||
aspectRatio: PostImageRatio
|
||||
}>`
|
||||
aspect-ratio: ${(p) =>
|
||||
p.aspectRatio
|
||||
? PostImageRatioOptions[p.aspectRatio]
|
||||
: PostImageRatioOptions[PostImageRatio.PORTRAIT]};
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 458px; // temporary max-height based on the Figma design's max height
|
||||
overflow: hidden;
|
||||
`
|
||||
|
||||
const Thumbnail = styled(Image)`
|
||||
object-fit: cover;
|
||||
`
|
||||
|
@ -237,3 +230,7 @@ const PodcastAuthor = styled.div`
|
|||
align-items: center;
|
||||
gap: 12px;
|
||||
`
|
||||
|
||||
const PostLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
`
|
||||
|
|
|
@ -56,11 +56,9 @@ export const PostsList = (props: Props) => {
|
|||
}
|
||||
key={index}
|
||||
>
|
||||
<PostLink href={`/article/${post.slug}`}>
|
||||
<PostWrapper className={props.loading ? 'loading' : ''}>
|
||||
<Post data={post} />
|
||||
</PostWrapper>
|
||||
</PostLink>
|
||||
<PostWrapper className={props.loading ? 'loading' : ''}>
|
||||
<Post data={post} />
|
||||
</PostWrapper>
|
||||
</GridItem>
|
||||
))
|
||||
) : (
|
||||
|
@ -90,7 +88,3 @@ const PostWrapper = styled.div`
|
|||
opacity: 0.5;
|
||||
}
|
||||
`
|
||||
|
||||
const PostLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
`
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { addTopicsToQuery } from '@/utils/search.utils'
|
||||
import { Tag } from '@acid-info/lsd-react'
|
||||
import styled from '@emotion/styled'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
const Tags = ({ tags }: { tags: string[] }) => {
|
||||
|
@ -8,40 +9,30 @@ const Tags = ({ tags }: { tags: string[] }) => {
|
|||
const { query } = router
|
||||
const { topics } = query
|
||||
|
||||
const onTagClick = (e: React.MouseEvent<HTMLElement>, tag: string) => {
|
||||
e.preventDefault()
|
||||
router.push(
|
||||
{
|
||||
pathname: '/search',
|
||||
query: {
|
||||
...addTopicsToQuery([tag]),
|
||||
},
|
||||
},
|
||||
undefined,
|
||||
{ shallow: true },
|
||||
)
|
||||
}
|
||||
|
||||
return tags.length > 0 ? (
|
||||
<TagContainer>
|
||||
<TagsContainer>
|
||||
{tags.map((tag, idx) => (
|
||||
<Tag
|
||||
onClick={(e) => onTagClick(e, tag)}
|
||||
size="small"
|
||||
disabled={false}
|
||||
variant={topics?.includes(tag) ? 'filled' : 'outlined'}
|
||||
key={`tag-${idx}`}
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
<Link key={`tag-${idx}`} href={`/search?topics=${tag}`}>
|
||||
<Tag
|
||||
size="small"
|
||||
disabled={false}
|
||||
variant={topics?.includes(tag) ? 'filled' : 'outlined'}
|
||||
>
|
||||
{tag}
|
||||
</Tag>
|
||||
</Link>
|
||||
))}
|
||||
</TagContainer>
|
||||
</TagsContainer>
|
||||
) : null
|
||||
}
|
||||
|
||||
const TagContainer = styled.div`
|
||||
const TagsContainer = styled.div`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
`
|
||||
|
||||
export default Tags
|
||||
|
|
Loading…
Reference in New Issue