diff --git a/src/components/Article/ArticleBody.tsx b/src/components/Article/ArticleBody.tsx index 69aa267..3bff48e 100644 --- a/src/components/Article/ArticleBody.tsx +++ b/src/components/Article/ArticleBody.tsx @@ -49,7 +49,6 @@ export default function ArticleBody({ data }: Props) { }, [blocks]) const _blocks = useMemo(() => { - console.log(getContentBlocks(blocks)) return getContentBlocks(blocks).map((block, idx) => ( )) diff --git a/src/components/FeaturedPost/FeaturedPost.tsx b/src/components/FeaturedPost/FeaturedPost.tsx new file mode 100644 index 0000000..aefd572 --- /dev/null +++ b/src/components/FeaturedPost/FeaturedPost.tsx @@ -0,0 +1,34 @@ +import Link from 'next/link' +import { Grid, GridItem } from '../Grid/Grid' +import styled from '@emotion/styled' +import Post, { PostDataProps } from '../Post/Post' + +type Props = { + post: PostDataProps +} + +const FeaturedPost = ({ post }: Props) => { + return ( + + + + + + + + + + ) +} + +const PostWrapper = styled.div` + padding: 16px 0; + border-top: 1px solid rgb(var(--lsd-theme-primary)); + width: 100%; +` + +const PostLink = styled(Link)` + text-decoration: none; +` + +export default FeaturedPost diff --git a/src/components/FeaturedPost/index.ts b/src/components/FeaturedPost/index.ts new file mode 100644 index 0000000..5617cb9 --- /dev/null +++ b/src/components/FeaturedPost/index.ts @@ -0,0 +1 @@ +export { default as FeaturedPost } from './FeaturedPost' diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx index 8dae7b2..c51dd52 100644 --- a/src/components/Grid/Grid.tsx +++ b/src/components/Grid/Grid.tsx @@ -34,6 +34,10 @@ export const GridItem = styled.div` grid-column: span 8; } + &.w-16 { + grid-column: span 16; + } + @media (max-width: 768px) { grid-column: span 16 !important; } diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx new file mode 100644 index 0000000..903c522 --- /dev/null +++ b/src/components/Main/Main.tsx @@ -0,0 +1,13 @@ +import styled from '@emotion/styled' +import { uiConfigs } from '@/configs/ui.configs' +import { PropsWithChildren } from 'react' + +const Main = ({ children }: PropsWithChildren) => { + return {children} +} + +const Container = styled.main` + margin-block: ${uiConfigs.postSectionMargin}px; +` + +export default Main diff --git a/src/components/Main/index.ts b/src/components/Main/index.ts new file mode 100644 index 0000000..531beec --- /dev/null +++ b/src/components/Main/index.ts @@ -0,0 +1 @@ +export { default as Main } from './Main' diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx index 5ec2c61..3e30ced 100644 --- a/src/components/Section/Section.tsx +++ b/src/components/Section/Section.tsx @@ -4,17 +4,33 @@ import { PropsWithChildren } from 'react' type Props = PropsWithChildren<{ title: string + matches?: number }> -export const Section = (props: any) => { +export const Section = ({ title, matches, children, ...props }: Props) => { return ( - - {props.title} - {props.children} + + + + {title} + + {matches && ( + <> + • + + {matches} matches + + > + )} + + {children} ) } -const Title = styled(Typography)` +const Container = styled.div` + display: flex; + align-items: center; + gap: 8px; padding: 0 16px; ` diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx index 64d31a1..d2042f3 100644 --- a/src/components/TableOfContents/TableOfContents.tsx +++ b/src/components/TableOfContents/TableOfContents.tsx @@ -14,7 +14,7 @@ type Props = { export default function TableOfContents({ contents, ...props }: Props) { const articleContainer = useArticleContainerContext() const { tocIndex, setTocIndex } = articleContainer - const dy = uiConfigs.navbarRenderedHeight + uiConfigs.postMarginTop + const dy = uiConfigs.navbarRenderedHeight + uiConfigs.postSectionMargin const { sticky, stickyRef, height } = useSticky(dy) @@ -86,7 +86,8 @@ const Contents = styled.div<{ height: number }>` flex-direction: column; overflow-y: auto; height: calc( - 100vh - ${uiConfigs.navbarRenderedHeight + uiConfigs.postMarginTop + 40}px + 100vh - + ${uiConfigs.navbarRenderedHeight + uiConfigs.postSectionMargin + 40}px ); &::-webkit-scrollbar { diff --git a/src/configs/ui.configs.ts b/src/configs/ui.configs.ts index 1075dee..8968f9f 100644 --- a/src/configs/ui.configs.ts +++ b/src/configs/ui.configs.ts @@ -1,4 +1,4 @@ export const uiConfigs = { navbarRenderedHeight: 45, - postMarginTop: 78, + postSectionMargin: 78, } diff --git a/src/containers/ArticleContainer.tsx b/src/containers/ArticleContainer.tsx index 8fb5709..b4b0e52 100644 --- a/src/containers/ArticleContainer.tsx +++ b/src/containers/ArticleContainer.tsx @@ -3,11 +3,13 @@ import styled from '@emotion/styled' import { useState } from 'react' import { uiConfigs } from '@/configs/ui.configs' import { ArticleContainerContext } from '@/containers/ArticleContainer.Context' -import { UnbodyGoogleDoc } from '@/lib/unbody/unbody.types' +import { UnbodyGoogleDoc, UnbodyTocItem } from '@/lib/unbody/unbody.types' import ArticleBody from '@/components/Article/ArticleBody' interface Props { - data: UnbodyGoogleDoc + data: UnbodyGoogleDoc & { + toc: UnbodyTocItem[] + } } const ArticleContainer = (props: Props) => { @@ -30,7 +32,6 @@ const ArticleContainer = (props: Props) => { const Container = styled.div` display: flex; justify-content: center; - margin-top: ${uiConfigs.postMarginTop}px; ` const Right = styled.aside` diff --git a/src/layouts/ArticleLayout/Article.layout.tsx b/src/layouts/ArticleLayout/Article.layout.tsx index 9bf4641..690b691 100644 --- a/src/layouts/ArticleLayout/Article.layout.tsx +++ b/src/layouts/ArticleLayout/Article.layout.tsx @@ -6,6 +6,7 @@ import { Searchbar } from '@/components/Searchbar' import { ESearchScope } from '@/types/ui.types' import styles from './Article.layout.module.css' import { Footer } from '@/components/Footer' +import { Main } from '@/components/Main' export default function ArticleLayout(props: PropsWithChildren) { const isDarkState = useIsDarkState() @@ -16,7 +17,7 @@ export default function ArticleLayout(props: PropsWithChildren) { - {props.children} + {props.children} > ) diff --git a/src/layouts/DefaultLayout/Default.layout.tsx b/src/layouts/DefaultLayout/Default.layout.tsx index d20f7aa..f526082 100644 --- a/src/layouts/DefaultLayout/Default.layout.tsx +++ b/src/layouts/DefaultLayout/Default.layout.tsx @@ -5,6 +5,7 @@ import { Hero } from '@/components/Hero' import { NavbarFiller } from '@/components/Navbar/NavbarFiller' import { Searchbar } from '@/components/Searchbar' import { Footer } from '@/components/Footer' +import { Main } from '@/components/Main' export default function DefaultLayout(props: PropsWithChildren) { const isDarkState = useIsDarkState() @@ -17,7 +18,7 @@ export default function DefaultLayout(props: PropsWithChildren) { - {props.children} + {props.children} > ) diff --git a/src/layouts/SearchLayout/Search.layout.module.css b/src/layouts/SearchLayout/Search.layout.module.css new file mode 100644 index 0000000..2156f5a --- /dev/null +++ b/src/layouts/SearchLayout/Search.layout.module.css @@ -0,0 +1,3 @@ +.header > nav { + border-bottom: none; +} diff --git a/src/layouts/SearchLayout/Search.layout.tsx b/src/layouts/SearchLayout/Search.layout.tsx new file mode 100644 index 0000000..1639411 --- /dev/null +++ b/src/layouts/SearchLayout/Search.layout.tsx @@ -0,0 +1,24 @@ +import { Navbar } from '@/components/Navbar' +import useIsDarkState from '@/states/isDarkState/isDarkState' +import { PropsWithChildren } from 'react' +import { NavbarFiller } from '@/components/Navbar/NavbarFiller' +import { Searchbar } from '@/components/Searchbar' +import { ESearchScope } from '@/types/ui.types' +import styles from './Search.layout.module.css' +import { Footer } from '@/components/Footer' +import { Main } from '@/components/Main' + +export default function SearchLayout(props: PropsWithChildren) { + const isDarkState = useIsDarkState() + return ( + <> + + + + + + {props.children} + + > + ) +} diff --git a/src/layouts/SearchLayout/index.ts b/src/layouts/SearchLayout/index.ts new file mode 100644 index 0000000..329b1c2 --- /dev/null +++ b/src/layouts/SearchLayout/index.ts @@ -0,0 +1 @@ +export { default as SearchLayout } from './Search.layout' diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 42c17ce..b67c6fc 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,12 +1,11 @@ import api from '@/services/unbody.service' -import Post, { PostDataProps } from '@/components/Post/Post' +import { PostDataProps } from '@/components/Post/Post' import { PostsList } from '@/components/PostList/PostList' import { Section } from '@/components/Section/Section' -import { UnbodyGoogleDoc, UnbodyImageBlock } from '@/lib/unbody/unbody.types' -import { ESearchStatus } from '@/types/ui.types' -import { GetStaticProps } from 'next' +import { getArticleCover } from '@/utils/data.utils' +import { FeaturedPost } from '@/components/FeaturedPost' type Props = { posts: PostDataProps[] @@ -17,10 +16,9 @@ type Props = { export default function Home({ posts, featured }: Props) { return ( <> - {/*@TODO @jinho, wht PostContainer should recive an array of postData instead of only One?*/} {featured && ( - + )} @@ -43,24 +41,20 @@ export const getStaticProps = async () => { remoteId: featured.remoteId, date: featured.modifiedAt, title: featured.title, - description: featured.summary, + description: featured.subtitle, // TODO: summary is not available author: 'Jinho', tags: featured.tags, - ...(featured.blocks && featured.blocks!.length > 0 - ? { coverImage: featured.blocks![0] as UnbodyImageBlock } - : {}), + coverImage: getArticleCover(featured.blocks), } : null, posts: posts.map((post) => ({ remoteId: post.remoteId, date: post.modifiedAt, title: post.title, - description: post.summary, + description: post.subtitle, // TODO: summary is not available author: 'Jinho', tags: post.tags, - ...(post.blocks && post.blocks!.length > 0 - ? { coverImage: post.blocks![0] as UnbodyImageBlock } - : {}), + coverImage: getArticleCover(post.blocks), })), errors, }, diff --git a/src/pages/search.tsx b/src/pages/search.tsx index 9a2e463..d0f285c 100644 --- a/src/pages/search.tsx +++ b/src/pages/search.tsx @@ -21,8 +21,12 @@ import { extractTopicsFromQuery, } from '@/utils/search.utils' import { useRouter } from 'next/router' -import { useEffect, useRef, useState } from 'react' +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' interface SearchPageProps { articles: SearchResultItem[] @@ -73,24 +77,22 @@ export default function SearchPage({ return ( - - Related articles - - - {articles.loading && ...} - {!articles.error && articles.data && articles.data.length > 0 ? ( - articles.data.map((article: SearchResultItem) => ( - - {article.doc.title} - {article.doc.summary} - - )) - ) : ( - Nothing found - )} - - - + {articles.data?.length && ( + + ({ + remoteId: article.doc.remoteId, + 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), + }))} + /> + + )} + Related content blocks @@ -156,6 +158,10 @@ export default function SearchPage({ ) } +SearchPage.getLayout = function getLayout(page: ReactNode) { + return {page} +} + export async function getStaticProps() { const { data: articles = [] } = await unbodyApi.searchArticles() const { data: blocks = [] } = await unbodyApi.serachBlocks() diff --git a/src/queries/getPost.ts b/src/queries/getPost.ts index 0b4361a..ac4c2ba 100644 --- a/src/queries/getPost.ts +++ b/src/queries/getPost.ts @@ -10,6 +10,7 @@ export const getArticlePostQuery = (args: UnbodyGetFilters = defaultArgs) => sourceId remoteId title + subtitle summary tags createdAt diff --git a/src/queries/getPosts.ts b/src/queries/getPosts.ts index 86b203f..f46449a 100644 --- a/src/queries/getPosts.ts +++ b/src/queries/getPosts.ts @@ -12,6 +12,7 @@ export const getHomePagePostsQuery = (args: UnbodyGetFilters = defaultArgs) => GetGoogleDocQuery(args)(` remoteId title + subtitle summary tags createdAt @@ -21,6 +22,8 @@ export const getHomePagePostsQuery = (args: UnbodyGetFilters = defaultArgs) => ...on ImageBlock{ url alt + order + __typename } } `) diff --git a/src/queries/searchArticles.ts b/src/queries/searchArticles.ts index b6b98f3..09166a0 100644 --- a/src/queries/searchArticles.ts +++ b/src/queries/searchArticles.ts @@ -7,9 +7,18 @@ export const getSearchArticlesQuery = (args: UnbodyGetFilters = defaultArgs) => GetGoogleDocQuery(args)(` remoteId title + subtitle summary tags modifiedAt + blocks{ + ...on ImageBlock{ + url + alt + order + __typename + } + } _additional{ certainty }
{article.doc.summary}