Skip to content

Commit b0ac7f7

Browse files
chrisnottcachrisnottca
authored
Pull Featured Articles out as it's own section (#231)
Extracted Featured Articles from homepage into its own section Replaced instance of SectionSeparator with css border Pulled Timeline and Why Commit sections out of Featured Articles Fix GridSection and GridItem layout component bugs for small resolutions Correct spelling errors in ArticlePreview section
1 parent 95234a1 commit b0ac7f7

File tree

9 files changed

+224
-169
lines changed

9 files changed

+224
-169
lines changed

‎components/article-preview/index.js‎

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,12 @@ import { string } from 'prop-types'
55
import styled from 'styled-components'
66

77
import { Heading, Text, MediaContainer } from 'components'
8-
import { MOBILE_SIZE, TABLET_SMALL_SIZE } from 'styles/constants'
8+
import { GridItem } from 'components/layout'
9+
import { MOBILE_SIZE } from 'styles/constants'
910

1011
import { children } from '../../helpers/prop-types'
1112

12-
const Root = styled.div`
13-
grid-column: span 4;
14-
display: flex;
15-
flex-direction: column;
16-
justify-content: flex-start;
17-
align-items: center;
18-
13+
const Root = styled(GridItem)`
1914
a {
2015
color: inherit;
2116
text-decoration: none;
@@ -40,31 +35,14 @@ const Root = styled.div`
4035
text-align: center;
4136
margin: 0;
4237
}
43-
44-
@media only screen and (max-width: ${TABLET_SMALL_SIZE}) {
45-
margin-bottom: 4.5rem;
46-
47-
&:last-of-type {
48-
grid-column: 3 / span 4;
49-
margin-bottom: 0;
50-
}
51-
}
52-
53-
@media only screen and (max-width: ${MOBILE_SIZE}) {
54-
grid-column: 1 / span 1;
55-
56-
&:last-of-type {
57-
grid-column: 1 / span 1;
58-
}
59-
}
6038
`
6139

6240
const StyledMediaContainer = styled(MediaContainer)`
6341
width: 100%;
6442
height: 200px;
6543
`
6644

67-
const ArticlePreivew = ({ media, heading, text, link, ...props }) => (
45+
const ArticlePreview = ({ media, heading, text, link, ...props }) => (
6846
<Root {...props}>
6947
<a href={link} rel="noopener">
7048
<StyledMediaContainer>{media}</StyledMediaContainer>
@@ -74,11 +52,11 @@ const ArticlePreivew = ({ media, heading, text, link, ...props }) => (
7452
</Root>
7553
)
7654

77-
ArticlePreivew.propTypes = {
55+
ArticlePreview.propTypes = {
7856
media: children,
7957
heading: string,
8058
text: string,
8159
link: string,
8260
}
8361

84-
export default ArticlePreivew
62+
export default ArticlePreview

‎components/layout/grid-section.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import styled from 'styled-components'
22

3-
import { TABLET_LARGE_SIZE, MOBILE_SIZE } from 'styles/constants'
3+
import {
4+
TABLET_LARGE_SIZE,
5+
TABLET_SMALL_SIZE,
6+
MOBILE_SIZE,
7+
} from 'styles/constants'
48

59
const GridSection = styled.div`
610
display: grid;
@@ -13,8 +17,12 @@ const GridSection = styled.div`
1317
column-gap: 24px;
1418
}
1519
20+
@media only screen and (max-width: ${TABLET_SMALL_SIZE}) {
21+
grid-template-columns: repeat(8, 1fr);
22+
}
23+
1624
@media only screen and (max-width: ${MOBILE_SIZE}) {
17-
display: block;
25+
grid-template-columns: 1fr;
1826
}
1927
`
2028

‎pages/index.js‎

Lines changed: 5 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
import {
22
ApplyLink,
3-
ArticlePreview,
43
Logo,
54
Footer,
65
Heading,
76
Page,
87
Testimonials,
98
Text,
10-
StaticImage,
119
} from 'components'
1210
import {
1311
EngineersWhoJoinedSection,
12+
FeaturedArticles,
1413
WhatsRight,
1514
HowItWorks,
1615
SpSection,
16+
PlatformSection,
1717
TimelineSection,
1818
WhyCommitSection,
1919
} from 'sections'
2020
import styles from 'styles/Home.module.css'
2121

22-
import { SectionSeparator } from '../components'
23-
import PlatformSection from '../sections/platform-section'
24-
2522
const { h2 } = Heading.VARIANT
2623

2724
const Home = () => (
@@ -60,49 +57,9 @@ const Home = () => (
6057
/>
6158
</SpSection>
6259
<HowItWorks />
63-
<section className={styles.articles}>
64-
<Heading variant={h2} className={styles.articlesHeading}>
65-
Featured Articles
66-
</Heading>
67-
<div className={styles.gridSection}>
68-
<ArticlePreview
69-
media={
70-
<StaticImage
71-
name="person-looking-at-monitor.jpeg"
72-
alt="Person looking at computer monitor"
73-
/>
74-
}
75-
heading="My job at Commit is to create an incredible experience for engineers"
76-
text="One August in the 1990s, I drove across Canada, with a good friend.
77-
I have so many fond memories of the journey: our debates about how
78-
to solve the world's problems, the lengthy and..."
79-
link="https://blog.commit.dev/articles/b5i3amkjq2nz7y4apq4jsfd66hudu8"
80-
/>
81-
<ArticlePreview
82-
media={<StaticImage name="lillian-liang.jpeg" alt="Lillian Liang" />}
83-
heading="Lillian Liang, Plastiq Inc."
84-
text="Lillian Liang is a Commit engineer who joined Plastiq earlier this
85-
year. We talked to her about her journey to Commit and Plastiq..."
86-
link="https://blog.commit.dev/articles/committed-to-success-lillian-liang-plastiq-inc"
87-
/>
88-
<ArticlePreview
89-
media={
90-
<StaticImage
91-
name="monolith-diagram.png"
92-
alt="Monolith architecture"
93-
/>
94-
}
95-
heading="Streaming out the monolith"
96-
text="As a monolithic code base builds up over time, it can become harder
97-
and harder to maintain, and more difficult to extract data from,
98-
especially if..."
99-
link="https://blog.commit.dev/articles/streaming-out-the-monolith"
100-
/>
101-
</div>
102-
<SectionSeparator />
103-
<TimelineSection />
104-
<WhyCommitSection />
105-
</section>
60+
<FeaturedArticles />
61+
<TimelineSection />
62+
<WhyCommitSection />
10663
<PlatformSection />
10764
<EngineersWhoJoinedSection />
10865
<section className={styles.testimonials}>

‎sections/featured-articles-section/index.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import styled from 'styled-components'
2+
3+
import { ArticlePreview, Heading, StaticImage } from 'components'
4+
import { GridSection } from 'components/layout'
5+
import { TABLET_LARGE_SIZE, MOBILE_SIZE } from 'styles/constants'
6+
7+
const StyledSection = styled.section`
8+
margin: 165px auto 0;
9+
padding: 0 20px;
10+
11+
@media only screen and (max-width: ${TABLET_LARGE_SIZE}) {
12+
margin: 124px 0 0;
13+
}
14+
15+
@media only screen and (max-width: ${MOBILE_SIZE}) {
16+
margin: 142px 16px 0;
17+
}
18+
`
19+
20+
const FeaturedArticlesHeading = styled(Heading)`
21+
text-align: center;
22+
margin: 0 24px 3rem 24px;
23+
`
24+
25+
const FeaturedArticlesItems = styled(GridSection)`
26+
border-bottom: 1px solid #000;
27+
padding-bottom: 110px;
28+
29+
@media only screen and (max-width: ${TABLET_LARGE_SIZE}) {
30+
padding-bottom: 124px;
31+
}
32+
33+
@media only screen and (max-width: ${MOBILE_SIZE}) {
34+
padding-bottom: 142px;
35+
}
36+
`
37+
38+
const FeaturedArticles = () => (
39+
<StyledSection>
40+
<FeaturedArticlesHeading variant={Heading.VARIANT.h2}>
41+
Featured Articles
42+
</FeaturedArticlesHeading>
43+
<FeaturedArticlesItems>
44+
<ArticlePreview
45+
media={
46+
<StaticImage
47+
name="person-looking-at-monitor.jpeg"
48+
alt="Person looking at computer monitor"
49+
/>
50+
}
51+
heading="My job at Commit is to create an incredible experience for engineers"
52+
text="One August in the 1990s, I drove across Canada, with a good friend.
53+
I have so many fond memories of the journey: our debates about how
54+
to solve the world's problems, the lengthy and..."
55+
link="https://blog.commit.dev/articles/b5i3amkjq2nz7y4apq4jsfd66hudu8"
56+
/>
57+
<ArticlePreview
58+
media={<StaticImage name="lillian-liang.jpeg" alt="Lillian Liang" />}
59+
heading="Lillian Liang, Plastiq Inc."
60+
text="Lillian Liang is a Commit engineer who joined Plastiq earlier this
61+
year. We talked to her about her journey to Commit and Plastiq..."
62+
link="https://blog.commit.dev/articles/committed-to-success-lillian-liang-plastiq-inc"
63+
/>
64+
<ArticlePreview
65+
media={
66+
<StaticImage
67+
name="monolith-diagram.png"
68+
alt="Monolith architecture"
69+
/>
70+
}
71+
heading="Streaming out the monolith"
72+
text="As a monolithic code base builds up over time, it can become harder
73+
and harder to maintain, and more difficult to extract data from,
74+
especially if..."
75+
link="https://blog.commit.dev/articles/streaming-out-the-monolith"
76+
/>
77+
</FeaturedArticlesItems>
78+
</StyledSection>
79+
)
80+
81+
export default FeaturedArticles

‎sections/how-it-works-section/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const StyledSection = styled.section`
1414
}
1515
1616
@media only screen and (max-width: ${MOBILE_SIZE}) {
17-
margin: 142px 16px 108px;
17+
margin: 142px 16px 0;
1818
}
1919
`
2020

@@ -49,6 +49,7 @@ const HowItWorksItem = styled(GridItem)`
4949

5050
const HowItWorksItemHeading = styled(Heading)`
5151
margin: 1.5rem 0 1rem;
52+
text-align: center;
5253
text-transform: uppercase;
5354
`
5455

‎sections/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,5 @@ export { default as WhatsRight } from './do-whats-right-section'
88
export { default as SpSection } from './sp-section'
99
export { default as TimelineSection } from './timeline-section'
1010
export { default as WhyCommitSection } from './why-commit-section'
11+
export { default as PlatformSection } from './platform-section'
12+
export { default as FeaturedArticles } from './featured-articles-section'

‎sections/timeline-section/index.js‎

Lines changed: 46 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,28 @@ import React from 'react'
22

33
import styled from 'styled-components'
44

5-
import { TABLET_LARGE_SIZE } from 'styles/constants'
5+
import { TABLET_LARGE_SIZE, MOBILE_SIZE } from 'styles/constants'
66

77
const timelineColour = '#8493B0'
88

9+
const StyledSection = styled.section`
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
margin: 8rem auto 0;
14+
padding: 0 20px;
15+
16+
@media only screen and (max-width: ${TABLET_LARGE_SIZE}) {
17+
margin-left: 0;
18+
margin-right: 0;
19+
}
20+
21+
@media only screen and (max-width: ${MOBILE_SIZE}) {
22+
margin-left: 16px;
23+
margin-right: 16px;
24+
}
25+
`
26+
927
const List = styled.ol`
1028
list-style-type: none;
1129
max-width: 37rem;
@@ -88,31 +106,33 @@ const BoldPink = styled.span`
88106
`
89107

90108
const TimelineSection = () => (
91-
<List>
92-
<Item>
93-
<div>
94-
<Date>2019</Date>
95-
<Label>Founded by Software Engineers</Label>
96-
</div>
97-
</Item>
98-
<Item>
99-
<div>
100-
<Date>2020</Date>
101-
<Label>
102-
We grew <BoldPink>370%</BoldPink>
103-
</Label>
104-
</div>
105-
</Item>
106-
<Item>
107-
<div>
108-
<Date>2021</Date>
109-
<Label>
110-
We aim to hire <BoldPink>500 Engineers</BoldPink> with an emphasis on{' '}
111-
<BoldPink>diversity</BoldPink>
112-
</Label>
113-
</div>
114-
</Item>
115-
</List>
109+
<StyledSection>
110+
<List>
111+
<Item>
112+
<div>
113+
<Date>2019</Date>
114+
<Label>Founded by Software Engineers</Label>
115+
</div>
116+
</Item>
117+
<Item>
118+
<div>
119+
<Date>2020</Date>
120+
<Label>
121+
We grew <BoldPink>370%</BoldPink>
122+
</Label>
123+
</div>
124+
</Item>
125+
<Item>
126+
<div>
127+
<Date>2021</Date>
128+
<Label>
129+
We aim to hire <BoldPink>500 Engineers</BoldPink> with an emphasis
130+
on <BoldPink>diversity</BoldPink>
131+
</Label>
132+
</div>
133+
</Item>
134+
</List>
135+
</StyledSection>
116136
)
117137

118138
export default TimelineSection

0 commit comments

Comments
 (0)