[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

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

@@ -9,7 +9,9 @@ import s from './style.module.css'
 
 interface IoHomeCardProps {
   variant?: 'light' | 'gray' | 'dark'
-  products?: Array<keyof typeof productLogos>
+  products?: Array<{
+    name: keyof typeof productLogos
+  }>
   link: {
     url: string
     type: 'inbound' | 'outbound'
@@ -30,7 +32,7 @@ function IoHomeCard({
   heading,
   description,
   children,
-}: IoHomeCardProps) {
+}: IoHomeCardProps): React.ReactElement {
   const LinkWrapper = ({ className, children }) =>
     link.type === 'inbound' ? (
       <Link href={link.url}>
@@ -62,10 +64,15 @@ function IoHomeCard({
         <footer className={s.footer}>
           {products && (
             <ul className={s.products}>
-              {products.map((product, index) => {
+              {products.map(({ name }, index) => {
+                const key = name.toLowerCase()
+                const version = variant === 'dark' ? 'neutral' : 'color'
                 return (
                   <li key={index}>
-                    <InlineSvg className={s.logo} src={productLogos[product]} />
+                    <InlineSvg
+                      className={s.logo}
+                      src={productLogos[key][version]}
+                    />
                   </li>
                 )
               })}

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

@@ -1,10 +1,34 @@
 export const productLogos = {
-  boundary: require('@hashicorp/mktg-logos/product/boundary/logomark/color.svg?include'),
-  consul: require('@hashicorp/mktg-logos/product/consul/logomark/color.svg?include'),
-  nomad: require('@hashicorp/mktg-logos/product/nomad/logomark/color.svg?include'),
-  packer: require('@hashicorp/mktg-logos/product/packer/logomark/color.svg?include'),
-  terraform: require('@hashicorp/mktg-logos/product/terraform/logomark/color.svg?include'),
-  vagrant: require('@hashicorp/mktg-logos/product/vagrant/logomark/color.svg?include'),
-  vault: require('@hashicorp/mktg-logos/product/vault/logomark/color.svg?include'),
-  waypoint: require('@hashicorp/mktg-logos/product/waypoint/logomark/color.svg?include'),
+  boundary: {
+    color: require('@hashicorp/mktg-logos/product/boundary/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/boundary/logomark/white.svg?include'),
+  },
+  consul: {
+    color: require('@hashicorp/mktg-logos/product/consul/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/consul/logomark/white.svg?include'),
+  },
+  nomad: {
+    color: require('@hashicorp/mktg-logos/product/nomad/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/nomad/logomark/white.svg?include'),
+  },
+  packer: {
+    color: require('@hashicorp/mktg-logos/product/packer/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/packer/logomark/white.svg?include'),
+  },
+  terraform: {
+    color: require('@hashicorp/mktg-logos/product/terraform/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/terraform/logomark/white.svg?include'),
+  },
+  vagrant: {
+    color: require('@hashicorp/mktg-logos/product/vagrant/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/vagrant/logomark/white.svg?include'),
+  },
+  vault: {
+    color: require('@hashicorp/mktg-logos/product/vault/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/vault/logomark/white.svg?include'),
+  },
+  waypoint: {
+    color: require('@hashicorp/mktg-logos/product/waypoint/logomark/color.svg?include'),
+    neutral: require('@hashicorp/mktg-logos/product/waypoint/logomark/white.svg?include'),
+  },
 }

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

@@ -1,11 +1,16 @@
+import * as React from 'react'
 import Image from 'next/image'
+import { isInternalLink } from 'lib/utils'
+import { IconExternalLink16 } from '@hashicorp/flight-icons/svg-react/external-link-16'
 import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
 import s from './style.module.css'
 
 interface IoHomeCaseStudiesProps {
   primary: Array<{
-    thumbnail: string
-    alt: string
+    thumbnail: {
+      url: string
+      alt: string
+    }
     link: string
     heading: string
   }>
@@ -18,7 +23,7 @@ interface IoHomeCaseStudiesProps {
 export default function IoHomeCaseStudies({
   primary,
   secondary,
-}: IoHomeCaseStudiesProps) {
+}: IoHomeCaseStudiesProps): React.ReactElement {
   return (
     <div className={s.caseStudies}>
       <ul className={s.primary}>
@@ -28,10 +33,10 @@ export default function IoHomeCaseStudies({
               <a className={s.card} href={item.link}>
                 <h3 className={s.cardHeading}>{item.heading}</h3>
                 <Image
-                  src={item.thumbnail}
+                  src={item.thumbnail.url}
                   layout="fill"
                   objectFit="cover"
-                  alt={item.alt}
+                  alt={item.thumbnail.alt}
                 />
               </a>
             </li>
@@ -46,7 +51,11 @@ export default function IoHomeCaseStudies({
               <a className={s.link} href={item.link}>
                 <span className={s.linkInner}>
                   <h3 className={s.linkHeading}>{item.heading}</h3>
-                  <IconArrowRight16 />
+                  {isInternalLink(item.link) ? (
+                    <IconArrowRight16 />
+                  ) : (
+                    <IconExternalLink16 />
+                  )}
                 </span>
               </a>
             </li>

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

@@ -43,6 +43,7 @@
   color: var(--white);
   right: 24px;
   top: 24px;
+  z-index: 1;
 
   @media (min-width: 768px) {
     right: 48px;

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

@@ -1,23 +1,34 @@
+import * as React from 'react'
+import Image from 'next/image'
 import { IconArrowRight16 } from '@hashicorp/flight-icons/svg-react/arrow-right-16'
 import s from './style.module.css'
 
 interface IoHomeFeatureProps {
   link: string
-  // thumnail: string
+  image: {
+    url: string
+    alt: string
+  }
   heading: string
   description: string
 }
 
 export default function IoHomeFeature({
   link,
-  // thumbnail,
+  image,
   heading,
   description,
-}: IoHomeFeatureProps) {
+}: IoHomeFeatureProps): React.ReactElement {
   return (
     <a href={link} className={s.feature}>
       <div className={s.featureMedia}>
-        {/* <Image src={thumbnail} width={400} height={200} alt="" /> */}
+        <Image
+          src={image.url}
+          width={400}
+          height={200}
+          layout="responsive"
+          alt={image.alt}
+        />
       </div>
       <div className={s.featureContent}>
         <h3 className={s.featureHeading}>{heading}</h3>

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

@@ -23,10 +23,11 @@
 
 .featureMedia {
   flex-shrink: 0;
-  background-color: var(--gray-6);
-  aspect-ratio: 4 / 2;
+  display: flex;
   width: 100%;
   border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--gray-5);
 
   @media (--medium-up) {
     width: 300px;
@@ -35,6 +36,10 @@
   @media (--large) {
     width: 400px;
   }
+
+  & > * {
+    width: 100%;
+  }
 }
 
 .featureHeading {

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

@@ -9,7 +9,7 @@ interface IoHomeHeroProps {
   description: string
   ctas: Array<{
     title: string
-    url: string
+    link: string
   }>
   cards: Array<IoHomeHeroCardProps>
 }
@@ -43,7 +43,7 @@ export default function IoHomeHero({
                   <Button
                     key={index}
                     title={cta.title}
-                    url={cta.url}
+                    url={cta.link}
                     linkType="inbound"
                     theme={{
                       brand: 'neutral',
@@ -68,7 +68,7 @@ export default function IoHomeHero({
                   cta={{
                     brand: index === 0 ? 'neutral' : brand,
                     title: card.cta.title,
-                    url: card.cta.url,
+                    link: card.cta.link,
                   }}
                   subText={card.subText}
                 />
@@ -87,7 +87,7 @@ interface IoHomeHeroCardProps {
   description: string
   cta: {
     title: string
-    url: string
+    link: string
     brand?: 'neutral' | 'vault' | 'consul'
   }
   subText: string
@@ -99,7 +99,7 @@ function IoHomeHeroCard({
   description,
   cta,
   subText,
-}: IoHomeHeroCardProps) {
+}: IoHomeHeroCardProps): React.ReactElement {
   return (
     <article
       className={s.card}
@@ -113,7 +113,7 @@ function IoHomeHeroCard({
       <p className={s.cardDescription}>{description}</p>
       <Button
         title={cta.title}
-        url={cta.url}
+        url={cta.link}
         theme={{
           variant: 'primary',
           brand: cta.brand,

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

@@ -31,7 +31,7 @@ export default function IoHomePreFooter({
                 link={cta.link}
                 heading={cta.heading}
                 description={cta.description}
-                label={cta.label}
+                cta={cta.cta}
               />
             )
           })}
@@ -46,16 +46,16 @@ interface IoHomePreFooterCard {
   link: string
   heading: string
   description: string
-  label: string
+  cta: string
 }
 
 function IoHomePreFooterCard({
   brand,
   link,
   heading,
   description,
-  label,
-}: IoHomePreFooterCard) {
+  cta,
+}: IoHomePreFooterCard): React.ReactElement {
   return (
     <a
       href={link}
@@ -70,7 +70,7 @@ function IoHomePreFooterCard({
       <h3 className={s.cardHeading}>{heading}</h3>
       <p className={s.cardDescription}>{description}</p>
       <span className={s.cardCta}>
-        {label} <IconArrowRight16 />
+        {cta} <IconArrowRight16 />
       </span>
     </a>
   )

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

@@ -5,12 +5,25 @@ import IoHomeDialog from 'components/io-home-dialog'
 import PlayIcon from './play-icon'
 import s from './style.module.css'
 
+interface IoHomeVideoCalloutProps {
+  youtubeId: string
+  thumbnail: string
+  heading: string
+  description: string
+  person: {
+    avatar: string
+    name: string
+    description: string
+  }
+}
+
 export default function IoHomeVideoCallout({
+  youtubeId,
   thumbnail,
   heading,
   description,
   person,
-}) {
+}: IoHomeVideoCalloutProps): React.ReactElement {
   const [showDialog, setShowDialog] = React.useState(false)
   const showVideo = () => setShowDialog(true)
   const hideVideo = () => setShowDialog(false)
@@ -20,7 +33,7 @@ export default function IoHomeVideoCallout({
         <button className={s.thumbnail} onClick={showVideo}>
           <VisuallyHidden>Play video</VisuallyHidden>
           <PlayIcon />
-          <Image src={thumbnail} layout="fill" objectFit="cover" />
+          <Image src={thumbnail} layout="fill" objectFit="cover" alt="" />
         </button>
         <figcaption className={s.content}>
           <h3 className={s.heading}>{heading}</h3>
@@ -29,7 +42,7 @@ export default function IoHomeVideoCallout({
             <div className={s.person}>
               <div className={s.personThumbnail}>
                 <Image
-                  src={person.thumbnail}
+                  src={person.avatar}
                   width={52}
                   height={52}
                   alt={`${person.name} avatar`}
@@ -48,7 +61,16 @@ export default function IoHomeVideoCallout({
         onDismiss={hideVideo}
         label={`${heading} video}`}
       >
-        <div className={s.video}></div>
+        <div className={s.video}>
+          <iframe
+            width="560"
+            height="315"
+            src={`https://www.youtube.com/embed/${youtubeId}`}
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            frameBorder="0"
+          ></iframe>
+        </div>
       </IoHomeDialog>
     </>
   )

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

@@ -115,6 +115,15 @@
 }
 
 .video {
+  position: relative;
   background-color: var(--gray-2);
   aspect-ratio: 16 / 9;
+
+  & > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 }

website/lib/utils.ts

@@ -0,0 +1,18 @@
+export const isInternalLink = (link: string): boolean => {
+  if (
+    link.startsWith('/') ||
+    link.startsWith('#') ||
+    link.startsWith('https://vaultproject.io') ||
+    link.startsWith('https://www.vaultproject.io')
+  ) {
+    return true
+  }
+  return false
+}
+
+export const chunk = (arr, chunkSize = 1, cache = []) => {
+  const tmp = [...arr]
+  if (chunkSize <= 0) return cache
+  while (tmp.length) cache.push(tmp.splice(0, chunkSize))
+  return cache
+}