fix build errors

.eslintrc.json

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

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/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/Post/Post.tsx

@@ -99,7 +99,7 @@ export default function Post({
   },
   ...props
 }: PostProps) {
-  const date = new Date(dateStr)
+  const _date = useMemo(() => new Date(dateStr), [dateStr])
 
   const _title = useMemo(
     () => (
@@ -138,7 +138,15 @@ export default function Post({
         </ThumbnailContainer>
       )
     }
-  }, [showImage, coverImage, aspectRatio, postType, _title, _description])
+  }, [
+    showImage,
+    coverImage,
+    aspectRatio,
+    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}>

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/ResponsiveImage/ResponsiveImage.tsx

@@ -13,12 +13,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)
@@ -48,8 +50,8 @@ export const ResponsiveImage = ({
         background: 'red',
       }}
     >
-      <img src={lazyUrl} />
-      <Image {...imageProps} />
+      <img src={lazyUrl} alt={alt} />
+      <Image {...imageProps} alt={alt} />
     </Container>
   )
 }

src/components/Searchbar/Searchbar.tsx

@@ -54,30 +54,30 @@ export default function Searchbar(props: SearchbarProps) {
 
   const isArticlePage = router.pathname === '/article/[slug]'
 
-  const performSearch = async (
-    q: string = query,
-    _filterTags: string[] = filterTags,
-  ) => {
-    //if it is article page, just call onSearch
-    if (isArticlePage) {
-      if (onSearch) {
-        onSearch(q, _filterTags)
+  const performSearch = useCallback(
+    async (q: string = query, _filterTags: string[] = filterTags) => {
+      //if it is article page, just call onSearch
+      if (isArticlePage) {
+        if (onSearch) {
+          onSearch(q, _filterTags)
+        }
+        return
       }
-      return
-    }
 
-    await router.push(
-      {
-        pathname: '/search',
-        query: {
-          ...addQueryToQuery(q),
-          ...addTopicsToQuery(_filterTags),
+      await router.push(
+        {
+          pathname: '/search',
+          query: {
+            ...addQueryToQuery(q),
+            ...addTopicsToQuery(_filterTags),
+          },
         },
-      },
-      undefined,
-      { shallow: true },
-    )
-  }
+        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/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

@@ -63,6 +63,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 (