Skip to content

Commit 75f8328

Browse files
alexcarpenteralexcarpenter
authored
[Homepage] connect homepage to dato content (#13227)
* connect homepage to dato * Check for internal link * fix return types * adds youtube video * hook up meta tags and chunk cards * removes chunking * fix ts return * fix prop naming * fix return type
1 parent 9e848cd commit 75f8328

File tree

18 files changed

+15504
-13217
lines changed

18 files changed

+15504
-13217
lines changed

‎website/components/io-home-card/index.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import s from './style.module.css'
99

1010
interface IoHomeCardProps {
1111
variant?: 'light' | 'gray' | 'dark'
12-
products?: Array<keyof typeof productLogos>
12+
products?: Array<{
13+
name: keyof typeof productLogos
14+
}>
1315
link: {
1416
url: string
1517
type: 'inbound' | 'outbound'
@@ -30,7 +32,7 @@ function IoHomeCard({
3032
heading,
3133
description,
3234
children,
33-
}: IoHomeCardProps) {
35+
}: IoHomeCardProps): React.ReactElement {
3436
const LinkWrapper = ({ className, children }) =>
3537
link.type === 'inbound' ? (
3638
<Link href={link.url}>
@@ -62,10 +64,15 @@ function IoHomeCard({
6264
<footer className={s.footer}>
6365
{products && (
6466
<ul className={s.products}>
65-
{products.map((product, index) => {
67+
{products.map(({ name }, index) => {
68+
const key = name.toLowerCase()
69+
const version = variant === 'dark' ? 'neutral' : 'color'
6670
return (
6771
<li key={index}>
68-
<InlineSvg className={s.logo} src={productLogos[product]} />
72+
<InlineSvg
73+
className={s.logo}
74+
src={productLogos[key][version]}
75+
/>
6976
</li>
7077
)
7178
})}

‎website/components/io-home-card/product-logos.ts‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,34 @@
11
export const productLogos = {
2-
boundary: require('@hashicorp/mktg-logos/product/boundary/logomark/color.svg?include'),
3-
consul: require('@hashicorp/mktg-logos/product/consul/logomark/color.svg?include'),
4-
nomad: require('@hashicorp/mktg-logos/product/nomad/logomark/color.svg?include'),
5-
packer: require('@hashicorp/mktg-logos/product/packer/logomark/color.svg?include'),
6-
terraform: require('@hashicorp/mktg-logos/product/terraform/logomark/color.svg?include'),
7-
vagrant: require('@hashicorp/mktg-logos/product/vagrant/logomark/color.svg?include'),
8-
vault: require('@hashicorp/mktg-logos/product/vault/logomark/color.svg?include'),
9-
waypoint: require('@hashicorp/mktg-logos/product/waypoint/logomark/color.svg?include'),
2+
boundary: {
3+
color: require('@hashicorp/mktg-logos/product/boundary/logomark/color.svg?include'),
4+
neutral: require('@hashicorp/mktg-logos/product/boundary/logomark/white.svg?include'),
5+
},
6+
consul: {
7+
color: require('@hashicorp/mktg-logos/product/consul/logomark/color.svg?include'),
8+
neutral: require('@hashicorp/mktg-logos/product/consul/logomark/white.svg?include'),
9+
},
10+
nomad: {
11+
color: require('@hashicorp/mktg-logos/product/nomad/logomark/color.svg?include'),
12+
neutral: require('@hashicorp/mktg-logos/product/nomad/logomark/white.svg?include'),
13+
},
14+
packer: {
15+
color: require('@hashicorp/mktg-logos/product/packer/logomark/color.svg?include'),
16+
neutral: require('@hashicorp/mktg-logos/product/packer/logomark/white.svg?include'),
17+
},
18+
terraform: {
19+
color: require('@hashicorp/mktg-logos/product/terraform/logomark/color.svg?include'),
20+
neutral: require('@hashicorp/mktg-logos/product/terraform/logomark/white.svg?include'),
21+
},
22+
vagrant: {
23+
color: require('@hashicorp/mktg-logos/product/vagrant/logomark/color.svg?include'),
24+
neutral: require('@hashicorp/mktg-logos/product/vagrant/logomark/white.svg?include'),
25+
},
26+
vault: {
27+
color: require('@hashicorp/mktg-logos/product/vault/logomark/color.svg?include'),
28+
neutral: require('@hashicorp/mktg-logos/product/vault/logomark/white.svg?include'),
29+
},
30+
waypoint: {
31+
color: require('@hashicorp/mktg-logos/product/waypoint/logomark/color.svg?include'),
32+
neutral: require('@hashicorp/mktg-logos/product/waypoint/logomark/white.svg?include'),
33+
},
1034
}

‎website/components/io-home-case-studies/index.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
1+
import * as React from 'react'
12
import Image from 'next/image'
3+
import { isInternalLink } from 'lib/utils'
4+
import { IconExternalLink16 } from '@hashicorp/flight-icons/svg-react/external-link-16'
25
import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
36
import s from './style.module.css'
47

58
interface IoHomeCaseStudiesProps {
69
primary: Array<{
7-
thumbnail: string
8-
alt: string
10+
thumbnail: {
11+
url: string
12+
alt: string
13+
}
914
link: string
1015
heading: string
1116
}>
@@ -18,7 +23,7 @@ interface IoHomeCaseStudiesProps {
1823
export default function IoHomeCaseStudies({
1924
primary,
2025
secondary,
21-
}: IoHomeCaseStudiesProps) {
26+
}: IoHomeCaseStudiesProps): React.ReactElement {
2227
return (
2328
<div className={s.caseStudies}>
2429
<ul className={s.primary}>
@@ -28,10 +33,10 @@ export default function IoHomeCaseStudies({
2833
<a className={s.card} href={item.link}>
2934
<h3 className={s.cardHeading}>{item.heading}</h3>
3035
<Image
31-
src={item.thumbnail}
36+
src={item.thumbnail.url}
3237
layout="fill"
3338
objectFit="cover"
34-
alt={item.alt}
39+
alt={item.thumbnail.alt}
3540
/>
3641
</a>
3742
</li>
@@ -46,7 +51,11 @@ export default function IoHomeCaseStudies({
4651
<a className={s.link} href={item.link}>
4752
<span className={s.linkInner}>
4853
<h3 className={s.linkHeading}>{item.heading}</h3>
49-
<IconArrowRight16 />
54+
{isInternalLink(item.link) ? (
55+
<IconArrowRight16 />
56+
) : (
57+
<IconExternalLink16 />
58+
)}
5059
</span>
5160
</a>
5261
</li>

‎website/components/io-home-dialog/style.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
color: var(--white);
4444
right: 24px;
4545
top: 24px;
46+
z-index: 1;
4647

4748
@media (min-width: 768px) {
4849
right: 48px;

‎website/components/io-home-feature/index.tsx‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
1+
import * as React from 'react'
2+
import Image from 'next/image'
13
import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
24
import s from './style.module.css'
35

46
interface IoHomeFeatureProps {
57
link: string
6-
// thumnail: string
8+
image: {
9+
url: string
10+
alt: string
11+
}
712
heading: string
813
description: string
914
}
1015

1116
export default function IoHomeFeature({
1217
link,
13-
// thumbnail,
18+
image,
1419
heading,
1520
description,
16-
}: IoHomeFeatureProps) {
21+
}: IoHomeFeatureProps): React.ReactElement {
1722
return (
1823
<a href={link} className={s.feature}>
1924
<div className={s.featureMedia}>
20-
{/* <Image src={thumbnail} width={400} height={200} alt="" /> */}
25+
<Image
26+
src={image.url}
27+
width={400}
28+
height={200}
29+
layout="responsive"
30+
alt={image.alt}
31+
/>
2132
</div>
2233
<div className={s.featureContent}>
2334
<h3 className={s.featureHeading}>{heading}</h3>

‎website/components/io-home-feature/style.module.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@
2323

2424
.featureMedia {
2525
flex-shrink: 0;
26-
background-color: var(--gray-6);
27-
aspect-ratio: 4 / 2;
26+
display: flex;
2827
width: 100%;
2928
border-radius: 6px;
29+
overflow: hidden;
30+
border: 1px solid var(--gray-5);
3031

3132
@media (--medium-up) {
3233
width: 300px;
@@ -35,6 +36,10 @@
3536
@media (--large) {
3637
width: 400px;
3738
}
39+
40+
& > * {
41+
width: 100%;
42+
}
3843
}
3944

4045
.featureHeading {

‎website/components/io-home-hero/index.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface IoHomeHeroProps {
99
description: string
1010
ctas: Array<{
1111
title: string
12-
url: string
12+
link: string
1313
}>
1414
cards: Array<IoHomeHeroCardProps>
1515
}
@@ -43,7 +43,7 @@ export default function IoHomeHero({
4343
<Button
4444
key={index}
4545
title={cta.title}
46-
url={cta.url}
46+
url={cta.link}
4747
linkType="inbound"
4848
theme={{
4949
brand: 'neutral',
@@ -68,7 +68,7 @@ export default function IoHomeHero({
6868
cta={{
6969
brand: index === 0 ? 'neutral' : brand,
7070
title: card.cta.title,
71-
url: card.cta.url,
71+
link: card.cta.link,
7272
}}
7373
subText={card.subText}
7474
/>
@@ -87,7 +87,7 @@ interface IoHomeHeroCardProps {
8787
description: string
8888
cta: {
8989
title: string
90-
url: string
90+
link: string
9191
brand?: 'neutral' | 'vault' | 'consul'
9292
}
9393
subText: string
@@ -99,7 +99,7 @@ function IoHomeHeroCard({
9999
description,
100100
cta,
101101
subText,
102-
}: IoHomeHeroCardProps) {
102+
}: IoHomeHeroCardProps): React.ReactElement {
103103
return (
104104
<article
105105
className={s.card}
@@ -113,7 +113,7 @@ function IoHomeHeroCard({
113113
<p className={s.cardDescription}>{description}</p>
114114
<Button
115115
title={cta.title}
116-
url={cta.url}
116+
url={cta.link}
117117
theme={{
118118
variant: 'primary',
119119
brand: cta.brand,

‎website/components/io-home-pre-footer/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function IoHomePreFooter({
3131
link={cta.link}
3232
heading={cta.heading}
3333
description={cta.description}
34-
label={cta.label}
34+
cta={cta.cta}
3535
/>
3636
)
3737
})}
@@ -46,16 +46,16 @@ interface IoHomePreFooterCard {
4646
link: string
4747
heading: string
4848
description: string
49-
label: string
49+
cta: string
5050
}
5151

5252
function IoHomePreFooterCard({
5353
brand,
5454
link,
5555
heading,
5656
description,
57-
label,
58-
}: IoHomePreFooterCard) {
57+
cta,
58+
}: IoHomePreFooterCard): React.ReactElement {
5959
return (
6060
<a
6161
href={link}
@@ -70,7 +70,7 @@ function IoHomePreFooterCard({
7070
<h3 className={s.cardHeading}>{heading}</h3>
7171
<p className={s.cardDescription}>{description}</p>
7272
<span className={s.cardCta}>
73-
{label} <IconArrowRight16 />
73+
{cta} <IconArrowRight16 />
7474
</span>
7575
</a>
7676
)

‎website/components/io-home-video-callout/index.tsx‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,25 @@ import IoHomeDialog from 'components/io-home-dialog'
55
import PlayIcon from './play-icon'
66
import s from './style.module.css'
77

8+
interface IoHomeVideoCalloutProps {
9+
youtubeId: string
10+
thumbnail: string
11+
heading: string
12+
description: string
13+
person: {
14+
avatar: string
15+
name: string
16+
description: string
17+
}
18+
}
19+
820
export default function IoHomeVideoCallout({
21+
youtubeId,
922
thumbnail,
1023
heading,
1124
description,
1225
person,
13-
}) {
26+
}: IoHomeVideoCalloutProps): React.ReactElement {
1427
const [showDialog, setShowDialog] = React.useState(false)
1528
const showVideo = () => setShowDialog(true)
1629
const hideVideo = () => setShowDialog(false)
@@ -20,7 +33,7 @@ export default function IoHomeVideoCallout({
2033
<button className={s.thumbnail} onClick={showVideo}>
2134
<VisuallyHidden>Play video</VisuallyHidden>
2235
<PlayIcon />
23-
<Image src={thumbnail} layout="fill" objectFit="cover" />
36+
<Image src={thumbnail} layout="fill" objectFit="cover" alt="" />
2437
</button>
2538
<figcaption className={s.content}>
2639
<h3 className={s.heading}>{heading}</h3>
@@ -29,7 +42,7 @@ export default function IoHomeVideoCallout({
2942
<div className={s.person}>
3043
<div className={s.personThumbnail}>
3144
<Image
32-
src={person.thumbnail}
45+
src={person.avatar}
3346
width={52}
3447
height={52}
3548
alt={`${person.name} avatar`}
@@ -48,7 +61,16 @@ export default function IoHomeVideoCallout({
4861
onDismiss={hideVideo}
4962
label={`${heading} video}`}
5063
>
51-
<div className={s.video}></div>
64+
<div className={s.video}>
65+
<iframe
66+
width="560"
67+
height="315"
68+
src={`https://www.youtube.com/embed/${youtubeId}`}
69+
title="YouTube video player"
70+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
71+
frameBorder="0"
72+
></iframe>
73+
</div>
5274
</IoHomeDialog>
5375
</>
5476
)

‎website/components/io-home-video-callout/style.module.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,15 @@
115115
}
116116

117117
.video {
118+
position: relative;
118119
background-color: var(--gray-2);
119120
aspect-ratio: 16 / 9;
121+
122+
& > * {
123+
position: absolute;
124+
top: 0;
125+
left: 0;
126+
width: 100%;
127+
height: 100%;
128+
}
120129
}

0 commit comments

Comments
 (0)