Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
fbf6efa
Merge Post & PostContainer classes
csouchet Nov 17, 2021
d7139fb
Move PostContainer from Blog to Post
csouchet Nov 17, 2021
bc1a31f
add mechanism to not display all the cards in the home page
csouchet Nov 17, 2021
86b757e
Add a button without style
csouchet Nov 17, 2021
8c40a9e
Put the button after the card container
csouchet Nov 17, 2021
52d911c
Move constant
csouchet Nov 17, 2021
173ba58
2 - Increase font size of the button
csouchet Nov 17, 2021
74c765a
Fix the redirection of the More link
csouchet Nov 17, 2021
135cf14
3 - Background white with red shadow
csouchet Nov 17, 2021
850449b
4 - With shadow primary
csouchet Nov 17, 2021
14d32cb
5 - grey shadow & red text
csouchet Nov 17, 2021
8bc1851
6 - Center button
csouchet Nov 17, 2021
1dc83d3
7 - More space between the More button & the card container
csouchet Nov 17, 2021
0292083
8 - Black shadow
csouchet Nov 17, 2021
f97d105
9 - Not shadow, same border as cards
csouchet Nov 17, 2021
3db704d
10 - Border black
csouchet Nov 17, 2021
f96fb83
11 - Border red + text blue + little shadow + margin bottom
csouchet Nov 17, 2021
2c9e89d
12 - Change the button padding
csouchet Nov 17, 2021
2137116
Final rendering
csouchet Nov 18, 2021
0d689a4
Simplify the style
csouchet Nov 19, 2021
93d6417
Use polymorphic prop to avoid to have too many component in the DOM
csouchet Nov 19, 2021
3ca9270
Change type and 'as' type
csouchet Nov 19, 2021
5af4058
Use props to set padding in LinkInButton
csouchet Nov 19, 2021
ee431fb
Remove unnecessary dynamic styles
csouchet Nov 19, 2021
a4ad29e
Move LinkInButton in Link file
csouchet Nov 19, 2021
d066228
Remove unnecessary added type
csouchet Nov 22, 2021
6c49c18
Fix button background
csouchet Nov 22, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/pages/blog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -37,7 +38,7 @@ const BlogPage = (): JSX.Element => (
>
{SECTION.blog}
</Heading>
<PostContainer />
<PostContainer posts={postsContent.posts} />
</Section.Container>
<Footer />
</Layout>
Expand Down
2 changes: 1 addition & 1 deletion src/theme/components/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/theme/components/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
10 changes: 9 additions & 1 deletion src/theme/components/Link.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
2 changes: 1 addition & 1 deletion src/theme/components/PageHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
100 changes: 67 additions & 33 deletions src/theme/components/Post.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
Expand All @@ -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>
);
2 changes: 1 addition & 1 deletion src/theme/components/Section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
6 changes: 3 additions & 3 deletions src/theme/rebass-preset.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
23 changes: 3 additions & 20 deletions src/theme/sections/Blog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -69,4 +52,4 @@ const Background = (): JSX.Element => (
</>
);

export { Blog, PostContainer };
export { Blog };
13 changes: 2 additions & 11 deletions src/theme/sections/News.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/theme/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const theme: Theme = {
bg: 'transparent',
},
secondary: {
textDecorationLine: 'none',
textDecoration: 'none',
color: colors.background,
bg: colors.secondary,
fontWeight: '600',
Expand Down