refactor: adjust links

src/components/ArticleReference/ArticleReference.tsx

@@ -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;

src/components/Collapse/Collapse.tsx

@@ -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)}>
+    <div {...props} className={clsx(className)}>
-      <Header>
+      <Header onClick={(e) => handleClick(e)}>
         <Label color="primary" component="label" variant="label1">
           {label}
         </Label>

src/components/ContentBlock/ContentBlock.Body.tsx

@@ -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
+  data: any
-  author: string
 }
 
-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">
+      <Link href={`/article/${data.document[0].slug}#p-${data.order}`}>
-        {title}
+        <Typography variant="body1" component="div" genericFontFamily="serif">
-      </Typography>
+          {data.document[0].title}
-      <Typography
+        </Typography>
-        variant="body3"
+      </Link>
-        component="div"
+      <Authors mentions={mentions} email={false} />
-        genericFontFamily="sans-serif"
-      >
-        {author}
-      </Typography>
     </BlockBodyContainer>
   )
 }
@@ -27,6 +31,10 @@ const BlockBodyContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
+
+  a {
+    text-decoration: none;
+  }
 `
 
 export default ContentBlockBody

src/components/ContentBlock/ImageBlock.tsx

@@ -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
+        </Link>
-            type={BlockType.IMAGE}
+        <ContentBlockHeader
-            date={doc?.document[0].modifiedAt}
+          type={BlockType.IMAGE}
-          />
+          date={doc?.document[0].modifiedAt}
-          <ContentBlockBody
+        />
-            title={doc.document[0].title}
+        <ContentBlockBody data={doc} />
-            author="Jason Freeman"
+      </Container>
-          />
-        </Container>
-      </BlockLink>
     </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;

src/components/ContentBlock/TextBlock.tsx

@@ -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>
-        <Container>
+        <ContentBlockHeader
-          <ContentBlockHeader
+          type={BlockType.TEXT}
-            type={BlockType.TEXT}
+          date={doc?.document[0].modifiedAt}
-            date={doc?.document[0].modifiedAt}
+        />
-          />
+        <Typography variant="body2" genericFontFamily="sans-serif">
-          <Typography variant="body2" genericFontFamily="sans-serif">
+          {doc.text}
-            {doc.text}
+        </Typography>
-          </Typography>
+        <ContentBlockBody data={doc} />
-          <ContentBlockBody
+      </Container>
-            title={doc.document[0].title}
-            author="Jason Freeman"
-          />
-        </Container>
-      </BlockLink>
     </GridItem>
   )
 }

src/components/FeaturedPost/FeaturedPost.tsx

@@ -11,14 +11,12 @@ const FeaturedPost = ({ post }: Props) => {
   return (
     <CustomGrid>
       <GridItem className="w-16">
-        <PostLink href={`/article/${post.slug}`}>
+        <PostWrapper>
-          <PostWrapper>
+          <Post
-            <Post
+            data={post}
-              data={post}
+            appearance={{ imageProps: { fill: true, height: '480px' } }}
-              appearance={{ imageProps: { fill: true, height: '480px' } }}
+          />
-            />
+        </PostWrapper>
-          </PostWrapper>
-        </PostLink>
       </GridItem>
     </CustomGrid>
   )
@@ -35,8 +33,4 @@ const PostWrapper = styled.div`
   width: 100%;
 `
 
-const PostLink = styled(Link)`
-  text-decoration: none;
-`
-
 export default FeaturedPost

src/components/Navbar/Navbar.tsx

@@ -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;

src/components/Post/Post.tsx

@@ -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
+      <PostLink href={`/article/${slug}`}>
-        variant={size === PostSize.SMALL ? 'h4' : 'h2'}
+        <CustomTypography
-        genericFontFamily="serif"
+          variant={size === PostSize.SMALL ? 'h4' : 'h2'}
-      >
+          genericFontFamily="serif"
-        {title}
+        >
-      </CustomTypography>
+          {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}>
+        <Link href={`/article/${slug}`}>
-          <Thumbnail fill src={coverImage.url} alt={coverImage.alt} />
+          <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;
+`

src/components/PostList/PostList.tsx

@@ -56,11 +56,9 @@ export const PostsList = (props: Props) => {
               }
               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>
           ))
         ) : (
@@ -90,7 +88,3 @@ const PostWrapper = styled.div`
     opacity: 0.5;
   }
 `
-
-const PostLink = styled(Link)`
-  text-decoration: none;
-`

src/components/Tags/Tags.tsx

@@ -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
+        <Link key={`tag-${idx}`} href={`/search?topics=${tag}`}>
-          onClick={(e) => onTagClick(e, tag)}
+          <Tag
-          size="small"
+            size="small"
-          disabled={false}
+            disabled={false}
-          variant={topics?.includes(tag) ? 'filled' : 'outlined'}
+            variant={topics?.includes(tag) ? 'filled' : 'outlined'}
-          key={`tag-${idx}`}
+          >
-        >
+            {tag}
-          {tag}
+          </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