[FEAT] Don't display all the posts in the 'Blog' section of the 'Home' page

src/pages/blog.tsx

@@ -21,7 +21,8 @@ import Section from '../theme/components/Section';
 import { PAGE, SECTION } from '../theme/utils/constants';
 import { Heading } from 'rebass/styled-components';
 import Triangle from '../theme/components/Triangle';
-import { PostContainer } from '../theme/sections/Blog';
+import { PostContainer } from '../theme/components/Post';
+import { postsContent } from '../content/PostsContent';
 
 const BlogPage = (): JSX.Element => (
   <Layout title={PAGE.blog}>
@@ -37,7 +38,7 @@ const BlogPage = (): JSX.Element => (
       >
         {SECTION.blog}
       </Heading>
-      <PostContainer />
+      <PostContainer posts={postsContent.posts} />
     </Section.Container>
     <Footer />
   </Layout>

src/theme/components/Footer.tsx

@@ -18,7 +18,7 @@ import styled from 'styled-components';
 import { Box, Flex, Image, Text } from 'rebass/styled-components';
 import { Fade } from 'react-awesome-reveal';
 import SocialLink from './SocialLink';
-import Link from './Link';
+import { Link } from './Link';
 import { GATSBY_URL, MEDIA_QUERY_SMALL } from '../utils/constants';
 import { landing } from '../../content/LandingContent';
 import { header } from '../../content/HeaderContent';

src/theme/components/Header.tsx

@@ -23,7 +23,7 @@ import {
   Button,
 } from 'rebass/styled-components';
 import styled from 'styled-components';
-import Link from './Link';
+import { Link } from './Link';
 import { capitalize } from '../utils/string';
 import { SECTION } from '../utils/constants';
 import { getSectionHref } from '../utils/helpers';

src/theme/components/Link.tsx

@@ -54,4 +54,12 @@ const Link = styled.a<Props>`
   }
 `;
 
-export default Link;
+const LinkInButton = styled.a`
+  text-decoration: none;
+  display: block;
+  padding: '8px 16px';
+  font-weight: 600;
+  color: inherit;
+`;
+
+export { Link, LinkInButton };

src/theme/components/PageHeader.tsx

@@ -25,7 +25,7 @@ import {
 import styled from 'styled-components';
 import { header } from '../../content/HeaderContent';
 import { PAGE } from '../utils/constants';
-import Link from './Link';
+import { Link } from './Link';
 import { capitalize } from '../utils/string';
 
 const PageHeader = (): JSX.Element => {

src/theme/components/Post.tsx

@@ -14,11 +14,16 @@
  * limitations under the License.
  */
 import React, { ReactNode } from 'react';
-import { Heading, Text } from 'rebass/styled-components';
+import { Flex, Heading, Text } from 'rebass/styled-components';
 import styled from 'styled-components';
 import { PostDescription } from '../types';
-import { Card } from './Card';
+import { Card, CardContainer } from './Card';
 import CardFooter from './CardFooter';
+import { Fade } from 'react-awesome-reveal';
+import { LinkInButton } from './Link';
+import colors from '../colors.json';
+
+const cardMinWidth = '350px';
 
 type PostProps = PostDescription;
 
@@ -30,48 +35,32 @@ export const Post = ({
   date,
   time,
 }: PostProps): JSX.Element => (
-  <PostContainer url={url} title={title}>
-    <EllipsisHeading m={3} color="text" fontSize={3}>
-      {title}
-    </EllipsisHeading>
-    {cover && <CoverImage src={cover} alt={title} />}
-    <Text m={3} color="text">
-      {text}
-    </Text>
-    <CardFooter bg="primary" color="background" position="bottom-right" round>
-      <span>{`${date} - `}</span>
-      <TimeReadSpan>{`${Math.ceil(time)} min read`}</TimeReadSpan>
-    </CardFooter>
-  </PostContainer>
-);
-
-const TimeReadSpan = styled.span`
-  text-transform: none;
-`;
-
-type PostContainerProps = {
-  url: string;
-  title: string;
-  children: ReactNode;
-};
-
-const PostContainer = ({
-  url,
-  title,
-  children,
-}: PostContainerProps): JSX.Element => (
   <a
     href={url}
     target="__blank"
     title={title}
     style={{ textDecoration: 'none' }}
   >
     <Card p={0} pb={4}>
-      {children}
+      <EllipsisHeading m={3} color="text" fontSize={3}>
+        {title}
+      </EllipsisHeading>
+      {cover && <CoverImage src={cover} alt={title} />}
+      <Text m={3} color="text">
+        {text}
+      </Text>
+      <CardFooter bg="primary" color="background" position="bottom-right" round>
+        <span>{`${date} - `}</span>
+        <TimeReadSpan>{`${Math.ceil(time)} min read`}</TimeReadSpan>
+      </CardFooter>
     </Card>
   </a>
 );
 
+const TimeReadSpan = styled.span`
+  text-transform: none;
+`;
+
 const CoverImage = styled.img`
   width: 100%;
   height: 200px;
@@ -85,3 +74,48 @@ const EllipsisHeading = styled(Heading)`
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 `;
+
+type PostContainerProps = {
+  posts: PostDescription[];
+  pageId?: string;
+};
+
+export const PostContainer = ({
+  posts,
+  pageId,
+}: PostContainerProps): JSX.Element => {
+  return (
+    <>
+      <CardContainer minWidth={cardMinWidth}>
+        <DownFade>
+          {(pageId ? posts.slice(0, 6) : posts).map(p => (
+            <Post {...p} key={p.url} />
+          ))}
+        </DownFade>
+      </CardContainer>
+      {pageId && (
+        <DownFade>
+          <Flex justifyContent="center" mt="4" mb="2" fontSize={[2, 3]}>
+            <Card
+              as={LinkInButton}
+              href={`/${pageId}`}
+              style={{
+                borderWidth: '2px',
+                padding: '8px 70px',
+                background: colors.background,
+              }}
+            >
+              More
+            </Card>
+          </Flex>
+        </DownFade>
+      )}
+    </>
+  );
+};
+
+const DownFade = ({ children }: { children: ReactNode }): JSX.Element => (
+  <Fade direction="down" triggerOnce cascade damping={0.5}>
+    {children}
+  </Fade>
+);

src/theme/components/Section.tsx

@@ -17,7 +17,7 @@ import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { Heading } from 'rebass/styled-components';
 import { Slide } from 'react-awesome-reveal';
-import Link from './Link';
+import { Link } from './Link';
 import { MEDIA_QUERY_SMALL, SECTION } from '../utils/constants';
 import { getSectionHref } from '../utils/helpers';
 

src/theme/rebass-preset.d.ts

@@ -140,14 +140,14 @@ declare module '@rebass/preset' {
   }
 
   interface Button {
-    p?: number;
+    p?: number | string;
     m?: number;
     variant?: string;
     color?: string;
     bg?: string;
-    border?: number;
+    border?: number | string;
     borderRadius?: string;
-    textDecorationLine?: string;
+    textDecoration?: string;
     fontSize?: number;
     fontWeight?: string;
     boxShadow?: string;

src/theme/sections/Blog.tsx

@@ -14,36 +14,19 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Fade } from 'react-awesome-reveal';
 import Section from '../components/Section';
-import { CardContainer } from '../components/Card';
 import Triangle from '../components/Triangle';
-import { Post } from '../components/Post';
 import { SECTION } from '../utils/constants';
 import { postsContent } from '../../content/PostsContent';
-
-export const cardMinWidth = '350px';
+import { PostContainer } from '../components/Post';
 
 const Blog = (): JSX.Element => (
   <Section.Container id={SECTION.blog} Background={Background}>
     <Section.Header name={SECTION.blog} />
-    <PostContainer />
+    <PostContainer posts={postsContent.posts} pageId="blog" />
   </Section.Container>
 );
 
-const PostContainer = (): JSX.Element => {
-  const { posts } = postsContent;
-  return (
-    <CardContainer minWidth={cardMinWidth}>
-      <Fade direction="down" triggerOnce cascade damping={0.5}>
-        {posts.map(p => (
-          <Post {...p} key={p.url} />
-        ))}
-      </Fade>
-    </CardContainer>
-  );
-};
-
 const Background = (): JSX.Element => (
   <>
     <Triangle
@@ -69,4 +52,4 @@ const Background = (): JSX.Element => (
   </>
 );
 
-export { Blog, PostContainer };
+export { Blog };

src/theme/sections/News.tsx

@@ -14,28 +14,19 @@
  * limitations under the License.
  */
 import React from 'react';
-import { Fade } from 'react-awesome-reveal';
 import Section from '../components/Section';
-import { CardContainer } from '../components/Card';
 import Triangle from '../components/Triangle';
-import { Post } from '../components/Post';
+import { PostContainer } from '../components/Post';
 import { SECTION } from '../utils/constants';
 import { newsContent } from '../../content/NewsContent';
-import { cardMinWidth } from './Blog';
 
 const News = (): JSX.Element => {
   const { news } = newsContent;
 
   return (
     <Section.Container id={SECTION.news} Background={Background}>
       <Section.Header name={SECTION.news} />
-      <CardContainer minWidth={cardMinWidth}>
-        <Fade direction="down" triggerOnce cascade damping={0.5}>
-          {news.map(p => (
-            <Post {...p} key={p.url} />
-          ))}
-        </Fade>
-      </CardContainer>
+      <PostContainer posts={news} />
     </Section.Container>
   );
 };

src/theme/theme.ts

@@ -33,7 +33,7 @@ export const theme: Theme = {
       bg: 'transparent',
     },
     secondary: {
-      textDecorationLine: 'none',
+      textDecoration: 'none',
       color: colors.background,
       bg: colors.secondary,
       fontWeight: '600',