refactor: use remoteId for post link temporarily
This commit is contained in:
parent
fe4a1b54f5
commit
f503d88341
|
@ -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)
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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<HTMLDivElement> & {
|
||||
|
@ -23,9 +24,11 @@ export default function PostContainer({
|
|||
)}
|
||||
<Container>
|
||||
{postsData.map((post, index) => (
|
||||
<PostWrapper key={index}>
|
||||
<PostLink key={index} href={`/article/${post.data.remoteId}`}>
|
||||
<PostWrapper>
|
||||
<Post {...post} />
|
||||
</PostWrapper>
|
||||
</PostLink>
|
||||
))}
|
||||
</Container>
|
||||
</div>
|
||||
|
@ -53,3 +56,7 @@ const PostWrapper = styled.div`
|
|||
const Title = styled(Typography)`
|
||||
padding: 0 16px;
|
||||
`
|
||||
|
||||
const PostLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
`
|
||||
|
|
|
@ -41,6 +41,7 @@ export default function TableOfContents({ contents, ...props }: Props) {
|
|||
className={sticky ? 'sticky' : ''}
|
||||
>
|
||||
<Title variant="body3">Contents</Title>
|
||||
<Contents height={height}>
|
||||
{/* @ts-ignore */}
|
||||
{contents?.map((content, index) => (
|
||||
<Section
|
||||
|
@ -53,6 +54,7 @@ export default function TableOfContents({ contents, ...props }: Props) {
|
|||
</Typography>
|
||||
</Section>
|
||||
))}
|
||||
</Contents>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -10,6 +10,7 @@ const defaultArgs: UnbodyGetFilters = {
|
|||
|
||||
export const getHomePagePostsQuery = (args: UnbodyGetFilters = defaultArgs) =>
|
||||
GetGoogleDocQuery(args)(`
|
||||
remoteId
|
||||
title
|
||||
summary
|
||||
tags
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue