Merge branch 'main' into amir-fixes

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-img-element": "off"
+  }
 }

public/manifest.json

@@ -0,0 +1,16 @@
+{
+    "short_name": "Logos Press Engine",
+    "name": "Logos Press Engine",
+    "start_url": "/",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff",
+    "icons": [
+      {
+        "src": "./favicon.ico",
+        "sizes": "64x64",
+        "type": "image/icon",
+        "purpose": "any maskable"
+      }
+    ]
+  }

src/components/Article/Article.Body.tsx

@@ -23,7 +23,7 @@ export default function ArticleBody({ data }: Props) {
     if (resultsNumber !== null) {
       setResultsHelperText(data.article.title)
     }
-  }, [resultsNumber])
+  }, [resultsNumber, data.article.title, setResultsHelperText])
 
   const ids = searchResultBlocks?.map((block) => block.doc._additional.id)
 

src/components/Article/Article.Heading.tsx

@@ -45,4 +45,5 @@ export const ArticleHeading = ({
 const Headline = styled(Typography)`
   white-space: pre-wrap;
   margin-top: 24px;
+  margin-bottom: 24px;
 `

src/components/Article/Article.MobileToc.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import { useArticleContainerContext } from '@/containers/ArticleContainer.Context'
 import { Typography } from '@acid-info/lsd-react'
 import styles from './Article.module.css'
-import { GoogleDocEnhanced } from '@/lib/unbody/unbody.types'
 import { Collapse } from '../Collapse'
 import Link from 'next/link'
 import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
@@ -13,7 +12,7 @@ type Props = {
 }
 
 export const MobileToc = ({ toc }: Props) => {
-  const { tocId, setTocId } = useArticleContainerContext()
+  const { tocId } = useArticleContainerContext()
 
   return toc?.length > 0 ? (
     <Collapse className={styles.mobileToc} label="Contents">
@@ -23,7 +22,7 @@ export const MobileToc = ({ toc }: Props) => {
           key={idx}
           active={tocId ? toc.href.substring(1) === tocId : idx === 0}
         >
-          <Typography variant="label2" genericFontFamily="sans-serif">
+          <CustomTypography variant="label2" genericFontFamily="sans-serif">
             {toc.title}
           </Typography>
         </TocItem>
@@ -44,8 +43,12 @@ const TocItem = styled(Link)<{ active: boolean }>`
     p.active
       ? 'rgb(var(--lsd-theme-primary))'
       : 'rgb(var(--lsd-theme-secondary))'};
+
+  label {
+    text-decoration: none;
     color: ${(p) =>
       p.active
         ? 'rgb(var(--lsd-theme-secondary))'
         : 'rgb(var(--lsd-theme-primary))'};
+  }
 `

src/components/Article/Footer/Article.Footer.tsx

@@ -31,7 +31,9 @@ const ArticleFooter = ({ data }: { data: ArticlePostData }) => {
 
 const ArticleFooterContainer = styled.div`
   margin-top: 16px;
-  & > div:not(:first-child) > div > button {
+  
+  & > div:not(:first-child) > div > button,
+  & > div:not(:first-child) > div {
     border-top: none;
   }
 `

src/components/Article/Footer/Article.FromSameAuthorsArticles.tsx

@@ -5,7 +5,7 @@ import { Collapse } from '@/components/Collapse'
 
 const FromSameAuthorsArticles = ({ data }: { data: GoogleDocEnhanced[] }) =>
   data.length > 0 ? (
-    <Collapse className={styles.relatedArticles} label="From same authors">
+    <Collapse className={styles.relatedArticles} label="From The Same Authors">
       {data.map((article, idx) => (
         <ArticleReference key={idx} data={article} />
       ))}

src/components/ArticleReference/ArticleReference.tsx

@@ -1,15 +1,20 @@
 import { GoogleDocEnhanced } from '@/lib/unbody/unbody.types'
 import { Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
+import { Authors } from '../Authors'
+import { AuthorsDirection } from '../Authors/Authors'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 type Props = {
   data: GoogleDocEnhanced
 }
 
 export default function ArticleReference({
-  data: { title, modifiedAt, mentions },
+  data: { title, modifiedAt, mentions, slug },
   ...props
 }: Props) {
+  const router = useRouter()
   const localDate = new Date(modifiedAt).toLocaleString('en-GB', {
     day: 'numeric',
     month: 'long',
@@ -17,31 +22,47 @@ export default function ArticleReference({
   })
 
   return (
-    <Reference {...props}>
+    <ReferenceLink href={slug} {...props}>
       <Typography component="span" variant="body1">
         {title}
       </Typography>
-      <div>
+      <Info>
-        <Typography variant="body3" genericFontFamily="sans-serif">
+        <Authors
-          {/*TODO we need handle multiple authors for same article*/}
+          flexDirection={AuthorsDirection.ROW}
-          {mentions[0]?.name}
+          gap={4}
-        </Typography>
+          mentions={mentions}
+          email={false}
+        />
         <Typography variant="body3">•</Typography>
         <Typography variant="body3" genericFontFamily="sans-serif">
           {localDate}
         </Typography>
-      </div>
+      </Info>
-    </Reference>
+    </ReferenceLink>
   )
 }
 
-const Reference = styled.div`
+const ReferenceLink = styled(Link)`
   display: flex;
   flex-direction: column;
   padding: 8px 14px;
   border-bottom: 1px solid rgb(var(--lsd-border-primary));
+  text-decoration: none;
+  cursor: pointer;
 
   &:last-child {
     border-bottom: none;
   }
+
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+const Info = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
 `

src/components/Authors/Authors.tsx

@@ -2,25 +2,38 @@ import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
 import Author from './Author'
 import styled from '@emotion/styled'
 
+export enum AuthorsDirection {
+  COLUMN = 'column',
+  ROW = 'row',
+}
+
 const Authors = ({
   mentions,
   email,
+  gap = 16,
+  flexDirection = AuthorsDirection.COLUMN,
 }: {
   mentions: UnbodyGraphQl.Fragments.MentionItem[]
   email: boolean
-}) =>
+  gap?: number
-  mentions?.length > 0 ? (
+  flexDirection?: AuthorsDirection
-    <AuthorsContainer>
+}) => {
+  return mentions?.length > 0 ? (
+    <AuthorsContainer gap={gap} flexDirection={flexDirection}>
       {mentions.map((mention) => (
         <Author key={mention.name} mention={mention} email={email} />
       ))}
     </AuthorsContainer>
   ) : null
+}
 
-const AuthorsContainer = styled.div`
+const AuthorsContainer = styled.div<{
+  gap: number
+  flexDirection: AuthorsDirection
+}>`
   display: flex;
-  flex-direction: column;
+  flex-direction: ${({ flexDirection }) => flexDirection};
-  gap: 16px;
+  gap: ${({ gap }) => gap}px;
 `
 
 export default Authors

src/components/Collapse/Collapse.module.css

@@ -1,8 +0,0 @@
-.collapse > div > button {
-  width: 100% !important;
-}
-
-.collapse > div {
-  display: flex;
-  flex-direction: column;
-}

src/components/Collapse/Collapse.tsx

@@ -1,21 +1,85 @@
-import { CollapseProps, Collapse as LsdCollapse } from '@acid-info/lsd-react'
+import { ArrowDownIcon, ArrowUpIcon, Typography } from '@acid-info/lsd-react'
-import styles from './Collapse.module.css'
 import styled from '@emotion/styled'
 import clsx from 'clsx'
+import { useState } from 'react'
+
+type Props = {
+  label: string
+  children: React.ReactNode
+  className?: string
+  onClick?: () => void
+}
 
 export default function Collapse({
   label,
   children,
   className,
+  onClick,
   ...props
-}: CollapseProps) {
+}: Props) {
+  const [open, setOpen] = useState(true)
+
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    e.stopPropagation()
+    setOpen((prev) => !prev)
+    onClick && onClick()
+  }
+
   return (
-    <LsdCollapse
+    <div {...props} className={clsx(className)}>
-      label={label}
+      <Header onClick={(e) => handleClick(e)}>
-      {...props}
+        <Label color="primary" component="label" variant="label1">
-      className={clsx(styles.collapse, className)}
+          {label}
-    >
+        </Label>
-      {children}
+        <Icon>
-    </LsdCollapse>
+          {open ? (
+            <ArrowUpIcon color="primary" />
+          ) : (
+            <ArrowDownIcon color="primary" />
+          )}
+        </Icon>
+      </Header>
+      {open && <Content>{children}</Content>}
+    </div>
   )
 }
+
+const Header = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  text-align: center;
+
+  cursor: pointer;
+  background: none;
+  border: 1px solid rgb(var(--lsd-border-primary));
+
+  height: 40px;
+  padding: 9px 17px;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+  }
+`
+
+const Label = styled(Typography)`
+  cursor: pointer;
+  margin: auto;
+`
+
+const Icon = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+`
+
+const Content = styled.div`
+  border: 1px solid rgb(var(--lsd-border-primary));
+  border-top: none;
+  display: flex;
+  flex-direction: column;
+`

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>
+      <Link href={`/article/${data.document[0].slug}#p-${data.order}`}>
         <Typography variant="body1" component="div" genericFontFamily="serif">
-        {title}
+          {data.document[0].title}
-      </Typography>
-      <Typography
-        variant="body3"
-        component="div"
-        genericFontFamily="sans-serif"
-      >
-        {author}
         </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

src/components/ContentBlock/ContentBlock.Header.tsx

@@ -1,9 +1,13 @@
 import styled from '@emotion/styled'
 import { Typography } from '@acid-info/lsd-react'
-import { PostClassType } from '../Post/Post'
+
+export enum BlockType {
+  TEXT = 'text',
+  IMAGE = 'image',
+}
 
 type Props = {
-  type: PostClassType
+  type: BlockType
   date: string
 }
 
@@ -11,7 +15,7 @@ const ContentBlockHeader = ({ type, date }: Props) => {
   return (
     <ContentBlockInfo>
       <Typography variant="body3" genericFontFamily="sans-serif">
-        {type.toUpperCase()}
+        {type === BlockType.TEXT ? 'PARAGRAPH' : 'IMAGE'}
       </Typography>
       <Typography variant="body3">•</Typography>
       <Typography variant="body3" genericFontFamily="sans-serif">

src/components/ContentBlock/ImageBlock.tsx

@@ -1,35 +1,30 @@
 import Link from 'next/link'
 import styled from '@emotion/styled'
-import Image from 'next/image'
 
 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 ContentBlockHeader from './ContentBlock.Header'
 import ContentBlockBody from './ContentBlock.Body'
+import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
 
 type Props = Omit<SearchResultItem<UnbodyImageBlock>, 'score'>
 
 const ImageBlock = ({ doc }: Props) => {
   return (
     <CustomGridItem className="w-2">
-      <BlockLink href={`/article/${doc.document[0].slug}`}>
+      {/* TODO: order not working for images */}
       <Container>
-          <ImageContainer>
+        <Link href={`/article/${doc.document[0].slug}#p-${doc.order}`}>
-            <Image fill src={doc.url} alt={doc.alt} />
+          <ResponsiveImage data={doc} />
-          </ImageContainer>
+        </Link>
         <ContentBlockHeader
-            type={PostClassType.ARTICLE}
+          type={BlockType.IMAGE}
           date={doc?.document[0].modifiedAt}
         />
-          <ContentBlockBody
+        <ContentBlockBody data={doc} />
-            title={doc.document[0].title}
-            author="Jason Freeman"
-          />
       </Container>
-      </BlockLink>
     </CustomGridItem>
   )
 }
@@ -40,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

@@ -7,7 +7,7 @@ import { UnbodyTextBlock } from '@/lib/unbody/unbody.types'
 import { GridItem } from '../Grid/Grid'
 import { Typography } from '@acid-info/lsd-react'
 import { PostClassType } from '../Post/Post'
-import ContentBlockHeader from './ContentBlock.Header'
+import ContentBlockHeader, { BlockType } from './ContentBlock.Header'
 import ContentBlockBody from './ContentBlock.Body'
 
 type Props = Omit<SearchResultItem<UnbodyTextBlock>, 'score'>
@@ -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}`}>
       <Container>
         <ContentBlockHeader
-            type={PostClassType.ARTICLE}
+          type={BlockType.TEXT}
           date={doc?.document[0].modifiedAt}
         />
         <Typography variant="body2" genericFontFamily="sans-serif">
           {doc.text}
         </Typography>
-          <ContentBlockBody
+        <ContentBlockBody data={doc} />
-            title={doc.document[0].title}
-            author="Jason Freeman"
-          />
       </Container>
-      </BlockLink>
     </GridItem>
   )
 }

src/components/FeaturedPost/FeaturedPost.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 const FeaturedPost = ({ post }: Props) => {
   return (
-    <Grid>
+    <CustomGrid>
       <GridItem className="w-16">
         <PostLink href={`/article/${post.slug}`}>
           <PostWrapper>
@@ -32,10 +32,14 @@ const FeaturedPost = ({ post }: Props) => {
           </PostWrapper>
         </PostLink>
       </GridItem>
-    </Grid>
+    </CustomGrid>
   )
 }
 
+const CustomGrid = styled(Grid)`
+  margin-bottom: 108px;
+`
+
 const PostWrapper = styled.div`
   margin-top: 16px;
   padding: 16px 0;
@@ -43,8 +47,4 @@ const PostWrapper = styled.div`
   width: 100%;
 `
 
-const PostLink = styled(Link)`
-  text-decoration: none;
-`
-
 export default FeaturedPost

src/components/FilterTags/FilterTags.tsx

@@ -31,6 +31,7 @@ export default function FilterTags(props: FilterTagsProps) {
 
 const Container = styled.div`
   padding: 8px 0;
+  max-width: 100%;
 `
 
 const Tags = styled.div`

src/components/Hero/Hero.tsx

@@ -22,6 +22,7 @@ const Container = styled.div`
 
   @media (max-width: 768px) {
     align-items: flex-start;
+    text-align: left;
   }
 `
 

src/components/Main/Main.tsx

@@ -7,8 +7,6 @@ const Main = ({ children }: PropsWithChildren) => {
 }
 
 const Container = styled.main`
-  //display: flex;
-  //justify-content: center;
   margin-block: ${uiConfigs.postSectionMargin}px;
   margin-left: auto;
   margin-right: auto;

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>
@@ -38,10 +38,11 @@ const Container = styled.nav`
   border-bottom: 1px solid rgb(var(--lsd-theme-primary));
   position: fixed;
   top: 0;
-  width: calc(100% + 16px);
+  width: 100%;
-  max-width: ${uiConfigs.maxContainerWidth + 16}px;
+  max-width: ${uiConfigs.maxContainerWidth + 40}px; // TBD
   background: rgb(var(--lsd-surface-primary));
   z-index: 100;
+  box-sizing: border-box;
 
   // to center-align logo
   &:last-child {
@@ -51,13 +52,13 @@ const Container = styled.nav`
   // to center-align logo
   &:before {
     content: 'D';
+    width: 54px;
     margin: 1px auto 1px 1px;
     visibility: hidden;
-    padding: 1px;
   }
 `
 
-const LogosIconContainer = styled.div`
+const LogosIconContainer = styled(Link)`
   display: flex;
   align-items: center;
   justify-content: center;

src/components/Navbar/NavbarFiller.tsx

@@ -1,15 +1,23 @@
 import styled from '@emotion/styled'
 import { FilterTags } from '@/components/FilterTags'
 import { useSearchBarContext } from '@/context/searchbar.context'
+import { useRouter } from 'next/router'
 
 export const NavbarFiller = () => {
+    const router = useRouter()
     const { tags } = useSearchBarContext()
+
+  const onTagClick = (tag: string) => {
+    router.push(`/search?topics=${tag}`)
+  }
   return (
     <NavbarFillerContainer>
-      <FilterTags tags={tags} selectedTags={[]} />
+      <FilterTags onTagClick={onTagClick} tags={tags} selectedTags={[]} />
     </NavbarFillerContainer>
   )
+  
 }
+
 export const NavbarFillerContainer = styled.div`
   height: var(--lpe-nav-rendered-height);
   margin: auto;

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,22 +96,25 @@ export default function Post({
     title,
     description,
     mentions,
+    slug,
     tags = [],
   },
   ...props
 }: PostProps) {
-  const date = new Date(dateStr)
+  const _date = useMemo(() => new Date(dateStr), [dateStr])
 
   const _title = useMemo(
     () => (
+      <TitleLink href={`/article/${slug}`}>
         <CustomTypography
           variant={size === PostSize.SMALL ? 'h4' : 'h2'}
           genericFontFamily="serif"
         >
           {title}
         </CustomTypography>
+      </TitleLink>
     ),
-    [title, size],
+    [title, size, slug],
   )
 
   const _description = useMemo(
@@ -126,19 +130,23 @@ 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>
+        </>
       )
     }
-  }, [showImage, coverImage, aspectRatio, postType, _title, _description])
+  }, [slug, showImage, coverImage, postType, imageProps, _title, _description])
 
   const _header = useMemo(() => {
     if (postType === 'body')
@@ -151,7 +159,7 @@ export default function Post({
               </Typography>
               <Typography variant="body3">•</Typography>
               <Typography variant="body3" genericFontFamily="sans-serif">
-                {date.toLocaleString('en-GB', {
+                {_date.toLocaleString('en-GB', {
                   day: 'numeric',
                   month: 'long', // TODO: Should be uppercase
                   year: 'numeric',
@@ -162,7 +170,7 @@ export default function Post({
           </div>
         </>
       )
-  }, [postType, classType, date, _title])
+  }, [postType, classType, _date, _title])
 
   return (
     <Container {...props}>
@@ -191,21 +199,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;
 `
@@ -229,3 +222,7 @@ const PodcastAuthor = styled.div`
   align-items: center;
   gap: 12px;
 `
+
+const TitleLink = styled(Link)`
+  text-decoration: none;
+`

src/components/PostList/PostList.tsx

@@ -90,7 +90,3 @@ const PostWrapper = styled.div`
     opacity: 0.5;
   }
 `
-
-const PostLink = styled(Link)`
-  text-decoration: none;
-`

src/components/ProgressBar/ProgressBar.tsx

@@ -1,21 +1,21 @@
 import useIsDarkState from '@/states/isDarkState/isDarkState'
 import { defaultThemes } from '@acid-info/lsd-react'
 import NextNProgress from 'nextjs-progressbar'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 export const ProgressBar = () => {
   const isDark = useIsDarkState().get()
 
-  const getColor = () => {
+  const getColor = useCallback(() => {
     if (isDark) {
       return `rgb(${defaultThemes.dark.palette.primary})`
     } else {
       return `rgb(${defaultThemes.dark.palette.secondary})`
     }
-  }
+  }, [isDark])
 
   const [color, setColor] = useState(getColor())
-  useEffect(() => setColor(getColor()), [isDark])
+  useEffect(() => setColor(getColor()), [isDark, getColor])
 
   return (
     <NextNProgress

src/components/RelatedContent/RelatedContent.tsx

@@ -19,7 +19,10 @@ export default function RelatedContent({ data }: Props) {
       >
         <Grid>
           {data.data.map(
-            (block: SearchResultItem<UnbodyImageBlock | UnbodyTextBlock>) => {
+            (
+              block: SearchResultItem<UnbodyImageBlock | UnbodyTextBlock>,
+              idx: number,
+            ) => {
               if (!block.doc.document || !block.doc.document[0]) return null
 
               let refArticle = null
@@ -28,9 +31,9 @@ export default function RelatedContent({ data }: Props) {
               }
               switch (block.doc.__typename) {
                 case UnbodyGraphQl.UnbodyDocumentTypeNames.TextBlock:
-                  return <TextBlock doc={block.doc} />
+                  return <TextBlock key={`text-${idx}`} doc={block.doc} />
                 case UnbodyGraphQl.UnbodyDocumentTypeNames.ImageBlock: {
-                  return <ImageBlock doc={block.doc} />
+                  return <ImageBlock key={`image-${idx}`} doc={block.doc} />
                 }
               }
             },

src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -11,12 +11,14 @@ export type ResponsiveImageProps = {
 
 export type Props = {
   data: UnbodyImageBlock | ImageBlockEnhanced
+  alt?: string
 } & ResponsiveImageProps
 
 export const ResponsiveImage = ({
   data,
   height = '100%',
   fill = false,
+  alt = 'alt',
   nextImageProps,
 }: Props) => {
   const [loaded, setLoaded] = useState(false)
@@ -46,13 +48,8 @@ export const ResponsiveImage = ({
         background: 'red',
       }}
     >
-      <Image
+      <img src={lazyUrl} alt={alt} />
-        src={lazyUrl}
+      <Image {...imageProps} alt={alt} />
-        alt={data.alt}
-        width={data.width}
-        height={data.height}
-      />
-      <Image {...imageProps} />
     </Container>
   )
 }

src/components/Searchbar/Searchbar.tsx

@@ -54,10 +54,8 @@ export default function Searchbar(props: SearchbarProps) {
 
   const isArticlePage = router.pathname === '/article/[slug]'
 
-  const performSearch = async (
+  const performSearch = useCallback(
-    q: string = query,
+    async (q: string = query, _filterTags: string[] = filterTags) => {
-    _filterTags: string[] = filterTags,
-  ) => {
       //if it is article page, just call onSearch
       if (isArticlePage) {
         if (onSearch) {
@@ -77,7 +75,9 @@ export default function Searchbar(props: SearchbarProps) {
         undefined,
         { shallow: true },
       )
-  }
+    },
+    [isArticlePage, router, filterTags, onSearch, query],
+  )
 
   useEffect(() => {
     setQuery(extractQueryFromQuery(router.query))
@@ -87,7 +87,7 @@ export default function Searchbar(props: SearchbarProps) {
     } else {
       setSearchScope(ESearchScope.GLOBAL)
     }
-  }, [router.query.query, router.query.topics])
+  }, [router.query, router.query.topics, router.pathname])
 
   const performClear = useCallback(() => {
     if (!isArticlePage) {
@@ -99,7 +99,7 @@ export default function Searchbar(props: SearchbarProps) {
     setFilterTags([])
     setActive(false)
     onReset && onReset()
-  }, [setQuery, setFilterTags])
+  }, [isArticlePage, onReset, performSearch, setQuery, setFilterTags])
 
   const handleTagClick = (tag: string) => {
     let newSelectedTags = [...filterTags]

src/components/Searchbar/SearchbarContainer.tsx

@@ -40,7 +40,7 @@ export function SearchbarContainer({ children, onUnfocus = nope }: Props) {
 
 const SearchBarWrapper = styled.div<Props>`
   display: block;
-  width: calc(100% - 16px);
+  width: 100%;
   background: rgb(var(--lsd-surface-primary));
   border-bottom: 1px solid rgb(var(--lsd-border-primary));
   border-top: 1px solid rgb(var(--lsd-border-primary));
@@ -53,5 +53,6 @@ const SearchBarWrapper = styled.div<Props>`
     position: fixed;
     top: ${uiConfigs.navbarRenderedHeight - 1}px;
     z-index: 100;
+    max-width: ${uiConfigs.maxContainerWidth + 40}px; // TBD
   }
 `

src/components/Section/Section.tsx

@@ -9,7 +9,7 @@ type Props = PropsWithChildren<{
 
 export const Section = ({ title, subtitle, children, ...props }: Props) => {
   return (
-    <section style={{ width: '100%' }} {...props}>
+    <SectionContainer {...props}>
       <Container>
         <Typography genericFontFamily="sans-serif" variant="body2">
           {title}
@@ -28,10 +28,19 @@ export const Section = ({ title, subtitle, children, ...props }: Props) => {
         )}
       </Container>
       {children}
-    </section>
+    </SectionContainer>
   )
 }
 
+const SectionContainer = styled.section`
+  width: 100%;
+  box-sizing: border-box;
+
+  @media (max-width: 768px) {
+    padding-inline: 16px;
+  }
+`
+
 const Container = styled.div`
   display: flex;
   align-items: center;

src/components/TableOfContents/TableOfContents.tsx

@@ -24,7 +24,6 @@ export default function TableOfContents({ contents, ...props }: Props) {
   useEffect(() => {
     const onHashChangeStart = (url: string) => {
       const hash = url.split('#')[1]
-      console.log('hash', contents)
       if (hash) {
         setTocId(hash)
       } else {
@@ -35,7 +34,7 @@ export default function TableOfContents({ contents, ...props }: Props) {
     return () => {
       router.events.off('hashChangeStart', onHashChangeStart)
     }
-  }, [router.events])
+  }, [setTocId, router.events])
 
   return (
     <Container
@@ -116,4 +115,8 @@ const TocItem = styled(Link)<{ active: boolean }>`
       ? '1px solid rgb(var(--lsd-border-primary))'
       : '1px solid transparent'};
   cursor: pointer;
+
+  label {
+    cursor: pointer;
+  }
 `

src/components/Tags/Tags.tsx

@@ -1,44 +1,38 @@
 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[] }) => {
   const router = useRouter()
-
+  const { query } = router
-  const onTagClick = (e: React.MouseEvent<HTMLElement>, tag: string) => {
+  const { topics } = query
-    e.preventDefault()
-    router.push(
-      {
-        pathname: '/search',
-        query: {
-          ...addTopicsToQuery([tag]),
-        },
-      },
-      undefined,
-      { shallow: true },
-    )
-  }
 
   return tags.length > 0 ? (
-    <TagContainer>
+    <TagsContainer>
-      {tags.map((tag) => (
+      {tags.map((tag, idx) => (
+        <Link key={`tag-${idx}`} href={`/search?topics=${tag}`}>
           <Tag
-          onClick={(e) => onTagClick(e, tag)}
             size="small"
             disabled={false}
-          key={tag}
+            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

src/pages/_app.tsx

@@ -32,7 +32,7 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
   return (
     <ThemeProvider theme={isDark ? defaultThemes.dark : defaultThemes.light}>
       <Head>
-        <title>Acid</title>
+        <title>Logos Press Engine</title>
         <meta
           name="viewport"
           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

src/pages/api/og.tsx

@@ -27,7 +27,7 @@ export default async function handler() {
           alignItems: 'center',
         }}
       >
-        <img width="1200" height="630" src={srcBlob} />
+        <img width="1200" height="630" src={srcBlob} alt="og-image" />
       </div>
     ),
     {

src/pages/search.tsx

@@ -72,6 +72,8 @@ export default function SearchPage({
       articles.reset(initialArticles)
       blocks.reset(initialBlocks)
     }
+    // if we follow the eslint, we will have an infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mounted, router.query])
 
   return (

src/queries/searchBlocks.ts

@@ -16,6 +16,7 @@ export const getSearchBlocksQuery = (args: UnbodyGetFilters = defaultArgs) =>
             text
             tagName
             classNames
+            order
             document{
               ...on GoogleDoc{
                     title
@@ -36,6 +37,7 @@ export const getSearchBlocksQuery = (args: UnbodyGetFilters = defaultArgs) =>
             width
             height
             alt
+            order
             document{
               ...on GoogleDoc{
                     title