Merge pull request #49 from acid-info/amir-fixes

Amir fixes - new

src/components/Article/Article.MobileToc.tsx

@@ -22,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>
@@ -31,6 +31,12 @@ export const MobileToc = ({ toc }: Props) => {
   ) : null
 }
 
+const CustomTypography = styled(Typography)`
+  text-overflow: ellipsis;
+  word-break: break-word;
+  white-space: pre-wrap;
+`
+
 const TocItem = styled(Link)<{ active: boolean }>`
   padding: 8px 14px;
   background-color: ${(p) =>

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

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

src/components/FeaturedPost/FeaturedPost.tsx

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

src/components/Hero/Hero.tsx

@@ -4,16 +4,8 @@ import styled from '@emotion/styled'
 export default function Hero() {
   return (
     <Container>
-      <Title genericFontFamily="serif" component="span" variant="h2">
-        LOGOS →{' '}
-        <Title
-          style={{ whiteSpace: 'nowrap' }}
-          genericFontFamily="serif"
-          component="span"
-          variant="h2"
-        >
-          PRESS ENGINE
-        </Title>
+      <Title genericFontFamily="serif" component="h1" variant="h1">
+        LOGOS → PRESS ENGINE
       </Title>
       <Description component="div" variant="label2">
         Blog with media written by Logos members

src/components/Navbar/NavbarFiller.tsx

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

src/components/PostList/PostList.tsx

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

src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -1,13 +1,11 @@
 import React, { useState } from 'react'
 import Image, { ImageProps } from 'next/image'
 import { ImageBlockEnhanced, UnbodyImageBlock } from '@/lib/unbody/unbody.types'
-import Imgix from 'react-imgix'
 import styled from '@emotion/styled'
-import { Blurhash } from 'react-blurhash'
 
 export type ResponsiveImageProps = {
   height?: number | string
-  nextImageProps?: ImageProps
+  nextImageProps?: Partial<ImageProps>
   fill?: boolean
 }
 

src/components/Searchbar/Searchbar.tsx

@@ -34,7 +34,7 @@ export type SearchbarProps = {
 
 export default function Searchbar(props: SearchbarProps) {
   const { onSearch, onReset } = props
-  const { resultsNumber, resultsHelperText } = useSearchBarContext()
+  const { resultsNumber, resultsHelperText, tags } = useSearchBarContext()
 
   const [searchScope, setSearchScope] = useState<ESearchScope>(
     props.searchScope || ESearchScope.GLOBAL,
@@ -178,7 +178,7 @@ export default function Searchbar(props: SearchbarProps) {
       {!isArticlePage && (
         <TagsWrapper className={active ? 'active' : ''}>
           <FilterTags
-            tags={copyConfigs.search.filterTags}
+            tags={tags}
             onTagClick={handleTagClick}
             selectedTags={filterTags}
           />

src/components/TableOfContents/TableOfContents.tsx

@@ -50,8 +50,8 @@ export default function TableOfContents({ contents, ...props }: Props) {
       <Contents height={height}>
         {contents?.map((content, index) => (
           <TocItem
-            key={index}
             href={`${index === 0 ? '#' : content.href}`}
+            key={index}
             active={tocId ? content.href.substring(1) === tocId : index === 0}
           >
             <Typography variant="label2" genericFontFamily="sans-serif">

src/pages/search.tsx

@@ -16,20 +16,29 @@ import { ReactNode, useEffect, useRef, useState } from 'react'
 import { SearchLayout } from '@/layouts/SearchLayout'
 import { RelatedArticles } from '@/components/RelatedArticles'
 import { RelatedContent } from '@/components/RelatedContent'
+import { Section } from '@/components/Section/Section'
+import api from '@/services/unbody.service'
+import { useSearchBarContext } from '@/context/searchbar.context'
 
 interface SearchPageProps {
   articles: SearchResultItem<UnbodyGoogleDoc>[]
   blocks: SearchResultItem<UnbodyTextBlock | UnbodyImageBlock>[]
+  topics: string[]
 }
 
 export default function SearchPage({
   articles: initialArticles = [],
   blocks: initialBlocks = [],
+  topics: allTopics = [],
 }: SearchPageProps) {
+  const { setTags } = useSearchBarContext()
   const router = useRouter()
-  const hasUpdated = useRef(false)
   const [mounted, setMounted] = useState(false)
 
+  useEffect(() => {
+    setTags(allTopics)
+  }, [setTags, allTopics])
+
   const {
     query: { query = '', topics = [] },
   } = router
@@ -82,11 +91,13 @@ SearchPage.getLayout = function getLayout(page: ReactNode) {
 export async function getStaticProps() {
   const { data: articles = [] } = await unbodyApi.searchArticles()
   const { data: blocks = [] } = await unbodyApi.serachBlocks()
+  const { data: topics, errors: topicErrors } = await api.getTopics()
 
   return {
     props: {
       articles,
       blocks,
+      topics,
     },
   }
 }