diff --git a/src/components/Article/Article.tsx b/src/components/Article/Article.tsx index 6a741d8..8ea7b4e 100644 --- a/src/components/Article/Article.tsx +++ b/src/components/Article/Article.tsx @@ -15,14 +15,13 @@ interface Props { } export default function Article({ data }: Props) { - const { title, summary, blocks, toc, createdAt } = data + const { title, summary, blocks, toc, createdAt, tags } = data const articleContainer = useArticleContainerContext() const { tocIndex, setTocIndex } = articleContainer // temporary data - unbody doesn't provide const author = 'John Doe' const authorEmail = 'john@acid.info' - const tags = ['Privacy', 'Blockchain', 'Technology'] const date = new Date(createdAt) diff --git a/src/components/Post/Post.tsx b/src/components/Post/Post.tsx index 6d5e8e2..48d9cfe 100644 --- a/src/components/Post/Post.tsx +++ b/src/components/Post/Post.tsx @@ -46,6 +46,7 @@ export type PostAppearanceProps = { } export type PostDataProps = { + remoteId: string // TODO: slug should be used for links date: string title: string description?: string diff --git a/src/components/PostContainer/PostContainer.tsx b/src/components/PostContainer/PostContainer.tsx index 890b612..9b5ed04 100644 --- a/src/components/PostContainer/PostContainer.tsx +++ b/src/components/PostContainer/PostContainer.tsx @@ -2,6 +2,7 @@ import { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps' import styled from '@emotion/styled' import { Post, PostProps } from '../Post' import { Typography } from '@acid-info/lsd-react' +import Link from 'next/link' export type PostContainerProps = CommonProps & React.HTMLAttributes & { @@ -23,9 +24,11 @@ export default function PostContainer({ )} {postsData.map((post, index) => ( - - - + + + + + ))} @@ -53,3 +56,7 @@ const PostWrapper = styled.div` const Title = styled(Typography)` padding: 0 16px; ` + +const PostLink = styled(Link)` + text-decoration: none; +` diff --git a/src/components/TableOfContents/TableOfContents.tsx b/src/components/TableOfContents/TableOfContents.tsx index fd55c84..64d31a1 100644 --- a/src/components/TableOfContents/TableOfContents.tsx +++ b/src/components/TableOfContents/TableOfContents.tsx @@ -41,18 +41,20 @@ export default function TableOfContents({ contents, ...props }: Props) { className={sticky ? 'sticky' : ''} > Contents - {/* @ts-ignore */} - {contents?.map((content, index) => ( -
handleSectionClick(index)} - key={index} - > - - {content.title} - -
- ))} + + {/* @ts-ignore */} + {contents?.map((content, index) => ( +
handleSectionClick(index)} + key={index} + > + + {content.title} + +
+ ))} +
) } @@ -79,6 +81,19 @@ const Title = styled(Typography)` margin-bottom: 24px; ` +const Contents = styled.div<{ height: number }>` + display: flex; + flex-direction: column; + overflow-y: auto; + height: calc( + 100vh - ${uiConfigs.navbarRenderedHeight + uiConfigs.postMarginTop + 40}px + ); + + &::-webkit-scrollbar { + display: none; + } +` + const Section = styled.section<{ active: boolean }>` display: flex; padding: 8px 0 8px 12px; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 962ba7e..6f793c6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -24,6 +24,7 @@ export const getStaticProps = async () => { return { props: { posts: posts.map((post) => ({ + remoteId: post.remoteId, date: post.modifiedAt, title: post.title, description: post.summary, diff --git a/src/queries/getPosts.ts b/src/queries/getPosts.ts index ea9afac..56b9c11 100644 --- a/src/queries/getPosts.ts +++ b/src/queries/getPosts.ts @@ -10,6 +10,7 @@ const defaultArgs: UnbodyGetFilters = { export const getHomePagePostsQuery = (args: UnbodyGetFilters = defaultArgs) => GetGoogleDocQuery(args)(` + remoteId title summary tags diff --git a/src/services/unbody.service.ts b/src/services/unbody.service.ts index ad4c8d4..30362fd 100644 --- a/src/services/unbody.service.ts +++ b/src/services/unbody.service.ts @@ -26,7 +26,13 @@ const { UNBODY_API_KEY, UNBODY_LPE_PROJECT_ID } = process.env type HomepagePost = Pick< UnbodyGoogleDoc, - 'title' | 'summary' | 'tags' | 'modifiedAt' | 'subtitle' | 'blocks' + | 'remoteId' + | 'title' + | 'summary' + | 'tags' + | 'modifiedAt' + | 'subtitle' + | 'blocks' > type UnbodyDocTypes = UnbodyGoogleDoc | UnbodyImageBlock | UnbodyTextBlock