- setIsMenuOpen(!isMenuOpen)}>
+ setIsMenuOpen(!isMenuOpen)}
+ aria-label="Navigation Menu"
+ >
{isMenuOpen ? : }
diff --git a/components/SidebarNav.tsx b/components/SidebarNav.tsx
index 285e29fe92..524bfb797e 100644
--- a/components/SidebarNav.tsx
+++ b/components/SidebarNav.tsx
@@ -4,17 +4,14 @@ import { LinkExternalIcon, MarkGithubIcon } from '@primer/octicons-react'
import { useTranslation } from './hooks/useTranslation'
import { useMainContext } from './context/MainContext'
import { ProductSiteTree } from './product/ProductSiteTree'
-import { ProductSiteTreeNew } from './product/ProductSiteTreeNew'
import { AllProductsLink } from './product/AllProductsLink'
import { useVersion } from './hooks/useVersion'
-import { useFeatureFlags } from './hooks/useFeatureFlags'
type Props = {}
export const SidebarNav = (props: Props) => {
const router = useRouter()
const { currentVersion } = useVersion()
const { error, relativePath } = useMainContext()
- const { FEATURE_NEW_SITETREE } = useFeatureFlags()
const { t } = useTranslation('header')
return (
@@ -44,7 +41,7 @@ export const SidebarNav = (props: Props) => {
) : (
- {FEATURE_NEW_SITETREE ? : }
+
)}
diff --git a/components/context/MainContext.tsx b/components/context/MainContext.tsx
index 2380d5560b..9cdc7f32e5 100644
--- a/components/context/MainContext.tsx
+++ b/components/context/MainContext.tsx
@@ -25,36 +25,17 @@ type VersionItem = {
versionTitle: string
}
-type Article = {
- href: string
- title: string
- shortTitle?: string
- hidden?: boolean
-}
-type ProductSiteTree = {
- title: string
- href: string
- external?: boolean
- categories?: Record<
- string,
- Article & {
- standalone?: boolean
- articles?: Record
- maptopics?: Record }>
- }
- >
-}
-
-export type SiteTreePage = {
+export type CurrentProductTree = {
page: {
hidden?: boolean
documentType: 'article' | 'mapTopic'
title: string
+ shortTitle: string
}
renderedShortTitle?: string
renderedFullTitle: string
href: string
- childPages: Array
+ childPages: Array
}
type DataT = {
@@ -100,18 +81,24 @@ export type MainContextT = {
currentLanguage: string
languages: Record
allVersions: Record
- productSiteTree?: ProductSiteTree
- productSiteTreeNew?: SiteTreePage
+ currentProductTree?: CurrentProductTree
featureFlags: FeatureFlags
- pageHidden: boolean
- pagePermalinks?: Array<{
- languageCode: string
- relativePath: string
- title: string
- pageVersionTitle: string
- pageVersion: string
- href: string
- }>
+ page: {
+ languageVariants: Array<{ name: string; code: string; hreflang: string; href: string }>
+ topics: Array
+ fullTitle?: string
+ introPlainText?: string
+ hidden: boolean
+ permalinks?: Array<{
+ languageCode: string
+ relativePath: string
+ title: string
+ pageVersionTitle: string
+ pageVersion: string
+ href: string
+ }>
+ }
+
enterpriseServerVersions: Array
}
@@ -137,17 +124,23 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
airGap: req.context.AIRGAP || false,
currentCategory: req.context.currentCategory || '',
relativePath: req.context.page?.relativePath,
- pagePermalinks: req.context.page?.permalinks.map((obj: any) =>
- pick(obj, [
- 'title',
- 'pageVersionTitle',
- 'pageVersion',
- 'href',
- 'relativePath',
- 'languageCode',
- ])
- ),
- pageHidden: req.context.page.hidden || false,
+ page: {
+ languageVariants: req.context.page.languageVariants,
+ fullTitle: req.context.page.fullTitle,
+ topics: req.context.page.topics || [],
+ introPlainText: req.context.page?.introPlainText,
+ permalinks: req.context.page?.permalinks.map((obj: any) =>
+ pick(obj, [
+ 'title',
+ 'pageVersionTitle',
+ 'pageVersion',
+ 'href',
+ 'relativePath',
+ 'languageCode',
+ ])
+ ),
+ hidden: req.context.page.hidden || false,
+ },
enterpriseServerReleases: JSON.parse(JSON.stringify(req.context.enterpriseServerReleases)),
enterpriseServerVersions: req.context.enterpriseServerVersions,
currentLanguage: req.context.currentLanguage,
@@ -166,19 +159,8 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
),
allVersions: req.context.allVersions,
// this gets rid of some `undefined` values, which is necessary so next.js can serialize the data
- productSiteTree: !req.context.FEATURE_NEW_SITETREE
- ? JSON.parse(
- JSON.stringify(
- req.context.siteTree[req.context.currentLanguage][req.context.currentVersion].products[
- req.context.currentProduct
- ]
- )
- )
- : null,
- productSiteTreeNew: req.context.FEATURE_NEW_SITETREE ? req.context.siteTree : null,
- featureFlags: {
- FEATURE_NEW_SITETREE: req.context.FEATURE_NEW_SITETREE || false,
- },
+ currentProductTree: JSON.parse(JSON.stringify(req.context.currentProductTree)),
+ featureFlags: {},
}
}
diff --git a/components/context/ProductLandingContext.tsx b/components/context/ProductLandingContext.tsx
index 22070bad10..17aac957d2 100644
--- a/components/context/ProductLandingContext.tsx
+++ b/components/context/ProductLandingContext.tsx
@@ -19,15 +19,6 @@ export type CodeExample = {
export type Product = {
title: string
href: string
- categories: Record<
- string,
- {
- href: string
- title: string
- standalone?: boolean
- articles?: Record
- }
- >
}
export type ProductLandingContextT = {
@@ -79,14 +70,7 @@ export const useProductLandingContext = (): ProductLandingContextT => {
}
export const getProductLandingContextFromRequest = (req: any): ProductLandingContextT => {
- const {
- currentCategory,
- currentPath,
- siteTree,
- currentLanguage,
- currentVersion,
- currentProduct,
- } = req.context
+ const productTree = req.context.currentProductTree
return {
...pick(req.context.page, [
'title',
@@ -97,14 +81,13 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
'product_video',
'changelog',
]),
- product: JSON.parse(
- JSON.stringify(siteTree[currentLanguage][currentVersion].products[currentProduct])
- ),
- whatsNewChangelog: req.context.whatsNewChangelog,
- changelogUrl: req.context.changelogUrl,
-
+ product: {
+ href: productTree.href,
+ title: productTree.renderedShortTitle || productTree.renderedFullTitle,
+ },
+ whatsNewChangelog: req.context.whatsNewChangelog || [],
+ changelogUrl: req.context.changelogUrl || [],
productCodeExamples: req.context.productCodeExamples || [],
-
productCommunityExamples: req.context.productCommunityExamples || [],
productUserExamples: (req.context.productUserExamples || []).map(
@@ -114,11 +97,13 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
})
),
- introLinks: Object.fromEntries(
- Object.entries(req.context.page.introLinks || {}).filter(([key, val]) => !!val)
- ),
+ introLinks: {
+ quickstart: productTree.page.introLinks.quickstart,
+ reference: productTree.page.introLinks.reference,
+ overview: productTree.page.introLinks.overview,
+ },
- guideCards: (req.context.featuredLinks.guideCards || []).map((link: any) => {
+ guideCards: (req.context.featuredLinks ? (req.context.featuredLinks.guideCards || []) : []).map((link: any) => {
return {
href: link.href,
title: link.title,
@@ -127,14 +112,14 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
}
}),
- featuredArticles: Object.entries(req.context.featuredLinks)
+ featuredArticles: Object.entries(req.context.featuredLinks || [])
.filter(([key]) => {
return key === 'guides' || key === 'popular'
})
.map(([key, links]: any) => {
return {
label: req.context.site.data.ui.toc[key],
- viewAllHref: key === 'guides' && !currentCategory ? `${currentPath}/${key}` : '',
+ viewAllHref: key === 'guides' && !req.context.currentCategory ? `${req.context.currentPath}/${key}` : '',
articles: links.map((link: any) => {
return {
hideIntro: key === 'popular',
@@ -145,6 +130,7 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
}
}),
}
- }),
+ }
+ ),
}
}
diff --git a/components/hooks/useFeatureFlags.tsx b/components/hooks/useFeatureFlags.tsx
index 31593a7028..c604c1511d 100644
--- a/components/hooks/useFeatureFlags.tsx
+++ b/components/hooks/useFeatureFlags.tsx
@@ -1,8 +1,6 @@
import { useMainContext } from 'components/context/MainContext'
-export type FeatureFlags = {
- FEATURE_NEW_SITETREE: boolean
-}
+export type FeatureFlags = {}
export const useFeatureFlags = (): FeatureFlags => {
const { featureFlags } = useMainContext()
diff --git a/components/landing/AllArticlesProduct.tsx b/components/landing/AllArticlesProduct.tsx
deleted file mode 100644
index f908c84a12..0000000000
--- a/components/landing/AllArticlesProduct.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import Link from 'next/link'
-import { ChevronUpIcon } from '@primer/octicons-react'
-import cx from 'classnames'
-
-import { useProductLandingContext, Product } from 'components/context/ProductLandingContext'
-import { useState } from 'react'
-
-const maxArticles = 10
-
-export const AllArticlesProduct = () => {
- const { product } = useProductLandingContext()
-
- return (
-
- {Object.entries(product.categories).map(([key, category]) => {
- if (category.standalone) {
- return null
- }
-
- return
- })}
-
-
-
-
- {Object.entries(category.articles || {}).map(([key, article], i) => {
- return (
- - maxArticles - 1 && 'd-none')}>
-
- {article.title}
-
-
- )
- })}
-
- {numArticles > maxArticles && !isShowingMore && (
-
- )}
-
-
{title}
+
{title}
{viewAllHref && (
@@ -93,9 +93,9 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
{link.date && (
)}
diff --git a/components/landing/HomepageVersionPicker.tsx b/components/landing/HomepageVersionPicker.tsx
index 73bf2a21d2..ef1441bf68 100644
--- a/components/landing/HomepageVersionPicker.tsx
+++ b/components/landing/HomepageVersionPicker.tsx
@@ -9,10 +9,10 @@ import { useTranslation } from 'components/hooks/useTranslation'
export const HomepageVersionPicker = () => {
const router = useRouter()
const { currentVersion } = useVersion()
- const { allVersions, pagePermalinks, enterpriseServerVersions } = useMainContext()
+ const { allVersions, page, enterpriseServerVersions } = useMainContext()
const { t } = useTranslation('homepage')
- if (!pagePermalinks || pagePermalinks.length <= 1) {
+ if (page.permalinks && page.permalinks.length <= 1) {
return null
}
@@ -34,7 +34,7 @@ export const HomepageVersionPicker = () => {
- {pagePermalinks.map((permalink) => {
+ {(page.permalinks || []).map((permalink) => {
if (permalink.pageVersion === 'homepage') {
return null
}
diff --git a/components/landing/LandingHero.tsx b/components/landing/LandingHero.tsx
index 0f20b62d2e..56543a38c8 100644
--- a/components/landing/LandingHero.tsx
+++ b/components/landing/LandingHero.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
import cx from 'classnames'
import Link from 'next/link'
import { useRouter } from 'next/router'
@@ -11,6 +12,12 @@ export const LandingHero = () => {
const { airGap } = useMainContext()
const { product_video, shortTitle, beta_product, intro, introLinks } = useProductLandingContext()
const { t } = useTranslation('product_landing')
+ const [renderIFrame, setRenderIFrame] = useState(false)
+
+ // delay iFrame rendering so that dom ready happens sooner
+ useEffect(() => {
+ setRenderIFrame(true)
+ }, [])
return (
@@ -73,7 +80,7 @@ export const LandingHero = () => {