Merge branch 'main' into repo-sync

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,7 +17,6 @@ export const ArticleVersionPicker = () => {
   }
 
   return (
-    <div className="d-none d-lg-flex flex-justify-end">
     <Dropdown
       css={`
         ul {
@@ -53,6 +52,5 @@ export const ArticleVersionPicker = () => {
         </div>
       </Dropdown.Menu>
     </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,52 +49,62 @@ 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}
+                        page={childPage}
+                      />
+                    )}
+                  </li>
+                )
+              })}
+            </ul>
+          </li>
+        </>
+      )}
+    </>
+  )
+}
+
+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={childPage.href}>
+          <Link href={page.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}
+              {title}
             </a>
           </Link>
-                            {i < 3 && (
+          {page.childPages.length > 0 && (
-                              <svg
+            <span style={{ marginTop: 7 }} className="flex-shrink-0 pr-3">
-                                xmlns="http://www.w3.org/2000/svg"
+              <ChevronDownIcon className={cx('opacity-60', isOpen && 'rotate-180')} />
-                                className="octicon flex-shrink-0 arrow mr-3"
+            </span>
-                                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' ? (
+      {page.childPages[0].page.documentType === 'mapTopic' ? (
         <ul className="sidebar-topics list-style-none position-relative">
-                                {childPage.childPages.map((grandchildPage, i) => {
+          {page.childPages.map((childPage, i) => {
-                                  const grandchildTitle =
+            const childTitle = childPage.renderedShortTitle || childPage.renderedFullTitle
-                                    grandchildPage.renderedShortTitle ||
+            const isActive = routePath.includes(childPage.href)
-                                    grandchildPage.renderedFullTitle
+            const isCurrent = routePath === childPage.href
-                                  const isActive = routePath.includes(grandchildPage.href)
-                                  const isCurrent = routePath === grandchildPage.href
             return (
               <li
                 key={childPage.href + i}
@@ -108,55 +114,13 @@ export const SidebarProduct = () => {
                   isCurrent && 'is-current-page'
                 )}
               >
-                                      <Link href={grandchildPage.href}>
+                <Link href={childPage.href}>
-                                        <a className="pl-4 pr-5 py-2 color-text-primary">{grandchildTitle}</a>
+                  <a className="pl-4 pr-5 py-2 color-text-primary no-underline">{childTitle}</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.renderedShortTitle || grandchildPage.renderedFullTitle
-                                    grandchildPage.renderedFullTitle
                     const isLast = i === arr.length - 1
                     const isActive = routePath.includes(grandchildPage.href)
                     const isCurrent = routePath === grandchildPage.href
@@ -170,7 +134,12 @@ export const SidebarProduct = () => {
                         )}
                       >
                         <Link href={grandchildPage.href}>
-                                        <a className={cx('pl-6 pr-5 py-1 color-text-primary', isLast && 'pb-2')}>
+                          <a
+                            className={cx(
+                              'pl-6 pr-5 py-1 color-text-primary no-underline',
+                              isLast && 'pb-2'
+                            )}
+                          >
                             {grandchildTitle}
                           </a>
                         </Link>
@@ -178,18 +147,37 @@ export const SidebarProduct = () => {
                     )
                   })}
                 </ul>
-                            ) : null}
-                          </>
-                        ) : null}
-                      </details>
-                    )}
               </li>
             )
           })}
         </ul>
-          </li>
+      ) : 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/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 %}

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 />
-        ) : (
-          <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>
   }
 
-const ProductLanding = () => {
+  return <MainContext.Provider value={mainContext}>{content}</MainContext.Provider>
-  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 = () => {
+export default GlobalPage
-  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)
+}