resolve conflict 2

src/components/Article/Article.ImageBlockWrapper.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import React from 'react'
 import { PostImageRatio, PostImageRatioOptions } from '../Post/Post'
 import Image from 'next/image'
+import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
 
 type Props = {
   image: UnbodyImageBlock
@@ -11,12 +12,22 @@ type Props = {
 
 export const ArticleImageBlockWrapper = ({ image, ratio }: Props) => {
   return (
-    <ThumbnailContainer aspectRatio={ratio}>
+    <Container>
-      <Thumbnail fill src={image.url} alt={image.alt} />
+      <ResponsiveImage data={image} />
-    </ThumbnailContainer>
+    </Container>
   )
+
+  // old code
+  // return (
+  //   <ThumbnailContainer aspectRatio={ratio}>
+  //     <Thumbnail fill src={image.url} alt={image.alt} />
+  //   </ThumbnailContainer>
+  // )
 }
 
+const Container = styled.div``
+
+//Old code?
 const ThumbnailContainer = styled.div<{
   aspectRatio: PostImageRatio
 }>`

src/components/FeaturedPost/FeaturedPost.tsx

@@ -13,7 +13,10 @@ const FeaturedPost = ({ post }: Props) => {
       <GridItem className="w-16">
         <PostLink href={`/article/${post.slug}`}>
           <PostWrapper>
-            <Post data={post} />
+            <Post
+              data={post}
+              appearance={{ imageProps: { fill: true, height: '480px' } }}
+            />
           </PostWrapper>
         </PostLink>
       </GridItem>

src/components/Post/Post.tsx

@@ -1,7 +1,7 @@
 import { Typography } from '@acid-info/lsd-react'
 import { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps'
 import styled from '@emotion/styled'
-import Image from 'next/image'
+import Image, { ImageProps } from 'next/image'
 import { LogosCircleIcon } from '../Icons/LogosCircleIcon'
 import { useMemo } from 'react'
 import {
@@ -13,6 +13,10 @@ import { Authors } from '../Authors'
 import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
 import { Tags } from '@/components/Tags'
 import { ResponsiveImage } from '../ResponsiveImage/ResponsiveImage'
+import {
+  ResponsiveImage,
+  ResponsiveImageProps,
+} from '../ResponsiveImage/ResponsiveImage'
 
 export enum PostImageRatio {
   PORTRAIT = 'portrait',
@@ -47,6 +51,7 @@ export type PostAppearanceProps = {
   styleType?: PostStyleType
   aspectRatio?: PostImageRatio
   showImage?: boolean
+  imageProps?: ResponsiveImageProps
 }
 
 export type PostDataProps = {
@@ -82,6 +87,7 @@ export default function Post({
     styleType = PostStyleType.LSD,
     aspectRatio = PostImageRatio.LANDSCAPE,
     showImage = true,
+    imageProps,
   } = {},
   data: {
     coverImage = null,
@@ -120,14 +126,10 @@ export default function Post({
   const _thumbnail = useMemo(() => {
     if (!showImage || !coverImage) return null
     if (postType === 'body') {
-      return (
+      return <ResponsiveImage {...imageProps} data={coverImage} />
-        <ThumbnailContainer aspectRatio={aspectRatio}>
-          <ResponsiveImage data={coverImage} height={'458px'} />
-          {/*<Thumbnail fill src={coverImage.url} alt={coverImage.alt} />*/}
-        </ThumbnailContainer>
-      )
     } else {
       // TBD
+      // @jinho not sure what this is for?
       return (
         <ThumbnailContainer aspectRatio={aspectRatio}>
           <Thumbnail fill src={coverImage.url} alt={coverImage.alt} />
@@ -189,6 +191,7 @@ 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
 }>`

src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -1,31 +1,55 @@
 import React, { useState } from 'react'
-import Image from 'next/image'
+import Image, { ImageProps } from 'next/image'
-import { UnbodyImageBlock } from '@/lib/unbody/unbody.types'
+import { ImageBlockEnhanced, UnbodyImageBlock } from '@/lib/unbody/unbody.types'
 import Imgix from 'react-imgix'
 import styled from '@emotion/styled'
 import { Blurhash } from 'react-blurhash'
 
-type Props = {
+export type ResponsiveImageProps = {
-  data: UnbodyImageBlock
   height?: number | string
+  nextImageProps?: ImageProps
+  fill?: boolean
 }
 
-export const ResponsiveImage = ({ data, height = '100%' }: Props) => {
+export type Props = {
+  data: UnbodyImageBlock | ImageBlockEnhanced
+} & ResponsiveImageProps
+
+export const ResponsiveImage = ({
+  data,
+  height = '100%',
+  fill = false,
+  nextImageProps,
+}: Props) => {
   const [loaded, setLoaded] = useState(false)
 
+  const lazyUrl = `${data.url}?blur=200&px=16&auto=format`
+
+  const imageProps: ImageProps = {
+    src: `${data.url}`,
+    width: data.width,
+    height: data.height,
+    alt: data.alt,
+    className: loaded ? 'loaded' : '',
+    onLoad: () => setLoaded(true),
+    loading: 'lazy',
+    ...(nextImageProps || {}),
+    style: {
+      width: '100%',
+      height: 'auto',
+    },
+  }
+
   return (
     <Container
+      className={fill ? 'fill' : ''}
       style={{
         paddingTop: `calc(${data.height / data.width} * ${height})`,
+        background: 'red',
       }}
     >
-      <img src={`${data.url}?blur=10&w=10`} />
+      <img src={lazyUrl} />
-      {/*<Blurhash*/}
+      <Image {...imageProps} />
-      {/*    hash={`e8I#x__3~qD%IU~q%MRQRjtQWB%M9FxuxuNG%MWBoLayof%Mt7Rj-;`}*/}
-      {/*    width={"100%"}*/}
-      {/*    height={"100%"}*/}
-      {/*/>*/}
-      <Imgix imgixParams={{ fit: 'clip' }} src={data.url} />
     </Container>
   )
 }
@@ -33,9 +57,9 @@ export const ResponsiveImage = ({ data, height = '100%' }: Props) => {
 const Container = styled.div`
   position: relative;
   width: 100%;
-  padding-top: 100%;
+  //padding-top: 100%;
   overflow: hidden;
-  object-fit: cover;
+  //object-fit: cover;
 
   filter: grayscale(100%);
   transition: filter 0.1s ease-in-out;
@@ -44,18 +68,33 @@ const Container = styled.div`
     filter: grayscale(0%);
   }
 
+  &.fill {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+
+    > img {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: auto;
+    }
+  }
+
   > * {
     position: absolute !important;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     width: 100%;
+    height: auto;
+    top: 0;
+    left: 0;
 
     &:last-of-type {
-      //opacity: 0.5;
+      opacity: 0;
-      //&.loaded{
+      transition: opacity 250ms;
-      //  opacity: 1;
+      &.loaded {
-      //}
+        opacity: 1;
+      }
     }
   }
 `

src/lib/unbody/unbody.types.ts

@@ -22,6 +22,7 @@ export type TextBlockEnhanced = UnbodyTextBlock & {
 
 export type ImageBlockEnhanced = UnbodyImageBlock & {
   blurhash?: string
+  placeholderBase64?: string
 }
 
 export * as UnbodyGraphQl from './unbody-content.types'

src/pages/article/[slug].tsx

@@ -18,7 +18,7 @@ const ArticlePage = ({ data, errors, why }: ArticleProps) => {
   const {
     query: { slug },
   } = useRouter()
-  console.log(typeof data, slug, why)
+
   if (!data) return null
   if (errors) return <div>{errors}</div>
 

src/queries/getPost.ts

@@ -22,6 +22,8 @@ export const getArticlePostQuery = (args: UnbodyGetFilters = defaultArgs) =>
                 url
                 alt
                 order
+                width
+                height
                 __typename
                 _additional{
                     id

src/services/unbody.service.ts

@@ -9,6 +9,7 @@ import {
   UnbodyGraphQlResponse,
   GoogleDocEnhanced,
   TextBlockEnhanced,
+  ImageBlockEnhanced,
 } from '@/lib/unbody/unbody.types'
 
 import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types'
@@ -26,6 +27,7 @@ import {
   SearchResultItem,
 } from '@/types/data.types'
 import { getSearchBlocksQuery } from '@/queries/searchBlocks'
+import axios from 'axios'
 
 const { UNBODY_API_KEY, UNBODY_LPE_PROJECT_ID } = process.env
 
@@ -146,6 +148,23 @@ const enhanceGoogleDoc = (doc: UnbodyGoogleDoc): GoogleDocEnhanced => ({
       : [],
 })
 
+const enhanceImageBlock = async (
+  block: UnbodyImageBlock,
+): Promise<ImageBlockEnhanced> => {
+  try {
+    let image = await axios.get(`${block.url}?blur=200&px=16&auto=format`, {
+      responseType: 'arraybuffer',
+    })
+    let returnedB64 = Buffer.from(image.data).toString('base64')
+    return {
+      ...block,
+      placeholderBase64: `data:image/png;base64,${returnedB64}`,
+    }
+  } catch (e) {
+    return block
+  }
+}
+
 const resolveScore = (_additional: any): number => {
   if (!_additional) {
     return 0