diff --git a/src/components/ContentBlock/ContentBlock.Body.tsx b/src/components/ContentBlock/ContentBlock.Body.tsx new file mode 100644 index 0000000..a305511 --- /dev/null +++ b/src/components/ContentBlock/ContentBlock.Body.tsx @@ -0,0 +1,32 @@ +import { Typography } from '@acid-info/lsd-react' +import styled from '@emotion/styled' + +type Props = { + title: string + author: string +} + +const ContentBlockBody = ({ title, author }: Props) => { + return ( + + + {title} + + + {author} + + + ) +} + +const BlockBodyContainer = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +` + +export default ContentBlockBody diff --git a/src/components/ContentBlock/ContentBlock.Header.tsx b/src/components/ContentBlock/ContentBlock.Header.tsx new file mode 100644 index 0000000..ccff3c4 --- /dev/null +++ b/src/components/ContentBlock/ContentBlock.Header.tsx @@ -0,0 +1,35 @@ +import styled from '@emotion/styled' +import { Typography } from '@acid-info/lsd-react' +import { PostClassType } from '../Post/Post' + +type Props = { + type: PostClassType + date: string +} + +const ContentBlockHeader = ({ type, date }: Props) => { + return ( + + + {type.toUpperCase()} + + • + + {new Date(date).toLocaleString('en-GB', { + day: 'numeric', + month: 'long', + year: 'numeric', + })} + + + ) +} + +const ContentBlockInfo = styled.div` + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; +` + +export default ContentBlockHeader diff --git a/src/components/ContentBlock/ImageBlock.tsx b/src/components/ContentBlock/ImageBlock.tsx new file mode 100644 index 0000000..42bdf1e --- /dev/null +++ b/src/components/ContentBlock/ImageBlock.tsx @@ -0,0 +1,64 @@ +import Link from 'next/link' +import styled from '@emotion/styled' +import Image from 'next/image' + +import { SearchResultItem } from '@/types/data.types' +import { UnbodyImageBlock } from '@/lib/unbody/unbody.types' + +import { GridItem } from '../Grid/Grid' +import { PostClassType } from '../Post/Post' +import ContentBlockHeader from './ContentBlock.Header' +import ContentBlockBody from './ContentBlock.Body' + +type Props = Omit, 'score'> + +const ImageBlock = ({ doc }: Props) => { + return ( + + + + + {doc.alt} + + + + + + + ) +} + +const CustomGridItem = styled(GridItem)` + @media (max-width: 768px) { + grid-column: span 8 !important; + } +` + +const BlockLink = styled(Link)` + text-decoration: none; +` + +const Container = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + padding: 16px 0; + border-top: 1px solid rgb(var(--lsd-theme-primary)); + position: relative; +` + +const ImageContainer = styled.div` + position: relative; + margin-bottom: 8px; + aspect-ratio: 1 / 1; // fixed aspect ratio temporarily +` + +export default ImageBlock diff --git a/src/components/ContentBlock/TextBlock.tsx b/src/components/ContentBlock/TextBlock.tsx new file mode 100644 index 0000000..dcbb4e2 --- /dev/null +++ b/src/components/ContentBlock/TextBlock.tsx @@ -0,0 +1,49 @@ +import Link from 'next/link' +import styled from '@emotion/styled' + +import { SearchResultItem } from '@/types/data.types' +import { UnbodyTextBlock } from '@/lib/unbody/unbody.types' + +import { GridItem } from '../Grid/Grid' +import { Typography } from '@acid-info/lsd-react' +import { PostClassType } from '../Post/Post' +import ContentBlockHeader from './ContentBlock.Header' +import ContentBlockBody from './ContentBlock.Body' + +type Props = Omit, 'score'> + +const TextBlock = ({ doc }: Props) => { + return ( + + + + + + {doc.text} + + + + + + ) +} + +const BlockLink = styled(Link)` + text-decoration: none; +` + +const Container = styled.div` + display: flex; + flex-direction: column; + gap: 16px; + padding: 16px 0; + border-top: 1px solid rgb(var(--lsd-theme-primary)); +` + +export default TextBlock diff --git a/src/components/ContentBlock/index.ts b/src/components/ContentBlock/index.ts new file mode 100644 index 0000000..074aafc --- /dev/null +++ b/src/components/ContentBlock/index.ts @@ -0,0 +1,2 @@ +export { default as ImageBlock } from './ImageBlock' +export { default as TextBlock } from './TextBlock' diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index c51dd52..987b797 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -6,9 +6,10 @@ export const Grid = styled.div` padding: 16px; gap: 16px; - @media (max-width: 768px) { + // TODO: The mobile design works when commenting this out + /* @media (max-width: 768px) { grid-template-columns: 100%; - } + } */ ` export const GridItem = styled.div` diff --git a/src/components/RelatedArticles/RelatedArticles.tsx b/src/components/RelatedArticles/RelatedArticles.tsx new file mode 100644 index 0000000..3d68cec --- /dev/null +++ b/src/components/RelatedArticles/RelatedArticles.tsx @@ -0,0 +1,41 @@ +import { getArticleCover } from '@/utils/data.utils' +import { Typography } from '@acid-info/lsd-react' +import styled from '@emotion/styled' +import { PostsList } from '../PostList/PostList' +import { Section } from '../Section/Section' +import { SearchResultItem } from '@/types/data.types' +import { UnbodyGoogleDoc } from '@/lib/unbody/unbody.types' + +type Props = { + articles: SearchResultItem[] +} + +export default function RelatedArticles({ articles }: Props) { + return ( + +
+ ({ + slug: article.doc.slug, + date: article.doc.modifiedAt, + title: article.doc.title, + description: article.doc.subtitle, // TODO: summary is not available + author: 'Jinho', + tags: article.doc.tags, + coverImage: getArticleCover(article.doc.blocks), + }))} + /> +
+ + ) +} + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + + @media (max-width: 768px) { + align-items: flex-start; + } +` diff --git a/src/components/RelatedArticles/index.tsx b/src/components/RelatedArticles/index.tsx new file mode 100644 index 0000000..0c48bd4 --- /dev/null +++ b/src/components/RelatedArticles/index.tsx @@ -0,0 +1 @@ +export { default as RelatedArticles } from './RelatedArticles' diff --git a/src/components/RelatedContent/RelatedContent.tsx b/src/components/RelatedContent/RelatedContent.tsx new file mode 100644 index 0000000..bd4af88 --- /dev/null +++ b/src/components/RelatedContent/RelatedContent.tsx @@ -0,0 +1,51 @@ +import styled from '@emotion/styled' +import { Section } from '../Section/Section' +import { SearchResultItem } from '@/types/data.types' +import { UnbodyImageBlock, UnbodyTextBlock } from '@/lib/unbody/unbody.types' +import { Grid } from '../Grid/Grid' +import { ImageBlock, TextBlock } from '../ContentBlock' +import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types' + +type Props = { + blocks: SearchResultItem[] +} + +export default function RelatedContent({ blocks }: Props) { + return ( + +
+ + {blocks.map( + (block: SearchResultItem) => { + if (!block.doc.document || !block.doc.document[0]) return null + + let refArticle = null + if (UnbodyGraphQl.UnbodyDocumentTypeNames.GoogleDoc) { + refArticle = block.doc.document[0] + } + + switch (block.doc.__typename) { + case UnbodyGraphQl.UnbodyDocumentTypeNames.TextBlock: + return + case UnbodyGraphQl.UnbodyDocumentTypeNames.ImageBlock: { + return + } + } + }, + )} + +
+ + ) +} + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + margin-top: 108px; + + @media (max-width: 768px) { + align-items: flex-start; + } +` diff --git a/src/components/RelatedContent/index.tsx b/src/components/RelatedContent/index.tsx new file mode 100644 index 0000000..36b92ed --- /dev/null +++ b/src/components/RelatedContent/index.tsx @@ -0,0 +1 @@ +export { default as RelatedContent } from './RelatedContent' diff --git a/src/pages/search.tsx b/src/pages/search.tsx index 77f4615..8e7b757 100644 --- a/src/pages/search.tsx +++ b/src/pages/search.tsx @@ -4,30 +4,18 @@ import { UnbodyImageBlock, UnbodyTextBlock, } from '@/lib/unbody/unbody.types' -import { UnbodyGraphQl } from '@/lib/unbody/unbody-content.types' - -import Image from 'next/image' import unbodyApi from '@/services/unbody.service' +import { PostTypes, SearchResultItem } from '@/types/data.types' import { - PostTypes, - SearchHook, - SearchHookDataPayload, - SearchResultItem, - SearchResults, -} from '@/types/data.types' -import { - createMinimizedSearchText, extractQueryFromQuery, extractTopicsFromQuery, } from '@/utils/search.utils' import { useRouter } from 'next/router' import { ReactNode, useEffect, useRef, useState } from 'react' -import Link from 'next/link' import { SearchLayout } from '@/layouts/SearchLayout' -import { Section } from '@/components/Section/Section' -import { PostsList } from '@/components/PostList/PostList' -import { getArticleCover } from '@/utils/data.utils' +import { RelatedArticles } from '@/components/RelatedArticles' +import { RelatedContent } from '@/components/RelatedContent' interface SearchPageProps { articles: SearchResultItem[] @@ -83,83 +71,10 @@ export default function SearchPage({ return (
- {articles.data?.length && ( -
- ({ - slug: article.doc.slug, - date: article.doc.modifiedAt, - title: article.doc.title, - description: article.doc.subtitle, // TODO: summary is not available - author: 'Jinho', - tags: article.doc.tags, - coverImage: getArticleCover(article.doc.blocks), - }))} - /> -
- )} + {articles.data?.length && } -
- Related content blocks -
-
- {blocks.loading &&
...
} - {!blocks.error && blocks.data && blocks.data.length > 0 ? ( - blocks.data.map( - (block: SearchResultItem) => { - if (!block.doc.document || !block.doc.document[0]) return null - - let refArticle = null - if (UnbodyGraphQl.UnbodyDocumentTypeNames.GoogleDoc) { - refArticle = block.doc.document[0] - } - - switch (block.doc.__typename) { - case UnbodyGraphQl.UnbodyDocumentTypeNames.TextBlock: - return ( -
- {refArticle && ( -

- - {refArticle.title} - -

- )} - { -

- } -

- ) - case UnbodyGraphQl.UnbodyDocumentTypeNames.ImageBlock: { - return ( -
- {refArticle && ( -

- - {refArticle.title} - -

- )} - {block.doc.alt} -
- ) - } - } - }, - ) - ) : ( -
Nothing found
- )} -
-
+ {/* TODO: used initialBlocks instead of blocks.data temporarily to render data */} + {initialBlocks?.length && }
) } diff --git a/src/queries/searchBlocks.ts b/src/queries/searchBlocks.ts index d2d61e4..f69d5e7 100644 --- a/src/queries/searchBlocks.ts +++ b/src/queries/searchBlocks.ts @@ -21,6 +21,7 @@ export const getSearchBlocksQuery = (args: UnbodyGetFilters = defaultArgs) => title mentions slug + modifiedAt __typename } } @@ -39,6 +40,7 @@ export const getSearchBlocksQuery = (args: UnbodyGetFilters = defaultArgs) => title slug mentions + modifiedAt __typename } }