remove key warning from authors

src/components/Article/Article.Block.tsx

@@ -24,6 +24,7 @@ export const RenderArticleBlock = ({
   block: UnbodyImageBlock | UnbodyTextBlock
   activeId: string | null
   headingElementsRef: HeadingElementsRef
+  hide?: boolean
 }) => {
   switch (block.__typename) {
     case UnbodyGraphQl.UnbodyDocumentTypeNames.ImageBlock:
@@ -65,6 +66,4 @@ export const RenderArticleBlock = ({
   }
 }
 
-const Paragraph = styled(Typography)`
-  white-space: pre-wrap;
-`
+const Paragraph = styled(Typography)``

src/components/Article/Article.Blocks.tsx

@@ -1,26 +1,36 @@
 import { getBodyBlocks } from '@/utils/data.utils'
 import { RenderArticleBlock } from './Article.Block'
-import { ArticlePostData } from '@/types/data.types'
-import {
-  GoogleDocEnhanced,
-  UnbodyImageBlock,
-  UnbodyTextBlock,
-} from '@/lib/unbody/unbody.types'
-import { useState } from 'react'
+import { GoogleDocEnhanced } from '@/lib/unbody/unbody.types'
 import { useIntersectionObserver } from '@/utils/ui.utils'
 import { useArticleContainerContext } from '@/containers/ArticleContainer.Context'
+import { useArticleContext } from '@/context/article.context'
+import { useSearchBarContext } from '@/context/searchbar.context'
 
 type Props = {
   data: GoogleDocEnhanced
 }
 
 const ArticleBlocks = ({ data }: Props) => {
+  const { resultsNumber } = useSearchBarContext()
+  const { data: searchResultBlocks = [] } = useArticleContext()
+  const ids = searchResultBlocks?.map((block) => block.doc._additional.id)
   const { setTocId, tocId } = useArticleContainerContext()
   const headingElementsRef = useIntersectionObserver(setTocId)
 
+  const renderBlocks =
+    resultsNumber !== null
+      ? getBodyBlocks(data)
+          .filter((block) => ids?.includes(block._additional.id))
+          .sort((a, b) => {
+            const aIndex = ids?.indexOf(a._additional.id)
+            const bIndex = ids?.indexOf(b._additional.id)
+            return aIndex! - bIndex!
+          })
+      : getBodyBlocks(data)
+
   return data.blocks.length ? (
     <>
-      {getBodyBlocks(data).map((block, idx) => (
+      {renderBlocks.map((block, idx) => (
         <RenderArticleBlock
           key={'block-' + idx}
           block={block}

src/components/Article/Article.Body.tsx

@@ -10,18 +10,14 @@ import { useSearchBarContext } from '@/context/searchbar.context'
 import { useEffect, useState } from 'react'
 import { TextBlockEnhanced, UnbodyImageBlock } from '@/lib/unbody/unbody.types'
 import { Typography } from '@acid-info/lsd-react'
+import articleBlocks from './Article.Blocks'
 
 interface Props {
   data: ArticlePostData
 }
 
 export default function ArticleBody({ data }: Props) {
-  const { resultsNumber, setResultsNumber, setResultsHelperText } =
-    useSearchBarContext()
-  const { data: searchResultBlocks = [] } = useArticleContext()
-  const [blocks, setBlocks] = useState<
-    (TextBlockEnhanced | UnbodyImageBlock)[]
-  >([])
+  const { resultsNumber, setResultsHelperText } = useSearchBarContext()
 
   useEffect(() => {
     if (resultsNumber !== null) {
@@ -29,24 +25,10 @@ export default function ArticleBody({ data }: Props) {
     }
   }, [resultsNumber, data.article.title, setResultsHelperText])
 
-  const ids = searchResultBlocks?.map((block) => block.doc._additional.id)
-
-  useEffect(() => {
-    setBlocks(
-      // @ts-ignore
-      resultsNumber !== null
-        ? data.article.blocks.filter((block) =>
-            ids?.includes(block._additional.id),
-          )
-        : data.article.blocks,
-    )
-  }, [resultsNumber])
-
   return (
     <ArticleContainer>
       {resultsNumber === null && <ArticleHeader {...data.article} />}
-      {/*@ts-ignore*/}
-      <ArticleBlocks data={{ ...data.article, blocks }} />
+      <ArticleBlocks data={data.article} />
       {resultsNumber === 0 && (
         <Typography variant="body1">No results found</Typography>
       )}

src/components/Article/Article.Heading.tsx

@@ -18,7 +18,6 @@ export const ArticleHeading = ({
   block,
   headingElementsRef,
   typographyProps,
-  children,
 }: Props) => {
   const id =
     extractIdFromFirstTag(block.html) || `${block.tagName}-${block.order}`
@@ -27,6 +26,7 @@ export const ArticleHeading = ({
       headingElementsRef.current[id] = ref
     },
   }
+
   return (
     <>
       <span className="anchor" id={id} {...refProp} />

src/components/Article/Article.ImageBlockWrapper.tsx

@@ -10,19 +10,12 @@ type Props = {
   ratio: PostImageRatio
 }
 
-export const ArticleImageBlockWrapper = ({ image, ratio }: Props) => {
+export const ArticleImageBlockWrapper = ({ image }: Props) => {
   return (
     <Container>
       <ResponsiveImage data={image} />
     </Container>
   )
-
-  // old code
-  // return (
-  //   <ThumbnailContainer aspectRatio={ratio}>
-  //     <Thumbnail fill src={image.url} alt={image.alt} />
-  //   </ThumbnailContainer>
-  // )
 }
 
 const Container = styled.div``

src/components/FilterTags/FilterTags.tsx

@@ -40,6 +40,8 @@ const Tags = styled.div`
   overflow-x: auto;
   padding-right: 14px;
 
+  min-height: 24px;
+
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 

src/components/Hero/Hero.tsx

@@ -6,7 +6,9 @@ export default function Hero() {
   return (
     <Container>
       <Title genericFontFamily="serif" component="h1" variant="h1">
-        LOGOS → PRESS ENGINE
+        <span>LOGOS</span>
+        <span> → </span>
+        <span>PRESS ENGINE</span>
       </Title>
       <Description component="div" variant="body1">
         Blog with media written by Logos members
@@ -33,10 +35,12 @@ const Title = styled(Typography)`
     font-size: 90px;
     line-height: 98px;
   }
-
   @media (max-width: 768px) {
     font-size: 36px;
     line-height: 44px;
+    > span:last-of-type {
+      display: block;
+    }
   }
 `
 

src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -46,7 +46,6 @@ export const ResponsiveImage = ({
       style={{
         paddingTop: height ? 0 : `calc(${data.height / data.width} * 100%)`,
         height: height || 'auto',
-        background: 'red',
       }}
     >
       <img src={lazyUrl} alt={alt} />

src/components/TableOfContents/TableOfContents.tsx

@@ -123,8 +123,10 @@ const TocItem = styled(Link)<{ active: boolean }>`
 
   &.level-1 {
   }
+
   &.level-2 {
   }
+
   &.level-3 {
     text-indent: 16px;
   }

src/services/unbody.service.ts

@@ -327,30 +327,37 @@ class UnbodyService extends UnbodyClient {
   ): Promise<
     ApiResponse<SearchResultItem<UnbodyImageBlock | TextBlockEnhanced>[]>
   > => {
-    const query = getSearchBlocksQuery({
-      ...(q.trim().length > 0
+    const nearTextFilter =
+      q.trim().length > 0
         ? {
             nearText: {
               concepts: [q, ...tags],
-              certainty: 0.2,
-            },
-            where: {
-              operator: UnbodyGraphQl.Filters.WhereOperatorEnum.And,
-              operands: [
-                ...(published
-                  ? [
-                      Operands.WHERE_PUBLISHED([
-                        'document',
-                        UnbodyGraphQl.UnbodyDocumentTypeNames.GoogleDoc,
-                        'pathString',
-                      ]),
-                    ]
-                  : []),
-                Operands.WHERE_IS_IN_SLUG(articleSlug),
-              ],
+              certainty: 0.7,
             },
           }
-        : {}),
+        : {}
+
+    const whereFilter = {
+      where: {
+        operator: UnbodyGraphQl.Filters.WhereOperatorEnum.And,
+        operands: [
+          ...(published
+            ? [
+                Operands.WHERE_PUBLISHED([
+                  'document',
+                  UnbodyGraphQl.UnbodyDocumentTypeNames.GoogleDoc,
+                  'pathString',
+                ]),
+              ]
+            : []),
+          Operands.WHERE_IS_IN_SLUG(articleSlug),
+        ],
+      },
+    }
+
+    const query = getSearchBlocksQuery({
+      ...nearTextFilter,
+      ...whereFilter,
     })
 
     return this.request<UnbodyGraphQlResponseBlocks>(query)