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) {
|
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 articleContainer = useArticleContainerContext()
|
||||||
const { tocIndex, setTocIndex } = articleContainer
|
const { tocIndex, setTocIndex } = articleContainer
|
||||||
|
|
||||||
// temporary data - unbody doesn't provide
|
// temporary data - unbody doesn't provide
|
||||||
const author = 'John Doe'
|
const author = 'John Doe'
|
||||||
const authorEmail = 'john@acid.info'
|
const authorEmail = 'john@acid.info'
|
||||||
const tags = ['Privacy', 'Blockchain', 'Technology']
|
|
||||||
|
|
||||||
const date = new Date(createdAt)
|
const date = new Date(createdAt)
|
||||||
|
|
||||||
|
|
|
@ -46,6 +46,7 @@ export type PostAppearanceProps = {
|
||||||
}
|
}
|
||||||
|
|
||||||
export type PostDataProps = {
|
export type PostDataProps = {
|
||||||
|
remoteId: string // TODO: slug should be used for links
|
||||||
date: string
|
date: string
|
||||||
title: string
|
title: string
|
||||||
description?: string
|
description?: string
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { CommonProps } from '@acid-info/lsd-react/dist/utils/useCommonProps'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
import { Post, PostProps } from '../Post'
|
import { Post, PostProps } from '../Post'
|
||||||
import { Typography } from '@acid-info/lsd-react'
|
import { Typography } from '@acid-info/lsd-react'
|
||||||
|
import Link from 'next/link'
|
||||||
|
|
||||||
export type PostContainerProps = CommonProps &
|
export type PostContainerProps = CommonProps &
|
||||||
React.HTMLAttributes<HTMLDivElement> & {
|
React.HTMLAttributes<HTMLDivElement> & {
|
||||||
|
@ -23,9 +24,11 @@ export default function PostContainer({
|
||||||
)}
|
)}
|
||||||
<Container>
|
<Container>
|
||||||
{postsData.map((post, index) => (
|
{postsData.map((post, index) => (
|
||||||
<PostWrapper key={index}>
|
<PostLink key={index} href={`/article/${post.data.remoteId}`}>
|
||||||
<Post {...post} />
|
<PostWrapper>
|
||||||
</PostWrapper>
|
<Post {...post} />
|
||||||
|
</PostWrapper>
|
||||||
|
</PostLink>
|
||||||
))}
|
))}
|
||||||
</Container>
|
</Container>
|
||||||
</div>
|
</div>
|
||||||
|
@ -53,3 +56,7 @@ const PostWrapper = styled.div`
|
||||||
const Title = styled(Typography)`
|
const Title = styled(Typography)`
|
||||||
padding: 0 16px;
|
padding: 0 16px;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const PostLink = styled(Link)`
|
||||||
|
text-decoration: none;
|
||||||
|
`
|
||||||
|
|
|
@ -41,18 +41,20 @@ export default function TableOfContents({ contents, ...props }: Props) {
|
||||||
className={sticky ? 'sticky' : ''}
|
className={sticky ? 'sticky' : ''}
|
||||||
>
|
>
|
||||||
<Title variant="body3">Contents</Title>
|
<Title variant="body3">Contents</Title>
|
||||||
{/* @ts-ignore */}
|
<Contents height={height}>
|
||||||
{contents?.map((content, index) => (
|
{/* @ts-ignore */}
|
||||||
<Section
|
{contents?.map((content, index) => (
|
||||||
active={index === tocIndex}
|
<Section
|
||||||
onClick={() => handleSectionClick(index)}
|
active={index === tocIndex}
|
||||||
key={index}
|
onClick={() => handleSectionClick(index)}
|
||||||
>
|
key={index}
|
||||||
<Typography variant="body3" genericFontFamily="sans-serif">
|
>
|
||||||
{content.title}
|
<Typography variant="body3" genericFontFamily="sans-serif">
|
||||||
</Typography>
|
{content.title}
|
||||||
</Section>
|
</Typography>
|
||||||
))}
|
</Section>
|
||||||
|
))}
|
||||||
|
</Contents>
|
||||||
</Container>
|
</Container>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -79,6 +81,19 @@ const Title = styled(Typography)`
|
||||||
margin-bottom: 24px;
|
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 }>`
|
const Section = styled.section<{ active: boolean }>`
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 8px 0 8px 12px;
|
padding: 8px 0 8px 12px;
|
||||||
|
|
|
@ -24,6 +24,7 @@ export const getStaticProps = async () => {
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
posts: posts.map((post) => ({
|
posts: posts.map((post) => ({
|
||||||
|
remoteId: post.remoteId,
|
||||||
date: post.modifiedAt,
|
date: post.modifiedAt,
|
||||||
title: post.title,
|
title: post.title,
|
||||||
description: post.summary,
|
description: post.summary,
|
||||||
|
|
|
@ -10,6 +10,7 @@ const defaultArgs: UnbodyGetFilters = {
|
||||||
|
|
||||||
export const getHomePagePostsQuery = (args: UnbodyGetFilters = defaultArgs) =>
|
export const getHomePagePostsQuery = (args: UnbodyGetFilters = defaultArgs) =>
|
||||||
GetGoogleDocQuery(args)(`
|
GetGoogleDocQuery(args)(`
|
||||||
|
remoteId
|
||||||
title
|
title
|
||||||
summary
|
summary
|
||||||
tags
|
tags
|
||||||
|
|
|
@ -26,7 +26,13 @@ const { UNBODY_API_KEY, UNBODY_LPE_PROJECT_ID } = process.env
|
||||||
|
|
||||||
type HomepagePost = Pick<
|
type HomepagePost = Pick<
|
||||||
UnbodyGoogleDoc,
|
UnbodyGoogleDoc,
|
||||||
'title' | 'summary' | 'tags' | 'modifiedAt' | 'subtitle' | 'blocks'
|
| 'remoteId'
|
||||||
|
| 'title'
|
||||||
|
| 'summary'
|
||||||
|
| 'tags'
|
||||||
|
| 'modifiedAt'
|
||||||
|
| 'subtitle'
|
||||||
|
| 'blocks'
|
||||||
>
|
>
|
||||||
|
|
||||||
type UnbodyDocTypes = UnbodyGoogleDoc | UnbodyImageBlock | UnbodyTextBlock
|
type UnbodyDocTypes = UnbodyGoogleDoc | UnbodyImageBlock | UnbodyTextBlock
|
||||||
|
|
Loading…
Reference in New Issue