From 81a57bd21243e38b42fe75ac280da87ad63156ab Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Mon, 7 Jun 2021 15:41:56 -0700
Subject: [PATCH 01/15] starting point set

---
 components/Breadcrumbs.tsx                    | 40 +++++++++++++------
 .../context/ProductSubLandingContext.tsx      | 24 +++++++++++
 components/landing/ProductSubLanding.tsx      | 23 +++++++++++
 pages/[versionId]/[productId]/index.tsx       | 16 +++++++-
 4 files changed, 88 insertions(+), 15 deletions(-)
 create mode 100644 components/context/ProductSubLandingContext.tsx
 create mode 100644 components/landing/ProductSubLanding.tsx

diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
index 31cd481c6b..2393efe687 100644
--- a/components/Breadcrumbs.tsx
+++ b/components/Breadcrumbs.tsx
@@ -27,19 +27,33 @@ export const Breadcrumbs = (props: Props) => {
           <span key={title} title={title}>
             {breadcrumb.title}
           </span>
-        ) : (
-          <Link
-            key={title}
-            href={breadcrumb.href}
-            title={title}
-            className={cx(
-              'd-inline-block',
-              pathWithLocale === breadcrumb.href && 'color-text-tertiary'
-            )}
-          >
-            {breadcrumb.title}
-          </Link>
-        )
+          ) : pathWithLocale.includes('/guides') ? (
+            <span className='text-mono color-text-secondary text-uppercase'>
+              <Link
+                key={title}
+                href={breadcrumb.href}
+                title={title}
+                className={cx(
+                  'd-inline-block',
+                  pathWithLocale === breadcrumb.href && 'color-text-tertiary'
+                )}
+              >
+                {breadcrumb.title}
+              </Link>
+            </span>
+          ) : (
+            <Link
+              key={title}
+              href={breadcrumb.href}
+              title={title}
+              className={cx(
+                'd-inline-block',
+                pathWithLocale === breadcrumb.href && 'color-text-tertiary'
+              )}
+            >
+              {breadcrumb.title}
+            </Link>
+          )
       })}
     </nav>
   )
diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
new file mode 100644
index 0000000000..f24883e5c1
--- /dev/null
+++ b/components/context/ProductSubLandingContext.tsx
@@ -0,0 +1,24 @@
+import { createContext, useContext } from 'react'
+import pick from 'lodash/pick'
+
+export type ProductSubLandingContextT = {
+}
+
+export const ProductSubLandingContext = createContext<ProductSubLandingContextT | null>(null)
+
+export const useProductSubLandingContext = (): ProductSubLandingContextT => {
+  const context = useContext(ProductSubLandingContext)
+
+  if (!context) {
+    throw new Error(
+      '"useProductSubLandingContext" may only be used inside "ProductSubLandingContext.Provider"'
+    )
+  }
+
+  return context
+}
+
+export const getProductSubLandingContextFromRequest = (req: any): ProductSubLandingContextT => {
+  const page = req.context.page
+  return {}
+}
diff --git a/components/landing/ProductSubLanding.tsx b/components/landing/ProductSubLanding.tsx
new file mode 100644
index 0000000000..b94d7185e2
--- /dev/null
+++ b/components/landing/ProductSubLanding.tsx
@@ -0,0 +1,23 @@
+import { DefaultLayout } from 'components/DefaultLayout'
+import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+import { useTranslation } from 'components/hooks/useTranslation'
+import cx from 'classnames'
+
+import React from 'react'
+import { GuideCards } from './GuideCards'
+import { LandingSection } from './LandingSection'
+import { Breadcrumbs } from 'components/Breadcrumbs'
+
+export const ProductSubLanding = () => {
+  const {
+  } = useProductSubLandingContext()
+  const { t } = useTranslation('product_sublanding')
+
+  return (
+    <DefaultLayout>
+      <LandingSection className="pt-3">
+        <Breadcrumbs />
+      </LandingSection>
+    </DefaultLayout>
+  )
+}
diff --git a/pages/[versionId]/[productId]/index.tsx b/pages/[versionId]/[productId]/index.tsx
index 2ba64d13b6..b2cc38f2df 100644
--- a/pages/[versionId]/[productId]/index.tsx
+++ b/pages/[versionId]/[productId]/index.tsx
@@ -10,8 +10,14 @@ import {
   ProductLandingContextT,
   ProductLandingContext,
 } from 'components/context/ProductLandingContext'
+import {
+  getProductSubLandingContextFromRequest,
+  ProductSubLandingContextT,
+  ProductSubLandingContext,
+} from 'components/context/ProductSubLandingContext'
 
 import { ProductLanding } from 'components/landing/ProductLanding'
+import { ProductSubLanding } from 'components/landing/ProductSubLanding'
 import { TocLanding } from 'components/landing/TocLanding'
 import {
   getTocLandingContextFromRequest,
@@ -22,9 +28,10 @@ import {
 type Props = {
   mainContext: MainContextT
   productLandingContext: ProductLandingContextT
+  productSubLandingContext: ProductSubLandingContextT
   tocLandingContext: TocLandingContextT
 }
-const GlobalPage = ({ mainContext, productLandingContext, tocLandingContext }: Props) => {
+const GlobalPage = ({ mainContext, productLandingContext, productSubLandingContext, tocLandingContext }: Props) => {
   const { currentLayoutName, page, relativePath } = mainContext
 
   let content
@@ -35,7 +42,11 @@ const GlobalPage = ({ mainContext, productLandingContext, tocLandingContext }: P
       </ProductLandingContext.Provider>
     )
   } else if (currentLayoutName === 'product-sublanding') {
-    content = <p>todo: product sub-landing</p>
+    content = (
+      <ProductSubLandingContext.Provider value={productSubLandingContext}>
+        <ProductSubLanding />
+      </ProductSubLandingContext.Provider>
+    )
   } else if (relativePath?.endsWith('index.md')) {
     content = (
       <TocLandingContext.Provider value={tocLandingContext}>
@@ -64,6 +75,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
     props: {
       mainContext: getMainContextFromRequest(req),
       productLandingContext: getProductLandingContextFromRequest(req),
+      productSubLandingContext: getProductSubLandingContextFromRequest(req),
       tocLandingContext: getTocLandingContextFromRequest(req),
     },
   }

From c8c6a2d6c7aaf7f3b20adba9699731e58e11899e Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Mon, 7 Jun 2021 17:04:20 -0700
Subject: [PATCH 02/15] set up hero header

---
 components/Breadcrumbs.tsx                    |  2 +-
 .../context/ProductSubLandingContext.tsx      | 10 +++++++++-
 components/landing/ProductSubLanding.tsx      |  8 +++++---
 components/landing/SubLandingHero.tsx         | 19 +++++++++++++++++++
 components/landing/SubLandingSection.tsx      | 17 +++++++++++++++++
 5 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 components/landing/SubLandingHero.tsx
 create mode 100644 components/landing/SubLandingSection.tsx

diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
index 2393efe687..7e9e2427b4 100644
--- a/components/Breadcrumbs.tsx
+++ b/components/Breadcrumbs.tsx
@@ -14,7 +14,7 @@ export const Breadcrumbs = (props: Props) => {
   const router = useRouter()
   const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
   const { breadcrumbs } = useMainContext()
-
+  console.log(pathWithLocale)
   return (
     <nav className="breadcrumbs f5" aria-label="Breadcrumb">
       {Object.values(breadcrumbs).map((breadcrumb) => {
diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index f24883e5c1..40fafdf38e 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -2,6 +2,8 @@ import { createContext, useContext } from 'react'
 import pick from 'lodash/pick'
 
 export type ProductSubLandingContextT = {
+  title: string,
+  intro: string,
 }
 
 export const ProductSubLandingContext = createContext<ProductSubLandingContextT | null>(null)
@@ -19,6 +21,12 @@ export const useProductSubLandingContext = (): ProductSubLandingContextT => {
 }
 
 export const getProductSubLandingContextFromRequest = (req: any): ProductSubLandingContextT => {
+  const productTree = req.context.currentProductTree
   const page = req.context.page
-  return {}
+  return {
+    ...pick(page, [
+      'intro',
+    ]),
+    title: req.context.productMap[req.context.currentProduct].name + ' guides'
+  }
 }
diff --git a/components/landing/ProductSubLanding.tsx b/components/landing/ProductSubLanding.tsx
index b94d7185e2..9aacb126f2 100644
--- a/components/landing/ProductSubLanding.tsx
+++ b/components/landing/ProductSubLanding.tsx
@@ -7,6 +7,8 @@ import React from 'react'
 import { GuideCards } from './GuideCards'
 import { LandingSection } from './LandingSection'
 import { Breadcrumbs } from 'components/Breadcrumbs'
+import { SubLandingSection } from 'components/landing/SubLandingSection'
+import { SubLandingHero } from 'components/landing/SubLandingHero'
 
 export const ProductSubLanding = () => {
   const {
@@ -15,9 +17,9 @@ export const ProductSubLanding = () => {
 
   return (
     <DefaultLayout>
-      <LandingSection className="pt-3">
-        <Breadcrumbs />
-      </LandingSection>
+      <SubLandingSection>
+        <SubLandingHero />
+      </SubLandingSection>
     </DefaultLayout>
   )
 }
diff --git a/components/landing/SubLandingHero.tsx b/components/landing/SubLandingHero.tsx
new file mode 100644
index 0000000000..973c94eed0
--- /dev/null
+++ b/components/landing/SubLandingHero.tsx
@@ -0,0 +1,19 @@
+import { Breadcrumbs } from '../Breadcrumbs'
+import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+
+export const SubLandingHero = () => {
+  const { title, intro } = useProductSubLandingContext()
+  return (
+    <header className='d-flex gutter mb-6'>
+      <div className='col-12'>
+        <Breadcrumbs />
+        <h1 className='my-3 font-mktg'>{title}</h1>
+        <div 
+          className='lead-mktg color-text-secondary f4 description-text' 
+          dangerouslySetInnerHTML={{ __html: intro }} 
+        />
+      
+      </div>
+    </header>
+  )
+}
\ No newline at end of file
diff --git a/components/landing/SubLandingSection.tsx b/components/landing/SubLandingSection.tsx
new file mode 100644
index 0000000000..d7ff0819c6
--- /dev/null
+++ b/components/landing/SubLandingSection.tsx
@@ -0,0 +1,17 @@
+import cx from 'classnames'
+
+type Props = {
+  title?: React.ReactNode
+  sectionLink?: string
+  children?: React.ReactNode
+  className?: string
+}
+export const SubLandingSection = ({ title, children, className, sectionLink }: Props) => {
+  return (
+    <div className={cx('container-xl px-3 px-md-6 pt-3 pb-2', className)} id={sectionLink}>
+      <h1 className='my-3 font-mktg'>{title}</h1>
+      {children}
+    </div>
+    
+  )
+}

From d2a52cddd2e04e289b3d90792b7403bade875e0f Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Mon, 7 Jun 2021 23:33:41 -0700
Subject: [PATCH 03/15] got the first card

---
 .../context/ProductSubLandingContext.tsx      | 10 +++-
 components/landing/SubLandingHero.tsx         | 56 ++++++++++++++++---
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index 40fafdf38e..8680057ee7 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -4,6 +4,12 @@ import pick from 'lodash/pick'
 export type ProductSubLandingContextT = {
   title: string,
   intro: string,
+  featuredTrack: {
+    trackName: string,
+    title: string,
+    description: string
+    guides?: Array<{ href: string; title: string; intro: string }>;
+  }
 }
 
 export const ProductSubLandingContext = createContext<ProductSubLandingContextT | null>(null)
@@ -23,10 +29,12 @@ export const useProductSubLandingContext = (): ProductSubLandingContextT => {
 export const getProductSubLandingContextFromRequest = (req: any): ProductSubLandingContextT => {
   const productTree = req.context.currentProductTree
   const page = req.context.page
+  console.log(page.featuredTrack)
   return {
     ...pick(page, [
       'intro',
     ]),
-    title: req.context.productMap[req.context.currentProduct].name + ' guides'
+    title: req.context.productMap[req.context.currentProduct].name + ' guides',
+    featuredTrack: JSON.parse(JSON.stringify(page.featuredTrack))
   }
 }
diff --git a/components/landing/SubLandingHero.tsx b/components/landing/SubLandingHero.tsx
index 973c94eed0..c5b39feb1e 100644
--- a/components/landing/SubLandingHero.tsx
+++ b/components/landing/SubLandingHero.tsx
@@ -1,19 +1,59 @@
-import { Breadcrumbs } from '../Breadcrumbs'
-import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+import { Breadcrumbs } from "../Breadcrumbs"
+import { useProductSubLandingContext } from "components/context/ProductSubLandingContext"
+import { ArrowRightIcon, StarFillIcon } from "@primer/octicons-react"
 
 export const SubLandingHero = () => {
-  const { title, intro } = useProductSubLandingContext()
+  const { title, intro, featuredTrack } = useProductSubLandingContext()
+  // const guideItems = featuredTrack.guides?.map((guide) => 
+    
+  // )
+  console.log(featuredTrack)
+
   return (
-    <header className='d-flex gutter mb-6'>
-      <div className='col-12'>
+    <div>
+    <header className="d-flex gutter mb-6">
+      <div className="col-12">
         <Breadcrumbs />
-        <h1 className='my-3 font-mktg'>{title}</h1>
+        <h1 className="my-3 font-mktg">{title}</h1>
         <div 
-          className='lead-mktg color-text-secondary f4 description-text' 
+          className="lead-mktg color-text-secondary f4 description-text" 
           dangerouslySetInnerHTML={{ __html: intro }} 
         />
-      
       </div>
     </header>
+    <div className="mb-6 position-relative overflow-hidden mr-n3 ml-n3 px-3">
+      <ul className="list-style-none d-flex flex-nowrap overflow-x-scroll px-2 feature-track">
+        <li className="px-2 d-flex flex-shrink-0">
+          <div className="d-inline-block Box p-5 bg-gradient--blue-pink color-text-inverse">
+            <div className="circle color-text-inverse d-inline-flex" style={{ border: "2px white solid" }}>
+              <StarFillIcon className="v-align-middle m-2" size={24} />
+            </div>
+            <h3 className="font-mktg h3-mktg my-4">{featuredTrack.title}</h3>
+            <div className="lead-mktg color-text-inverse f5 my-4">{featuredTrack.description}</div>          
+            {featuredTrack && <a className="d-inline-block border color-border-inverse color-text-inverse px-4 py-2 f5 no-underline text-bold" role="button" href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}`}>
+              <span className="mr-2">
+                <ArrowRightIcon size={20} />
+              </span>
+              Start path
+            </a>}
+          </div>
+        </li>
+          <li className="px-2 d-flex flex-shrink-0">
+            <a href="{{ guide.href }}?learn={{ featuredTrack.trackName }}" className="d-inline-block Box p-5 color-bg-primary color-border-primary no-underline">
+              <div className="d-flex flex-justify-between flex-items-center">
+                <div className="circle color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex">
+                  <span className="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text"></span>
+                </div>
+                <div className="color-text-tertiary h6 text-uppercase"></div>
+              </div>
+              <h3 className="font-mktg h3-mktg my-4 color-text-primary"></h3>
+              <div className="lead-mktg color-text-secondary f5 my-4 truncate-overflow-8"></div>
+            </a>
+          </li>
+      </ul>
+      <div className="position-absolute top-0 bottom-0 left-0 ml-3 pl-3 fade-background-left"></div>
+      <div className="position-absolute top-0 bottom-0 right-0 mr-3 pr-3 fade-background-right"></div>
+    </div>
+    </div>
   )
 }
\ No newline at end of file

From 3100b3b10dd98c5c3c8412ce00131152410d9d18 Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Tue, 8 Jun 2021 00:25:07 -0700
Subject: [PATCH 04/15] added the rest of the guide cards

---
 .../context/ProductSubLandingContext.tsx      |  4 +-
 components/landing/SubLandingHero.tsx         | 47 +++++++++++--------
 2 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index 8680057ee7..e9e3610ffa 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -8,7 +8,7 @@ export type ProductSubLandingContextT = {
     trackName: string,
     title: string,
     description: string
-    guides?: Array<{ href: string; title: string; intro: string }>;
+    guides?: Array<{ href: string; page: { type: string }; title: string; intro: string }>;
   }
 }
 
@@ -29,12 +29,12 @@ export const useProductSubLandingContext = (): ProductSubLandingContextT => {
 export const getProductSubLandingContextFromRequest = (req: any): ProductSubLandingContextT => {
   const productTree = req.context.currentProductTree
   const page = req.context.page
-  console.log(page.featuredTrack)
   return {
     ...pick(page, [
       'intro',
     ]),
     title: req.context.productMap[req.context.currentProduct].name + ' guides',
+    // https://github.com/vercel/next.js/issues/11993
     featuredTrack: JSON.parse(JSON.stringify(page.featuredTrack))
   }
 }
diff --git a/components/landing/SubLandingHero.tsx b/components/landing/SubLandingHero.tsx
index c5b39feb1e..8218498b31 100644
--- a/components/landing/SubLandingHero.tsx
+++ b/components/landing/SubLandingHero.tsx
@@ -1,13 +1,33 @@
-import { Breadcrumbs } from "../Breadcrumbs"
-import { useProductSubLandingContext } from "components/context/ProductSubLandingContext"
-import { ArrowRightIcon, StarFillIcon } from "@primer/octicons-react"
+import { Breadcrumbs } from '../Breadcrumbs'
+import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+import { ArrowRightIcon, StarFillIcon } from '@primer/octicons-react'
 
 export const SubLandingHero = () => {
   const { title, intro, featuredTrack } = useProductSubLandingContext()
-  // const guideItems = featuredTrack.guides?.map((guide) => 
-    
-  // )
-  console.log(featuredTrack)
+  const guideTypes = {
+    'overview': 'Overview',
+    'quick_start': 'Quickstart',
+    'tutorial': 'Tutorial',
+    'how_to': 'How-to guide',
+    'reference': 'Reference',
+  }
+
+  console.log(featuredTrack.guides)
+  const guideItems = featuredTrack.guides?.map((guide) => 
+    <li className="px-2 d-flex flex-shrink-0">
+      <a href={`${guide.href}?learn=${featuredTrack.trackName}`} className="d-inline-block Box p-5 color-bg-primary color-border-primary no-underline">
+        <div className="d-flex flex-justify-between flex-items-center">
+          <div className="circle color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex">
+            <span className="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text" style={{ width: '24px', height: '24px'}}>{featuredTrack.guides?.indexOf(guide)+1}</span>
+          </div>
+          <div className="color-text-tertiary h6 text-uppercase">{guideTypes[guide.page.type]}</div>
+        </div>
+        <h3 className="font-mktg h3-mktg my-4 color-text-primary">{guide.title}</h3>
+        <div className="lead-mktg color-text-secondary f5 my-4 truncate-overflow-8">{guide.intro}</div>
+      </a>
+    </li>
+  )
+  // console.log(featuredTrack)
 
   return (
     <div>
@@ -38,18 +58,7 @@ export const SubLandingHero = () => {
             </a>}
           </div>
         </li>
-          <li className="px-2 d-flex flex-shrink-0">
-            <a href="{{ guide.href }}?learn={{ featuredTrack.trackName }}" className="d-inline-block Box p-5 color-bg-primary color-border-primary no-underline">
-              <div className="d-flex flex-justify-between flex-items-center">
-                <div className="circle color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex">
-                  <span className="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text"></span>
-                </div>
-                <div className="color-text-tertiary h6 text-uppercase"></div>
-              </div>
-              <h3 className="font-mktg h3-mktg my-4 color-text-primary"></h3>
-              <div className="lead-mktg color-text-secondary f5 my-4 truncate-overflow-8"></div>
-            </a>
-          </li>
+          {guideItems}
       </ul>
       <div className="position-absolute top-0 bottom-0 left-0 ml-3 pl-3 fade-background-left"></div>
       <div className="position-absolute top-0 bottom-0 right-0 mr-3 pr-3 fade-background-right"></div>

From 2e2e745b409c85125e27cf36a240ff431e10d844 Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Wed, 9 Jun 2021 09:46:49 -0700
Subject: [PATCH 05/15] update for undefined featured tracks and enum

---
 .../context/ProductSubLandingContext.tsx      |  8 +++---
 components/landing/SubLandingHero.tsx         | 26 ++++++++++---------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index e9e3610ffa..dd823daa63 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -4,11 +4,11 @@ import pick from 'lodash/pick'
 export type ProductSubLandingContextT = {
   title: string,
   intro: string,
-  featuredTrack: {
+  featuredTrack?: {
     trackName: string,
     title: string,
     description: string
-    guides?: Array<{ href: string; page: { type: string }; title: string; intro: string }>;
+    guides?: Array<{ href: string; page: { type: string}; title: string; intro: string }>;
   }
 }
 
@@ -29,12 +29,14 @@ export const useProductSubLandingContext = (): ProductSubLandingContextT => {
 export const getProductSubLandingContextFromRequest = (req: any): ProductSubLandingContextT => {
   const productTree = req.context.currentProductTree
   const page = req.context.page
+  console.log(page.featuredTrack)
+  console.log(req.context.productMap[req.context.currentProduct].name)
   return {
     ...pick(page, [
       'intro',
     ]),
     title: req.context.productMap[req.context.currentProduct].name + ' guides',
     // https://github.com/vercel/next.js/issues/11993
-    featuredTrack: JSON.parse(JSON.stringify(page.featuredTrack))
+    featuredTrack: page.featuredTrack === undefined ? null : JSON.parse(JSON.stringify(page.featuredTrack))
   }
 }
diff --git a/components/landing/SubLandingHero.tsx b/components/landing/SubLandingHero.tsx
index 8218498b31..4e748e1ff1 100644
--- a/components/landing/SubLandingHero.tsx
+++ b/components/landing/SubLandingHero.tsx
@@ -4,23 +4,23 @@ import { ArrowRightIcon, StarFillIcon } from '@primer/octicons-react'
 
 export const SubLandingHero = () => {
   const { title, intro, featuredTrack } = useProductSubLandingContext()
-  const guideTypes = {
-    'overview': 'Overview',
-    'quick_start': 'Quickstart',
-    'tutorial': 'Tutorial',
-    'how_to': 'How-to guide',
-    'reference': 'Reference',
+
+  enum GuideTypes {
+    overview = 'Overview',
+    quick_start = 'Quickstart',
+    tutorial = 'Tutorial',
+    how_to = 'How-to guide',
+    reference = 'Reference'
   }
 
-  console.log(featuredTrack.guides)
-  const guideItems = featuredTrack.guides?.map((guide) => 
+  const guideItems = featuredTrack?.guides?.map((guide) => 
     <li className="px-2 d-flex flex-shrink-0">
       <a href={`${guide.href}?learn=${featuredTrack.trackName}`} className="d-inline-block Box p-5 color-bg-primary color-border-primary no-underline">
         <div className="d-flex flex-justify-between flex-items-center">
           <div className="circle color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex">
-            <span className="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text" style={{ width: '24px', height: '24px'}}>{featuredTrack.guides?.indexOf(guide)+1}</span>
+            {featuredTrack.guides && <span className="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text" style={{ width: '24px', height: '24px'}}>{featuredTrack.guides?.indexOf(guide)+1}</span>}
           </div>
-          <div className="color-text-tertiary h6 text-uppercase">{guideTypes[guide.page.type]}</div>
+          <div className="color-text-tertiary h6 text-uppercase">{GuideTypes[guide.page.type as keyof typeof GuideTypes]}</div>
         </div>
         <h3 className="font-mktg h3-mktg my-4 color-text-primary">{guide.title}</h3>
         <div className="lead-mktg color-text-secondary f5 my-4 truncate-overflow-8">{guide.intro}</div>
@@ -41,7 +41,7 @@ export const SubLandingHero = () => {
         />
       </div>
     </header>
-    <div className="mb-6 position-relative overflow-hidden mr-n3 ml-n3 px-3">
+    {featuredTrack && <div className="mb-6 position-relative overflow-hidden mr-n3 ml-n3 px-3">
       <ul className="list-style-none d-flex flex-nowrap overflow-x-scroll px-2 feature-track">
         <li className="px-2 d-flex flex-shrink-0">
           <div className="d-inline-block Box p-5 bg-gradient--blue-pink color-text-inverse">
@@ -50,7 +50,7 @@ export const SubLandingHero = () => {
             </div>
             <h3 className="font-mktg h3-mktg my-4">{featuredTrack.title}</h3>
             <div className="lead-mktg color-text-inverse f5 my-4">{featuredTrack.description}</div>          
-            {featuredTrack && <a className="d-inline-block border color-border-inverse color-text-inverse px-4 py-2 f5 no-underline text-bold" role="button" href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}`}>
+            {featuredTrack.guides && <a className="d-inline-block border color-border-inverse color-text-inverse px-4 py-2 f5 no-underline text-bold" role="button" href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}`}>
               <span className="mr-2">
                 <ArrowRightIcon size={20} />
               </span>
@@ -63,6 +63,8 @@ export const SubLandingHero = () => {
       <div className="position-absolute top-0 bottom-0 left-0 ml-3 pl-3 fade-background-left"></div>
       <div className="position-absolute top-0 bottom-0 right-0 mr-3 pr-3 fade-background-right"></div>
     </div>
+    }
     </div>
+
   )
 }
\ No newline at end of file

From 4ee96cf94f1be2c15b485cd77d71fd2bc3c569e2 Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Wed, 9 Jun 2021 15:11:31 -0700
Subject: [PATCH 06/15] move sublanding to its own directory and added learning
 paths

---
 .../context/ProductSubLandingContext.tsx      | 23 ++++---
 components/landing/SubLandingSection.tsx      | 17 -----
 components/sublanding/LearningTrack.tsx       | 64 +++++++++++++++++++
 components/sublanding/LearningTracks.tsx      | 16 +++++
 .../ProductSubLanding.tsx                     | 20 ++++--
 .../SubLandingHero.tsx                        | 16 ++---
 components/sublanding/SubLandingSection.tsx   | 27 ++++++++
 pages/[versionId]/[productId]/index.tsx       |  2 +-
 8 files changed, 139 insertions(+), 46 deletions(-)
 delete mode 100644 components/landing/SubLandingSection.tsx
 create mode 100644 components/sublanding/LearningTrack.tsx
 create mode 100644 components/sublanding/LearningTracks.tsx
 rename components/{landing => sublanding}/ProductSubLanding.tsx (52%)
 rename components/{landing => sublanding}/SubLandingHero.tsx (90%)
 create mode 100644 components/sublanding/SubLandingSection.tsx

diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index dd823daa63..420c4df0e1 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -1,15 +1,18 @@
 import { createContext, useContext } from 'react'
 import pick from 'lodash/pick'
 
+export type FeaturedTrack = {
+  trackName: string,
+  title: string,
+  description: string
+  guides?: Array<{ href: string; page: { type: string}; title: string; intro: string }>;
+}
+
 export type ProductSubLandingContextT = {
   title: string,
   intro: string,
-  featuredTrack?: {
-    trackName: string,
-    title: string,
-    description: string
-    guides?: Array<{ href: string; page: { type: string}; title: string; intro: string }>;
-  }
+  featuredTrack?: FeaturedTrack
+  learningTracks?: Array<FeaturedTrack>
 }
 
 export const ProductSubLandingContext = createContext<ProductSubLandingContextT | null>(null)
@@ -29,14 +32,14 @@ export const useProductSubLandingContext = (): ProductSubLandingContextT => {
 export const getProductSubLandingContextFromRequest = (req: any): ProductSubLandingContextT => {
   const productTree = req.context.currentProductTree
   const page = req.context.page
-  console.log(page.featuredTrack)
-  console.log(req.context.productMap[req.context.currentProduct].name)
+
   return {
     ...pick(page, [
       'intro',
     ]),
-    title: req.context.productMap[req.context.currentProduct].name + ' guides',
+    title: req.context.productMap[req.context.currentProduct].name,
     // https://github.com/vercel/next.js/issues/11993
-    featuredTrack: page.featuredTrack === undefined ? null : JSON.parse(JSON.stringify(page.featuredTrack))
+    featuredTrack: page.featuredTrack === undefined ? null : JSON.parse(JSON.stringify(page.featuredTrack)),
+    learningTracks: page.learningTracks === undefined ? null : JSON.parse(JSON.stringify(page.learningTracks))
   }
 }
diff --git a/components/landing/SubLandingSection.tsx b/components/landing/SubLandingSection.tsx
deleted file mode 100644
index d7ff0819c6..0000000000
--- a/components/landing/SubLandingSection.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import cx from 'classnames'
-
-type Props = {
-  title?: React.ReactNode
-  sectionLink?: string
-  children?: React.ReactNode
-  className?: string
-}
-export const SubLandingSection = ({ title, children, className, sectionLink }: Props) => {
-  return (
-    <div className={cx('container-xl px-3 px-md-6 pt-3 pb-2', className)} id={sectionLink}>
-      <h1 className='my-3 font-mktg'>{title}</h1>
-      {children}
-    </div>
-    
-  )
-}
diff --git a/components/sublanding/LearningTrack.tsx b/components/sublanding/LearningTrack.tsx
new file mode 100644
index 0000000000..a3f3e3076c
--- /dev/null
+++ b/components/sublanding/LearningTrack.tsx
@@ -0,0 +1,64 @@
+import { FeaturedTrack } from "components/context/ProductSubLandingContext";
+import { useTranslation } from "components/hooks/useTranslation";
+import { ArrowRightIcon } from '@primer/octicons-react'
+import { useState } from "react";
+
+type Props = {
+  track: FeaturedTrack,
+}
+
+export const LearningTrack = ({ track }: Props) => {
+  const guides = track.guides
+  const [ visibleGuides, setVisibleGuides ] = useState(guides?.slice(0, 4))
+  const showAll = () => {
+    setVisibleGuides(guides)
+  }
+  const { t } = useTranslation('product_sublanding')
+
+ return (
+  <div className="my-3 px-4 col-12 col-md-6 learning-track">
+    <div className="Box js-show-more-container d-flex flex-column">
+      <div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
+        <div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
+          <div className="my-xl-0 mr-xl-3">
+            <h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">
+              {track.title}
+            </h5>
+            <p className="color-text-inverse truncate-overflow-3 learning-track--description">{track.description}</p>
+          </div>
+        </div>
+      <a 
+        className="d-inline-block border color-border-inverse color-text-inverse px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0" 
+        role="button" 
+        href="{{ track.guides[0].href }}?learn={{ track.trackName }}"
+      >
+        {t('start')}
+        <span className="mr-2">
+          <ArrowRightIcon size={20} />
+        </span>
+      </a>
+    </div>
+    {visibleGuides?.map((guide) => 
+      <div>
+        <a className="Box-row d-flex flex-items-center color-text-primary no-underline js-show-more-item" href={`${guide.href}?learn=${track.trackName}`}>
+          <div className="circle color-bg-tertiary d-inline-flex mr-4">
+            {guides && <span className="m-2 f3 lh-condensed-ultra text-center text-bold step-circle-text">{guides?.indexOf(guide)+1}</span>}
+          </div>
+          <h5 className="flex-auto pr-2">{guide.title}</h5>
+          <div className="color-text-tertiary h6 text-uppercase">{t('guide_types')[guide.page.type]}</div>
+        </a>
+        {guides && guides?.indexOf(guide) == 3 ? (
+          <a 
+            className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
+            onClick={showAll}
+          >
+            <div className="position-absolute left-0 right-0 py-5 fade-background-bottom" style={{ bottom: '50px' }}></div>
+            <span>Show more guides</span>
+          </a>
+        ) : <div />}
+      </div>
+    )}
+    </div>
+  </div>
+ )
+}
\ No newline at end of file
diff --git a/components/sublanding/LearningTracks.tsx b/components/sublanding/LearningTracks.tsx
new file mode 100644
index 0000000000..3d14f4e119
--- /dev/null
+++ b/components/sublanding/LearningTracks.tsx
@@ -0,0 +1,16 @@
+import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+import { LearningTrack } from 'components/sublanding/LearningTrack'
+
+export const LearningTracks = () => {
+  const { learningTracks } = useProductSubLandingContext()
+  console.log(learningTracks)
+  return (
+    <div>
+      <div className="d-flex flex-wrap flex-items-start my-5 gutter">
+        {(learningTracks || []).map((track) => {
+          return <LearningTrack track={track} />
+        })}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/components/landing/ProductSubLanding.tsx b/components/sublanding/ProductSubLanding.tsx
similarity index 52%
rename from components/landing/ProductSubLanding.tsx
rename to components/sublanding/ProductSubLanding.tsx
index 9aacb126f2..a094f98ee2 100644
--- a/components/landing/ProductSubLanding.tsx
+++ b/components/sublanding/ProductSubLanding.tsx
@@ -4,22 +4,30 @@ import { useTranslation } from 'components/hooks/useTranslation'
 import cx from 'classnames'
 
 import React from 'react'
-import { GuideCards } from './GuideCards'
-import { LandingSection } from './LandingSection'
-import { Breadcrumbs } from 'components/Breadcrumbs'
-import { SubLandingSection } from 'components/landing/SubLandingSection'
-import { SubLandingHero } from 'components/landing/SubLandingHero'
+import { SubLandingSection } from 'components/sublanding/SubLandingSection'
+import { SubLandingHero } from 'components/sublanding/SubLandingHero'
+import { LearningTracks } from 'components/sublanding/LearningTracks'
+
 
 export const ProductSubLanding = () => {
   const {
+    title,
+    learningTracks
   } = useProductSubLandingContext()
-  const { t } = useTranslation('product_sublanding')
 
+  const { t } = useTranslation('product_sublanding')
+  
   return (
     <DefaultLayout>
       <SubLandingSection>
         <SubLandingHero />
       </SubLandingSection>
+
+      {learningTracks && learningTracks.length > 0 && (
+        <SubLandingSection title={`${title} learning paths`} className="border-top py-6" sectionLink="learning-paths">
+          <LearningTracks />
+        </SubLandingSection>
+      )}
     </DefaultLayout>
   )
 }
diff --git a/components/landing/SubLandingHero.tsx b/components/sublanding/SubLandingHero.tsx
similarity index 90%
rename from components/landing/SubLandingHero.tsx
rename to components/sublanding/SubLandingHero.tsx
index 4e748e1ff1..a8d971f4ae 100644
--- a/components/landing/SubLandingHero.tsx
+++ b/components/sublanding/SubLandingHero.tsx
@@ -1,17 +1,11 @@
 import { Breadcrumbs } from '../Breadcrumbs'
 import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
 import { ArrowRightIcon, StarFillIcon } from '@primer/octicons-react'
+import { useTranslation } from 'components/hooks/useTranslation'
 
 export const SubLandingHero = () => {
   const { title, intro, featuredTrack } = useProductSubLandingContext()
-
-  enum GuideTypes {
-    overview = 'Overview',
-    quick_start = 'Quickstart',
-    tutorial = 'Tutorial',
-    how_to = 'How-to guide',
-    reference = 'Reference'
-  }
+  const { t } = useTranslation('product_sublanding')
 
   const guideItems = featuredTrack?.guides?.map((guide) => 
     <li className="px-2 d-flex flex-shrink-0">
@@ -20,21 +14,20 @@ export const SubLandingHero = () => {
           <div className="circle color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex">
             {featuredTrack.guides && <span className="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text" style={{ width: '24px', height: '24px'}}>{featuredTrack.guides?.indexOf(guide)+1}</span>}
           </div>
-          <div className="color-text-tertiary h6 text-uppercase">{GuideTypes[guide.page.type as keyof typeof GuideTypes]}</div>
+          <div className="color-text-tertiary h6 text-uppercase">{t('guide_types')[guide.page.type]}</div>
         </div>
         <h3 className="font-mktg h3-mktg my-4 color-text-primary">{guide.title}</h3>
         <div className="lead-mktg color-text-secondary f5 my-4 truncate-overflow-8">{guide.intro}</div>
       </a>
     </li>
   )
-  // console.log(featuredTrack)
 
   return (
     <div>
     <header className="d-flex gutter mb-6">
       <div className="col-12">
         <Breadcrumbs />
-        <h1 className="my-3 font-mktg">{title}</h1>
+        <h1 className="my-3 font-mktg">{title} guides</h1>
         <div 
           className="lead-mktg color-text-secondary f4 description-text" 
           dangerouslySetInnerHTML={{ __html: intro }} 
@@ -65,6 +58,5 @@ export const SubLandingHero = () => {
     </div>
     }
     </div>
-
   )
 }
\ No newline at end of file
diff --git a/components/sublanding/SubLandingSection.tsx b/components/sublanding/SubLandingSection.tsx
new file mode 100644
index 0000000000..7903b3e9c9
--- /dev/null
+++ b/components/sublanding/SubLandingSection.tsx
@@ -0,0 +1,27 @@
+import cx from 'classnames'
+import { useTranslation } from 'components/hooks/useTranslation'
+
+type Props = {
+  title?: React.ReactNode
+  sectionLink?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+export const SubLandingSection = ({ title, children, className, sectionLink }: Props) => {
+  const { t } = useTranslation('product_sublanding')
+
+  return (
+    <div className={cx('container-xl px-3 px-md-6 pt-3 pb-2', className)}>
+      <h2 className="mb-3 font-mktg" id={sectionLink}>
+        {sectionLink ? <a href={`#${sectionLink}`}>{title}</a> : title}
+      </h2>
+      {sectionLink && <div
+        className="lead-mktg color-text-secondary f4 description-text"
+        dangerouslySetInnerHTML={{ __html: t('learning_paths_desc') }}
+      />}
+      {children}
+    </div>
+    
+  )
+}
diff --git a/pages/[versionId]/[productId]/index.tsx b/pages/[versionId]/[productId]/index.tsx
index b2cc38f2df..856b451f3c 100644
--- a/pages/[versionId]/[productId]/index.tsx
+++ b/pages/[versionId]/[productId]/index.tsx
@@ -17,7 +17,7 @@ import {
 } from 'components/context/ProductSubLandingContext'
 
 import { ProductLanding } from 'components/landing/ProductLanding'
-import { ProductSubLanding } from 'components/landing/ProductSubLanding'
+import { ProductSubLanding } from 'components/sublanding/ProductSubLanding'
 import { TocLanding } from 'components/landing/TocLanding'
 import {
   getTocLandingContextFromRequest,

From 699d73d8286bb85af8ebc25274d5c84bcd8cb865 Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Wed, 9 Jun 2021 20:35:23 -0700
Subject: [PATCH 07/15] add last section

---
 .../context/ProductSubLandingContext.tsx      | 17 +++++-
 components/sublanding/ArticleCard.tsx         | 28 +++++++++
 components/sublanding/ArticleCards.tsx        | 57 +++++++++++++++++++
 components/sublanding/LearningTrack.tsx       |  4 +-
 components/sublanding/LearningTracks.tsx      |  2 +-
 components/sublanding/ProductSubLanding.tsx   | 18 +++---
 components/sublanding/SubLandingSection.tsx   |  7 ++-
 7 files changed, 116 insertions(+), 17 deletions(-)
 create mode 100644 components/sublanding/ArticleCard.tsx
 create mode 100644 components/sublanding/ArticleCards.tsx

diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index 420c4df0e1..288a3a50af 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -8,11 +8,21 @@ export type FeaturedTrack = {
   guides?: Array<{ href: string; page: { type: string}; title: string; intro: string }>;
 }
 
+export type ArticleGuide = {
+  href: string,
+  title: string,
+  intro: string,
+  type: string,
+  topics: Array<string>
+}
+
 export type ProductSubLandingContextT = {
   title: string,
   intro: string,
   featuredTrack?: FeaturedTrack
   learningTracks?: Array<FeaturedTrack>
+  includeGuides?: Array<ArticleGuide>
+  allTopics?: Array<string>
 }
 
 export const ProductSubLandingContext = createContext<ProductSubLandingContextT | null>(null)
@@ -30,16 +40,17 @@ export const useProductSubLandingContext = (): ProductSubLandingContextT => {
 }
 
 export const getProductSubLandingContextFromRequest = (req: any): ProductSubLandingContextT => {
-  const productTree = req.context.currentProductTree
   const page = req.context.page
-
+  console.log(page.includeGuides.length)
   return {
     ...pick(page, [
       'intro',
+      'allTopics'
     ]),
     title: req.context.productMap[req.context.currentProduct].name,
     // https://github.com/vercel/next.js/issues/11993
     featuredTrack: page.featuredTrack === undefined ? null : JSON.parse(JSON.stringify(page.featuredTrack)),
-    learningTracks: page.learningTracks === undefined ? null : JSON.parse(JSON.stringify(page.learningTracks))
+    learningTracks: page.learningTracks === undefined ? null : JSON.parse(JSON.stringify(page.learningTracks)),
+    includeGuides: page.includeGuides === undefined ? null : JSON.parse(JSON.stringify(page.includeGuides))
   }
 }
diff --git a/components/sublanding/ArticleCard.tsx b/components/sublanding/ArticleCard.tsx
new file mode 100644
index 0000000000..5cfdbab4b7
--- /dev/null
+++ b/components/sublanding/ArticleCard.tsx
@@ -0,0 +1,28 @@
+import { ArticleGuide } from "components/context/ProductSubLandingContext"
+
+type Props = {
+  card: ArticleGuide
+  display?: string
+}
+
+export const ArticleCard = ({ card, display }: Props) => {
+  return (
+    <div className={`d-flex col-12 col-md-4 pr-0 pr-md-6 pr-lg-8 ${display} js-filter-card`} data-type={card.type} data-topics={card.topics.join(',')}>
+      <a className="no-underline d-flex flex-column py-3 border-bottom" href={card.href}>
+        <h4 className="h4 color-text-primary mb-1">{card.title}</h4>
+        <div className="h6 text-uppercase">{card.type}</div>
+        <p className="color-text-secondary my-3">{card.intro}</p>
+        {card.topics.length > 0 && (
+          <div>
+            {card.topics.map((topic)=> {
+              return (
+                <span className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1">{topic}</span>
+              )
+            })
+            }
+          </div>
+        )}
+      </a>
+    </div>
+  )
+}
diff --git a/components/sublanding/ArticleCards.tsx b/components/sublanding/ArticleCards.tsx
new file mode 100644
index 0000000000..1b2a7bbc4c
--- /dev/null
+++ b/components/sublanding/ArticleCards.tsx
@@ -0,0 +1,57 @@
+import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { ArticleCard } from './ArticleCard'
+
+const MAX_ARTICLES = 9
+export const ArticleCards = () => {
+  const { t } = useTranslation('product_sublanding')
+  const guideTypes = t('guide_types')
+  const {
+    allTopics,
+    includeGuides,
+  } = useProductSubLandingContext()
+
+  return (
+    <div>
+      <form className="mt-2 mb-5 d-flex d-flex">
+        <div>
+          <label htmlFor="type" className="text-uppercase f6 color-text-secondary d-block">{t('filters.type')}</label>
+          <select className="form-select js-filter-card-filter-dropdown f4 text-bold border-0 rounded-0 border-top box-shadow-none pl-0 js-filter-card-filter-dropdown" name="type" aria-label="guide types">
+            <option value="">{t('filters.all')}</option>
+              {Object.keys(guideTypes).map((key) => {
+                return (
+                  <option value={key}>{guideTypes[key]}</option>
+                )
+                })}
+          </select>
+        </div>
+        <div className="mx-4">
+          <label htmlFor="topic" className="text-uppercase f6 color-text-secondary d-block">{t('filters.topic')}</label>
+          <select className="form-select js-filter-card-filter-dropdown f4 text-bold border-0 rounded-0 border-top box-shadow-none pl-0 js-filter-card-filter-dropdown" name="topics" aria-label="guide topics">
+            <option value="">{t('filters.all')}</option>
+            {allTopics?.map((topic) => {
+              return (
+                <option value={topic}>{topic}</option>
+              )
+            })}
+          </select>
+        </div>
+      </form>
+      <div className="d-flex flex-wrap mr-0 mr-md-n6 mr-lg-n8">
+        {(includeGuides || []).map((card, index) => {
+          return index + 1 > MAX_ARTICLES ? 
+            <ArticleCard card={card} display={'d-none'}/>
+            : <ArticleCard card={card} />
+        })}
+      </div>
+      {includeGuides && includeGuides.length > MAX_ARTICLES && (
+        <button className="col-12 mt-5 text-center text-bold color-text-link btn-link js-filter-card-show-more" data-js-filter-card-max={MAX_ARTICLES}>
+          {t('load_more')}
+        </button>
+      )}
+      <div className="js-filter-card-no-results d-none py-4 text-center color-text-secondary">
+        <h4 className="text-normal">{t('no_result')}</h4>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/components/sublanding/LearningTrack.tsx b/components/sublanding/LearningTrack.tsx
index a3f3e3076c..e4f281b6f4 100644
--- a/components/sublanding/LearningTrack.tsx
+++ b/components/sublanding/LearningTrack.tsx
@@ -1,10 +1,10 @@
-import { FeaturedTrack } from "components/context/ProductSubLandingContext";
 import { useTranslation } from "components/hooks/useTranslation";
 import { ArrowRightIcon } from '@primer/octicons-react'
 import { useState } from "react";
+import { FeaturedTrack } from "components/context/ProductSubLandingContext";
 
 type Props = {
-  track: FeaturedTrack,
+  track: FeaturedTrack
 }
 
 export const LearningTrack = ({ track }: Props) => {
diff --git a/components/sublanding/LearningTracks.tsx b/components/sublanding/LearningTracks.tsx
index 3d14f4e119..62f42ef4f0 100644
--- a/components/sublanding/LearningTracks.tsx
+++ b/components/sublanding/LearningTracks.tsx
@@ -3,7 +3,7 @@ import { LearningTrack } from 'components/sublanding/LearningTrack'
 
 export const LearningTracks = () => {
   const { learningTracks } = useProductSubLandingContext()
-  console.log(learningTracks)
+
   return (
     <div>
       <div className="d-flex flex-wrap flex-items-start my-5 gutter">
diff --git a/components/sublanding/ProductSubLanding.tsx b/components/sublanding/ProductSubLanding.tsx
index a094f98ee2..23a1984a61 100644
--- a/components/sublanding/ProductSubLanding.tsx
+++ b/components/sublanding/ProductSubLanding.tsx
@@ -1,21 +1,17 @@
 import { DefaultLayout } from 'components/DefaultLayout'
 import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
-import { useTranslation } from 'components/hooks/useTranslation'
-import cx from 'classnames'
-
 import React from 'react'
 import { SubLandingSection } from 'components/sublanding/SubLandingSection'
 import { SubLandingHero } from 'components/sublanding/SubLandingHero'
 import { LearningTracks } from 'components/sublanding/LearningTracks'
-
+import { ArticleCards } from 'components/sublanding/ArticleCards'
 
 export const ProductSubLanding = () => {
   const {
     title,
-    learningTracks
+    learningTracks,
+    includeGuides
   } = useProductSubLandingContext()
-
-  const { t } = useTranslation('product_sublanding')
   
   return (
     <DefaultLayout>
@@ -24,10 +20,16 @@ export const ProductSubLanding = () => {
       </SubLandingSection>
 
       {learningTracks && learningTracks.length > 0 && (
-        <SubLandingSection title={`${title} learning paths`} className="border-top py-6" sectionLink="learning-paths">
+        <SubLandingSection title={`${title} learning paths`} className="border-top py-6" sectionLink="learning-paths" description="learning_paths_desc">
           <LearningTracks />
         </SubLandingSection>
       )}
+
+      {includeGuides && (
+        <SubLandingSection title={`All ${title} guides`} className="border-top py-6 color-border-primary" sectionLink="all-guides">
+          <ArticleCards />
+        </SubLandingSection>
+      )}
     </DefaultLayout>
   )
 }
diff --git a/components/sublanding/SubLandingSection.tsx b/components/sublanding/SubLandingSection.tsx
index 7903b3e9c9..ab49ab3007 100644
--- a/components/sublanding/SubLandingSection.tsx
+++ b/components/sublanding/SubLandingSection.tsx
@@ -6,9 +6,10 @@ type Props = {
   sectionLink?: string
   children?: React.ReactNode
   className?: string
+  description?: string
 }
 
-export const SubLandingSection = ({ title, children, className, sectionLink }: Props) => {
+export const SubLandingSection = ({ title, children, className, sectionLink, description }: Props) => {
   const { t } = useTranslation('product_sublanding')
 
   return (
@@ -16,9 +17,9 @@ export const SubLandingSection = ({ title, children, className, sectionLink }: P
       <h2 className="mb-3 font-mktg" id={sectionLink}>
         {sectionLink ? <a href={`#${sectionLink}`}>{title}</a> : title}
       </h2>
-      {sectionLink && <div
+      {description && <div
         className="lead-mktg color-text-secondary f4 description-text"
-        dangerouslySetInnerHTML={{ __html: t('learning_paths_desc') }}
+        dangerouslySetInnerHTML={{ __html: t(description) }}
       />}
       {children}
     </div>

From 04b02bb0079e84ea8f99fb1ea73c5928743ccb29 Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Wed, 9 Jun 2021 20:55:07 -0700
Subject: [PATCH 08/15] updated type display

---
 components/sublanding/ArticleCard.tsx  | 5 +++--
 components/sublanding/ArticleCards.tsx | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/sublanding/ArticleCard.tsx b/components/sublanding/ArticleCard.tsx
index 5cfdbab4b7..5df97ae792 100644
--- a/components/sublanding/ArticleCard.tsx
+++ b/components/sublanding/ArticleCard.tsx
@@ -2,15 +2,16 @@ import { ArticleGuide } from "components/context/ProductSubLandingContext"
 
 type Props = {
   card: ArticleGuide
+  type: string
   display?: string
 }
 
-export const ArticleCard = ({ card, display }: Props) => {
+export const ArticleCard = ({ card, type, display }: Props) => {
   return (
     <div className={`d-flex col-12 col-md-4 pr-0 pr-md-6 pr-lg-8 ${display} js-filter-card`} data-type={card.type} data-topics={card.topics.join(',')}>
       <a className="no-underline d-flex flex-column py-3 border-bottom" href={card.href}>
         <h4 className="h4 color-text-primary mb-1">{card.title}</h4>
-        <div className="h6 text-uppercase">{card.type}</div>
+        <div className="h6 text-uppercase">{type}</div>
         <p className="color-text-secondary my-3">{card.intro}</p>
         {card.topics.length > 0 && (
           <div>
diff --git a/components/sublanding/ArticleCards.tsx b/components/sublanding/ArticleCards.tsx
index 1b2a7bbc4c..defd7c92ae 100644
--- a/components/sublanding/ArticleCards.tsx
+++ b/components/sublanding/ArticleCards.tsx
@@ -40,8 +40,8 @@ export const ArticleCards = () => {
       <div className="d-flex flex-wrap mr-0 mr-md-n6 mr-lg-n8">
         {(includeGuides || []).map((card, index) => {
           return index + 1 > MAX_ARTICLES ? 
-            <ArticleCard card={card} display={'d-none'}/>
-            : <ArticleCard card={card} />
+            <ArticleCard card={card} type={guideTypes[card.type]} display={'d-none'}/>
+            : <ArticleCard card={card} type={guideTypes[card.type]} />
         })}
       </div>
       {includeGuides && includeGuides.length > MAX_ARTICLES && (

From 857fce6c47cf486ef1059c39099b2c18f03d7ed7 Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Wed, 9 Jun 2021 21:39:17 -0700
Subject: [PATCH 09/15] add number for learning tracks

---
 components/context/ProductSubLandingContext.tsx | 5 ++---
 components/sublanding/LearningTrack.tsx         | 5 +++--
 components/sublanding/LearningTracks.tsx        | 1 -
 components/sublanding/SubLandingHero.tsx        | 2 +-
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index 288a3a50af..62fdd6238a 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -41,14 +41,13 @@ export const useProductSubLandingContext = (): ProductSubLandingContextT => {
 
 export const getProductSubLandingContextFromRequest = (req: any): ProductSubLandingContextT => {
   const page = req.context.page
-  console.log(page.includeGuides.length)
+
   return {
     ...pick(page, [
       'intro',
       'allTopics'
     ]),
-    title: req.context.productMap[req.context.currentProduct].name,
-    // https://github.com/vercel/next.js/issues/11993
+    title: req.context.productMap[req.context.currentProduct].name,    
     featuredTrack: page.featuredTrack === undefined ? null : JSON.parse(JSON.stringify(page.featuredTrack)),
     learningTracks: page.learningTracks === undefined ? null : JSON.parse(JSON.stringify(page.learningTracks)),
     includeGuides: page.includeGuides === undefined ? null : JSON.parse(JSON.stringify(page.includeGuides))
diff --git a/components/sublanding/LearningTrack.tsx b/components/sublanding/LearningTrack.tsx
index e4f281b6f4..419f2a442a 100644
--- a/components/sublanding/LearningTrack.tsx
+++ b/components/sublanding/LearningTrack.tsx
@@ -7,6 +7,7 @@ type Props = {
   track: FeaturedTrack
 }
 
+const MAX_VISIBLE_GUIDES = 4
 export const LearningTrack = ({ track }: Props) => {
   const guides = track.guides
   const [ visibleGuides, setVisibleGuides ] = useState(guides?.slice(0, 4))
@@ -47,13 +48,13 @@ export const LearningTrack = ({ track }: Props) => {
           <h5 className="flex-auto pr-2">{guide.title}</h5>
           <div className="color-text-tertiary h6 text-uppercase">{t('guide_types')[guide.page.type]}</div>
         </a>
-        {guides && guides?.indexOf(guide) == 3 ? (
+        {guides && guides?.indexOf(guide) + 1 == MAX_VISIBLE_GUIDES ? (
           <a 
             className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
             onClick={showAll}
           >
             <div className="position-absolute left-0 right-0 py-5 fade-background-bottom" style={{ bottom: '50px' }}></div>
-            <span>Show more guides</span>
+            <span>Show {guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}</span>
           </a>
         ) : <div />}
       </div>
diff --git a/components/sublanding/LearningTracks.tsx b/components/sublanding/LearningTracks.tsx
index 62f42ef4f0..a946886742 100644
--- a/components/sublanding/LearningTracks.tsx
+++ b/components/sublanding/LearningTracks.tsx
@@ -3,7 +3,6 @@ import { LearningTrack } from 'components/sublanding/LearningTrack'
 
 export const LearningTracks = () => {
   const { learningTracks } = useProductSubLandingContext()
-
   return (
     <div>
       <div className="d-flex flex-wrap flex-items-start my-5 gutter">
diff --git a/components/sublanding/SubLandingHero.tsx b/components/sublanding/SubLandingHero.tsx
index a8d971f4ae..b5cf81f1bd 100644
--- a/components/sublanding/SubLandingHero.tsx
+++ b/components/sublanding/SubLandingHero.tsx
@@ -47,7 +47,7 @@ export const SubLandingHero = () => {
               <span className="mr-2">
                 <ArrowRightIcon size={20} />
               </span>
-              Start path
+              {t(`start_path`)}
             </a>}
           </div>
         </li>

From ed4ba6dd976803c3a23bf14a84ff450acfb63249 Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Wed, 9 Jun 2021 21:58:25 -0700
Subject: [PATCH 10/15] get rid of sublanding section and use landing section

---
 components/landing/LandingSection.tsx       | 13 ++++++++--
 components/landing/ProductLanding.tsx       | 12 ++++-----
 components/sublanding/ProductSubLanding.tsx | 14 +++++------
 components/sublanding/SubLandingSection.tsx | 28 ---------------------
 4 files changed, 24 insertions(+), 43 deletions(-)
 delete mode 100644 components/sublanding/SubLandingSection.tsx

diff --git a/components/landing/LandingSection.tsx b/components/landing/LandingSection.tsx
index 0b6bd019bf..ffb685c18c 100644
--- a/components/landing/LandingSection.tsx
+++ b/components/landing/LandingSection.tsx
@@ -1,19 +1,28 @@
 import cx from 'classnames'
+import { useTranslation } from 'components/hooks/useTranslation'
 
 type Props = {
   title?: React.ReactNode
   sectionLink?: string
   children?: React.ReactNode
   className?: string
+  headerClassName?: string
+  subLandingDescription?: string
 }
-export const LandingSection = ({ title, children, className, sectionLink }: Props) => {
+export const LandingSection = ({ title, children, className, headerClassName, sectionLink, subLandingDescription }: Props) => {
+  const { t } = useTranslation('product_sublanding')
+
   return (
     <div className={cx('container-xl px-3 px-md-6', className)} id={sectionLink}>
       {title && (
-        <h2 className="font-mktg h1 mb-4">
+        <h2 className={cx('font-mktg', headerClassName)}>
           {sectionLink ? <a href={`#${sectionLink}`}>{title}</a> : title}
         </h2>
       )}
+      {subLandingDescription && <div
+        className="lead-mktg color-text-secondary f4 description-text"
+        dangerouslySetInnerHTML={{ __html: t(subLandingDescription) }}
+      />}
       {children}
     </div>
   )
diff --git a/components/landing/ProductLanding.tsx b/components/landing/ProductLanding.tsx
index 1be848909c..0b83c74e8d 100644
--- a/components/landing/ProductLanding.tsx
+++ b/components/landing/ProductLanding.tsx
@@ -23,7 +23,7 @@ export const ProductLanding = () => {
 
   return (
     <DefaultLayout>
-      <LandingSection className="pt-3">
+      <LandingSection className="pt-3" headerClassName="h1 mb-4">
         <LandingHero />
       </LandingSection>
 
@@ -32,19 +32,19 @@ export const ProductLanding = () => {
       </LandingSection>
 
       {productCodeExamples.length > 0 && (
-        <LandingSection title={t('code_examples')} className="my-6">
+        <LandingSection title={t('code_examples')} className="my-6" headerClassName="h1 mb-4">
           <CodeExamples />
         </LandingSection>
       )}
 
       {productCommunityExamples.length > 0 && (
-        <LandingSection title={t('communities_using_discussions')} className="my-6">
+        <LandingSection title={t('communities_using_discussions')} className="my-6" headerClassName="h1 mb-4">
           <CommunityExamples />
         </LandingSection>
       )}
 
       {productUserExamples.length > 0 && (
-        <LandingSection title={t('sponsor_community')} className="my-6">
+        <LandingSection title={t('sponsor_community')} className="my-6" headerClassName="h1 mb-4">
           <SponsorsExamples />
         </LandingSection>
       )}
@@ -55,13 +55,13 @@ export const ProductLanding = () => {
 
       {guideCards.length > 0 && (
         <div className="color-bg-tertiary py-6 my-8">
-          <LandingSection title={t('guides')} className="my-6">
+          <LandingSection title={t('guides')} className="my-6" headerClassName="h1 mb-4">
             <GuideCards />
           </LandingSection>
         </div>
       )}
 
-      <LandingSection sectionLink="all-docs" title={`All ${shortTitle} Docs`}>
+      <LandingSection sectionLink="all-docs" title={`All ${shortTitle} Docs`} headerClassName="mb-4">
         <ProductArticlesList />
       </LandingSection>
     </DefaultLayout>
diff --git a/components/sublanding/ProductSubLanding.tsx b/components/sublanding/ProductSubLanding.tsx
index 23a1984a61..a2dd4a2a40 100644
--- a/components/sublanding/ProductSubLanding.tsx
+++ b/components/sublanding/ProductSubLanding.tsx
@@ -1,7 +1,7 @@
 import { DefaultLayout } from 'components/DefaultLayout'
 import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
 import React from 'react'
-import { SubLandingSection } from 'components/sublanding/SubLandingSection'
+import { LandingSection } from 'components/landing/LandingSection'
 import { SubLandingHero } from 'components/sublanding/SubLandingHero'
 import { LearningTracks } from 'components/sublanding/LearningTracks'
 import { ArticleCards } from 'components/sublanding/ArticleCards'
@@ -15,20 +15,20 @@ export const ProductSubLanding = () => {
   
   return (
     <DefaultLayout>
-      <SubLandingSection>
+      <LandingSection>
         <SubLandingHero />
-      </SubLandingSection>
+      </LandingSection>
 
       {learningTracks && learningTracks.length > 0 && (
-        <SubLandingSection title={`${title} learning paths`} className="border-top py-6" sectionLink="learning-paths" description="learning_paths_desc">
+        <LandingSection title={`${title} learning paths`} className="border-top py-6" sectionLink="learning-paths" headerClassName="mb-3" subLandingDescription="learning_paths_desc">
           <LearningTracks />
-        </SubLandingSection>
+        </LandingSection>
       )}
 
       {includeGuides && (
-        <SubLandingSection title={`All ${title} guides`} className="border-top py-6 color-border-primary" sectionLink="all-guides">
+        <LandingSection title={`All ${title} guides`} className="border-top py-6 color-border-primary" sectionLink="all-guides" headerClassName="mb-3">
           <ArticleCards />
-        </SubLandingSection>
+        </LandingSection>
       )}
     </DefaultLayout>
   )
diff --git a/components/sublanding/SubLandingSection.tsx b/components/sublanding/SubLandingSection.tsx
deleted file mode 100644
index ab49ab3007..0000000000
--- a/components/sublanding/SubLandingSection.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import cx from 'classnames'
-import { useTranslation } from 'components/hooks/useTranslation'
-
-type Props = {
-  title?: React.ReactNode
-  sectionLink?: string
-  children?: React.ReactNode
-  className?: string
-  description?: string
-}
-
-export const SubLandingSection = ({ title, children, className, sectionLink, description }: Props) => {
-  const { t } = useTranslation('product_sublanding')
-
-  return (
-    <div className={cx('container-xl px-3 px-md-6 pt-3 pb-2', className)}>
-      <h2 className="mb-3 font-mktg" id={sectionLink}>
-        {sectionLink ? <a href={`#${sectionLink}`}>{title}</a> : title}
-      </h2>
-      {description && <div
-        className="lead-mktg color-text-secondary f4 description-text"
-        dangerouslySetInnerHTML={{ __html: t(description) }}
-      />}
-      {children}
-    </div>
-    
-  )
-}

From 05dd7c48922141902dfda65b9fc8728e63c9a05c Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Wed, 9 Jun 2021 22:07:30 -0700
Subject: [PATCH 11/15] remove console log

---
 components/Breadcrumbs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
index 7e9e2427b4..2393efe687 100644
--- a/components/Breadcrumbs.tsx
+++ b/components/Breadcrumbs.tsx
@@ -14,7 +14,7 @@ export const Breadcrumbs = (props: Props) => {
   const router = useRouter()
   const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
   const { breadcrumbs } = useMainContext()
-  console.log(pathWithLocale)
+
   return (
     <nav className="breadcrumbs f5" aria-label="Breadcrumb">
       {Object.values(breadcrumbs).map((breadcrumb) => {

From 2e30d1cc4624477d43c4345f5c722dc8e316521d Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Thu, 10 Jun 2021 14:14:23 -0700
Subject: [PATCH 12/15] fixing json context and ran lint

---
 .../context/ProductSubLandingContext.tsx      |  44 ++++---
 components/landing/LandingSection.tsx         |  17 +--
 components/landing/ProductLanding.tsx         |  12 +-
 components/sublanding/ArticleCard.tsx         |  17 ++-
 components/sublanding/ArticleCards.tsx        |  52 ++++----
 components/sublanding/LearningTrack.tsx       | 112 ++++++++++--------
 components/sublanding/LearningTracks.tsx      |   5 +-
 components/sublanding/ProductSubLanding.tsx   |  23 ++--
 components/sublanding/SubLandingHero.tsx      | 106 ++++++++++-------
 9 files changed, 231 insertions(+), 157 deletions(-)

diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index 62fdd6238a..4b505e3184 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -1,24 +1,25 @@
 import { createContext, useContext } from 'react'
 import pick from 'lodash/pick'
+import _ from 'lodash'
 
 export type FeaturedTrack = {
-  trackName: string,
-  title: string,
+  trackName: string
+  title: string
   description: string
-  guides?: Array<{ href: string; page: { type: string}; title: string; intro: string }>;
+  guides?: Array<{ href: string; page: { type: string }; title: string; intro: string }>
 }
 
 export type ArticleGuide = {
-  href: string,
-  title: string,
-  intro: string,
-  type: string,
+  href: string
+  title: string
+  intro: string
+  type: string
   topics: Array<string>
 }
 
 export type ProductSubLandingContextT = {
-  title: string,
-  intro: string,
+  title: string
+  intro: string
   featuredTrack?: FeaturedTrack
   learningTracks?: Array<FeaturedTrack>
   includeGuides?: Array<ArticleGuide>
@@ -43,13 +44,22 @@ export const getProductSubLandingContextFromRequest = (req: any): ProductSubLand
   const page = req.context.page
 
   return {
-    ...pick(page, [
-      'intro',
-      'allTopics'
-    ]),
-    title: req.context.productMap[req.context.currentProduct].name,    
-    featuredTrack: page.featuredTrack === undefined ? null : JSON.parse(JSON.stringify(page.featuredTrack)),
-    learningTracks: page.learningTracks === undefined ? null : JSON.parse(JSON.stringify(page.learningTracks)),
-    includeGuides: page.includeGuides === undefined ? null : JSON.parse(JSON.stringify(page.includeGuides))
+    ...pick(page, ['intro', 'allTopics']),
+    title: req.context.productMap[req.context.currentProduct].name,
+    featuredTrack: {
+      ...pick(page.featuredTrack, ['title', 'description', 'trackName', 'guides']),
+      guides: (page.featuredTrack?.guides || []).map((guide: any) => {
+        return pick(guide, ['title', 'intro', 'href', 'page.type'])
+      }),
+    },
+    learningTracks: (page.learningTracks || []).map((track: any) => ({
+      ...pick(track, ['title', 'description', 'trackName', 'guides']),
+      guides: (track.guides || []).map((guide: any) => {
+        return pick(guide, ['title', 'intro', 'href', 'page.type'])
+      }),
+    })),
+    includeGuides: (page.includeGuides || []).map((guide: any) => {
+      return pick(guide, ['href', 'title', 'intro', 'type', 'topics'])
+    }),
   }
 }
diff --git a/components/landing/LandingSection.tsx b/components/landing/LandingSection.tsx
index ffb685c18c..fe799357e0 100644
--- a/components/landing/LandingSection.tsx
+++ b/components/landing/LandingSection.tsx
@@ -6,23 +6,24 @@ type Props = {
   sectionLink?: string
   children?: React.ReactNode
   className?: string
-  headerClassName?: string
-  subLandingDescription?: string
+  description?: string
 }
-export const LandingSection = ({ title, children, className, headerClassName, sectionLink, subLandingDescription }: Props) => {
+export const LandingSection = ({ title, children, className, sectionLink, description }: Props) => {
   const { t } = useTranslation('product_sublanding')
 
   return (
     <div className={cx('container-xl px-3 px-md-6', className)} id={sectionLink}>
       {title && (
-        <h2 className={cx('font-mktg', headerClassName)}>
+        <h2 className={cx('font-mktg', !!description ? 'mb-3' : 'mb-4')}>
           {sectionLink ? <a href={`#${sectionLink}`}>{title}</a> : title}
         </h2>
       )}
-      {subLandingDescription && <div
-        className="lead-mktg color-text-secondary f4 description-text"
-        dangerouslySetInnerHTML={{ __html: t(subLandingDescription) }}
-      />}
+      {description && (
+        <div
+          className="lead-mktg color-text-secondary f4 description-text"
+          dangerouslySetInnerHTML={{ __html: t(description) }}
+        />
+      )}
       {children}
     </div>
   )
diff --git a/components/landing/ProductLanding.tsx b/components/landing/ProductLanding.tsx
index 0b83c74e8d..1be848909c 100644
--- a/components/landing/ProductLanding.tsx
+++ b/components/landing/ProductLanding.tsx
@@ -23,7 +23,7 @@ export const ProductLanding = () => {
 
   return (
     <DefaultLayout>
-      <LandingSection className="pt-3" headerClassName="h1 mb-4">
+      <LandingSection className="pt-3">
         <LandingHero />
       </LandingSection>
 
@@ -32,19 +32,19 @@ export const ProductLanding = () => {
       </LandingSection>
 
       {productCodeExamples.length > 0 && (
-        <LandingSection title={t('code_examples')} className="my-6" headerClassName="h1 mb-4">
+        <LandingSection title={t('code_examples')} className="my-6">
           <CodeExamples />
         </LandingSection>
       )}
 
       {productCommunityExamples.length > 0 && (
-        <LandingSection title={t('communities_using_discussions')} className="my-6" headerClassName="h1 mb-4">
+        <LandingSection title={t('communities_using_discussions')} className="my-6">
           <CommunityExamples />
         </LandingSection>
       )}
 
       {productUserExamples.length > 0 && (
-        <LandingSection title={t('sponsor_community')} className="my-6" headerClassName="h1 mb-4">
+        <LandingSection title={t('sponsor_community')} className="my-6">
           <SponsorsExamples />
         </LandingSection>
       )}
@@ -55,13 +55,13 @@ export const ProductLanding = () => {
 
       {guideCards.length > 0 && (
         <div className="color-bg-tertiary py-6 my-8">
-          <LandingSection title={t('guides')} className="my-6" headerClassName="h1 mb-4">
+          <LandingSection title={t('guides')} className="my-6">
             <GuideCards />
           </LandingSection>
         </div>
       )}
 
-      <LandingSection sectionLink="all-docs" title={`All ${shortTitle} Docs`} headerClassName="mb-4">
+      <LandingSection sectionLink="all-docs" title={`All ${shortTitle} Docs`}>
         <ProductArticlesList />
       </LandingSection>
     </DefaultLayout>
diff --git a/components/sublanding/ArticleCard.tsx b/components/sublanding/ArticleCard.tsx
index 5df97ae792..a010e234ac 100644
--- a/components/sublanding/ArticleCard.tsx
+++ b/components/sublanding/ArticleCard.tsx
@@ -1,4 +1,4 @@
-import { ArticleGuide } from "components/context/ProductSubLandingContext"
+import { ArticleGuide } from 'components/context/ProductSubLandingContext'
 
 type Props = {
   card: ArticleGuide
@@ -8,19 +8,24 @@ type Props = {
 
 export const ArticleCard = ({ card, type, display }: Props) => {
   return (
-    <div className={`d-flex col-12 col-md-4 pr-0 pr-md-6 pr-lg-8 ${display} js-filter-card`} data-type={card.type} data-topics={card.topics.join(',')}>
+    <div
+      className={`d-flex col-12 col-md-4 pr-0 pr-md-6 pr-lg-8 ${display} js-filter-card`}
+      data-type={card.type}
+      data-topics={card.topics.join(',')}
+    >
       <a className="no-underline d-flex flex-column py-3 border-bottom" href={card.href}>
         <h4 className="h4 color-text-primary mb-1">{card.title}</h4>
         <div className="h6 text-uppercase">{type}</div>
         <p className="color-text-secondary my-3">{card.intro}</p>
         {card.topics.length > 0 && (
           <div>
-            {card.topics.map((topic)=> {
+            {card.topics.map((topic) => {
               return (
-                <span className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1">{topic}</span>
+                <span className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1">
+                  {topic}
+                </span>
               )
-            })
-            }
+            })}
           </div>
         )}
       </a>
diff --git a/components/sublanding/ArticleCards.tsx b/components/sublanding/ArticleCards.tsx
index defd7c92ae..701c5c1e8c 100644
--- a/components/sublanding/ArticleCards.tsx
+++ b/components/sublanding/ArticleCards.tsx
@@ -6,46 +6,56 @@ const MAX_ARTICLES = 9
 export const ArticleCards = () => {
   const { t } = useTranslation('product_sublanding')
   const guideTypes = t('guide_types')
-  const {
-    allTopics,
-    includeGuides,
-  } = useProductSubLandingContext()
+  const { allTopics, includeGuides } = useProductSubLandingContext()
 
   return (
     <div>
       <form className="mt-2 mb-5 d-flex d-flex">
         <div>
-          <label htmlFor="type" className="text-uppercase f6 color-text-secondary d-block">{t('filters.type')}</label>
-          <select className="form-select js-filter-card-filter-dropdown f4 text-bold border-0 rounded-0 border-top box-shadow-none pl-0 js-filter-card-filter-dropdown" name="type" aria-label="guide types">
+          <label htmlFor="type" className="text-uppercase f6 color-text-secondary d-block">
+            {t('filters.type')}
+          </label>
+          <select
+            className="form-select js-filter-card-filter-dropdown f4 text-bold border-0 rounded-0 border-top box-shadow-none pl-0 js-filter-card-filter-dropdown"
+            name="type"
+            aria-label="guide types"
+          >
             <option value="">{t('filters.all')}</option>
-              {Object.keys(guideTypes).map((key) => {
-                return (
-                  <option value={key}>{guideTypes[key]}</option>
-                )
-                })}
+            {Object.keys(guideTypes).map((key) => {
+              return <option value={key}>{guideTypes[key]}</option>
+            })}
           </select>
         </div>
         <div className="mx-4">
-          <label htmlFor="topic" className="text-uppercase f6 color-text-secondary d-block">{t('filters.topic')}</label>
-          <select className="form-select js-filter-card-filter-dropdown f4 text-bold border-0 rounded-0 border-top box-shadow-none pl-0 js-filter-card-filter-dropdown" name="topics" aria-label="guide topics">
+          <label htmlFor="topic" className="text-uppercase f6 color-text-secondary d-block">
+            {t('filters.topic')}
+          </label>
+          <select
+            className="form-select js-filter-card-filter-dropdown f4 text-bold border-0 rounded-0 border-top box-shadow-none pl-0 js-filter-card-filter-dropdown"
+            name="topics"
+            aria-label="guide topics"
+          >
             <option value="">{t('filters.all')}</option>
             {allTopics?.map((topic) => {
-              return (
-                <option value={topic}>{topic}</option>
-              )
+              return <option value={topic}>{topic}</option>
             })}
           </select>
         </div>
       </form>
       <div className="d-flex flex-wrap mr-0 mr-md-n6 mr-lg-n8">
         {(includeGuides || []).map((card, index) => {
-          return index + 1 > MAX_ARTICLES ? 
-            <ArticleCard card={card} type={guideTypes[card.type]} display={'d-none'}/>
-            : <ArticleCard card={card} type={guideTypes[card.type]} />
+          return index + 1 > MAX_ARTICLES ? (
+            <ArticleCard card={card} type={guideTypes[card.type]} display={'d-none'} />
+          ) : (
+            <ArticleCard card={card} type={guideTypes[card.type]} />
+          )
         })}
       </div>
       {includeGuides && includeGuides.length > MAX_ARTICLES && (
-        <button className="col-12 mt-5 text-center text-bold color-text-link btn-link js-filter-card-show-more" data-js-filter-card-max={MAX_ARTICLES}>
+        <button
+          className="col-12 mt-5 text-center text-bold color-text-link btn-link js-filter-card-show-more"
+          data-js-filter-card-max={MAX_ARTICLES}
+        >
           {t('load_more')}
         </button>
       )}
@@ -54,4 +64,4 @@ export const ArticleCards = () => {
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/components/sublanding/LearningTrack.tsx b/components/sublanding/LearningTrack.tsx
index 419f2a442a..b5c93848ac 100644
--- a/components/sublanding/LearningTrack.tsx
+++ b/components/sublanding/LearningTrack.tsx
@@ -1,7 +1,7 @@
-import { useTranslation } from "components/hooks/useTranslation";
+import { useTranslation } from 'components/hooks/useTranslation'
 import { ArrowRightIcon } from '@primer/octicons-react'
-import { useState } from "react";
-import { FeaturedTrack } from "components/context/ProductSubLandingContext";
+import { useState } from 'react'
+import { FeaturedTrack } from 'components/context/ProductSubLandingContext'
 
 type Props = {
   track: FeaturedTrack
@@ -9,57 +9,73 @@ type Props = {
 
 const MAX_VISIBLE_GUIDES = 4
 export const LearningTrack = ({ track }: Props) => {
-  const guides = track.guides
-  const [ visibleGuides, setVisibleGuides ] = useState(guides?.slice(0, 4))
+  // const guides = track?.guides
+  const [visibleGuides, setVisibleGuides] = useState(track.guides?.slice(0, 4))
   const showAll = () => {
-    setVisibleGuides(guides)
+    setVisibleGuides(track.guides)
   }
   const { t } = useTranslation('product_sublanding')
 
- return (
-  <div className="my-3 px-4 col-12 col-md-6 learning-track">
-    <div className="Box js-show-more-container d-flex flex-column">
-      <div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
-        <div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
-          <div className="my-xl-0 mr-xl-3">
-            <h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">
-              {track.title}
-            </h5>
-            <p className="color-text-inverse truncate-overflow-3 learning-track--description">{track.description}</p>
+  return (
+    <div className="my-3 px-4 col-12 col-md-6 learning-track">
+      <div className="Box js-show-more-container d-flex flex-column">
+        <div className="Box-header bg-gradient--blue-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
+          <div className="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
+            <div className="my-xl-0 mr-xl-3">
+              <h5 className="mb-3 color-text-inverse font-mktg h3-mktg ">{track.title}</h5>
+              <p className="color-text-inverse truncate-overflow-3 learning-track--description">
+                {track.description}
+              </p>
+            </div>
           </div>
-        </div>
-      <a 
-        className="d-inline-block border color-border-inverse color-text-inverse px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0" 
-        role="button" 
-        href="{{ track.guides[0].href }}?learn={{ track.trackName }}"
-      >
-        {t('start')}
-        <span className="mr-2">
-          <ArrowRightIcon size={20} />
-        </span>
-      </a>
-    </div>
-    {visibleGuides?.map((guide) => 
-      <div>
-        <a className="Box-row d-flex flex-items-center color-text-primary no-underline js-show-more-item" href={`${guide.href}?learn=${track.trackName}`}>
-          <div className="circle color-bg-tertiary d-inline-flex mr-4">
-            {guides && <span className="m-2 f3 lh-condensed-ultra text-center text-bold step-circle-text">{guides?.indexOf(guide)+1}</span>}
-          </div>
-          <h5 className="flex-auto pr-2">{guide.title}</h5>
-          <div className="color-text-tertiary h6 text-uppercase">{t('guide_types')[guide.page.type]}</div>
-        </a>
-        {guides && guides?.indexOf(guide) + 1 == MAX_VISIBLE_GUIDES ? (
-          <a 
-            className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
-            onClick={showAll}
+          <a
+            className="d-inline-block border color-border-inverse color-text-inverse px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0"
+            role="button"
+            href={`${track.guides && track.guides[0].href}?learn=${track.trackName}`}
           >
-            <div className="position-absolute left-0 right-0 py-5 fade-background-bottom" style={{ bottom: '50px' }}></div>
-            <span>Show {guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}</span>
+            {t('start')}
+            <span className="mr-2">
+              <ArrowRightIcon size={20} />
+            </span>
           </a>
-        ) : <div />}
+        </div>
+        {visibleGuides?.map((guide) => (
+          <div>
+            <a
+              className="Box-row d-flex flex-items-center color-text-primary no-underline js-show-more-item"
+              href={`${guide.href}?learn=${track.trackName}`}
+            >
+              <div className="circle color-bg-tertiary d-inline-flex mr-4">
+                {track.guides && (
+                  <span className="m-2 f3 lh-condensed-ultra text-center text-bold step-circle-text">
+                    {track.guides?.indexOf(guide) + 1}
+                  </span>
+                )}
+              </div>
+              <h5 className="flex-auto pr-2">{guide.title}</h5>
+              <div className="color-text-tertiary h6 text-uppercase">
+                {t('guide_types')[guide.page.type]}
+              </div>
+            </a>
+            {track.guides && track.guides?.indexOf(guide) + 1 == MAX_VISIBLE_GUIDES ? (
+              <a
+                className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
+                onClick={showAll}
+              >
+                <div
+                  className="position-absolute left-0 right-0 py-5 fade-background-bottom"
+                  style={{ bottom: '50px' }}
+                ></div>
+                <span>
+                  Show {track.guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}
+                </span>
+              </a>
+            ) : (
+              <div />
+            )}
+          </div>
+        ))}
       </div>
-    )}
     </div>
-  </div>
- )
-}
\ No newline at end of file
+  )
+}
diff --git a/components/sublanding/LearningTracks.tsx b/components/sublanding/LearningTracks.tsx
index a946886742..0bb2e5b6c9 100644
--- a/components/sublanding/LearningTracks.tsx
+++ b/components/sublanding/LearningTracks.tsx
@@ -3,13 +3,14 @@ import { LearningTrack } from 'components/sublanding/LearningTrack'
 
 export const LearningTracks = () => {
   const { learningTracks } = useProductSubLandingContext()
+
   return (
     <div>
       <div className="d-flex flex-wrap flex-items-start my-5 gutter">
-        {(learningTracks || []).map((track) => {
+        {(learningTracks || []).map((track: any) => {
           return <LearningTrack track={track} />
         })}
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/components/sublanding/ProductSubLanding.tsx b/components/sublanding/ProductSubLanding.tsx
index a2dd4a2a40..ef461f4a3d 100644
--- a/components/sublanding/ProductSubLanding.tsx
+++ b/components/sublanding/ProductSubLanding.tsx
@@ -7,26 +7,31 @@ import { LearningTracks } from 'components/sublanding/LearningTracks'
 import { ArticleCards } from 'components/sublanding/ArticleCards'
 
 export const ProductSubLanding = () => {
-  const {
-    title,
-    learningTracks,
-    includeGuides
-  } = useProductSubLandingContext()
-  
+  const { title, learningTracks, includeGuides } = useProductSubLandingContext()
+
   return (
     <DefaultLayout>
-      <LandingSection>
+      <LandingSection className="pt-3">
         <SubLandingHero />
       </LandingSection>
 
       {learningTracks && learningTracks.length > 0 && (
-        <LandingSection title={`${title} learning paths`} className="border-top py-6" sectionLink="learning-paths" headerClassName="mb-3" subLandingDescription="learning_paths_desc">
+        <LandingSection
+          title={`${title} learning paths`}
+          className="border-top py-6"
+          sectionLink="learning-paths"
+          description="learning_paths_desc"
+        >
           <LearningTracks />
         </LandingSection>
       )}
 
       {includeGuides && (
-        <LandingSection title={`All ${title} guides`} className="border-top py-6 color-border-primary" sectionLink="all-guides" headerClassName="mb-3">
+        <LandingSection
+          title={`All ${title} guides`}
+          className="border-top py-6 color-border-primary"
+          sectionLink="all-guides"
+        >
           <ArticleCards />
         </LandingSection>
       )}
diff --git a/components/sublanding/SubLandingHero.tsx b/components/sublanding/SubLandingHero.tsx
index b5cf81f1bd..ff7e0f034e 100644
--- a/components/sublanding/SubLandingHero.tsx
+++ b/components/sublanding/SubLandingHero.tsx
@@ -7,56 +7,82 @@ export const SubLandingHero = () => {
   const { title, intro, featuredTrack } = useProductSubLandingContext()
   const { t } = useTranslation('product_sublanding')
 
-  const guideItems = featuredTrack?.guides?.map((guide) => 
+  const guideItems = featuredTrack?.guides?.map((guide) => (
     <li className="px-2 d-flex flex-shrink-0">
-      <a href={`${guide.href}?learn=${featuredTrack.trackName}`} className="d-inline-block Box p-5 color-bg-primary color-border-primary no-underline">
+      <a
+        href={`${guide.href}?learn=${featuredTrack.trackName}`}
+        className="d-inline-block Box p-5 color-bg-primary color-border-primary no-underline"
+      >
         <div className="d-flex flex-justify-between flex-items-center">
           <div className="circle color-bg-primary color-text-link border-gradient--pink-blue-dark d-inline-flex">
-            {featuredTrack.guides && <span className="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text" style={{ width: '24px', height: '24px'}}>{featuredTrack.guides?.indexOf(guide)+1}</span>}
+            {featuredTrack.guides && (
+              <span
+                className="m-2 f2 lh-condensed-ultra text-center text-bold step-circle-text"
+                style={{ width: '24px', height: '24px' }}
+              >
+                {featuredTrack.guides?.indexOf(guide) + 1}
+              </span>
+            )}
+          </div>
+          <div className="color-text-tertiary h6 text-uppercase">
+            {t('guide_types')[guide.page.type]}
           </div>
-          <div className="color-text-tertiary h6 text-uppercase">{t('guide_types')[guide.page.type]}</div>
         </div>
         <h3 className="font-mktg h3-mktg my-4 color-text-primary">{guide.title}</h3>
-        <div className="lead-mktg color-text-secondary f5 my-4 truncate-overflow-8">{guide.intro}</div>
+        <div className="lead-mktg color-text-secondary f5 my-4 truncate-overflow-8">
+          {guide.intro}
+        </div>
       </a>
     </li>
-  )
+  ))
 
   return (
     <div>
-    <header className="d-flex gutter mb-6">
-      <div className="col-12">
-        <Breadcrumbs />
-        <h1 className="my-3 font-mktg">{title} guides</h1>
-        <div 
-          className="lead-mktg color-text-secondary f4 description-text" 
-          dangerouslySetInnerHTML={{ __html: intro }} 
-        />
-      </div>
-    </header>
-    {featuredTrack && <div className="mb-6 position-relative overflow-hidden mr-n3 ml-n3 px-3">
-      <ul className="list-style-none d-flex flex-nowrap overflow-x-scroll px-2 feature-track">
-        <li className="px-2 d-flex flex-shrink-0">
-          <div className="d-inline-block Box p-5 bg-gradient--blue-pink color-text-inverse">
-            <div className="circle color-text-inverse d-inline-flex" style={{ border: "2px white solid" }}>
-              <StarFillIcon className="v-align-middle m-2" size={24} />
-            </div>
-            <h3 className="font-mktg h3-mktg my-4">{featuredTrack.title}</h3>
-            <div className="lead-mktg color-text-inverse f5 my-4">{featuredTrack.description}</div>          
-            {featuredTrack.guides && <a className="d-inline-block border color-border-inverse color-text-inverse px-4 py-2 f5 no-underline text-bold" role="button" href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}`}>
-              <span className="mr-2">
-                <ArrowRightIcon size={20} />
-              </span>
-              {t(`start_path`)}
-            </a>}
-          </div>
-        </li>
-          {guideItems}
-      </ul>
-      <div className="position-absolute top-0 bottom-0 left-0 ml-3 pl-3 fade-background-left"></div>
-      <div className="position-absolute top-0 bottom-0 right-0 mr-3 pr-3 fade-background-right"></div>
-    </div>
-    }
+      <header className="d-flex gutter mb-6">
+        <div className="col-12">
+          <Breadcrumbs />
+          <h1 className="my-3 font-mktg">{title} guides</h1>
+          <div
+            className="lead-mktg color-text-secondary f4 description-text"
+            dangerouslySetInnerHTML={{ __html: intro }}
+          />
+        </div>
+      </header>
+      {featuredTrack && (
+        <div className="mb-6 position-relative overflow-hidden mr-n3 ml-n3 px-3">
+          <ul className="list-style-none d-flex flex-nowrap overflow-x-scroll px-2 feature-track">
+            <li className="px-2 d-flex flex-shrink-0">
+              <div className="d-inline-block Box p-5 bg-gradient--blue-pink color-text-inverse">
+                <div
+                  className="circle color-text-inverse d-inline-flex"
+                  style={{ border: '2px white solid' }}
+                >
+                  <StarFillIcon className="v-align-middle m-2" size={24} />
+                </div>
+                <h3 className="font-mktg h3-mktg my-4">{featuredTrack.title}</h3>
+                <div className="lead-mktg color-text-inverse f5 my-4">
+                  {featuredTrack.description}
+                </div>
+                {featuredTrack.guides && (
+                  <a
+                    className="d-inline-block border color-border-inverse color-text-inverse px-4 py-2 f5 no-underline text-bold"
+                    role="button"
+                    href={`${featuredTrack.guides[0].href}?learn=${featuredTrack.trackName}`}
+                  >
+                    <span className="mr-2">
+                      <ArrowRightIcon size={20} />
+                    </span>
+                    {t(`start_path`)}
+                  </a>
+                )}
+              </div>
+            </li>
+            {guideItems}
+          </ul>
+          <div className="position-absolute top-0 bottom-0 left-0 ml-3 pl-3 fade-background-left"></div>
+          <div className="position-absolute top-0 bottom-0 right-0 mr-3 pr-3 fade-background-right"></div>
+        </div>
+      )}
     </div>
   )
-}
\ No newline at end of file
+}

From d635ee5cf41e709ca48a7b9cdb953eab082810c6 Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Thu, 10 Jun 2021 14:32:36 -0700
Subject: [PATCH 13/15] fix lint errors

---
 components/Breadcrumbs.tsx                    | 32 +++++++++----------
 .../context/ProductSubLandingContext.tsx      |  1 -
 components/landing/CodeExampleCard.tsx        |  6 +++-
 components/landing/LandingSection.tsx         |  2 +-
 components/sublanding/LearningTrack.tsx       |  7 ++--
 5 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/components/Breadcrumbs.tsx b/components/Breadcrumbs.tsx
index bfdb7a9abf..2992f79856 100644
--- a/components/Breadcrumbs.tsx
+++ b/components/Breadcrumbs.tsx
@@ -26,21 +26,8 @@ export const Breadcrumbs = () => {
           <span key={title} title={title}>
             {breadcrumb.title}
           </span>
-          ) : pathWithLocale.includes('/guides') ? (
-            <span className='text-mono color-text-secondary text-uppercase'>
-              <Link
-                key={title}
-                href={breadcrumb.href}
-                title={title}
-                className={cx(
-                  'd-inline-block',
-                  pathWithLocale === breadcrumb.href && 'color-text-tertiary'
-                )}
-              >
-                {breadcrumb.title}
-              </Link>
-            </span>
-          ) : (
+        ) : pathWithLocale.includes('/guides') ? (
+          <span className="text-mono color-text-secondary text-uppercase">
             <Link
               key={title}
               href={breadcrumb.href}
@@ -52,7 +39,20 @@ export const Breadcrumbs = () => {
             >
               {breadcrumb.title}
             </Link>
-          )
+          </span>
+        ) : (
+          <Link
+            key={title}
+            href={breadcrumb.href}
+            title={title}
+            className={cx(
+              'd-inline-block',
+              pathWithLocale === breadcrumb.href && 'color-text-tertiary'
+            )}
+          >
+            {breadcrumb.title}
+          </Link>
+        )
       })}
     </nav>
   )
diff --git a/components/context/ProductSubLandingContext.tsx b/components/context/ProductSubLandingContext.tsx
index 4b505e3184..0611a9cfd0 100644
--- a/components/context/ProductSubLandingContext.tsx
+++ b/components/context/ProductSubLandingContext.tsx
@@ -1,6 +1,5 @@
 import { createContext, useContext } from 'react'
 import pick from 'lodash/pick'
-import _ from 'lodash'
 
 export type FeaturedTrack = {
   trackName: string
diff --git a/components/landing/CodeExampleCard.tsx b/components/landing/CodeExampleCard.tsx
index f04e882524..42c2dcc63c 100644
--- a/components/landing/CodeExampleCard.tsx
+++ b/components/landing/CodeExampleCard.tsx
@@ -29,7 +29,11 @@ export const CodeExampleCard = ({ example }: Props) => {
       </div>
       <footer className="border-top p-4 color-text-secondary d-flex flex-items-center">
         <RepoIcon className="flex-shrink-0" />
-        <TruncateLines as="span" maxLines={1} className="ml-2 text-mono text-small color-text-link line-break-anywhere">
+        <TruncateLines
+          as="span"
+          maxLines={1}
+          className="ml-2 text-mono text-small color-text-link line-break-anywhere"
+        >
           {example.href}
         </TruncateLines>
       </footer>
diff --git a/components/landing/LandingSection.tsx b/components/landing/LandingSection.tsx
index fe799357e0..a1956fc14c 100644
--- a/components/landing/LandingSection.tsx
+++ b/components/landing/LandingSection.tsx
@@ -14,7 +14,7 @@ export const LandingSection = ({ title, children, className, sectionLink, descri
   return (
     <div className={cx('container-xl px-3 px-md-6', className)} id={sectionLink}>
       {title && (
-        <h2 className={cx('font-mktg', !!description ? 'mb-3' : 'mb-4')}>
+        <h2 className={cx('font-mktg', !description ? 'mb-3' : 'mb-4')}>
           {sectionLink ? <a href={`#${sectionLink}`}>{title}</a> : title}
         </h2>
       )}
diff --git a/components/sublanding/LearningTrack.tsx b/components/sublanding/LearningTrack.tsx
index b5c93848ac..c1c59f59a4 100644
--- a/components/sublanding/LearningTrack.tsx
+++ b/components/sublanding/LearningTrack.tsx
@@ -9,7 +9,6 @@ type Props = {
 
 const MAX_VISIBLE_GUIDES = 4
 export const LearningTrack = ({ track }: Props) => {
-  // const guides = track?.guides
   const [visibleGuides, setVisibleGuides] = useState(track.guides?.slice(0, 4))
   const showAll = () => {
     setVisibleGuides(track.guides)
@@ -57,8 +56,8 @@ export const LearningTrack = ({ track }: Props) => {
                 {t('guide_types')[guide.page.type]}
               </div>
             </a>
-            {track.guides && track.guides?.indexOf(guide) + 1 == MAX_VISIBLE_GUIDES ? (
-              <a
+            {track.guides && track.guides?.indexOf(guide) + 1 === MAX_VISIBLE_GUIDES ? (
+              <button
                 className="Box-footer btn-link border-top-0 position-relative text-center text-bold color-text-link pt-1 pb-3 col-12 js-show-more-button"
                 onClick={showAll}
               >
@@ -69,7 +68,7 @@ export const LearningTrack = ({ track }: Props) => {
                 <span>
                   Show {track.guides?.length - MAX_VISIBLE_GUIDES} {t(`more_guides`)}
                 </span>
-              </a>
+              </button>
             ) : (
               <div />
             )}

From a7adf8ce26981f2d882878c1da3ebd959657148f Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Fri, 11 Jun 2021 08:44:05 -0700
Subject: [PATCH 14/15] Making changes from Mikes feedback

---
 components/sublanding/ArticleCard.tsx    |  4 ++--
 components/sublanding/ArticleCards.tsx   | 12 ++++++------
 components/sublanding/LearningTracks.tsx |  6 +++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/sublanding/ArticleCard.tsx b/components/sublanding/ArticleCard.tsx
index a010e234ac..7831bcf949 100644
--- a/components/sublanding/ArticleCard.tsx
+++ b/components/sublanding/ArticleCard.tsx
@@ -19,9 +19,9 @@ export const ArticleCard = ({ card, type, display }: Props) => {
         <p className="color-text-secondary my-3">{card.intro}</p>
         {card.topics.length > 0 && (
           <div>
-            {card.topics.map((topic) => {
+            {card.topics.map((topic, key) => {
               return (
-                <span className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1">
+                <span key={key} className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1">
                   {topic}
                 </span>
               )
diff --git a/components/sublanding/ArticleCards.tsx b/components/sublanding/ArticleCards.tsx
index 701c5c1e8c..67131328c4 100644
--- a/components/sublanding/ArticleCards.tsx
+++ b/components/sublanding/ArticleCards.tsx
@@ -21,8 +21,8 @@ export const ArticleCards = () => {
             aria-label="guide types"
           >
             <option value="">{t('filters.all')}</option>
-            {Object.keys(guideTypes).map((key) => {
-              return <option value={key}>{guideTypes[key]}</option>
+            {Object.keys(guideTypes).map((key, index) => {
+              return <option key={index} value={key}>{guideTypes[key]}</option>
             })}
           </select>
         </div>
@@ -36,8 +36,8 @@ export const ArticleCards = () => {
             aria-label="guide topics"
           >
             <option value="">{t('filters.all')}</option>
-            {allTopics?.map((topic) => {
-              return <option value={topic}>{topic}</option>
+            {allTopics?.map((topic, index) => {
+              return <option key={index} value={topic}>{topic}</option>
             })}
           </select>
         </div>
@@ -45,9 +45,9 @@ export const ArticleCards = () => {
       <div className="d-flex flex-wrap mr-0 mr-md-n6 mr-lg-n8">
         {(includeGuides || []).map((card, index) => {
           return index + 1 > MAX_ARTICLES ? (
-            <ArticleCard card={card} type={guideTypes[card.type]} display={'d-none'} />
+            <ArticleCard key={index} card={card} type={guideTypes[card.type]} display={'d-none'} />
           ) : (
-            <ArticleCard card={card} type={guideTypes[card.type]} />
+            <ArticleCard key={index} card={card} type={guideTypes[card.type]} />
           )
         })}
       </div>
diff --git a/components/sublanding/LearningTracks.tsx b/components/sublanding/LearningTracks.tsx
index 0bb2e5b6c9..67ec657a36 100644
--- a/components/sublanding/LearningTracks.tsx
+++ b/components/sublanding/LearningTracks.tsx
@@ -1,4 +1,4 @@
-import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+import { FeaturedTrack, useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
 import { LearningTrack } from 'components/sublanding/LearningTrack'
 
 export const LearningTracks = () => {
@@ -7,8 +7,8 @@ export const LearningTracks = () => {
   return (
     <div>
       <div className="d-flex flex-wrap flex-items-start my-5 gutter">
-        {(learningTracks || []).map((track: any) => {
-          return <LearningTrack track={track} />
+        {(learningTracks || []).map((track: FeaturedTrack, index: number) => {
+          return <LearningTrack key={index} track={track} />
         })}
       </div>
     </div>

From 4685205f234be752f159ef0461dec039ccf04c7b Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Fri, 11 Jun 2021 09:34:46 -0700
Subject: [PATCH 15/15] updating key to not use index

---
 components/sublanding/ArticleCard.tsx    |  4 ++--
 components/sublanding/ArticleCards.tsx   | 14 +++++++-------
 components/sublanding/LearningTracks.tsx |  6 +++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/sublanding/ArticleCard.tsx b/components/sublanding/ArticleCard.tsx
index 7831bcf949..90721a2066 100644
--- a/components/sublanding/ArticleCard.tsx
+++ b/components/sublanding/ArticleCard.tsx
@@ -19,9 +19,9 @@ export const ArticleCard = ({ card, type, display }: Props) => {
         <p className="color-text-secondary my-3">{card.intro}</p>
         {card.topics.length > 0 && (
           <div>
-            {card.topics.map((topic, key) => {
+            {card.topics.map((topic) => {
               return (
-                <span key={key} className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1">
+                <span key={topic} className="IssueLabel bg-gradient--pink-blue color-text-inverse mr-1">
                   {topic}
                 </span>
               )
diff --git a/components/sublanding/ArticleCards.tsx b/components/sublanding/ArticleCards.tsx
index 67131328c4..feafe245f1 100644
--- a/components/sublanding/ArticleCards.tsx
+++ b/components/sublanding/ArticleCards.tsx
@@ -5,7 +5,7 @@ import { ArticleCard } from './ArticleCard'
 const MAX_ARTICLES = 9
 export const ArticleCards = () => {
   const { t } = useTranslation('product_sublanding')
-  const guideTypes = t('guide_types')
+  const guideTypes: Record<string, string> = t('guide_types')
   const { allTopics, includeGuides } = useProductSubLandingContext()
 
   return (
@@ -21,8 +21,8 @@ export const ArticleCards = () => {
             aria-label="guide types"
           >
             <option value="">{t('filters.all')}</option>
-            {Object.keys(guideTypes).map((key, index) => {
-              return <option key={index} value={key}>{guideTypes[key]}</option>
+            {Object.entries(guideTypes).map(([key, val]) => {
+              return <option key={key} value={key}>{val}</option>
             })}
           </select>
         </div>
@@ -36,8 +36,8 @@ export const ArticleCards = () => {
             aria-label="guide topics"
           >
             <option value="">{t('filters.all')}</option>
-            {allTopics?.map((topic, index) => {
-              return <option key={index} value={topic}>{topic}</option>
+            {allTopics?.map((topic) => {
+              return <option key={topic} value={topic}>{topic}</option>
             })}
           </select>
         </div>
@@ -45,9 +45,9 @@ export const ArticleCards = () => {
       <div className="d-flex flex-wrap mr-0 mr-md-n6 mr-lg-n8">
         {(includeGuides || []).map((card, index) => {
           return index + 1 > MAX_ARTICLES ? (
-            <ArticleCard key={index} card={card} type={guideTypes[card.type]} display={'d-none'} />
+            <ArticleCard key={card.title} card={card} type={guideTypes[card.type]} display={'d-none'} />
           ) : (
-            <ArticleCard key={index} card={card} type={guideTypes[card.type]} />
+            <ArticleCard key={card.title} card={card} type={guideTypes[card.type]} />
           )
         })}
       </div>
diff --git a/components/sublanding/LearningTracks.tsx b/components/sublanding/LearningTracks.tsx
index 67ec657a36..dce7f0af00 100644
--- a/components/sublanding/LearningTracks.tsx
+++ b/components/sublanding/LearningTracks.tsx
@@ -1,4 +1,4 @@
-import { FeaturedTrack, useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
+import { useProductSubLandingContext } from 'components/context/ProductSubLandingContext'
 import { LearningTrack } from 'components/sublanding/LearningTrack'
 
 export const LearningTracks = () => {
@@ -7,8 +7,8 @@ export const LearningTracks = () => {
   return (
     <div>
       <div className="d-flex flex-wrap flex-items-start my-5 gutter">
-        {(learningTracks || []).map((track: FeaturedTrack, index: number) => {
-          return <LearningTrack key={index} track={track} />
+        {(learningTracks || []).map((track) => {
+          return <LearningTrack key={track.title} track={track} />
         })}
       </div>
     </div>