diff --git a/src/components/Article/Article.ImageBlockWrapper.tsx b/src/components/Article/Article.ImageBlockWrapper.tsx
index d339bac..e780ca5 100644
--- a/src/components/Article/Article.ImageBlockWrapper.tsx
+++ b/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 (
-
-
-
+
+
+
)
+
+ // old code
+ // return (
+ //
+ //
+ //
+ // )
}
+const Container = styled.div``
+
+//Old code?
const ThumbnailContainer = styled.div<{
aspectRatio: PostImageRatio
}>`
diff --git a/src/components/FeaturedPost/FeaturedPost.tsx b/src/components/FeaturedPost/FeaturedPost.tsx
index 98d51ee..47fa5f6 100644
--- a/src/components/FeaturedPost/FeaturedPost.tsx
+++ b/src/components/FeaturedPost/FeaturedPost.tsx
@@ -13,7 +13,10 @@ const FeaturedPost = ({ post }: Props) => {
-
+
diff --git a/src/components/Post/Post.tsx b/src/components/Post/Post.tsx
index 5d54966..a21d6ca 100644
--- a/src/components/Post/Post.tsx
+++ b/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
} else {
// TBD
+ // @jinho not sure what this is for?
return (
@@ -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
}>`
diff --git a/src/components/ResponsiveImage/ResponsiveImage.tsx b/src/components/ResponsiveImage/ResponsiveImage.tsx
index 58b8848..d3473c0 100644
--- a/src/components/ResponsiveImage/ResponsiveImage.tsx
+++ b/src/components/ResponsiveImage/ResponsiveImage.tsx
@@ -1,31 +1,55 @@
import React, { useState } from 'react'
-import Image from 'next/image'
-import { UnbodyImageBlock } from '@/lib/unbody/unbody.types'
+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'
-type Props = {
- data: UnbodyImageBlock
+export type ResponsiveImageProps = {
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 (
-
- {/**/}
-
+
+
)
}
@@ -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;
- //&.loaded{
- // opacity: 1;
- //}
+ opacity: 0;
+ transition: opacity 250ms;
+ &.loaded {
+ opacity: 1;
+ }
}
}
`
diff --git a/src/lib/unbody/unbody.types.ts b/src/lib/unbody/unbody.types.ts
index 0cdc8d6..df84b84 100644
--- a/src/lib/unbody/unbody.types.ts
+++ b/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'
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 68d4390..bb0c6ab 100644
--- a/src/pages/article/[slug].tsx
+++ b/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 {errors}
diff --git a/src/queries/getPost.ts b/src/queries/getPost.ts
index 98605ad..8f56e78 100644
--- a/src/queries/getPost.ts
+++ b/src/queries/getPost.ts
@@ -22,6 +22,8 @@ export const getArticlePostQuery = (args: UnbodyGetFilters = defaultArgs) =>
url
alt
order
+ width
+ height
__typename
_additional{
id
diff --git a/src/services/unbody.service.ts b/src/services/unbody.service.ts
index d365ba6..c71a663 100644
--- a/src/services/unbody.service.ts
+++ b/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 => {
+ 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