Merge branch 'main' into content-template-versions

components/DefaultLayout.tsx

@@ -38,6 +38,7 @@ export const DefaultLayout = (props: Props) => {
         {page.languageVariants.map((languageVariant) => {
           return (
             <link
+              key={languageVariant.href}
               rel="alternate"
               hrefLang={languageVariant.hreflang}
               href={`https://docs.github.com${languageVariant.href}`}

components/SidebarNav.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { LinkExternalIcon, MarkGithubIcon } from '@primer/octicons-react'
 import { useTranslation } from './hooks/useTranslation'
 import { useMainContext } from './context/MainContext'
-import { ProductSiteTree } from './product/ProductSiteTree'
+import { SidebarProduct } from './product/SidebarProduct'
 import { AllProductsLink } from './product/AllProductsLink'
 import { useVersion } from './hooks/useVersion'
 
@@ -41,7 +41,7 @@ export const SidebarNav = (props: Props) => {
           </ul>
         ) : (
           <ul className="sidebar-products">
-            <ProductSiteTree />
+            <SidebarProduct />
           </ul>
         )}
       </nav>

components/article/ArticleVersionPicker.tsx

@@ -0,0 +1,58 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Dropdown } from '@primer/components'
+
+import { useMainContext } from 'components/context/MainContext'
+import { useVersion } from 'components/hooks/useVersion'
+import { useTranslation } from 'components/hooks/useTranslation'
+
+export const ArticleVersionPicker = () => {
+  const router = useRouter()
+  const { currentVersion } = useVersion()
+  const { allVersions, page, enterpriseServerVersions } = useMainContext()
+  const { t } = useTranslation('pages')
+
+  if (page.permalinks && page.permalinks.length <= 1) {
+    return null
+  }
+
+  return (
+    <div className="d-none d-lg-flex flex-justify-end">
+      <Dropdown
+        css={`
+          ul {
+            width: unset;
+          }
+        `}
+      >
+        <summary className="f4 h5-mktg btn-outline-mktg btn-mktg p-2">
+          <span className="d-md-none d-xl-inline-block">{t('article_version')}</span>{' '}
+          {allVersions[currentVersion].versionTitle}
+          <Dropdown.Caret />
+        </summary>
+        <Dropdown.Menu direction="sw">
+          {(page.permalinks || []).map((permalink) => {
+            if (permalink.pageVersion === 'homepage') {
+              return null
+            }
+
+            return (
+              <Dropdown.Item key={permalink.href}>
+                <Link href={permalink.href}>
+                  <a>{permalink.pageVersionTitle}</a>
+                </Link>
+              </Dropdown.Item>
+            )
+          })}
+          <div className="pb-1">
+            <Link href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}>
+              <a className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap">
+                See all Enterprise releases
+              </a>
+            </Link>
+          </div>
+        </Dropdown.Menu>
+      </Dropdown>
+    </div>
+  )
+}

components/context/MainContext.tsx

@@ -141,7 +141,11 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
       ),
       hidden: req.context.page.hidden || false,
     },
-    enterpriseServerReleases: JSON.parse(JSON.stringify(req.context.enterpriseServerReleases)),
+    enterpriseServerReleases: pick(req.context.enterpriseServerReleases, [
+      'isOldestReleaseDeprecated',
+      'oldestSupported',
+      'nextDeprecationDate',
+    ]),
     enterpriseServerVersions: req.context.enterpriseServerVersions,
     currentLanguage: req.context.currentLanguage,
     languages: Object.fromEntries(
@@ -158,12 +162,27 @@ 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
-    currentProductTree: JSON.parse(JSON.stringify(req.context.currentProductTree)),
+    currentProductTree: getCurrentProductTree(req.context.currentProductTree),
     featureFlags: {},
   }
 }
 
+// only pull things we need from the product tree, and make sure there are default values instead of `undefined`
+const getCurrentProductTree = (input: any): CurrentProductTree => {
+  return {
+    href: input.href,
+    renderedShortTitle: input.renderedShortTitle || '',
+    renderedFullTitle: input.renderedFullTitle || '',
+    page: {
+      hidden: input.page.hidden || false,
+      documentType: input.page.documentType,
+      title: input.page.title,
+      shortTitle: input.page.shortTitle || '',
+    },
+    childPages: (input.childPages || []).map(getCurrentProductTree),
+  }
+}
+
 export const MainContext = createContext<MainContextT | null>(null)
 
 export const useMainContext = (): MainContextT => {

components/context/ProductLandingContext.tsx

@@ -1,6 +1,11 @@
 import { createContext, useContext } from 'react'
 import pick from 'lodash/pick'
 
+export type TocItem = {
+  fullPath: string
+  title: string
+  intro?: string
+}
 export type FeaturedLink = {
   title: string
   href: string
@@ -28,19 +33,12 @@ export type ProductLandingContextT = {
   intro: string
   beta_product: boolean
   product: Product
-  // primaryAction: LinkButtonT
-  // secondaryAction?: LinkButtonT
   introLinks: {
     quickstart?: string
     reference?: string
     overview?: string
-  }
+  } | null
   product_video?: string
-  // featuredLinks?: {
-  //   guides: Array<FeaturedLink>
-  //   popular: Array<FeaturedLink>
-  //   guideCards: Array<FeaturedLink>
-  // }
   guideCards: Array<FeaturedLink>
   productCodeExamples: Array<CodeExample>
   productUserExamples: Array<{ username: string; description: string }>
@@ -53,6 +51,7 @@ export type ProductLandingContextT = {
   changelog: { label: string; prefix: string }
   changelogUrl?: string
   whatsNewChangelog?: Array<{ href: string; title: string; date: string }>
+  tocItems: Array<TocItem>
 }
 
 export const ProductLandingContext = createContext<ProductLandingContextT | null>(null)
@@ -97,20 +96,26 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       })
     ),
 
-    introLinks: {
-      quickstart: productTree.page.introLinks.quickstart,
-      reference: productTree.page.introLinks.reference,
-      overview: productTree.page.introLinks.overview,
-    },
+    introLinks: productTree.page.introLinks
+      ? {
+          quickstart: productTree.page.introLinks.quickstart,
+          reference: productTree.page.introLinks.reference,
+          overview: productTree.page.introLinks.overview,
+        }
+      : null,
 
-    guideCards: (req.context.featuredLinks ? (req.context.featuredLinks.guideCards || []) : []).map((link: any) => {
-      return {
-        href: link.href,
-        title: link.title,
-        intro: link.intro,
-        authors: link.page.authors || [],
+    guideCards: (req.context.featuredLinks ? req.context.featuredLinks.guideCards || [] : []).map(
+      (link: any) => {
+        return {
+          href: link.href,
+          title: link.title,
+          intro: link.intro,
+          authors: link.page.authors || [],
+        }
       }
-    }),
+    ),
+
+    tocItems: req.context.tocItems || [],
 
     featuredArticles: Object.entries(req.context.featuredLinks || [])
       .filter(([key]) => {
@@ -119,7 +124,10 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       .map(([key, links]: any) => {
         return {
           label: req.context.site.data.ui.toc[key],
-          viewAllHref: key === 'guides' && !req.context.currentCategory ? `${req.context.currentPath}/${key}` : '',
+          viewAllHref:
+            key === 'guides' && !req.context.currentCategory
+              ? `${req.context.currentPath}/${key}`
+              : '',
           articles: links.map((link: any) => {
             return {
               hideIntro: key === 'popular',
@@ -130,7 +138,6 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
             }
           }),
         }
-      }
-    ),
+      }),
   }
 }

components/landing/FeaturedArticles.tsx

@@ -21,7 +21,7 @@ export const FeaturedArticles = () => {
       {featuredArticles.map((section, i) => {
         return (
           <div
-            key={section.label}
+            key={section.label + i}
             className={cx('col-12 mb-4 mb-lg-0', changelog ? 'col-lg-4' : 'col-lg-6')}
           >
             <ArticleList
@@ -72,7 +72,7 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
       </div>
 
       <ul className="list-style-none">
-        {articles.map((link) => {
+        {articles.map((link, i) => {
           return (
             <li key={link.href} className="border-top">
               <Link href={link.href}>

components/landing/ProductArticlesList.tsx

@@ -16,12 +16,12 @@ export const ProductArticlesList = () => {
 
   return (
     <div className="d-flex gutter flex-wrap">
-      {currentProductTree.childPages.map((childPage) => {
+      {currentProductTree.childPages.map((childPage, i) => {
         if (childPage.page.documentType === 'article') {
           return null
         }
 
-        return <ArticleList key={childPage.href} page={childPage} />
+        return <ArticleList key={childPage.href + i} page={childPage} />
       })}
     </div>
   )
@@ -45,14 +45,18 @@ const ArticleList = ({ page }: { page: CurrentProductTree }) => {
           }
 
           return (
-            <li className={cx('mb-3', index >= maxArticles ? 'd-none' : null)}>
+            <li
+              key={grandchildPage.href + index}
+              className={cx('mb-3', index >= maxArticles ? 'd-none' : null)}
+            >
               <Link href={grandchildPage.href}>
                 <a>{grandchildPage.page.title}</a>
               </Link>
               {grandchildPage.page.documentType === 'mapTopic' ? (
-              <small className="color-text-secondary d-inline-block">
-                &nbsp;&bull; {page.childPages.length} articles
-              </small>) : null}
+                <small className="color-text-secondary d-inline-block">
+                  &nbsp;&bull; {page.childPages.length} articles
+                </small>
+              ) : null}
             </li>
           )
         })}

components/landing/TableOfContents.tsx

@@ -0,0 +1,34 @@
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import cx from 'classnames'
+
+import type { TocItem } from '../context/ProductLandingContext'
+
+export const TableOfContents = (props: { items?: Array<TocItem> }) => {
+  const router = useRouter()
+
+  return (
+    <div>
+      {(props.items || []).map((obj) => {
+        if (!obj) {
+          return null
+        }
+        const { fullPath: href, title, intro } = obj
+        const isActive = router.pathname === href
+        return (
+          <div key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
+            <Link href={href}>
+              <a className="Bump-link--hover no-underline d-block py-1 border-bottom color-border-primary">
+                <h4>
+                  {title}
+                  <span className="Bump-link-symbol">→</span>
+                </h4>
+              </a>
+            </Link>
+            {intro && <p className="f4 mt-3" dangerouslySetInnerHTML={{ __html: intro }} />}
+          </div>
+        )
+      })}
+    </div>
+  )
+}