Skip to content

Commit 925e4ab

Browse files
ngnijlandngnijland
authored
Add Team insights section to homepage (#649)
* refactor: feature into a component * feat: add team insights feature to homepage * feat: add team insights section
1 parent 5dd97c0 commit 925e4ab

File tree

9 files changed

+265
-167
lines changed

9 files changed

+265
-167
lines changed

‎docs/public/teams-line.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎docs/src/assets/features/build-insights.png‎

2.34 MB
Loading

‎docs/src/components/Feature.astro‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
---
2+
import { Image } from "astro:assets";
3+
import { marked } from "marked";
4+
import type { CollectionEntry } from "astro:content";
5+
6+
interface Props {
7+
data: CollectionEntry<"feature">["data"];
8+
}
9+
10+
const {
11+
data: { asset, tagLine, name },
12+
} = Astro.props;
13+
const parsedCaption = asset.caption
14+
? marked.parseInline(asset.caption)
15+
: undefined;
16+
---
17+
18+
<style>
19+
article {
20+
row-gap: 2rem;
21+
}
22+
23+
.figure {
24+
margin: 0;
25+
26+
@media (min-width: 800px) {
27+
grid-column: var(--image-column);
28+
}
29+
}
30+
31+
.figure--before-content {
32+
grid-row: 1;
33+
}
34+
35+
figcaption {
36+
margin-top: 1rem;
37+
38+
text-align: center;
39+
}
40+
41+
.image {
42+
width: 100%;
43+
height: auto;
44+
45+
border-radius: 1.25rem;
46+
}
47+
48+
.feature-content {
49+
@media (min-width: 800px) {
50+
grid-column: var(--content-column);
51+
align-self: center;
52+
}
53+
}
54+
55+
.feature-content__content {
56+
& :global(strong) {
57+
font-weight: 400;
58+
}
59+
60+
& :global(p) {
61+
margin: 0 0 1rem;
62+
}
63+
}
64+
65+
.feature-content__content--big {
66+
& :global(p) {
67+
margin-top: 2rem;
68+
69+
font-size: 1.5rem;
70+
font-weight: 600;
71+
color: var(--text-color-light);
72+
line-height: 1.33341;
73+
letter-spacing: -0.003em;
74+
}
75+
}
76+
77+
.title {
78+
margin: 0 0 0.5rem;
79+
80+
font-size: 2rem;
81+
font-weight: 500;
82+
line-height: 1.2;
83+
}
84+
85+
.title--big {
86+
font-size: 3rem;
87+
line-height: 1.05556;
88+
font-weight: 600;
89+
letter-spacing: -0.006em;
90+
91+
@media (min-width: 800px) {
92+
font-size: 4.5rem;
93+
}
94+
}
95+
96+
.title--dim {
97+
color: var(--text-color);
98+
}
99+
</style>
100+
101+
<article class="grid">
102+
<div
103+
class="feature-content"
104+
style={{
105+
"--content-column":
106+
asset.alignment === "full-width"
107+
? "2 / -2"
108+
: `${asset.alignment === "left" ? `span ${12 - asset.columnSpan}` : 1} / ${asset.alignment === "left" ? -1 : `span ${12 - asset.columnSpan}`}`,
109+
}}
110+
>
111+
<h3
112+
class:list={[
113+
"title",
114+
{
115+
"title--dim": !!tagLine,
116+
"title--big": asset.alignment === "full-width",
117+
},
118+
]}
119+
>
120+
{name}
121+
</h3>
122+
{tagLine ? <h4 class:list={["title", "title--big"]}>{tagLine}</h4> : null}
123+
<div
124+
class:list={[
125+
"feature-content__content",
126+
{
127+
"feature-content__content--big": asset.alignment === "full-width",
128+
},
129+
]}
130+
>
131+
<slot />
132+
</div>
133+
</div>
134+
<figure
135+
class:list={[
136+
"figure",
137+
{ "figure--before-content": asset.alignment === "left" },
138+
]}
139+
style={{
140+
"--image-column":
141+
asset.alignment === "full-width"
142+
? "1 / -1"
143+
: `${asset.alignment === "left" ? 1 : `span ${asset.columnSpan}`} / ${asset.alignment === "left" ? `span ${asset.columnSpan}` : -1}`,
144+
}}
145+
>
146+
{
147+
asset.type === "image" ? (
148+
<Image
149+
src={asset.path}
150+
alt={asset.alt}
151+
class="image"
152+
widths={[640, 800, 1200, 1500]}
153+
sizes="(max-width: 375px) 20rem, ((min-width: 376px) and (max-width: 799px)) 40rem, ((min-width: 800px) and (max-width: 1050px)) 37.5rem, 47.5rem"
154+
/>
155+
) : (
156+
<video
157+
class="image"
158+
src={asset.path}
159+
aria-label={asset.alt}
160+
autoplay
161+
muted
162+
playsinline
163+
loop
164+
/>
165+
)
166+
}
167+
{parsedCaption ? <figcaption set:html={parsedCaption} /> : null}
168+
</figure>
169+
</article>

‎docs/src/components/Features.astro‎

Lines changed: 9 additions & 161 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import { getCollection, render } from "astro:content";
3-
import { Image } from "astro:assets";
4-
import { marked } from "marked";
3+
4+
import Feature from "./Feature.astro";
55
66
const rawFeatures = await getCollection("feature");
77
const features = await Promise.all(
@@ -12,23 +12,13 @@ const features = await Promise.all(
1212
return {
1313
...feature,
1414
Content,
15-
data: {
16-
...feature.data,
17-
asset: {
18-
...feature.data.asset,
19-
caption: feature.data.asset.caption
20-
? marked.parseInline(feature.data.asset.caption)
21-
: undefined,
22-
},
23-
},
2415
};
2516
}),
2617
);
2718
---
2819

2920
<style>
30-
article {
31-
row-gap: 2rem;
21+
.feature-wrapper {
3222
margin-top: 4rem;
3323
margin-bottom: 4rem;
3424

@@ -37,158 +27,16 @@ const features = await Promise.all(
3727
margin-bottom: 8rem;
3828
}
3929
}
40-
41-
.figure {
42-
margin: 0;
43-
44-
@media (min-width: 800px) {
45-
grid-column: var(--image-column);
46-
}
47-
}
48-
49-
.figure--before-content {
50-
grid-row: 1;
51-
}
52-
53-
figcaption {
54-
margin-top: 1rem;
55-
56-
text-align: center;
57-
}
58-
59-
.image {
60-
width: 100%;
61-
height: auto;
62-
63-
border-radius: 1.25rem;
64-
}
65-
66-
.feature-content {
67-
@media (min-width: 800px) {
68-
grid-column: var(--content-column);
69-
align-self: center;
70-
}
71-
}
72-
73-
.feature-content__content {
74-
& :global(strong) {
75-
font-weight: 400;
76-
}
77-
78-
& :global(p) {
79-
margin: 0 0 1rem;
80-
}
81-
}
82-
83-
.feature-content__content--big {
84-
& :global(p) {
85-
margin-top: 2rem;
86-
87-
font-size: 1.5rem;
88-
font-weight: 600;
89-
color: var(--text-color-light);
90-
line-height: 1.33341;
91-
letter-spacing: -0.003em;
92-
}
93-
}
94-
95-
.title {
96-
margin: 0 0 0.5rem;
97-
98-
font-size: 2rem;
99-
font-weight: 500;
100-
line-height: 1.2;
101-
}
102-
103-
.title--big {
104-
font-size: 3rem;
105-
line-height: 1.05556;
106-
font-weight: 600;
107-
letter-spacing: -0.006em;
108-
109-
@media (min-width: 800px) {
110-
font-size: 4.5rem;
111-
}
112-
}
113-
114-
.title--dim {
115-
color: var(--text-color);
116-
}
11730
</style>
11831

11932
<section aria-label="RocketSim features">
12033
{
121-
features.map(({ data: { asset, name, tagLine }, Content }) => (
122-
<article class="grid">
123-
<div
124-
class="feature-content"
125-
style={{
126-
"--content-column":
127-
asset.alignment === "full-width"
128-
? "2 / -2"
129-
: `${asset.alignment === "left" ? `span ${12 - asset.columnSpan}` : 1} / ${asset.alignment === "left" ? -1 : `span ${12 - asset.columnSpan}`}`,
130-
}}
131-
>
132-
<h3
133-
class:list={[
134-
"title",
135-
{
136-
"title--dim": !!tagLine,
137-
"title--big": asset.alignment === "full-width",
138-
},
139-
]}
140-
>
141-
{name}
142-
</h3>
143-
{tagLine ? (
144-
<h4 class:list={["title", "title--big"]}>{tagLine}</h4>
145-
) : null}
146-
<div
147-
class:list={[
148-
"feature-content__content",
149-
{
150-
"feature-content__content--big":
151-
asset.alignment === "full-width",
152-
},
153-
]}
154-
>
155-
<Content />
156-
</div>
157-
</div>
158-
<figure
159-
class:list={[
160-
"figure",
161-
{ "figure--before-content": asset.alignment === "left" },
162-
]}
163-
style={{
164-
"--image-column":
165-
asset.alignment === "full-width"
166-
? "1 / -1"
167-
: `${asset.alignment === "left" ? 1 : `span ${asset.columnSpan}`} / ${asset.alignment === "left" ? `span ${asset.columnSpan}` : -1}`,
168-
}}
169-
>
170-
{asset.type === "image" ? (
171-
<Image
172-
src={asset.path}
173-
alt={asset.alt}
174-
class="image"
175-
widths={[640, 800, 1200, 1500]}
176-
sizes="(max-width: 375px) 20rem, ((min-width: 376px) and (max-width: 799px)) 40rem, ((min-width: 800px) and (max-width: 1050px)) 37.5rem, 47.5rem"
177-
/>
178-
) : (
179-
<video
180-
class="image"
181-
src={asset.path}
182-
aria-label={asset.alt}
183-
autoplay
184-
muted
185-
playsinline
186-
loop
187-
/>
188-
)}
189-
{asset.caption ? <figcaption set:html={asset.caption} /> : null}
190-
</figure>
191-
</article>
34+
features.map(({ data, Content }) => (
35+
<div class="feature-wrapper">
36+
<Feature data={data}>
37+
<Content />
38+
</Feature>
39+
</div>
19240
))
19341
}
19442
</section>

‎docs/src/components/SectionHeader.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
interface Props {
33
title: string;
44
subtitle?: string;
5-
text: string;
5+
text?: string;
66
}
77
88
const { title, subtitle, text } = Astro.props;
@@ -48,7 +48,7 @@ const { title, subtitle, text } = Astro.props;
4848
<h3 class:list={["title", { "title--dim": !!subtitle }]}>
4949
{title}
5050
</h3>
51-
{!!subtitle ? <h4 class:list={["title"]}>{subtitle}</h4> : null}
52-
<p>{text}</p>
51+
{subtitle ? <h4 class:list={["title"]}>{subtitle}</h4> : null}
52+
{text ? <p>{text}</p> : null}
5353
</div>
5454
</header>

0 commit comments

Comments
 (0)