Change product landing page introLinks to a general map of link titles to links (#26360)

* Add cta button to frontmatter and context

* Add cta to Page

* Render cta button in product landing hero

* Handle external links

* Add simple unit test for cta link

* Address feedback

Co-authored-by: Peter Bengtsson <mail@peterbe.com>

* Actually push condition update

* Show it's an external link

* Refactor FullLink so we use Link once

Co-authored-by: Peter Bengtsson <mail@peterbe.com>

* Custom link can also be null

* Rename 'cta' to 'custom' and make it the last introLink

* Update tests with 'cta' to 'custom' change

* Filter once

* Revert "Filter once"

This reverts commit a3f9a8a06b505d77fed47ca96a66c187c86c3c91.

* Update introLinks to a map of titles and URLs

* No more custom introLink in LandingHero

* Simplify introLinks processing

* introLinks can also be null

Co-authored-by: Peter Bengtsson <mail@peterbe.com>

* more concise

Co-authored-by: Peter Bengtsson <mail@peterbe.com>

* No longer necessary with the a plain introLinks map

Co-authored-by: Peter Bengtsson <mail@peterbe.com>

* '.entries()` is simpler

Co-authored-by: Peter Bengtsson <mail@peterbe.com>

* 'link' could be false depending on what version you're on

* Update test for new introLinks

Co-authored-by: Peter Bengtsson <mail@peterbe.com>

components/context/ProductLandingContext.tsx

@@ -38,11 +38,7 @@ export type ProductLandingContextT = {
   intro: string
   beta_product: boolean
   product: Product
-  introLinks: {
-    quickstart?: string
-    reference?: string
-    overview?: string
-  } | null
+  introLinks: Record<string, string> | null
   product_video?: string
   featuredLinks: Record<string, Array<FeaturedLink>>
   productCodeExamples: Array<CodeExample>
@@ -128,13 +124,7 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       })
     ),
 
-    introLinks: page.introLinks
-      ? {
-          quickstart: page.introLinks.quickstart,
-          reference: page.introLinks.reference,
-          overview: page.introLinks.overview,
-        }
-      : null,
+    introLinks: page.introLinks || null,
 
     featuredLinks: getFeaturedLinksFromReq(req),
 

components/landing/LandingHero.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
 import cx from 'classnames'
 import { useRouter } from 'next/router'
-import { useMainContext } from 'components/context/MainContext'
+import { LinkExternalIcon } from '@primer/octicons-react'
 
+import { useMainContext } from 'components/context/MainContext'
 import { Link } from 'components/Link'
 import { useProductLandingContext } from 'components/context/ProductLandingContext'
 import { useTranslation } from 'components/hooks/useTranslation'
@@ -46,7 +47,7 @@ export const LandingHero = () => {
                   href={link}
                   className={cx('btn btn-large f4 mt-3 mr-3 ', i === 0 && 'btn-primary')}
                 >
-                  {t(key)}
+                  {t(key) || key}
                 </FullLink>
               )
             })}
@@ -72,7 +73,8 @@ export const LandingHero = () => {
   )
 }
 
-// Fully Qualified Link - it includes the version and locale in the path
+// Fully Qualified Link - it includes the version and locale in the path if
+// the href is not an external link.
 type Props = {
   href: string
   children: React.ReactNode
@@ -81,13 +83,24 @@ type Props = {
 export const FullLink = ({ href, children, className }: Props) => {
   const router = useRouter()
   const { currentVersion } = useVersion()
-  const locale = router.locale || 'en'
-  const fullyQualifiedHref = `/${locale}${
-    currentVersion !== 'free-pro-team@latest' ? `/${currentVersion}` : ''
-  }${href}`
+
+  const isExternal = href.startsWith('https')
+  let linkHref = href
+  if (!isExternal) {
+    const locale = router.locale || 'en'
+    linkHref = `/${locale}${
+      currentVersion !== 'free-pro-team@latest' ? `/${currentVersion}` : ''
+    }${href}`
+  }
+
   return (
-    <Link href={fullyQualifiedHref} className={className}>
-      {children}
+    <Link href={linkHref} className={className}>
+      {children}{' '}
+      {isExternal && (
+        <span className="ml-1">
+          <LinkExternalIcon size="small" />
+        </span>
+      )}
     </Link>
   )
 }