refactor: use remoteId for post link temporarily

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)
 

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

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<HTMLDivElement> & {
@@ -23,9 +24,11 @@ export default function PostContainer({
       )}
       <Container>
         {postsData.map((post, index) => (
-          <PostWrapper key={index}>
-            <Post {...post} />
-          </PostWrapper>
+          <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;
+`

src/components/TableOfContents/TableOfContents.tsx

@@ -41,18 +41,20 @@ export default function TableOfContents({ contents, ...props }: Props) {
       className={sticky ? 'sticky' : ''}
     >
       <Title variant="body3">Contents</Title>
-      {/* @ts-ignore */}
-      {contents?.map((content, index) => (
-        <Section
-          active={index === tocIndex}
-          onClick={() => handleSectionClick(index)}
-          key={index}
-        >
-          <Typography variant="body3" genericFontFamily="sans-serif">
-            {content.title}
-          </Typography>
-        </Section>
-      ))}
+      <Contents height={height}>
+        {/* @ts-ignore */}
+        {contents?.map((content, index) => (
+          <Section
+            active={index === tocIndex}
+            onClick={() => handleSectionClick(index)}
+            key={index}
+          >
+            <Typography variant="body3" genericFontFamily="sans-serif">
+              {content.title}
+            </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;

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,

src/queries/getPosts.ts

@@ -10,6 +10,7 @@ const defaultArgs: UnbodyGetFilters = {
 
 export const getHomePagePostsQuery = (args: UnbodyGetFilters = defaultArgs) =>
   GetGoogleDocQuery(args)(`
+        remoteId
         title
         summary
         tags

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