starting point set

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>
   )

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 {}
+}

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>
+  )
+}

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),
     },
   }