Merge branch 'main' into cloning-context

.github/workflows/update-status-labels-on-tracking-issues.yml

@@ -17,11 +17,11 @@ jobs:
             const repo = context.payload.repository.name
 
             const allStatusLabels = [
-              'Status: GREEN',
+              'green',
-              'Status: GREY',
+              'grey',
-              'Status: YELLOW',
+              'yellow',
-              'Status: BLACK',
+              'black',
-              'Status: RED'
+              'red'
             ];
 
             const currentLabels = await github.issues.listLabelsOnIssue({
@@ -33,7 +33,7 @@ jobs:
             const newLabels = currentLabels.data.filter( label => allStatusLabels.includes(label.name) === false)
 
             allStatusLabels.forEach( label => {
-              if(context.payload.comment.body.includes(label)) {
+              if(context.payload.comment.body.toLowerCase().includes(`status: ${label}`)) {
                 newLabels.push(label)
               }
             });

components/Breadcrumbs.tsx

@@ -12,7 +12,7 @@ export type BreadcrumbT = {
 type Props = {}
 export const Breadcrumbs = (props: Props) => {
   const router = useRouter()
-  const pathWithLocale = `/${router.locale}${router.asPath}`
+  const pathWithLocale = `/${router.locale}${router.asPath.split('?')[0]}` // remove query string
   const { breadcrumbs } = useMainContext()
 
   return (

components/HeaderNotifications.tsx

@@ -70,7 +70,7 @@ export const HeaderNotifications = () => {
   return (
     <>
       {allNotifications.map(({ type, content }, i) => {
-        const isLast = i !== allNotifications.length - 1
+        const isLast = i === allNotifications.length - 1
         return (
           <div
             className={cx(

components/LanguagePicker.tsx

@@ -12,7 +12,13 @@ export const LanguagePicker = () => {
 
   return (
     <div className="ml-4 d-flex flex-justify-center flex-items-center">
-      <Dropdown css>
+      <Dropdown
+        css={`
+          ul {
+            width: unset;
+          }
+        `}
+      >
         <summary>
           {selectedLang.nativeName || selectedLang.name}
           <Dropdown.Caret />

components/ScrollButton.tsx

@@ -45,17 +45,6 @@ export const ScrollButton = () => {
       >
         <ChevronUpIcon />
       </button>
-      <style jsx>{`
-        .opacity-0 {
-          opacity: 0;
-        }
-        .opacity-100 {
-          opacity: 1;
-        }
-        .transition-200 {
-          transition: 200ms;
-        }
-      `}</style>
     </div>
   )
 }

components/TruncateLines.tsx

@@ -8,14 +8,15 @@ type Props = {
   className?: string
 }
 export const TruncateLines = (props: Props) => {
-  const Component = props.as || 'div'
+  const { as, maxLines, className, children } = props
+  const Component = as || 'div'
   return (
-    <Component className={cx('root', props.className)}>
+    <Component className={cx('root', className)}>
-      {props.children}
+      {children}
       <style jsx>{`
         .root {
           display: -webkit-box;
-          -webkit-line-clamp: ${props.maxLines};
+          -webkit-line-clamp: ${maxLines};
           -webkit-box-orient: vertical;
           overflow: hidden;
         }

components/article/ArticleTitle.tsx

@@ -0,0 +1,31 @@
+import { Tooltip, Link } from '@primer/components'
+import { PrinterIcon } from './PrinterIcon'
+
+type Props = {
+  children: React.ReactNode
+}
+export const ArticleTitle = ({ children }: Props) => {
+  return (
+    <div className="d-flex flex-items-baseline flex-justify-between">
+      <h1 className="my-4">{children}</h1>
+      <div className="d-none d-lg-block ml-2">
+        <Tooltip aria-label="Print this article" noDelay direction="n">
+          <Link
+            as="button"
+            underline={false}
+            muted
+            onClick={() => {
+              try {
+                document.execCommand('print', false)
+              } catch (e) {
+                window.print()
+              }
+            }}
+          >
+            <PrinterIcon />
+          </Link>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}

components/article/ArticleVersionPicker.tsx

@@ -17,42 +17,40 @@ export const ArticleVersionPicker = () => {
   }
 
   return (
-    <div className="d-none d-lg-flex flex-justify-end">
+    <Dropdown
-      <Dropdown
+      css={`
-        css={`
+        ul {
-          ul {
+          width: unset;
-            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
           }
-        `}
-      >
-        <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 (
+          return (
-              <Dropdown.Item key={permalink.href}>
+            <Dropdown.Item key={permalink.href}>
-                <Link href={permalink.href}>
+              <Link href={permalink.href}>
-                  <a>{permalink.pageVersionTitle}</a>
+                <a>{permalink.pageVersionTitle}</a>
-                </Link>
+              </Link>
-              </Dropdown.Item>
+            </Dropdown.Item>
-            )
+          )
-          })}
+        })}
-          <div className="pb-1">
+        <div className="pb-1">
-            <Link href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}>
+          <Link href={`/${router.locale}/${enterpriseServerVersions[0]}/admin/all-releases`}>
-              <a className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap">
+            <a className="f6 no-underline color-text-tertiary pl-3 pr-2 no-wrap">
-                See all Enterprise releases
+              See all Enterprise releases
-              </a>
+            </a>
-            </Link>
+          </Link>
-          </div>
+        </div>
-        </Dropdown.Menu>
+      </Dropdown.Menu>
-      </Dropdown>
+    </Dropdown>
-    </div>
   )
 }

components/article/PrinterIcon.tsx

@@ -0,0 +1,20 @@
+// From https://heroicons.com
+export const PrinterIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={18}
+      width={18}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"
+      />
+    </svg>
+  )
+}

components/context/MainContext.tsx

@@ -84,6 +84,7 @@ export type MainContextT = {
   currentProductTree?: CurrentProductTree
   featureFlags: FeatureFlags
   page: {
+    documentType: string
     languageVariants: Array<{ name: string; code: string; hreflang: string; href: string }>
     topics: Array<string>
     fullTitle?: string
@@ -126,6 +127,7 @@ export const getMainContextFromRequest = (req: any): MainContextT => {
     relativePath: req.context.page?.relativePath,
     page: {
       languageVariants: req.context.page.languageVariants,
+      documentType: req.context.page.documentType,
       fullTitle: req.context.page.fullTitle,
       topics: req.context.page.topics || [],
       introPlainText: req.context.page?.introPlainText,

components/context/ProductLandingContext.tsx

@@ -70,8 +70,9 @@ export const useProductLandingContext = (): ProductLandingContextT => {
 
 export const getProductLandingContextFromRequest = (req: any): ProductLandingContextT => {
   const productTree = req.context.currentProductTree
+  const page = req.context.page
   return {
-    ...pick(req.context.page, [
+    ...pick(page, [
       'title',
       'shortTitle',
       'introPlainText',
@@ -96,11 +97,11 @@ export const getProductLandingContextFromRequest = (req: any): ProductLandingCon
       })
     ),
 
-    introLinks: productTree.page.introLinks
+    introLinks: page.introLinks
       ? {
-          quickstart: productTree.page.introLinks.quickstart,
+          quickstart: page.introLinks.quickstart,
-          reference: productTree.page.introLinks.reference,
+          reference: page.introLinks.reference,
-          overview: productTree.page.introLinks.overview,
+          overview: page.introLinks.overview,
         }
       : null,
 

components/context/TocLandingContext.tsx

@@ -0,0 +1,33 @@
+import { createContext, useContext } from 'react'
+
+export type TocItem = {
+  fullPath: string
+  title: string
+  intro?: string
+}
+
+export type TocLandingContextT = {
+  title: string
+  introPlainText: string
+  tocItems: Array<TocItem>
+}
+
+export const TocLandingContext = createContext<TocLandingContextT | null>(null)
+
+export const useTocLandingContext = (): TocLandingContextT => {
+  const context = useContext(TocLandingContext)
+
+  if (!context) {
+    throw new Error('"useTocLandingContext" may only be used inside "TocLandingContext.Provider"')
+  }
+
+  return context
+}
+
+export const getTocLandingContextFromRequest = (req: any): TocLandingContextT => {
+  return {
+    title: req.context.page.title,
+    introPlainText: req.context.page.introPlainText,
+    tocItems: req.context.tocItems || [],
+  }
+}

components/landing/FeaturedArticles.tsx

@@ -78,7 +78,7 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
               <Link href={link.href}>
                 <a className="link-with-intro Bump-link--hover no-underline d-block py-3">
                   <h4 className="link-with-intro-title">
-                    {link.title}
+                    <span dangerouslySetInnerHTML={{ __html: link.title }} />
                     <span className="Bump-link-symbol">→</span>
                   </h4>
                   {!link.hideIntro && link.intro && (
@@ -87,7 +87,7 @@ const ArticleList = ({ title, viewAllHref, articles }: ArticleListProps) => {
                       maxLines={2}
                       className="link-with-intro-intro color-text-secondary mb-0 mt-1"
                     >
-                      {link.intro}
+                      <span dangerouslySetInnerHTML={{ __html: link.intro }} />
                     </TruncateLines>
                   )}
                   {link.date && (

components/landing/GuideCards.tsx

@@ -11,6 +11,7 @@ export const GuideCards = () => {
   const router = useRouter()
   const { currentCategory } = useMainContext()
   const { guideCards } = useProductLandingContext()
+  const routePath = `/${router.asPath.split('?')[0]}` // remove query string
 
   if (!guideCards) {
     return null
@@ -25,7 +26,7 @@ export const GuideCards = () => {
       </div>
 
       {!currentCategory && (
-        <Link href={`${router.asPath}/guides`}>
+        <Link href={`${routePath}/guides`}>
           <a className="btn btn-outline float-right">
             Explore guides <ArrowRightIcon />
           </a>

components/landing/ProductArticlesList.tsx

@@ -47,7 +47,7 @@ const ArticleList = ({ page }: { page: CurrentProductTree }) => {
           return (
             <li
               key={grandchildPage.href + index}
-              className={cx('mb-3', index >= maxArticles ? 'd-none' : null)}
+              className={cx('mb-3', (!isShowingMore && index >= maxArticles) ? 'd-none' : null)}
             >
               <Link href={grandchildPage.href}>
                 <a>{grandchildPage.page.title}</a>

components/landing/ProductLanding.tsx

@@ -0,0 +1,64 @@
+import { DefaultLayout } from 'components/DefaultLayout'
+import { useProductLandingContext } from 'components/context/ProductLandingContext'
+
+import { LandingHero } from 'components/landing/LandingHero'
+import { FeaturedArticles } from 'components/landing/FeaturedArticles'
+import { GuideCards } from 'components/landing/GuideCards'
+import { SponsorsExamples } from 'components/landing/SponsorsExamples'
+import { CommunityExamples } from 'components/landing/CommunityExamples'
+import { CodeExamples } from 'components/landing/CodeExamples'
+import { LandingSection } from 'components/landing/LandingSection'
+import { useTranslation } from 'components/hooks/useTranslation'
+import { ProductArticlesList } from 'components/landing/ProductArticlesList'
+
+export const ProductLanding = () => {
+  const { shortTitle, guideCards, productUserExamples, productCommunityExamples, productCodeExamples } =
+    useProductLandingContext()
+  const { t } = useTranslation('product_landing')
+
+  return (
+    <DefaultLayout>
+      <LandingSection className="pt-3">
+        <LandingHero />
+      </LandingSection>
+
+      <LandingSection>
+        <FeaturedArticles />
+      </LandingSection>
+
+      {productCodeExamples.length > 0 && (
+        <LandingSection title={t('code_examples')} className="my-6">
+          <CodeExamples />
+        </LandingSection>
+      )}
+
+      {productCommunityExamples.length > 0 && (
+        <LandingSection title={t('communities_using_discussions')} className="my-6">
+          <CommunityExamples />
+        </LandingSection>
+      )}
+
+      {productUserExamples.length > 0 && (
+        <LandingSection title={t('sponsor_community')} className="my-6">
+          <SponsorsExamples />
+        </LandingSection>
+      )}
+
+      {/* {% if currentVersion contains 'enterprise-server' and currentProduct == 'admin' %}
+      {% include product-releases %}
+      {% endif %} */}
+
+      {guideCards.length > 0 && (
+        <div className="color-bg-tertiary py-6 my-8">
+          <LandingSection title={t('guides')} className="my-6">
+            <GuideCards />
+          </LandingSection>
+        </div>
+      )}
+
+      <LandingSection sectionLink="all-docs" title={`All ${shortTitle} Docs`}>
+        <ProductArticlesList />
+      </LandingSection>
+    </DefaultLayout>
+  )
+}

components/landing/TableOfContents.tsx

@@ -4,19 +4,29 @@ import cx from 'classnames'
 
 import type { TocItem } from '../context/ProductLandingContext'
 
-export const TableOfContents = (props: { items?: Array<TocItem> }) => {
+type Props = {
+  items: Array<TocItem>
+  variant?: 'compact' | 'expanded'
+}
+export const TableOfContents = (props: Props) => {
+  const { items, variant = 'expanded' } = props
   const router = useRouter()
 
   return (
-    <div>
+    <ul className={cx(variant === 'compact' ? 'list-style-inside pl-2' : 'list-style-none')}>
-      {(props.items || []).map((obj) => {
+      {(items || []).map((item) => {
-        if (!obj) {
+        if (!item) {
           return null
         }
-        const { fullPath: href, title, intro } = obj
+
+        const { fullPath: href, title, intro } = item
         const isActive = router.pathname === href
-        return (
+        return variant === 'compact' ? (
-          <div key={href} className={cx('mb-5', isActive && 'color-auto-gray-4')}>
+          <li key={href} className="f4 my-1">
+            <Link href={href}>{title}</Link>
+          </li>
+        ) : (
+          <li 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>
@@ -26,9 +36,9 @@ export const TableOfContents = (props: { items?: Array<TocItem> }) => {
               </a>
             </Link>
             {intro && <p className="f4 mt-3" dangerouslySetInnerHTML={{ __html: intro }} />}
-          </div>
+          </li>
         )
       })}
-    </div>
+    </ul>
   )
 }

components/landing/TocLanding.tsx

@@ -0,0 +1,55 @@
+import { Grid } from '@primer/components'
+
+import { DefaultLayout } from 'components/DefaultLayout'
+import { TableOfContents } from 'components/landing/TableOfContents'
+import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
+import { Breadcrumbs } from 'components/Breadcrumbs'
+import { useTocLandingContext } from 'components/context/TocLandingContext'
+import { ArticleTitle } from 'components/article/ArticleTitle'
+
+type Props = {
+  variant?: 'compact' | 'expanded'
+}
+export const TocLanding = ({ variant = 'expanded' }: Props) => {
+  const { title, introPlainText, tocItems } = useTocLandingContext()
+  return (
+    <DefaultLayout>
+      <div className="container-xl px-3 px-md-6 my-4 my-lg-4">
+        <div className="d-lg-flex flex-justify-between">
+          <div className="d-block d-lg-none">
+            <ArticleVersionPicker />
+          </div>
+          <div className="d-flex flex-items-center">
+            <Breadcrumbs />
+          </div>
+          <div className="d-none d-lg-block">
+            <ArticleVersionPicker />
+          </div>
+        </div>
+
+        <Grid
+          gridTemplateColumns="minmax(500px, 720px) minmax(220px, 1fr)"
+          gridTemplateRows="auto 1fr"
+          gridGap={16}
+        >
+          <div>
+            <div className="mt-8">
+              <ArticleTitle>{title}</ArticleTitle>
+
+              <div className="lead-mktg">
+                <p>{introPlainText}</p>
+              </div>
+            </div>
+
+            <div className="border-bottom border-xl-0 pb-4 mb-5 pb-xl-0 mb-xl-0" />
+
+            <div className={variant === 'expanded' ? 'mt-7' : 'mt-2'}>
+              <TableOfContents items={tocItems} variant={variant} />
+            </div>
+          </div>
+          <div></div>
+        </Grid>
+      </div>
+    </DefaultLayout>
+  )
+}

components/product/SidebarProduct.tsx

@@ -1,16 +1,12 @@
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import cx from 'classnames'
+import { useDetails, Details } from '@primer/components'
+import { ChevronDownIcon } from '@primer/octicons-react'
 
-import { useMainContext } from 'components/context/MainContext'
+import { CurrentProductTree, useMainContext } from 'components/context/MainContext'
 import { AllProductsLink } from 'components/product/AllProductsLink'
-// <!--
-//   Styling note:
 
-//   Categories, Maptopics, and Articles list items get a class of `active` when they correspond to content
-//   hierarchy of the current page. If an item's URL is also the same as the current URL, the item
-//   also gets an `is-current-page` class.
-//  -->
 export const SidebarProduct = () => {
   const router = useRouter()
   const { currentProductTree: currentProductTree } = useMainContext()
@@ -29,7 +25,7 @@ export const SidebarProduct = () => {
         <>
           <li title="" className="sidebar-product mb-2">
             <Link href={currentProductTree.href}>
-              <a className="pl-4 pr-5 pb-1 f4 color-text-primary">{productTitle}</a>
+              <a className="pl-4 pr-5 pb-1 f4 color-text-primary no-underline">{productTitle}</a>
             </Link>
           </li>
 
@@ -53,135 +49,17 @@ export const SidebarProduct = () => {
                   >
                     {isStandaloneCategory ? (
                       <Link href={childPage.href}>
-                        <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">
+                        <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary no-underline">
                           {childTitle}
                         </a>
                       </Link>
                     ) : (
-                      <details
+                      <CollapsibleSection
-                        className={cx('dropdown-withArrow details details-reset')}
+                        index={i}
-                        open={routePath.includes(childPage.href) || i < 3}
+                        routePath={routePath}
-                      >
+                        title={childTitle}
-                        <summary>
+                        page={childPage}
-                          <div className="d-flex flex-justify-between">
+                      />
-                            <Link href={childPage.href}>
-                              <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary">
-                                {childTitle}
-                              </a>
-                            </Link>
-                            {i < 3 && (
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                className="octicon flex-shrink-0 arrow mr-3"
-                                style={{ marginTop: 7 }}
-                                viewBox="0 0 16 16"
-                                width="16"
-                                height="16"
-                              >
-                                {' '}
-                                <path
-                                  fillRule="evenodd"
-                                  clipRule="evenodd"
-                                  d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"
-                                ></path>
-                              </svg>
-                            )}
-                          </div>
-                        </summary>
-                        {routePath.includes(childPage.href) || i < 3 ? (
-                          <>
-                            {/* <!-- some categories have maptopics with child articles --> */}
-                            {childPage.childPages[0].page.documentType === 'mapTopic' ? (
-                              <ul className="sidebar-topics list-style-none position-relative">
-                                {childPage.childPages.map((grandchildPage, i) => {
-                                  const grandchildTitle =
-                                    grandchildPage.renderedShortTitle ||
-                                    grandchildPage.renderedFullTitle
-                                  const isActive = routePath.includes(grandchildPage.href)
-                                  const isCurrent = routePath === grandchildPage.href
-                                  return (
-                                    <li
-                                      key={childPage.href + i}
-                                      className={cx(
-                                        'sidebar-maptopic',
-                                        isActive && 'active',
-                                        isCurrent && 'is-current-page'
-                                      )}
-                                    >
-                                      <Link href={grandchildPage.href}>
-                                        <a className="pl-4 pr-5 py-2 color-text-primary">{grandchildTitle}</a>
-                                      </Link>
-                                      <ul className="sidebar-articles my-2">
-                                        {grandchildPage.childPages.map(
-                                          (greatgrandchildPage, i, arr) => {
-                                            const greatgrandchildTitle =
-                                              greatgrandchildPage.renderedShortTitle ||
-                                              greatgrandchildPage.renderedFullTitle
-                                            const isLast = i === arr.length - 1
-                                            const isActive = routePath.includes(
-                                              greatgrandchildPage.href
-                                            )
-                                            const isCurrent = routePath === greatgrandchildPage.href
-                                            return (
-                                              <li
-                                                key={greatgrandchildPage.href + i}
-                                                className={cx(
-                                                  'sidebar-article',
-                                                  isActive && 'active',
-                                                  isCurrent && 'is-current-page'
-                                                )}
-                                              >
-                                                <Link href={greatgrandchildPage.href}>
-                                                  <a
-                                                    className={cx(
-                                                      'pl-6 pr-5 py-1 color-text-primary',
-                                                      isLast && 'pb-2'
-                                                    )}
-                                                  >
-                                                    {greatgrandchildTitle}
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            )
-                                          }
-                                        )}
-                                      </ul>
-                                    </li>
-                                  )
-                                })}
-                              </ul>
-                            ) : childPage.childPages[0].page.documentType == 'article' ? (
-                              <ul className="sidebar-articles list-style-none">
-                                {/* <!-- some categories have no maptopics, only articles --> */}
-                                {childPage.childPages.map((grandchildPage, i, arr) => {
-                                  const grandchildTitle =
-                                    grandchildPage.renderedShortTitle ||
-                                    grandchildPage.renderedFullTitle
-                                  const isLast = i === arr.length - 1
-                                  const isActive = routePath.includes(grandchildPage.href)
-                                  const isCurrent = routePath === grandchildPage.href
-                                  return (
-                                    <li
-                                      key={grandchildPage.href + i}
-                                      className={cx(
-                                        'sidebar-article',
-                                        isActive && 'active',
-                                        isCurrent && 'is-current-page'
-                                      )}
-                                    >
-                                      <Link href={grandchildPage.href}>
-                                        <a className={cx('pl-6 pr-5 py-1 color-text-primary', isLast && 'pb-2')}>
-                                          {grandchildTitle}
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  )
-                                })}
-                              </ul>
-                            ) : null}
-                          </>
-                        ) : null}
-                      </details>
                     )}
                   </li>
                 )
@@ -193,3 +71,113 @@ export const SidebarProduct = () => {
     </>
   )
 }
+
+type SectionProps = {
+  index: number
+  routePath: string
+  page: CurrentProductTree
+  title: string
+}
+const CollapsibleSection = (props: SectionProps) => {
+  const { routePath, index, title, page } = props
+  const isDefaultOpen = routePath.includes(page.href) || index < 3
+  const { getDetailsProps, open: isOpen } = useDetails({ defaultOpen: isDefaultOpen })
+  return (
+    <Details {...getDetailsProps()} className="details-reset">
+      <summary>
+        <div className="d-flex flex-justify-between">
+          <Link href={page.href}>
+            <a className="pl-4 pr-2 py-2 f6 text-uppercase d-block flex-auto mr-3 color-text-primary no-underline">
+              {title}
+            </a>
+          </Link>
+          {page.childPages.length > 0 && (
+            <span style={{ marginTop: 7 }} className="flex-shrink-0 pr-3">
+              <ChevronDownIcon className={cx('opacity-60', isOpen && 'rotate-180')} />
+            </span>
+          )}
+        </div>
+      </summary>
+      {/* <!-- some categories have maptopics with child articles --> */}
+      {page.childPages[0].page.documentType === 'mapTopic' ? (
+        <ul className="sidebar-topics list-style-none position-relative">
+          {page.childPages.map((childPage, i) => {
+            const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
+            const isActive = routePath.includes(childPage.href)
+            const isCurrent = routePath === childPage.href
+            return (
+              <li
+                key={childPage.href + i}
+                className={cx(
+                  'sidebar-maptopic',
+                  isActive && 'active',
+                  isCurrent && 'is-current-page'
+                )}
+              >
+                <Link href={childPage.href}>
+                  <a className="pl-4 pr-5 py-2 color-text-primary no-underline">{childTitle}</a>
+                </Link>
+                <ul className="sidebar-articles my-2">
+                  {childPage.childPages.map((grandchildPage, i, arr) => {
+                    const grandchildTitle =
+                      grandchildPage.renderedShortTitle || grandchildPage.renderedFullTitle
+                    const isLast = i === arr.length - 1
+                    const isActive = routePath.includes(grandchildPage.href)
+                    const isCurrent = routePath === grandchildPage.href
+                    return (
+                      <li
+                        key={grandchildPage.href + i}
+                        className={cx(
+                          'sidebar-article',
+                          isActive && 'active',
+                          isCurrent && 'is-current-page'
+                        )}
+                      >
+                        <Link href={grandchildPage.href}>
+                          <a
+                            className={cx(
+                              'pl-6 pr-5 py-1 color-text-primary no-underline',
+                              isLast && 'pb-2'
+                            )}
+                          >
+                            {grandchildTitle}
+                          </a>
+                        </Link>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </li>
+            )
+          })}
+        </ul>
+      ) : page.childPages[0].page.documentType == 'article' ? (
+        <ul className="sidebar-articles list-style-none">
+          {/* <!-- some categories have no maptopics, only articles --> */}
+          {page.childPages.map((childPage, i, arr) => {
+            const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
+            const isLast = i === arr.length - 1
+            const isActive = routePath.includes(childPage.href)
+            const isCurrent = routePath === childPage.href
+            return (
+              <li
+                key={childPage.href + i}
+                className={cx(
+                  'sidebar-article',
+                  isActive && 'active',
+                  isCurrent && 'is-current-page'
+                )}
+              >
+                <Link href={childPage.href}>
+                  <a className={cx('pl-6 pr-5 py-1 color-text-primary no-underline', isLast && 'pb-2')}>
+                    {childTitle}
+                  </a>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      ) : null}
+    </Details>
+  )
+}

content/codespaces/about-codespaces.md

@@ -58,7 +58,7 @@ Developers and organization administrators can also configure settings to add en
 
 ### Joining the beta
 
-A limited number of people will be invited to join the beta. To join the waitlist, see [Sign up for Codespaces beta](https://github.com/features/codespaces/signup).
+A limited number of people will be invited to join the beta. To join the waitlist, see [Sign up for the Codespaces beta](https://github.com/features/codespaces/signup).
 
 ### Contacting us about {% data variables.product.prodname_codespaces %}
 

content/github/setting-up-and-managing-your-enterprise/managing-users-in-your-enterprise/roles-in-an-enterprise.md

@@ -26,7 +26,7 @@ For more information about adding people to your enterprise, see "{% if currentV
 
 Enterprise owners have complete control over the enterprise and can take every action, including:
 - Managing administrators
-- {% if currentVersion == "free-pro-team@latest" %}Adding and removing {% elsif currentVersion == "github-ae@latest" %}Managing{% endif %} organizations {% if currentVersion == "free-pro-team@latest" %}to and from {% elsif currentVersion == "github-ae@latest" %} in{% endif %} the enterprise
+- {% if currentVersion == "free-pro-team@latest" %}Adding and removing {% elsif currentVersion == "github-ae@latest" or currentVersion ver_gt "enterprise-server@2.20" %}Managing{% endif %} organizations {% if currentVersion == "free-pro-team@latest" %}to and from {% elsif currentVersion == "github-ae@latest" or currentVersion ver_gt "enterprise-server@2.20" %} in{% endif %} the enterprise
 - Managing enterprise settings
 - Enforcing policy across organizations
 {% if currentVersion == "free-pro-team@latest" %}- Managing billing settings{% endif %}

content/github/setting-up-and-managing-your-github-profile/customizing-your-profile/personalizing-your-profile.md

@@ -127,6 +127,8 @@ When you participate in certain programs, {% data variables.product.prodname_dot
 | ![{% data variables.product.prodname_dotcom %} Sponsor badge icon](/assets/images/help/profile/badge-sponsors-small.png) | **{% data variables.product.prodname_dotcom %} Sponsor**  | If you sponsored an open source contributor through {% data variables.product.prodname_sponsors %} you'll get a {% data variables.product.prodname_dotcom %} Sponsor badge on your profile. Clicking the badge takes you to the **Sponsoring** tab of your profile. For more information, see "[Sponsoring open source contributors](/github/supporting-the-open-source-community-with-github-sponsors/sponsoring-open-source-contributors)." |
 | {% octicon "cpu" aria-label="The Developer Program icon" %} | **Developer Program Member** | If you're a registered member of the {% data variables.product.prodname_dotcom %} Developer Program, building an app with the {% data variables.product.prodname_dotcom %} API, you'll get a Developer Program Member badge on your profile. For more information on the {% data variables.product.prodname_dotcom %} Developer Program, see [GitHub Developer](/program/). |
 | {% octicon "star-fill" aria-label="The star icon" %} | **Pro** | If you use {% data variables.product.prodname_pro %} you'll get a PRO badge on your profile. For more information about {% data variables.product.prodname_pro %}, see "[{% data variables.product.prodname_dotcom %}'s products](/github/getting-started-with-github/githubs-products#github-pro)." |
+| {% octicon "lock" aria-label="The lock icon" %} | **Security Bug Bounty Hunter** | If you helped out hunting down security vulnerabilities, you'll get a Security Bug Bounty Hunter badge on your profile. For more information about the {% data variables.product.prodname_dotcom %} Security program, see [{% data variables.product.prodname_dotcom %} Security](https://bounty.github.com/). |
+| {% octicon "mortar-board" aria-label="The mortar-board icon" %} | **Github Campus Expert** | If you participate in the {% data variables.product.prodname_dotcom %} Campus Program you'll get a {% data variables.product.prodname_dotcom %} Campus Expert badge on your profile. For more information about the Campus Experts program, see [Campus Experts](https://education.github.com/experts). |
 
 ### Disabling badges on your profile
 

contributing/content-templates.md

@@ -18,13 +18,13 @@ Use the [content model](/contributing/content-model.md#conceptual) for full inst
 title: About [subject]
 intro: 'Article intro. See tips for a great intro below.'
 product: '{{ optional product callout }}'
-productVersions:
+versions:
 ---
 
 <!-- Follow the guidelines in https://github.com/github/docs/blob/main/contributing/content-model.md#conceptual to write this article.-- >
 <!-- Great intros give readers a quick understanding of what's in the article, so they can tell whether it's relevant to them before moving ahead. For more tips, see https://github.com/github/docs/blob/main/contributing/content-model.md#intro. -->
 <!-- For product callout info, see https://github.com/github/docs/tree/main/content#product.-->
-<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#productversions.-->
+<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#versions.-->
 <!-- Remove these comments from your article file when you're done writing. -->
 
 ### A section here
@@ -53,13 +53,13 @@ Use the [content model](https://github.com/github/docs/blob/main/contributing/co
 title: Nouns describing your subject
 intro: 'Article intro. See tips for a great intro below.'
 product: '{{ optional product callout }}'
-productVersions:
+versions:
 ---
 
 <!-- Follow the guidelines in https://github.com/github/docs/blob/main/contributing/content-model.md#referential to write this article.-- >
 <!-- Great intros give readers a quick understanding of what's in the article, so they can tell whether it's relevant to them before moving ahead. For more tips, see https://github.com/github/docs/blob/main/contributing/content-model.md#intro. -->
 <!-- For product callout info, see https://github.com/github/docs/tree/main/content#product.-->
-<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#productversions.-->
+<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#versions.-->
 <!-- Remove these comments from your article file when you're done writing -->
 
 ### A section here
@@ -88,13 +88,13 @@ Use the [content model](https://github.com/github/docs/blob/main/contributing/co
 title: Start with a gerund
 intro: 'Article intro. See tips for a great intro below.'
 product: '{{ optional product callout }}'
-productVersions:
+versions:
 ---
 
 <!-- Follow the guidelines in https://github.com/github/docs/blob/main/contributing/content-model.md#procedural to write this article.-- >
 <!-- Great intros give readers a quick understanding of what's in the article, so they can tell whether it's relevant to them before moving ahead. For more tips, see https://github.com/github/docs/blob/main/contributing/content-model.md#intro. -->
 <!-- For product callout info, see https://github.com/github/docs/tree/main/content#product.-->
-<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#productversions.-->
+<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#versions.-->
 <!-- Remove these comments from your article file when you're done writing -->
 
 ### Procedural section header here
@@ -122,11 +122,11 @@ Use the [content model](https://github.com/github/docs/blob/main/contributing/co
 ---
 title: Quickstart title
 intro: 'Article intro. Highlight that the guide is quick and to the point.'
-productVersions:
+versions:
 ---
 
 <!-- Follow the guidelines in https://github.com/github/docs/blob/main/contributing/content-model.md#quickstart to write this article.-->
-<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#productversions.-->
+<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#versions.-->
 <!-- The entire quickstart should be about 600 words long or take about five minutes to read.-->
 <!-- Remove these comments from your article file when you're done writing -->
 
@@ -172,13 +172,13 @@ Use the [content model](https://github.com/github/docs/blob/main/contributing/co
 title: Tutorial title
 intro: 'Article intro. See tips for a great intro below'
 product: '{{ optional product callout }}'
-productVersions:
+versions:
 ---
 
 <!-- Follow the instructions in https://github.com/github/docs/blob/main/contributing/content-model.md#quickstart to write this article.-->
 <!-- Great intros clarify who the tutorial is intended for, state what the user will accomplish, and state the technologies that will be used.-->
 <!-- For product callout info, see https://github.com/github/docs/tree/main/content#product.-->
-<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#productversions.-->
+<!-- For product version instructions, see https://github.com/github/docs/tree/main/content#versions.-->
 <!-- Remove these comments from your article file when you're done writing -->
 
 ### Introduction
@@ -235,7 +235,7 @@ Use the [tutorial content model](hhttps://github.com/github/docs/blob/main/contr
 title: Guide title
 intro: 'Article intro. See tips for a great intro below'
 product: '{{ site.data.reusables.gated-features.actions }}'
-productVersions:
+versions:
 ---
 
 <!-- 
@@ -312,4 +312,4 @@ productVersions:
 <!--
   This section can simply link out to https://docs.github.com/en/actions/configuring-and-managing-workflows/persisting-workflow-data-using-artifacts or provide additional information about which artifacts might be typical to upload for a CI workflow.
 -->
-```
+```

lib/excluded-links.js

@@ -17,5 +17,6 @@ module.exports = [
   'https://www.facebook.com/',
   'https://ko-fi.com/',
   'https://en.liberapay.com/',
-  'https://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb'
+  'https://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/main/tutorial/06%20-%20Linking%20and%20Interactions.ipynb',
+  'https://www.vmware.com/products/esxi-and-esx.html'
 ]

package-lock.json

@@ -14,7 +14,6 @@
         "ajv": "^8.4.0",
         "ajv-formats": "^2.1.0",
         "algoliasearch": "^4.9.1",
-        "assert": "^2.0.0",
         "browser-date-formatter": "^3.0.3",
         "change-case": "^4.1.2",
         "cheerio": "^1.0.0-rc.3",
@@ -108,8 +107,6 @@
         "cross-env": "^7.0.3",
         "csp-parse": "0.0.2",
         "css-loader": "^4.3.0",
-        "csv-parse": "^4.15.4",
-        "csv-parser": "^3.0.0",
         "dedent": "^0.7.0",
         "domwaiter": "^1.3.0",
         "eslint": "^7.26.0",
@@ -130,12 +127,10 @@
         "jest": "^26.6.3",
         "jest-expect-message": "^1.0.2",
         "jest-github-actions-reporter": "^1.0.3",
-        "jest-silent-reporter": "^0.5.0",
         "jest-slow-test-reporter": "^1.0.0",
         "linkinator": "^2.13.6",
         "make-promises-safe": "^5.1.0",
         "mdast-util-from-markdown": "^0.8.4",
-        "mime": "^2.4.4",
         "mini-css-extract-plugin": "^1.6.0",
         "mkdirp": "^1.0.4",
         "mock-express-response": "^0.3.0",
@@ -144,14 +139,13 @@
         "nodemon": "^2.0.7",
         "npm-merge-driver-install": "^2.0.1",
         "object-hash": "^2.1.1",
-        "postcss": "^8.2.15",
+        "postcss": "^8.3.0",
         "prettier": "^2.3.0",
-        "process": "^0.11.10",
         "replace": "^1.2.1",
         "resolve-url-loader": "^4.0.0",
         "rimraf": "^3.0.2",
         "robots-parser": "^2.3.0",
-        "sass": "^1.32.13",
+        "sass": "^1.34.0",
         "sass-loader": "^11.1.1",
         "start-server-and-test": "^1.12.2",
         "strip-ansi": "^7.0.0",
@@ -8010,27 +8004,6 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
-    "node_modules/csv-parse": {
-      "version": "4.15.4",
-      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.15.4.tgz",
-      "integrity": "sha512-OdBbFc0yZhOm17lSxqkirrHlFFVpKRT0wp4DAGoJelsP3LbGzV9LNr7XmM/lrr0uGkCtaqac9UhP8PDHXOAbMg==",
-      "dev": true
-    },
-    "node_modules/csv-parser": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/csv-parser/-/csv-parser-3.0.0.tgz",
-      "integrity": "sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "csv-parser": "bin/csv-parser"
-      },
-      "engines": {
-        "node": ">= 10"
-      }
-    },
     "node_modules/cwd": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz",
@@ -14022,16 +13995,6 @@
         "node": ">= 10.14.2"
       }
     },
-    "node_modules/jest-silent-reporter": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/jest-silent-reporter/-/jest-silent-reporter-0.5.0.tgz",
-      "integrity": "sha512-epdLt8Oj0a1AyRiR6F8zx/1SVT1Mi7VU3y4wB2uOBHs/ohIquC7v2eeja7UN54uRPyHInIKWdL+RdG228n5pJQ==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "jest-util": "^26.0.0"
-      }
-    },
     "node_modules/jest-slow-test-reporter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jest-slow-test-reporter/-/jest-slow-test-reporter-1.0.0.tgz",
@@ -16220,9 +16183,9 @@
       "optional": true
     },
     "node_modules/nanoid": {
-      "version": "3.1.22",
+      "version": "3.1.23",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-      "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==",
+      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -18282,17 +18245,21 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.2.15",
+      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
-      "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==",
+      "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==",
       "dev": true,
       "dependencies": {
         "colorette": "^1.2.2",
         "nanoid": "^3.1.23",
-        "source-map": "^0.6.1"
+        "source-map-js": "^0.6.2"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
       }
     },
     "node_modules/postcss-modules-extract-imports": {
@@ -18657,27 +18624,6 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
     },
-    "node_modules/postcss/node_modules/nanoid": {
-      "version": "3.1.23",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
-      "dev": true,
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/postcss/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -20176,9 +20122,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.32.13",
+      "version": "1.34.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.34.0.tgz",
-      "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
+      "integrity": "sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==",
       "devOptional": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0"
@@ -20778,6 +20724,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-resolve": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",
@@ -21524,6 +21479,15 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
       }
     },
     "node_modules/styled-components/node_modules/supports-color": {
@@ -31192,21 +31156,6 @@
         }
       }
     },
-    "csv-parse": {
-      "version": "4.15.4",
-      "resolved": "https://registry.npmjs.org/csv-parse/-/csv-parse-4.15.4.tgz",
-      "integrity": "sha512-OdBbFc0yZhOm17lSxqkirrHlFFVpKRT0wp4DAGoJelsP3LbGzV9LNr7XmM/lrr0uGkCtaqac9UhP8PDHXOAbMg==",
-      "dev": true
-    },
-    "csv-parser": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/csv-parser/-/csv-parser-3.0.0.tgz",
-      "integrity": "sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==",
-      "dev": true,
-      "requires": {
-        "minimist": "^1.2.0"
-      }
-    },
     "cwd": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz",
@@ -36183,16 +36132,6 @@
         "graceful-fs": "^4.2.4"
       }
     },
-    "jest-silent-reporter": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/jest-silent-reporter/-/jest-silent-reporter-0.5.0.tgz",
-      "integrity": "sha512-epdLt8Oj0a1AyRiR6F8zx/1SVT1Mi7VU3y4wB2uOBHs/ohIquC7v2eeja7UN54uRPyHInIKWdL+RdG228n5pJQ==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.0.0",
-        "jest-util": "^26.0.0"
-      }
-    },
     "jest-slow-test-reporter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/jest-slow-test-reporter/-/jest-slow-test-reporter-1.0.0.tgz",
@@ -38052,9 +37991,9 @@
       "optional": true
     },
     "nanoid": {
-      "version": "3.1.22",
+      "version": "3.1.23",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-      "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ=="
+      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -39866,28 +39805,14 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.2.15",
+      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.15.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.0.tgz",
-      "integrity": "sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==",
+      "integrity": "sha512-+ogXpdAjWGa+fdYY5BQ96V/6tAo+TdSSIMP5huJBIygdWwKtVoB5JWZ7yUd4xZ8r+8Kvvx4nyg/PQ071H4UtcQ==",
       "dev": true,
       "requires": {
         "colorette": "^1.2.2",
         "nanoid": "^3.1.23",
-        "source-map": "^0.6.1"
+        "source-map-js": "^0.6.2"
-      },
-      "dependencies": {
-        "nanoid": {
-          "version": "3.1.23",
-          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-          "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
       }
     },
     "postcss-modules-extract-imports": {
@@ -41459,9 +41384,9 @@
       }
     },
     "sass": {
-      "version": "1.32.13",
+      "version": "1.34.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.13.tgz",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.34.0.tgz",
-      "integrity": "sha512-dEgI9nShraqP7cXQH+lEXVf73WOPCse0QlFzSD8k+1TcOxCMwVXfQlr0jtoluZysQOyJGnfr21dLvYKDJq8HkA==",
+      "integrity": "sha512-rHEN0BscqjUYuomUEaqq3BMgsXqQfkcMVR7UhscsAVub0/spUrZGBMxQXFS2kfiDsPLZw5yuU9iJEFNC2x38Qw==",
       "devOptional": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0"
@@ -41979,6 +41904,12 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
+    "source-map-js": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
+      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "dev": true
+    },
     "source-map-resolve": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz",

package.json

@@ -20,7 +20,6 @@
     "ajv": "^8.4.0",
     "ajv-formats": "^2.1.0",
     "algoliasearch": "^4.9.1",
-    "assert": "^2.0.0",
     "browser-date-formatter": "^3.0.3",
     "change-case": "^4.1.2",
     "cheerio": "^1.0.0-rc.3",
@@ -114,8 +113,6 @@
     "cross-env": "^7.0.3",
     "csp-parse": "0.0.2",
     "css-loader": "^4.3.0",
-    "csv-parse": "^4.15.4",
-    "csv-parser": "^3.0.0",
     "dedent": "^0.7.0",
     "domwaiter": "^1.3.0",
     "eslint": "^7.26.0",
@@ -136,12 +133,10 @@
     "jest": "^26.6.3",
     "jest-expect-message": "^1.0.2",
     "jest-github-actions-reporter": "^1.0.3",
-    "jest-silent-reporter": "^0.5.0",
     "jest-slow-test-reporter": "^1.0.0",
     "linkinator": "^2.13.6",
     "make-promises-safe": "^5.1.0",
     "mdast-util-from-markdown": "^0.8.4",
-    "mime": "^2.4.4",
     "mini-css-extract-plugin": "^1.6.0",
     "mkdirp": "^1.0.4",
     "mock-express-response": "^0.3.0",
@@ -150,14 +145,13 @@
     "nodemon": "^2.0.7",
     "npm-merge-driver-install": "^2.0.1",
     "object-hash": "^2.1.1",
-    "postcss": "^8.2.15",
+    "postcss": "^8.3.0",
     "prettier": "^2.3.0",
-    "process": "^0.11.10",
     "replace": "^1.2.1",
     "resolve-url-loader": "^4.0.0",
     "rimraf": "^3.0.2",
     "robots-parser": "^2.3.0",
-    "sass": "^1.32.13",
+    "sass": "^1.34.0",
     "sass-loader": "^11.1.1",
     "start-server-and-test": "^1.12.2",
     "strip-ansi": "^7.0.0",

pages/[versionId]/[productId]/[...restPage]/index.tsx

@@ -0,0 +1,5 @@
+import GlobalPage from '../index'
+
+export { getServerSideProps } from '../index'
+
+export default GlobalPage

pages/[versionId]/[productId]/index.tsx

@@ -1,126 +1,61 @@
 import { GetServerSideProps } from 'next'
-import { Grid } from '@primer/components'
 
 import {
   MainContextT,
   MainContext,
   getMainContextFromRequest,
 } from 'components/context/MainContext'
-import { DefaultLayout } from 'components/DefaultLayout'
 import {
   getProductLandingContextFromRequest,
   ProductLandingContextT,
   ProductLandingContext,
-  useProductLandingContext,
 } from 'components/context/ProductLandingContext'
 
-import { LandingHero } from 'components/landing/LandingHero'
+import { ProductLanding } from 'components/landing/ProductLanding'
-import { FeaturedArticles } from 'components/landing/FeaturedArticles'
+import { TocLanding } from 'components/landing/TocLanding'
-import { GuideCards } from 'components/landing/GuideCards'
+import {
-import { SponsorsExamples } from 'components/landing/SponsorsExamples'
+  getTocLandingContextFromRequest,
-import { CommunityExamples } from 'components/landing/CommunityExamples'
+  TocLandingContext,
-import { CodeExamples } from 'components/landing/CodeExamples'
+  TocLandingContextT,
-import { LandingSection } from 'components/landing/LandingSection'
+} from 'components/context/TocLandingContext'
-import { useTranslation } from 'components/hooks/useTranslation'
-import { ProductArticlesList } from 'components/landing/ProductArticlesList'
-import { TableOfContents } from 'components/landing/TableOfContents'
-import { ArticleVersionPicker } from 'components/article/ArticleVersionPicker'
 
 type Props = {
   mainContext: MainContextT
   productLandingContext: ProductLandingContextT
+  tocLandingContext: TocLandingContextT
 }
-const ProductPage = ({ mainContext, productLandingContext }: Props) => {
+const GlobalPage = ({ mainContext, productLandingContext, tocLandingContext }: Props) => {
-  return (
+  const { currentLayoutName, page, relativePath } = mainContext
-    <MainContext.Provider value={mainContext}>
+
+  let content
+  if (currentLayoutName === 'product-landing') {
+    content = (
       <ProductLandingContext.Provider value={productLandingContext}>
-        {mainContext.currentLayoutName === 'product-landing' ? (
+        <ProductLanding />
-          <ProductLanding />
-        ) : (
-          <TocProductLanding />
-        )}
       </ProductLandingContext.Provider>
-    </MainContext.Provider>
+    )
-  )
+  } else if (currentLayoutName === 'product-sublanding') {
+    content = <p>todo: product sub-landing</p>
+  } else if (relativePath?.endsWith('index.md')) {
+    content = (
+      <TocLandingContext.Provider value={tocLandingContext}>
+        <TocLanding
+          variant={
+            page.documentType === 'category' || relativePath === 'github/index.md'
+              ? 'compact'
+              : 'expanded'
+          }
+        />
+      </TocLandingContext.Provider>
+    )
+  } else {
+    content = <p>article / fallback rendering</p>
+  }
+
+  return <MainContext.Provider value={mainContext}>{content}</MainContext.Provider>
 }
 
-const ProductLanding = () => {
+export default GlobalPage
-  const { title, guideCards, productUserExamples, productCommunityExamples, productCodeExamples } =
-    useProductLandingContext()
-  const { t } = useTranslation('product_landing')
-
-  return (
-    <DefaultLayout>
-      <LandingSection className="pt-3">
-        <LandingHero />
-      </LandingSection>
-
-      <LandingSection>
-        <FeaturedArticles />
-      </LandingSection>
-
-      {productCodeExamples.length > 0 && (
-        <LandingSection title={t('code_examples')} className="my-6">
-          <CodeExamples />
-        </LandingSection>
-      )}
-
-      {productCommunityExamples.length > 0 && (
-        <LandingSection title={t('communities_using_discussions')} className="my-6">
-          <CommunityExamples />
-        </LandingSection>
-      )}
-
-      {productUserExamples.length > 0 && (
-        <LandingSection title={t('sponsor_community')} className="my-6">
-          <SponsorsExamples />
-        </LandingSection>
-      )}
-
-      {guideCards.length > 0 && (
-        <div className="color-bg-tertiary py-6 my-8">
-          <LandingSection title={t('guides')} className="my-6">
-            <GuideCards />
-          </LandingSection>
-        </div>
-      )}
-
-      <LandingSection sectionLink="all-docs" title={`All ${title} Docs`}>
-        <ProductArticlesList />
-      </LandingSection>
-    </DefaultLayout>
-  )
-}
-
-const TocProductLanding = () => {
-  const { title, introPlainText, tocItems } = useProductLandingContext()
-  return (
-    <DefaultLayout>
-      <Grid
-        className="container-xl px-3 px-md-6 my-4 my-lg-4 container-xl "
-        gridTemplateColumns="minmax(500px, 720px) minmax(220px, 1fr)"
-        gridTemplateRows="auto 1fr"
-        gridGap={16}
-      >
-        <div>
-          <h1 className="my-4">{title}</h1>
-          <div className="lead-mktg">
-            <p>{introPlainText}</p>
-          </div>
-
-          <div className="mt-7">
-            <TableOfContents items={tocItems} />
-          </div>
-        </div>
-        <div>
-          <ArticleVersionPicker />
-        </div>
-      </Grid>
-    </DefaultLayout>
-  )
-}
-
-export default ProductPage
 
 export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
   const req = context.req as any
@@ -129,6 +64,7 @@ export const getServerSideProps: GetServerSideProps<Props> = async (context) =>
     props: {
       mainContext: getMainContextFromRequest(req),
       productLandingContext: getProductLandingContextFromRequest(req),
+      tocLandingContext: getTocLandingContextFromRequest(req),
     },
   }
 }

stylesheets/index.scss

@@ -39,3 +39,4 @@ $marketing-font-path: "/dist/fonts/";
 @import "tables.scss";
 @import "toggle-images-button.scss";
 @import "underline-dashed.scss";
+@import "utilities.scss";

stylesheets/lists.scss

@@ -1,6 +1,10 @@
 /* Numbered procedures (step 1, step 2, ...)
 ------------------------------------------------------------------------------*/
 
+.list-style-inside {
+  list-style: inside;
+}
+
 .markdown-body ol {
   counter-reset: li;
   list-style: none;

stylesheets/opacity.scss

@@ -1,6 +1,12 @@
+.opacity-0 {
+  opacity: 0;
+}
 .opacity-60 {
   opacity: 0.6;
 }
 .opacity-70 {
   opacity: 0.7;
 }
+.opacity-100 {
+  opacity: 1;
+}

stylesheets/utilities.scss

@@ -0,0 +1,7 @@
+.transition-200 {
+  transition: 200ms
+}
+
+.rotate-180 {
+  transform: rotateX(180deg)
+}